/* =====================================================================
   Portal del cliente - ZERIX VMaaS

   LA PALETA ES LA DE LA MARCA, SACADA DEL CSS EN LINEA DE zerix.com.co
   -------------------------------------------------------------------
   Hasta hoy esta hoja iba de "papel, tinta y regla": un boletin impreso,
   con papel crema y tinta marron. Se veia bien y no era de ZERIX. Ahora
   los colores son los del sitio, sin aproximarlos.

   POR QUE SUPERFICIE CLARA Y NO LA OSCURA DEL SITIO
   -------------------------------------------------
   zerix.com.co se pinta sobre #0a0e1f. Aqui no, y no es por comodidad:

   1. La marca DECLARA sus tokens de superficie clara -- --z-paper,
      --z-paper2, --z-ink, --z-inkmuted, --z-inkline, --z-cardlight --
      asi que lo claro no es apartarse de la marca, es la otra mitad de
      la marca. No hubo que inventar un solo color de fondo.
   2. Esto no es una portada de la que uno se va en cuarenta segundos.
      Es una herramienta: un rector abre "Hallazgos", lee una tabla de
      cuarenta filas y vuelve mañana. Lo que se lee muchos minutos
      seguidos se lee mejor en oscuro-sobre-claro.
   3. SE IMPRIME. Hay un `@media print` al final de esta hoja porque las
      paginas del portal acaban en un consejo directivo, en papel. Una
      pagina oscura o sale en blanco -- los navegadores no imprimen
      fondos por omision -- o se lleva medio cartucho.
   4. El informe en PDF y el correo ya son claros. Un portal oscuro
      partiria el producto en dos por la mitad.

   El azul de marca #1F4DFF sigue siendo el acento: enlaces, boton,
   pestaña activa, filete de los avisos. Es lo que hace que la pagina se
   lea como ZERIX sin tener que poner el logotipo arriba.

   LA MARCA SIGUE EN EL PIE, NO EN EL ENCABEZADO (PROYECTO-VMAAS.md 9).
   Cambio la paleta; no cambio de quien se siente el documento. Por eso
   aqui no hay franja de degradado en la cabecera, que es lo primero que
   pide el cuerpo cuando uno copia una identidad.

   TRES COSAS QUE NO SE PUEDEN CAMBIAR SIN QUE UNA PRUEBA SE ENTERE
   ---------------------------------------------------------------
   1. Los valores de `:root` tienen que coincidir uno a uno con
      `portal/nucleo/paleta.py`, donde estan medidos los contrastes.
      `tests/test_portal_accesible.py` compara los dos archivos.
   2. `--z-*` es un color copiado tal cual de zerix.com.co. Si hay que
      moverlo para que pase el contraste, PIERDE el prefijo: los tres
      que se movieron estan explicados con sus dos numeros en paleta.py.
   3. Todo lo que se mueva va dentro de `prefers-reduced-motion`, y hay
      un bloque `reduce` que apaga transiciones y animaciones.

   LAS FUENTES SON NUESTRAS, NO DE GOOGLE
   --------------------------------------
   El sitio de la marca carga Inter de Google Fonts. Aqui Inter se sirve
   desde `fuentes/`, del mismo dominio, y no hay ni un `<link>` ni un
   `@import` a un tercero: la pagina que le dice a un colegio que revise
   su exposicion en internet no puede estar avisandole a Google cada vez
   que el rector la abre. La restriccion no cambia porque cambie la
   tipografia.

   La pila conserva su recaida, y ahora tiene DOS escalones antes del
   sistema: Inter -> Public Sans -> Tahoma. Public Sans esta en medio
   porque tambien se sirve desde `fuentes/`, o sea que si Inter no llega
   -- red lenta, `collectstatic` sin correr, un bloqueador -- la pagina
   cae en otra tipografia NUESTRA y no en la del sistema operativo.

   Literata ya no se usa aqui. El portal es de una sola familia, como el
   sitio de la marca. El archivo sigue en `fuentes/` porque el informe en
   PDF si la usa (seccion 9), y ese producto no se toca en esta decision.
   IBM Plex Mono tampoco se sirve: aqui solo aparece en dominios y
   comandos, y `ui-monospace` es una recaida perfectamente digna.
   ===================================================================== */

/* Ver `fuentes/PROCEDENCIA.txt`: de donde salieron, con que licencia y
   con que sha256. `format("truetype")` y no "truetype-variations": el
   rango de pesos del descriptor es lo que le dice al navegador que el eje
   `wght` es variable, y "truetype-variations" lo entienden menos
   navegadores que el propio formato. `swap` y no `block`: mas vale leer
   el texto en Tahoma durante 200 ms que mirar una pagina en blanco. */
@font-face{
  font-family:"Inter";
  src:url("fuentes/Inter-variable.bff0f6e3b9e2.ttf") format("truetype");
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Public Sans";
  src:url("fuentes/PublicSans-variable.0f8bb36b8925.ttf") format("truetype");
  font-weight:100 900;font-style:normal;font-display:swap;
}

:root{
  /* --- copiados tal cual de zerix.com.co --------------------------- */
  --z-paper:#F4F6FB;
  --z-paper2:#EAEEF7;
  --z-cardlight:#FFFFFF;
  --z-ink:#0C1330;
  --z-inkmuted:#5A6480;
  --z-inkline:#DFE4F0;
  --z-blue2:#1F4DFF;

  /* --- nuestros: ajustados o inexistentes en la marca --------------- */
  --azul-boton:#3665FF;
  --tinta-rotulo:#616B88;
  --borde-campo:#7A83A0;
  --linea-fuerte:#C6CEE0;
  --regresion:#C42B2B;
  --resuelto:#17694C;
  --vencido:#B07A16;
  --vencido-texto:#8A5F00;

  --sans:Inter,"Public Sans",Tahoma,Verdana,system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"Courier New",monospace;

  /* El degradado del boton, tal como lo declara el sitio: 135deg, del
     claro al oscuro. Lo unico que se movio es el extremo claro, porque
     con texto blanco encima el de la marca da 4.39:1 y hace falta 4.5.
     Ver paleta.py. */
  --degradado-marca:linear-gradient(135deg,var(--azul-boton),var(--z-blue2));
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--z-paper2);color:var(--z-ink);
  font-family:var(--sans);font-size:16px;line-height:1.55;
}
/* Inter es estrecha y de ojo grande: a tamaño de titular necesita menos
   espacio entre letras que una fuente de texto, y el sitio de la marca la
   usa asi. -.02em es lo que hace que un `h1` se lea como el de zerix.com.co
   y no como Inter por omision. */
h1,h2,h3{font-family:var(--sans);font-weight:700;letter-spacing:-.02em}
.mono{font-family:var(--mono)}
.num{font-variant-numeric:tabular-nums lining-nums}

/* Los enlaces del contenido, que hasta hoy NO tenian regla: se quedaban
   en el azul-morado por omision del navegador, que no es de nadie. Ahora
   son el azul de marca, y siguen subrayados: el color solo no distingue
   un enlace para quien no lo ve (WCAG 1.4.1). */
a{color:var(--z-blue2)}
a:hover{color:var(--z-ink)}

/* --- el foco de teclado, que es lo primero que se pierde ------------ */
/* Tinta y no azul de marca, y la razon esta medida: un anillo azul encima
   del boton azul da 3.10:1 contra el propio boton -- pasa por poco y se
   ve fatal. La tinta da 3.10:1 sobre el boton y 15.69:1 sobre la pagina.
   "El foco a juego con la marca" es como se pierde el foco. */
:focus-visible{outline:3px solid var(--z-ink);outline-offset:2px}
/* Nada de `outline:none` en ningun sitio de esta hoja. Si aparece, la
   pagina deja de poder usarse con el teclado y no se nota mirandola. */

.saltar{
  position:absolute;left:-9999px;top:0;z-index:10;
  background:var(--z-ink);color:var(--z-paper);padding:10px 16px;
  font-weight:600;text-decoration:none;
}
.saltar:focus{left:0}

.marco{max-width:1080px;margin:0 auto;padding:0 20px 72px}

/* --- cabecera ------------------------------------------------------- */
.cabecera{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  flex-wrap:wrap;padding:30px 0 18px;border-bottom:2px solid var(--z-ink);
}
.cabecera .quien{font-size:14px;color:var(--z-inkmuted);text-align:right}
.cabecera .quien strong{display:block;color:var(--z-ink);font-size:17px}
.cabecera h1{margin:0;font-size:24px}
.cabecera .sub{margin:2px 0 0;font-size:13.5px;color:var(--z-inkmuted)}

.sombra-aviso{
  background:var(--z-ink);color:var(--z-paper);font-size:13.5px;
  padding:10px 20px;text-align:center;
}

/* --- navegacion (lo que el mockup pintaba como pestanas) ------------ */
.secciones{
  display:flex;gap:0;border-bottom:1px solid var(--z-inkline);
  margin-bottom:30px;flex-wrap:wrap;
}
.secciones a{
  font-size:15px;color:var(--z-inkmuted);padding:13px 18px;
  border-bottom:3px solid transparent;margin-bottom:-1px;text-decoration:none;
}
.secciones a:hover{color:var(--z-ink);text-decoration:underline}
/* La pestaña activa es lo unico de la navegacion que lleva el azul de
   marca. El texto se pone en tinta y en negrita: el filete azul es el
   adorno, no el dato -- `aria-current` es lo que de verdad lo dice. */
.secciones a[aria-current="page"]{
  color:var(--z-ink);font-weight:600;border-bottom-color:var(--z-blue2);
}

/* --- avisos --------------------------------------------------------- */
.avisos{list-style:none;margin:0 0 22px;padding:0}
.avisos li{
  background:var(--z-cardlight);border:1px solid var(--linea-fuerte);
  border-left:4px solid var(--z-blue2);padding:13px 16px;margin-bottom:10px;
}
.avisos li.error{border-left-color:var(--regresion)}
.avisos li.success{border-left-color:var(--resuelto)}

/* --- hoja ----------------------------------------------------------- */
/* Tres superficies y no dos: la pagina (--z-paper2), la hoja
   (--z-cardlight) y los recuadros metidos DENTRO de una hoja
   (--z-paper). Con dos, un recuadro dentro de una hoja se pintaba del
   color de la pagina y parecia un agujero. */
.hoja{
  background:var(--z-cardlight);border:1px solid var(--z-inkline);
  padding:28px 30px;margin-bottom:22px;
}
.hoja > h2{margin:0 0 4px;font-size:19px}
.hoja > .sub{margin:0 0 22px;color:var(--z-inkmuted);font-size:14.5px;max-width:62ch}
.rotulo{
  font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--tinta-rotulo);font-weight:600;display:block;margin-bottom:10px;
}

/* --- estados vacios: explican, no se disculpan ---------------------- */
.vacio{
  border:1px dashed var(--linea-fuerte);background:var(--z-paper);
  padding:26px 28px;
}
.vacio h3{margin:0 0 8px;font-size:17px}
.vacio p{margin:0 0 10px;color:var(--z-inkmuted);max-width:60ch}
.vacio p:last-child{margin-bottom:0}

/* --- formularios ---------------------------------------------------- */
label{display:block;font-size:14px;font-weight:600;margin-bottom:5px}
/* `input[type="text"]` va PRIMERO en la lista y con `font-size:16px`: hay
   una prueba que lee justo esta regla, porque por debajo de 16px iOS hace
   zoom al enfocar un campo y descuadra la pagina. */
input[type="text"],input[type="email"],input[type="password"],
input[type="time"],input[type="search"],input[type="tel"],
input[type="number"],select,textarea{
  font:inherit;font-size:16px;padding:9px 11px;
  border:1px solid var(--borde-campo);background:var(--z-cardlight);
  color:var(--z-ink);max-width:100%;
}
.campo{margin-bottom:14px}
.campos{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end}
.campos > *{flex:1 1 200px}
/* `.btn` lo llevan `<button>` y tambien `<a>` -- "Entrar al portal" despues
   de verificar el correo es un enlace, no una accion -- asi que hace falta
   `inline-block` y quitarle el subrayado de enlace.

   El degradado es el del boton principal de la marca. El texto va en
   blanco sobre los dos extremos: 4.71:1 en el claro y 5.89:1 en el
   oscuro. Sin borde propio: el degradado ya separa el boton del papel. */
.btn{
  display:inline-block;font:inherit;font-size:15px;font-weight:600;
  cursor:pointer;text-align:center;text-decoration:none;
  padding:10px 18px;border:1px solid var(--z-blue2);
  background:var(--degradado-marca);color:var(--z-cardlight);
}
.btn:hover{background:var(--z-blue2);text-decoration:underline}
/* El fantasma es la accion secundaria: azul de marca sobre la hoja, que
   da 5.89:1, con el borde de campo para que se lea como control y no
   como enlace suelto. */
.btn.fantasma{
  background:none;color:var(--z-blue2);border-color:var(--borde-campo);
}
.btn.fantasma:hover{background:var(--z-paper);color:var(--z-blue2)}
.opcion{display:flex;gap:9px;align-items:flex-start;margin-bottom:8px}
.opcion label{font-weight:400;margin:0}
.pista{font-size:13.5px;color:var(--z-inkmuted);margin:4px 0 0;max-width:64ch}

/* --- dominios ------------------------------------------------------- */
.dominios{list-style:none;margin:0;padding:0}
.dominios li{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:14px 0;border-bottom:1px solid var(--z-inkline);
}
.dominios li:last-child{border-bottom:0}
.dom{font-family:var(--mono);font-size:14.5px;flex:1 1 220px;word-break:break-all}
.sello{
  font-size:12px;letter-spacing:.07em;text-transform:uppercase;font-weight:600;
  padding:3px 9px;border:1px solid currentColor;white-space:nowrap;
}
.sello.ok{color:var(--resuelto)}
.sello.pend{color:var(--vencido-texto)}
.sello.mal{color:var(--regresion)}
.hint{font-size:14px;color:var(--z-inkmuted);flex:1 1 100%;max-width:70ch}
.hint code{
  font-family:var(--mono);font-size:13.5px;background:var(--z-paper);
  padding:1px 5px;border:1px solid var(--z-inkline);word-break:break-all;
}

/* --- frecuencia ----------------------------------------------------- */
.frecuencias{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  border:1px solid var(--borde-campo);
}
.frec{position:relative;border-right:1px solid var(--z-inkline)}
.frec:last-child{border-right:0}
.frec input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.frec label{
  display:block;padding:16px 14px;cursor:pointer;background:var(--z-cardlight);
  height:100%;font-weight:400;
}
.frec .cada{font-size:17px;font-weight:700;letter-spacing:-.01em;display:block}
.frec .detalle{font-size:13px;color:var(--z-inkmuted);display:block;margin-top:3px}
/* La opcion marcada va en azul de marca y no en tinta: es la unica
   eleccion de la pagina que el cliente hace y deshace, y el azul dice
   "esto es lo que esta puesto" mejor que un rectangulo negro. */
.frec input:checked + label{background:var(--z-blue2);color:var(--z-cardlight)}
.frec input:checked + label .detalle{color:var(--z-cardlight)}
.frec input:focus-visible + label{outline:3px solid var(--z-ink);outline-offset:-3px}

.consecuencia{
  margin-top:18px;padding:16px 18px;background:var(--z-paper);
  border-left:4px solid var(--z-blue2);font-size:15px;max-width:70ch;
}
.consecuencia .titular{font-weight:600;margin:0 0 7px}
.consecuencia p{margin:0 0 7px}
.consecuencia p:last-child{margin-bottom:0}
.consecuencia .aviso{color:var(--z-inkmuted)}

/* --- tablas --------------------------------------------------------- */
.desliza{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.reja{width:100%;border-collapse:collapse;font-size:14.5px;min-width:520px}
table.reja th{
  text-align:left;font-size:12px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--tinta-rotulo);font-weight:600;padding:0 12px 9px 0;
  border-bottom:1px solid var(--linea-fuerte);
}
table.reja td{padding:13px 12px 13px 0;border-bottom:1px solid var(--z-inkline);vertical-align:top}
table.reja tr:last-child td{border-bottom:0}
.correo{font-family:var(--mono);font-size:14px;word-break:break-all}

/* --- franja de comparacion: el elemento firma ----------------------- */
.franja{width:100%;border-collapse:collapse;min-width:420px}
.franja caption{
  text-align:left;font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--tinta-rotulo);font-weight:600;padding-bottom:11px;
}
.franja th,.franja td{padding:11px 8px;border-bottom:1px solid var(--z-inkline)}
.franja thead th{
  font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--tinta-rotulo);font-weight:600;text-align:center;
  border-bottom:1px solid var(--linea-fuerte);
}
.franja thead th:first-child{text-align:left}
.franja tbody th{
  text-align:left;font-size:15px;font-weight:600;letter-spacing:-.01em;
}
.franja tbody td{text-align:center;font-size:24px;font-weight:700;line-height:1.1}
.franja tbody tr:last-child th,.franja tbody tr:last-child td{border-bottom:0}
/* El cero se apaga a proposito: en una franja de comparacion, "0" es
   ruido y lo que hay que ver son las casillas con numero. */
.cero{color:var(--tinta-rotulo);font-weight:400}
.v-resuelto{color:var(--resuelto)}
.v-regresion{color:var(--regresion)}

/* --- veredicto ------------------------------------------------------ */
/* Marco de tinta, no de azul: es lo mas serio de la pagina y el azul de
   marca ya esta gastado en los enlaces y el boton. Si todo es acento, no
   hay acento. */
.veredicto{
  border:2px solid var(--z-ink);background:var(--z-cardlight);
  padding:26px 30px;margin-bottom:22px;
}
.veredicto .estado{
  font-size:36px;font-weight:800;letter-spacing:.02em;
  text-transform:uppercase;line-height:1.05;margin:0;
}
.estado.mejor{color:var(--resuelto)}
.estado.peor{color:var(--regresion)}
/* El veredicto que TODAVIA NO HAY. Ni versalitas ni 36px ni tinta: gris,
   mas pequeño y en caja de linea fina, para que se distinga de un golpe
   de los tres veredictos de verdad. La alternativa -- no pintar nada
   hasta que haya informe -- es la que habia, y dejaba al cliente que mas
   lo necesita, el que aun no tiene informe, sin la linea que resume. */
.veredicto.pendiente{border-color:var(--linea-fuerte)}
.veredicto .estado.sin{
  font-size:26px;font-weight:700;letter-spacing:-.01em;
  text-transform:none;color:var(--z-inkmuted);
}
.veredicto .glosa{margin:11px 0 0;font-size:16px;color:var(--z-inkmuted);max-width:56ch}
/* Lo critico se dice CON PALABRA y con color, nunca solo con color
   (WCAG 1.4.1): el color acompaña a «2 críticos», no lo sustituye. */
.veredicto .glosa .grave{color:var(--regresion)}
/* El aviso unico del panel: una linea, gris, pequeña. Aqui vivian dos
   cajas de estado vacio de cuatro lineas cada una. */
.veredicto .porque{
  margin:13px 0 0;font-size:13.5px;color:var(--z-inkmuted);max-width:66ch;
}
.veredicto .fecha{
  font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--tinta-rotulo);font-weight:600;margin:0 0 13px;
}

/* Lo que tiene mas texto detras, en el `title`. El subrayado punteado es
   lo unico que avisa de que ahi hay mas; sin el, el `title` es una
   funcion escondida. NO se usa para esconder nada que sostenga la
   honestidad de un dato -- eso se queda escrito en la pagina -- porque el
   `title` no lo alcanza el teclado ni lo anuncian todos los lectores. */
.ampliable{
  text-decoration:underline dotted var(--borde-campo);
  text-underline-offset:3px;cursor:help;
}

/* --- kpis ----------------------------------------------------------- */
/* LAS SEPARACIONES SON BORDES DE CADA TARJETA, NO EL HUECO DEL GRID.
   La version anterior pintaba el contenedor de gris y dejaba un hueco de
   1px entre tarjetas: una linea sola en vez de dos pegadas, que se veia
   bien... mientras la ultima fila estuviera completa.
   Con siete tarjetas nunca lo esta. La celda sin llenar dejaba asomar el
   gris del contenedor y aparecia un rectangulo vacio a la derecha de
   «Claves filtradas» que se lee como una tarjeta que no cargo. Y no se
   arregla eligiendo otro numero de columnas: con siete, cuatro columnas
   dejan un hueco y tres dejan dos.
   Con el borde en la tarjeta, una celda vacia es simplemente pagina. */
.kpis{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:0;
}
.kpi{
  background:var(--z-cardlight);padding:19px 20px;
  border:1px solid var(--z-inkline);
  /* Los bordes contiguos se solapan en 1px en vez de sumar 2px, que es lo
     que daba el aspecto de doble linea. */
  margin:0 -1px -1px 0;
}
/* JERARQUIA: antes las siete tarjetas pesaban igual, asi que un critico
   abierto se leia con el mismo enfasis que «sitios vigilados».
   - `grave` y `ojo` marcan la tarjeta que obliga a hacer algo. El filete
     es borde y no `box-shadow` a proposito: los navegadores no imprimen
     fondos ni sombras por omision y estas paginas acaban en papel, en un
     consejo directivo. El `padding-left` se compensa para que el texto no
     se mueva entre una tarjeta marcada y una que no.
   - `callado` es lo contrario: la tarjeta que NO trae medida se va al
     fondo de la pagina. Retroceder no es esconder -- el texto sigue ahi,
     con su contraste medido sobre --z-paper -- es dejar de competir. */
.kpi.grave{border-left:4px solid var(--regresion);padding-left:16px}
.kpi.ojo{border-left:4px solid var(--vencido);padding-left:16px}
.kpi.callado{background:var(--z-paper)}
.kpi .k-rot{
  font-size:12px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--tinta-rotulo);font-weight:600;display:block;margin-bottom:9px;
}
.kpi .k-val{font-size:32px;font-weight:800;letter-spacing:-.03em;line-height:1;display:block}
.kpi .k-pie{font-size:13.5px;color:var(--z-inkmuted);display:block;margin-top:7px}
.k-val.bien{color:var(--resuelto)}
.k-val.alerta{color:var(--vencido-texto)}
.k-val.mal{color:var(--regresion)}
.k-val.sin-medir{font-size:19px;color:var(--z-inkmuted)}
.barra{display:flex;height:10px;margin:11px 0 9px;border:1px solid var(--borde-campo)}
.leyenda{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--z-inkmuted)}
/* Cada muestra de la leyenda lleva borde de tinta. Sin el, el tramo de
   "media" y el de "baja" son dos grises claros que se distinguen entre si
   pero no del papel. El texto al lado es lo que de verdad lo dice. */
.leyenda i{display:inline-block;width:10px;height:10px;margin-right:5px;border:1px solid var(--z-ink)}
/* Lo grave sale del gris de la leyenda: es lo unico de esa tarjeta que
   cambia lo que alguien hace hoy. Media, baja e info se quedan en
   --z-inkmuted, que es el color de la leyenda entera. */
.leyenda .critica{color:var(--regresion);font-weight:600}
.leyenda .alta{color:var(--vencido-texto);font-weight:600}

/* --- tabla tecnica y fichas ----------------------------------------- */
table.tecnica{width:100%;border-collapse:collapse;font-size:14px;min-width:760px}
table.tecnica th{
  text-align:left;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--tinta-rotulo);font-weight:600;padding:0 10px 8px 0;
  border-bottom:1px solid var(--linea-fuerte);white-space:nowrap;
}
table.tecnica td{padding:10px 10px 10px 0;border-bottom:1px solid var(--z-inkline);vertical-align:top}
.sev{font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;white-space:nowrap}
.sev.critica{color:var(--regresion)}
.sev.alta{color:var(--vencido-texto)}
.sev.media,.sev.baja,.sev.info{color:var(--z-inkmuted)}
.est{font-size:12px;letter-spacing:.05em;text-transform:uppercase;font-weight:600;white-space:nowrap}
.est.reaparecio{color:var(--regresion)}
.vencido{color:var(--regresion);font-weight:600}

.ficha{border:1px solid var(--linea-fuerte);margin-bottom:16px;background:var(--z-cardlight)}
.ficha-cab{
  padding:14px 18px;border-bottom:1px solid var(--z-inkline);display:flex;
  justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:baseline;
}
.ficha-cab .id{font-family:var(--mono);font-size:13px;color:var(--tinta-rotulo)}
.ficha-cab .tit{font-size:17px;font-weight:700;letter-spacing:-.01em;flex:1 1 220px}
.ficha-cuerpo{padding:16px 18px}
.ficha-cuerpo dl{margin:0;display:grid;grid-template-columns:150px 1fr;gap:9px 16px;font-size:14.5px}
.ficha-cuerpo dt{
  font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--tinta-rotulo);font-weight:600;padding-top:3px;
}
.ficha-cuerpo dd{margin:0;min-width:0;overflow-wrap:anywhere}
.ficha-cuerpo dd.mono{font-family:var(--mono);font-size:13.5px}
pre.cmd{
  font-family:var(--mono);font-size:13.5px;background:var(--z-paper);
  border:1px solid var(--z-inkline);padding:10px 12px;margin:6px 0 0;
  overflow-x:auto;line-height:1.5;
}

/* --- filtros -------------------------------------------------------- */
.filtros{
  background:var(--z-cardlight);border:1px solid var(--z-inkline);padding:18px 20px;
  margin-bottom:22px;
}
.filtros fieldset{border:0;margin:0 0 14px;padding:0}
.filtros legend{
  font-size:12px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--tinta-rotulo);font-weight:600;padding:0;margin-bottom:8px;
}
.casillas{display:flex;gap:16px;flex-wrap:wrap}
.casillas span{display:flex;gap:6px;align-items:center}
.casillas label{font-weight:400;margin:0}

/* --- pie ------------------------------------------------------------ */
.pie{
  margin-top:36px;padding-top:16px;border-top:1px solid var(--linea-fuerte);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:13px;color:var(--z-inkmuted);
}

/* --- entrar, recuperar, invitacion: las pantallas sin sesion --------
   Son la primera impresion del producto y hasta hoy eran las UNICAS que
   ni siquiera enlazaban esta hoja: extendian un segundo `base.html` con
   un `<style>` de doce lineas. Ahora comparten todo lo de arriba y solo
   cambian de ancho: una columna estrecha, centrada, con la hoja en
   medio. La marca sigue en el pie, no en el encabezado (§9). */
.marco.entrada{max-width:34rem;padding-bottom:48px}
.marco.entrada .cabecera{
  display:block;padding:44px 0 20px;border-bottom-width:1px;
}
.cabecera .marca{
  margin:0;font-size:19px;font-weight:700;letter-spacing:-.02em;
}
.cabecera .marca .lema{
  display:block;font-size:13.5px;font-weight:400;
  letter-spacing:0;color:var(--z-inkmuted);margin-top:3px;
}
.marco.entrada .hoja{padding:30px 30px 26px}
.marco.entrada .hoja h1{margin:0 0 6px;font-size:23px}
.marco.entrada .hoja > .sub{margin:0 0 24px}

/* La sesion y el boton de salir, a la derecha del encabezado. Salir es un
   POST -- con GET, cualquier `<img src="/acceso/salir/">` en un correo
   cierra la sesion de quien lo abra -- asi que es un formulario, y el
   boton se disfraza de enlace para no competir con la accion de la
   pagina. */
.cabecera .quien form{margin:4px 0 0}
.salir{
  font:inherit;font-size:13.5px;background:none;border:0;padding:0;
  color:var(--z-inkmuted);text-decoration:underline;cursor:pointer;
}
.salir:hover{color:var(--z-ink)}

/* Un aviso suelto dentro del contenido (no los de `messages`). */
.aviso{
  background:var(--z-paper);border-left:4px solid var(--z-blue2);
  padding:13px 16px;margin:0 0 18px;font-size:14.5px;max-width:64ch;
}
.aviso.error{border-left-color:var(--regresion)}
.aviso.ok{border-left-color:var(--resuelto)}

/* El error de un campo, debajo del campo. Rojo Y con la palabra: el color
   solo no vale para quien no lo distingue (WCAG 1.4.1). El rojo NO es el
   #ff6b6b de la marca: sobre papel da 2.57:1 y no llega ni al minimo de
   un relleno. Este es el mismo matiz bajado hasta 5.21:1. Ver paleta.py. */
.error{
  color:var(--regresion);font-size:14px;font-weight:600;margin:5px 0 0;
}

.campo label{margin-bottom:5px}
.acciones{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:20px}
.enlaces{
  margin:22px 0 0;padding-top:16px;border-top:1px solid var(--z-inkline);
  font-size:14px;color:var(--z-inkmuted);
}
.enlaces p{margin:0 0 8px}
.enlaces p:last-child{margin-bottom:0}

/* Datos que vienen dados y no se pueden editar: el correo, el colegio y el
   rol de una invitacion. Se muestran como ficha, no como formulario
   deshabilitado, para que no parezca que se pueden cambiar. */
.datos{
  margin:0 0 22px;padding:16px 18px;background:var(--z-paper);
  border:1px solid var(--z-inkline);display:grid;
  grid-template-columns:120px 1fr;gap:8px 16px;font-size:14.5px;
}
.datos dt{
  font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--tinta-rotulo);font-weight:600;padding-top:3px;
}
.datos dd{margin:0;min-width:0;overflow-wrap:anywhere;font-weight:600}

/* El secreto del segundo factor: se muestra UNA vez y hay que copiarlo a
   mano de la pantalla al telefono. Grande, monoespaciado y separado. */
.dato{
  display:block;font-family:var(--mono);font-size:16px;letter-spacing:.06em;
  background:var(--z-paper);border:1px solid var(--linea-fuerte);
  padding:12px 14px;margin:0 0 14px;overflow-wrap:anywhere;
}

/* --- movil ---------------------------------------------------------- */
@media (max-width:640px){
  .marco.entrada{padding:0 14px 40px}
  .marco.entrada .cabecera{padding:28px 0 16px}
  .marco.entrada .hoja{padding:22px 18px}
  .marco.entrada .hoja h1{font-size:20px}
  .datos{grid-template-columns:1fr;gap:3px 0}
  .datos dt{padding-top:9px}
  .acciones{gap:10px}
  .marco{padding:0 14px 56px}
  .hoja,.filtros{padding:22px 18px}
  .veredicto{padding:20px 18px}
  .veredicto .estado{font-size:28px}
  .veredicto .estado.sin{font-size:22px}
  .franja tbody td{font-size:20px}
  .cabecera{padding:22px 0 14px}
  .cabecera .quien{text-align:left}
  .secciones a{padding:12px 12px;font-size:14px}
  .ficha-cuerpo dl{grid-template-columns:1fr;gap:4px 0}
  .ficha-cuerpo dt{padding-top:9px}
  .kpis{grid-template-columns:1fr}
}

/* --- movimiento ----------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  .avisos li{animation:entra .22s ease-out}
  @keyframes entra{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
  .secciones a{transition:border-color .15s ease-out}
  .btn{transition:background .15s ease-out}
}
@media (prefers-reduced-motion:reduce){
  /* Cinturon: si alguien agrega una transicion fuera del bloque de
     arriba, aqui se apaga igual. Sin esto, la regla se cumple donde hay
     prueba y se incumple donde no la hay. */
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
}

/* --- impresion ------------------------------------------------------
   Estas paginas acaban en un consejo directivo, en papel. Los navegadores
   no imprimen fondos por omision, asi que lo que se imprime es el texto:
   por eso la superficie clara y por eso aqui solo hay que quitar el
   cromo. El degradado del boton no se imprime -- el boton entero
   desaparece, que es lo correcto: en papel no se puede pulsar. */
@media print{
  .secciones,.filtros,.saltar,.btn{display:none}
  body{background:var(--z-cardlight)}
  .hoja{border:0;padding:0}
  /* Sin fondo impreso, un filete de 4px es todo lo que queda de un aviso.
     Se le pone marco para que siga leyendose como una caja. */
  .avisos li,.aviso,.consecuencia{border:1px solid var(--linea-fuerte)}
  a{color:var(--z-ink)}
}