/* ============================================================
   Operación Control — tokens de color con modo oscuro
   (predeterminado) y claro. Cero colores fijos en componentes.
   ============================================================ */

/* ---------- paleta OSCURA (predeterminada) ---------- */
:root {
  color-scheme: dark;
  --primario: #6d78f0;
  --primario-osc: #a5b0fb;          /* texto/acentos sobre fondos suaves */
  --primario-suave: rgba(109, 120, 240, 0.16);
  --primario-ring: rgba(109, 120, 240, 0.28);

  --tinta: #e9edf9;
  --tinta-2: #c4cde4;
  --gris: #94a0c2;
  --gris-suave: #6a7699;

  --fondo: #0a0f1e;
  --superficie: #111931;
  --superficie-2: #182240;          /* paneles sutiles, th, hover */
  --vidrio: rgba(10, 15, 30, 0.78); /* barras con blur */
  --borde: #232e4f;
  --borde-fuerte: #35426b;

  --verde: #34d399;
  --verde-suave: rgba(52, 211, 153, 0.13);
  --verde-borde: rgba(52, 211, 153, 0.35);
  --rojo: #f87171;
  --rojo-suave: rgba(248, 113, 113, 0.13);
  --rojo-borde: rgba(248, 113, 113, 0.35);
  --ambar: #fbbf24;
  --ambar-suave: rgba(251, 191, 36, 0.12);
  --ambar-borde: rgba(251, 191, 36, 0.35);
  --ambar-texto-fuerte: #fde68a;
  --violeta: #c4b5fd;
  --violeta-suave: rgba(139, 92, 246, 0.16);
  --info-texto: #8ec2fd;
  --info-suave: rgba(59, 130, 246, 0.14);
  --info-borde: rgba(59, 130, 246, 0.35);

  --btn-verde: #059669;             /* botones sólidos: iguales en ambos temas */
  --btn-rojo: #dc2626;
  --glow: rgba(99, 102, 241, 0.14);

  --radio: 14px;
  --radio-sm: 10px;
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.3);
  --sombra-alta: 0 12px 32px -8px rgba(0, 0, 0, 0.55);
  --trans: 0.16s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- paleta CLARA ---------- */
[data-theme="light"] {
  color-scheme: light;
  --primario: #4f46e5;
  --primario-osc: #4338ca;
  --primario-suave: #eef2ff;
  --primario-ring: rgba(79, 70, 229, 0.16);

  --tinta: #0f172a;
  --tinta-2: #334155;
  --gris: #64748b;
  --gris-suave: #94a3b8;

  --fondo: #f6f7fb;
  --superficie: #ffffff;
  --superficie-2: #f4f6fb;
  --vidrio: rgba(255, 255, 255, 0.85);
  --borde: #e5e8f0;
  --borde-fuerte: #d3d9e8;

  --verde: #059669;
  --verde-suave: #ecfdf5;
  --verde-borde: #a7f3d0;
  --rojo: #dc2626;
  --rojo-suave: #fef2f2;
  --rojo-borde: #fecaca;
  --ambar: #d97706;
  --ambar-suave: #fffbeb;
  --ambar-borde: #fde68a;
  --ambar-texto-fuerte: #78350f;
  --violeta: #7c3aed;
  --violeta-suave: #f5f3ff;
  --info-texto: #1d4ed8;
  --info-suave: #eff6ff;
  --info-borde: #bfdbfe;

  --glow: #e7ebff;
  --sombra: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.06);
  --sombra-alta: 0 10px 30px -8px rgba(15, 23, 42, 0.16);
}

/* ---------- paleta TERRENO (cálida, para exterior con sol) ---------- */
[data-theme="terreno"] {
  color-scheme: light;
  --primario: #b45309;
  --primario-osc: #8a4408;
  --primario-suave: rgba(180, 83, 9, 0.12);
  --primario-ring: rgba(180, 83, 9, 0.22);

  --tinta: #2b2113;
  --tinta-2: #4a3b22;
  --gris: #77664a;
  --gris-suave: #a3906d;

  --fondo: #f3ead7;
  --superficie: #fbf6ea;
  --superficie-2: #efe5cd;
  --vidrio: rgba(247, 240, 224, 0.88);
  --borde: #e0d2b4;
  --borde-fuerte: #c9b78f;

  --verde: #15803d;
  --verde-suave: rgba(21, 128, 61, 0.12);
  --verde-borde: rgba(21, 128, 61, 0.35);
  --rojo: #b91c1c;
  --rojo-suave: rgba(185, 28, 28, 0.1);
  --rojo-borde: rgba(185, 28, 28, 0.3);
  --ambar: #92400e;
  --ambar-suave: rgba(146, 64, 14, 0.12);
  --ambar-borde: rgba(146, 64, 14, 0.3);
  --ambar-texto-fuerte: #713f12;
  --violeta: #6d28d9;
  --violeta-suave: rgba(109, 40, 217, 0.1);
  --info-texto: #1e40af;
  --info-suave: rgba(30, 64, 175, 0.08);
  --info-borde: rgba(30, 64, 175, 0.25);

  --glow: #eadfc2;
  --sombra: 0 1px 2px rgba(84, 63, 24, 0.08), 0 1px 3px rgba(84, 63, 24, 0.08);
  --sombra-alta: 0 10px 28px -8px rgba(84, 63, 24, 0.28);
}
[data-theme="terreno"] .btn-primario {
  background: linear-gradient(180deg, #c2600d, #b45309);
  border-color: #b45309;
  box-shadow: 0 4px 12px -3px rgba(180, 83, 9, 0.45);
}
[data-theme="terreno"] .btn-primario:hover { background: #8a4408; border-color: #8a4408; }
[data-theme="terreno"] .logo { background: linear-gradient(135deg, #d97706, #92400e); box-shadow: 0 4px 10px -2px rgba(180, 83, 9, 0.45); }

/* ---------- paleta ALTO CONTRASTE (accesibilidad) ---------- */
[data-theme="contraste"] {
  color-scheme: dark;
  --primario: #ffd60a;
  --primario-osc: #ffe14d;
  --primario-suave: rgba(255, 214, 10, 0.16);
  --primario-ring: rgba(255, 214, 10, 0.4);

  --tinta: #ffffff;
  --tinta-2: #f2f2f2;
  --gris: #d0d0d0;
  --gris-suave: #a0a0a0;

  --fondo: #000000;
  --superficie: #0d0d0d;
  --superficie-2: #1c1c1c;
  --vidrio: rgba(0, 0, 0, 0.92);
  --borde: #4d4d4d;
  --borde-fuerte: #808080;

  --verde: #4ade80;
  --verde-suave: rgba(74, 222, 128, 0.18);
  --verde-borde: rgba(74, 222, 128, 0.6);
  --rojo: #ff7070;
  --rojo-suave: rgba(255, 112, 112, 0.18);
  --rojo-borde: rgba(255, 112, 112, 0.6);
  --ambar: #ffd60a;
  --ambar-suave: rgba(255, 214, 10, 0.15);
  --ambar-borde: rgba(255, 214, 10, 0.55);
  --ambar-texto-fuerte: #ffe98a;
  --violeta: #d8b4fe;
  --violeta-suave: rgba(216, 180, 254, 0.16);
  --info-texto: #7dd3fc;
  --info-suave: rgba(125, 211, 252, 0.14);
  --info-borde: rgba(125, 211, 252, 0.55);

  --glow: transparent;
  --sombra: none;
  --sombra-alta: 0 0 0 1px #4d4d4d;
}
[data-theme="contraste"] .btn-primario {
  background: #ffd60a; border-color: #ffd60a; color: #000; box-shadow: none;
}
[data-theme="contraste"] .btn-primario:hover { background: #ffe14d; border-color: #ffe14d; }
[data-theme="contraste"] .mainnav a.activo { color: #000; box-shadow: none; }
[data-theme="contraste"] .paso.hecho .punto { color: #000; }
[data-theme="contraste"] .logo { background: #ffd60a; color: #000; box-shadow: none; }
[data-theme="contraste"] .estado, [data-theme="contraste"] .badge { border: 1px solid currentColor; }
[data-theme="contraste"] :focus-visible { outline-width: 3px; }
[data-theme="contraste"] .avatar { border-color: var(--borde-fuerte); }

/* ---------------- base ---------------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background:
    radial-gradient(1100px 420px at 80% -120px, var(--glow) 0%, transparent 60%),
    var(--fondo);
  color: var(--tinta);
  font-size: 15.5px;
  line-height: 1.5;
  transition: background 0.25s ease, color 0.25s ease;
}
a { color: var(--primario-osc); text-decoration: none; transition: color var(--trans); }
h1 { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em; margin: 1rem 0 0.6rem; }
h2 { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; margin: 1.4rem 0 0.6rem; color: var(--tinta-2); }
.muted { color: var(--gris); font-size: 0.86rem; }
.preformato { white-space: pre-line; }
.contador {
  display: inline-block; background: var(--primario-suave); color: var(--primario-osc);
  font-size: 0.75rem; font-weight: 700; border-radius: 999px; padding: 0.1rem 0.55rem;
  vertical-align: middle;
}

/* accesibilidad */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--primario); color: #fff; font-weight: 700;
  padding: 0.6rem 1rem; border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; }
.sr-solo {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap;
}
:focus-visible { outline: 2px solid var(--primario); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------------- barra superior ---------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--vidrio);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.topbar {
  background: var(--vidrio);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--borde);
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.55rem 1rem; flex-wrap: wrap; gap: 0.4rem;
}
.brand {
  display: flex; align-items: center; gap: 0.55rem;
  color: var(--tinta); font-weight: 800; font-size: 1rem; letter-spacing: -0.02em;
}
.brand em { font-style: normal; color: var(--gris); font-weight: 600; }
.logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(135deg, #6366f1, #4338ca);
  color: #fff; font-weight: 800; font-size: 0.95rem;
  box-shadow: 0 4px 10px -2px rgba(79, 70, 229, 0.45);
}
.logo-grande { width: 52px; height: 52px; border-radius: 15px; font-size: 1.6rem; }
.userbox { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.user-chip {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.8rem; font-weight: 600; color: var(--tinta-2);
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 999px; padding: 0.3rem 0.75rem;
}
.user-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 3px var(--verde-suave); }
.tema-flotante { position: fixed; top: 0.8rem; right: 0.8rem; z-index: 50; }

/* ---------------- menú de temas (popover) ---------------- */
.menu-tema { position: relative; display: inline-block; }
.menu-tema > summary { padding: 0.35rem 0.55rem; margin: 0; }
.menu-tema > summary .icono { width: 16px; height: 16px; }
.menu-panel {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 215px;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 12px; box-shadow: var(--sombra-alta);
  padding: 0.35rem; z-index: 60; animation: aparecer 0.15s ease;
}
.site-header .menu-tema { position: static; }
.site-header .menu-panel {
  position: absolute;
  top: calc(100% + 0.45rem);
  right: 0.8rem;
}
.tema-flotante .menu-tema { position: relative; }
.tema-flotante .menu-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
}
.menu-panel form { margin: 0; }
.opcion-tema {
  display: flex; align-items: center; gap: 0.55rem; width: 100%;
  padding: 0.48rem 0.6rem; border-radius: 8px;
  background: none; border: none; color: var(--tinta);
  font: inherit; font-weight: 600; font-size: 0.85rem;
  cursor: pointer; text-align: left; transition: background var(--trans);
}
.opcion-tema:hover { background: var(--superficie-2); }
.opcion-tema.actual { color: var(--primario-osc); }
.opcion-tema .icono { width: 14px; height: 14px; }
.check-tema { margin-left: auto; font-weight: 800; }
.menu-sep { height: 1px; background: var(--borde); margin: 0.3rem 0.2rem; }
.sw {
  width: 17px; height: 17px; border-radius: 6px; flex: 0 0 auto;
  border: 1px solid rgba(128, 128, 128, 0.45); position: relative; overflow: hidden;
}
.sw::after { content: ""; position: absolute; right: 0; top: 0; width: 45%; height: 100%; }
.sw-dark { background: #0a0f1e; } .sw-dark::after { background: #6d78f0; }
.sw-light { background: #f6f7fb; } .sw-light::after { background: #4f46e5; }
.sw-terreno { background: #f3ead7; } .sw-terreno::after { background: #b45309; }
.sw-contraste { background: #000; } .sw-contraste::after { background: #ffd60a; }

/* ---------------- navegación ---------------- */
.mainnav {
  background: var(--vidrio);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--borde);
  display: flex; gap: 0.2rem; align-items: center;
  overflow-x: auto; padding: 0.4rem 0.8rem;
  position: static;
  scrollbar-width: none;
}
.mainnav::-webkit-scrollbar { display: none; }
.mainnav a {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.42rem 0.85rem; border-radius: 999px; white-space: nowrap;
  font-weight: 600; font-size: 0.87rem; color: var(--gris);
  transition: all var(--trans);
}
.mainnav a:hover { color: var(--tinta); background: var(--superficie-2); }
.mainnav a.activo { background: var(--primario); color: #fff; box-shadow: 0 3px 10px -3px var(--primario-ring); }
.nav-sep { width: 1px; height: 20px; background: var(--borde); margin: 0 0.35rem; flex: 0 0 auto; }
.icono { width: 15px; height: 15px; flex: 0 0 auto; }

.site-header .topbar,
.site-header .mainnav {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.container { max-width: 1000px; margin: 0 auto; padding: 0.9rem 0.9rem 4.5rem; animation: aparecer 0.3s ease; }
@keyframes aparecer { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.page-head {
  display: flex; align-items: end; justify-content: space-between; gap: 0.8rem;
  margin: 0.6rem 0 0.4rem;
  flex-wrap: wrap;
}
.page-head h1 { margin-bottom: 0; }
.page-head p { margin: 0.15rem 0 0; }
.acciones-head { display: flex; gap: 0.45rem; flex-wrap: wrap; }

/* ---------------- tarjetas ---------------- */
.card {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1rem 1.1rem;
  margin-bottom: 0.8rem;
  box-shadow: var(--sombra);
  transition: box-shadow var(--trans), transform var(--trans), border-color var(--trans);
}
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.card-head h1 { margin: 0; }
.grid-cards { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
@media (min-width: 720px) { .grid-cards { grid-template-columns: 1fr 1fr; } }
.card-plan { display: block; color: inherit; }
.card-plan:hover { box-shadow: var(--sombra-alta); transform: translateY(-2px); border-color: var(--borde-fuerte); }
.card-plan:active { transform: scale(0.99); }
.camion { font-weight: 800; font-size: 1.02rem; letter-spacing: -0.01em; }
.patente {
  font-weight: 600; color: var(--gris); font-size: 0.82em;
  background: var(--superficie-2); border-radius: 6px; padding: 0.08rem 0.45rem; margin-left: 0.25rem;
}
.borde-programado { border-left: 4px solid #818cf8; }
.borde-en { border-left: 4px solid #f59e0b; }
.borde-salido { border-left: 4px solid #10b981; }
.borde-cerrado { border-left: 4px solid var(--gris-suave); }
.borde-reabierto { border-left: 4px solid #f43f5e; }
.borde-anulado { border-left: 4px solid var(--rojo); }
.dotacion { margin-top: 0.35rem; font-size: 0.9rem; color: var(--tinta-2); }
.dotacion.alerta, .texto-alerta { color: var(--rojo); font-weight: 600; }
.ultmod {
  color: var(--gris); font-size: 0.78rem; margin-top: 0.55rem;
  border-top: 1px dashed var(--borde); padding-top: 0.45rem;
}
.vacio { text-align: center; padding: 2.4rem 1rem; color: var(--gris); }
.volver { display: inline-block; margin: 0.5rem 0 0.2rem; font-weight: 600; font-size: 0.88rem; }
.volver:hover { color: var(--primario); }

/* ---------------- ficha del camión ---------------- */
.card-ficha { padding-bottom: 1.1rem; }
.ficha { display: grid; gap: 0.4rem; margin-top: 0.9rem; font-size: 0.93rem; }
@media (min-width: 640px) { .ficha { grid-template-columns: 1fr 1fr; } }
.etq {
  display: block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--gris-suave); margin-bottom: 0.05rem;
}
.nota {
  margin-top: 0.5rem; font-size: 0.85rem; color: var(--tinta-2);
  background: var(--superficie-2); border-left: 3px solid var(--borde-fuerte);
  border-radius: 0 8px 8px 0; padding: 0.4rem 0.7rem;
}

/* ---------------- stepper de etapas ---------------- */
.stepper { display: flex; margin: 1rem 0 0.3rem; }
.paso { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; }
.paso:not(:last-child)::after {
  content: ""; position: absolute; top: 13px; left: calc(50% + 16px); right: calc(-50% + 16px);
  height: 2px; background: var(--borde); border-radius: 2px;
}
.paso.hecho:not(:last-child)::after { background: var(--primario); }
.punto {
  width: 27px; height: 27px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.76rem; font-weight: 700;
  background: var(--superficie); border: 2px solid var(--borde-fuerte); color: var(--gris);
  z-index: 1; transition: all var(--trans);
}
.paso.hecho .punto { background: var(--primario); border-color: var(--primario); color: #fff; }
.paso.actual .punto {
  border-color: var(--primario); color: var(--primario-osc);
  box-shadow: 0 0 0 4px var(--primario-suave);
}
.paso-nombre { font-size: 0.7rem; font-weight: 600; color: var(--gris); margin-top: 0.3rem; }
.paso.actual .paso-nombre { color: var(--primario-osc); }

/* ---------------- stats ---------------- */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.55rem; margin: 0.7rem 0 1rem;
}
@media (min-width: 720px) { .stats { grid-template-columns: repeat(8, 1fr); } }
.stat {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-sm);
  padding: 0.55rem 0.4rem; text-align: center; box-shadow: var(--sombra);
}
.stat b { display: block; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; }
.stat b em { font-style: normal; font-size: 0.8rem; color: var(--gris-suave); font-weight: 600; }
.stat span { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gris); }
.stat-rojo b { color: var(--rojo); }
.stat-ambar b { color: var(--ambar); }

/* ---------------- salud del dia ---------------- */
.salud-card {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 0.65rem 0.85rem;
  margin: 0.75rem 0 0.9rem;
  box-shadow: var(--sombra);
}
.salud-card > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
  margin: 0;
  color: var(--tinta);
  font-weight: 800;
}
.salud-card > summary small {
  color: var(--gris);
  font-size: 0.78rem;
  font-weight: 600;
}
.salud-card > summary b {
  flex: 0 0 auto;
  font-size: 0.82rem;
  color: var(--gris);
}
.salud-alerta {
  border-color: var(--ambar-borde);
  background: linear-gradient(180deg, var(--ambar-suave), var(--superficie));
}
.salud-alerta[open] { border-left: 4px solid var(--ambar); }
.salud-alerta > summary b { color: var(--ambar-texto-fuerte); }
.salud-ok { border-color: var(--verde-borde); }
.salud-ok > summary b { color: var(--verde); }
.salud-lista {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.65rem;
}
.salud-item {
  display: grid;
  gap: 0.12rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  background: var(--superficie);
  color: var(--tinta);
}
.salud-item:hover { border-color: var(--borde-fuerte); box-shadow: var(--sombra); }
.salud-item span { font-weight: 800; font-size: 0.9rem; }
.salud-item small { color: var(--gris); font-size: 0.8rem; }
.salud-critico { border-left: 4px solid var(--rojo); }
.salud-critico span { color: var(--rojo); }
.salud-aviso { border-left: 4px solid var(--ambar); }
.salud-aviso span { color: var(--ambar-texto-fuerte); }
.salud-acciones {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.65rem;
}
.salud-acciones form { margin: 0; }
@media (max-width: 640px) {
  .salud-card > summary { align-items: flex-start; flex-direction: column; gap: 0.25rem; }
  .salud-card > summary b { flex: none; }
  .salud-acciones { justify-content: stretch; }
  .salud-acciones .btn { width: 100%; }
}

/* ---------------- chips y estados ---------------- */
.resumen-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.6rem 0; }
.chip {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 999px;
  padding: 0.28rem 0.75rem; font-size: 0.8rem; box-shadow: var(--sombra);
}
.chip-rojo { color: var(--rojo); border-color: var(--rojo-borde); }
.chip-ambar { color: var(--ambar); border-color: var(--ambar-borde); }

.estado {
  display: inline-flex; align-items: center; gap: 0.35rem;
  border-radius: 999px; padding: 0.22rem 0.7rem; font-size: 0.74rem; font-weight: 700;
  background: var(--superficie-2); color: var(--tinta-2); white-space: nowrap;
}
.estado::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.7; }
.estado-programado { background: var(--primario-suave); color: var(--primario-osc); }
.estado-en { background: var(--ambar-suave); color: var(--ambar); }
.estado-salido { background: var(--verde-suave); color: var(--verde); }
.estado-reabierto { background: var(--rojo-suave); color: var(--rojo); }
.estado-cerrado { background: var(--superficie-2); color: var(--gris); }
.estado-anulado { background: var(--rojo-suave); color: var(--rojo); text-decoration: line-through; }

.estado-trab-presente, .estado-trab-subió { background: var(--verde-suave); color: var(--verde); }
.estado-trab-ausente, .estado-trab-no { background: var(--rojo-suave); color: var(--rojo); }
.estado-trab-pendiente, .estado-trab-atrasado { background: var(--ambar-suave); color: var(--ambar); }
.estado-trab-programado { background: var(--primario-suave); color: var(--primario-osc); }
.estado-trab-vacaciones, .estado-trab-licencia, .estado-trab-permiso,
.estado-trab-movido { background: var(--violeta-suave); color: var(--violeta); }

.badge {
  display: inline-block; border-radius: 6px; padding: 0.08rem 0.45rem;
  font-size: 0.7rem; font-weight: 700; margin-left: 0.35rem; vertical-align: middle;
}
.badge-reemplazo { background: var(--ambar-suave); color: var(--ambar); }
.badge-refuerzo { background: var(--info-suave); color: var(--info-texto); }
.badge-movido { background: var(--violeta-suave); color: var(--violeta); }

/* ---------------- botones ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio-sm);
  background: var(--superficie); color: var(--tinta);
  font-family: inherit; font-weight: 600; font-size: 0.88rem;
  padding: 0.55rem 0.95rem; cursor: pointer; text-align: center;
  box-shadow: var(--sombra);
  transition: all var(--trans);
}
.btn:hover { border-color: var(--gris-suave); box-shadow: var(--sombra-alta); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.98); box-shadow: none; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-primario {
  background: linear-gradient(180deg, #5b54ec, #4f46e5);
  border-color: #4f46e5; color: #fff;
  box-shadow: 0 4px 12px -3px rgba(79, 70, 229, 0.5);
}
.btn-primario:hover { background: #4338ca; border-color: #4338ca; }
.btn-ok { background: var(--btn-verde); border-color: var(--btn-verde); color: #fff; box-shadow: 0 3px 10px -3px rgba(5, 150, 105, 0.5); }
.btn-rojo { background: var(--btn-rojo); border-color: var(--btn-rojo); color: #fff; box-shadow: 0 3px 10px -3px rgba(220, 38, 38, 0.5); }
.btn-rojo-suave { background: var(--rojo-suave); border-color: var(--rojo-borde); color: var(--rojo); }
.btn-ambar { background: var(--ambar); border-color: var(--ambar); color: #1c1917; }
.btn-neutro { background: var(--superficie); }
.btn-peligro-txt { color: var(--rojo); }
.btn-block { display: flex; width: 100%; margin-top: 0.6rem; }
.btn-grande { padding: 0.75rem 1.2rem; font-size: 0.98rem; border-radius: 12px; }
.btn-mini { padding: 0.28rem 0.65rem; font-size: 0.78rem; border-radius: 8px; }
.mas {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 6px;
  background: var(--primario-suave); color: var(--primario-osc); font-weight: 800;
}

/* ---------------- formularios ---------------- */
form label { display: block; margin: 0.55rem 0; font-weight: 600; font-size: 0.85rem; color: var(--tinta-2); }
input, select, textarea {
  width: 100%; padding: 0.6rem 0.7rem; margin-top: 0.28rem;
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio-sm);
  font-size: 0.95rem; font-family: inherit; background: var(--superficie); color: var(--tinta);
  transition: border-color var(--trans), box-shadow var(--trans), background var(--trans);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--primario);
  box-shadow: 0 0 0 3px var(--primario-ring);
}
input::placeholder, textarea::placeholder { color: var(--gris-suave); }
label.check { display: flex; align-items: center; gap: 0.5rem; font-weight: 500; }
label.check input { width: 16px; height: 16px; margin: 0; flex: 0 0 auto; accent-color: var(--primario); }
.rut-feedback { display: block; min-height: 1rem; margin-top: 0.18rem; font-size: 0.76rem; }
.filtros { display: flex; gap: 0.6rem; align-items: end; flex-wrap: wrap; margin: 0.4rem 0 0.2rem; }
.filtros label { margin: 0; flex: 1 1 150px; }
.filtros .btn { flex: 0 0 auto; }
.filtros-card {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 0.55rem 0.75rem; box-shadow: var(--sombra);
  margin-bottom: 0.8rem;
}
.form-inline { margin-top: 0.6rem; border-top: 1px dashed var(--borde); padding-top: 0.6rem; animation: aparecer 0.2s ease; }
.form-compacta { margin: 0; }
.grid-form { display: grid; gap: 0 0.8rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid-form { grid-template-columns: 1fr 1fr; } }
.aux-lista {
  border: 1px solid var(--borde); border-radius: var(--radio-sm);
  padding: 0.5rem 0.85rem; margin: 0.5rem 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0.15rem;
}
.aux-lista legend { font-weight: 700; font-size: 0.85rem; padding: 0 0.3rem; }
.check-destacado {
  background: var(--superficie-2); border: 1px solid var(--borde); border-radius: var(--radio-sm);
  padding: 0.65rem 0.75rem;
}
.info-panel {
  display: grid; gap: 0.65rem;
  background: var(--superficie-2); border: 1px solid var(--borde); border-radius: var(--radio-sm);
  padding: 0.75rem; margin: 0.5rem 0;
}
@media (min-width: 640px) { .info-panel { grid-template-columns: 1fr 1fr; } }
.info-panel b { display: block; color: var(--tinta-2); margin-bottom: 0.15rem; }
.info-panel p { margin: 0.2rem 0 0; }
.span-all { grid-column: 1 / -1; }
.movimiento-panel { grid-template-columns: 1fr; }
.movimiento-opciones {
  display: grid; gap: 0.45rem;
}
.movimiento-opcion {
  align-items: flex-start; background: var(--superficie);
  border: 1px solid var(--borde); border-radius: var(--radio-sm);
  padding: 0.65rem 0.75rem;
}
.movimiento-opcion span { display: block; margin-left: 1.55rem; }
.subdetails {
  border: 1px dashed var(--borde); border-radius: var(--radio-sm);
  padding: 0.55rem 0.65rem; margin: 0.6rem 0 0;
}
.mini-lista {
  margin-top: 0.45rem; padding: 0.55rem 0.65rem;
  background: var(--superficie); border-radius: var(--radio-sm);
  color: var(--tinta-2); font-size: 0.84rem;
}
.mini-lista div + div { margin-top: 0.25rem; }
.seleccionados-lista {
  display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.45rem;
}
.seleccion-chip {
  border: 1px solid var(--borde); background: var(--superficie);
  color: var(--tinta); border-radius: 999px; padding: 0.34rem 0.6rem;
  font: inherit; font-size: 0.82rem; font-weight: 700; cursor: pointer;
  box-shadow: var(--sombra);
}
.seleccion-chip:hover, .seleccion-chip:focus-visible {
  border-color: var(--rojo-borde); color: var(--rojo); outline: none;
}
.resumen-linea { color: var(--tinta-2); font-size: 0.9rem; margin-top: 0.25rem; }

details > summary { list-style: none; cursor: pointer; margin: 0.25rem 0; user-select: none; }
details > summary::-webkit-details-marker { display: none; }
details[open] > summary.btn { border-color: var(--primario); color: var(--primario-osc); }
.card-accion { border-style: dashed; box-shadow: none; }
.card-accion[open] { border-style: solid; box-shadow: var(--sombra); }
.filtros-card > summary.btn {
  box-shadow: none; border: none; padding-left: 0.4rem;
  display: flex; width: 100%; justify-content: space-between;
}
.filtros-card > summary.btn::after {
  content: "+";
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.35rem; height: 1.35rem; border-radius: 999px;
  background: var(--primario-suave); color: var(--primario-osc);
  font-weight: 800;
}
.filtros-card[open] > summary.btn::after { content: "-"; }

/* ---------------- cuadrilla ---------------- */
.trabajador { padding: 0.8rem 1rem; }
.trab-head { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.trab-id { display: flex; align-items: center; gap: 0.7rem; }
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; flex: 0 0 38px;
  background: var(--primario-suave);
  color: var(--primario-osc); font-weight: 700; font-size: 0.86rem;
  border: 1px solid var(--primario-ring);
}
.acciones-rapidas { display: flex; gap: 0.45rem; flex-wrap: wrap; margin-top: 0.65rem; align-items: flex-start; }
.acciones-rapidas form { display: inline; }
.acciones-rapidas details { flex-basis: 100%; }

.alerta-dotacion {
  background: var(--ambar-suave); border: 1px solid var(--ambar-borde); border-radius: var(--radio-sm);
  padding: 0.75rem 0.9rem; margin: 0.6rem 0; color: var(--ambar-texto-fuerte); font-size: 0.9rem;
}
.seccion-salida, .seccion-cierre { border-left: 4px solid var(--primario); }

/* ---------------- mensajes ---------------- */
.flash {
  display: flex; align-items: center; gap: 0.55rem;
  border-radius: var(--radio-sm); padding: 0.7rem 0.95rem; margin: 0.5rem 0;
  font-weight: 600; font-size: 0.88rem;
  animation: flashIn 0.25s ease;
}
@keyframes flashIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.flash::before { font-weight: 800; }
.flash-ok { background: var(--verde-suave); color: var(--verde); border: 1px solid var(--verde-borde); }
.flash-ok::before { content: "✓"; }
.flash-error { background: var(--rojo-suave); color: var(--rojo); border: 1px solid var(--rojo-borde); }
.flash-error::before { content: "!"; }
.flash-info { background: var(--info-suave); color: var(--info-texto); border: 1px solid var(--info-borde); font-weight: 500; }
.flash-info::before { content: "i"; font-style: italic; font-family: Georgia, serif; }

/* ---------------- tablas ---------------- */
.tabla {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); overflow: hidden; font-size: 0.88rem;
  box-shadow: var(--sombra);
}
.tabla th, .tabla td { border-bottom: 1px solid var(--borde); padding: 0.6rem 0.7rem; text-align: left; vertical-align: top; }
.tabla tr:last-child td { border-bottom: none; }
.tabla th {
  background: var(--superficie-2); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--gris); font-weight: 700;
}
.tabla tbody tr { transition: background var(--trans); }
.tabla tr:hover td { background: var(--superficie-2); }
.fila-inactiva { opacity: 0.55; }
@media (max-width: 640px) { .tabla { display: block; overflow-x: auto; } }

/* ---------------- login ---------------- */
.login-wrap { display: flex; justify-content: center; padding-top: 7vh; }
.login-card {
  width: 100%; max-width: 400px;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 20px; overflow: hidden;
  box-shadow: var(--sombra-alta);
  animation: aparecer 0.4s ease;
}
.login-hero {
  text-align: center; padding: 2rem 1.5rem 1.4rem;
  background:
    radial-gradient(300px 160px at 50% -40px, var(--primario-suave), transparent),
    var(--superficie);
  border-bottom: 1px solid var(--borde);
}
.login-hero h1 { margin: 0.8rem 0 0.1rem; font-size: 1.3rem; }
.login-hero p { margin: 0; color: var(--gris); font-size: 0.85rem; font-weight: 500; }
.login-form { padding: 1.3rem 1.5rem 1.7rem; }

/* ---------------- auditoría / novedades ---------------- */
.audit div { margin-top: 0.2rem; font-size: 0.88rem; }
.novedad p { margin: 0.35rem 0 0; font-size: 0.92rem; }

/* ---------------- página de preferencias ---------------- */
.sin-margen { margin-top: 0; }
.temas-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.6rem; margin: 0.4rem 0 0.9rem;
}
.tema-card { position: relative; margin: 0; cursor: pointer; font-weight: 500; }
.tema-card input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tema-vista {
  display: block; border: 2px solid var(--borde); border-radius: 12px;
  padding: 0.5rem; transition: border-color var(--trans), box-shadow var(--trans), transform var(--trans);
}
.tema-card:hover .tema-vista { border-color: var(--borde-fuerte); transform: translateY(-1px); }
.tema-card input:checked + .tema-vista {
  border-color: var(--primario); box-shadow: 0 0 0 3px var(--primario-ring);
}
.tema-card input:focus-visible + .tema-vista { outline: 2px solid var(--primario); outline-offset: 2px; }
.tema-demo {
  display: block; height: 58px; border-radius: 8px; position: relative; overflow: hidden;
  border: 1px solid rgba(128, 128, 128, 0.3); margin-bottom: 0.45rem;
}
.tema-demo .d-bar { display: block; height: 13px; }
.tema-demo .d-card { position: absolute; left: 8px; top: 21px; right: 42%; bottom: 8px; border-radius: 5px; }
.tema-demo .d-dot { position: absolute; right: 12px; top: 27px; width: 18px; height: 18px; border-radius: 50%; }
.tema-demo .d-line { position: absolute; left: 13px; top: 29px; width: 30%; height: 4px; border-radius: 2px; opacity: 0.8; }
.tema-nombre { display: flex; justify-content: space-between; align-items: center; gap: 0.3rem; font-weight: 700; font-size: 0.86rem; color: var(--tinta); }
.tema-card .muted { display: block; font-size: 0.74rem; margin-top: 0.1rem; }

/* ---------------- densidad y tamaño de letra ---------------- */
body.letra-grande { font-size: 17.5px; }
body.densidad-compacta { font-size: 14.5px; }
body.densidad-compacta.letra-grande { font-size: 16px; }
body.densidad-compacta .card { padding: 0.65rem 0.8rem; margin-bottom: 0.55rem; }
body.densidad-compacta .container { padding-top: 0.5rem; }
body.densidad-compacta .btn { padding: 0.42rem 0.75rem; }
body.densidad-compacta .btn-grande { padding: 0.55rem 1rem; }
body.densidad-compacta .btn-mini { padding: 0.22rem 0.55rem; }
body.densidad-compacta input, body.densidad-compacta select, body.densidad-compacta textarea { padding: 0.42rem 0.55rem; }
body.densidad-compacta .stats { gap: 0.4rem; }
body.densidad-compacta .stat { padding: 0.38rem 0.3rem; }
body.densidad-compacta .stat b { font-size: 1.05rem; }
body.densidad-compacta .grid-cards { gap: 0.5rem; }
body.densidad-compacta .trabajador { padding: 0.55rem 0.7rem; }
body.densidad-compacta h1 { font-size: 1.25rem; margin: 0.7rem 0 0.4rem; }
body.densidad-compacta h2 { margin: 1rem 0 0.4rem; }
body.densidad-compacta .ficha { gap: 0.25rem; }
body.densidad-compacta .avatar { width: 32px; height: 32px; flex-basis: 32px; }

/* ---------------- móvil / app web ---------------- */
@media (max-width: 720px) {
  body { font-size: 15px; }
  .site-header { box-shadow: 0 1px 0 var(--borde); }
  .topbar {
    padding: 0.48rem 0.65rem;
    align-items: flex-start;
    gap: 0.45rem;
  }
  .brand {
    min-width: 0;
    font-size: 0.96rem;
    flex: 1 1 auto;
  }
  .brand > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .brand em { display: none; }
  .logo { width: 32px; height: 32px; border-radius: 10px; }
  .userbox {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 0.38rem;
  }
  .user-chip {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 10px;
    padding: 0.42rem 0.6rem;
  }
  .menu-tema > summary,
  .userbox .btn-mini { min-height: 40px; }
  .site-header .menu-panel {
    right: 0.55rem;
    left: 0.55rem;
    width: auto;
    min-width: 0;
  }
  .mainnav {
    gap: 0.35rem;
    padding: 0.35rem 0.6rem 0.45rem;
    scroll-snap-type: x proximity;
  }
  .mainnav a {
    min-height: 42px;
    padding: 0.5rem 0.75rem;
    border-radius: 12px;
    scroll-snap-align: start;
  }
  .nav-sep { display: none; }
  .container {
    width: 100%;
    padding: 0.65rem 0.65rem calc(5rem + env(safe-area-inset-bottom));
  }
  h1 { font-size: 1.28rem; margin-top: 0.75rem; }
  h2 { font-size: 1rem; }
  .page-head {
    align-items: stretch;
    gap: 0.65rem;
  }
  .acciones-head {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
  }
  .acciones-head form,
  .acciones-head .btn { width: 100%; }
  .card {
    border-radius: 12px;
    padding: 0.78rem 0.8rem;
    margin-bottom: 0.65rem;
  }
  .card-head { align-items: flex-start; }
  .grid-cards { gap: 0.55rem; }
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
  }
  .stat { padding: 0.5rem 0.35rem; }
  .stat span { font-size: 0.62rem; }
  .filtros {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }
  .filtros-card { padding: 0.42rem; }
  .filtros-card > summary.btn {
    min-height: 46px;
    padding: 0.55rem 0.65rem;
    justify-content: space-between;
    text-align: left;
  }
  .filtros label { min-width: 0; }
  .filtros .btn,
  .filtros a.btn { width: 100%; }
  input, select, textarea {
    min-height: 44px;
    font-size: 16px;
  }
  .btn { min-height: 42px; }
  .btn-mini { min-height: 36px; }
  .info-panel,
  .grid-form,
  .aux-lista { grid-template-columns: 1fr; }
  .trab-head { align-items: flex-start; }
  .trab-id {
    align-items: flex-start;
    min-width: 0;
  }
  .trab-id > div { min-width: 0; }
  .acciones-rapidas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
  .acciones-rapidas form,
  .acciones-rapidas details,
  .acciones-rapidas .btn,
  .acciones-rapidas summary { width: 100%; }
  .acciones-rapidas details { grid-column: 1 / -1; }
  .stepper {
    overflow-x: auto;
    padding-bottom: 0.25rem;
  }
  .paso { min-width: 76px; }
  .paso-nombre { font-size: 0.66rem; }
  .tabla {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-radius: 12px;
    font-size: 0.84rem;
    -webkit-overflow-scrolling: touch;
  }
  .tabla th,
  .tabla td { padding: 0.55rem 0.6rem; }
  .movimiento-opcion {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.2rem 0.55rem;
  }
  .movimiento-opcion span {
    grid-column: 2;
    margin-left: 0;
  }
  .login-wrap {
    min-height: 100dvh;
    align-items: center;
    padding: 2.5rem 0.75rem 1rem;
  }
  .login-card { border-radius: 16px; }
  .login-form { padding: 1rem; }
}

@media (max-width: 420px) {
  .container { padding-left: 0.5rem; padding-right: 0.5rem; }
  .card { padding: 0.7rem; }
  .camion { display: block; }
  .patente { display: inline-block; margin: 0.2rem 0 0; }
  .estado { max-width: 100%; }
  .acciones-rapidas { grid-template-columns: 1fr; }
}

/* ---------------- impresión (siempre en claro) ---------------- */
@media print {
  [data-theme], :root {
    color-scheme: light;
    --primario: #4f46e5; --primario-osc: #4338ca; --primario-suave: #eef2ff;
    --primario-ring: rgba(79, 70, 229, 0.16);
    --tinta: #0f172a; --tinta-2: #334155; --gris: #64748b; --gris-suave: #94a3b8;
    --fondo: #ffffff; --superficie: #ffffff; --superficie-2: #f4f6fb;
    --vidrio: #ffffff; --borde: #e5e8f0; --borde-fuerte: #d3d9e8;
    --verde: #059669; --verde-suave: #ecfdf5; --verde-borde: #a7f3d0;
    --rojo: #dc2626; --rojo-suave: #fef2f2; --rojo-borde: #fecaca;
    --ambar: #d97706; --ambar-suave: #fffbeb; --ambar-borde: #fde68a;
    --ambar-texto-fuerte: #78350f;
    --violeta: #7c3aed; --violeta-suave: #f5f3ff;
    --info-texto: #1d4ed8; --info-suave: #eff6ff; --info-borde: #bfdbfe;
    --glow: transparent;
    --sombra: none; --sombra-alta: none;
  }
  .topbar, .mainnav, .filtros, .filtros-card, .btn, .volver, .tema-flotante,
  .acciones-head { display: none !important; }
  body { background: #fff; font-size: 12px; }
  .card, .tabla, .stat { box-shadow: none; }
}

/* Ordenamiento en tablas */
.tabla-ordenable th {
  white-space: nowrap;
}

.th-orden {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  text-decoration: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.th-orden:visited {
  color: inherit;
}

.th-orden:hover,
.th-orden:focus-visible {
  color: var(--primario-osc);
  outline: none;
}

.orden-icono {
  font-size: .85em;
  opacity: .72;
}

.th-orden.orden-asc .orden-icono,
.th-orden.orden-desc .orden-icono {
  opacity: 1;
}