/* ApplyBoard — sistema visual común (trozo 2 del rediseño, ADR 0027).
 *
 * ## La idea, y de dónde sale
 *
 * Quien busca trabajo en el periódico subraya los anuncios que le interesan
 * con rotulador fosforito. ApplyBoard hace eso tres mañanas por semana: de
 * todo lo que llega, marca lo que encaja. El sistema sale de ahí:
 *
 *   - Tinta y papel para todo, y UN acento: el fosforito. Solo marca lo que
 *     merece atención (la nota de lo que encaja, lo seleccionado). Nunca es
 *     color de texto: sobre papel no se lee.
 *   - Lo memorable es la nota: un número grande con un trazo de rotulador
 *     detrás. Todo lo demás, callado.
 *   - Listas agrupadas por tanda (el rastreo de cada mañana), no tarjetas
 *     iguales con sombra.
 *   - Una sola familia, Atkinson Hyperlegible Next (Braille Institute, OFL),
 *     alojada aquí: se diseñó para leerse bien, y aquí se lee deprisa en el
 *     móvil.
 *
 * ## Por qué así y no de otra forma (10/10/2026)
 *
 * La primera muestra (tres direcciones con fuentes del sistema, tarjetas
 * redondeadas con sombra, etiquetas en mayúsculas, metadatos con «·»,
 * cifras en monoespaciada) Carlos la vio «demasiado AI slop». Los rasgos
 * están enumerados en la skill frontend-design de Anthropic y en el test de
 * hallmark (Nutlope/hallmark, MIT); aquí se evitan a propósito.
 *
 * ## Reglas
 *
 *   - Sin build y sin dependencias (ADR 0006). La fuente es un fichero de
 *     web/fuentes/, no un CDN.
 *   - Móvil primero: 375 px y se ensancha con min-width.
 *   - Claro y oscuro: se redefinen los tokens, nunca los componentes. El modo
 *     sale del sistema, salvo data-modo="claro" | "oscuro" en <html>.
 *   - Un componente solo usa tokens. tests/test_estilo_contraste.py mide el
 *     contraste de cada par y exige que los dos oscuros sean idénticos.
 */

@font-face {
  font-family: "Atkinson Next";
  src: url("fuentes/atkinson-next-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ───────────────────────── escalas que no cambian ───────────────────────── */
:root {
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px;
  --e-5: 20px; --e-6: 24px; --e-8: 32px; --e-10: 40px; --e-12: 48px;

  --t-s: 13px; --t-m: 16px; --t-l: 18px; --t-xl: 24px; --t-2xl: 34px;
  --letra: "Atkinson Next", "Atkinson Hyperlegible Next", ui-sans-serif, system-ui, sans-serif;

  --radio: 6px;            /* uno solo, pequeño: papel, no burbujas */
  --toque: 44px;           /* alto mínimo de lo que se pulsa con el dedo */
  --medida: 68ch;          /* ancho de lectura */
}

/* ───────────────────────────────── colores ──────────────────────────────── */
:root {
  --papel:        #f3f3ef;   /* papel de periódico, apenas cálido */
  --papel-2:      #e8e8e2;   /* lo hundido: campos, filtros activos */
  --linea:        #d7d7cf;
  --linea-fuerte: #b4b4aa;
  --tinta:        #1c1e26;   /* tinta azulada, no negro */
  --tinta-2:      #4a4c55;
  --tinta-3:      #62646c;
  --sobre-tinta:  #f3f3ef;   /* texto sobre un botón de tinta */
  --fosforito:    #f2e14c;
  --fosforito-2:  #f6ec98;   /* el trazo flojo: nota 7 */
  --sobre-fosforito: #1c1e26;
  --aplicada:     #2c6a3d;
  --aplicada-suave: #dcebdf;
  --descarte:     #a33a2e;
  --descarte-suave: #f3dfdb;
  --velo:         rgba(28, 30, 38, .4);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-modo="claro"]) {
    --papel:        #17181d;
    --papel-2:      #22242a;
    --linea:        #30323a;
    --linea-fuerte: #4a4c55;
    --tinta:        #ecece6;
    --tinta-2:      #b9bab3;
    --tinta-3:      #9c9d97;
    --sobre-tinta:  #17181d;
    --fosforito:    #e8d64a;
    --fosforito-2:  #b8ad55;
    --sobre-fosforito: #1c1e26;
    --aplicada:     #7cc18d;
    --aplicada-suave: #1f3326;
    --descarte:     #ec8d80;
    --descarte-suave: #3a201c;
    --velo:         rgba(0, 0, 0, .55);
  }
}
:root[data-modo="oscuro"] {
  --papel:        #17181d;
  --papel-2:      #22242a;
  --linea:        #30323a;
  --linea-fuerte: #4a4c55;
  --tinta:        #ecece6;
  --tinta-2:      #b9bab3;
  --tinta-3:      #9c9d97;
  --sobre-tinta:  #17181d;
  --fosforito:    #e8d64a;
  --fosforito-2:  #b8ad55;
  --sobre-fosforito: #1c1e26;
  --aplicada:     #7cc18d;
  --aplicada-suave: #1f3326;
  --descarte:     #ec8d80;
  --descarte-suave: #3a201c;
  --velo:         rgba(0, 0, 0, .55);
}

/* ───────────────────────────────── base ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; min-width: 0; }
/* `min-width: 0` en todo: un hijo de grid o flex no encoge por debajo de su
   contenido sin esto (a 375 px la fila de filtros empujaba la página a 393,
   medido el 10/10/2026). `overflow-x: clip` y no `hidden`: clip conserva
   `sticky` y `fixed` en los descendientes. */
html, body { overflow-x: clip; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--papel); color: var(--tinta);
  font: 400 var(--t-m)/1.5 var(--letra);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; line-height: 1.15; font-weight: 700; letter-spacing: -.01em;
             overflow-wrap: anywhere; }
h1 { font-size: var(--t-2xl); } h2 { font-size: var(--t-xl); } h3 { font-size: var(--t-l); }
p { margin: 0; max-width: var(--medida); }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.icono { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none;
         stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.flojo { color: var(--tinta-2); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ──────────────────────────────── botones ───────────────────────────────── */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: var(--toque); padding: 0 var(--e-4); line-height: 1; white-space: nowrap;
  border: 1px solid var(--linea-fuerte); border-radius: var(--radio);
  background: transparent; color: var(--tinta); font-weight: 600; cursor: pointer;
  text-decoration: none;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.boton:hover { background: var(--papel-2); }
.boton:active { background: var(--linea); }
.boton:disabled { opacity: .55; cursor: not-allowed; }
.boton--tinta { background: var(--tinta); border-color: var(--tinta); color: var(--sobre-tinta); }
.boton--tinta:hover { background: var(--tinta-2); border-color: var(--tinta-2); }
.boton--quieto { border-color: transparent; }
.boton--icono { width: var(--toque); padding: 0; }
.boton--peligro { color: var(--descarte); }
.boton--peligro:hover { background: var(--descarte-suave); border-color: var(--descarte); }
.boton[aria-pressed="true"] { background: var(--fosforito); border-color: var(--fosforito);
                              color: var(--sobre-fosforito); }

/* ───────────────────────── la nota: el rotulador ────────────────────────── */
/* El trazo va detrás de la altura de la x, no en la línea base: un subrayado
   gordo en la base se lee como un error, no como un rotulador. */
.nota {
  position: relative; display: inline-block; width: 2ch; text-align: center;
  font-size: var(--t-2xl); font-weight: 750; line-height: 1; color: var(--tinta-3);
  isolation: isolate;
}
.nota::before {
  content: ""; position: absolute; z-index: -1; inset: 28% -18% 4% -18%;
  border-radius: 2px 5px 3px 6px; transform: rotate(-3deg) skewX(-10deg);
}
/* Sobre el fosforito, siempre tinta oscura: en modo oscuro `--tinta` es clara
   y el número se perdía (medido el 10/10/2026). */
.nota--alta, .nota--media { color: var(--sobre-fosforito); }
.nota--alta::before  { background: var(--fosforito); }
.nota--media::before { background: var(--fosforito-2); }

/* ─────────────────────────── etiquetas pequeñas ─────────────────────────── */
.etiquetas { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-2); }
.etiqueta {
  display: inline-flex; align-items: center; gap: var(--e-1); min-height: 24px;
  padding: 0 var(--e-2); border: 1px solid var(--linea-fuerte); border-radius: var(--radio);
  font-size: var(--t-s); font-weight: 600; color: var(--tinta-2); line-height: 1;
}
.etiqueta--aplicada { border-color: var(--aplicada); color: var(--aplicada); background: var(--aplicada-suave); }
.etiqueta--descarte { border-color: var(--descarte); color: var(--descarte); background: var(--descarte-suave); }
.etiqueta--nueva { border-color: var(--fosforito); background: var(--fosforito); color: var(--sobre-fosforito); }

/* ─────────────────────────── listas por tanda ───────────────────────────── */
/* El separador es información: cuándo llegó la tanda y cuántas trae. */
.tanda { display: grid; }
.tanda__cabecera {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3);
  padding: var(--e-6) 0 var(--e-2); border-bottom: 2px solid var(--tinta);
}
.tanda__cabecera h2 { font-size: var(--t-l); }
.tanda__cabecera span { font-size: var(--t-s); color: var(--tinta-2); }

.oferta {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e-1) var(--e-4);
  padding: var(--e-4) 0; border-bottom: 1px solid var(--linea); cursor: pointer;
}
.oferta:hover .oferta__puesto { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.oferta:focus-visible { outline-offset: 0; }
.oferta .nota { grid-row: span 2; align-self: start; margin-top: 2px; }
.oferta__puesto { font-size: var(--t-l); font-weight: 700; line-height: 1.25; }
.oferta__donde { font-size: var(--t-s); color: var(--tinta-2); }
.oferta__pie { grid-column: 2; display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap;
               margin-top: var(--e-2); }
.oferta__acciones { display: flex; gap: var(--e-1); margin-left: auto; }
.oferta--caducada .oferta__puesto { text-decoration: line-through; text-decoration-thickness: 1px; color: var(--tinta-2); }

/* ─────────────────────────────── campos ─────────────────────────────────── */
.campo { display: grid; gap: var(--e-1); }
.campo label { font-size: var(--t-s); font-weight: 600; }
.entrada, .selector {
  min-height: var(--toque); width: 100%; padding: 0 var(--e-3);
  border: 1px solid var(--linea-fuerte); border-radius: var(--radio);
  background: var(--papel); color: var(--tinta); outline: 2px solid transparent; outline-offset: 1px;
}
.entrada::placeholder { color: var(--tinta-3); }
.entrada:hover, .selector:hover { border-color: var(--tinta-2); }
.entrada:focus-visible, .selector:focus-visible { outline-color: var(--tinta); }
textarea.entrada { padding: var(--e-3); min-height: 96px; resize: vertical; }
.casilla { display: flex; align-items: flex-start; gap: var(--e-3); padding: var(--e-2) 0; cursor: pointer; }
.casilla input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--tinta); flex: none; }
.casilla small { display: block; color: var(--tinta-2); font-size: var(--t-s); }

/* ───────────────────── navegación: pie en móvil, raíl en escritorio ─────── */
.marca { font-weight: 800; font-size: var(--t-l); letter-spacing: -.02em; }
.navegacion {
  position: fixed; inset: auto 0 0 0; z-index: 20; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--linea-fuerte); background: var(--papel);
  padding-bottom: env(safe-area-inset-bottom);
}
.navegacion a {
  display: grid; justify-items: center; gap: 2px; padding: var(--e-2) 0; min-height: 56px;
  color: var(--tinta-2); text-decoration: none; font-size: var(--t-s); font-weight: 600; white-space: nowrap;
}
.navegacion a[aria-current="page"] { color: var(--tinta); }
.navegacion a[aria-current="page"] .icono { stroke-width: 2.4; }
/* Texto marcado: el fosforito cubre la palabra ENTERA. Con un trazo solo en
   la mitad de abajo, en modo oscuro la mitad de arriba de cada letra quedaba
   en tinta oscura sobre fondo oscuro (medido el 10/10/2026). */
.navegacion a[aria-current="page"] span { color: var(--sobre-fosforito); background: var(--fosforito);
                                          padding: 0 4px; border-radius: 2px; }

.armazon { padding: var(--e-4) var(--e-4) 96px; }
.armazon__cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
                     padding-bottom: var(--e-2); }
@media (min-width: 900px) {
  .armazon { display: grid; grid-template-columns: 200px minmax(0, 760px); gap: var(--e-10);
             padding: var(--e-8) var(--e-8) var(--e-12); }
  .armazon__cabecera { grid-column: 1; grid-row: 1; flex-direction: column; align-items: flex-start;
                       position: sticky; top: var(--e-8); align-self: start; gap: var(--e-8); }
  .navegacion { position: static; display: grid; grid-template-columns: none; gap: var(--e-1);
                border: 0; padding: 0; background: none; }
  .navegacion a { display: flex; align-items: center; justify-items: start; gap: var(--e-3);
                  min-height: 40px; padding: 0; font-size: var(--t-m); }
  .armazon__contenido { grid-column: 2; }
}

/* ──────────────────────────── barra de filtros ──────────────────────────── */
.filtros { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-2); margin: var(--e-4) 0 var(--e-2); }
.filtros .entrada { grid-column: 1 / -1; }
.vistas { display: flex; gap: var(--e-4); overflow-x: auto; scrollbar-width: none; }
.vistas button {
  flex: none; min-height: var(--toque); padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--tinta-2); font-weight: 600; white-space: nowrap;
}
.vistas button[aria-pressed="true"] { color: var(--sobre-fosforito); }
.vistas button[aria-pressed="true"] > span { color: var(--sobre-fosforito); background: var(--fosforito); padding: 1px 4px; border-radius: 2px; }
.vistas small { font-weight: 400; color: var(--tinta-3); margin-left: 4px; }
@media (min-width: 640px) {
  .filtros { grid-template-columns: minmax(0, 1fr) auto auto; }
  .filtros .entrada { grid-column: auto; }
}

/* ──────────────── detalle: hoja en el móvil, lateral en escritorio ──────── */
.velo { position: fixed; inset: 0; z-index: 40; background: var(--velo);
        opacity: 0; pointer-events: none; transition: opacity 160ms ease; }
.velo[data-abierto="true"] { opacity: 1; pointer-events: auto; }
.detalle {
  position: fixed; z-index: 50; inset: auto 0 0 0; max-height: 92dvh; overflow: auto;
  background: var(--papel); border-top: 2px solid var(--tinta);
  padding: var(--e-4) var(--e-4) calc(var(--e-8) + env(safe-area-inset-bottom));
  transform: translateY(100%); visibility: hidden;
  /* `visibility` además del desplazamiento: cerrado, el panel no puede
     recibir el foco con el tabulador, y no asoma si la pantalla cambia de
     ancho (el desplazamiento pasa de vertical a lateral a 900 px). Al
     cerrar, se oculta cuando acaba de salir, no antes. */
  transition: transform 220ms cubic-bezier(.2, .8, .2, 1), visibility 0s linear 220ms;
}
.detalle[data-abierto="true"] { transform: none; visibility: visible;
                                transition: transform 220ms cubic-bezier(.2, .8, .2, 1); }
.detalle__bloque { display: grid; gap: var(--e-2); padding: var(--e-4) 0; border-top: 1px solid var(--linea); }
.detalle__bloque h3 { font-size: var(--t-m); }
@media (min-width: 900px) {
  .detalle { inset: 0 0 0 auto; width: min(480px, 92vw); max-height: none; border-top: 0;
             border-left: 2px solid var(--tinta); transform: translateX(100%); padding: var(--e-8); }
}

/* ──────────────────────── seguimiento por estado ────────────────────────── */
.estado { display: grid; }
.estado__fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3);
                padding: var(--e-3) 0; border-bottom: 1px solid var(--linea); }
/* El texto pide al menos ~15em; si las acciones no caben al lado, bajan a su
   línea en vez de aplastar el puesto en una columna estrecha. */
.estado__texto { flex: 1 1 15em; }
/* El puesto se parte en dos líneas antes que cortarse con «…»: es lo que
   identifica la candidatura. */
.estado__texto strong { display: block; font-weight: 700; line-height: 1.3; }
.estado__texto span { font-size: var(--t-s); color: var(--tinta-2); }

/* ──────────────────────────────── aviso ─────────────────────────────────── */
/* Solo para lo que se puede deshacer o no se ve: «Descartada. Deshacer». */
.aviso {
  position: fixed; left: var(--e-4); right: var(--e-4); bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-4);
  padding: var(--e-3) var(--e-4); border-radius: var(--radio);
  background: var(--tinta); color: var(--sobre-tinta);
}
.aviso button { background: none; border: 0; color: inherit; font-weight: 700; cursor: pointer;
                min-height: 32px; text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 900px) { .aviso { left: auto; right: var(--e-8); bottom: var(--e-8); max-width: 420px; } }

/* ──────────────────────────────── cifras ────────────────────────────────── */
.cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 2px solid var(--tinta); }
.cifra { padding: var(--e-4) 0; border-bottom: 1px solid var(--linea); }
.cifra:nth-child(odd) { padding-right: var(--e-4); border-right: 1px solid var(--linea); }
.cifra:nth-child(even) { padding-left: var(--e-4); }
.cifra strong { display: block; font-size: var(--t-2xl); font-weight: 750; line-height: 1.1; }
.cifra span { font-size: var(--t-s); color: var(--tinta-2); }

/* ─────────────────────────── el Resumen: gráficas ───────────────────────── */
/* Guía: skill dataviz. Una sola tinta en todas (ninguna identidad depende del
   color, así no hay pares que confundir con daltonismo: verde contra rojo dio
   ΔE 5,1 en deuteranopia, medido el 10/10/2026). El fosforito, como en el
   resto, va DETRÁS de la etiqueta de lo que pide acción, nunca como barra:
   sobre el papel apenas tiene contraste. Barras de 24 px como mucho, con el
   extremo de dato redondeado y la base recta; el valor, en la punta. */
.heroe { display: grid; gap: var(--e-3); padding: var(--e-6) 0; border-top: 2px solid var(--tinta);
         border-bottom: 1px solid var(--linea); }
.heroe__cifra { font-size: 64px; font-weight: 750; line-height: .95; letter-spacing: -.03em;
                font-variant-numeric: proportional-nums; }
.heroe__texto { font-size: var(--t-l); max-width: 34ch; }
.heroe .boton { justify-self: start; }

.cifras strong { font-variant-numeric: proportional-nums; }
.cifra small { display: block; font-size: var(--t-s); color: var(--tinta-3); }

.grafica { display: grid; gap: var(--e-3); padding: var(--e-6) 0; border-bottom: 1px solid var(--linea); }
.grafica__titulo { display: grid; gap: 2px; }
.grafica__titulo h2 { font-size: var(--t-l); }
.grafica__titulo p { font-size: var(--t-s); color: var(--tinta-2); }
.marcado { color: var(--sobre-fosforito); padding: 0 4px; border-radius: 2px; background: var(--fosforito);
           -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Barras horizontales: etiqueta, barra y valor en una fila. */
.barras { display: grid; gap: var(--e-1); margin: 0; padding: 0; list-style: none; }
.barra { display: grid; grid-template-columns: minmax(0, 9.5em) minmax(0, 1fr); align-items: center;
         gap: var(--e-3); min-height: 32px; padding: 0; border: 0; background: none; text-align: left;
         cursor: pointer; width: 100%; color: var(--tinta); font-size: var(--t-s); }
.barra:disabled { cursor: default; }
.barra__etiqueta { overflow-wrap: anywhere; color: var(--tinta-2); }
.barra__pista { display: flex; align-items: center; gap: var(--e-2); }
.barra__relleno { height: 16px; min-width: 2px; background: var(--tinta-2); border-radius: 0 4px 4px 0; }
.barra__valor { font-weight: 700; color: var(--tinta); white-space: nowrap; }
.barra:hover .barra__relleno, .barra:focus-visible .barra__relleno { background: var(--tinta); }

/* Columnas: para el tiempo (semanas) y para la escala de notas. */
.columnas { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: end;
            gap: 2px; height: 160px; margin: 0; padding: 0; list-style: none;
            border-bottom: 1px solid var(--linea-fuerte); }
.columna { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%;
           padding: 0; border: 0; background: none; cursor: pointer; gap: var(--e-1); color: var(--tinta); }
.columna:disabled { cursor: default; }
.columna__valor { font-size: var(--t-s); font-weight: 700; }
.columna__relleno { width: min(24px, 70%); min-height: 2px; background: var(--tinta-2); border-radius: 4px 4px 0 0; }
.columna:hover .columna__relleno, .columna:focus-visible .columna__relleno { background: var(--tinta); }
.ejes { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px;
        font-size: var(--t-s); color: var(--tinta-2); text-align: center; }

/* La tabla, para quien no lee la gráfica o la quiere copiar. */
.datos summary { cursor: pointer; font-size: var(--t-s); color: var(--tinta-2); width: max-content;
                 min-height: 32px; display: flex; align-items: center; }
.datos table { border-collapse: collapse; font-size: var(--t-s); margin-top: var(--e-2); }
.datos th, .datos td { text-align: left; padding: var(--e-1) var(--e-4) var(--e-1) 0; border-bottom: 1px solid var(--linea); }
.datos td:last-child, .datos th:last-child { text-align: right; font-variant-numeric: tabular-nums; }

/* Al pasar el dedo o el ratón, o con el foco: qué es esa barra. */
.globo { position: fixed; z-index: 70; pointer-events: none; padding: var(--e-2) var(--e-3);
         border-radius: var(--radio); background: var(--tinta); color: var(--sobre-tinta);
         font-size: var(--t-s); max-width: 240px; }

@media (min-width: 900px) {
  .resumen__rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--e-10); }
  .resumen__rejilla .grafica--ancha { grid-column: 1 / -1; }
}