/* ============================================================
   NexShift — Sistema de diseño
   Mobile-first (360px), modo claro/oscuro, contraste AA verificado
   (49 pares texto/fondo calculados, mínimo 5.90:1).
   Sin dependencias externas. Fuentes del sistema.
   ============================================================ */

/* ------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------ */
:root {
  color-scheme: light dark;

  /* Superficies y tinta */
  --color-fondo: #f2f5f9;
  --color-superficie: #ffffff;
  --color-superficie-alt: #f7f9fc;
  --color-borde: #d5dce6;
  --color-borde-suave: #e4e9f0;
  --color-tinta: #1c2733;
  --color-tinta-suave: #51606f;

  /* Acción */
  --color-primario: #155bb5;
  --color-primario-intenso: #114a95;
  --color-sobre-primario: #ffffff;
  --color-enlace: #155bb5;
  --color-peligro: #b3251a;
  --color-peligro-intenso: #971e14;
  --color-sobre-peligro: #ffffff;
  --color-anillo: #155bb5;

  /* Semánticos: badge (texto sobre tinte) */
  --exito-texto: #0f5c31;        --exito-bg: #d9f1e0;
  --advertencia-texto: #704d05;  --advertencia-bg: #fbedcc;
  --peligro-texto: #8f1d12;      --peligro-bg: #fbe1de;
  --info-texto: #174e8c;         --info-bg: #e0ecfa;
  --neutro-texto: #45505c;       --neutro-bg: #e7ebf0;

  /* Categóricos de dominio */
  --dia-texto: #6d4a03;          --dia-bg: #fdeecb;
  --noche-texto: #323e78;        --noche-bg: #dfe3f5;
  --enfermera-texto: #0f5a52;    --enfermera-bg: #d3edea;
  --tecnico-texto: #4a3a8c;      --tecnico-bg: #e6e0f6;
  --auxiliar-texto: #6b4e12;     --auxiliar-bg: #f3e8d4;

  /* Banners */
  --alerta-error-bg: #fceceb;
  --alerta-adv-bg: #fdf3d9;
  --alerta-exito-bg: #e2f5e8;
  --alerta-info-bg: #e8f1fb;

  /* Espaciado, radios, sombras */
  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-5: 1.5rem;
  --esp-6: 2rem;
  --esp-7: 3rem;
  --radio-s: 6px;
  --radio-m: 10px;
  --radio-pastilla: 999px;
  --sombra-1: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.10);
  --sombra-2: 0 4px 12px rgba(16, 24, 40, 0.12);

  /* Tacto y tipografía */
  --tacto: 2.75rem; /* 44px */
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fuente-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

  --flecha-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2351606f' stroke-width='2' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-fondo: #0f1419;
    --color-superficie: #171e26;
    --color-superficie-alt: #1e2731;
    --color-borde: #303b48;
    --color-borde-suave: #26303c;
    --color-tinta: #e6ebf1;
    --color-tinta-suave: #a3b0bf;

    --color-primario: #7db1f0;
    --color-primario-intenso: #93c0f5;
    --color-sobre-primario: #0d1520;
    --color-enlace: #8ab8f2;
    --color-peligro: #f0928a;
    --color-peligro-intenso: #f4a89f;
    --color-sobre-peligro: #1c0705;
    --color-anillo: #8ab8f2;

    --exito-texto: #86d7a4;        --exito-bg: #12301e;
    --advertencia-texto: #e5b567;  --advertencia-bg: #38290a;
    --peligro-texto: #f2988d;      --peligro-bg: #3a1512;
    --info-texto: #8ab8f2;         --info-bg: #14273f;
    --neutro-texto: #aeb9c6;       --neutro-bg: #242e39;

    --dia-texto: #e8c26a;          --dia-bg: #3a2c07;
    --noche-texto: #aab4ee;        --noche-bg: #222948;
    --enfermera-texto: #79d0c4;    --enfermera-bg: #0e302c;
    --tecnico-texto: #b6a5ee;      --tecnico-bg: #292045;
    --auxiliar-texto: #d8b464;     --auxiliar-bg: #33270e;

    --alerta-error-bg: #301210;
    --alerta-adv-bg: #2e2208;
    --alerta-exito-bg: #0f2819;
    --alerta-info-bg: #122234;

    --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --sombra-2: 0 4px 12px rgba(0, 0, 0, 0.5);

    --flecha-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23a3b0bf' stroke-width='2' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  }
}

/* ------------------------------------------------------------
   2. Reset mínimo
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

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

body {
  font-family: var(--fuente);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--color-tinta);
  background: var(--color-fondo);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

img, svg { max-width: 100%; display: block; }

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

/* Foco visible uniforme */
:focus-visible {
  outline: 2px solid var(--color-anillo);
  outline-offset: 2px;
  border-radius: var(--radio-s);
}

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

/* ------------------------------------------------------------
   3. Tipografía y enlaces
   ------------------------------------------------------------ */
h1 { font-size: 1.5rem; line-height: 1.25; font-weight: 700; margin-block: var(--esp-4) var(--esp-4); letter-spacing: -0.01em; }
h2 { font-size: 1.15rem; line-height: 1.3; font-weight: 700; margin-block: var(--esp-5) var(--esp-3); }
h3 { font-size: 1rem;   line-height: 1.3; font-weight: 700; margin-block: var(--esp-4) var(--esp-2); }

@media (min-width: 768px) {
  h1 { font-size: 1.85rem; }
  h2 { font-size: 1.3rem; }
}

p { margin-block: var(--esp-2); }

a { color: var(--color-enlace); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--color-primario-intenso); }

.texto-suave { color: var(--color-tinta-suave); }

.visualmente-oculto {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------
   4. Layout: shell, encabezado, nav, pie
   ------------------------------------------------------------ */
.contenedor {
  width: min(100% - 2rem, 64rem);
  margin-inline: auto;
}

.contenido-pagina {
  flex: 1;
  padding-block: var(--esp-4) var(--esp-7);
}

.salto-contenido {
  position: absolute;
  left: var(--esp-3);
  top: -100px;
  z-index: 100;
  background: var(--color-superficie);
  color: var(--color-enlace);
  padding: var(--esp-2) var(--esp-4);
  border-radius: var(--radio-s);
  box-shadow: var(--sombra-2);
}
.salto-contenido:focus-visible { top: var(--esp-2); }

.encabezado-app {
  background: var(--color-superficie);
  border-bottom: 1px solid var(--color-borde);
}

.barra-marca {
  display: flex;
  align-items: center;
  min-height: 3.25rem;
}

.marca {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-tinta);
  text-decoration: none;
  padding-block: var(--esp-2);
}
.marca:hover { color: var(--color-tinta); }
.marca-acento { color: var(--color-enlace); }

.nav-principal {
  border-top: 1px solid var(--color-borde-suave);
}

.nav-lista {
  display: flex;
  align-items: center;
  gap: var(--esp-1);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-block: var(--esp-1);
}

.nav-enlace {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: var(--tacto);
  padding: var(--esp-1) var(--esp-3);
  border-radius: var(--radio-s);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-tinta-suave);
  text-decoration: none;
  white-space: nowrap;
}
.nav-enlace:hover {
  color: var(--color-tinta);
  background: var(--color-superficie-alt);
}
.nav-enlace[aria-current="page"] {
  color: var(--color-enlace);
  background: var(--info-bg);
}

.nav-separador {
  flex: 0 0 auto;
  width: 1px;
  height: 1.5rem;
  background: var(--color-borde);
  margin-inline: var(--esp-2);
}

.pie-app {
  border-top: 1px solid var(--color-borde-suave);
  padding-block: var(--esp-4);
  font-size: 0.8rem;
  color: var(--color-tinta-suave);
}

/* ------------------------------------------------------------
   5. Tarjetas y bloques
   ------------------------------------------------------------ */
.tarjeta {
  background: var(--color-superficie);
  border: 1px solid var(--color-borde-suave);
  border-radius: var(--radio-m);
  box-shadow: var(--sombra-1);
  padding: var(--esp-4);
  margin-block: var(--esp-4);
}

@media (min-width: 768px) {
  .tarjeta { padding: var(--esp-5); }
}

.tarjeta > h2:first-child,
.tarjeta > h3:first-child { margin-top: 0; }

/* Lista de pares etiqueta: valor (metadatos de una entidad) */
.lista-datos { margin-block: var(--esp-3); }
.lista-datos p {
  margin: 0;
  padding-block: var(--esp-2);
  border-bottom: 1px solid var(--color-borde-suave);
}
.lista-datos p:last-child { border-bottom: 0; }
.dato-etiqueta {
  color: var(--color-tinta-suave);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-right: var(--esp-2);
}

/* Estado vacío para listados sin filas ({% else %} de los for) */
.estado-vacio {
  border: 1px dashed var(--color-borde);
  border-radius: var(--radio-m);
  background: var(--color-superficie-alt);
  color: var(--color-tinta-suave);
  text-align: center;
  padding: var(--esp-6) var(--esp-4);
  margin-block: var(--esp-4);
}

/* ------------------------------------------------------------
   6. Formularios
   ------------------------------------------------------------ */
form label {
  display: block;
  margin-block: 0 var(--esp-4);
  font-weight: 600;
  font-size: 0.9rem;
}

input:where([type="text"], [type="password"], [type="date"], [type="number"], [type="email"], [type="search"], [type="tel"]),
select,
textarea {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: var(--tacto);
  margin-top: var(--esp-1);
  padding: var(--esp-2) var(--esp-3);
  font-weight: 400;
  background: var(--color-superficie);
  color: var(--color-tinta);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-s);
}

input::placeholder, textarea::placeholder { color: var(--color-tinta-suave); opacity: 1; }

select {
  appearance: none;
  background-image: var(--flecha-select);
  background-repeat: no-repeat;
  background-position: right var(--esp-3) center;
  padding-right: var(--esp-6);
}

textarea { min-height: 6rem; resize: vertical; }

input[type="checkbox"], input[type="radio"] {
  width: 1.375rem;
  height: 1.375rem;
  accent-color: var(--color-primario);
  margin: 0;
}

/* Checkbox con etiqueta a la derecha: fila táctil >= 44px */
.campo-check,
form label:has(> input[type="checkbox"]) {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  min-height: var(--tacto);
  font-weight: 500;
  cursor: pointer;
  margin-block: 0 var(--esp-2);
}

fieldset {
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-m);
  padding: var(--esp-3) var(--esp-4) var(--esp-4);
  margin-block: var(--esp-4);
  min-width: 0;
}

legend {
  font-weight: 700;
  font-size: 0.9rem;
  padding-inline: var(--esp-2);
}

.grupo-checks { display: flex; flex-direction: column; gap: 0; }

/* Subida de archivo */
input[type="file"] {
  display: block;
  width: 100%;
  margin-top: var(--esp-1);
  padding: var(--esp-2);
  border: 1px dashed var(--color-borde);
  border-radius: var(--radio-s);
  background: var(--color-superficie-alt);
}
input[type="file"]::file-selector-button {
  min-height: 2.25rem;
  margin-right: var(--esp-3);
  padding: var(--esp-1) var(--esp-3);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-s);
  background: var(--color-superficie);
  color: var(--color-tinta);
  font-weight: 600;
  cursor: pointer;
}

/* Marcador visual de campo obligatorio (el asterisco lleva aria-hidden) */
.obligatorio { color: var(--color-peligro); font-weight: 700; }

/* Form dentro de celda / item sin romper el flujo (reemplaza style="display:inline") */
.form-en-linea { display: inline; }

/* Creación rápida: input + botón en una línea, se apilan al envolver */
.form-rapido {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  align-items: stretch;
  margin-block: var(--esp-4);
}
.form-rapido input { flex: 1 1 12rem; margin-top: 0; }
.form-rapido button { flex: 0 0 auto; }

/* Barra de filtros GET (turnos): campos en fila, apilados en angosto */
.barra-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
  align-items: flex-end;
  background: var(--color-superficie);
  border: 1px solid var(--color-borde-suave);
  border-radius: var(--radio-m);
  padding: var(--esp-4);
  margin-block: var(--esp-4);
}
.barra-filtros label { flex: 1 1 9rem; margin: 0; }
.barra-filtros button { flex: 0 0 auto; }

/* ------------------------------------------------------------
   7. Botones
   ------------------------------------------------------------ */
button,
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-height: var(--tacto);
  padding: var(--esp-2) var(--esp-4);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-s);
  background: var(--color-superficie);
  color: var(--color-tinta);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

button:hover, .boton:hover {
  background: var(--color-superficie-alt);
  color: var(--color-tinta);
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--color-superficie);
}

.boton-primario {
  background: var(--color-primario);
  border-color: var(--color-primario);
  color: var(--color-sobre-primario);
}
.boton-primario:hover {
  background: var(--color-primario-intenso);
  border-color: var(--color-primario-intenso);
  color: var(--color-sobre-primario);
}

.boton-secundario {
  background: var(--color-superficie);
  border-color: var(--color-borde);
  color: var(--color-tinta);
}

.boton-peligro {
  background: var(--color-peligro);
  border-color: var(--color-peligro);
  color: var(--color-sobre-peligro);
}
.boton-peligro:hover {
  background: var(--color-peligro-intenso);
  border-color: var(--color-peligro-intenso);
  color: var(--color-sobre-peligro);
}

/* Variante destructiva de baja intensidad (acciones por fila) */
.boton-peligro-sutil {
  background: var(--peligro-bg);
  border-color: var(--peligro-bg);
  color: var(--peligro-texto);
}
.boton-peligro-sutil:hover {
  background: var(--color-peligro);
  border-color: var(--color-peligro);
  color: var(--color-sobre-peligro);
}

.boton-chico {
  min-height: 2.25rem;
  padding: var(--esp-1) var(--esp-3);
  font-size: 0.85rem;
}

.boton-bloque { width: 100%; }

/* Grupo de botones: envuelve y separa; los forms internos no rompen la fila */
.botonera {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  align-items: center;
  margin-block: var(--esp-3);
}
.botonera form:not(.form-en-linea) { display: contents; }

/* Barra de acciones al inicio de la página (CTA) */
.acciones-pagina {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
  margin-block: var(--esp-4);
}

/* Enlace de retorno */
.enlace-volver {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  min-height: var(--tacto);
  font-weight: 600;
  text-decoration: none;
}
.enlace-volver::before { content: "\2190"; }
.enlace-volver:hover { text-decoration: underline; }

/* ------------------------------------------------------------
   8. Banners y avisos
   ------------------------------------------------------------ */
p.error,
.alerta {
  display: block;
  margin-block: var(--esp-4);
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--radio-s);
  border-left: 4px solid currentColor;
  font-weight: 500;
}

p.error,
.alerta-error {
  color: var(--peligro-texto);
  background: var(--alerta-error-bg);
}
p.error::before,
.alerta-error::before { content: "\26A0\FE0E  "; }

.alerta-advertencia {
  color: var(--advertencia-texto);
  background: var(--alerta-adv-bg);
}
.alerta-advertencia::before { content: "\26A0\FE0E  "; }

.alerta-exito {
  color: var(--exito-texto);
  background: var(--alerta-exito-bg);
}
.alerta-exito::before { content: "\2713  "; }

.alerta-info {
  color: var(--info-texto);
  background: var(--alerta-info-bg);
}
.alerta-info::before { content: "\2139\FE0E  "; }

/* Aviso de consecuencia destructiva (antes de confirmar) */
.aviso-destructivo {
  margin-block: var(--esp-4);
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--radio-s);
  border: 1px solid var(--peligro-texto);
  border-left-width: 4px;
  color: var(--peligro-texto);
  background: var(--alerta-error-bg);
}
.aviso-destructivo::before { content: "\26A0\FE0E  "; }

/* Nota informativa neutra (p. ej. "RUT no editable") */
.nota {
  color: var(--color-tinta-suave);
  font-size: 0.9rem;
  background: var(--color-superficie-alt);
  border-radius: var(--radio-s);
  padding: var(--esp-2) var(--esp-3);
  margin-block: var(--esp-3);
}

/* ------------------------------------------------------------
   9. Badges de estado
   Cada variante lleva un glifo ::before ademas del color
   (distincion no cromatica para daltonismo).
   ------------------------------------------------------------ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.1rem 0.6rem;
  border-radius: var(--radio-pastilla);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  background: var(--neutro-bg);
  color: var(--neutro-texto);
}

.badge-exito       { background: var(--exito-bg); color: var(--exito-texto); }
.badge-exito::before { content: "\2713"; }

.badge-atencion    { background: var(--advertencia-bg); color: var(--advertencia-texto); }
.badge-atencion::before { content: "\25CF"; font-size: 0.6em; }

.badge-peligro     { background: var(--peligro-bg); color: var(--peligro-texto); }
.badge-peligro::before { content: "!"; }

.badge-info        { background: var(--info-bg); color: var(--info-texto); }
.badge-info::before { content: "\25CB"; font-size: 0.75em; }

.badge-neutro      { background: var(--neutro-bg); color: var(--neutro-texto); }
.badge-neutro::before { content: "\2013"; }

/* Par día / noche */
.badge-dia         { background: var(--dia-bg); color: var(--dia-texto); }
.badge-dia::before { content: "\2600\FE0E"; }

.badge-noche       { background: var(--noche-bg); color: var(--noche-texto); }
.badge-noche::before { content: "\263D\FE0E"; }

/* Estamentos: color + forma distinta cada uno */
.badge-enfermera   { background: var(--enfermera-bg); color: var(--enfermera-texto); }
.badge-enfermera::before { content: "\25CF"; font-size: 0.7em; }

.badge-tecnico     { background: var(--tecnico-bg); color: var(--tecnico-texto); }
.badge-tecnico::before { content: "\25B2"; font-size: 0.7em; }

.badge-auxiliar    { background: var(--auxiliar-bg); color: var(--auxiliar-texto); }
.badge-auxiliar::before { content: "\25A0"; font-size: 0.7em; }

/* Origen del turno */
.badge-fijo        { background: var(--neutro-bg); color: var(--neutro-texto); }
.badge-fijo::before { content: "\25A1"; font-size: 0.75em; }

.badge-cobertura   { background: var(--info-bg); color: var(--info-texto); }
.badge-cobertura::before { content: "\2605"; font-size: 0.8em; }

/* Indicador de estado en vivo (p con id="estado-solicitud", reescrito por JS).
   El badge ES el propio elemento: no meter hijos dentro. */
.estado-vivo {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-2) var(--esp-4);
  border-radius: var(--radio-pastilla);
  background: var(--color-superficie-alt);
  border: 1px solid var(--color-borde);
  font-weight: 700;
  margin-block: var(--esp-3);
}
.estado-vivo::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--color-primario);
  animation: pulso-vivo 2s ease-in-out infinite;
}

@keyframes pulso-vivo {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* ------------------------------------------------------------
   10. Tablas: datos en escritorio, tarjetas apiladas en móvil
   ------------------------------------------------------------ */
.tabla-envoltura {
  margin-block: var(--esp-4);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--color-superficie);
  border: 1px solid var(--color-borde-suave);
  border-radius: var(--radio-m);
  box-shadow: var(--sombra-1);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

th {
  text-align: left;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-tinta-suave);
  background: var(--color-superficie-alt);
  padding: var(--esp-3);
  border-bottom: 1px solid var(--color-borde);
  white-space: nowrap;
}

td {
  padding: var(--esp-3);
  border-bottom: 1px solid var(--color-borde-suave);
  vertical-align: middle;
}

tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--color-superficie-alt); }

/* Primera celda enlazada al detalle: target táctil amplio */
.fila-enlace {
  display: inline-flex;
  align-items: center;
  min-height: var(--tacto);
  font-weight: 600;
}

.celda-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  align-items: center;
}
.celda-acciones form:not(.form-en-linea) { display: contents; }

/* Fila inválida del preview de importación (tr.error se conserva) */
tr.error td,
.fila-invalida td {
  background: var(--alerta-error-bg);
  color: var(--peligro-texto);
}
tr.error td:first-child,
.fila-invalida td:first-child {
  border-left: 4px solid var(--peligro-texto);
}

/* Colapso a tarjetas bajo 640px: MISMO marcado, celdas con data-label */
@media (max-width: 639px) {
  .tabla-apilable { border-collapse: separate; }
  .tabla-apilable,
  .tabla-apilable tbody,
  .tabla-apilable tr,
  .tabla-apilable td { display: block; }

  .tabla-apilable thead {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .tabla-apilable tbody tr {
    margin: var(--esp-3);
    border: 1px solid var(--color-borde-suave);
    border-radius: var(--radio-m);
    background: var(--color-superficie);
    box-shadow: var(--sombra-1);
    overflow: hidden;
  }

  .tabla-apilable td {
    border-bottom: 1px solid var(--color-borde-suave);
    padding: var(--esp-2) var(--esp-3);
  }
  .tabla-apilable td:last-child { border-bottom: 0; }

  .tabla-apilable td[data-label] {
    display: grid;
    grid-template-columns: minmax(6rem, 38%) 1fr;
    gap: var(--esp-3);
    align-items: center;
  }
  .tabla-apilable td[data-label]::before {
    content: attr(data-label);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-tinta-suave);
  }

  .tabla-apilable .celda-acciones,
  .tabla-apilable td.celda-acciones[data-label] {
    display: flex;
    background: var(--color-superficie-alt);
  }
  /* La celda de acciones no muestra la etiqueta data-label:
     los botones se explican solos y la barra ocupa todo el ancho */
  .tabla-apilable td.celda-acciones[data-label]::before { content: none; }
  .tabla-apilable .celda-acciones button,
  .tabla-apilable .celda-acciones .boton { flex: 1 1 auto; }

  .tabla-apilable tr.error,
  .tabla-apilable .fila-invalida {
    border-left: 4px solid var(--peligro-texto);
  }
  .tabla-apilable tr.error td:first-child,
  .tabla-apilable .fila-invalida td:first-child { border-left: 0; }

  /* La envoltura deja de recortar: las tarjetas fluyen */
  .tabla-envoltura:has(.tabla-apilable) {
    overflow: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
}

/* Escritorio: cabecera pegajosa (la envoltura no recorta en vertical) */
@media (min-width: 768px) {
  .tabla-envoltura { overflow-x: visible; }
  thead th { position: sticky; top: 0; z-index: 2; }
}

/* ------------------------------------------------------------
   11. Listas
   ------------------------------------------------------------ */
.lista-simple {
  list-style: none;
  padding: 0;
  margin-block: var(--esp-3);
}
.lista-simple li {
  padding: var(--esp-3) var(--esp-2);
  border-bottom: 1px solid var(--color-borde-suave);
}
.lista-simple li:last-child { border-bottom: 0; }

/* Tarjetas de candidato (solicitudes_detalle) */
.lista-candidatos {
  list-style: none;
  padding: 0;
  margin-block: var(--esp-4);
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
}

.candidato {
  background: var(--color-superficie);
  border: 1px solid var(--color-borde-suave);
  border-radius: var(--radio-m);
  box-shadow: var(--sombra-1);
  padding: var(--esp-4);
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
}

.candidato-nombre { font-weight: 700; font-size: 1.05rem; }

.candidato-metricas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
}

.candidato-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  border-top: 1px solid var(--color-borde-suave);
  padding-top: var(--esp-3);
}
.candidato-acciones form:not(.form-en-linea) { display: contents; }

@media (max-width: 479px) {
  .candidato-acciones button,
  .candidato-acciones .boton { width: 100%; }
}

/* Chips de métrica */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.1rem 0.6rem;
  border-radius: var(--radio-pastilla);
  border: 1px solid var(--color-borde);
  background: var(--color-superficie-alt);
  color: var(--color-tinta-suave);
  font-size: 0.8rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.chip-carga { border-color: var(--info-texto); color: var(--info-texto); background: var(--info-bg); }
.chip-rechazos { border-color: var(--color-borde); color: var(--color-tinta-suave); }

/* Timeline de trazabilidad */
.timeline {
  list-style: none;
  padding: 0;
  margin-block: var(--esp-4);
}

.evento {
  position: relative;
  padding: var(--esp-2) 0 var(--esp-2) var(--esp-5);
  border-left: 2px solid var(--color-borde);
  margin-left: var(--esp-2);
  font-size: 0.9rem;
}
.evento:last-child { border-left-color: transparent; }

.evento::before {
  content: "";
  position: absolute;
  left: -0.45rem;
  top: 0.9rem;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: var(--neutro-texto);
  border: 2px solid var(--color-superficie);
}

/* Punto de color por tipo de evento: class="evento evento-{{ evento.tipo }}" */
.evento-solicitud_creada::before   { background: var(--info-texto); }
.evento-priorizado_por::before     { background: var(--tecnico-texto); }
.evento-tanda_escalada::before     { background: var(--advertencia-texto); }
.evento-sin_cobertura::before      { background: var(--peligro-texto); }
.evento-asignacion_anulada::before { background: var(--peligro-texto); }

.evento-ts {
  font-family: var(--fuente-mono);
  font-size: 0.78rem;
  color: var(--color-tinta-suave);
}
.evento-tipo { font-weight: 700; }
.evento-detalle { color: var(--color-tinta-suave); }

/* ------------------------------------------------------------
   12. Panel de progreso de tanda
   ------------------------------------------------------------ */
.panel-tanda {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: var(--esp-3);
  background: var(--color-superficie);
  border: 1px solid var(--color-borde-suave);
  border-left: 4px solid var(--color-primario);
  border-radius: var(--radio-m);
  box-shadow: var(--sombra-1);
  padding: var(--esp-4);
  margin-block: var(--esp-4);
}

.tanda-dato { display: flex; flex-direction: column; gap: var(--esp-1); }

.tanda-etiqueta {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-tinta-suave);
}

.tanda-valor {
  font-size: 1.3rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.tanda-puntos { display: flex; gap: var(--esp-1); align-items: center; }
.tanda-punto {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--color-borde);
}
.tanda-punto-activa { background: var(--color-primario); }

/* ------------------------------------------------------------
   13. Importadores: stepper y resumen de validación
   ------------------------------------------------------------ */
.pasos {
  list-style: none;
  counter-reset: paso;
  display: flex;
  gap: var(--esp-4);
  padding: 0;
  margin-block: var(--esp-4);
}

.paso {
  counter-increment: paso;
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-tinta-suave);
}

.paso::before {
  content: counter(paso);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: 2px solid var(--color-borde);
  background: var(--color-superficie);
  font-variant-numeric: tabular-nums;
}

.paso-activo { color: var(--color-tinta); }
.paso-activo::before {
  border-color: var(--color-primario);
  background: var(--color-primario);
  color: var(--color-sobre-primario);
}

.paso-hecho { color: var(--exito-texto); }
.paso-hecho::before {
  content: "\2713";
  border-color: var(--exito-texto);
  background: var(--exito-bg);
  color: var(--exito-texto);
}

.resumen-conteo {
  display: flex;
  align-items: baseline;
  gap: var(--esp-2);
  flex-wrap: wrap;
  background: var(--color-superficie);
  border: 1px solid var(--color-borde-suave);
  border-left: 4px solid var(--exito-texto);
  border-radius: var(--radio-m);
  padding: var(--esp-4);
  margin-block: var(--esp-4);
}
.resumen-conteo.resumen-alerta { border-left-color: var(--peligro-texto); }

.resumen-cifra {
  font-size: 1.6rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.resumen-texto { color: var(--color-tinta-suave); }