/* Módulo de Auditoría PAMI — SICOBIO
   ═══════════════════════════════════════════════════════════════════
   DESIGN SYSTEM. 27-08-2026.

   Un solo lugar decide color, tipografía, radios, sombras y altura de
   control. Las pantallas no traen estilo propio: usan estas clases.

   NINGUNA CLASE CAMBIÓ DE NOMBRE. El refactor es estrictamente visual,
   así que las dieciséis plantillas siguen sirviendo sin tocarse, y con
   ellas los `name` de los formularios, los `id` y los onclick.

   Escala neutra: slate. Acento: blue-600. Semánticos: emerald / amber /
   rose, siempre en el par pastel + tinta de alto contraste + borde tenue.
   ═══════════════════════════════════════════════════════════════════ */

/* ---------- tipografía ----------
   Inter AUTOHOSPEDADA. No se pide a Google: las PCs del Colegio pueden
   quedarse sin salida a internet, y un <link> a fonts.googleapis.com
   bloquea el render hasta que el navegador da timeout — la pantalla en
   blanco varios segundos, en cada carga.

   Es la variable (400→700), así que un solo archivo de 48 KB cubre todos
   los pesos del sistema. Subset `latin` (U+0000-00FF): alcanza para
   castellano, incluidos acentos, ñ, ¿ y ¡.

   `font-display: swap` para que el texto se lea desde el primer frame
   con la fuente del sistema y cambie cuando la propia esté lista, en vez
   de quedarse invisible esperándola.

   Inter — Rasmus Andersson — SIL Open Font License 1.1. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/css/fuentes/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---- neutros (slate) ---- */
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;

  /* Alias en el vocabulario que ya usaban las plantillas. */
  --tinta:        var(--slate-800);   /* títulos y texto fuerte */
  --tinta-suave:  var(--slate-600);   /* texto base secundario */
  --tinta-tenue:  var(--slate-400);   /* metadatos */
  --fondo:        var(--slate-50);    /* fondo de aplicación */
  --fondo-suave:  var(--slate-50);
  --papel:        #ffffff;            /* superficie de card */
  --linea:        var(--slate-200);
  --linea-fuerte: var(--slate-300);

  /* ---- acento ---- */
  --acento:       #2563eb;            /* blue-600 */
  --acento-hover: #1d4ed8;            /* blue-700 */
  --acento-fuerte:#1e40af;            /* blue-800 */
  --acento-claro: #dbeafe;            /* blue-100 */
  --acento-bg:    #eff6ff;            /* blue-50  */
  --acento-borde: #bfdbfe;            /* blue-200 */

  /* ---- semánticos: pastel / tinta / borde ---- */
  --ok:        #047857;  --ok-bg:      #ecfdf5;  --ok-borde:      #a7f3d0;
  --aviso:     #b45309;  --aviso-bg:   #fffbeb;  --aviso-borde:   #fde68a;
  --urgente:   #c2410c;  --urgente-bg: #fff7ed;  --urgente-borde: #fed7aa;
  --vencida:   #be123c;  --vencida-bg: #fff1f2;  --vencida-borde: #fecdd3;

  /* ---- forma ---- */
  --radio:    12px;   /* cards */
  --radio-sm:  8px;   /* controles y botones */
  --radio-lg: 16px;   /* modales y cajas grandes */
  --pill:     999px;
  --alto-control: 40px;

  /* ---- elevación: difusa, nunca dura ---- */
  --sombra-1: 0 1px 3px 0 rgb(15 23 42 / .05);
  --sombra-2: 0 4px 12px -2px rgb(15 23 42 / .08), 0 2px 4px -2px rgb(15 23 42 / .04);
  --sombra-3: 0 20px 32px -8px rgb(15 23 42 / .16), 0 4px 10px -4px rgb(15 23 42 / .08);
  --sombra-barra: none;

  --anillo: 0 0 0 3px rgb(37 99 235 / .20);
  --transicion: 150ms cubic-bezier(.4, 0, .2, 1);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font: 14px/1.55 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
         Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--slate-700);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

h1, h2, h3, strong, b { color: var(--slate-800); }

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

::selection { background: var(--acento-claro); color: var(--acento-fuerte); }

:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  border-radius: var(--radio-sm);
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

/* ═══════════════ barra de navegación ═══════════════
   Slate-900, una sola fila. El módulo activo se marca con una píldora
   de fondo suave, no con un borde: es lo que hace que la navegación se
   lea como un grupo de opciones y no como una lista de solapas. */

.barra {
  display: flex; align-items: center; gap: 18px; padding: 0 20px;
  background: var(--slate-900);
  color: #fff;
  position: sticky; top: 0; z-index: 20;
}
.barra__marca { display: flex; align-items: center; gap: 9px; padding: 12px 0; }
.barra__marca::before {
  content: ""; width: 26px; height: 26px; border-radius: var(--radio-sm);
  background: var(--acento); flex: none;
}
.barra__marca strong { font-size: 14.5px; font-weight: 600; color: #fff; letter-spacing: -.1px; }

.barra__nav { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; }
.barra__nav a {
  color: var(--slate-400); text-decoration: none;
  padding: 7px 12px; border-radius: var(--radio-sm);
  font-size: 13.5px; font-weight: 500; white-space: nowrap;
  transition: color var(--transicion), background var(--transicion);
}
.barra__nav a:hover { color: var(--slate-100); background: rgb(255 255 255 / .06); }
.barra__nav a.activo { color: #fff; background: rgb(255 255 255 / .11); font-weight: 600; }

/* «Más»: lo que se abre una vez por semana. <details> nativo, sin
   dependencias y navegable con teclado. */
.mas { position: relative; }
.mas > summary {
  list-style: none; cursor: pointer; color: var(--slate-500);
  padding: 7px 12px; border-radius: var(--radio-sm);
  font-size: 13.5px; font-weight: 500; white-space: nowrap;
  transition: color var(--transicion), background var(--transicion);
}
.mas > summary::-webkit-details-marker { display: none; }
.mas > summary::after { content: " ⌄"; opacity: .6; }
.mas > summary:hover { color: var(--slate-100); background: rgb(255 255 255 / .06); }
.mas[open] > summary,
.mas--activo > summary { color: #fff; background: rgb(255 255 255 / .11); }
.mas--activo > summary { font-weight: 600; }
.mas__panel {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 30;
  min-width: 196px; padding: 6px;
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--radio); box-shadow: var(--sombra-2);
  display: flex; flex-direction: column; gap: 2px;
}
.mas__panel a {
  color: var(--slate-600); padding: 8px 10px; border-radius: var(--radio-sm);
  font-size: 13.5px; text-decoration: none; font-weight: 500;
  transition: color var(--transicion), background var(--transicion);
}
.mas__panel a:hover { color: var(--slate-800); background: var(--slate-50); }
.mas__panel a.activo { color: var(--acento); background: var(--acento-bg); font-weight: 600; }

/* Usuario y rol, a la derecha. */
.barra__usuario {
  display: flex; align-items: center; gap: 10px; margin-left: auto;
  font-size: 13px; color: var(--slate-400); white-space: nowrap;
}
.barra__usuario > span { display: flex; align-items: center; gap: 8px; }
.barra__usuario a { color: var(--slate-300); text-decoration: none; }
.barra__usuario a:hover { color: #fff; }
.barra__rol {
  font-size: 11px; font-weight: 500; letter-spacing: 0;
  background: rgb(255 255 255 / .09); color: var(--slate-300);
  padding: 2px 8px; border-radius: var(--pill);
}
.barra__rol::first-letter { text-transform: uppercase; }
.en-linea { display: inline-flex; }
.boton-barra {
  background: rgb(255 255 255 / .09); border: 1px solid rgb(255 255 255 / .12);
  color: var(--slate-200); padding: 6px 13px; font-size: 13px; box-shadow: none;
}
.boton-barra:hover {
  background: rgb(255 255 255 / .16); border-color: rgb(255 255 255 / .2); color: #fff;
}

/* ═══════════════ contenido y encabezados ═══════════════ */

.contenido { max-width: 1280px; margin: 0 auto; padding: 28px 24px 64px; }

.encabezado h1 {
  margin: 0 0 4px; font-size: 24px; font-weight: 600;
  letter-spacing: -.02em; color: var(--slate-800);
}
.encabezado__ayuda {
  margin: 0 0 22px; color: var(--slate-500); font-size: 14px; max-width: 72ch;
}

/* ═══════════════ cards de resumen ═══════════════
   Rótulo arriba en sentence case, cifra abajo. */

.fichas { display: flex; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; }
.ficha {
  display: flex; flex-direction: column;
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 14px 18px; min-width: 132px;
  box-shadow: var(--sombra-1);
}
.ficha .ficha__t { order: -1; }
.ficha__n {
  display: block; font-size: 24px; font-weight: 600; line-height: 1.15;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--slate-800);
}
.ficha__t {
  display: block; font-size: 12.5px; color: var(--slate-500);
  margin-bottom: 4px; font-weight: 500;
}
.ficha__t::first-letter { text-transform: uppercase; }
.ficha--alerta { border-color: var(--vencida-borde); background: var(--vencida-bg); }
.ficha--alerta .ficha__n { color: var(--vencida); }
.ficha--alerta .ficha__t { color: var(--vencida); }

/* ═══════════════ formularios y controles ═══════════════
   Altura homogénea de 40px para input, select y botón, así una fila de
   filtros queda alineada sin ajustes por control. */

.filtros {
  display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap;
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 16px; margin-bottom: 18px;
  box-shadow: var(--sombra-1);
}
.filtros label { display: flex; flex-direction: column; gap: 6px; }
.filtros label > span,
.campo > span {
  font-size: 13px; color: var(--slate-600); font-weight: 500; letter-spacing: 0;
}
.filtros label > span::first-letter,
.campo > span::first-letter { text-transform: uppercase; }
.filtros__buscar input { min-width: 240px; }
.filtros__acciones { display: flex; gap: 8px; margin-left: auto; }

/* Un solo bloque define TODOS los controles de entrada del sistema. */
.filtros select, .filtros input,
.campo textarea, .campo input[type=text], .campo select,
.campo input[type=password], .campo input[type=number],
.campo input[type=date], .campo input[type=file],
.form-linea--compacta input,
.cuadro-dia__cab select,
.tabla--formulario input, .tabla--formulario select {
  font: inherit; font-size: 14px; color: var(--slate-700);
  background: #fff; border: 1px solid var(--slate-300);
  border-radius: var(--radio-sm); padding: 0 12px;
  height: var(--alto-control); min-width: 200px;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.campo textarea, .campo input[type=text], .campo select,
.campo input[type=password], .campo input[type=number],
.campo input[type=date], .campo input[type=file] { width: 100%; min-width: 0; }

.campo textarea {
  padding: 10px 12px; height: auto; min-height: 84px;
  resize: vertical; line-height: 1.55;
}
.campo input[type=file] { padding: 8px 12px; }

.filtros select:focus, .filtros input:focus,
.campo textarea:focus, .campo input:focus, .campo select:focus,
.form-linea--compacta input:focus,
.cuadro-dia__cab select:focus,
.tabla--formulario input:focus, .tabla--formulario select:focus {
  outline: none; border-color: var(--acento); box-shadow: var(--anillo);
}
.filtros input::placeholder, .campo input::placeholder, .campo textarea::placeholder {
  color: var(--slate-400);
}

.campo { display: block; margin-bottom: 16px; }
.campo em {
  display: block; font-size: 12.5px; color: var(--slate-400);
  font-style: normal; margin-top: 5px;
}

.grilla { display: flex; gap: 16px; flex-wrap: wrap; }
.grilla .campo { flex: 1 1 220px; }

/* ═══════════════ botones ═══════════════ */

button, .boton {
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer;
  height: var(--alto-control); padding: 0 16px; border-radius: var(--radio-sm);
  border: 1px solid var(--acento); background: var(--acento); color: #fff;
  text-decoration: none; white-space: nowrap; box-shadow: var(--sombra-1);
  transition: background var(--transicion), border-color var(--transicion),
              color var(--transicion), box-shadow var(--transicion);
}
button:hover, .boton:hover { background: var(--acento-hover); border-color: var(--acento-hover); }
button:active, .boton:active { box-shadow: none; }
button:disabled { opacity: .5; cursor: not-allowed; }

/* Secundario / outline. */
.boton-plano {
  height: var(--alto-control); padding: 0 15px; border-radius: var(--radio-sm);
  display: inline-flex; align-items: center; font-weight: 500; font-size: 13.5px;
  border: 1px solid var(--slate-300); background: #fff;
  color: var(--slate-700); text-decoration: none; box-shadow: var(--sombra-1);
  transition: background var(--transicion), border-color var(--transicion), color var(--transicion);
}
.boton-plano:hover { background: var(--slate-50); border-color: var(--slate-400); color: var(--slate-800); }

/* Peligro: borde y tinta, el relleno queda para el hover. */
.boton-peligro {
  background: #fff; color: var(--vencida); border-color: var(--vencida-borde); box-shadow: none;
}
.boton-peligro:hover { background: var(--vencida); color: #fff; border-color: var(--vencida); }

/* Acción por fila: COMPACTA, no tímida.
   Lo que hay que evitar en una tabla de 500 filas es el bloque macizo
   OSCURO repetido, no el énfasis: `Dictaminar` es lo único que el
   auditor hace en la bandeja y tiene que verse como el destino de la
   fila. Se achica a 32px y se le saca la sombra, pero conserva el azul
   del primario. */
.tabla .boton, .tabla button, .col-accion .boton, .col-accion button {
  height: 32px; padding: 0 14px; font-size: 13px; font-weight: 500; box-shadow: none;
}

/* Las acciones de apoyo dentro de una fila sí van en outline: conviven
   con la primaria y no pueden pesar lo mismo. */
.tabla .boton-plano, .tabla .boton-peligro, .tabla .boton-mini,
.col-accion .boton-plano, .col-accion .boton-peligro {
  height: 32px; padding: 0 12px; font-size: 13px; box-shadow: none;
}
.boton-mini {
  height: 30px; padding: 0 11px; font-size: 12.5px; font-weight: 500;
  background: #fff; color: var(--slate-600); border-color: var(--slate-300); box-shadow: none;
}
.boton-mini:hover { background: var(--vencida-bg); color: var(--vencida); border-color: var(--vencida-borde); }

.acciones { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ═══════════════ tablas ═══════════════ */

.tabla {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra-1);
}
.tabla thead th {
  text-align: left; font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em; color: var(--slate-500);
  padding: 10px 16px; background: var(--slate-50);
  border-bottom: 1px solid var(--linea);
  white-space: nowrap; position: sticky; top: 0;
}
.tabla thead th a { color: inherit; text-decoration: none; }
.tabla thead th a:hover { color: var(--acento); }
.tabla td {
  padding: 14px 16px; border-bottom: 1px solid var(--slate-100);
  vertical-align: middle; color: var(--slate-700);
}
.tabla tbody tr:last-child td { border-bottom: none; }
.tabla tbody tr { transition: background var(--transicion); }
.tabla tbody tr:hover { background: rgb(248 250 252 / .75); }
.tabla tfoot td {
  padding: 12px 16px; background: var(--slate-50);
  border-top: 1px solid var(--linea); font-weight: 500; color: var(--slate-700);
}
.num { text-align: right; font-variant-numeric: tabular-nums; }
.col-reloj { width: 150px; }
.col-accion { width: 1%; white-space: nowrap; text-align: right; }

/* Franja de estado: el plazo se lee antes de leer. */
.tabla td:first-child { border-left: 3px solid transparent; }
.fila--ok      td:first-child { border-left-color: var(--ok); }
.fila--aviso   td:first-child { border-left-color: var(--aviso); }
.fila--urgente td:first-child { border-left-color: var(--urgente); }
.fila--vencida td:first-child { border-left-color: var(--vencida); }
.fila--vencida { background: rgb(255 241 242 / .45); }

/* ═══════════════ badges y chips ═══════════════
   Pastel + tinta de alto contraste + borde tenue. Sentence case. */

.pastilla {
  display: inline-block; font-size: 12px; font-weight: 500;
  padding: 2px 9px; border-radius: var(--pill);
  border: 1px solid transparent; white-space: nowrap; letter-spacing: 0;
}
.pastilla::first-letter { text-transform: uppercase; }
.pastilla--ok      { background: var(--ok-bg);      color: var(--ok);      border-color: var(--ok-borde); }
.pastilla--aviso   { background: var(--aviso-bg);   color: var(--aviso);   border-color: var(--aviso-borde); }
.pastilla--urgente { background: var(--urgente-bg); color: var(--urgente); border-color: var(--urgente-borde); }
.pastilla--vencida { background: var(--vencida-bg); color: var(--vencida); border-color: var(--vencida-borde); }
.pastilla__detalle {
  display: block; font-size: 12px; color: var(--slate-400); margin-top: 4px;
}

.marca {
  display: inline-block; font-size: 11px; font-weight: 500;
  padding: 1px 8px; border-radius: var(--pill); margin-left: 5px; letter-spacing: 0;
  background: var(--acento-bg); color: var(--acento); border: 1px solid var(--acento-borde);
}
.marca--revision  { background: var(--aviso-bg); color: var(--aviso); border-color: var(--aviso-borde); }
.marca--agregada  { background: var(--acento-bg); color: var(--acento); border-color: var(--acento-borde); }

.orden {
  font-weight: 500; color: var(--acento); text-decoration: none; font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.orden:hover { color: var(--acento-hover); text-decoration: underline; }

.menor { display: block; font-size: 12.5px; color: var(--slate-400); margin-top: 2px; }
.menor-i { font-size: 12.5px; color: var(--slate-500); }
.mono {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: .95em; letter-spacing: -.01em;
}
.conteo { white-space: nowrap; color: var(--slate-500); font-variant-numeric: tabular-nums; }
.rechazadas { color: var(--vencida); font-weight: 600; }
.antecedente { color: var(--acento); }
.nowrap { white-space: nowrap; }
.fila-anulada { opacity: .55; text-decoration: line-through; }

.vacio {
  background: var(--papel); border: 1px dashed var(--slate-300);
  border-radius: var(--radio); padding: 48px 24px; text-align: center;
  color: var(--slate-500); font-size: 14px;
}
.vacio--chico { padding: 24px; font-size: 13.5px; margin: 14px 0; }

.paginacion {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  margin-top: 20px; flex-wrap: wrap;
}
.paginacion__estado { font-size: 13.5px; color: var(--slate-500); text-align: center; }
.paginacion__estado .menor { margin-top: 2px; }

.pie {
  max-width: 1280px; margin: 0 auto; padding: 20px 24px 36px;
  font-size: 12.5px; color: var(--slate-400);
}

/* ═══════════════ alertas y banners ═══════════════ */

.aviso {
  padding: 13px 16px; border-radius: var(--radio-sm);
  margin-bottom: 18px; font-size: 13.5px; border: 1px solid;
  box-shadow: var(--sombra-1);
}
.aviso--ok    { background: var(--ok-bg);      color: var(--ok);      border-color: var(--ok-borde); }
.aviso--error { background: var(--vencida-bg); color: var(--vencida); border-color: var(--vencida-borde); }
.aviso-inline { color: var(--urgente); }
.aviso--flotante {
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%);
  max-width: 440px; z-index: 40; box-shadow: var(--sombra-3);
}

/* ═══════════════ pantalla de orden / dictamen ═══════════════ */

.miga { margin: 0 0 14px; font-size: 13.5px; }
.miga a { color: var(--slate-500); text-decoration: none; }
.miga a:hover { color: var(--acento); }

.orden-cab {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 20px; flex-wrap: wrap; margin-bottom: 18px;
}
.orden-cab h1 { margin: 0 0 7px; font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.orden-cab__linea { margin: 0 0 4px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.orden-cab__estado { text-align: right; }
.orden-cab__estado .menor { text-align: right; }

.orden-datos {
  display: flex; gap: 1px; background: var(--linea);
  border: 1px solid var(--linea); border-radius: var(--radio);
  overflow: hidden; margin-bottom: 22px; flex-wrap: wrap; box-shadow: var(--sombra-1);
}
.orden-datos > div { background: var(--papel); padding: 14px 18px; flex: 1 1 150px; }
.orden-datos span {
  display: block; font-size: 12.5px; color: var(--slate-500);
  margin-bottom: 4px; font-weight: 500; letter-spacing: 0;
}
.orden-datos span::first-letter { text-transform: uppercase; }
.orden-datos strong { font-size: 15px; font-weight: 600; color: var(--slate-800); }

.columnas { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.col-principal { flex: 1 1 620px; min-width: 0; }
.col-lateral   { flex: 0 1 320px; min-width: 260px; }

h2 { font-size: 15.5px; font-weight: 600; margin: 0 0 14px; letter-spacing: -.01em; }
h2 .menor-i { font-weight: 400; margin-left: 7px; }

.tabla--practicas { margin-bottom: 22px; }
.tabla--practicas td { vertical-align: top; }
.fila--rechazada td:first-child { border-left-color: var(--vencida); }
.col-decision { width: 190px; }

.switch { display: flex; flex-direction: column; gap: 4px; }
.switch label {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; cursor: pointer; padding: 3px 0;
}
.switch input { margin: 0; cursor: pointer; accent-color: var(--acento); }

.panel {
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 18px; margin-bottom: 18px;
  box-shadow: var(--sombra-1);
}
.panel--ancho { padding: 22px; margin-bottom: 22px; }
.panel--ancho > h2 { font-size: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--linea); }

.lista-adjuntos { list-style: none; margin: 0; padding: 0; }
.lista-adjuntos li { padding: 10px 0; border-bottom: 1px solid var(--slate-100); }
.lista-adjuntos li:last-child { border-bottom: none; }
.lista-adjuntos a { color: var(--acento); text-decoration: none; font-size: 13.5px; font-weight: 500; }
.lista-adjuntos a:hover { text-decoration: underline; }

.hilo { list-style: none; margin: 0; padding: 0; }
.hilo__item { padding: 12px 0; border-bottom: 1px solid var(--slate-100); }
.hilo__item:last-child { border-bottom: none; }
.hilo__meta { font-size: 12.5px; color: var(--slate-500); margin-bottom: 5px; }
.hilo__texto { font-size: 13.5px; }
.hilo__item--lab .hilo__meta strong { color: var(--acento); }

.caja-dictamen {
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 20px; box-shadow: var(--sombra-1);
}

/* ═══════════════ confirmaciones ═══════════════
   Las cajas de anular se abren poniendo `hidden = false` desde un
   onclick de la plantilla. NO se toca ese mecanismo: el modal se arma
   con el selector `:not([hidden])`, así el mismo onclick de siempre
   ahora abre un diálogo centrado con backdrop en vez de empujar la
   página hacia abajo. */

.caja-anular {
  background: var(--papel); border: 1px solid var(--vencida-borde);
  border-radius: var(--radio-lg); padding: 24px;
}
.caja-anular:not([hidden]) {
  position: fixed; z-index: 50;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(480px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
  overflow-y: auto; margin: 0; box-shadow: var(--sombra-3);
}

/* El velo va en el ::after del BODY, no en un ::before del propio modal.
   Un pseudo-elemento con z-index negativo se pinta encima del background
   de su elemento cuando ese elemento crea contexto de apilamiento —y el
   modal lo crea, por su z-index—, así que el backdrop terminaba
   agrisando la caja en vez de quedar detrás. Desde el body queda en otro
   contexto y el modal, con z-index mayor, se apoya limpio encima. */
body:has(.caja-anular:not([hidden]))::after {
  content: ""; position: fixed; inset: 0; z-index: 40;
  background: rgb(15 23 42 / .40); backdrop-filter: blur(3px);
}
.caja-anular h2 { font-size: 17px; }
/* Primaria a la derecha, cancelar a la izquierda en outline. */
.caja-anular .acciones { margin-top: 18px; justify-content: flex-end; flex-direction: row-reverse; }

/* ═══════════════ login ═══════════════ */

.cuerpo-centrado {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 24px; background: var(--slate-50);
}
.caja-login {
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--radio-lg); padding: 34px; width: 100%; max-width: 392px;
  box-shadow: var(--sombra-2);
}
.caja-login__marca { margin-bottom: 26px; }
.caja-login__marca strong {
  display: block; font-size: 22px; font-weight: 600;
  color: var(--slate-800); letter-spacing: -.02em; margin-bottom: 4px;
}
.caja-login__marca span { font-size: 13.5px; color: var(--slate-500); letter-spacing: 0; }
.caja-login__pie { margin: 20px 0 0; font-size: 12.5px; color: var(--slate-400); text-align: center; }
.ancho-total { width: 100%; }

/* ═══════════════ parámetros ═══════════════ */

.pestanas { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid var(--linea); flex-wrap: wrap; }
.pestanas a {
  padding: 10px 16px; text-decoration: none; color: var(--slate-500);
  font-size: 13.5px; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--transicion), border-color var(--transicion);
}
.pestanas a:hover { color: var(--slate-800); }
.pestanas a.activa { color: var(--acento); border-bottom-color: var(--acento); font-weight: 600; }

.grilla-campos { display: flex; gap: 16px; flex-wrap: wrap; margin: 16px 0 4px; }
.grilla-campos .campo { flex: 1 1 180px; }
.campo--chico { flex: 0 0 150px; }
.campo--ancho { flex: 1 1 300px; }

.casillas { display: flex; flex-direction: column; gap: 9px; margin: 14px 0 18px; }
.casillas label { display: flex; align-items: center; gap: 9px; font-size: 13.5px; cursor: pointer; }
.casillas input { accent-color: var(--acento); }

.form-linea { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-top: 16px; }
.form-parametros { margin-top: 6px; }

.tabla--chica td, .tabla--chica th { padding: 10px 14px; font-size: 13.5px; }
.tabla--formulario td { padding: 8px; }
.tabla--formulario input, .tabla--formulario select { height: 34px; font-size: 13.5px; width: 100%; min-width: 0; }
.fila-vigente { background: rgb(236 253 245 / .5); }
.fila-vigente td:first-child { border-left-color: var(--ok); }

.regla { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.regla__texto { font-size: 13.5px; }
.regla__dim { font-size: 12.5px; color: var(--slate-400); }

.historial { margin-top: 16px; }
.historial summary { cursor: pointer; font-size: 13px; color: var(--slate-500); padding: 6px 0; }
.historial summary:hover { color: var(--acento); }

/* ═══════════════ padrón / duplicados / consumo ═══════════════ */

.dup-cab {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; flex-wrap: wrap; margin-bottom: 14px;
}
.col-radio { width: 110px; text-align: center; }
.form-secundario {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linea);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.dato--alerta strong, .dato--alerta span { color: var(--vencida); }
code {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: .9em; background: var(--slate-100); color: var(--slate-700);
  padding: 2px 6px; border-radius: 5px; border: 1px solid var(--linea);
}
.celda-form { background: var(--slate-50); padding: 18px !important; }
.casilla-peligro {
  display: flex; gap: 11px; align-items: flex-start; margin-top: 16px;
  padding: 14px 16px; border: 1px solid var(--vencida-borde); border-radius: var(--radio-sm);
  background: var(--vencida-bg); font-size: 13px; cursor: pointer; color: var(--vencida);
}
.casilla-peligro input { margin: 2px 0 0; accent-color: var(--vencida); }

/* ═══════════════ piezas sueltas ═══════════════ */

.fichas--consumo .ficha { min-width: 124px; padding: 13px 16px; }
.fichas--consumo .ficha__n { font-size: 21px; }

.form-linea--compacta { gap: 8px; margin: 0; }
.form-linea--compacta input { flex: 1; height: 34px; min-width: 0; font-size: 13.5px; }

.accesos { display: flex; gap: 10px; margin: 0 0 18px; flex-wrap: wrap; }
.caja-aparte { margin-top: 18px; }
.form-adjunto { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--linea); }
.form-adjunto .campo { margin-bottom: 10px; }
.tabla form { display: contents; }

.acciones-masivas {
  display: flex; align-items: center; flex-wrap: wrap; gap: 9px;
  margin: 0 0 14px; padding: 12px 14px;
  border: 1px solid var(--linea); border-radius: var(--radio-sm);
  background: var(--slate-50);
}
.acciones-masivas .menor-i { margin-left: auto; }

.cuadro-dia { margin: 0 0 22px; }
.cuadro-dia__cab { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.cuadro-dia__cab h2 { margin: 0; font-size: 16px; }
.cuadro-dia__cab form { margin-left: auto; }
.cuadro-dia__cab select { height: 34px; font-size: 13.5px; min-width: 190px; }

.cuadro-reglas { margin: -4px 0 6px; }
.cuadro-reglas summary {
  cursor: pointer; font-size: 13px; color: var(--slate-500);
  padding: 5px 0; user-select: none;
}
.cuadro-reglas summary:hover { color: var(--acento); }
.cuadro-reglas[open] summary { margin-bottom: 8px; }

.filtros__buscar { min-width: 240px; }

.retroactiva, .tipo-orden {
  margin: 14px 0; padding: 14px 16px;
  border: 1px solid var(--linea); border-radius: var(--radio-sm); background: var(--slate-50);
}
.retroactiva legend, .tipo-orden legend {
  padding: 0 6px; font-size: 13px; letter-spacing: 0;
  color: var(--slate-600); font-weight: 500;
}
.retroactiva .campo--chico { max-width: 200px; }
.retroactiva input[type=date]:disabled { opacity: .45; }

/* ═══════════════ responsive ═══════════════ */

@media (max-width: 1000px) {
  .col-lateral { flex: 1 1 100%; }
  .col-decision { width: auto; }
}
@media (max-width: 900px) {
  .filtros select, .filtros input, .filtros__buscar input { min-width: 0; width: 100%; }
  .filtros label { flex: 1 1 200px; }
  .filtros__acciones { margin-left: 0; width: 100%; }
  .contenido { padding: 20px 14px 48px; }
  .barra { padding: 0 14px; gap: 12px; }
  .barra__usuario > span { display: none; }
}

/* ═══════════════ cupón ═══════════════
   Sigue el modelo de OPTIMI: dos columnas, la angosta de la derecha con
   las firmas y la leyenda de conformidad. Se imprime en A4 vertical.
   ES UN DOCUMENTO, NO UNA PANTALLA: tinta neutra, sin cards, sin color
   de marca y sin sombras. El design system se detiene acá a propósito. */

.cupon { max-width: 780px; margin: 0 auto; padding: 16px 20px; font-size: 12px; color: var(--slate-800); }

.cupon__marca {
  display: flex; align-items: baseline; gap: 12px;
  padding-bottom: 6px; border-bottom: 1px solid var(--slate-800);
}
.cupon__marca span { font-style: italic; color: var(--slate-500); }
.cupon__marca strong { font-size: 16px; font-style: normal; }
.cupon__fecha { margin-left: auto; font-style: normal !important; }

.cupon__cuerpo { display: flex; gap: 18px; align-items: flex-start; margin-top: 12px; }
.cupon__izq { flex: 1; min-width: 0; }
.cupon__der { width: 210px; flex-shrink: 0; text-align: center; }

.cupon__datos { width: 100%; border-collapse: collapse; }
.cupon__datos td { padding: 2px 4px; vertical-align: top; }
.cupon__datos td:first-child { width: 92px; color: var(--slate-500); white-space: nowrap; }
.cupon__datos .fuerte { font-weight: 600; }
.cupon__sep { color: var(--slate-500); margin-left: 14px; }
.cupon__ub { float: right; font-size: 13px; }

.cupon__deter { margin: 14px 0 4px; padding-bottom: 3px; border-bottom: 1px solid var(--slate-800); }
.cupon__practicas { width: 100%; border-collapse: collapse; }
.cupon__practicas td { padding: 2px 4px; }
.cupon__cod { width: 52px; }
.cupon__nom { width: auto; }
.cupon__estado { width: 82px; font-size: 10px; letter-spacing: .4px; color: var(--slate-500); }
.cupon__practicas .num { width: 56px; text-align: right; }
.cupon__nota { font-size: 10px; color: var(--slate-500); margin-top: 12px; }

.cupon__barras svg { display: block; margin: 0 auto; max-width: 100%; height: 40px; }
.cupon__nrotit { margin: 6px 0 0; font-size: 11px; }
.cupon__nro { margin: 0; font-size: 17px; font-weight: 600; }

.cupon__campo { margin-top: 26px; }
.cupon__campo .cupon__rot {
  display: block; padding-top: 3px; font-size: 10px; color: var(--slate-500);
  border-top: 1px dotted var(--slate-800);
}
.cupon__campo--fecha { margin-top: 18px; }
.cupon__campo--fecha .cupon__rot { border-top: 0; padding-top: 1px; }
.cupon__lineafecha { display: block; letter-spacing: 1px; }

.cupon__leyenda { margin-top: 26px; font-size: 10.5px; line-height: 1.45; text-align: center; }

@media print {
  .cupon { max-width: none; padding: 0; }
  .cupon__leyenda { page-break-inside: avoid; }
}