/* Rancho, el asistente (ver asistente.js). El diseño es el del lienzo "Chat de Rancho".
 *
 * La hoja tiene dos formas. GRANDE mientras Rancho es el protagonista (esperando, escuchando,
 * pensando, hablando): su cabeza sobre el brillo del protector y lo que dice en su letra. CHICA
 * cuando mandan otras cosas (listo, escribiendo): la cabeza se achica a la cabecera y queda lugar
 * para la charla y lo que hizo.
 *
 * Va arriba y no abajo: en el iPhone el teclado ocupa la mitad de abajo.
 */

/* ── el botón ─────────────────────────────────────────────────────────── */
.rancho-btn {
  position: fixed; z-index: 40;
  right: calc(16px + env(safe-area-inset-right));
  bottom: calc(16px + env(safe-area-inset-bottom));
  width: 58px; height: 58px; padding: 0;
  border: 2px solid var(--accent); border-radius: 50%;
  background: var(--zone); overflow: hidden;
}
.rancho-btn img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rancho-btn[hidden] { display: none; }

/* Que el botón no tape lo último de la página al bajar hasta el fondo. */
.wrap { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

/* ── el velo y la hoja ────────────────────────────────────────────────── */
/* El velo no se arrastra ni cierra la hoja: se cierra con la cruz. */
.rancho-fondo { position: fixed; inset: 0; z-index: 41; background: rgba(0, 0, 0, 0.62); touch-action: none; }
.rancho-fondo[hidden], .rancho-hoja[hidden] { display: none; }

/* Del alto de lo que se ve, hasta 820 y centrada. Con visualViewport, el alto y el lugar los
   pone asistente.js, que además sigue al teclado. */
.rancho-hoja {
  position: fixed; z-index: 42;
  top: calc(12px + env(safe-area-inset-top));
  bottom: calc(12px + env(safe-area-inset-bottom));
  left: calc(12px + env(safe-area-inset-left));
  right: calc(12px + env(safe-area-inset-right));
  max-width: 560px; max-height: 820px; margin: auto;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-zone);
}

/* ── la cabecera ──────────────────────────────────────────────────────── */
/* Todo cae en una columna a 14 px del borde de la hoja. A la derecha no hay: la cruz, como se
   dibuja, ya termina casi en el borde de la columna, y su botón de 44 llega al borde. */
.rancho-cab { display: flex; align-items: center; gap: 10px; padding: 8px 0 0 14px; min-height: 48px; flex: none; }
.rancho-mini { position: relative; width: 56px; height: 56px; flex: none; }
.rancho-mini .rancho-brillo { position: absolute; left: -14px; top: -14px; width: 84px; height: 84px; }
.rancho-mini .rancho-cabeza { width: 56px; height: 56px; }
.rancho-titulo { display: flex; flex-direction: column; gap: 3px; }
.rancho-nombre { font-family: var(--fuente-nombre); font-size: 20px; line-height: 1; }
.rancho-icono {
  width: 44px; height: 44px; padding: 0; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; color: var(--muted);
}
.rancho-voz { margin-left: auto; color: var(--text); }
.rancho-voz[aria-pressed="false"] { color: var(--muted); }
.rancho-voz .apagada, .rancho-voz[aria-pressed="false"] .prendida { display: none; }
.rancho-voz[aria-pressed="false"] .apagada { display: block; }

.rancho-estado {
  font-family: var(--fuente-tecnica); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted);
}
.rancho-hoja[data-estado="escuchando"] .rancho-estado,
.rancho-hoja[data-estado="hablando"] .rancho-estado { color: var(--accent); }

/* Una forma o la otra. */
.rancho-hoja[data-forma="grande"] .rancho-mini,
.rancho-hoja[data-forma="grande"] .rancho-titulo,
.rancho-hoja[data-forma="chica"] .rancho-cab .pildora,
.rancho-hoja[data-forma="chica"] .rancho-escena { display: none; }

/* ── el escenario: Rancho grande y lo que dice ────────────────────────── */
.rancho-escena { position: relative; display: flex; flex-direction: column; align-items: center; padding: 0 16px 14px; flex: none; }
.rancho-escena .rancho-brillo { position: absolute; left: 50%; top: -34px; width: 300px; height: 250px; margin-left: -150px; }
.rancho-escena .rancho-cabeza { width: 156px; height: 156px; }
.rancho-escena .rancho-estado { position: relative; margin-top: 6px; }
/* Lugar para dos renglones desde el principio (30 x 1,12 x 2): si la leyenda pasa a dos
   mientras habla, no empuja nada. */
.rancho-leyenda {
  position: relative; margin-top: 4px; min-height: 68px; max-width: 320px; text-align: center;
  font-family: var(--fuente-mano); font-size: 30px; line-height: 1.12; color: var(--accent);
}
/* Grande y sin charla (en reposo, o escribiendo antes del primer pedido): Rancho en el medio del
   lugar libre y los ejemplos abajo, pegados al renglón, al lado de donde se toca. */
.rancho-hoja[data-forma="grande"][data-charla="no"] .rancho-escena { margin: auto 0; }
.rancho-hoja[data-forma="grande"][data-charla="no"] .rancho-form { margin-top: 0; }

/* Hacia dónde mira la cabeza lo dibuja rancho/cabeza.js, cuadro a cuadro y a 60 por segundo,
   con dos capas adentro. Acá queda lo que se inclina, rebota o late. */
.rancho-cabeza { position: relative; transition: transform .45s ease; }
.rancho-brillo {
  pointer-events: none; transition: opacity .4s ease;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--brasa-brillo) 52%, transparent), color-mix(in srgb, var(--brasa-brillo) 20%, transparent) 55%, transparent);
}
@keyframes rancho-habla { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-4px) scale(1.03); } }
@keyframes rancho-late { 0%, 100% { opacity: .7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.07); } }

/* Escuchando inclina la cabeza, como un perro que escucha. */
.rancho-hoja[data-estado="escuchando"] .rancho-cabeza { transform: rotate(-10deg); }
.rancho-hoja[data-estado="escuchando"] .rancho-brillo { animation: rancho-late 1.8s ease-in-out infinite; }
/* Escuchando con el micrófono propio, el brillo va con la voz de Lucas (--voz lo pone
   rancho/cabeza.js en el padre de la cabeza). La cabeza queda inclinada y quieta. */
.rancho-hoja[data-estado="escuchando"] [data-voz] > .rancho-brillo {
  animation: none; transition: none;
  opacity: calc(.55 + var(--voz, 0) * .45); transform: scale(calc(1 + var(--voz, 0) * .06));
}
.rancho-hoja[data-estado="pensando"] .rancho-cabeza { transform: rotate(6deg); }
.rancho-hoja[data-estado="pensando"] .rancho-brillo { opacity: .55; }
.rancho-hoja[data-estado="hablando"] .rancho-cabeza { animation: rancho-habla .34s ease-in-out infinite; }
.rancho-hoja[data-estado="hablando"] .rancho-brillo { animation: rancho-late .68s ease-in-out infinite; }

/* ── la charla: pegada abajo, se desplaza para arriba ─────────────────── */
/* Es lo único de la hoja que se desplaza, y al llegar al tope no arrastra nada más. */
.rancho-charla { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column-reverse; padding: 4px 14px 14px; }
.rancho-charla[hidden] { display: none; }
.rancho-renglones { display: flex; flex-direction: column; gap: 12px; }
.rancho-vos {
  align-self: flex-end; max-width: 86%; margin: 0; padding: 9px 12px;
  background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius-card) var(--radius-card) 2px var(--radius-card);
  font-size: 15px; line-height: 1.4;
}
.rancho-dice { margin: 0; font-size: 15px; line-height: 1.45; }
.rancho-dice.falla { color: var(--danger); }

.rancho-puntos { display: flex; gap: 6px; padding: 6px 2px; }
.rancho-puntos span { width: 8px; height: 8px; border-radius: 2px; background: var(--accent); animation: rancho-punto 1.2s ease-in-out infinite; }
.rancho-puntos span:nth-child(2) { animation-delay: .2s; }
.rancho-puntos span:nth-child(3) { animation-delay: .4s; }
/* En la burbuja de Lucas, mientras se pasa su voz a texto: los mismos puntitos, en su color. */
.rancho-vos .rancho-puntos { padding: 4px 0; }
.rancho-vos .rancho-puntos span { background: var(--muted); }
@keyframes rancho-punto { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* Lo que hizo: una tarjeta por cosa. */
.rancho-accion { display: flex; flex-direction: column; gap: 3px; padding: 11px 14px 12px; background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius-zone); }
.rancho-accion-cab { display: flex; align-items: center; gap: 8px; }
.rancho-accion-marca { width: 11px; height: 11px; flex: none; border-radius: 2px; background: var(--accent); }
.rancho-accion-tipo { font-family: var(--fuente-tecnica); font-weight: 500; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.rancho-accion-estado { margin-left: auto; display: flex; align-items: center; gap: 4px; font-family: var(--fuente-tecnica); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.rancho-accion-titulo { margin-top: 4px; font-family: var(--fuente-nombre); font-size: 20px; line-height: 1.05; }
.rancho-accion-detalle { font-size: 13px; line-height: 1.35; color: var(--muted); }
.rancho-accion button {
  align-self: flex-start; margin-top: 8px; height: 44px; padding: 0 14px;
  background: transparent; border: 1px solid var(--border); border-radius: var(--radius-btn);
  font-family: var(--fuente-tecnica); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase;
}
.rancho-accion.deshecha { opacity: .6; }
.rancho-accion.deshecha .rancho-accion-marca { background: var(--border); }
.rancho-accion.deshecha .rancho-accion-estado { color: var(--muted); }

/* Cuando Rancho pregunta algo: dos botones. */
.rancho-respuestas { display: flex; gap: 8px; }
.rancho-respuestas button {
  flex: 1 1 0; height: 44px; border-radius: var(--radius-btn);
  font-family: var(--fuente-tecnica); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
}
.rancho-respuestas .si { background: var(--accent); border: 1px solid var(--accent); color: var(--on-accent); }
.rancho-respuestas .no { background: transparent; border: 1px solid var(--border); }

/* ── en reposo: qué decirle ───────────────────────────────────────────── */
.rancho-sugerencias { display: flex; flex-direction: column; gap: 8px; padding: 0 14px 14px; flex: none; }
.rancho-sugerencias[hidden] { display: none; }
.rancho-sugerencias .lbl { margin: 0; }
.rancho-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rancho-chips button {
  min-height: 44px; padding: 7px 12px; background: transparent; border: 1px solid var(--border);
  border-radius: var(--radius-btn); font-size: 13.5px; line-height: 1.3; text-align: left;
}

/* ── la entrada: escribir o hablar ────────────────────────────────────── */
/* Siempre abajo y quieto, haya charla o no. */
.rancho-form { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 10px 14px 12px; border-top: 1px solid var(--card-border); flex: none; }
/* 16 px como mínimo: con menos, el iPhone agranda la página al tocar el renglón. */
.rancho-texto {
  flex: 1 1 auto; min-width: 0; height: 48px; padding: 0 14px;
  background: var(--zone); border: 1px solid var(--border); border-radius: var(--radius-card);
  color: var(--text); font-family: var(--fuente-ui); font-size: 16px; outline: none;
}
.rancho-texto::placeholder { color: var(--muted); }
.rancho-texto:focus { border-color: var(--accent); }
.rancho-oyendo {
  flex: 1 1 auto; height: 48px; display: none; align-items: center; gap: 12px; padding: 0 14px;
  background: var(--zone); border: 1px solid var(--accent); border-radius: var(--radius-card); font-size: 15px; color: var(--muted);
}
/* También mientras abre el micrófono: en el mismo toque, antes de que el iPhone lo dé. */
.rancho-hoja[data-estado="escuchando"] .rancho-oyendo,
.rancho-hoja[data-abriendo] .rancho-oyendo { display: flex; }
.rancho-hoja[data-estado="escuchando"] .rancho-texto,
.rancho-hoja[data-abriendo] .rancho-texto { display: none; }
.rancho-nivel { display: flex; align-items: center; gap: 4px; height: 22px; }
/* Cada barrita es una lectura del volumen de Lucas: asistente.js las corre cada 70 ms con --n, de
   .25 a 1. Antes de que hable quedan chatas, así se ve que espera la voz. */
.rancho-nivel span {
  display: block; width: 4px; height: 22px; border-radius: 2px; background: var(--accent);
  transform: scaleY(var(--n, .25)); transition: transform 70ms linear;
}

/* El aviso de arriba del renglón: el permiso del micrófono, o dos veces sin entender. */
.rancho-aviso { flex: none; margin: 0; padding: 0 14px 8px; font-size: 13px; line-height: 1.35; color: var(--muted); }
.rancho-aviso b { color: var(--text); font-weight: 500; }
.rancho-aviso[hidden] { display: none; }

/* El botón redondo: micrófono, flechita para mandar o cuadradito para parar. */
.rancho-boton { position: relative; width: 52px; height: 52px; flex: none; }
.rancho-boton button {
  position: relative; width: 52px; height: 52px; padding: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); border: none; color: var(--on-accent);
}
.rancho-boton svg { display: none; }
.rancho-boton[data-modo="hablar"] .hablar,
.rancho-boton[data-modo="mandar"] .mandar,
.rancho-boton[data-modo="parar"] .parar { display: block; }
.rancho-onda { position: absolute; inset: 0; border-radius: 50%; background: var(--accent); display: none; }
.rancho-boton[data-modo="parar"] .rancho-onda { display: block; animation: rancho-onda 1.4s ease-out infinite; }
@keyframes rancho-onda { from { transform: scale(1); opacity: .5; } to { transform: scale(1.65); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .rancho-cabeza, .rancho-brillo, .rancho-puntos span, .rancho-onda { animation: none !important; }
  .rancho-nivel span { transform: scaleY(.5); transition: none; }
}