/* ============================================================================
   wpCIV — hoja de estilos del panel de consultas

   La idea que ordena todo lo de abajo: esto es un EXPEDIENTE, no un tablero.

   Lo que la pantalla muestra es, literalmente, lo que un ingeniero escribió a
   mano un martes a la mañana. Un dashboard convierte eso en una fila de tabla
   y una pastillita de color; acá se hace al revés — la consulta se trata como
   el documento que es, y todo lo demás (estado, área, matrícula) es el
   membrete alrededor.

   Tres reglas salen de ahí:

   1. Una sola serif en toda la pantalla, y es para el texto de la consulta.
      Nada más está en serif. El ojo cae ahí primero sin que haya que gritarle
      con tamaño ni con color, que es exactamente el orden de lectura que
      queremos: primero qué necesita la persona, después de qué área es.
   2. Papel, no vidrio. Fondos cálidos, líneas de un pixel, radios chicos, cero
      sombras difusas. Un expediente no flota.
   3. El color del área lo decide la base, no el CSS (--color-area, que pone el
      HTML por fila). Agregar un área nueva no puede obligar a tocar esta hoja.

   El único gesto que se permite es el sello de "Resuelta": va rotado, con
   doble borde, encima de la ficha. Se lo gana solo lo terminado — si cada
   estado tuviera su sello, no significaría nada.
   ============================================================================ */

/* --- tipografías ---------------------------------------------------------
   Petrona es de Omnibus-Type, la fundición de Buenos Aires de la que también
   sale la Archivo que usa el otro panel del Distrito. No es un guiño: es una
   serif variable con eje óptico, así que un mismo archivo da el titular y el
   texto de lectura sin una segunda descarga.

   Se cargan de Google Fonts con una pila de respaldo que aguanta sola. Si la
   red del Colegio bloquea el CDN, el panel se ve con Georgia y Helvetica y
   sigue siendo legible — pero conviene servirlas del repo, como hace fiscabot:
   `bash scripts/vendorizar-tipografias.sh` las baja a public/vendor y cambia
   esta sección por @font-face locales. */

:root {
  --serif: "Petrona", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* --- fichas de color -----------------------------------------------------
   Los neutros tienen amarillo adentro: un gris puro al lado de un papel cálido
   se ve muerto. El azul es la identidad institucional y NO es el color de
   "urgente" — lo que no se miró todavía es ámbar, lo terminado es verde, y el
   rojo se reserva para una sola cosa: el aviso que no salió. */

:root {
  color-scheme: light;

  --papel: #f3efe4;
  --papel-2: #e9e2d2;
  --ficha: #fdfbf5;
  --ficha-2: #f7f2e6;

  --tinta: #17181b;
  --tinta-2: #4d4b44;
  --tinta-3: #877f6d;

  --linea: #ded5c1;
  --linea-fuerte: #c2b596;

  --azul: #16386a;
  --azul-suave: #e3e9f2;
  --ambar: #9c5d06;
  --ambar-suave: #f6ead2;
  --verde: #2c6642;
  --verde-suave: #dfeadf;
  --rojo: #ab3512;
  --rojo-suave: #f7e2d8;

  --color-area: var(--azul);

  --r-ficha: 4px;
  --r-control: 3px;

  /* El movimiento es corto y frena en seco. Una bandeja de trabajo no rebota. */
  --curva: cubic-bezier(0.2, 0.7, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --papel: #131310;
    --papel-2: #1a1915;
    --ficha: #201f1a;
    --ficha-2: #262520;

    --tinta: #f1ede2;
    --tinta-2: #c3bcab;
    --tinta-3: #8b8474;

    --linea: #34322a;
    --linea-fuerte: #4a463b;

    --azul: #85acdf;
    --azul-suave: #1d2735;
    --ambar: #dda23f;
    --ambar-suave: #2e2617;
    --verde: #72c092;
    --verde-suave: #18271d;
    --rojo: #e3794d;
    --rojo-suave: #2e1c14;
  }
}

/* --- base ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* El grano del papel. Es una turbulencia SVG en un data-URI: no pesa nada, no
   pide una imagen, y es lo que evita que el fondo cálido se vea como un color
   plano de Figma. Se apaga en oscuro, donde el grano lee como ruido de JPEG. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root body::before { opacity: 0.16; }
}

button, input, select, textarea { font: inherit; color: inherit; }

a { color: var(--azul); }

.oculto { display: none !important; }

.ico { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* --- rótulos de formulario ----------------------------------------------
   El micro-rótulo en versalitas es la voz de toda la interfaz: es el "APELLIDO
   Y NOMBRE" impreso arriba de la línea donde alguien escribe. Aparece en las
   métricas, en los datos de la ficha y en los encabezados de sección. */

.rotulo {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* --- membrete ------------------------------------------------------------ */

.membrete {
  position: relative;
  z-index: 1;
  background: var(--papel);
  border-bottom: 1px solid var(--linea);
}

.membrete-fila {
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 24px 14px;
  display: flex;
  align-items: flex-end;
  gap: 20px;
}

/* La doble regla del membrete: una gruesa y una fina, separadas. Es la cita
   más directa a una hoja con membrete institucional, y cuesta dos pixeles. */
.membrete::after {
  content: "";
  display: block;
  max-width: 1180px;
  margin: 0 auto;
  border-top: 2px solid var(--linea-fuerte);
  border-bottom: 1px solid var(--linea);
  height: 3px;
}

.marca { flex: 1; min-width: 0; }

.marca .rotulo { display: block; margin-bottom: 1px; }

/* El nombre completo del Colegio no entra en 375px sin partirse en seis
   renglones y comerse el título. La versión corta no es una abreviatura de
   apuro: es como lo llaman adentro. */
.solo-angosto { display: none; }

.marca h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 500;
  font-variation-settings: "opsz" 32;
  letter-spacing: -0.01em;
  line-height: 1;
}

.membrete-acciones { display: flex; align-items: center; gap: 8px; padding-bottom: 3px; }

.quien {
  text-align: right;
  line-height: 1.25;
  padding-right: 4px;
}
.quien strong { font-weight: 600; font-size: 13px; }
.quien span { display: block; }

/* --- botones ------------------------------------------------------------- */

.boton {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-control);
  background: var(--ficha);
  color: var(--tinta);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s var(--curva), border-color 0.12s var(--curva), transform 0.08s var(--curva);
}
.boton:hover { background: var(--ficha-2); border-color: var(--tinta-3); }
.boton:active { transform: translateY(1px); }
.boton:disabled { opacity: 0.45; cursor: default; transform: none; }

.boton.primario {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--papel);
}
.boton.primario:hover { background: var(--tinta-2); border-color: var(--tinta-2); }

.boton.fantasma { border-color: transparent; background: transparent; }
.boton.fantasma:hover { background: var(--papel-2); border-color: var(--linea); }

.boton.chico { padding: 5px 10px; font-size: 12px; }

/* --- banda de métricas ---------------------------------------------------
   Una sola caja dividida por líneas, no cuatro tarjetas. Cuatro tarjetas
   separadas dicen "cuatro cosas distintas"; esto dice "un mismo total, visto de
   cuatro maneras", que es lo que son. Cada cifra filtra la bandeja al tocarla. */

.contenido {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: 22px 24px 60px;
}

.banda {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--linea);
  border-radius: var(--r-ficha);
  background: var(--ficha);
  overflow: hidden;
  margin-bottom: 22px;
}

.metrica {
  padding: 13px 16px 14px;
  border-left: 1px solid var(--linea);
  background: transparent;
  text-align: left;
  cursor: pointer;
  position: relative;
  transition: background 0.14s var(--curva);
}
.metrica:first-child { border-left: 0; }
.metrica:hover { background: var(--ficha-2); }

.metrica .cifra {
  display: block;
  font-family: var(--mono);
  font-size: 29px;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  margin-bottom: 3px;
}

/* La marca de selección es una barra arriba, del ancho completo: se lee como
   una pestaña de archivador y no compite con el color del área. */
.metrica[aria-pressed="true"]::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--tinta);
}
.metrica[aria-pressed="true"] { background: var(--ficha-2); }

.metrica.es-nuevas .cifra { color: var(--ambar); }
.metrica.es-curso .cifra { color: var(--azul); }
.metrica.es-resueltas .cifra { color: var(--verde); }
.metrica.es-alerta .cifra { color: var(--rojo); }

/* --- barra de herramientas ----------------------------------------------- */

.herramientas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}

.buscador {
  flex: 1;
  min-width: 220px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-control);
  background: var(--ficha);
}
.buscador .ico { color: var(--tinta-3); font-size: 15px; }
.buscador input {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 8px 0;
  outline: none;
}
.buscador:focus-within { border-color: var(--tinta); }

/* Los chips de área llevan un cuadrado del color del área, no el chip entero
   pintado. Con ocho áreas, ocho chips saturados son una bolsa de caramelos;
   un cuadradito de 9px alcanza para identificar y no para gritar. */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border: 1px solid var(--linea-fuerte);
  border-radius: 999px;
  background: var(--ficha);
  font-size: 12.5px;
  cursor: pointer;
  transition: border-color 0.12s var(--curva), background 0.12s var(--curva);
}
.chip:hover { background: var(--ficha-2); }
.chip[aria-pressed="true"] { border-color: var(--tinta); background: var(--papel-2); font-weight: 600; }
.chip .tono {
  width: 9px; height: 9px;
  border-radius: 2px;
  background: var(--color-area);
  flex: none;
}
.chip .cuenta { font-family: var(--mono); font-size: 11px; color: var(--tinta-3); }

/* --- la bandeja ---------------------------------------------------------- */

.bandeja { display: flex; flex-direction: column; gap: 12px; }

/* Cada consulta es una ficha con lomo: la franja de la izquierda lleva el color
   del área y el número escrito en vertical, como el canto de una carpeta en un
   estante. Es lo que hace que veinte fichas se lean como veinte expedientes y
   no como veinte filas. */
.ficha {
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr;
  border: 1px solid var(--linea);
  border-radius: var(--r-ficha);
  background: var(--ficha);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.14s var(--curva), transform 0.14s var(--curva);
  /* Entrada escalonada. El retraso lo pone el HTML por índice; el conjunto
     entero termina en menos de medio segundo. */
  animation: entrar 0.34s var(--curva) both;
}
.ficha:hover { border-color: var(--tinta-3); }
.ficha:active { transform: translateY(1px); }

@keyframes entrar {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ficha { animation: none; }
  * { transition-duration: 0.01ms !important; }
}

.lomo {
  background: var(--color-area);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
}
.lomo span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.ficha-cuerpo { padding: 14px 18px 13px; min-width: 0; }

.ficha-encabezado {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 9px;
}
.ficha-encabezado .area {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-area);
}
.ficha-encabezado .separador { color: var(--linea-fuerte); }
.ficha-encabezado .cuando { font-size: 12px; color: var(--tinta-3); margin-left: auto; }

/* El texto de la consulta: la única serif de la pantalla. La comilla colgada
   hacia afuera del bloque es de composición de libro — dice "esto lo escribió
   una persona, no lo generó el sistema", que es la distinción que toda la
   pantalla quiere hacer. */
.consulta-texto {
  font-family: var(--serif);
  font-size: 16.5px;
  font-variation-settings: "opsz" 16;
  line-height: 1.48;
  color: var(--tinta);
  margin: 0 0 11px;
  position: relative;
  padding-left: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.consulta-texto::before {
  content: "“";
  position: absolute;
  left: -2px;
  top: -2px;
  font-size: 30px;
  line-height: 1;
  color: var(--linea-fuerte);
}

.ficha-pie {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--tinta-2);
  padding-top: 10px;
  border-top: 1px dashed var(--linea);
}
.ficha-pie .dato { display: inline-flex; align-items: center; gap: 6px; }
.ficha-pie .dato .ico { font-size: 13px; color: var(--tinta-3); }

/* --- estados ------------------------------------------------------------- */

.estado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.estado::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

.estado.nueva { color: var(--ambar); background: var(--ambar-suave); border-color: color-mix(in srgb, var(--ambar) 30%, transparent); }
.estado.curso { color: var(--azul); background: var(--azul-suave); border-color: color-mix(in srgb, var(--azul) 30%, transparent); }
.estado.resuelta { color: var(--verde); background: var(--verde-suave); border-color: color-mix(in srgb, var(--verde) 30%, transparent); }

/* El sello. Lo único rotado de toda la interfaz, y solo para lo terminado: un
   sello por estado no sería un sello, sería una decoración. */
.sello {
  position: absolute;
  top: 12px;
  right: 14px;
  transform: rotate(-4.5deg);
  padding: 3px 11px 4px;
  border: 2px solid var(--verde);
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px var(--ficha), inset 0 0 0 2px var(--verde);
  color: var(--verde);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.8;
  pointer-events: none;
}

.ficha.esta-resuelta { background: var(--ficha-2); }
.ficha.esta-resuelta .consulta-texto { color: var(--tinta-2); }

/* El aviso que no salió. Es la única falla que rompe el circuito de verdad —el
   área no se enteró— así que se marca en la ficha y no solo en un log. */
.alerta-aviso {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--rojo);
  background: var(--rojo-suave);
  border: 1px solid color-mix(in srgb, var(--rojo) 30%, transparent);
  border-radius: var(--r-control);
  padding: 2px 8px;
  font-size: 11.5px;
  font-weight: 600;
}

/* --- vacío / carga ------------------------------------------------------- */

.vacio {
  border: 1px dashed var(--linea-fuerte);
  border-radius: var(--r-ficha);
  padding: 46px 24px;
  text-align: center;
  color: var(--tinta-3);
  background: color-mix(in srgb, var(--ficha) 50%, transparent);
}
.vacio h3 { margin: 0 0 6px; font-family: var(--serif); font-size: 19px; font-weight: 500; color: var(--tinta-2); }
.vacio p { margin: 0; font-size: 13.5px; max-width: 40ch; margin-inline: auto; }

/* --- ficha ampliada (panel lateral) --------------------------------------
   Entra por el costado y deja la bandeja atrás. No reemplaza la pantalla: quien
   abre una consulta sigue estando en la cola, y eso se tiene que ver. */

.telon {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--tinta) 38%, transparent);
  backdrop-filter: blur(1.5px);
  animation: aparecer 0.18s var(--curva) both;
}
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }

.cajon {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 41;
  width: min(560px, 100%);
  background: var(--papel);
  border-left: 1px solid var(--linea-fuerte);
  display: flex;
  flex-direction: column;
  animation: deslizar 0.26s var(--curva) both;
}
@keyframes deslizar { from { transform: translateX(22px); opacity: 0; } to { transform: none; opacity: 1; } }

.cajon-cabecera {
  padding: 16px 20px 13px;
  border-bottom: 1px solid var(--linea);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--ficha);
}
.cajon-cabecera .numero { font-family: var(--mono); font-size: 15px; letter-spacing: 0.04em; }
.cajon-cabecera .area {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-area);
}

.cajon-cuerpo { flex: 1; overflow-y: auto; padding: 20px; }

.cajon-cuerpo .consulta-completa {
  font-family: var(--serif);
  font-size: 18px;
  font-variation-settings: "opsz" 18;
  line-height: 1.55;
  margin: 0 0 22px;
  white-space: pre-wrap;
  padding-left: 16px;
  border-left: 2px solid var(--color-area);
}

.datos {
  border-top: 1px solid var(--linea);
  margin-bottom: 20px;
}
.datos .fila {
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--linea);
  align-items: baseline;
}
.datos .fila > span:last-child { min-width: 0; overflow-wrap: anywhere; }

.acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }

.seccion-titulo {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 10px;
}
.seccion-titulo::after { content: ""; flex: 1; border-top: 1px solid var(--linea); }

.historial { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.historial li {
  display: grid;
  grid-template-columns: 9px 1fr;
  gap: 11px;
  padding: 7px 0;
  align-items: start;
}
.historial li::before {
  content: "";
  width: 7px; height: 7px;
  margin-top: 6px;
  border-radius: 50%;
  border: 1px solid var(--tinta-3);
  background: var(--papel);
}
.historial .cuando { color: var(--tinta-3); font-size: 11.5px; }

/* --- áreas (el menú del bot) --------------------------------------------- */

.tabla-areas {
  width: 100%;
  border-collapse: collapse;
  background: var(--ficha);
  border: 1px solid var(--linea);
  border-radius: var(--r-ficha);
  overflow: hidden;
}
.tabla-areas th {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--linea-fuerte);
  background: var(--ficha-2);
  font-size: 10px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--tinta-3);
}
.tabla-areas td { padding: 11px 14px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.tabla-areas tr:last-child td { border-bottom: 0; }
.tabla-areas tr.inactiva td { opacity: 0.5; }
.tabla-areas .nombre-area { display: flex; align-items: center; gap: 9px; font-weight: 600; }
.tabla-areas .nombre-area .tono { width: 11px; height: 11px; border-radius: 2px; background: var(--color-area); flex: none; }

/* La previsualización del menú: un teléfono con la burbuja tal cual la va a ver
   el matriculado. Es lo que permite agregar un área y comprobar el resultado
   antes de que lo vea alguien de afuera — sin esto, "sin reescribir la lógica"
   igual significa mandarse un WhatsApp a uno mismo para ver si quedó bien. */
.telefono {
  background: #0d1418;
  border: 1px solid var(--linea-fuerte);
  border-radius: 14px;
  padding: 18px 14px;
  max-width: 330px;
}
.burbuja {
  background: #1f2c33;
  color: #e9edef;
  border-radius: 8px 8px 8px 2px;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.45;
  margin-bottom: 4px;
}
.burbuja .hora { display: block; text-align: right; font-size: 10.5px; color: #8696a0; margin-top: 3px; }
.burbuja-boton {
  background: #1f2c33;
  color: #53bdeb;
  border-top: 1px solid #2f3b43;
  border-radius: 0 0 8px 8px;
  padding: 9px;
  text-align: center;
  font-size: 14px;
  margin-bottom: 4px;
}
.burbuja-boton:first-of-type { border-radius: 8px 8px 0 0; border-top: 0; margin-top: 4px; }
.burbuja-fila { display: flex; gap: 8px; align-items: flex-start; padding: 9px 12px; border-top: 1px solid #2f3b43; }
.burbuja-fila .txt { flex: 1; }
.burbuja-fila .txt b { display: block; color: #e9edef; font-weight: 500; font-size: 14px; }
.burbuja-fila .txt small { color: #8696a0; font-size: 12px; }
.burbuja-lista { background: #1f2c33; border-radius: 8px; margin-top: 6px; overflow: hidden; }
.burbuja-lista .encabezado { padding: 10px 12px 2px; color: #8696a0; font-size: 12px; }

/* --- formularios --------------------------------------------------------- */

.campo { margin-bottom: 14px; }
.campo label { display: block; margin-bottom: 5px; }
.campo input[type="text"], .campo input[type="email"], .campo input[type="number"],
.campo input[type="password"], .campo textarea, .campo select {
  width: 100%;
  padding: 8px 11px;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-control);
  background: var(--ficha);
  outline: none;
}
.campo input:focus, .campo textarea:focus, .campo select:focus { border-color: var(--tinta); }
.campo textarea { resize: vertical; min-height: 74px; font-family: inherit; }
.campo .pie-campo { margin: 5px 0 0; font-size: 11.5px; color: var(--tinta-3); }

.fila-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.aviso {
  padding: 10px 13px;
  border-radius: var(--r-control);
  border: 1px solid var(--linea-fuerte);
  background: var(--ficha-2);
  font-size: 13px;
  margin-bottom: 14px;
}
.aviso.error { color: var(--rojo); background: var(--rojo-suave); border-color: color-mix(in srgb, var(--rojo) 35%, transparent); }
.aviso.ok { color: var(--verde); background: var(--verde-suave); border-color: color-mix(in srgb, var(--verde) 35%, transparent); }
/* Ámbar y no rojo: algo que hay que saber, no algo que está roto. El rojo está
   reservado para lo que impide trabajar. */
.aviso.atencion { color: var(--ambar); background: var(--ambar-suave); border-color: color-mix(in srgb, var(--ambar) 35%, transparent); }

/* --- modal --------------------------------------------------------------- */

.modal {
  position: fixed;
  z-index: 50;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: color-mix(in srgb, var(--tinta) 38%, transparent);
  animation: aparecer 0.16s var(--curva) both;
}
.modal-caja {
  width: min(480px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--papel);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-ficha);
  padding: 20px;
  animation: deslizar 0.2s var(--curva) both;
}
.modal-caja h2 { margin: 0 0 4px; font-family: var(--serif); font-size: 21px; font-weight: 500; }
.modal-caja .subtitulo { margin: 0 0 18px; color: var(--tinta-3); font-size: 13px; }

/* --- entrada ------------------------------------------------------------- */

.login-pantalla {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  position: relative;
  z-index: 1;
}
.login-caja {
  width: min(390px, 100%);
  background: var(--ficha);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-ficha);
  padding: 30px 28px 26px;
}
.login-caja .rotulo { display: block; margin-bottom: 3px; }
.login-caja h1 {
  margin: 0 0 22px;
  font-family: var(--serif);
  font-size: 27px;
  font-weight: 500;
  font-variation-settings: "opsz" 28;
  line-height: 1.1;
}
.login-caja h1::after {
  content: "";
  display: block;
  margin-top: 14px;
  border-top: 2px solid var(--linea-fuerte);
  border-bottom: 1px solid var(--linea);
  height: 3px;
}

/* --- teléfonos ----------------------------------------------------------- */

@media (max-width: 720px) {
  /* Membrete en dos filas: la marca arriba ocupando todo el ancho, y los
     botones abajo alineados a la derecha. Apretados en una sola fila, el
     rótulo se parte en seis renglones y se superpone con el título. */
  .membrete-fila { padding: 14px 16px 12px; flex-wrap: wrap; gap: 10px; align-items: stretch; }
  .marca { flex: 1 1 100%; }
  .marca h1 { font-size: 24px; }
  .membrete-acciones { flex: 1 1 100%; justify-content: flex-end; padding-bottom: 0; }
  .quien { font-size: 12px; }
  .solo-ancho { display: none; }
  .solo-angosto { display: inline; }
  .contenido { padding: 16px 16px 48px; }
  .banda { grid-template-columns: repeat(2, 1fr); }
  .metrica:nth-child(3) { border-left: 0; }
  .metrica:nth-child(n+3) { border-top: 1px solid var(--linea); }
  .metrica .cifra { font-size: 24px; }

  /* En pantalla angosta el lomo vertical no entra: pasa a ser una barra
     horizontal arriba de la ficha, con el número en línea. Misma información,
     misma jerarquía, sin pelear por 34 píxeles de ancho. */
  .ficha { grid-template-columns: 1fr; }
  .lomo { padding: 5px 12px; justify-content: flex-start; }
  .lomo span { writing-mode: horizontal-tb; transform: none; }
  .ficha-cuerpo { padding: 12px 14px; }
  .sello { top: 40px; }
  .cajon { width: 100%; border-left: 0; }
  .fila-campos { grid-template-columns: 1fr; }
  .datos .fila { grid-template-columns: 96px 1fr; }
}


/* --- ajustes de oscuro que pisan reglas de más arriba --------------------
   Van al final del archivo y no al lado de las fichas de color: tienen la
   misma especificidad que las reglas que corrigen, así que lo único que
   decide cuál gana es cuál se declara última. Escritas arriba, no hacen nada.

   Qué corrigen: el color del área lo carga una persona en el panel y se
   guarda tal cual. Un azul institucional se lee perfecto sobre papel y
   desaparece sobre fondo oscuro. Acá se lo aclara mezclándolo con la tinta
   clara — mantiene la identidad del área, recupera el contraste, y sirve para
   cualquier color que alguien cargue mañana sin tener que pedirle que elija
   uno "que se vea bien en oscuro".

   El lomo de la ficha no entra en esta lista: ahí el color es fondo con texto
   blanco encima, y eso funciona en los dos temas. */

@media (prefers-color-scheme: dark) {
  .ficha-encabezado .area,
  .cajon-cabecera .area {
    color: color-mix(in srgb, var(--color-area) 40%, #f1ede2);
  }
  .chip .tono,
  .tabla-areas .nombre-area .tono {
    background: color-mix(in srgb, var(--color-area) 55%, #f1ede2);
  }
  .cajon-cuerpo .consulta-completa {
    border-left-color: color-mix(in srgb, var(--color-area) 55%, #f1ede2);
  }
}

/* --- el hilo de conversación ---------------------------------------------
   El cajón dejó de ser una ficha de lectura y pasó a ser el lugar donde se
   charla. La estructura es de arriba abajo: cabecera fija, acciones, el hilo
   que crece, y el redactor abajo de todo.

   Las tres formas de burbuja no son estética: son tres voces distintas y la
   diferencia importa. Lo que escribió el matriculado va en serif —la única de
   toda la interfaz, igual que antes en la tarjeta— porque es su voz. Lo que
   contestó una persona del Colegio va en sans y firmado. Lo que dijo el bot va
   al medio, chico y gris: es plomería, y mezclarlo con lo demás haría parecer
   que alguien conversó cuando no conversó nadie. */

.cajon-acciones {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 20px;
  border-bottom: 1px solid var(--linea);
  background: var(--ficha);
}
.cajon-acciones select {
  padding: 5px 9px;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-control);
  background: var(--ficha);
  font-size: 12px;
}

.desplegable { margin-left: auto; }
.desplegable > summary { list-style: none; cursor: pointer; }
.desplegable > summary::-webkit-details-marker { display: none; }
.desplegable-cuerpo {
  position: absolute;
  right: 20px;
  z-index: 2;
  width: min(420px, calc(100% - 40px));
  margin-top: 8px;
  padding: 14px 16px;
  background: var(--ficha);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-ficha);
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.4);
  max-height: 60vh;
  overflow-y: auto;
}

.hilo {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--papel);
}
.hilo-vacio { margin: auto; color: var(--tinta-3); font-size: 13.5px; }

.burbuja-hilo { max-width: 82%; }
.burbuja-hilo p { margin: 0; }
.burbuja-hilo .meta {
  display: block;
  margin-top: 4px;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--tinta-3);
}

/* Del matriculado: serif, a la izquierda, sobre la superficie clara. */
.burbuja-hilo.entra {
  align-self: flex-start;
  background: var(--ficha);
  border: 1px solid var(--linea);
  border-radius: 4px 12px 12px 12px;
  padding: 10px 14px 8px;
}
.burbuja-hilo.entra p {
  font-family: var(--serif);
  font-size: 16px;
  font-variation-settings: "opsz" 16;
  line-height: 1.45;
}

/* Del Colegio: sans, a la derecha, teñida con el color del área. */
.burbuja-hilo.sale {
  align-self: flex-end;
  background: color-mix(in srgb, var(--color-area) 12%, var(--ficha));
  border: 1px solid color-mix(in srgb, var(--color-area) 28%, transparent);
  border-radius: 12px 4px 12px 12px;
  padding: 10px 14px 8px;
}
.burbuja-hilo.sale p { font-size: 14.5px; line-height: 1.45; white-space: pre-wrap; }
.burbuja-hilo.sale .meta { text-align: right; }

/* Del bot: al medio, chico, sin caja. No es una voz, es el sistema. */
.burbuja-hilo.bot {
  align-self: center;
  max-width: 90%;
  text-align: center;
  font-size: 12px;
  color: var(--tinta-3);
  padding: 2px 0;
}
.burbuja-hilo.bot span:first-child {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.burbuja-hilo.bot .meta { display: inline; margin: 0 0 0 6px; }

/* --- el redactor ---------------------------------------------------------- */

.redactor {
  border-top: 1px solid var(--linea-fuerte);
  background: var(--ficha);
  padding: 12px 20px 14px;
}
.redactor textarea {
  width: 100%;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-control);
  background: var(--papel);
  padding: 9px 11px;
  resize: vertical;
  min-height: 46px;
  font-family: inherit;
  outline: none;
}
.redactor textarea:focus { border-color: var(--tinta); }
.redactor-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}

/* La ventana cerrada explica por qué, en vez de mostrar un campo gris y mudo.
   Un control deshabilitado sin motivo hace que la persona pruebe tres veces
   antes de preguntar. */
.redactor.cerrado {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--tinta-2);
  background: var(--ambar-suave);
  border-top-color: color-mix(in srgb, var(--ambar) 35%, transparent);
}
.redactor.cerrado .ico { font-size: 17px; color: var(--ambar); margin-top: 1px; }
.redactor.cerrado strong { display: block; color: var(--ambar); }

@media (max-width: 720px) {
  .cajon-acciones { padding: 9px 14px; }
  .hilo { padding: 14px; }
  .burbuja-hilo { max-width: 90%; }
  .redactor { padding: 10px 14px 12px; }
  .desplegable-cuerpo { right: 14px; width: calc(100% - 28px); }
}

/* --- documento de lectura larga (política de privacidad) ------------------
   Es la única página del sistema pensada para leerse de corrido y de afuera:
   la ve un matriculado, no un empleado. Así que acá la serif deja de ser la
   voz de una persona y pasa a ser el cuerpo del texto — es un documento, y un
   documento se lee mejor en serif.

   Medida de línea acotada a ~68 caracteres. Una política de privacidad a todo
   el ancho de una pantalla de escritorio no la lee nadie, y el punto de esta
   página es justamente que se entienda. */

.documento {
  position: relative;
  z-index: 1;
  max-width: 68ch;
  margin: 0 auto;
  padding: 56px 24px 80px;
  font-family: var(--serif);
  font-size: 17px;
  font-variation-settings: "opsz" 17;
  line-height: 1.62;
  color: var(--tinta);
}

.documento-membrete { margin-bottom: 36px; }
.documento-membrete .rotulo { display: block; margin-bottom: 8px; }
.documento-membrete h1 {
  margin: 0;
  font-size: 40px;
  font-weight: 500;
  font-variation-settings: "opsz" 44;
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.documento-membrete .bajada {
  margin: 4px 0 0;
  font-size: 19px;
  color: var(--tinta-2);
}
.documento-membrete .fecha {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 2px solid var(--linea-fuerte);
  border-bottom: 1px solid var(--linea);
  padding-bottom: 3px;
  font-size: 12px;
  color: var(--tinta-3);
}

.documento section { margin-bottom: 34px; }

.documento h2 {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--tinta-2);
  margin: 0 0 14px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--linea);
}
.documento h3 {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  margin: 24px 0 8px;
}

.documento p { margin: 0 0 14px; }
.documento ul, .documento ol { margin: 0 0 14px; padding-left: 22px; }
.documento li { margin-bottom: 8px; }
.documento strong { font-weight: 600; }

.documento .menor { font-size: 14.5px; color: var(--tinta-2); }

/* El borrador se anuncia solo. Sacar este bloque es parte de publicar la
   página, no un olvido posible. */
.aviso-borrador {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  padding: 14px 16px;
  margin-bottom: 34px;
  border: 1px solid color-mix(in srgb, var(--ambar) 40%, transparent);
  border-left-width: 3px;
  border-radius: var(--r-control);
  background: var(--ambar-suave);
  color: var(--tinta-2);
}
.aviso-borrador strong { color: var(--ambar); }

/* Lo que falta completar no puede pasar desapercibido: va subrayado en ámbar
   y en versalitas, como un campo en blanco de un formulario. */
[data-completar] {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ambar);
  background: var(--ambar-suave);
  padding: 1px 7px;
  border-radius: 3px;
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--ambar) 45%, transparent);
}

.tabla-datos {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.5;
  margin: 0 0 18px;
}
.tabla-datos th {
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-3);
  padding: 0 12px 7px 0;
  border-bottom: 1px solid var(--linea-fuerte);
}
.tabla-datos td {
  padding: 11px 12px 11px 0;
  border-bottom: 1px solid var(--linea);
  vertical-align: top;
}
.tabla-datos td:first-child { width: 33%; }

.nota-importante {
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.55;
  padding: 14px 16px;
  margin: 18px 0;
  border: 1px solid var(--linea-fuerte);
  border-left: 3px solid var(--azul);
  border-radius: var(--r-control);
  background: var(--ficha);
}

.documento-pie {
  margin-top: 46px;
  padding-top: 16px;
  border-top: 1px solid var(--linea);
}

@media (max-width: 720px) {
  .documento { padding: 34px 20px 60px; font-size: 16px; }
  .documento-membrete h1 { font-size: 30px; }
  .tabla-datos, .tabla-datos tbody, .tabla-datos tr, .tabla-datos td { display: block; width: auto; }
  .tabla-datos thead { display: none; }
  .tabla-datos tr { border-bottom: 1px solid var(--linea); padding: 10px 0; }
  .tabla-datos td { border: 0; padding: 2px 0; }
  .tabla-datos td:first-child { width: auto; }
}

/* La franja del número conectado, arriba de la pantalla de áreas. Misma caja
   dividida por líneas que la banda de métricas: son cuatro datos de una misma
   cosa —la conexión con Meta—, no cuatro cosas distintas. */
.franja-numero {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--linea);
  border-radius: var(--r-ficha);
  background: var(--ficha);
  overflow: hidden;
  margin-bottom: 20px;
}
.franja-numero > div {
  padding: 11px 16px 13px;
  border-left: 1px solid var(--linea);
}
.franja-numero > div:first-child { border-left: 0; }
.franja-numero .rotulo { display: block; margin-bottom: 4px; }
.franja-numero .numero-grande { font-size: 17px; letter-spacing: 0.02em; }

@media (max-width: 720px) {
  .franja-numero { grid-template-columns: repeat(2, 1fr); }
  .franja-numero > div:nth-child(3) { border-left: 0; }
  .franja-numero > div:nth-child(n+3) { border-top: 1px solid var(--linea); }
}