/* ==========================================================================
   Marca ADIPA para la plataforma del jurado.

   Todo lo de acá sale del DESIGN.md de ADIPA. Ni un color aproximado, ni una
   tipografía inventada, ni un logo redibujado: el logo se sirve desde el
   archivo oficial (`adipa-logotype-white.svg`, el mismo que usa adipa.cl).

   Dos decisiones que conviene dejar escritas:

   · **No hay modo oscuro.** El manual de ADIPA define una sola paleta, clara.
     Un modo oscuro habría que inventarlo, y la primera regla del DESIGN.md es
     no inventar colores. Además la jurada lee documentos que son páginas
     blancas: un marco oscuro alrededor de una hoja blanca cansa más.

   · **Ningún patrón de fondo.** El DESIGN.md los prohíbe expresamente detrás
     de formularios, tablas y «interfaces con lectura o acción crítica». Esto
     es las tres cosas a la vez.
   ========================================================================== */

/* --- Poppins, servida desde acá. Es la tipografía principal de ADIPA y se
   usa siempre que esté disponible; Helvetica es la única alternativa que el
   manual aprueba. Arial no es tipografía de marca: aparece sólo como
   `sans-serif` genérico al final del stack. Sin Extra Bold (800): decisión de
   producto del 2026-08-05, en pantalla se lee cargado. --- */
@font-face { font-family:Poppins; font-style:normal; font-weight:400;
  font-display:swap; src:url(poppins-400-latin.woff2) format("woff2"); }
@font-face { font-family:Poppins; font-style:normal; font-weight:500;
  font-display:swap; src:url(poppins-500-latin.woff2) format("woff2"); }
@font-face { font-family:Poppins; font-style:normal; font-weight:600;
  font-display:swap; src:url(poppins-600-latin.woff2) format("woff2"); }
@font-face { font-family:Poppins; font-style:normal; font-weight:700;
  font-display:swap; src:url(poppins-700-latin.woff2) format("woff2"); }

:root {
  /* Paleta principal de marca */
  --brand:#704EFD;              /* morado ADIPA */
  --brand-cyan:#2CB7FF;         /* celeste ADIPA — nunca como texto en claro */
  --brand-soft:#F3F4FF;         /* gris de marca, superficie */
  /* Complementarios */
  --navy:#091E42;
  --blue-soft:#CBE8FF;
  --lavender:#DFD5FF;
  /* Los que el DESIGN.md marca como needs-brand-definition. Se copian tal
     cual del documento: no se aproximan ni se inventan tonos nuevos. */
  --fg:#1d1d1d;                 /* texto principal      16.86:1 sobre blanco */
  --fg-muted:#5b6987;           /* texto secundario      5.50:1 sobre blanco */
  --border:#e3e8f3;
  --border-strong:#9ba7bd;      /* separadores y contornos, nunca texto */
  /* El DESIGN.md lo trae como color de éxito, pero mide 2.30:1 sobre blanco:
     no alcanza ni para un ícono (3:1). Queda declarado y sin usar; lo que
     marca un acierto es el morado de marca. */
  --ok:#4dc247;
  --error:#d9485f;
  /* Radios de UI: 4, 6 y 8. rounded-full sólo para pills y puntos. */
  --r-sm:4px; --r-md:6px; --r:8px; --r-full:9999px;
  /* Card estándar de producto ADIPA */
  --card-bg:#FFFFFF;
  --card-shadow:0 1px 3px rgb(0 0 0 / .15);
  --card-hover-border:rgba(112, 78, 253, .24);
  --card-hover-shadow:0 6px 18px rgb(9 30 66 / .08);
  /* El anillo de foco es el morado de marca, como en el resto del front */
  --ring:#704EFD;
  /* Anchos de las columnas */
  --col-lista:clamp(190px, 15vw, 260px);
  --col-panel:clamp(330px, 27vw, 410px);
}

* { box-sizing:border-box; }

/* `hidden` gana siempre.

   El navegador esconde lo que lleva `hidden` con `display:none` en su hoja de
   usuario-agente, que pierde contra CUALQUIER regla de autor. Así que una
   regla como `.solo-mirar { display:flex }` deja visible un elemento marcado
   `hidden`, y eso pasó de verdad: el aviso de «sólo mirar» aparecía en la
   vista normal de la jurada, y los dos diálogos salían abiertos al cargar la
   página. Con esto, esconder algo con `hidden` funciona en toda la hoja. */
[hidden] { display:none!important; }
/* La aplicación no se desplaza como página: cada columna se desplaza por
   dentro. `overflow:hidden` en html además de body porque con body solo, un
   hijo que se salga de la caja sigue estirando el documento. */
html, body { height:100%; margin:0; overflow:hidden; }
body {
  background:var(--brand-soft); color:var(--fg);
  font:400 14px/1.55 Poppins, Helvetica, sans-serif;
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; overflow:hidden;
}

/* Sólo para lectores de pantalla: el estado que el color por sí solo no dice.

   Va `position:absolute`, que es la técnica estándar. Ojo con una trampa que
   costó encontrar: un elemento absoluto sin ningún antepasado posicionado se
   coloca contra el documento, **no contra su columna**, y entonces ni lo
   recorta el `overflow` de la columna ni cuenta dentro de ella. Uno de estos
   textos, metido al fondo del panel de la pauta, quedó a 1600px de alto y
   estiró la página entera a 1626px: la ventana se desplazaba y se perdía la
   barra de marca. Por eso las tres columnas y `main` llevan
   `position:relative` más abajo. */
.solo-lectores {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* --- foco: se ve siempre, y sólo con teclado --------------------------- */
:where(a, button, input, textarea, [tabindex]):focus-visible {
  outline:2px solid var(--ring); outline-offset:2px;
  border-radius:var(--r-sm);
}
/* Nunca se quita el outline sin reemplazo. Si algo necesita el anillo por
   dentro (un botón pegado a un borde), usa esta clase. */
.foco-dentro:focus-visible { outline-offset:-2px; }

/* ======================================================================
   Barra de marca
   El logotipo va A COLOR, dentro de su caja blanca, sobre el morado
   #704EFD. Es la aplicación que el manual prescribe cuando el fondo no es
   blanco ni el gris de marca: «rectángulo horizontal con bordes
   redondeados», relleno #FFFFFF obligatorio. Así se ven los dos colores del
   logo —el morado y el celeste— en vez de la versión monocromática.

   Sin sombra: el manual la permite «únicamente sobre fondos claros donde
   necesite separación visual», y no en fondos oscuros o de alto contraste.
   Acá el morado ya separa la caja por sí solo.

   El texto blanco sobre ese morado da 5.00:1, que pasa AA para texto normal.
   ====================================================================== */
.barra-marca {
  flex:0 0 auto; background:var(--brand); color:#fff;
  display:flex; align-items:center; gap:.85rem;
  padding:.45rem 1rem;
  /* La ilustración del concurso, con el velo SÓLO donde va el texto: arranca
     oscuro a la izquierda —logo y título— y se desvanece hacia la derecha, que
     queda limpia. Apagar la franja entera habría sido tapar justo lo que se
     quiere mostrar. El morado queda de respaldo si la imagen no carga. */
  position:relative; isolation:isolate;
  background-image:linear-gradient(90deg,
      rgb(22 8 62 / .82) 0%, rgb(22 8 62 / .70) 42%,
      rgb(22 8 62 / .12) 78%, rgb(22 8 62 / 0) 100%),
    url("concurso-2026-banda.jpg");
  background-size:auto, cover;
  background-position:center, center 30%;
  background-repeat:no-repeat, no-repeat;
}
/* Blanco sobre la parte oscura da más de 9:1; el morado liso daba 5,00:1. */
/* La caja. El radio sigue la escala de vértices 22 del manual, que en una
   caja de este alto cae dentro del rango de radios de UI (4-8px). */
.barra-marca .caja-logo {
  background:#FFFFFF; border-radius:var(--r);
  /* El área de seguridad: al menos X libre alrededor. Nada la invade. */
  padding:6px 13px;
  display:inline-flex; align-items:center; flex:0 0 auto;
}
.barra-marca .logo { display:block; height:21px; width:auto; }
.barra-marca .separa { width:1px; height:20px; background:rgb(255 255 255 / .35); }
.barra-marca h1 {
  margin:0; font-size:.94rem; font-weight:600; letter-spacing:-.01em;
  white-space:nowrap;
}
/* Blanco puro, no translúcido: el blanco al 82% sobre el morado da 3.89:1 y
   AA pide 4.5:1 para texto normal. La jerarquía la hace el peso, no el alfa. */
.barra-marca .sub { font-size:.82rem; font-weight:400; color:#fff; }
.barra-marca .der { margin-left:auto; display:flex; align-items:center; gap:.7rem; }

/* Avance. El número va siempre: la barra sola sería color y nada más. */
.avance { display:flex; align-items:center; gap:.6rem; font-size:.82rem;
  color:#fff; margin:0; }
.avance .riel {
  width:110px; height:6px; border-radius:var(--r-full);
  background:rgb(255 255 255 / .28); overflow:hidden;
}
.avance .riel i { display:block; height:100%; background:#fff;
  transition:width .25s ease; }
@media (prefers-reduced-motion: reduce) { .avance .riel i { transition:none; } }

/* ======================================================================
   Sub-barra de filtros
   Son botones de filtro, no un widget de pestañas: llevan aria-pressed, que
   es lo que de verdad describen. Así no prometen flechas ni Home/End.
   ====================================================================== */
.filtros {
  flex:0 0 auto; background:#fff; border-bottom:1px solid var(--border);
  padding:.45rem 1rem; display:flex; align-items:center; gap:.4rem;
  flex-wrap:wrap;
}
.filtros button {
  font:inherit; font-size:.86rem; font-weight:500; cursor:pointer;
  background:#fff; color:var(--fg-muted);
  border:1px solid var(--border); border-radius:var(--r);
  padding:.3rem .7rem; display:inline-flex; align-items:center; gap:.45rem;
}
.filtros button:hover { border-color:var(--card-hover-border); color:var(--fg); }
.filtros button[aria-pressed="true"] {
  background:var(--brand); border-color:var(--brand); color:#fff;
  font-weight:600;
}
.filtros .cuantos {
  font-variant-numeric:tabular-nums; font-size:.78rem;
  background:var(--brand-soft); color:var(--fg-muted);
  border-radius:var(--r-full); padding:0 .4rem; min-width:1.4rem;
  text-align:center;
}
.filtros button[aria-pressed="true"] .cuantos {
  background:rgb(255 255 255 / .22); color:#fff;
}
.filtros .nota { margin-left:auto; margin-block:0; font-size:.8rem;
  color:var(--fg-muted); }

/* El rótulo de cada barra. Es lo que hace que los dos ejes se lean como dos
   preguntas y no como una lista larga de pestañas: sin él, «Cumple bases» y
   «Por resolver» parecían del mismo grupo y el número de uno se leía como el
   del otro. Ancho fijo para que las dos barras queden alineadas. */
.filtros .rotulo {
  flex:0 0 auto; min-width:6.6rem; font-size:.74rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.04em; color:var(--fg-muted);
}

/* La raya corta la barra en dos: a la izquierda lo que dijo el motor
   (Revisión IA), a la derecha lo que decidió una persona (Estado Bases). Son
   columnas distintas del tablero y sin la raya se leería un número por el
   otro. Va con aria-hidden porque no aporta nada leída en voz alta: la
   etiqueta de cada botón ya dice de qué habla. */
/* Los subfiltros, en una cápsula pegada al botón del que dependen.
   ----------------------------------------------------------------------
   La forma tiene que decir «esto es un pedazo de lo de al lado» ANTES de que
   nadie lea la etiqueta, y acá eso importa más que en otras pantallas:
   «Cumple bases» existe también en la barra de arriba y con otro número —5 lo
   que dijo el motor, 11 lo que resolvió el equipo—. Si los subfiltros se
   leyeran como pestañas hermanas, se leería un número por el otro, que es
   justo lo que esta pantalla vino a arreglar.
   Por eso van dentro de una cápsula con fondo, metida contra el botón
   anterior con un margen negativo, y sin borde propio: no compiten, cuelgan. */
/* El botón y su cápsula son UNA pieza: el botón pone el lado izquierdo y la
   cápsula el derecho. `align-items:stretch` es lo que borra la costura —las
   dos partes miden exactamente lo mismo de alto— y el grupo impide que la
   barra los separe al envolver. */
.filtros .grupo-lado {
  display:inline-flex; align-items:stretch; max-width:100%;
}
.filtros .grupo-lado > button.con-hijos {
  border-top-right-radius:0; border-bottom-right-radius:0;
  border-right-color:transparent;
}
.filtros .subgrupo {
  /* En pantallas angostas la pieza fusionada no cabe entera y se salía de la
     barra. Los chips parten adentro de la cápsula, que sigue pegada a su
     botón: el botón se estira con ella —`align-items:stretch`— así que el
     bloque sigue leyéndose como uno solo, más alto. */
  flex-wrap:wrap;
  display:inline-flex; align-items:center; gap:.15rem;
  background:var(--brand-soft); border:1px solid var(--border);
  border-left:0; border-radius:0 var(--r) var(--r) 0;
  padding:.15rem .35rem;
}
.filtros .subgrupo button {
  border:0; background:transparent; color:var(--fg-muted);
  font-size:.78rem; font-weight:500; padding:.16rem .5rem;
  border-radius:var(--r-full);
}
.filtros .subgrupo button:hover { color:var(--fg); background:#fff; }
.filtros .subgrupo button[aria-pressed="true"] {
  background:#fff; font-weight:600;
  /* Morado sobre blanco: 5.00:1, medido. Pasa AA. */
  color:var(--brand);
  box-shadow:0 1px 2px rgb(29 29 29 / .08);
}
.filtros .subgrupo .cuantos { background:#fff; }
.filtros .subgrupo button[aria-pressed="true"] .cuantos {
  background:var(--brand-soft);
}

.filtros .raya {
  width:1px; align-self:stretch; background:var(--border);
  margin-inline:.35rem;
}

/* ======================================================================
   Las tres columnas
   ====================================================================== */
main { flex:1 1 auto; display:flex; min-height:0; overflow:hidden;
  position:relative; }
/* `position:relative` para que los textos de lector de pantalla queden
   dentro de su columna, y `overscroll-behavior:contain` para que al llegar al
   final de una columna el desplazamiento no se pase a la de al lado ni a la
   página. */
main > * { min-height:0; min-width:0; position:relative;
  overscroll-behavior:contain; }

.columna-lista {
  flex:0 0 var(--col-lista); background:#fff;
  border-right:1px solid var(--border); overflow-y:auto;
  scrollbar-gutter:stable;
}
.columna-cuento {
  flex:1 1 auto; background:var(--brand-soft);
  display:flex; flex-direction:column; overflow:hidden;
}
.columna-panel {
  flex:0 0 var(--col-panel); background:#fff;
  border-left:1px solid var(--border); overflow-y:auto;
  scrollbar-gutter:stable; padding:.9rem 1rem 4rem;
}

/* --- la lista de cuentos --- */
.columna-lista ol { list-style:none; margin:0; padding:.4rem; }
.columna-lista li + li { margin-top:.2rem; }
.columna-lista button {
  width:100%; text-align:left; font:inherit; cursor:pointer;
  background:#fff; color:var(--fg);
  border:1px solid transparent; border-radius:var(--r);
  padding:.45rem .55rem; display:flex; align-items:center; gap:.5rem;
}
.columna-lista button:hover {
  background:var(--brand-soft); border-color:var(--card-hover-border);
}
.columna-lista button[aria-current="true"] {
  background:var(--brand-soft); border-color:var(--brand); font-weight:600;
}
.columna-lista .id { font-variant-numeric:tabular-nums; font-size:.86rem; }
.columna-lista .al-lado {
  margin-left:auto; font-size:.75rem; color:var(--fg-muted);
  font-variant-numeric:tabular-nums;
}
/* El avance: cinco puntos, los puestos rellenos.
   Va con FORMA distinta del puntaje final a propósito. Cuando los dos eran
   «n/m» —«3/5» y «17/25»— se confundían, y «3/5» se leía como una nota mala
   en vez de como «llevas tres criterios de cinco». Cinco elementos se ven sin
   contarlos. El texto para lector de pantalla sigue diciendo las palabras
   completas: «3 de 5 puntuados». */
.columna-lista .avance-puntos {
  margin-left:auto; flex:0 0 auto; display:inline-flex; gap:2.5px;
  align-items:center;
}
.columna-lista .avance-puntos i {
  width:5px; height:5px; border-radius:var(--r-full);
  background:var(--border-strong); display:block;
}
.columna-lista .avance-puntos i.puesto { background:var(--brand); }
/* El puntaje terminado sí es una cifra, y se distingue del resto por peso. */
.columna-lista .al-lado.puntos { color:var(--fg); font-weight:600; }

/* El punto de «por resolver», al borde derecho de la fila.
   El número de la pestaña dice cuántas quedan en total; esto dice CUÁLES.
   Sin él, dentro de una pestaña de cien filas no había forma de ver de un
   vistazo dónde quedó el trabajo. No va solo: al lado hay un texto para
   lectores de pantalla, porque un color no se lee en voz alta ni lo
   distingue quien no ve ese color. */
.columna-lista .punto-pendiente {
  flex:0 0 auto; width:.5rem; height:.5rem; border-radius:var(--r-full);
  background:var(--brand-cyan); margin-left:.15rem;
}
.columna-lista button[aria-current="true"] .punto-pendiente {
  background:var(--brand);
}

/* Los huesos de la lista mientras carga. Tienen la forma de una fila de
   verdad —el circulito del estado y la barra del número— así que cuando
   llegan los datos nada se mueve de lugar. El latido es lo que dice «esto
   sigue vivo»; un texto quieto no puede decirlo. */
.columna-lista .huesos { padding:.4rem; }
.columna-lista .hueso-fila {
  display:flex; align-items:center; gap:.5rem; padding:.45rem .55rem;
}
.columna-lista .hueso {
  background:linear-gradient(90deg, #e8e6f4 0%, #f4f2fb 50%, #e8e6f4 100%);
  background-size:220% 100%; border-radius:4px;
  animation:hueso-late 1.5s ease-in-out infinite;
}
.columna-lista .hueso.circulo {
  width:11px; height:11px; border-radius:var(--r-full); flex:0 0 auto;
}
.columna-lista .hueso.barra { height:9px; }
@keyframes hueso-late {
  0%   { background-position:120% 0; }
  100% { background-position:-120% 0; }
}
/* Quien pidió menos movimiento ve los huesos quietos, que igual comunican. */
@media (prefers-reduced-motion:reduce) {
  .columna-lista .hueso { animation:none; }
  .columna-lista .giro  { animation:none; }
}
.columna-lista .estado-carga {
  display:flex; align-items:center; gap:.5rem;
  margin:.5rem .4rem 0; padding:.75rem .55rem 0;
  border-top:1px solid var(--border);
  font-size:.76rem; color:var(--fg-muted);
}
.columna-lista .giro {
  width:11px; height:11px; border-radius:var(--r-full); flex:0 0 auto;
  border:2px solid var(--border); border-top-color:var(--brand);
  animation:giro-carga .9s linear infinite;
}
@keyframes giro-carga { to { transform:rotate(360deg); } }

.columna-lista p.vacia {
  padding:1.3rem .9rem; color:var(--fg-muted); font-size:.86rem; margin:0;
}

/* --- el estado, con forma y texto además del color ---------------------
   «Nunca comuniques solo con color»: cada estado tiene una FORMA distinta
   (anillo hueco / relleno / relleno con marca) y su nombre en texto para
   quien usa lector de pantalla. Un 8% de los hombres no distingue el color.
   --------------------------------------------------------------------- */
.senal {
  width:11px; height:11px; border-radius:var(--r-full); flex:0 0 auto;
  display:inline-grid; place-items:center; font-size:8px; line-height:1;
  color:#fff;
}
.senal.Pendiente { border:2px solid var(--fg-muted); background:#fff; }
.senal.Pendiente.empezado {
  background:linear-gradient(90deg, var(--brand-cyan) 50%, #fff 50%);
}
.senal.Evaluado {
  background:var(--brand-cyan); border:1.5px solid var(--fg-muted);
}
.senal.Clasificado { background:var(--brand); }
.senal.Clasificado::after { content:"✓"; font-size:7px; font-weight:700; }

/* ======================================================================
   El cuento
   ====================================================================== */
/* La barra del cuento abierto.
   ----------------------------------------------------------------------
   `flex-wrap` en la barra y `nowrap` en cada pieza. Sin eso, en una pantalla
   angosta no se envolvía la barra: se envolvía el CONTENIDO de cada pieza
   —«por / evaluar» en dos líneas dentro de su pastilla, el botón de
   conversación en dos— y la barra quedaba del doble de alto y descuadrada.
   Envolviéndola entera, las piezas bajan enteras. */
.cuento-barra {
  flex:0 0 auto; display:flex; align-items:center; gap:.4rem .6rem;
  flex-wrap:wrap; padding:.42rem .9rem; background:#fff;
  border-bottom:1px solid var(--border); font-size:.8rem;
  color:var(--fg-muted);
}
.cuento-barra > * { white-space:nowrap; }
.cuento-barra .participante {
  font-weight:600; color:var(--fg); font-variant-numeric:tabular-nums;
  font-size:.88rem;
}
/* El grupo del tamaño se queda a la derecha y no se parte nunca: son tres
   botones chicos y son lo que más se usa. */
.cuento-barra .der {
  margin-left:auto; display:flex; gap:.3rem; align-items:center;
  flex:0 0 auto;
}
/* «ancho» no es un número, así que el botón no puede tener el ancho justo
   para tres dígitos. */
.cuento-barra .der button { min-width:2.6rem; text-align:center; }
.cuento-barra button {
  font:inherit; font-size:.78rem; cursor:pointer; background:#fff;
  border:1px solid var(--border); border-radius:var(--r-md);
  padding:.22rem .55rem; color:var(--fg-muted); min-width:2rem;
}
.cuento-barra button:hover { border-color:var(--card-hover-border);
  color:var(--fg); }

/* La pastilla de estado del cuento abierto: color + palabra. */
.pastilla {
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.74rem; font-weight:600; padding:.1rem .5rem;
  border-radius:var(--r-full); border:1px solid var(--border);
  color:var(--fg-muted); background:#fff;
}
/* El celeste no puede ser texto (2.25:1). Va de borde, y la palabra la
   lleva el tono de texto secundario, que da 5.50:1. */
.pastilla.Evaluado { border-color:var(--brand-cyan); border-width:2px; }
.pastilla.Clasificado { border-color:var(--brand); color:var(--brand); }

.lienzo { flex:1 1 auto; overflow:auto; padding:1.1rem; }
.lienzo iframe {
  width:100%; height:100%; min-height:78vh; border:0;
  border-radius:var(--r); background:#fff;
}
.lienzo img.foto {
  max-width:100%; display:block; margin:0 auto;
  box-shadow:var(--card-shadow); border-radius:var(--r-sm);
}
.lienzo pre.llano {
  background:#fff; color:var(--fg); padding:2.5rem 3rem; margin:0 auto;
  max-width:780px; white-space:pre-wrap;
  font:400 15px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace;
  box-shadow:var(--card-shadow); border-radius:var(--r-sm);
}
/* docx-preview trae su propia hoja de página; se le quita el fondo para que
   la única página blanca sea la del documento. El ancho NO se toca. */
.lienzo .docx-wrapper { background:transparent!important; padding:0!important; }
.lienzo .docx-wrapper > section.docx {
  margin:0 auto 1rem!important; box-shadow:var(--card-shadow)!important;
}
/* El texto se pinta SIEMPRE por encima de las imágenes de la página.

   No es una preferencia estética. Un cuento de 2025 trae cinco copias de la
   misma foto, estiradas por el propio documento a formas absurdas —una de
   25x849 px, otra de 2603x126—, todas flotantes y todas declaradas
   `behindDoc="1"`, que en Word significa **detrás del texto**. docx-preview
   las mete en el flujo y las pinta encima, y esa de 25px de ancho tapaba el
   trazo izquierdo de la primera letra de cada línea: parecía que la vista
   previa recortaba el cuento.

   Así que subir el texto por delante no rompe la fidelidad, la arregla: es
   lo que Word hace. Y las imágenes en línea van dentro del párrafo, así que
   siguen donde estaban. De los 48 Word de 2025, 2 traen imágenes flotantes
   y las 6 dicen `behindDoc="1"`.

   Lo que queda distinto de Word: docx-preview coloca las flotantes en el
   flujo del texto y no en las coordenadas que el documento les fija, así que
   pueden aparecer más arriba o más abajo de donde Word las pondría. */
.lienzo section.docx p { position:relative; z-index:1; }
.lienzo section.docx img { z-index:0; }

.aviso {
  margin:2rem auto; max-width:520px; padding:1rem 1.1rem;
  background:#fff; border:1px solid var(--border);
  border-radius:var(--r); color:var(--fg-muted); font-size:.9rem;
}
.aviso.malo { border-color:var(--error); color:var(--error); }

/* ======================================================================
   La pauta
   ====================================================================== */
.columna-panel h2 {
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--fg-muted); margin:0 0 .55rem; font-weight:600;
}
.columna-panel h2 + h2 { margin-top:1.4rem; }
.escala {
  font-size:.76rem; color:var(--fg-muted); line-height:1.55;
  background:var(--brand-soft); border-radius:var(--r);
  padding:.55rem .65rem; margin:0 0 .9rem;
}
.escala b { color:var(--fg); font-weight:600; }

.tarjeta {
  background:var(--card-bg); border:1px solid var(--border);
  border-radius:var(--r); box-shadow:var(--card-shadow);
  padding:.65rem .7rem; margin-bottom:.65rem;
}
.tarjeta h3 {
  margin:0 0 .3rem; font-size:.9rem; font-weight:600;
  display:flex; align-items:center; gap:.4rem;
}
.tarjeta h3 .puesto { color:var(--brand); font-size:.78rem; font-weight:700; }
.tarjeta p.definicion {
  margin:0 0 .55rem; font-size:.78rem; color:var(--fg-muted); line-height:1.5;
}
/* Los cinco puntajes. Es un grupo con nombre, así que un lector de pantalla
   dice de qué criterio son antes de leer los números. */
.notas { display:flex; gap:.3rem; }
/* El borde de card de ADIPA (#e3e8f3) mide 1.23:1 contra el blanco: sirve
   para separar superficies, no para dibujar un control. Acá el número —en
   tono de texto secundario, 5.50:1— es lo que identifica cada botón, y el
   relleno morado lo que identifica el elegido. El borde acompaña. */
.notas button {
  flex:1 1 0; font:inherit; font-size:.95rem; font-weight:600; cursor:pointer;
  background:#fff; color:var(--fg-muted);
  border:1px solid var(--border-strong); border-radius:var(--r-md);
  padding:.38rem 0; font-variant-numeric:tabular-nums;
}
.notas button:hover:not(:disabled) {
  border-color:var(--card-hover-border); color:var(--fg);
}
.notas button[aria-pressed="true"] {
  background:var(--brand); border-color:var(--brand); color:#fff;
}
.notas button:disabled { opacity:.5; cursor:not-allowed; }
.tarjeta .que-dice {
  margin:.35rem 0 0; font-size:.75rem; color:var(--fg-muted); min-height:1.1em;
}

label.campo {
  display:block; font-size:.8rem; font-weight:500; color:var(--fg);
  margin:0 0 .3rem;
}
textarea {
  width:100%; font:inherit; font-size:.85rem; line-height:1.5;
  background:#fff; color:var(--fg);
  border:1px solid var(--border); border-radius:var(--r);
  padding:.5rem .6rem; resize:vertical; min-height:5rem;
}
textarea::placeholder { color:var(--fg-muted); opacity:.85; }
textarea:disabled { background:var(--brand-soft); color:var(--fg-muted); }
.dicho { font-size:.74rem; color:var(--fg-muted); min-height:1.15em;
  margin:.3rem 0 0; }

.acciones { display:flex; flex-direction:column; gap:.45rem; margin-top:1rem; }
.acciones button {
  font:inherit; font-size:.88rem; font-weight:500; cursor:pointer;
  padding:.52rem .7rem; border-radius:var(--r);
  border:1px solid var(--border); background:#fff; color:var(--fg);
}
.acciones button:hover:not(:disabled) {
  border-color:var(--card-hover-border); background:var(--brand-soft);
}
.acciones button:disabled { opacity:.5; cursor:not-allowed; }
.acciones button.principal {
  background:var(--brand); border-color:var(--brand); color:#fff;
  font-weight:600;
}
.acciones button.principal:hover:not(:disabled) {
  background:rgba(112, 78, 253, .85); border-color:rgba(112, 78, 253, .85);
}
.acciones button.secundaria {
  background:var(--navy); border-color:var(--navy); color:#fff;
  font-weight:600;
}
.acciones button.secundaria:hover:not(:disabled) { opacity:.9; }

/* Los recados llevan role="status": cambian sin que nadie los pida, así que
   un lector de pantalla tiene que anunciarlos. */
.recado {
  margin-top:.7rem; font-size:.81rem; padding:.5rem .6rem;
  border-radius:var(--r); border:1px solid var(--border);
  color:var(--fg-muted); display:none;
}
.recado.se-ve { display:flex; gap:.45rem; align-items:flex-start; }
/* El texto va siempre en el tono principal, que se lee sobre blanco. El
   color vive en el borde y en el glifo, que son elementos de interfaz y les
   basta 3:1. Medido: #d9485f da 4.16:1 —sirve de borde y de glifo, no de
   texto—; el verde #4dc247 da 2.30:1 y no sirve para nada que informe, así
   que el acierto se marca con el morado de marca (5.00:1). */
.recado { color:var(--fg); }
.recado.malo { border-color:var(--error); border-width:2px; }
.recado.bien { border-color:var(--brand); border-width:2px; }
/* El ✓ y el ! son el segundo canal: no se distingue sólo por el color. */
.recado.bien::before { content:"✓"; font-weight:700; color:var(--brand); }
.recado.malo::before { content:"!"; font-weight:700; color:var(--error); }

/* ── El aviso flotante ──────────────────────────────────────────────────
   Va arriba y al centro, por encima de todo. Antes este aviso vivía al pie
   de la columna de la derecha y no lo veía nadie: cuando se cambia de cuento
   se está mirando la lista de la izquierda.

   No bloquea a propósito. Una jurada abre doscientos cuentos en una sesión, y
   una ventana que hay que cerrar en cada cambio se aprende a cerrar sin
   leerla. Éste se puede ignorar y se va solo. */
.aviso-flotante {
  position:fixed; top:64px; left:50%; z-index:60;
  transform:translate(-50%, -10px); opacity:0;
  transition:opacity .18s ease, transform .18s ease;
  display:flex; align-items:center; gap:.7rem;
  max-width:min(42rem, calc(100vw - 2rem));
  background:var(--card-bg); color:var(--fg);
  border:2px solid var(--brand); border-radius:var(--r);
  box-shadow:0 10px 32px rgb(9 30 66 / .22);
  padding:.6rem .7rem .6rem .9rem; font-size:.86rem;
}
.aviso-flotante.se-ve { opacity:1; transform:translate(-50%, 0); }
@media (prefers-reduced-motion:reduce) {
  .aviso-flotante { transition:none; transform:translate(-50%, 0); }
}
.aviso-flotante .dice { flex:1 1 auto; line-height:1.45; }
.aviso-flotante .hacer {
  flex:0 0 auto; font:inherit; font-size:.82rem; font-weight:600;
  cursor:pointer; white-space:nowrap;
  background:var(--brand); color:#fff; border:1px solid var(--brand);
  border-radius:var(--r-sm); padding:.32rem .8rem;
}
.aviso-flotante .hacer:hover { filter:brightness(1.08); }
.aviso-flotante .hacer:disabled { opacity:.6; cursor:default; }
.aviso-flotante .cerrar-aviso {
  flex:0 0 auto; font:inherit; font-size:1.15rem; line-height:1;
  cursor:pointer; background:none; border:0; color:var(--fg-muted);
  padding:.1rem .3rem; border-radius:var(--r-sm);
}
.aviso-flotante .cerrar-aviso:hover { color:var(--fg); }
@media (max-width:640px) {
  .aviso-flotante { top:auto; bottom:1rem; flex-wrap:wrap; }
}

/* El botón que trae un recado cuando además de avisar se puede resolver.
   Va dentro del recado y al final, para que primero se lea qué pasó. */
.recado-accion {
  margin-left:auto; flex:0 0 auto; font:inherit; font-size:.78rem;
  font-weight:600; cursor:pointer; white-space:nowrap;
  background:var(--brand); color:#fff; border:1px solid var(--brand);
  border-radius:var(--r-sm); padding:.2rem .6rem;
}
.recado-accion:hover { filter:brightness(1.08); }
.recado-accion:disabled { opacity:.6; cursor:default; }

.atajos {
  margin-top:1.3rem; font-size:.74rem; color:var(--fg-muted); line-height:1.8;
}
.atajos kbd {
  font:inherit; font-size:.72rem; border:1px solid var(--border);
  border-radius:var(--r-sm); padding:.05rem .3rem; background:var(--brand-soft);
  color:var(--fg);
}

/* ======================================================================
   Tabla de puntajes (vista de reunión)
   ====================================================================== */
table.puntajes { width:100%; border-collapse:collapse; font-size:.82rem; }
table.puntajes caption { text-align:left; }
table.puntajes th, table.puntajes td {
  text-align:left; padding:.34rem .3rem; border-bottom:1px solid var(--border);
}
table.puntajes thead th {
  color:var(--fg-muted); font-weight:600; font-size:.74rem;
}
table.puntajes .n { text-align:center; font-variant-numeric:tabular-nums;
  width:3.2rem; }
table.puntajes tr.total td {
  font-weight:700; border-bottom:0; border-top:1px solid var(--border-strong);
}
table.puntajes td.falta { color:var(--fg-muted); }
.suma-tres {
  margin:.7rem 0 0; font-size:.82rem; color:var(--fg-muted);
  background:var(--brand-soft); border-radius:var(--r); padding:.5rem .6rem;
}
.suma-tres b { color:var(--fg); font-size:1rem; }

.observacion { margin:0 0 .8rem; }
.observacion b {
  display:block; font-size:.76rem; color:var(--fg-muted); font-weight:600;
}
.observacion p { margin:.15rem 0 0; font-size:.83rem; color:var(--fg);
  white-space:pre-wrap; }
.observacion p.sin { color:var(--fg-muted); font-style:italic; }

/* Los votos de clasificación, con inicial: forma + letra, no sólo color. */
.votos { display:flex; gap:3px; }
.votos span {
  width:15px; height:15px; border-radius:var(--r-full);
  display:inline-grid; place-items:center;
  font-size:9px; font-weight:700; line-height:1;
  border:1px solid var(--fg-muted); background:#fff;
  color:var(--fg-muted);
}
.votos span.si {
  background:var(--brand); border-color:var(--brand); color:#fff;
}


/* ======================================================================
   El hilo de dudas al equipo
   Queda registro de lo que la jurada preguntó y de lo que el equipo
   contestó en Monday. Sólo sus propias dudas: en la misma fila vive la
   actualización del motor, y ahí va el nombre del archivo.
   ====================================================================== */
.hilo { margin:0; padding:0; list-style:none; }
.hilo > li {
  background:var(--card-bg); border:1px solid var(--border);
  border-radius:var(--r); box-shadow:var(--card-shadow);
  padding:.6rem .65rem; margin-bottom:.6rem;
}
.hilo .cuando {
  font-size:.72rem; color:var(--fg-muted); display:flex; gap:.4rem;
  align-items:center; margin:0 0 .25rem;
}
.hilo .pregunta { margin:0; font-size:.83rem; white-space:pre-wrap; }
.hilo .respuestas { margin:.55rem 0 0; padding:0 0 0 .7rem; list-style:none;
  border-left:2px solid var(--brand); }
.hilo .respuestas li + li { margin-top:.5rem; }
/* La cabecera de una respuesta va en una línea que envuelve, no en columnas:
   con flex, un nombre largo partía en dos y dejaba la fecha desalineada. */
.hilo .respuestas .cuando { display:block; }
.hilo .quien { font-size:.74rem; font-weight:600; color:var(--fg);
  margin-right:.3rem; }
.hilo .respuestas p { margin:.1rem 0 0; font-size:.83rem; white-space:pre-wrap;
  color:var(--fg); }
.hilo .sin-respuesta {
  margin:.5rem 0 0; font-size:.77rem; color:var(--fg-muted); font-style:italic;
}
/* «Nueva» lleva palabra, no sólo color: el color solo no comunica nada. */
.nueva {
  font-size:.66rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; background:var(--brand); color:#fff;
  border-radius:var(--r-full); padding:.05rem .4rem;
}
/* El aviso de dudas respondidas, en la barra morada. La caja blanca lo
   separa del morado y el texto morado sobre blanco da 5.00:1. */
.barra-marca .respondidas {
  background:#fff; color:var(--brand); font-weight:600; font-size:.78rem;
  border-radius:var(--r-full); padding:.12rem .6rem; white-space:nowrap;
}
/* La marca en la lista: un punto no alcanza, va el número. */
/* En la lista sólo aparece cuando hay sin leer, así que va morado. */
.columna-lista .sin-leer {
  font-size:.66rem; font-weight:700; background:var(--brand); color:#fff;
  border-radius:var(--r-full); padding:0 .3rem; min-width:1.05rem;
  text-align:center; flex:0 0 auto;
}


/* ======================================================================
   La vista de administración
   ====================================================================== */
/* Las tres vistas de dentro son las mismas páginas que usan las juradas,
   servidas bajo /admin/. Ahí su propia barra de marca se esconde: la de
   arriba, con las pestañas, es la del panel. */
body.dentro-de-admin > .barra-marca { display:none; }

/* ======================================================================
   El menú del panel del equipo
   ----------------------------------------------------------------------
   Son SECCIONES del sitio, no filtros. Antes eran cajitas con borde, y una
   cajita con borde en una barra se lee como un chip de filtro: algo que se
   activa y se desactiva. Estas tres son lugares distintos a los que se va,
   así que se dibujan como el menú de un sitio: texto y un subrayado en la que
   estás.

   **Por qué el texto NO se apaga en las que no están puestas.** Es la forma
   obvia de marcar la activa y no se puede usar acá: medido sobre el morado de
   marca, el blanco puro da 5.00:1 y pasa AA, pero al 90 % cae a 4.36:1, al
   82 % a 3.89:1 y al 72 % a 3.35:1 — todos por debajo del 4.5:1 que pide un
   texto. Así que todas van en blanco puro y la diferencia la hacen el
   subrayado y el peso, que no son texto y piden sólo 3:1. La barra blanca da
   5.00:1 y sobra.

   Y no queda dicho sólo por color: `aria-current="page"` lo dice para quien
   no ve la barra.
   ====================================================================== */
.menu-admin {
  flex:0 0 auto; background:var(--brand);
  display:flex; align-items:stretch; gap:0;
  padding:0 1rem;
}
.menu-admin .caja-logo {
  background:#fff; border-radius:var(--r); padding:6px 13px;
  display:inline-flex; align-items:center; margin-right:1.6rem;
  align-self:center; flex:0 0 auto;
}
.menu-admin .caja-logo img { display:block; height:21px; width:auto; }

.menu-admin .secciones { display:flex; align-items:stretch; gap:1.5rem; }
.menu-admin .secciones a {
  font:inherit; font-size:.88rem; font-weight:500; text-decoration:none;
  color:#fff; white-space:nowrap;
  display:inline-flex; align-items:center;
  /* El subrayado vive en el borde de abajo, así que el enlace ocupa toda la
     altura de la barra y la línea queda pegada al filo. Es lo que lo hace
     leer como menú y no como botón. */
  padding:.85rem 0 calc(.85rem - 3px);
  border-bottom:3px solid transparent;
}
.menu-admin .secciones a:hover { border-bottom-color:rgb(255 255 255 / .45); }
.menu-admin .secciones a[aria-current="page"] {
  font-weight:600; border-bottom-color:#fff;
}
.menu-admin .secciones a:focus-visible {
  outline:2px solid #fff; outline-offset:-4px; border-radius:var(--r-sm);
}

.menu-admin .quien {
  margin-left:auto; display:flex; align-items:center; gap:.9rem;
  font-size:.8rem; color:#fff; white-space:nowrap;
}
.menu-admin .quien .salir { color:#fff; text-decoration:underline; }
.menu-admin .quien .salir:hover { opacity:.85; }

/* El submenú de «cada jurado»: el segundo nivel, en blanco bajo el morado.
   Mismo trato —texto y subrayado— para que se lea como la continuación del
   menú de arriba y no como otra cosa. */
.submenu {
  flex:0 0 auto; background:#fff; border-bottom:1px solid var(--border);
  padding:0 1rem; display:flex; align-items:stretch;
}
.submenu .secciones { display:flex; align-items:stretch; gap:1.3rem; }
.submenu a {
  font-size:.85rem; font-weight:500; text-decoration:none;
  color:var(--fg-muted); white-space:nowrap;
  display:inline-flex; align-items:center;
  padding:.6rem 0 calc(.6rem - 3px);
  border-bottom:3px solid transparent;
}
.submenu a:hover { color:var(--fg); border-bottom-color:var(--border-strong); }
.submenu a[aria-current="page"] {
  color:var(--brand); font-weight:600; border-bottom-color:var(--brand);
}
.submenu a:focus-visible {
  outline:2px solid var(--brand); outline-offset:-4px;
  border-radius:var(--r-sm);
}
.submenu .nota { margin-left:auto; margin-block:0; align-self:center;
  font-size:.8rem; color:var(--fg-muted); }

.marco-admin { flex:1 1 auto; border:0; width:100%; min-height:0;
  background:var(--brand-soft); }

/* Una advertencia de sólo lectura, para que quede claro que lo que se ve es
   de otra persona y no se puede tocar. */
.solo-mirar {
  background:var(--lavender); color:var(--fg);
  border-bottom:1px solid var(--border);
  padding:.35rem 1rem; font-size:.8rem; display:flex; gap:.4rem;
  align-items:center; flex:0 0 auto;
}
.solo-mirar strong { font-weight:600; }

/* ======================================================================
   Diálogos: el hilo de dudas y el historial

   Se usa el `<dialog>` del navegador y no un div con `position:fixed`,
   porque `showModal()` trae gratis lo que si no hay que escribir a mano y
   sale mal: el foco entra y no se escapa, `Escape` cierra, el resto de la
   página queda inerte para el lector de pantalla, y el fondo se oscurece.
   ====================================================================== */
/* `[open]` es imprescindible: sin él, `display:flex` pisa el
   `dialog:not([open]) { display:none }` del navegador y el diálogo se ve
   siempre, encima de la página y sin fondo. */
dialog.hoja[open] {
  border:0; padding:0; border-radius:var(--r);
  background:#fff; color:var(--fg);
  width:min(680px, calc(100vw - 2rem));
  max-height:min(80vh, 720px);
  box-shadow:0 10px 30px rgb(9 30 66 / .22);
  font:400 14px/1.55 Poppins, Helvetica, sans-serif;
  display:flex; flex-direction:column; overflow:hidden;
}
dialog.hoja::backdrop { background:rgb(9 30 66 / .45); }
dialog.hoja > header {
  flex:0 0 auto; display:flex; align-items:center; gap:.6rem;
  padding:.75rem .95rem; border-bottom:1px solid var(--border);
  background:var(--brand-soft);
}
dialog.hoja > header h2 {
  margin:0; font-size:.98rem; font-weight:600; text-transform:none;
  letter-spacing:0; color:var(--fg);
}
dialog.hoja > header .cual {
  font-size:.82rem; color:var(--fg-muted); font-variant-numeric:tabular-nums;
}
dialog.hoja > header button.cerrar {
  margin-left:auto; font:inherit; font-size:1.1rem; line-height:1;
  cursor:pointer; background:#fff; color:var(--fg-muted);
  border:1px solid var(--border); border-radius:var(--r-md);
  padding:.15rem .5rem;
}
dialog.hoja > header button.cerrar:hover {
  border-color:var(--card-hover-border); color:var(--fg);
}
dialog.hoja > .cuerpo {
  flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain;
  padding:.9rem .95rem; position:relative;
}
dialog.hoja > footer {
  flex:0 0 auto; padding:.7rem .95rem; border-top:1px solid var(--border);
  display:flex; gap:.5rem; align-items:center; background:#fff;
}
dialog.hoja > footer .nota { margin:0; font-size:.78rem;
  color:var(--fg-muted); }
dialog.hoja > footer button { margin-left:auto; flex:0 0 auto; }
/* El aviso, en el pie, no arrastra el margen que lleva en la barra lateral */
dialog.hoja > footer .recado { margin-top:0; flex:1 1 auto; }

/* Responder dentro de un hilo */
.responder { margin:.6rem 0 0; }
.responder textarea { min-height:3.4rem; font-size:.84rem; }
.responder .fila { display:flex; gap:.5rem; align-items:center;
  margin-top:.4rem; }
.responder .fila .a-quien { font-size:.75rem; color:var(--fg-muted); }
.responder .fila button { margin-left:auto; font:inherit; font-size:.84rem;
  font-weight:600; cursor:pointer; padding:.35rem .8rem;
  border-radius:var(--r); border:1px solid var(--brand);
  background:var(--brand); color:#fff; }
.responder .fila button:hover:not(:disabled) {
  background:rgba(112, 78, 253, .85); border-color:rgba(112, 78, 253, .85); }
.responder .fila button:disabled { opacity:.5; cursor:not-allowed; }

/* Una respuesta escrita por la propia jurada se ve distinta de una del
   equipo: el borde cambia de lado y el fondo es el gris de marca. */
.hilo .respuestas li.mia {
  background:var(--brand-soft); border-radius:var(--r);
  padding:.4rem .5rem; margin-left:-.5rem;
}

/* Una duda nueva, al final del diálogo */
.nueva-duda { border-top:1px solid var(--border); margin-top:1rem;
  padding-top:.9rem; }
.nueva-duda h3 { margin:0 0 .4rem; font-size:.88rem; font-weight:600; }

/* El historial */
.historial { margin:0; padding:0; list-style:none; }
.historial > li + li { margin-top:.5rem; }
.historial button {
  width:100%; text-align:left; font:inherit; cursor:pointer;
  background:#fff; border:1px solid var(--border); border-radius:var(--r);
  padding:.55rem .65rem; color:var(--fg);
}
.historial button:hover { border-color:var(--card-hover-border);
  background:var(--brand-soft); }
.historial .cabeza { display:flex; gap:.45rem; align-items:center;
  font-size:.75rem; color:var(--fg-muted); margin-bottom:.2rem; }
.historial .cabeza .quien-cuento { font-weight:600; color:var(--fg);
  font-variant-numeric:tabular-nums; }
.historial .pregunta { font-size:.83rem; margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; }
.historial .estado-duda { font-size:.72rem; margin:.25rem 0 0;
  color:var(--fg-muted); }

/* Los botones que abren los diálogos */
.barra-marca button.notificaciones {
  font:inherit; font-size:.8rem; font-weight:600; cursor:pointer;
  background:#fff; color:var(--brand); border:1px solid #fff;
  border-radius:var(--r-full); padding:.16rem .7rem .16rem .55rem;
  white-space:nowrap; display:inline-flex; align-items:center; gap:.35rem;
}
.barra-marca button.notificaciones:hover { background:var(--brand-soft); }
.barra-marca button.notificaciones svg { width:1.05rem; height:1.05rem;
  flex:0 0 auto; }
.barra-marca button.notificaciones .cuantas {
  background:var(--brand); color:#fff; border-radius:var(--r-full);
  font-size:.7rem; padding:0 .32rem; min-width:1.05rem; text-align:center;
}
/* El morado es el color activo de ADIPA, así que acá significa una cosa y
   sólo una: **hay algo sin leer**. Un hilo ya leído se muestra en tono
   pasivo. Antes el botón iba morado siempre y daba la sensación de aviso
   cuando no había nada nuevo. */
.cuento-barra button.conversacion {
  display:inline-flex; align-items:center; gap:.4rem;
}
.cuento-barra button.conversacion:hover { background:var(--brand-soft); }
.cuento-barra button.conversacion .cuantas {
  background:var(--brand-soft); color:var(--fg-muted);
  border-radius:var(--r-full); font-size:.7rem; padding:0 .4rem;
  font-weight:600;
}
/* Con algo sin leer, y sólo entonces, el morado. */
.cuento-barra button.conversacion.sin-leer {
  font-weight:600; color:var(--brand); border-color:var(--brand);
}
.cuento-barra button.conversacion.sin-leer .cuantas {
  background:var(--brand); color:#fff;
}

/* ======================================================================
   Con qué perfil escribe en Monday
   Una tira bajo los filtros. Importa que se vea sin buscarla: si escribe
   pensando que sale con su nombre y sale con el de la plataforma, el equipo
   lee mal quién dijo qué.
   ====================================================================== */
.perfil-monday {
  flex:0 0 auto; display:flex; gap:.5rem; align-items:center;
  padding:.38rem 1rem; font-size:.82rem;
  background:var(--brand-soft); color:var(--fg);
  border-bottom:1px solid var(--border);
}
.perfil-monday code {
  font:inherit; font-weight:600; background:#fff; border-radius:var(--r-sm);
  padding:.02rem .3rem; border:1px solid var(--border);
}
.perfil-monday.conectada { background:#fff; color:var(--fg-muted); }
.perfil-monday strong { font-weight:600; color:var(--fg); }
.perfil-monday .dice { flex:1 1 auto; min-width:0; }
/* `flex:0 0 auto` es imprescindible: sin él el texto se queda con todo el
   ancho y el botón se comprime hasta desaparecer. Pasó de verdad. */
.perfil-monday a, .perfil-monday button.enlace {
  flex:0 0 auto;
  font:inherit; font-size:.8rem; font-weight:600; cursor:pointer;
  background:var(--brand); color:#fff; border:1px solid var(--brand);
  border-radius:var(--r); padding:.2rem .6rem; text-decoration:none;
  white-space:nowrap;
}
.perfil-monday a:hover { background:rgba(112, 78, 253, .85); }
.perfil-monday button.suelto {
  margin-left:auto; background:#fff; color:var(--fg-muted);
  border-color:var(--border); font-weight:400;
}
.perfil-monday button.suelto:hover { border-color:var(--card-hover-border);
  color:var(--fg); }

/* Una respuesta que acaba de llegar sola, sin recargar. El destello es para
   que se note el cambio; la etiqueta «nueva» es la que informa, así que con
   `prefers-reduced-motion` se apaga el movimiento y no se pierde nada. */
.hilo .respuestas li.recien {
  animation: aparece 2.4s ease-out 1;
}
@keyframes aparece {
  0%   { background:var(--lavender); }
  100% { background:transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .hilo .respuestas li.recien { animation:none; background:var(--lavender); }
}

/* ======================================================================
   Revisión del motor: buscador, veredicto y Motivo IA
   ====================================================================== */

/* El buscador. `type="search"` para que el navegador dé la cruz de borrar. */
.buscador {
  flex:0 0 auto; display:flex; align-items:center; gap:.4rem;
  background:#fff; border:1px solid var(--border-strong);
  border-radius:var(--r); padding:.18rem .5rem;
  min-width:clamp(180px, 22vw, 300px);
}
.buscador:focus-within { border-color:var(--brand);
  box-shadow:0 0 0 2px rgba(112, 78, 253, .18); }
.buscador svg { width:.95rem; height:.95rem; color:var(--fg-muted);
  flex:0 0 auto; }
.buscador input {
  flex:1 1 auto; min-width:0; font:inherit; font-size:.84rem;
  border:0; outline:0; background:transparent; color:var(--fg);
  padding:.14rem 0;
}
.buscador input::placeholder { color:var(--fg-muted); }
.buscador .cuantos-hallados { font-size:.74rem; color:var(--fg-muted);
  white-space:nowrap; }

/* El veredicto del motor, en grande, arriba del panel. El color va en el
   borde y en la etiqueta pequeña: el veredicto en sí se lee en tono de texto
   normal, que es el que se lee bien sobre blanco. */
.veredicto-grande {
  border:2px solid var(--border-strong); border-radius:var(--r);
  padding:.7rem .8rem; margin:0 0 1rem; background:#fff;
}
/* De quién es esta resolución. Va arriba y chico porque no es el dato, es
   quién lo dijo: el mismo panel tiene dos resoluciones —la de Claude acá y la
   del equipo en Estado Bases— y no se distinguían. */
.veredicto-grande .de-quien {
  margin:0 0 .2rem; font-size:.7rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.05em; color:var(--fg-muted);
}
.veredicto-grande .cual {
  margin:0; font-size:1.12rem; font-weight:700; line-height:1.25;
  display:flex; align-items:center; gap:.45rem;
}
.veredicto-grande .cuando { margin:.25rem 0 0; font-size:.76rem;
  color:var(--fg-muted); }
.veredicto-grande.cumple   { border-color:var(--brand); }
.veredicto-grande.incumple { border-color:var(--error); }
.veredicto-grande.revisar  { border-color:var(--brand-cyan); }
.veredicto-grande.error    { border-color:var(--navy); }

/* El Motivo IA, desarmado en chequeos */
.chequeos { margin:0; padding:0; list-style:none; }
.chequeos > li {
  display:grid; grid-template-columns:1.35rem 1fr; gap:.1rem .5rem;
  padding:.5rem 0; border-bottom:1px solid var(--border);
}
.chequeos > li:last-child { border-bottom:0; }
.chequeos .emoji { font-size:.95rem; line-height:1.5; text-align:center; }
.chequeos .etiqueta { font-size:.86rem; font-weight:600; }
.chequeos .dice { grid-column:2; margin:.15rem 0 0; font-size:.82rem;
  color:var(--fg-muted); line-height:1.55; }
.chequeos .dice p { margin:0 0 .4rem; }
.chequeos .dice p:last-child { margin-bottom:0; }
/* Los que necesitan atención primero y con más peso. */
.chequeos > li.ojo .etiqueta { color:var(--fg); }
.chequeos > li.ojo .dice { color:var(--fg); }

/* «Ver en Monday» */
.cuento-barra a.ver-en-monday {
  font:inherit; font-size:.78rem; font-weight:600; text-decoration:none;
  color:var(--fg-muted); background:#fff;
  border:1px solid var(--border); border-radius:var(--r-md);
  padding:.22rem .55rem; display:inline-flex; align-items:center; gap:.3rem;
  white-space:nowrap; flex:0 0 auto;
}
.cuento-barra a.ver-en-monday:hover {
  border-color:var(--card-hover-border); color:var(--brand);
  background:var(--brand-soft);
}
.cuento-barra a.ver-en-monday svg { width:.85rem; height:.85rem; }

/* ======================================================================
   Resolver: lo que decide una persona en la revisión del motor
   ----------------------------------------------------------------------
   Va pegado al veredicto porque es su respuesta: el motor propone arriba y
   acá abajo alguien resuelve. Clase propia y no `.acciones`, que es de la
   vista del jurado: compartir la clase entre dos páginas que comparten la
   hoja significaba que tocar una rompiera la otra.
   ====================================================================== */
.resolver { margin:.9rem 0 0; }
.resolver h2 { margin:.9rem 0 .4rem; }
.resolver h2:first-child { margin-top:0; }
.resolver .de-quien-h2 {
  font-weight:400; text-transform:none; letter-spacing:0;
  font-size:.74rem; color:var(--fg-muted);
}
.resolver .quien-lo-puso {
  font-weight:400; text-transform:none; letter-spacing:0;
  font-size:.74rem; color:var(--fg-muted);
}
.resolver .botonera { display:flex; flex-wrap:wrap; gap:.35rem; }
.resolver button {
  font:inherit; font-size:.83rem; font-weight:500; cursor:pointer;
  padding:.4rem .6rem; border-radius:var(--r-md);
  border:1px solid var(--border); background:#fff; color:var(--fg);
}
.resolver button:hover:not(:disabled) {
  border-color:var(--card-hover-border); background:var(--brand-soft);
}
/* El estado que la fila YA tiene queda apretado y desactivado: se ve dónde
   está sin que volver a apretarlo escriba de nuevo. `aria-pressed` lo dice
   para quien no ve el color, y `:disabled` no baja la opacidad acá —el que
   está puesto es justamente el que hay que poder leer. */
.resolver button[aria-pressed="true"] {
  background:var(--brand); border-color:var(--brand); color:#fff;
  font-weight:600; opacity:1; cursor:default;
}
.resolver button:disabled:not([aria-pressed="true"]) {
  opacity:.5; cursor:not-allowed;
}
/* Los dos estados que cierran la puerta llevan un borde de aviso, no un
   relleno rojo: el rojo lleno se lee como «esto está mal» y lo que dice es
   «esto tiene consecuencias». */
.resolver button.ojo { border-color:var(--error); color:var(--error); }
.resolver button.ojo:hover:not(:disabled) {
  background:#fdf2f4; border-color:var(--error);
}
.resolver button.ojo[aria-pressed="true"] {
  background:var(--error); border-color:var(--error); color:#fff;
}
.resolver button.secundario { border-style:dashed; }
.resolver .revisor-ahora { margin:0 0 .4rem; font-size:.86rem; }
.resolver .nota-permiso { margin:0; font-size:.76rem; }

/* El pie de los diálogos nuevos: el botón principal a la derecha, y el «a»
   que va a Monday se ve igual que un botón sin serlo. */
dialog.hoja.angosta[open] { width:min(460px, calc(100vw - 2rem)); }
dialog.hoja > footer .cerrar-pie { margin-left:0; }
dialog.hoja > footer .principal,
dialog.hoja > footer button.peligro,
dialog.hoja > footer button:not(.cerrar-pie) {
  margin-left:auto; font:inherit; font-size:.88rem; font-weight:600;
  cursor:pointer; padding:.45rem .8rem; border-radius:var(--r-md);
  border:1px solid var(--border); background:#fff; color:var(--fg);
  text-decoration:none; display:inline-flex; align-items:center;
}
dialog.hoja > footer .principal {
  background:var(--brand); border-color:var(--brand); color:#fff;
}
dialog.hoja > footer .principal:hover { background:rgba(112, 78, 253, .85); }
dialog.hoja > footer button.peligro {
  background:var(--error); border-color:var(--error); color:#fff;
}
dialog.hoja > footer button.peligro:hover { opacity:.9; }
dialog.hoja > footer button.cerrar-pie {
  font:inherit; font-size:.86rem; cursor:pointer; padding:.45rem .7rem;
  border-radius:var(--r-md); border:1px solid var(--border);
  background:#fff; color:var(--fg-muted);
}
dialog.hoja > footer button.cerrar-pie:hover {
  border-color:var(--card-hover-border); color:var(--fg);
}

/* ======================================================================
   Las caras de quienes revisan
   ----------------------------------------------------------------------
   Filtrar por revisora es un eje APARTE del veredicto, no otra pestaña: se
   suman, y «Por confirmar» + una cara son los pendientes de esa persona.

   La foto viene de Monday y se sirve desde files.monday.com, que la entrega
   pública. No se copia acá: si alguien la cambia en Monday, cambia sola.
   ====================================================================== */
.caras {
  display:flex; align-items:center; gap:.3rem; flex-wrap:wrap;
  margin-left:.9rem;
}
.caras .quien-revisa {
  font-size:.76rem; color:var(--fg-muted); margin-right:.15rem;
}
.caras .cara {
  font:inherit; font-size:.8rem; cursor:pointer;
  background:#fff; color:var(--fg-muted);
  border:1px solid var(--border); border-radius:var(--r-full);
  padding:.15rem .5rem .15rem .18rem;
  display:inline-flex; align-items:center; gap:.35rem;
}
.caras .cara img, .caras .cara .iniciales {
  width:28px; height:28px; border-radius:var(--r-full);
  object-fit:cover; flex:0 0 auto; background:var(--brand-soft);
}
.caras .cara .iniciales {
  display:grid; place-items:center; font-size:.7rem; font-weight:600;
  color:var(--brand); text-transform:uppercase;
}
/* Sin poner: la cara chica y apagada, y el nombre escondido. Así la barra no
   se come el ancho del buscador con cinco nombres, y la que está puesta se
   distingue de un vistazo. */
.caras .cara .nombre { display:none; }
.caras .cara .cuantos {
  font-variant-numeric:tabular-nums; font-size:.72rem;
  background:var(--brand-soft); color:var(--fg-muted);
  border-radius:var(--r-full); padding:0 .34rem; min-width:1.25rem;
  text-align:center;
}
.caras .cara:not(.puesta) img { filter:grayscale(1); opacity:.72; }
.caras .cara:hover { border-color:var(--card-hover-border); }
.caras .cara:hover img { filter:none; opacity:1; }
/* Puesta: la foto entera, en color, y el nombre a la vista. */
.caras .cara.puesta {
  background:var(--brand); border-color:var(--brand); color:#fff;
  font-weight:600;
}
.caras .cara.puesta .nombre { display:inline; }
.caras .cara.puesta img {
  filter:none; opacity:1;
  box-shadow:0 0 0 2px #fff;
}
.caras .cara.puesta .cuantos {
  background:rgb(255 255 255 / .22); color:#fff;
}

/* El desplegable de revisor. Cinco personas: un menú, no un modal —que
   tapaba el cuento justo cuando hay que mirarlo para decidir—. */
.resolver .elige-revisor { display:block; }
.resolver .elige-revisor select {
  font:inherit; font-size:.86rem; width:100%; cursor:pointer;
  padding:.4rem .55rem; border-radius:var(--r-md);
  border:1px solid var(--border); background:#fff; color:var(--fg);
}
.resolver .elige-revisor select:hover { border-color:var(--card-hover-border); }

/* ======================================================================
   «No se está guardando nada»
   ----------------------------------------------------------------------
   Arriba de todo y fijo, y se queda puesto hasta que un guardado funcione.
   No se quita por tiempo: si se quitara, ella volvería a creer que está
   guardando, que es justo el estado que hay que evitar.

   Rojo de borde y fondo apenas teñido, no rojo lleno: tiene que verse a la
   primera sin volver ilegible lo que dice.
   ====================================================================== */
.sin-monday {
  flex:0 0 auto; display:flex; align-items:center; gap:.55rem;
  padding:.55rem 1rem; background:#fdf2f4;
  border-bottom:2px solid var(--error); color:var(--fg);
  font-size:.85rem; line-height:1.45;
}
.sin-monday .icono { flex:0 0 auto; font-size:1rem; }
.sin-monday .dice { flex:1 1 auto; }
.sin-monday button {
  flex:0 0 auto; font:inherit; font-size:.82rem; font-weight:600;
  cursor:pointer; padding:.35rem .7rem; border-radius:var(--r-md);
  border:1px solid var(--error); background:#fff; color:var(--error);
}
.sin-monday button:hover { background:var(--error); color:#fff; }
/* Mientras reintenta, el aviso baja el tono: es un estado de paso y no un
   problema confirmado. */
.sin-monday.probando {
  background:var(--brand-soft); border-bottom-color:var(--brand);
}

/* El estado de la observación, cuando quedó sin subir. */
.dicho.malo { color:var(--error); font-weight:500; }

/* Y mientras la plataforma reintenta sola, sin rojo: no hay nada que ella
   tenga que hacer todavía y el texto ya está a salvo en el navegador. El rojo
   se guarda para cuando se rindió, que es cuando sí hay algo que hacer. */
.dicho.probando { color:var(--fg-muted); font-weight:500; }

/* ======================================================================
   La cuadratura, en el panel del equipo
   ----------------------------------------------------------------------
   No va en un marco como las otras tres secciones: es un informe de texto,
   no una vista. Y el botón dice «Correr ahora» y no «Avisar» porque sólo
   mira: el aviso lo manda el chequeo diario, una vez.
   ====================================================================== */
.cuadratura {
  flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  background:var(--brand-soft); padding:1.2rem 1.4rem;
}
.cuadratura .encabezado {
  display:flex; gap:1.2rem; align-items:flex-start;
  max-width:70rem;
}
.cuadratura h2 {
  margin:0 0 .3rem; font-size:1.05rem; font-weight:600;
  text-transform:none; letter-spacing:0; color:var(--fg);
}
.cuadratura .dice {
  margin:0; font-size:.85rem; line-height:1.5; color:var(--fg-muted);
  max-width:46rem;
}
.cuadratura .al-pie { margin-top:1rem; font-size:.8rem; }
.cuadratura button {
  flex:0 0 auto; margin-left:auto; font:inherit; font-size:.88rem;
  font-weight:600; cursor:pointer; padding:.5rem .9rem;
  border-radius:var(--r-md); border:1px solid var(--brand);
  background:var(--brand); color:#fff; white-space:nowrap;
}
.cuadratura button:hover:not(:disabled) { background:rgba(112, 78, 253, .85); }
.cuadratura button:disabled { opacity:.55; cursor:progress; }
/* El informe viene con su propio alineado en columnas: tipografía de ancho
   fijo, y con scroll propio para que las líneas largas no estiren la página. */
.cuadratura .informe {
  margin:1rem 0 0; padding:.9rem 1rem; background:#fff;
  border:1px solid var(--border); border-radius:var(--r);
  font:400 12.5px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
  color:var(--fg); white-space:pre; overflow-x:auto; max-width:70rem;
}
.cuadratura .recado { max-width:70rem; }

/* ======================================================================
   Duplicados
   ----------------------------------------------------------------------
   La pregunta es UNA: ¿cuál compite? Y se responde con un cuento, no con
   dos interruptores independientes. Así el estado inválido —una persona
   compitiendo con dos cuentos— no se puede expresar, en vez de poder
   expresarse y ser rechazado.

   Y la pantalla se reparte al revés de como estaba: **los documentos son lo
   grande.** Son lo que hay que mirar para decidir, y la primera versión les
   dejaba una franja abajo mientras la pregunta ocupaba media pantalla con
   cada opción en tres líneas. Ahora cada opción es una línea y los
   documentos se comen todo el alto que sobra.
   ====================================================================== */
.columna-duplicado {
  flex:1 1 auto; min-width:0; overflow:hidden; background:var(--brand-soft);
  padding:.9rem 1.1rem; position:relative;
  display:flex; flex-direction:column; gap:.7rem;
}
.cabeza-grupo { flex:0 0 auto; }
.cabeza-grupo h2 {
  margin:0; font-size:1rem; font-weight:600; text-transform:none;
  letter-spacing:0; color:var(--fg);
}
.cabeza-grupo .porque {
  margin:.15rem 0 0; font-size:.8rem; color:var(--fg-muted);
}

.pregunta {
  flex:0 0 auto;
  background:#fff; border:1px solid var(--border); border-radius:var(--r);
  padding:.7rem .85rem;
}
.pregunta h3 {
  margin:0 0 .5rem; font-size:.9rem; font-weight:600; color:var(--fg);
}
.pregunta .opcion {
  display:flex; gap:.6rem; align-items:center; cursor:pointer;
  padding:.4rem .55rem; border:1px solid var(--border);
  border-radius:var(--r-md); margin-bottom:.35rem;
}
.pregunta .opcion:hover { border-color:var(--card-hover-border); }
.pregunta .opcion:has(input:checked) {
  border-color:var(--brand); background:var(--brand-soft);
}
.pregunta .opcion input { flex:0 0 auto; accent-color:var(--brand);
  width:1.05rem; height:1.05rem; }
.pregunta .cuerpo { flex:1 1 auto; min-width:0; }
/* Todo en una línea, y lo que no cabe se envuelve. */
.pregunta .linea {
  display:flex; flex-wrap:wrap; gap:.4rem .7rem; align-items:center;
  font-size:.86rem;
}
.pregunta .linea .dato { font-size:.8rem; color:var(--fg-muted); }
.pregunta .linea .primero {
  font-size:.7rem; font-weight:700; color:var(--fg-muted);
  background:var(--brand-soft); border:1px solid var(--border);
  border-radius:var(--r-full); padding:0 .4rem;
}
.pregunta .archivo {
  font-size:.78rem; color:var(--fg-muted); overflow-wrap:anywhere;
}
/* El avance del jurado. Cuando el cuento YA tiene puntajes se marca, porque
   es el costo de cambiar y hay que verlo antes de decidir, no después. */
.pregunta .del-jurado { font-size:.78rem; color:var(--fg-muted); }
.pregunta .del-jurado.con-trabajo { color:var(--error); font-weight:600; }
.pregunta .del-jurado.con-trabajo::before { content:"⚠️ "; }

/* El confirmar y las dos salidas, en la misma fila: son todas respuestas a
   la misma pregunta y separarlas en dos bloques gastaba alto sin motivo. La
   línea vertical mantiene la distinción de que no son del mismo tipo. */
.pregunta .al-pie {
  margin-top:.55rem; display:flex; gap:.5rem; align-items:center;
  flex-wrap:wrap;
}
.pregunta button.principal {
  font:inherit; font-size:.88rem; font-weight:600; cursor:pointer;
  padding:.42rem .9rem; border-radius:var(--r-md);
  border:1px solid var(--brand); background:var(--brand); color:#fff;
}
.pregunta button.principal:hover { background:rgba(112, 78, 253, .85); }

.otras-salidas {
  display:flex; gap:.5rem; flex-wrap:wrap; align-items:center;
  padding-left:.6rem; margin-left:.2rem;
  border-left:1px solid var(--border-strong);
}
.otras-salidas button {
  font:inherit; font-size:.8rem; cursor:pointer; padding:.35rem .6rem;
  border-radius:var(--r-md); border:1px dashed var(--border-strong);
  background:#fff; color:var(--fg-muted);
}
.otras-salidas button:hover { color:var(--fg); border-color:var(--brand); }

.columna-duplicado .recado { flex:0 0 auto; margin:0; }

/* La tarjeta de un grupo, en la lista de la izquierda.
   ----------------------------------------------------------------------
   Dos filas explícitas y no `flex-wrap`: con envolver, un nombre largo
   —«Beatriz Salgado Miranda» ya es largo— empujaba la marca a una línea
   propia, `margin-left:auto` la mandaba a la derecha, y quedaba una tarjeta
   de tres líneas con un hueco en medio para decir dos cosas.

   El nombre se recorta con puntos suspensivos si no cabe, y lleva el
   completo en el `title`. La marca nunca se recorta ni se envuelve: es la
   que dice si hay trabajo. */
.columna-lista button.grupo {
  display:block; padding:.5rem .6rem;
}
.columna-lista button.grupo .arriba {
  display:flex; align-items:center; gap:.45rem;
}
.columna-lista button.grupo .nombre {
  flex:1 1 auto; min-width:0; font-size:.86rem; font-weight:500;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.columna-lista button.grupo[aria-current="true"] .nombre { font-weight:600; }
.columna-lista button.grupo .abajo {
  display:block; margin-top:.1rem; font-size:.74rem; color:var(--fg-muted);
}

/* El estado del grupo. Con forma y texto, nunca sólo color. */
.columna-lista .marca-grupo {
  flex:0 0 auto; font-size:.66rem; font-weight:700; line-height:1.6;
  text-transform:uppercase; letter-spacing:.02em;
  border-radius:var(--r-full); padding:0 .45rem; white-space:nowrap;
}
.columna-lista .marca-grupo.listo {
  background:var(--brand-soft); color:var(--fg-muted);
  border:1px solid var(--border); }
.columna-lista .marca-grupo.pendiente {
  background:var(--brand); color:#fff; }
.columna-lista .marca-grupo.conflicto {
  background:var(--error); color:#fff; }

/* Los dos cuentos, uno al lado del otro, con TODO el alto que sobra. Cada
   uno con su propio scroll: si compartieran uno, comparar el final de uno
   con el principio del otro sería imposible. */
.lado-a-lado {
  flex:1 1 auto; min-height:0;
  display:flex; gap:.7rem; align-items:stretch;
}
.lado-a-lado .un-cuento {
  flex:1 1 0; min-width:0; display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--border); border-radius:var(--r);
  overflow:hidden;
}
.lado-a-lado .cual {
  flex:0 0 auto; margin:0; padding:.4rem .6rem; font-size:.78rem;
  font-weight:500; color:var(--fg-muted);
  border-bottom:1px solid var(--border); background:var(--brand-soft);
}
.lado-a-lado .lienzo {
  flex:1 1 auto; min-height:0; overflow:auto;
  overscroll-behavior:contain; position:relative;
}
/* El PDF va sin relleno y a todo el marco: el visor trae su propio margen y
   sumarle otro dejaba el texto en una columna angosta. */
.lado-a-lado .lienzo iframe { width:100%; height:100%; border:0;
  display:block; }
.lado-a-lado .lienzo:has(iframe) { padding:0; }
.lado-a-lado .lienzo img.foto { max-width:100%; height:auto; display:block; }
.lado-a-lado .lienzo pre.llano {
  margin:0; padding:.6rem; white-space:pre-wrap; overflow-wrap:anywhere;
  font:400 12.5px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.lado-a-lado .lienzo section.docx { margin:.5rem auto; }
/* En pantallas angostas se apilan: dos columnas de 20rem no se leen. */
@media (max-width: 60rem) {
  .lado-a-lado { flex-direction:column; }
  .lado-a-lado .un-cuento { min-height:24rem; }
}

/* El contador de la sección Duplicados, en el menú morado. Va en blanco
   sobre morado translúcido: el número es un dato, no un estado, así que no
   necesita color propio —y sobre el morado de marca ningún blanco apagado
   pasaría AA de todos modos. */
.menu-admin .secciones a .cuantos {
  margin-left:.4rem; font-variant-numeric:tabular-nums; font-size:.72rem;
  font-weight:600; background:rgb(255 255 255 / .28); color:#fff;
  border-radius:var(--r-full); padding:0 .38rem; min-width:1.2rem;
  text-align:center; display:inline-block;
}
.menu-admin .secciones a[aria-current="page"] .cuantos {
  background:rgb(255 255 255 / .4);
}

/* Conectar Monday, en la barra del panel. Siempre visible: escribir lo
   necesita, así que decirlo sólo cuando algo ya falló llega tarde. */
.menu-admin .quien .monday {
  font-size:.78rem; white-space:nowrap; border-radius:var(--r-full);
  padding:.16rem .55rem; text-decoration:none;
}
.menu-admin .quien .monday.sin-conectar {
  color:#fff; background:rgb(255 255 255 / .18);
  border:1px solid rgb(255 255 255 / .55); font-weight:600;
}
.menu-admin .quien .monday.sin-conectar:hover {
  background:#fff; color:var(--brand); }
.menu-admin .quien .monday.puesto {
  color:#fff; background:rgb(255 255 255 / .12); }

/* Quién puso el Estado Bases de cada envío. Cuando lo escribió una máquina se
   marca distinto: es exactamente el caso que hay que revisar. */
.pregunta .quien-puso { font-size:.78rem; color:var(--fg-muted); }
.pregunta .quien-puso.por-maquina {
  color:var(--fg); background:var(--lavender);
  border-radius:var(--r-full); padding:0 .45rem;
}

/* ======================================================================
   La portada: dos puertas
   ----------------------------------------------------------------------
   Dos cajas y no un botón, porque son dos proveedores de identidad
   distintos: el equipo entra con Google y el jurado con Monday. Se midió
   por qué: de los tres correos del jurado, dos son de `uc.cl`, que está en
   Microsoft. Google no les serviría. Esconder esa diferencia detrás de un
   solo botón habría llevado a la mitad del jurado a una pantalla que no
   podían usar.
   ====================================================================== */
.portada {
  display:block; flex:0 0 auto; overflow:visible; position:static;
  width:min(760px, calc(100vw - 2rem)); padding:2rem 0; text-align:center;
}
.portada .caja-logo {
  background:#fff; border-radius:var(--r); padding:10px 20px;
  display:inline-flex; margin-bottom:1.6rem;
}
.portada .caja-logo img { display:block; height:30px; width:auto; }
.portada h1 {
  margin:0 0 1.4rem; font-size:1.15rem; font-weight:600; color:#fff;
}
.puertas { display:flex; gap:1rem; align-items:stretch; }
.puertas .puerta-a {
  flex:1 1 0; background:#fff; border-radius:var(--r);
  box-shadow:0 6px 18px rgb(9 30 66 / .18);
  padding:1.5rem 1.4rem; text-align:left; text-decoration:none;
  color:var(--fg); display:flex; flex-direction:column; gap:.4rem;
  border:2px solid transparent;
}
.puertas .puerta-a:hover {
  border-color:#fff; box-shadow:0 10px 26px rgb(9 30 66 / .26);
}
.puertas .puerta-a h2 {
  margin:0; font-size:1.05rem; font-weight:700; text-transform:none;
  letter-spacing:0; color:var(--fg);
}
.puertas .puerta-a p {
  margin:0; font-size:.85rem; line-height:1.5; color:var(--fg-muted);
}
.puertas .puerta-a .con {
  margin-top:auto; padding-top:.9rem; font-size:.88rem; font-weight:600;
  color:var(--brand); display:flex; align-items:center; gap:.4rem;
}
.portada .pie { margin:1.2rem 0 0; font-size:.78rem; color:#fff; }
@media (max-width: 40rem) { .puertas { flex-direction:column; } }

/* La puerta de una jurada, en su propio enlace: ya se sabe quién es. */
.puerta-jurada { width:min(430px, calc(100vw - 2rem)); }
.puerta-jurada .tarjeta-puerta .correo {
  display:block; margin:.2rem 0 1.2rem; font-size:.86rem; font-weight:600;
  color:var(--fg); overflow-wrap:anywhere;
}

/* ======================================================================
   Comparar dos envíos de la misma persona
   ----------------------------------------------------------------------
   Dos modos y sólo uno a la vez: los documentos, o el texto comparado. El
   segundo existe porque sobre un PDF no se puede pintar —lo dibuja el visor
   de Chrome— y la pregunta que hay que contestar es si es el mismo cuento
   corregido o son dos cuentos distintos.
   ====================================================================== */
/* Un interruptor de dos posiciones, no dos botones sueltos.
   Sueltos, y en su propia franja con aire arriba y abajo, se leían como algo
   aparte y empujaban el contenido hacia abajo. Unidos en una sola pieza se
   leen por lo que son —dos formas de mirar lo mismo— y ocupan una línea. */
.modos {
  /* `flex:0 0 auto` y no es un detalle: esto vive en una columna flexible y,
     con `flex-shrink:1`, en una pantalla baja el navegador lo aplasta a cero
     de alto. Con `overflow:hidden` encima, DESAPARECE y queda sólo el borde:
     una raya donde debería estar el interruptor. Ivana lo vio en una pantalla
     chica. Lo mismo vale para el encabezado y la leyenda: son las piezas que
     tienen que estar siempre, y lo que se encoge es el texto, que ya tiene su
     propio scroll. */
  flex:0 0 auto;
  display:inline-flex; margin:.75rem .9rem .15rem;
  align-self:flex-start;
  border:1px solid var(--border); border-radius:var(--r-full);
  background:#fff; overflow:hidden;
}
.modos button {
  font:inherit; font-size:.8rem; font-weight:500; cursor:pointer;
  background:transparent; color:var(--fg-muted);
  border:0; border-radius:0; padding:.34rem .85rem;
}
.modos button + button { border-left:1px solid var(--border); }
.modos button:hover { color:var(--fg); background:var(--brand-soft); }
.modos button[aria-pressed="true"] {
  background:var(--brand); color:#fff; font-weight:600;
}

/* La respuesta primero y en palabras; el número al lado, en chico. Se midió
   sobre los 50 pares de duplicados reales de 2025: los mismos cuentos dan 67%
   o más y los distintos 13% o menos, con el medio vacío. */
.cuanto-se-parecen {
  flex:0 0 auto;
  display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap;
  margin:.55rem .9rem 0; padding:.6rem .8rem;
  background:var(--brand-soft); border:1px solid var(--border);
  border-radius:var(--r);
}
.cuanto-se-parecen strong { font-size:.98rem; }
.cuanto-se-parecen .cifra {
  font-size:.8rem; color:var(--fg-muted); font-variant-numeric:tabular-nums;
}

.texto-comparado {
  background:#fff; border:1px solid var(--border); border-radius:var(--r);
  padding:.9rem 1rem; font-size:.9rem; line-height:1.65;
  white-space:pre-wrap; overflow-y:auto;
  /* Con tope y scroll propio: los cuentos son de 250 palabras, pero en 2025
     llegó un par de 1092 y sin tope empujaba los botones de resolver fuera
     de la pantalla, justo los que hay que apretar después de comparar. */
  max-height:calc(100vh - 24rem); min-height:8rem;
}
/* Lo que está en uno y no en el otro. Se marca con fondo Y con subrayado:
   el color solo no lo distingue quien no ve ese color.
   Las clases NO cuelgan de `.texto-comparado`: las mismas marcas se usan de
   muestra en la leyenda, y ahí el `<mark>` del navegador las pintaba
   amarillas. */
mark.quitado, mark.agregado {
  color:inherit; padding:.05em .1em; border-radius:3px;
  text-decoration:underline; text-decoration-thickness:2px;
  text-underline-offset:2px;
}
mark.quitado {
  background:rgb(214 69 69 / .13); text-decoration-color:var(--error);
}
mark.agregado {
  background:rgb(112 78 253 / .13); text-decoration-color:var(--brand);
}
.leyenda {
  flex:0 0 auto;
  margin:.5rem .9rem .9rem; font-size:.78rem; color:var(--fg-muted);
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
}
.leyenda mark { font-size:.78rem; font-weight:600; }

/* La observación del equipo y la casilla de sensible, dentro del panel de
   resolver. Van pegadas a los botones de Estado Bases porque son parte de la
   misma decisión: qué se resolvió, y por qué. */
.resolver .obs-equipo {
  display:block; margin:.9rem 0 .3rem; font-size:.74rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.04em; color:var(--fg-muted);
}
.resolver .obs-equipo .tenue {
  font-weight:400; text-transform:none; letter-spacing:0;
}
.resolver textarea {
  width:100%; box-sizing:border-box; font:inherit; font-size:.86rem;
  line-height:1.5; padding:.5rem .6rem; resize:vertical;
  border:1px solid var(--border); border-radius:var(--r-md);
  background:#fff; color:var(--fg);
}
.resolver textarea:focus-visible {
  outline:2px solid var(--brand); outline-offset:1px; border-color:var(--brand);
}
.resolver .obs-estado {
  margin:.2rem 0 0; font-size:.74rem; color:var(--fg-muted); min-height:1em;
}
.resolver .obs-estado.malo { color:var(--error); }

/* La casilla. Con su propio renglón y con texto al lado que dice cómo está,
   porque una casilla marcada y una sin marcar se distinguen por una forma
   chica y conviene decirlo también con palabras. */
.resolver .marca-sensible {
  display:flex; align-items:center; gap:.45rem; margin:.8rem 0 0;
  font-size:.88rem; cursor:pointer;
}
.resolver .marca-sensible input { width:1rem; height:1rem; cursor:pointer;
  accent-color:var(--brand); }
.resolver .marca-sensible .tenue { font-size:.76rem; color:var(--fg-muted); }

/* Las secciones plegables del panel.
   ----------------------------------------------------------------------
   Se midió la columna antes de ordenarla: 1350px en una ventana de 798. Lo
   que se consulta de vez en cuando —quién es, cómo va el jurado, el revisor—
   va plegado; lo que se usa para decidir queda siempre a la vista.
   `<details>` del navegador: sin JavaScript, con teclado, y el triángulo ya
   dice si está abierto o cerrado. */
.plegable { border-top:1px solid var(--border); margin:.2rem 0 0; }
.plegable > summary {
  cursor:pointer; list-style:none; padding:.55rem 0;
  font-size:.74rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:var(--fg-muted);
  display:flex; align-items:center; gap:.4rem;
}
.plegable > summary::-webkit-details-marker { display:none; }
.plegable > summary::before {
  content:"›"; font-size:1rem; line-height:1; color:var(--fg-muted);
  transition:transform .12s ease;
}
.plegable[open] > summary::before { transform:rotate(90deg); }
.plegable > summary:hover { color:var(--fg); }
.plegable > summary:focus-visible {
  outline:2px solid var(--brand); outline-offset:2px; border-radius:var(--r-md);
}
.plegable > *:not(summary) { padding-bottom:.7rem; }

/* La línea bajo el título de Estado Bases: quién lo decide y quién lo puso.
   Antes iba todo dentro del h2 y eran tres ideas en un renglón. */
.resolver .bajo-titulo {
  margin:-.2rem 0 .5rem; font-size:.76rem; color:var(--fg-muted);
}

/* El ritmo de la columna: cada sección empieza con una línea y el mismo aire.
   Se midió antes: el hueco entre la decisión y «Lo que revisó el motor» era
   de CERO píxeles y las dos se leían como una sola cosa. Los plegables ya
   traían la línea; ahora la traen también las secciones fijas, así la columna
   se lee como una pila de partes iguales y no como un bloque continuo. */
.columna-panel > .resolver,
.columna-panel > h2 {
  border-top:1px solid var(--border);
  margin-top:.2rem; padding-top:.55rem;
}
.columna-panel > h2 { padding-bottom:.15rem; }
/* La caja del veredicto ya tiene su borde: no necesita otra línea encima. */
.columna-panel > .veredicto-grande + .resolver { border-top:0; padding-top:0; }

/* «También cumple: …» — las reglas que pasaron, en una línea y plegadas.
   Vive dentro de la lista de chequeos, así que no lleva la línea de arriba
   que sí llevan las secciones del panel. */
.chequeos .plegable.cumplen { border-top:0; margin:.2rem 0 0; }
.chequeos .plegable.cumplen > summary {
  text-transform:none; letter-spacing:0; font-weight:500; font-size:.84rem;
  color:var(--fg-muted); padding:.3rem 0;
}
.chequeos .plegable.cumplen > summary::before { content:"›"; }
.chequeos .plegable.cumplen .emoji { font-size:.9rem; }
.chequeos .plegable.cumplen > ul { padding:0; margin:.2rem 0 0; }