@font-face{font-family:'Archivo';src:url('/publico/archivo.woff2') format('woff2');font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:'Martian';src:url('/publico/martianmono.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Inter';src:url('/publico/inter.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{
  --papel:#F7F6F3;--papel2:#FCFBF9;--tinta:#12151C;--carbon:#74706A;--linea:#DAD6CE;
  --conforme:#1E8E5A;--conforme-wash:#E4F0EA;--duplicado:#B3352A;--triplicado:#2E4C8A;
  /* FITO: un tostado terroso. Pertenece a la paleta de papel y tinta, y se
     distingue del verde conforme de un vistazo sin gritar. */
  --fito:#8A5A2B;--fito-wash:#F3EBE1;
  /* Vitrina (medanos-design): hex exactos, no aproximar */
  --jade:#116058;--jade-claro:#17796A;--vidrio:#08282B;--alerta:#D0442A;--agua:#EAF3F2;
  --display:'Archivo','Arial Narrow',system-ui,sans-serif;
  --texto:'Inter',system-ui,sans-serif;
  --dato:'Martian',ui-monospace,Consolas,monospace}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--papel);color:var(--tinta);font-family:var(--texto);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--conforme);outline-offset:2px}
.eyebrow{font-family:var(--display);font-weight:700;font-stretch:125%;text-transform:uppercase;
  letter-spacing:.14em;font-size:11px;color:var(--carbon)}
.dato{font-family:var(--dato);font-variant-numeric:tabular-nums}
/* ===== hoja: talón | perforación | cuerpo ===== */
.hoja{max-width:1240px;margin:0 auto;min-height:100vh;display:flex;align-items:stretch}
/* `align-self:flex-start` + `sticky` van juntos y son deliberados: sin el
   primero, el `align-items:stretch` de `.hoja` estira el talón hasta el
   fondo de la página, y como "Salir" está al final de la columna terminaba
   a cientos de píxeles hacia abajo en cualquier listado largo -- había que
   bajar hasta el final para poder cerrar sesión. Sacándolo del stretch, el
   talón mide lo que mide su contenido, y sticky lo deja acompañando el
   scroll: el menú y Salir quedan siempre a la vista. */
.talon{width:236px;flex:none;padding:26px 22px;display:flex;flex-direction:column;
  position:sticky;top:0;align-self:flex-start;max-height:100vh;overflow-y:auto}
.marca{font-family:var(--display);font-weight:700;font-stretch:125%;font-size:19px;letter-spacing:-.01em;line-height:1.05}
.marca span{display:block;color:var(--conforme);font-size:12px;letter-spacing:.22em;text-transform:uppercase;margin-top:3px}
.nav{margin-top:26px;display:flex;flex-direction:column}
.nav a{display:flex;gap:10px;align-items:baseline;padding:8px 0;color:var(--carbon);border-top:1px solid var(--linea);font-size:14px}
.nav a .n{font-family:var(--dato);font-size:11px;color:var(--carbon)}
.nav a:last-of-type{border-bottom:1px solid var(--linea)}
.nav a:hover{color:var(--tinta)}
.nav a.active{color:var(--tinta);font-weight:600}
/* Contador al borde de un ítem del menú, en rojo duplicado: avisa que hay
   algo esperando a una persona (por ejemplo, proyectos pendientes de
   revisar). Se hereda tal cual de El Pampero -- por ahora ninguna pantalla
   de este tablero la usa, queda lista para cuando haga falta. */
.nav a .cola{margin-left:auto;font-size:11px;color:var(--duplicado)}
.nav a.active .n{color:var(--conforme)}
.talon-slot{margin-top:20px;flex:1}
.estado{margin-top:20px;display:flex;align-items:center;gap:8px;font-family:var(--dato);font-size:11px;color:var(--carbon)}
.estado .dot{width:7px;height:7px;border-radius:50%;background:var(--conforme);box-shadow:0 0 0 3px var(--conforme-wash)}
.salir{margin-top:14px;align-self:flex-start;background:#F7FBFA;border:1px solid rgba(18,21,28,.16);
  border-radius:8px;color:var(--carbon);
  font-family:var(--texto);font-size:12px;padding:6px 12px;cursor:pointer}
.salir:hover{border-color:var(--tinta);color:var(--tinta)}
/* Volver al listado desde una ficha. No es `.btn`: no es una acción sobre
   el proyecto, es navegación -- se lee como el resto del menú. */
.volver{display:inline-block;margin-bottom:14px;color:var(--carbon);font-size:13px}
.volver:hover{color:var(--tinta)}
/* Enlace a un PDF. La regla general de arriba (`a{color:inherit;
   text-decoration:none}`) los dejaba idénticos al texto de al lado: nada
   decía que se podían abrir. El subrayado tenue va SIEMPRE, no sólo al
   pasar el mouse -- si aparece recién en el hover, hay que adivinar dónde
   pasar el mouse para descubrir qué es un enlace, y en un táctil no hay
   hover que valga. */
.doc{color:var(--triplicado);text-decoration:underline;text-decoration-color:rgba(46,76,138,.35);
  text-underline-offset:3px;border-radius:4px;padding:2px 4px;margin:-2px -4px;
  transition:background .12s,text-decoration-color .12s}
/* El wash del hover se deriva del azul del propio enlace y no de `--agua`
   (que es verde jade): las filas de las tablas ya usan un hover verdoso, y
   dos verdes distintos sobre la misma fila se leen como un error. */
.doc:hover{background:rgba(46,76,138,.09);text-decoration-color:var(--triplicado)}
/* La flecha avisa que se abre en otra pestaña. Va en el CSS y no en la
   plantilla para que no se pueda seleccionar ni copiar junto al nombre del
   archivo, y `aria-hidden` no haría falta: el contenido generado no llega
   igual a todos los lectores de pantalla, y el `title` del enlace ya lo
   dice con palabras. */
.doc::after{content:"\2197";font-size:.8em;margin-left:4px;color:var(--carbon)}
.doc:hover::after{color:var(--triplicado)}
/* perforación */
.perf{width:22px;flex:none;position:relative}
.perf::before{content:"";position:absolute;top:14px;bottom:14px;left:50%;transform:translateX(-50%);
  border-left:2px dashed var(--linea)}
.perf::after{content:"";position:absolute;left:50%;top:-11px;width:22px;height:22px;transform:translateX(-50%);
  border-radius:50%;background:var(--papel);box-shadow:0 0 0 1px var(--linea) inset,0 calc(100vh - 0px) 0 0 var(--papel);}
.cuerpo{flex:1;min-width:0;padding:26px 30px 40px;border-left:1px solid transparent}
/* ===== elementos compartidos (planos) ===== */
h2{font-family:var(--display);font-weight:700;font-stretch:110%;font-size:22px;letter-spacing:-.01em}
.regla{border:none;border-top:1px solid var(--linea);margin:20px 0}
/* ===== Vitrina: peso visual portado de la skill medanos-design (NeuralSport).
   Los hex son los exactos de esa skill, no aproximaciones: una versión con colores
   "parecidos" ya fue rechazada allá. ===== */
.btn{font-family:var(--display);font-weight:700;font-stretch:110%;text-transform:uppercase;letter-spacing:.06em;
  font-size:12px;padding:9px 16px;background:var(--tinta);color:var(--papel);border:none;cursor:pointer;
  display:inline-block;border-radius:8px;transition:transform .08s ease,box-shadow .12s ease,background .12s ease}
.btn:hover{background:var(--jade)}
.btn:active{transform:translateY(1px)}
/* Oro: LA acción primaria de una pantalla o panel. Nunca dos en el mismo contexto:
   si hay dos, ninguna es la principal y el color deja de significar algo. */
.btn.oro{background:linear-gradient(100deg,#FFC733 0%,#F5B301 52%,#D89805 100%);color:#12151C;
  box-shadow:0 12px 26px -6px rgba(245,179,1,.55),0 2px 6px rgba(245,179,1,.3),
    inset 0 1px 0 rgba(255,255,255,.62),inset 0 -1px 0 rgba(120,80,0,.24)}
.btn.oro:hover{background:linear-gradient(100deg,#FFD04F 0%,#FFBE14 52%,#E0A008 100%)}
.btn.oro:active{box-shadow:0 4px 10px -4px rgba(245,179,1,.5),
  inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(120,80,0,.3)}
.btn.line{background:#F7FBFA;color:var(--tinta);border:1px solid rgba(18,21,28,.16);box-shadow:none}
.btn.line:hover{background:#fff;border-color:rgba(18,21,28,.34);color:var(--tinta)}
.btn.peligro{background:var(--alerta);color:#fff;
  box-shadow:0 8px 18px -6px rgba(208,68,42,.5),inset 0 1px 0 rgba(255,255,255,.25)}
.btn.peligro:hover{background:#B03620}
.btn:focus-visible{outline:2px solid var(--jade);outline-offset:2px}
/* casilla propia: la del navegador es azul de Windows y es lo único acá que no
   pertenece a ninguna paleta */
input[type=checkbox]{appearance:none;-webkit-appearance:none;width:17px;height:17px;flex:none;
  border:1.5px solid rgba(18,21,28,.32);border-radius:4px;background:#fff;cursor:pointer;
  display:inline-grid;place-content:center;vertical-align:-4px;margin:0;transition:.12s ease}
input[type=checkbox]:hover{border-color:var(--jade-claro)}
input[type=checkbox]:checked{background:var(--jade);border-color:var(--jade);
  box-shadow:0 0 0 3px rgba(17,96,88,.14)}
input[type=checkbox]:checked::after{content:"";width:9px;height:5px;border:2px solid #fff;
  border-top:0;border-right:0;transform:rotate(-45deg) translateY(-1px)}
input[type=checkbox]:focus-visible{outline:2px solid var(--jade);outline-offset:2px}
/* chips de estado: los cuatro únicos que existen. Un estado que no encaje se mapea
   al más cercano, no se inventa un quinto color. */
.chip{display:inline-block;font-family:var(--display);font-weight:700;font-stretch:110%;
  text-transform:uppercase;letter-spacing:.07em;font-size:9.5px;padding:3px 10px;border-radius:999px;
  white-space:nowrap}
.chip.ok{background:#DCEDEA;color:#0D4A45}
.chip.atencion{background:rgba(245,179,1,.18);color:#8A6400}
.chip.mal{background:rgba(208,68,42,.12);color:#B03620}
.chip.off{background:rgba(18,21,28,.07);color:#57605C}
/* barra de acciones: vidrio esmerilado. El presupuesto de vidrio de la skill lo permite
   acá (cabecera de acciones) pero NO en las filas: texto denso con blur cansa la vista. */
.acciones{display:flex;gap:12px;align-items:center;margin:14px 0;padding:11px 14px;border-radius:12px;
  background:linear-gradient(160deg,rgba(23,121,106,.92),rgba(8,40,43,.94));
  backdrop-filter:blur(10px) saturate(150%);border:1px solid rgba(255,255,255,.18);
  box-shadow:0 14px 30px -14px rgba(8,40,43,.55)}
.acciones[hidden]{display:none}
.acciones .cuenta{font-family:var(--dato);font-size:12px;color:#C6E8E3}
.acciones .aclara{font-size:12px;color:rgba(255,255,255,.72)}
/* modificador para un aviso de dos párrafos (por ejemplo, "esto no es el
   temario oficial" en /comision): el mismo vidrio esmerilado, pero como
   bloque en vez de barra flex de botones. */
.acciones.aviso{display:block}
.acciones.aviso p{margin:0;color:#fff}
.acciones.aviso p.aclara{margin-top:4px;color:rgba(255,255,255,.72)}
.renombrar{display:flex;gap:6px;align-items:center}
.renombrar input{padding:4px 8px;font-size:12px;width:150px}
input,select{font-family:var(--texto);font-size:14px;padding:9px 11px;border:1px solid var(--linea);background:var(--papel2);color:var(--tinta)}
input::placeholder{color:#a7a29a}
label{font-size:13px;color:var(--carbon)}
table{border-collapse:collapse;width:100%;font-size:14px}
th{font-family:var(--display);font-weight:700;font-stretch:110%;text-transform:uppercase;letter-spacing:.08em;
  font-size:10.5px;color:var(--carbon);text-align:left;padding:9px 8px;border-bottom:1px solid var(--tinta)}
td{padding:9px 8px;border-bottom:1px solid var(--linea)}
tr:hover td{background:var(--papel2)}
/* fichero: la fila lleva franja de estado a la izquierda y fondo opaco.
   Opaco a propósito — el vidrio va en la cabecera de acciones, nunca detrás de
   cientos de filas de texto denso. */
tbody tr.fila td{background:var(--agua);border-bottom:3px solid var(--papel)}
tbody tr.fila:hover td{background:#F2F9F8}
tbody tr.fila td:first-child{border-left:10px solid var(--jade);border-radius:8px 0 0 8px;
  box-shadow:inset 14px 0 18px -14px rgba(17,96,88,.85)}
tbody tr.fila td:last-child{border-radius:0 8px 8px 0}
tbody tr.fila.anulada td:first-child{border-left-color:#8D9490;
  box-shadow:inset 14px 0 18px -14px rgba(141,148,144,.85)}
tbody tr.fila.anulada td{background:#F1F2F1}
.est{font-family:var(--display);font-weight:700;font-stretch:110%;text-transform:uppercase;font-size:10px;letter-spacing:.06em}
.est.rev{color:var(--duplicado)}
@media (max-width:820px){
  .hoja{flex-direction:column}
  /* En pantalla angosta el talón es una barra arriba, no una columna: hay
     que devolverle el ancho completo (el `align-self:flex-start` de arriba
     lo encogería al ancho de su contenido) y sacarle el sticky, que sobre
     una barra horizontal se comería el alto útil de la pantalla. */
  .talon{width:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:14px;border-bottom:1px solid var(--linea);
    position:static;align-self:auto;max-height:none;overflow-y:visible}
  .nav{flex-direction:row;margin:0;flex-wrap:wrap}.nav a{border:none;padding:6px 0}
  .talon-slot{display:none}.perf{display:none}
}