/* VETTRA — hoja de estilos única de la app.
 *
 * Dos ideas cargan el diseño, las dos salen del oficio y no de la decoración:
 *
 * 1. El informe abdominal es una LISTA CANÓNICA de órganos, siempre en el mismo
 *    orden. Los nombres de sección van en monoespaciada y versalitas, como los
 *    campos de un informe de laboratorio, para que se lean como dato
 *    estructurado y no como títulos de prosa.
 * 2. `PENDIENTE_CONFIRMAR` es el centinela que el motor emite cuando no tiene
 *    información suficiente (nunca inventa). Es lo que el veterinario tiene que
 *    resolver, así que es un estado visual de primera clase: riel ámbar al
 *    costado de la sección y un contador de triaje arriba del informe.
 *
 * Sin fuentes externas a propósito: el shell cacheado por el service worker
 * tiene que funcionar sin depender de un CDN.
 */

/* Los valores de color vienen de la marca: `tokens.css`, que `index.html` carga
 * ANTES que esta hoja (con `<link>`, no con `@import`, para que bajen en
 * paralelo y para que el service worker lo tenga listado en su SHELL).
 * Acá solo se les da su papel semántico dentro de la app: los nombres de abajo
 * son los que usa el resto de la hoja, así que la paleta cambió sin tocar una
 * sola regla de estilo. Qué JSON de marca rige: `marca/VIGENCIA_TOKENS.md`. */

:root {
  --fondo: var(--vt-superficie-lienzo);
  --superficie: var(--vt-superficie-elevada);
  --superficie-2: var(--vt-superficie-sutil);
  --tinta: var(--vt-texto-principal);
  --tinta-suave: var(--vt-texto-secundario);
  --borde: var(--vt-borde);
  /* WCAG 1.4.11 (Non-text Contrast): el borde de un input es lo único que
     delimita el campo (su relleno blanco casi no difiere del fondo). El
     La guía v3.0 no define bordes de control, así que se usa el derivado
     del grafito oficial (mismo matiz, más oscuro): 3.93:1 sobre el lienzo,
     por encima del 3.03:1 que ya había. Ver marca/VIGENCIA_TOKENS.md §4. */
  --borde-fuerte: var(--vt-borde-control);

  /* Verde clínico es el único color de marca que la guía v3.0 autoriza como
   * texto sobre claro (4.59:1 sobre hueso, 4.90:1 sobre blanco) y sirve para
   * los dos papeles de este token: enlaces/indicadores y fondo de botón
   * primario con texto blanco (4.90:1). El hover va a petróleo profundo. */
  --teal: var(--vt-verde-clinico);
  --teal-oscuro: var(--vt-petroleo-profundo);
  --teal-tenue: var(--vt-superficie-sutil);

  /* El ámbar de la paleta sirve para rieles y bordes, no para texto.
   * `--ambar-texto` es la variante que sí pasa AA (5.61:1). */
  --ambar: #C97A2B;
  --ambar-texto: var(--vt-estado-advertencia);
  --ambar-tenue: #FBF1E4;

  --verde: var(--vt-estado-exito);
  --verde-tenue: #E6F2EB;
  --rojo: var(--vt-estado-error);
  --rojo-tenue: #FBEAE8;

  --sans: var(--vt-fuente-cuerpo);
  --mono: var(--vt-fuente-mono);

  --r: 8px;
  --r-s: 5px;
  --sombra: 0 1px 2px rgba(27, 36, 48, .06), 0 1px 8px rgba(27, 36, 48, .04);

  /* 64px de cabecera (handoff D1 §3.1): es lo que permite el isologo a 48px,
   * el mínimo digital que pide la guía §4 — resuelve la desviación que
   * registraba marca/VIGENCIA_TOKENS.md §5 con la cabecera de 52px. */
  --alto-cabecera: 64px;
  --alto-nav: 60px;
}

* { box-sizing: border-box; }

/* `hidden` del navegador es una regla de baja especificidad: sin esto, el
 * `#app-vista { display: grid }` de pantalla ancha le gana y la vista de login
 * aparecería junto a la app. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--tinta);
  background: var(--fondo);
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { margin: 0; font-weight: 650; line-height: 1.25; }
/* Display (Space Grotesk) solo en títulos y momentos de marca — el maestro
 * v2.0 la reserva para eso; los párrafos y controles siguen en Inter. */
h1, h2 { font-family: var(--vt-fuente-display); font-weight: 600; }
h1 { font-size: 1.05rem; letter-spacing: -0.01em; }
h2 { font-size: 1.15rem; }
h3 { font-size: .95rem; }
p { margin: 0 0 .6rem; }

/* Anillo de foco de 3px (handoff §6); sobre superficies petróleo el anillo va
 * en menta (--vt-borde-foco, 8.96:1) — ver la navegación más abajo. */
:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
  border-radius: var(--r-s);
}

/* Enlace "saltar al contenido" (WCAG 2.4.1): oculto sobre el borde superior,
   aparece al recibir foco con teclado. */
.salto {
  position: absolute;
  left: .5rem;
  top: -3.5rem;
  z-index: 100;
  padding: .5rem .8rem;
  background: var(--teal);
  color: #fff;
  border-radius: var(--r-s);
  font-weight: 600;
  transition: top .15s ease;
}
.salto:focus { top: .5rem; }

/* Oculto a la vista pero disponible para lectores de pantalla (patrón
   "visually hidden"). Antes vivía como `style="left:-9999px"` inline en el
   HTML; se movió acá para que la CSP pueda mantener `style-src 'self'` sin
   `'unsafe-inline'` (hallazgo H1, 2026-08-18). */
.oculto-visual {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
/* `#area` recibe foco por programa (destino del skip-link, tabindex=-1); no es
   un control tabulable, así que no lleva el anillo de foco. */
#area:focus { outline: none; }

/* ---------- Controles ---------- */

input, select, textarea {
  width: 100%;
  font-family: inherit;
  /* Nunca por debajo de 16px: iOS hace zoom al enfocar un campo más chico. */
  font-size: 1rem;
  color: var(--tinta);
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-s);
  padding: .55rem .65rem;
}
input:hover, select:hover, textarea:hover { border-color: var(--tinta-suave); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-tenue);
}
textarea { min-height: 3.4rem; resize: vertical; }

label {
  display: block;
  font-size: .8rem;
  font-weight: 550;
  color: var(--tinta-suave);
  margin-top: .8rem;
}
label input, label select, label textarea { margin-top: .25rem; }

button {
  font-family: inherit;
  font-size: .92rem;
  font-weight: 600;
  /* 44px de alto mínimo: es un control que se toca con el pulgar. */
  min-height: 44px;
  padding: .6rem 1.1rem;
  border: 1px solid var(--teal);
  border-radius: var(--r-s);
  background: var(--teal);
  color: #fff;
  cursor: pointer;
  transition: background-color var(--vt-mov-normal) var(--vt-mov-easing),
              border-color var(--vt-mov-normal) var(--vt-mov-easing),
              color var(--vt-mov-normal) var(--vt-mov-easing);
}
button:hover { background: var(--teal-oscuro); border-color: var(--teal-oscuro); }
button:disabled { opacity: .5; cursor: not-allowed; }

button.secundario {
  background: var(--superficie);
  color: var(--tinta);
  border-color: var(--borde-fuerte);
}
button.secundario:hover { background: var(--superficie-2); border-color: var(--tinta-suave); }

button.discreto {
  background: none;
  border-color: transparent;
  color: var(--teal);
  padding: .4rem .5rem;
}
button.discreto:hover { background: var(--teal-tenue); border-color: transparent; }

/* ---------- Login ---------- */

/* La vista de alta por invitación comparte la caja centrada del login: son el
 * mismo momento del recorrido (entrar), y no hay razón para que se vean
 * distintas. */
#login-vista, #alta-vista {
  max-width: 380px;
  margin: 0 auto;
  padding: 3.5rem 1.25rem;
}
#login-vista .marca, #alta-vista .marca { margin: 0 0 1.75rem; }
.tarjeta-login {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r);
  box-shadow: var(--sombra);
  padding: 1.4rem 1.25rem 1.5rem;
}
.tarjeta-login h1 { margin-bottom: .2rem; }
.tarjeta-login .sub { color: var(--tinta-suave); font-size: .875rem; margin-bottom: .4rem; }
.tarjeta-login button { width: 100%; margin-top: 1.1rem; }
#login-error, #alta-error {
  color: var(--rojo);
  font-size: .875rem;
  min-height: 1.3rem;
  margin-top: .5rem;
}
#alta-volver { margin: 1rem 0 0; font-size: .875rem; }
#alta-volver a { color: var(--teal); }

/* ---------- Marca ---------- */

.marca {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  letter-spacing: .02em;
}
/* Isologo oficial (vector, transparente) sobre superficie clara: la guía v3.0
 * solo autoriza el logo a color sobre blanco/hueso. 48px es el mínimo digital
 * que pide la guía §4; la cabecera de 64px (handoff D1) lo hace posible y
 * cierra la desviación que registraba marca/VIGENCIA_TOKENS.md §5. */
.marca img { width: 48px; height: 48px; display: block; }
.marca span { font-family: var(--vt-fuente-display); }
/* Login y alta: marca principal con slogan, a su tamaño mínimo (320px) o más. */
.marca-principal { justify-content: center; }
.marca-principal img { width: min(100%, 340px); height: auto; }

/* ---------- Estructura de la app ---------- */

#app-vista { min-height: 100vh; }

#cabecera {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--alto-cabecera);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 .9rem;
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
}
/* La marca lateral es la del encabezado de la columna de navegación: solo
 * existe en pantalla ancha. Sin esto aparece además de la del <header> y la
 * palabra VETTRA sale dos veces en el teléfono. */
#marca-lateral { display: none; }

#cabecera-usuario {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .82rem;
  color: var(--tinta-suave);
  min-width: 0;
}
#cabecera-usuario .quien {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* El título profesional no cabe junto al nombre y al botón en un teléfono. */
#cabecera-usuario .titulo { display: none; }
#cabecera-usuario button {
  min-height: 36px;
  padding: .3rem .6rem;
  font-size: .82rem;
  white-space: nowrap;
}

/* Navegación: pestañas al pie en móvil, columna lateral en pantalla ancha.
 * Petróleo con texto claro (handoff D1 §6): la navegación es la superficie de
 * alta jerarquía de la marca; el contenido queda en claro. El logo a color
 * NUNCA se apoya en este petróleo — vive en su cápsula clara (#marca-lateral)
 * o en la cabecera blanca. */
#nav-principal {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 20;
  height: var(--alto-nav);
  display: flex;
  background: var(--vt-petroleo-oscuro);
  border-top: 1px solid var(--vt-petroleo-profundo);
  padding-bottom: env(safe-area-inset-bottom);
}
#nav-principal button {
  flex: 1;
  min-height: 0;
  flex-direction: column;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .1rem;
  background: none;
  border: none;
  border-radius: 0;
  /* Blanco atenuado por opacidad, no un color nuevo: sobre petróleo sigue
   * muy por encima de AA. El activo va a menta plena. */
  color: var(--vt-texto-inverso);
  opacity: .82;
  font-size: .7rem;
  font-weight: 600;
  padding: .35rem .25rem;
}
#nav-principal button:hover { background: var(--vt-petroleo-profundo); opacity: 1; }
#nav-principal button:focus-visible { outline-color: var(--vt-borde-foco); }
#nav-principal button .glifo { font-size: 1.15rem; line-height: 1; }
#nav-principal button[aria-current="page"] { color: var(--vt-menta-clara); opacity: 1; }
#nav-principal .cuenta {
  font-family: var(--mono);
  font-size: .62rem;
  font-variant-numeric: tabular-nums;
  background: var(--ambar);
  color: #fff;
  border-radius: 999px;
  padding: 0 .3rem;
  margin-left: .2rem;
}

#area { display: flex; }

/* Columna de casos (lista + buscador) y columna de trabajo. */
#col-lista, #col-trabajo { min-width: 0; }
#col-lista {
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border-right: 1px solid var(--borde);
}
#col-trabajo { flex: 1; }

.envoltorio { padding: 1rem .9rem calc(var(--alto-nav) + 1.5rem); }

/* ---------- Panel de trabajo: nuevo caso / caso / literatura ---------- */

.panel { display: none; }
body[data-panel="nuevo"] #panel-nuevo,
body[data-panel="caso"] #panel-caso,
body[data-panel="literatura"] #panel-literatura { display: block; }

.bloque {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r);
  box-shadow: var(--sombra);
  padding: 1.1rem 1rem 1.25rem;
  margin-bottom: 1rem;
}
.bloque > h2 { margin-bottom: .15rem; }
.bloque > .sub {
  color: var(--tinta-suave);
  font-size: .875rem;
  margin-bottom: .5rem;
}

.rejilla { display: grid; gap: 0 1rem; grid-template-columns: 1fr; }

/* ---------- Eje de evidencia (firma visual, handoff D1 §2) ----------
 *
 * La firma transversal de «Pulso documentado»: una línea de cuatro hitos que
 * hace visible el avance Dictado → Estructura → Pendientes → Aprobación.
 * Reglas del documento maestro que este bloque implementa:
 *   - UNA aparición por composición, y solo donde estructura un caso (caso
 *    nuevo, procesamiento, revisión). En login, listas, literatura, feedback
 *    y diálogos sería decoración, y no aparece.
 *   - Revelado único de ≤320ms (--vt-mov-lento); con prefers-reduced-motion
 *    los tokens lo dejan en 0ms y aparece sin transición.
 * Los hitos son texto visible (no solo color): el punto lleno/vacío es la
 * forma, y el hito actual además lleva aria-current="step". */

.eje-evidencia {
  list-style: none;
  display: flex;
  align-items: center;
  margin: 0 0 1rem;
  padding: .7rem .8rem;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-s);
  animation: eje-revelar var(--vt-mov-lento) var(--vt-mov-easing) both;
}
@keyframes eje-revelar {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
.eje-hito {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: .38rem;
  min-width: 0;
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--vt-texto-tenue-aa);
}
/* El conector: cada hito después del primero arrastra su tramo de línea. */
.eje-hito + .eje-hito { flex: 1 1 auto; }
.eje-hito + .eje-hito::before {
  content: "";
  flex: 1 1 .8rem;
  height: 2px;
  border-radius: 1px;
  background: var(--borde);
  margin: 0 .5rem;
}
.eje-punto {
  flex: none;
  width: 10px;
  height: 10px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid var(--vt-borde-fuerte);
  background: var(--superficie);
}
.eje-hito.hecho { color: var(--teal); }
.eje-hito.hecho .eje-punto { background: var(--teal); border-color: var(--teal); }
.eje-hito.hecho::before { background: var(--teal); }
.eje-hito.actual { color: var(--teal-oscuro); }
.eje-hito.actual .eje-punto {
  background: var(--vt-jade-medio);
  border-color: var(--teal-oscuro);
  box-shadow: 0 0 0 3px var(--teal-tenue);
}
.eje-hito.actual::before { background: var(--teal); }
/* Compacto (handoff D1 §3.2): lista vertical de los mismos cuatro hitos. */
@media (max-width: 480px) {
  .eje-evidencia { flex-direction: column; align-items: flex-start; gap: .45rem; }
  .eje-hito + .eje-hito { flex: 0 0 auto; }
  .eje-hito + .eje-hito::before { display: none; }
}

/* ---------- Aviso de revisión obligatoria (seguridad clínica) ---------- */

.aviso {
  display: flex;
  gap: .6rem;
  background: var(--ambar-tenue);
  border: 1px solid var(--ambar);
  border-radius: var(--r-s);
  padding: .6rem .75rem;
  font-size: .85rem;
  color: var(--ambar-texto);
  margin-bottom: 1rem;
}
.aviso strong { color: var(--ambar-texto); }
.aviso button {
  min-height: 32px;
  padding: .2rem .6rem;
  font-size: .8rem;
  background: var(--ambar-texto);
  border-color: var(--ambar-texto);
  margin-left: auto;
  align-self: center;
  white-space: nowrap;
}
.aviso button:hover { background: #6E3E0D; border-color: #6E3E0D; }

/* ---------- Lista de casos ---------- */

.barra-lista {
  position: sticky;
  top: var(--alto-cabecera);
  z-index: 10;
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
  padding: .7rem .8rem;
}
.barra-lista label { margin: 0; }
#buscar-casos { margin-top: 0; }
.conteo-lista {
  font-size: .75rem;
  color: var(--tinta-suave);
  margin-top: .4rem;
  font-variant-numeric: tabular-nums;
}

#casos {
  list-style: none;
  margin: 0;
  padding: 0 0 calc(var(--alto-nav) + 1rem);
  overflow-y: auto;
}
#casos li { border-bottom: 1px solid var(--borde); }

.fila-caso {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  width: 100%;
  text-align: left;
  padding: .7rem .8rem;
  background: none;
  border: none;
  border-radius: 0;
  color: inherit;
  font-weight: 400;
  font-size: 1rem;
}
.fila-caso:hover { background: var(--superficie-2); }
.fila-caso:focus-visible { outline-offset: -2px; }
.fila-caso[aria-current="true"] {
  background: var(--teal-tenue);
  /* Borde izquierdo de 4px (handoff D1 §4.3): la selección no depende solo
   * del fondo sutil, y el aria-current ya la anuncia sin color. */
  box-shadow: inset 4px 0 0 var(--teal);
}
.fila-caso[aria-current="true"]:hover { background: var(--teal-tenue); }
#casos .num {
  font-family: var(--mono);
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-suave);
}
#casos .quien {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  font-size: .92rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Fecha de creación en la fila (handoff D1 §4.3): dato, así que monoespaciada
 * y tabular; si el servidor no la manda, el span no se renderiza. */
#casos .fecha {
  font-family: var(--mono);
  font-size: .7rem;
  font-variant-numeric: tabular-nums;
  color: var(--vt-texto-tenue-aa);
  white-space: nowrap;
}
#casos li.vacio {
  padding: 1.5rem .9rem;
  color: var(--tinta-suave);
  font-size: .875rem;
  border-bottom: none;
}

/* ---------- Chip de estado ---------- */

.estado {
  font-family: var(--mono);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .18rem .42rem;
  border-radius: 999px;
  white-space: nowrap;
  background: var(--superficie-2);
  color: var(--tinta-suave);
  border: 1px solid var(--borde-fuerte);
}
.estado-borrador { background: var(--ambar-tenue); color: var(--ambar-texto); border-color: var(--ambar); }
.estado-aprobado { background: var(--verde-tenue); color: var(--verde); border-color: var(--verde); }
.estado-error    { background: var(--rojo-tenue);  color: var(--rojo);  border-color: var(--rojo); }

/* ---------- Detalle del caso ---------- */

.cabecera-caso {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  margin-bottom: .9rem;
}
.cabecera-caso h2 { font-size: 1.15rem; }
.cabecera-caso .meta {
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
}
#btn-volver { display: none; }

details.transcripcion {
  border: 1px solid var(--borde);
  border-radius: var(--r-s);
  background: var(--superficie);
  margin-bottom: 1rem;
}
details.transcripcion summary {
  cursor: pointer;
  padding: .6rem .8rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--tinta-suave);
}
details.transcripcion p {
  padding: 0 .8rem .8rem;
  margin: 0;
  font-size: .9rem;
  color: var(--tinta);
  white-space: pre-wrap;
}

/* ---------- Comparación con el original de la IA ---------- */

details.versiones {
  border: 1px solid var(--borde);
  border-radius: var(--r-s);
  background: var(--superficie);
  margin-bottom: 1rem;
}
details.versiones summary {
  cursor: pointer;
  padding: .6rem .8rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--tinta-suave);
}
details.versiones .cuantos {
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--teal);
  background: var(--teal-tenue);
  border: 1px solid var(--teal);
  border-radius: 999px;
  padding: .1rem .4rem;
  margin-left: .4rem;
  white-space: nowrap;
}
.versiones-meta {
  padding: 0 .8rem;
  margin: 0 0 .6rem;
  font-size: .8rem;
  color: var(--tinta-suave);
}
.diff { padding: 0 .8rem .8rem; }
.diff .organo {
  display: block;
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: .3rem;
}
.diff-par { display: grid; gap: .5rem; grid-template-columns: 1fr; }
/* Comparación de dos puntos: en escritorio los dos lados van lado a lado y con
 * el mismo peso, para poder leer el cambio de un vistazo (handoff D1 §4.7). En
 * angosto se apilan en el orden del DOM —primero el original, después la
 * versión actual—, que es el mismo orden en que se leen. */
@media (min-width: 900px) {
  .diff-par { grid-template-columns: 1fr 1fr; }
}
.diff-lado {
  border: 1px solid var(--borde);
  border-radius: var(--r-s);
  padding: .45rem .6rem;
  background: var(--fondo);
}
/* El lado derecho es lo que se va a entregar: se resalta, el original se atenúa. */
.diff-lado:last-child { background: var(--superficie); border-left: 3px solid var(--teal); }
.diff-rotulo {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: .2rem;
}
.diff-texto { margin: 0; font-size: .875rem; white-space: pre-wrap; }
.diff-lado:first-child .diff-texto { color: var(--tinta-suave); }
.diff-nulo { font-style: italic; color: var(--tinta-suave); }

.advertencia {
  background: var(--rojo-tenue);
  border: 1px solid #F0BFBB;
  border-left: 3px solid var(--rojo);
  border-radius: var(--r-s);
  padding: .5rem .75rem;
  margin: .4rem 0;
  font-size: .875rem;
}

/* Sugerencias accionables (2026-08-16): antes eran texto rojo de solo lectura.
 * Ahora son tarjetas ámbar (revisar, no error) que se aceptan o descartan. */
.sugerencias { margin-bottom: 1rem; }
.sugerencias h3 { margin-bottom: .1rem; }
.sugerencias > .sub { margin: 0 0 .6rem; }
.sugerencia {
  background: var(--ambar-tenue);
  border: 1px solid var(--ambar);
  border-left: 3px solid var(--ambar);
  border-radius: var(--r-s);
  padding: .55rem .75rem;
  margin: .4rem 0;
  font-size: .875rem;
}
.sugerencia .texto { margin: 0 0 .5rem; }
.sug-acciones { display: flex; gap: .5rem; flex-wrap: wrap; }
.sug-acciones button { min-height: 34px; padding: .25rem .7rem; font-size: .8rem; }
.sug-estado { margin: .4rem 0 0; font-size: .82rem; color: var(--ambar-texto); font-weight: 550; }
/* Aceptada: se atenúa y muestra su estado. Descartada: fuera de la vista (el
 * dato sigue guardado, solo no se muestra). */
.sugerencia[data-estado="aceptada"] { opacity: .6; }
.sugerencia[data-estado="aceptada"] .sug-acciones { display: none; }
.sugerencia[data-estado="descartada"] { display: none; }

/* Agrupación anatómica de las secciones en la revisión (2026-08-16). */
.grupo-seccion { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; }
.grupo-seccion > legend {
  padding: 0;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: .45rem;
}
.grupo-pendiente {
  font-family: var(--mono);
  font-size: .7rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ambar-texto);
  font-weight: 600;
}

/* Ficha del paciente, editable en el borrador (2026-08-16). */
.sub-ficha { margin: 0 0 .5rem; }
.ficha-editable { border: 1px solid var(--borde); border-radius: var(--r-s); padding: .75rem; background: var(--superficie); }
.ficha-editable .ficha-pend input {
  border-color: var(--ambar);
  background: var(--ambar-tenue);
}
.ficha-editable .ficha-pend { color: var(--ambar-texto); }
.ficha-fijos { margin: .6rem 0 0; font-size: .85rem; color: var(--tinta-suave); }
.ficha-fijos .nota-inline { font-style: italic; }

/* Triaje: lo que el veterinario tiene que resolver, contado y accionable. */
.triaje {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: var(--ambar-tenue);
  border: 1px solid var(--ambar);
  border-radius: var(--r-s);
  padding: .55rem .75rem;
  margin-bottom: 1rem;
  font-size: .875rem;
  color: var(--ambar-texto);
  font-weight: 550;
}
.triaje.limpio {
  background: var(--verde-tenue);
  border-color: var(--verde);
  color: var(--verde);
}
.triaje button {
  margin-left: auto;
  min-height: 34px;
  padding: .25rem .65rem;
  font-size: .8rem;
  background: var(--ambar-texto);
  border-color: var(--ambar-texto);
  white-space: nowrap;
}
.triaje button:hover { background: #6E3E0D; border-color: #6E3E0D; }

/* Rechazo de la aprobación por campos sin confirmar (H-002). Va en rojo y no
   en ámbar como el triaje: el ámbar dice "esto falta", el rojo dice "por esto
   no se aprobó". Misma familia visual que `.grabador-error`. */
/* Indicador de grabacion en curso, en la cabecera: sigue visible en cualquier
   seccion (H-003). Un microfono abierto fuera de contexto es un problema de
   privacidad, asi que no puede depender de que la persona este mirando el
   formulario. */
.grabando-global {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-left: auto;
  margin-right: .6rem;
  padding: .2rem .55rem;
  border-radius: 999px;
  background: var(--rojo-tenue);
  color: var(--rojo);
  border: 1px solid #F0BFBB;
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Aceptación de términos en el alta (2026-08-19). La casilla es un control de
   consentimiento, no decoración: texto a tamaño legible, area de toque amplia y
   nunca marcada por defecto. */
.alta-terminos { margin-top: 1rem; display: grid; gap: .7rem; }
.casilla {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .55rem;
  align-items: start;
  margin: 0;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--tinta);
  font-weight: 400;
}
.casilla input[type=checkbox] {
  width: 20px;
  height: 20px;
  margin: .1rem 0 0;
  accent-color: var(--teal);
}
.enlace {
  background: none;
  border: none;
  padding: 0;
  min-height: 0;
  font: inherit;
  color: var(--teal);
  text-decoration: underline;
  cursor: pointer;
}
.enlace:hover { background: none; color: var(--teal-oscuro); }
#dialogo-terminos {
  max-width: 46rem;
  width: calc(100vw - 2rem);
  max-height: 80vh;
  overflow: auto;
  border: 1px solid var(--borde);
  border-radius: var(--r);
  padding: 1.2rem;
  color: var(--tinta);
  background: var(--superficie);
}
#dialogo-terminos::backdrop { background: rgba(21, 34, 37, .45); }
#texto-terminos { white-space: pre-wrap; font-size: .875rem; line-height: 1.55; }
#texto-terminos:focus { outline: none; }
#cerrar-terminos { margin-top: 1rem; }

/* Autorización del tutor (T1). Es una compuerta legal, no un aviso más: se
   distingue del ámbar de "falta completar" porque acá el caso ni siquiera
   avanza. */
.autorizacion {
  background: var(--rojo-tenue);
  border: 1px solid #F0BFBB;
  border-radius: var(--r-s);
  padding: .8rem .9rem;
  margin-bottom: 1rem;
  font-size: .875rem;
}
.autorizacion p { margin: 0 0 .5rem; }
.autorizacion label { margin-top: .4rem; }
.autorizacion select { max-width: 22rem; }
.autorizacion #btn-autorizacion { margin-top: .7rem; }

.ficha-sin-dato {
  align-self: flex-start;
  margin-top: .25rem;
  min-height: 28px;
  padding: .1rem .5rem;
  font-size: .75rem;
  background: transparent;
  color: var(--ambar-texto);
  border: 1px solid var(--ambar);
}
.ficha-sin-dato:hover { background: var(--ambar-tenue); }

.aviso-aprobacion,
.aviso-error {
  margin-bottom: 1rem;
  font-size: .875rem;
  color: var(--rojo);
  background: var(--rojo-tenue);
  border: 1px solid #F0BFBB;
  border-radius: var(--r-s);
  padding: .55rem .75rem;
  font-weight: 550;
}

/* ---------- Secciones del informe (elemento firma) ---------- */

#form-edicion { margin: 0; }

.seccion {
  border: 1px solid var(--borde);
  border-left: 3px solid var(--borde-fuerte);
  border-radius: var(--r-s);
  background: var(--superficie);
  padding: .6rem .75rem .75rem;
  margin-bottom: .55rem;
}
.seccion > label { margin: 0; }

/* El nombre del órgano como campo de informe, no como título de prosa. */
.seccion .organo {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.seccion textarea { margin-top: .35rem; }

.seccion[data-estado="pendiente"] { border-left-color: var(--ambar); background: var(--ambar-tenue); }
.seccion[data-estado="pendiente"] .organo { color: var(--ambar-texto); }
.seccion[data-estado="pendiente"] textarea { border-color: var(--ambar); background: var(--superficie); }
.seccion[data-estado="pendiente"] .nota {
  display: block;
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ambar-texto);
  margin-top: .3rem;
}

.conclusion-bloque {
  border: 1px solid var(--borde);
  border-left: 3px solid var(--teal);
  border-radius: var(--r-s);
  background: var(--superficie);
  padding: .6rem .75rem .75rem;
  margin: 1rem 0 .5rem;
}
.conclusion-bloque .organo {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--teal);
}
.conclusion-bloque .nota {
  display: block;
  font-size: .75rem;
  font-weight: 500;
  color: var(--tinta-suave);
  margin-top: .15rem;
}

/* ---------- Barra de acciones ---------- */

.acciones {
  position: sticky;
  bottom: var(--alto-nav);
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r);
  box-shadow: 0 -2px 10px rgba(27, 36, 48, .07);
  padding: .6rem .7rem;
  margin-top: 1rem;
}
.descargas {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 1rem;
}
.descargas .sin-pdf { font-size: .85rem; color: var(--tinta-suave); }

/* Enlace de descarga con apariencia de botón secundario. Es un <a> de verdad y
 * no un <button> dentro de un <a> (marcado inválido, y un control dentro de
 * otro control rompe la navegación por teclado). */
a.boton {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .6rem 1.1rem;
  font-size: .92rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--tinta);
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-s);
}
a.boton:hover { background: var(--superficie-2); border-color: var(--tinta-suave); }

/* ---------- Progreso ---------- */

.progreso { text-align: center; padding: 2rem 1rem; }
.progreso .etapa { font-weight: 600; margin-bottom: .8rem; }
/* Barra determinada: el ancho del relleno es el % que calcula el servidor
   (progreso.py). La transición suaviza cada salto entre consultas (cada 3 s). */
.progreso .barra {
  width: 100%;
  max-width: 22rem;
  height: 8px;
  margin: 0 auto .5rem;
  background: var(--borde);
  border-radius: 999px;
  overflow: hidden;
}
.progreso .relleno {
  height: 100%;
  background: var(--teal);
  border-radius: 999px;
  transition: width .6s ease;
}
/* Las rayas en movimiento comunican "sigue trabajando" incluso cuando el % está
   quieto (la asíntota avanza lento cerca del final). Se apagan si el usuario
   pidió menos movimiento. */
.progreso .relleno {
  background-image: linear-gradient(45deg,
    rgba(255, 255, 255, .25) 25%, transparent 25%,
    transparent 50%, rgba(255, 255, 255, .25) 50%,
    rgba(255, 255, 255, .25) 75%, transparent 75%, transparent);
  background-size: 1rem 1rem;
  animation: progreso-rayas 1s linear infinite;
}
@keyframes progreso-rayas { to { background-position: 1rem 0; } }
@media (prefers-reduced-motion: reduce) {
  .progreso .relleno { animation: none; }
}
.progreso .seg {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--tinta-suave);
  font-size: .85rem;
}
/* El porcentaje domina y la ETA acompaña (handoff D1 §4.5): el número es lo
 * que la persona vino a mirar; la estimación es lenguaje aproximado. */
.progreso .pct {
  display: block;
  font-family: var(--mono);
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--tinta);
  margin-bottom: .15rem;
}
.progreso .calma { color: var(--tinta-suave); font-size: .875rem; max-width: 34ch; margin: .6rem auto 0; }

#cargando { display: none; font-size: .875rem; color: var(--tinta-suave); margin-top: .6rem; }

/* ---------- Feedback sobre el borrador ---------- */

details.feedback { margin-top: 1.2rem; border-top: 1px solid var(--borde); padding-top: 1rem; }
details.feedback > summary { cursor: pointer; font-weight: 600; }
details.feedback .sub { margin: .4rem 0 .6rem; }
details.feedback form { display: grid; gap: .6rem; max-width: 34rem; }
details.feedback #fb-estado { font-size: .875rem; color: var(--tinta-suave); min-height: 1.2em; }

/* ---------- Grabación del dictado ---------- */

#grabador { margin-top: .7rem; }

/* Subir un archivo y grabar son alternativas para lo mismo; sin decirlo, se
 * leen como dos campos independientes. */
.o-bien {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: .1rem 0 .7rem;
  font-size: .78rem;
  color: var(--tinta-suave);
}
.o-bien::before, .o-bien::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--borde);
}
.grabador-fila { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
#btn-grabar.grabando { background: var(--rojo); border-color: var(--rojo); color: #fff; }
#btn-grabar.grabando:hover { background: #8E1E17; border-color: #8E1E17; }

.grabador-estado {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .85rem;
  color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
}
/* El punto late solo mientras se graba: es la señal de que el micrófono está
 * abierto de verdad, no un adorno. */
.grabador-estado.activa::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--rojo);
  animation: latir 1.2s ease-in-out infinite;
}
#grabacion-audio { width: 100%; margin-top: .6rem; }
.grabador-error {
  margin-top: .6rem;
  font-size: .85rem;
  color: var(--rojo);
  background: var(--rojo-tenue);
  border: 1px solid #F0BFBB;
  border-radius: var(--r-s);
  padding: .5rem .7rem;
}

/* ---------- Asistente de literatura ---------- */

#asistente-respuesta {
  white-space: pre-wrap;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: var(--r-s);
  padding: .8rem .9rem;
  margin-top: .8rem;
  font-size: .9rem;
}
#cargando-asistente { display: none; font-size: .875rem; color: var(--tinta-suave); margin-top: .6rem; }

/* ---------- Pantalla ancha ---------- */

@media (min-width: 900px) {
  :root { --alto-nav: 0px; }

  #app-vista {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-template-rows: var(--alto-cabecera) 1fr;
    grid-template-areas: "marca cabecera" "nav area";
    min-height: 100vh;
  }
  #cabecera {
    grid-area: cabecera;
    justify-content: flex-end;
    padding-right: 1.25rem;
  }
  #cabecera .marca { display: none; }
  #cabecera-usuario .titulo { display: inline; }
  /* La columna de navegación es petróleo de arriba a abajo; el logo a color
   * no puede apoyarse ahí (guía §2), así que vive en una cápsula clara
   * (.capsula-marca) dentro de la celda — handoff D1 §3.1. */
  #marca-lateral {
    grid-area: marca;
    display: flex;
    align-items: center;
    padding: 0 .6rem;
    background: var(--vt-petroleo-oscuro);
    border-bottom: 1px solid var(--vt-petroleo-profundo);
    border-right: 1px solid var(--vt-petroleo-profundo);
  }
  .capsula-marca {
    display: flex;
    align-items: center;
    gap: .45rem;
    background: var(--vt-superficie-lienzo);
    border-radius: var(--r-s);
    padding: .2rem .6rem .2rem .3rem;
    color: var(--vt-petroleo-profundo);
  }

  #nav-principal {
    grid-area: nav;
    position: static;
    height: auto;
    flex-direction: column;
    gap: .15rem;
    border-top: none;
    border-right: 1px solid var(--vt-petroleo-profundo);
    padding: .8rem .6rem;
  }
  #nav-principal button {
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: flex-start;
    gap: .6rem;
    min-height: 40px;
    border-radius: var(--r-s);
    font-size: .9rem;
    padding: .45rem .6rem;
  }
  #nav-principal button[aria-current="page"] { background: var(--vt-petroleo-profundo); }

  /* Grilla del área de trabajo (handoff D1 §3.1): la lista respira entre
   * 280px y el 32% del área, y el panel toma el resto sin desbordar. */
  #area {
    grid-area: area;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(280px, 32%) minmax(0, 1fr);
  }
  #col-lista {
    max-height: calc(100vh - var(--alto-cabecera));
    position: sticky;
    top: var(--alto-cabecera);
  }
  .barra-lista { top: 0; }
  #casos { padding-bottom: 0; }
  .envoltorio { padding: 1.5rem 2rem 2.5rem; max-width: 940px; }
  .rejilla { grid-template-columns: 1fr 1fr; }
  .rejilla .ancho { grid-column: 1 / -1; }
  .diff-par { grid-template-columns: 1fr 1fr; }
  .acciones { bottom: 0; }

  /* Login y alta partidos 40/60 (handoff D1 §4.1): contexto de marca a la
   * izquierda, formulario a la derecha, los dos sobre claro. En angosto se
   * conserva la pila: marca arriba, formulario abajo. */
  #login-vista, #alta-vista {
    max-width: 960px;
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 3rem;
    align-items: center;
    align-content: center;
    min-height: 100vh;
    padding: 3.5rem 2rem;
  }
  #login-vista .marca, #alta-vista .marca { margin: 0; }
  .marca-principal img { width: min(100%, 380px); }
}

/* En pantalla angosta, lista y trabajo son pantallas alternas: la lista de
 * casos no tiene sentido comprimida al lado del informe. */
@media (max-width: 899px) {
  body[data-movil="lista"] #col-trabajo { display: none; }
  body[data-movil="trabajo"] #col-lista { display: none; }
  /* Sin esto la lista se encoge al ancho de su contenido: es un elemento flex
   * sin crecimiento, y en pantalla angosta es la única columna visible. */
  #col-lista {
    flex: 1 1 100%;
    border-right: none;
    min-height: calc(100vh - var(--alto-cabecera));
  }
  body[data-panel="caso"] #btn-volver { display: inline-flex; }

  /* Objetivos táctiles de 44px también en los controles compactos de contexto
   * (handoff D1 §3.2). En escritorio conservan su densidad: ahí el puntero es
   * fino y el costo de la altura extra es ruido visual. */
  .triaje button, .aviso button, .sug-acciones button,
  #cabecera-usuario button, .ficha-sin-dato { min-height: 44px; }
}

/* Reflow a 320px (WCAG 1.4.10 / handoff D1 §3.2): menos aire lateral, nada
 * fuera del viewport. */
@media (max-width: 360px) {
  .envoltorio { padding-left: .75rem; padding-right: .75rem; }
  .barra-lista { padding-left: .6rem; padding-right: .6rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}