/* Identidad visual del chat.
 *
 * La paleta es la misma de los documentos (latex/bioinfcr.sty): teal para
 * bioinformática, ámbar para agrotech. Que el sitio y el PDF que produce se
 * parezcan no es coquetería — es lo que hace que un informe firmado se
 * reconozca como salido de acá.
 *
 * Pensado para móvil primero: el público meta tiene ~96 % de penetración de
 * celular y ~82 % de internet fijo, así que el caso normal es un teléfono con
 * una mano y sol de frente. De ahí el contraste alto y los blancos de toque
 * grandes.
 *
 * Corregido el 10 set. 2026 (informe técnico 20 + informe 21): medido contra
 * WCAG 2.1, --tenue y --ambar en modo claro fallaban texto normal (4,06:1 y
 * 3,93:1 contra --papel, bajo el 4,5:1 exigido) y --borde fallaba por mucho
 * el 3:1 de componentes de UI en los dos temas (1,25:1 claro, 1,42:1
 * oscuro) -- el borde de cada burbuja, cada input y cada chip era casi
 * invisible. Se llevaron a AAA los cuatro colores de texto/acento (mismos
 * valores ya corregidos en bioinfcr-cliente.sty, misma audiencia) y el
 * borde a AA con margen real en los dos temas, no al límite.
 */
:root {
  --teal: #005E53;
  --teal-claro: #e3efed;
  --ambar: #744500;
  --ambar-claro: #fbf1e2;
  --tinta: #1B2A2A;
  --tenue: #465151;
  --papel: #F4F7F6;
  --borde: #607C75;
  --alerta: #932A2A;
  /* Fondo sólido para texto/ícono blanco encima (.saltar, .dato.listo,
     el botón de enviar) -- deliberadamente NO es var(--teal): esa varía
     por tema para seguir siendo legible como texto sobre fondo oscuro, y
     un teal aclarado para ese uso no sostiene blanco encima (2,45:1 medido
     en modo oscuro antes de esta corrección). Éste se queda fijo. */
  --teal-boton: #005E53;
  --radio: 14px;
  --ancho: 46rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --teal: #4db6a8;
    --teal-claro: #16302d;
    --ambar: #d99a3d;
    --ambar-claro: #33260f;
    --tinta: #e7eeec;
    --tenue: #9bacaa;
    --papel: #101817;
    --borde: #5A807B;
    /* --alerta no tenía variante oscura: el rojo de modo claro, sin
       aclarar, medía 2,13:1 contra el fondo de .burbuja.error en oscuro
       (#2a1616) -- prácticamente ilegible. Se reusa el mismo ROJO oscuro
       ya corregido en core/colores.py (admin), misma familia de color. */
    --alerta: #F08A82;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--papel); color: var(--tinta);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  overscroll-behavior-y: none;
}
body { display: flex; flex-direction: column; }

.saltar {
  position: absolute; left: -9999px;
  background: var(--teal-boton); color: #fff; padding: .6rem 1rem; z-index: 20;
}
.saltar:focus { left: .5rem; top: .5rem; }

/* ── Aviso de sitio en construcción ───────────────────────────
   Deliberadamente NO sticky, a diferencia de .cabecera: en el público meta
   (mobile-first, ver la nota de arriba) un segundo elemento fijo le come
   pantalla a la conversación en cada scroll. Mostrarlo una vez, arriba de
   todo al cargar, alcanza para el aviso -- no hace falta que persista. */
.banner-construccion {
  padding: .55rem 1rem;
  background: #fdf0f0;
  border-bottom: 2px solid var(--alerta);
  color: var(--alerta);
  font-size: .85rem;
  text-align: center;
}
@media (prefers-color-scheme: dark) { .banner-construccion { background: #2a1616; } }

/* ── Cabecera ─────────────────────────────────────────────── */
.cabecera {
  padding: .9rem 1rem .7rem;
  border-bottom: 1px solid var(--borde);
  background: var(--papel);
  position: sticky; top: 0; z-index: 5;
}
.marca { display: flex; align-items: center; gap: .5rem; }
.sol { width: 26px; height: 26px; fill: var(--ambar); stroke: var(--ambar); stroke-width: 2.2; }
.sol circle { stroke: none; }
.palabra { font-weight: 700; color: var(--teal); letter-spacing: -.01em; }
.proyecto { color: var(--tenue); font-size: .95rem; }
.lema { margin: .35rem 0 0; color: var(--tenue); font-size: .82rem; }
.cabecera::after {
  content: ""; display: block; height: 3px; margin-top: .7rem;
  background: linear-gradient(to right,
    var(--teal) 0 16%, var(--ambar) 16% 20%, var(--borde) 20% 100%);
  border-radius: 2px;
}

/* ── Conversación ─────────────────────────────────────────── */
.conversacion {
  flex: 1; overflow-y: auto;
  padding: 1rem;
  width: 100%; max-width: var(--ancho); margin: 0 auto;
  -webkit-overflow-scrolling: touch;
}
.burbuja {
  max-width: 88%; margin-bottom: .9rem; padding: .7rem .95rem;
  border-radius: var(--radio); border: 1px solid var(--borde);
  animation: entrar .18s ease-out;
}
@media (prefers-reduced-motion: reduce) { .burbuja { animation: none; } }
@keyframes entrar { from { opacity: 0; transform: translateY(4px); } }

.burbuja.sistema, .burbuja.progreso {
  background: #fff; border-left: 3px solid var(--teal);
}
@media (prefers-color-scheme: dark) {
  .burbuja.sistema, .burbuja.progreso { background: #16211f; }
}
/* .progreso, no .sistema: el narrado del cálculo (chat.js, sondearCalculo)
   no es un turno del chat -- si llevara .sistema, texto_burbujas() del
   arnés de humo (humo_navegador.py) lo leería como una pregunta más y el
   LLM productor intentaría "contestarle" a una barra de progreso. */
.burbuja.persona {
  background: var(--teal-claro); border-color: transparent;
  margin-left: auto; border-bottom-right-radius: 4px;
}
.burbuja.error { background: #fdf0f0; border-left: 3px solid var(--alerta); color: var(--alerta); }
/* La única acción con consecuencia económica del chat: pedir la revisión.
   Se distingue de un enlace de descarga a propósito. */
.boton-accion {
  display: inline-block; margin-top: .6rem; padding: .55rem 1rem;
  border: 0; border-radius: var(--radio); cursor: pointer;
  background: var(--teal); color: #fff; font: inherit; font-weight: 600;
}
.boton-accion:hover { filter: brightness(1.1); }
.boton-accion:disabled { opacity: .6; cursor: default; }
@media (prefers-color-scheme: dark) { .burbuja.error { background: #2a1616; } }

.burbuja > :first-child { margin-top: 0; }
.burbuja > :last-child { margin-bottom: 0; }
.burbuja h3, .burbuja h4 { font-size: 1rem; margin: .8rem 0 .3rem; color: var(--teal); }
.burbuja code {
  background: var(--ambar-claro); padding: .1em .35em; border-radius: 4px;
  font-size: .88em;
}
.burbuja pre { background: var(--ambar-claro); padding: .7rem; border-radius: 8px; overflow-x: auto; }
.burbuja pre code { background: none; padding: 0; }
.burbuja blockquote {
  margin: .5rem 0; padding-left: .8rem;
  border-left: 3px solid var(--ambar); color: var(--tenue);
}
.burbuja table { border-collapse: collapse; width: 100%; font-size: .88rem; display: block; overflow-x: auto; }
.burbuja th, .burbuja td { border: 1px solid var(--borde); padding: .35rem .5rem; text-align: left; }
.burbuja th { background: var(--teal-claro); }
.burbuja hr { border: none; border-top: 1px solid var(--borde); margin: .7rem 0; }
.burbuja a { color: var(--ambar); }

.adjunto {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--ambar-claro); border: 1px solid var(--ambar);
  border-radius: 10px; padding: .45rem .7rem; margin-top: .4rem;
  font-size: .87rem; color: var(--tinta); text-decoration: none;
}

.pensando { color: var(--tenue); font-style: italic; }

/* ── Estado de la captura ─────────────────────────────────── */
.panel-estado {
  display: flex; gap: .4rem; flex-wrap: wrap;
  padding: .5rem 1rem; width: 100%; max-width: var(--ancho); margin: 0 auto;
  border-top: 1px solid var(--borde);
}
.dato {
  font-size: .74rem; padding: .18rem .55rem; border-radius: 999px;
  border: 1px solid var(--borde); color: var(--tenue); background: transparent;
}
.dato.listo { border-color: var(--teal-boton); color: #fff; background: var(--teal-boton); }

/* ── Casillas de cultivo ────────────────────────────────
   Los siete con plan. Botones grandes para el dedo: mucha gente entra desde el teléfono. */
.opciones-cultivo {
  display: flex; gap: .5rem; flex-wrap: wrap;
  padding: .6rem 1rem; width: 100%; max-width: var(--ancho); margin: 0 auto;
  border-top: 1px solid var(--borde);
}
.opciones-cultivo[hidden] { display: none; }
.opcion-cultivo {
  font: inherit; font-size: .95rem; cursor: pointer;
  min-height: 2.75rem; padding: .45rem 1rem; border-radius: 999px;
  border: 1.5px solid var(--teal-boton); color: var(--tinta); background: transparent;
}
.opcion-cultivo:hover, .opcion-cultivo:focus-visible {
  background: var(--teal-boton); color: #fff; outline: none;
}
.opcion-cultivo:focus-visible { box-shadow: 0 0 0 3px var(--teal-claro); }
/* En un teléfono las siete no caben en dos filas con el tamaño de escritorio y le quitan el
   lugar a la conversación: más compactas, sin bajar de 44 px de alto (blanco táctil). */
@media (max-width: 30rem) {
  .opciones-cultivo { gap: .4rem; padding: .45rem .75rem; }
  .opcion-cultivo { font-size: .85rem; padding: .35rem .7rem; min-height: 2.75rem; }
}

/* ── Redactor ─────────────────────────────────────────────── */
.redactor {
  border-top: 1px solid var(--borde); background: var(--papel);
  padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom));
  width: 100%; max-width: var(--ancho); margin: 0 auto;
}
/* Oculto por omisión (btnCorreo lo abre): mismo criterio que btnUbicacion,
   nunca aparece solo ni bloquea el resto del redactor. */
.correo-inline { display: flex; gap: .4rem; margin-bottom: .5rem; }
.correo-inline[hidden] { display: none; }
.correo-inline input {
  flex: 1; padding: .6rem .8rem; border: 1px solid var(--borde); border-radius: var(--radio);
  font: inherit; color: inherit; background: #fff;
}
@media (prefers-color-scheme: dark) { .correo-inline input { background: #16211f; } }

.fila { display: flex; align-items: flex-end; gap: .4rem; }
textarea {
  flex: 1; resize: none; max-height: 8.5rem;
  padding: .6rem .8rem; border: 1px solid var(--borde); border-radius: var(--radio);
  font: inherit; color: inherit; background: #fff;
}
@media (prefers-color-scheme: dark) { textarea { background: #16211f; } }
textarea:focus, button:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }

button.icono, button.enviar {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--borde); background: #fff; cursor: pointer;
  display: grid; place-items: center; padding: 0;
}
@media (prefers-color-scheme: dark) { button.icono, button.enviar { background: #16211f; } }
button svg { width: 20px; height: 20px; fill: none; stroke: var(--tenue); stroke-width: 1.9;
             stroke-linecap: round; stroke-linejoin: round; }
button.enviar { background: var(--teal-boton); border-color: var(--teal-boton); }
button.enviar svg { stroke: none; fill: #fff; }
button:disabled { opacity: .45; cursor: not-allowed; }
button.icono.grabando { border-color: var(--alerta); animation: latir 1.1s infinite; }
button.icono.grabando svg { stroke: var(--alerta); }
@keyframes latir { 50% { box-shadow: 0 0 0 5px rgba(155,44,44,.16); } }
button.icono.compartida { border-color: var(--teal-boton); }
button.icono.compartida svg { stroke: var(--teal-boton); }

.pie { margin: .45rem 0 0; font-size: .74rem; color: var(--tenue); min-height: 1.1em; }
.pie.malo { color: var(--alerta); }

.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ── Zona de soltar ───────────────────────────────────────── */
/* El atributo hidden pone display:none, pero cualquier display declarado
   después en la hoja le gana y la capa queda pegada sobre la página. Hay que
   decirlo explícitamente. */
.soltar[hidden] { display: none; }
.soltar {
  position: fixed; inset: 0; z-index: 30;
  background: rgba(0,105,92,.10); backdrop-filter: blur(2px);
  display: grid; place-items: center;
}
.soltar .caja {
  background: #fff; border: 2px dashed var(--teal); border-radius: 18px;
  padding: 2rem 2.6rem; text-align: center; display: grid; gap: .35rem;
}
@media (prefers-color-scheme: dark) { .soltar .caja { background: #16211f; } }
.soltar span { color: var(--tenue); font-size: .85rem; }