/* ==========================================================================
   Control de limpiezas · Sistema de diseño (docs/architecture/UI.md)
   1. Tokens  2. Base  3. Layouts  4. Componentes  5. Dominio  6. Utilidades
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  color-scheme: light;
  --color-fondo: #f3f5f2;
  --color-superficie: #ffffff;
  --color-superficie-2: #f7f9f6;
  --color-borde: #d8dfd7;
  --color-borde-fuerte: #aab6a9;
  --color-texto: #18211a;
  --color-texto-suave: #556058;
  --color-primario: #0f6b4f;
  --color-primario-hover: #0b5640;
  --color-primario-suave: #e1f1ea;
  --color-primario-texto: #0a4f3a;
  --color-sobre-primario: #ffffff;
  --color-exito: #1c6f38; --color-exito-suave: #e2f3e7;
  --color-aviso: #7e4a00; --color-aviso-suave: #fff0d2;
  --color-peligro: #ad2116; --color-peligro-suave: #fde7e4;
  --color-info: #1d5a92; --color-info-suave: #e5eff9;
  --color-neutro: #4f5a52; --color-neutro-suave: #eceeeb;
  --color-foco: #1d4ed8;
  --color-capa: rgba(15, 22, 17, .5);
  --color-lateral: #0d3b2d; --color-lateral-texto: #e3efe9; --color-lateral-activo: rgba(255, 255, 255, .14);

  --esp-1: .25rem; --esp-2: .5rem; --esp-3: .75rem; --esp-4: 1rem; --esp-5: 1.25rem; --esp-6: 1.5rem; --esp-7: 2rem; --esp-8: 3rem;
  --radio-s: 6px; --radio-m: 10px; --radio-l: 16px; --radio-pildora: 999px;
  --sombra-1: 0 1px 2px rgba(16, 24, 18, .06), 0 1px 3px rgba(16, 24, 18, .08);
  --sombra-2: 0 8px 24px rgba(16, 24, 18, .12);
  --sombra-3: 0 24px 48px rgba(16, 24, 18, .24);

  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fuente-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --texto-xs: .78rem; --texto-s: .875rem; --texto-m: 1rem; --texto-l: 1.125rem; --texto-xl: 1.375rem; --texto-2xl: 1.75rem;
  --interlineado: 1.5;

  --tactil: 44px; --tactil-grande: 56px; --ancho-lateral: 240px; --ancho-carril: 108px;
  --anillo-foco: 0 0 0 3px var(--color-foco);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --color-fondo: #0e1410;
    --color-superficie: #161f19;
    --color-superficie-2: #1b261f;
    --color-borde: #2b3a30;
    --color-borde-fuerte: #4a5c50;
    --color-texto: #e6ede7;
    --color-texto-suave: #a8b5ab;
    --color-primario: #5cc49c;
    --color-primario-hover: #79d3b0;
    --color-primario-suave: #163a2d;
    --color-primario-texto: #94e2c2;
    --color-sobre-primario: #052419;
    --color-exito: #86d9a0; --color-exito-suave: #15321f;
    --color-aviso: #f4bf62; --color-aviso-suave: #382a10;
    --color-peligro: #ff9b91; --color-peligro-suave: #3d1714;
    --color-info: #93c6ff; --color-info-suave: #12283f;
    --color-neutro: #c2ccc4; --color-neutro-suave: #253029;
    --color-foco: #8ab4ff;
    --color-capa: rgba(0, 0, 0, .65);
    --color-lateral: #0b1a13; --color-lateral-texto: #d6e6dd; --color-lateral-activo: rgba(92, 196, 156, .18);
    --sombra-1: 0 1px 2px rgba(0, 0, 0, .4);
    --sombra-2: 0 8px 24px rgba(0, 0, 0, .5);
    --sombra-3: 0 24px 48px rgba(0, 0, 0, .6);
  }
}

/* 2. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--fuente); font-size: var(--texto-m); line-height: var(--interlineado); background: var(--color-fondo); color: var(--color-texto); }
h1, h2, h3 { color: var(--color-texto); margin: 0; line-height: 1.25; }
h1 { font-size: var(--texto-xl); font-weight: 700; }
h2 { font-size: var(--texto-l); font-weight: 650; }
h3 { font-size: var(--texto-m); font-weight: 650; }
p { margin: var(--esp-2) 0; }
a { color: var(--color-info); text-underline-offset: 2px; }
code { font-family: var(--fuente-mono); background: var(--color-neutro-suave); padding: .1rem .3rem; border-radius: 4px; }
img { max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: none; box-shadow: var(--anillo-foco); border-radius: var(--radio-s); }
.sutil { color: var(--color-texto-suave); font-size: var(--texto-s); }
.solo-lector { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.saltar { position: absolute; left: var(--esp-2); top: -100px; z-index: 3000; background: var(--color-superficie); color: var(--color-texto);
  padding: var(--esp-2) var(--esp-4); border-radius: var(--radio-s); box-shadow: var(--sombra-2); }
.saltar:focus { top: var(--esp-2); }
.icono { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.25em; }

/* 3. Layouts --------------------------------------------------------------- */
/* 3.1 Administración: lateral (escritorio) · carril (tablet) · cajón (móvil) */
.app-admin { min-height: 100vh; display: grid; grid-template-columns: var(--ancho-lateral) 1fr;
  /* El color de la columna lateral llega hasta el final aunque la barra sea «sticky». */
  background: linear-gradient(to right, var(--color-lateral) var(--ancho-lateral), transparent 0); }
.lateral { position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: var(--esp-4);
  background: var(--color-lateral); color: var(--color-lateral-texto); padding: var(--esp-4) var(--esp-3); }
.marca { display: flex; align-items: center; gap: var(--esp-2); font-weight: 750; font-size: var(--texto-m); color: inherit; text-decoration: none; padding: var(--esp-2); }
.marca .icono { width: 1.6rem; height: 1.6rem; }
.nav-principal { display: grid; gap: 2px; }
.nav-principal a { display: flex; align-items: center; gap: var(--esp-3); min-height: var(--tactil); padding: var(--esp-2) var(--esp-3);
  border-radius: var(--radio-m); color: inherit; text-decoration: none; font-weight: 550; }
.nav-principal a:hover { background: rgba(255, 255, 255, .08); }
.nav-principal a.active { background: var(--color-lateral-activo); font-weight: 750; box-shadow: inset 3px 0 0 var(--color-lateral-texto); }
.lateral-pie { margin-top: auto; display: grid; gap: var(--esp-1); border-top: 1px solid rgba(255, 255, 255, .15); padding-top: var(--esp-3); }
.usuario-conectado { display: flex; align-items: center; gap: var(--esp-2); font-size: var(--texto-s); padding: var(--esp-2) var(--esp-3); overflow-wrap: anywhere; }
.lateral .boton-texto, .cabecera-movil .boton-texto { color: inherit; justify-content: flex-start; }
.contenido-admin { min-width: 0; padding: var(--esp-6); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-5); align-content: start; max-width: 1280px; width: 100%; }
.cabecera-movil { display: none; }

@media (max-width: 64rem) {
  .app-admin { grid-template-columns: var(--ancho-carril) 1fr; background: linear-gradient(to right, var(--color-lateral) var(--ancho-carril), transparent 0); }
  .lateral { padding: var(--esp-3) var(--esp-1); align-items: stretch; }
  /* Texto oculto solo visualmente: el enlace conserva su nombre accesible. */
  .lateral .marca span, .lateral .usuario-conectado span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .lateral .marca { justify-content: center; }
  .nav-principal a, .lateral-pie .boton { flex-direction: column; gap: 2px; font-size: .72rem; text-align: center; justify-content: center;
    padding: var(--esp-2) 2px; overflow-wrap: anywhere; }
  .nav-principal a.active { box-shadow: none; }
  .usuario-conectado { justify-content: center; }
  .contenido-admin { padding: var(--esp-5); }
}
@media (max-width: 40rem) {
  .app-admin { display: block; background: none; }
  .lateral { display: none; }
  .cabecera-movil { position: sticky; top: 0; z-index: 1000; display: flex; align-items: center; justify-content: space-between;
    gap: var(--esp-2); background: var(--color-lateral); color: var(--color-lateral-texto); padding: var(--esp-1) var(--esp-3); min-height: 56px; }
  .cajon > summary { list-style: none; display: inline-flex; align-items: center; gap: var(--esp-2); min-height: var(--tactil); padding: 0 var(--esp-3);
    border-radius: var(--radio-m); cursor: pointer; font-weight: 650; }
  .cajon > summary::-webkit-details-marker { display: none; }
  .cajon[open] > summary { background: var(--color-lateral-activo); }
  .cajon-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--color-lateral); padding: var(--esp-2) var(--esp-3) var(--esp-4);
    box-shadow: var(--sombra-2); display: grid; gap: var(--esp-3); max-height: calc(100vh - 56px); overflow-y: auto; }
  .contenido-admin { padding: var(--esp-4); }
}

/* 3.2 Operario: cabecera compacta, contenido a pantalla completa */
.cabecera-operario { position: sticky; top: 0; z-index: 1000; display: flex; align-items: center; justify-content: space-between; gap: var(--esp-2);
  background: var(--color-lateral); color: var(--color-lateral-texto); padding: var(--esp-1) var(--esp-3); min-height: 56px; }
.cabecera-operario .acciones-cabecera { display: flex; align-items: center; gap: var(--esp-1); }
.cabecera-operario .boton-texto { color: inherit; }
.operario { max-width: 680px; margin: 0 auto; padding: var(--esp-4) var(--esp-4) var(--esp-7); display: grid; gap: var(--esp-4); grid-template-columns: minmax(0, 1fr); }
.operario .saludo h1 { margin: 0; }
.saludo__fecha { margin: 0; color: var(--color-texto-suave); font-size: var(--texto-s); }
/* En el operario el resultado de una acción queda a la vista aunque la página se desplace hasta la tarjeta. */
.operario > .aviso { position: sticky; top: 64px; z-index: 900; box-shadow: var(--sombra-2); margin: 0; }

/* 3.3 Acceso */
.vacio { min-height: 100vh; display: grid; place-items: center; padding: var(--esp-4);
  background: radial-gradient(1200px 600px at 10% -10%, var(--color-primario-suave), transparent 60%), var(--color-fondo); }
.acceso { width: min(100%, 420px); background: var(--color-superficie); padding: var(--esp-7) var(--esp-6); border-radius: var(--radio-l);
  box-shadow: var(--sombra-2); border: 1px solid var(--color-borde); }
.acceso-marca { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--radio-l); background: var(--color-primario);
  color: var(--color-sobre-primario); margin-bottom: var(--esp-4); }
.acceso-marca .icono { width: 30px; height: 30px; }
.acceso h1 { font-size: var(--texto-2xl); }
.acceso-pie { margin-top: var(--esp-5); text-align: center; }
.acceso-pie .salir { display: inline-block; }
/* Mi cuenta (contraseña y verificación en dos pasos) */
.cuenta { width: min(100%, 560px); }
.cuenta h2 { font-size: var(--texto-l); margin-top: var(--esp-6); }
.pasos-2fa { display: grid; gap: var(--esp-4); padding-left: var(--esp-5); }
.qr-2fa { display: block; margin: var(--esp-3) 0; background: #fff; padding: var(--esp-2); border-radius: var(--radio-m); }
.clave-totp { word-break: break-all; }
.codigos-recuperacion { border: 1px solid var(--color-borde); border-radius: var(--radio-m); padding: var(--esp-4); background: var(--color-fondo); }
.lista-codigos { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--esp-2); }

/* 4. Componentes ----------------------------------------------------------- */
/* Botón */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2); min-height: var(--tactil); padding: var(--esp-2) var(--esp-4);
  border: 1px solid var(--color-borde-fuerte); border-radius: var(--radio-m); background: var(--color-superficie); color: var(--color-texto);
  font: inherit; font-weight: 650; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color .15s, border-color .15s; }
.boton:hover { background: var(--color-superficie-2); border-color: var(--color-texto-suave); }
.boton:disabled, .boton[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.boton-principal { background: var(--color-primario); border-color: var(--color-primario); color: var(--color-sobre-primario); }
.boton-principal:hover:not(:disabled) { background: var(--color-primario-hover); border-color: var(--color-primario-hover); }
.boton-peligro { background: var(--color-peligro-suave); border-color: var(--color-peligro); color: var(--color-peligro); }
.boton-peligro:hover:not(:disabled) { background: var(--color-peligro); color: #fff; }
.boton-texto { border-color: transparent; background: transparent; color: var(--color-info); }
.boton-texto:hover:not(:disabled) { background: var(--color-neutro-suave); border-color: transparent; }
.boton-grande { width: 100%; min-height: var(--tactil-grande); font-size: var(--texto-l); }
/* Envío en curso (js/app.js): indicador giratorio antes del texto «Guardando…». */
.boton.cargando::before { content: ""; width: 1em; height: 1em; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent;
  animation: girar .8s linear infinite; }
.boton.cargando .icono { display: none; }
@keyframes girar { to { transform: rotate(360deg); } }
.aviso-conexion { position: sticky; top: 64px; z-index: 950; box-shadow: var(--sombra-2); }
@media (min-width: 40.01rem) { .contenido-admin .aviso-conexion { top: var(--esp-2); } }
.boton-pequeno { min-height: 36px; padding: var(--esp-1) var(--esp-3); font-size: var(--texto-s); }
.boton-ancho { width: 100%; margin-top: var(--esp-2); }
.boton-icono { min-width: var(--tactil); padding: var(--esp-2); }

/* Aviso */
.aviso { display: flex; gap: var(--esp-2); align-items: flex-start; border-radius: var(--radio-m); padding: var(--esp-3) var(--esp-4); margin: var(--esp-2) 0;
  font-weight: 550; border: 1px solid transparent; }
.aviso > .icono { margin-top: .1em; }
.aviso-ok { background: var(--color-exito-suave); color: var(--color-exito); border-color: color-mix(in srgb, var(--color-exito) 30%, transparent); }
.aviso-error { background: var(--color-peligro-suave); color: var(--color-peligro); border-color: color-mix(in srgb, var(--color-peligro) 30%, transparent); }
.aviso-facturar { background: var(--color-aviso-suave); color: var(--color-aviso); }
.aviso-info { background: var(--color-info-suave); color: var(--color-info); font-size: var(--texto-s); }

/* Campos de formulario */
.formulario { display: grid; gap: var(--esp-4); margin-top: var(--esp-3); }
label, .campo { display: grid; gap: var(--esp-1); font-weight: 600; font-size: var(--texto-s); }
.campo__etiqueta { display: block; }
.campo__ayuda { margin: 0; font-weight: 400; color: var(--color-texto-suave); font-size: var(--texto-xs); }
.campo__error { margin: 0; display: flex; gap: var(--esp-1); align-items: center; color: var(--color-peligro); font-size: var(--texto-xs); font-weight: 600; }
.obligatorio { color: var(--color-peligro); }
input, textarea, select { font: inherit; font-weight: 400; padding: var(--esp-2) var(--esp-3); border: 1px solid var(--color-borde-fuerte); border-radius: var(--radio-m);
  background: var(--color-superficie); min-height: var(--tactil); width: 100%; color: var(--color-texto); }
input::placeholder, textarea::placeholder { color: var(--color-texto-suave); opacity: .85; }
input:hover, textarea:hover, select:hover { border-color: var(--color-texto-suave); }
input:focus-visible, textarea:focus-visible, select:focus-visible { border-color: var(--color-foco); }
[aria-invalid="true"] { border-color: var(--color-peligro); background: var(--color-peligro-suave); }
.casilla { display: inline-flex; align-items: center; gap: var(--esp-2); font-weight: 500; min-height: var(--tactil); cursor: pointer; }
.casilla input { width: 1.2rem; height: 1.2rem; min-height: 0; accent-color: var(--color-primario); }
.fila-campos { display: grid; gap: var(--esp-3); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: start; }
.fila-campos > .casilla { align-self: end; }
fieldset { border: 1px solid var(--color-borde); border-radius: var(--radio-m); padding: var(--esp-3) var(--esp-4); margin: 0; }
legend { font-weight: 700; padding: 0 var(--esp-1); font-size: var(--texto-s); }
.evidencia { display: grid; gap: var(--esp-2); }
.dias { display: flex; flex-wrap: wrap; gap: 0 var(--esp-4); }
details > summary { cursor: pointer; font-weight: 600; }

/* Insignias y chips: siempre texto (y casi siempre icono), nunca solo color */
.insignia, .chip { display: inline-flex; align-items: center; gap: var(--esp-1); border-radius: var(--radio-pildora); padding: .2rem .65rem;
  font-size: var(--texto-xs); line-height: 1.4; white-space: nowrap; }
.chip { background: var(--color-neutro-suave); color: var(--color-texto); }
.chip-info { background: var(--color-info-suave); color: var(--color-info); }
.insignia { font-weight: 700; background: var(--color-neutro-suave); color: var(--color-neutro); }
.insignia.ok, .insignia--ok { background: var(--color-exito-suave); color: var(--color-exito); }
.insignia.due, .insignia--aviso { background: var(--color-aviso-suave); color: var(--color-aviso); }
.insignia.late, .insignia--peligro { background: var(--color-peligro-suave); color: var(--color-peligro); }
.insignia.info, .insignia--info { background: var(--color-info-suave); color: var(--color-info); }
.insignia.off, .insignia--neutro { background: var(--color-neutro-suave); color: var(--color-neutro); }
.chips { display: flex; flex-wrap: wrap; gap: var(--esp-1) var(--esp-2); margin-top: var(--esp-2); }

/* Tarjetas, paneles y registros */
.tarjeta, .panel, .registro { background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio-l); padding: var(--esp-4) var(--esp-5); box-shadow: var(--sombra-1); }
.panel { display: grid; gap: var(--esp-3); }
.registro { padding: var(--esp-4); }
.tarjeta-facturar, .registro-facturar { border-color: color-mix(in srgb, var(--color-aviso) 45%, transparent); box-shadow: inset 4px 0 0 var(--color-aviso), var(--sombra-1); }
.tarjeta-cabecera, .registro-cabecera, .tarjeta__cabecera { display: flex; justify-content: space-between; gap: var(--esp-3); align-items: flex-start; }
.tarjeta__acciones { display: flex; gap: var(--esp-2); flex-wrap: wrap; }
.registro-titulo { font-weight: 700; font-size: var(--texto-m); margin: 0; line-height: 1.3; }
.registro-sub { color: var(--color-texto-suave); font-size: var(--texto-s); }
.lista { display: grid; gap: var(--esp-3); }
.cabecera-vista, .saludo { display: flex; justify-content: space-between; align-items: center; gap: var(--esp-3); flex-wrap: wrap; }
.titulo-seccion { margin: var(--esp-5) 0 var(--esp-2); }
.rejilla-dos { display: grid; gap: var(--esp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); align-items: start; }
.rejilla-tres { display: grid; gap: var(--esp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.tarjeta-estrecha { max-width: 760px; }
.panel-seleccionado { border-color: var(--color-primario); box-shadow: 0 0 0 1px var(--color-primario); }

/* Métricas (KPI) */
.metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--esp-3); }
.metrica { background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio-l); padding: var(--esp-3) var(--esp-4); }
.metrica strong { display: block; font-size: var(--texto-2xl); line-height: 1.1; }
.metrica span { color: var(--color-texto-suave); font-size: var(--texto-s); }
.metricas-compactas .metrica strong { font-size: var(--texto-l); }

.kpi { display: grid; grid-template-columns: auto 1fr; column-gap: var(--esp-3); align-items: center; color: inherit; text-decoration: none; }
.kpi > :not(.kpi__icono) { grid-column: 2; }
.kpi__icono { grid-row: 1 / span 3; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radio-m);
  background: var(--color-primario-suave); color: var(--color-primario-texto); }
.kpi__detalle { font-size: var(--texto-xs) !important; }
.kpi--enlace:hover { border-color: var(--color-primario); box-shadow: var(--sombra-1); }
.kpi--atencion { border-color: color-mix(in srgb, var(--color-aviso) 45%, transparent); box-shadow: inset 4px 0 0 var(--color-aviso); }
.kpi--atencion .kpi__icono { background: var(--color-aviso-suave); color: var(--color-aviso); }

/* Cabecera de vista y listas de atención */
.cabecera-vista { margin-bottom: var(--esp-4); }
.cabecera-vista h1 { margin: 0; }
.cabecera-vista__descripcion { margin: var(--esp-1) 0 0; color: var(--color-texto-suave); font-size: var(--texto-s); max-width: 60ch; }
.cabecera-vista__acciones { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.lista-atencion { list-style: none; padding: 0; margin: 0; display: grid; }
.lista-atencion li { display: flex; justify-content: space-between; align-items: center; gap: var(--esp-3); flex-wrap: wrap; padding: var(--esp-2) 0; border-bottom: 1px solid var(--color-borde); }
.lista-atencion li:last-child { border-bottom: 0; }
.celda-estado { display: grid; grid-template-columns: minmax(80px, 140px) auto; gap: var(--esp-2); align-items: center; }
.celda-acciones { white-space: nowrap; text-align: right; }
.celda-acciones .boton + .boton, .celda-acciones form { margin-left: var(--esp-1); }
.celda-acciones form { display: inline; }
.fila-facturar { box-shadow: inset 4px 0 0 var(--color-aviso); }
.texto-suave { color: var(--color-texto-suave); font-size: var(--texto-s); }
.acciones-formulario { display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: center; justify-content: flex-end; margin-top: var(--esp-2); }
.acciones-formulario form { display: contents; }
.confirmacion-borrado { flex-direction: column; align-items: stretch; margin-top: var(--esp-4); }
.confirmacion-borrado .acciones-formulario { justify-content: flex-start; }
@media (max-width: 40rem) {
  .celda-acciones { text-align: left; white-space: normal; }
  .acciones-formulario { justify-content: stretch; }
  .acciones-formulario > .boton, .acciones-formulario button { flex: 1 1 auto; }
}

/* Barra de filtros */
.filtros, .barra-filtros { display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: end; padding: var(--esp-3); background: var(--color-superficie);
  border: 1px solid var(--color-borde); border-radius: var(--radio-l); }
.filtros > input, .filtros > select, .barra-filtros > input, .barra-filtros > select { width: auto; flex: 1 1 180px; }
.filtros label, .barra-filtros label { flex: 0 1 170px; }
.filtros-operario { display: grid; gap: var(--esp-3); padding-top: var(--esp-3); }
.filtros-plegables { background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio-l); padding: 0 var(--esp-4); }
.filtros-plegables > summary { display: flex; align-items: center; gap: var(--esp-2); min-height: var(--tactil); }
.filtros-plegables[open] { padding-bottom: var(--esp-4); }
.filtros-plegables .insignia { margin-left: auto; }

/* Tablas: en móvil las .tabla-responsive pasan a tarjetas (data-etiqueta) */
.tabla { width: 100%; border-collapse: collapse; font-size: var(--texto-s); }
.tabla th, .tabla td { text-align: left; padding: var(--esp-2) var(--esp-3); border-bottom: 1px solid var(--color-borde); vertical-align: top; }
.tabla th { color: var(--color-texto-suave); font-weight: 650; font-size: var(--texto-xs); text-transform: uppercase; letter-spacing: .03em; }
.tabla tbody tr:hover { background: var(--color-superficie-2); }
.tabla-desplazable { overflow-x: auto; max-width: 100%; position: relative; }
@media (max-width: 40rem) {
  .tabla-responsive thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabla-responsive, .tabla-responsive tbody, .tabla-responsive tr, .tabla-responsive td { display: block; width: 100%; }
  .tabla-responsive tr { border: 1px solid var(--color-borde); border-radius: var(--radio-m); margin-bottom: var(--esp-2); padding: var(--esp-2); }
  /* Etiqueta a la izquierda; todo el contenido de la celda, apilado a la derecha. */
  .tabla-responsive td { border: 0; padding: var(--esp-1) var(--esp-2); display: grid; grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr); gap: 2px var(--esp-2); }
  .tabla-responsive td > * { grid-column: 2; justify-self: start; max-width: 100%; }
  .tabla-responsive td::before { content: attr(data-etiqueta); grid-column: 1; grid-row: 1 / span 6; color: var(--color-texto-suave); font-weight: 650; font-size: var(--texto-xs); }
  .tabla-responsive td:not([data-etiqueta]) { grid-template-columns: minmax(0, 1fr); padding-top: var(--esp-2); }
  .tabla-responsive td:not([data-etiqueta])::before { display: none; }
  .tabla-responsive td:not([data-etiqueta]) > * { grid-column: 1; justify-self: stretch; }
  .tabla-responsive .insignia { white-space: normal; }
  .tabla-responsive .celda-estado { grid-template-columns: minmax(0, 1fr); width: 100%; }
}

/* Diálogo modal (servidor) */
.capa { position: fixed; inset: 0; z-index: 2000; background: var(--color-capa); display: grid; place-items: start center; overflow-y: auto; padding: var(--esp-6) var(--esp-2); }
.dialogo { width: min(100%, 680px); background: var(--color-superficie); border-radius: var(--radio-l); padding: var(--esp-5) var(--esp-6) var(--esp-6); box-shadow: var(--sombra-3); }
.dialogo:focus { outline: none; }
.dialogo-cabecera { display: flex; justify-content: space-between; align-items: center; gap: var(--esp-2); padding-bottom: var(--esp-3); border-bottom: 1px solid var(--color-borde); margin-bottom: var(--esp-3); }
@media (max-width: 40rem) { .capa { padding: 0; } .dialogo { min-height: 100vh; border-radius: 0; padding: var(--esp-4); } }

/* Estado vacío */
.estado-vacio { display: grid; justify-items: center; text-align: center; gap: var(--esp-2); padding: var(--esp-7) var(--esp-4); color: var(--color-texto-suave);
  border: 1px dashed var(--color-borde-fuerte); border-radius: var(--radio-l); background: var(--color-superficie); }
.estado-vacio > .icono { width: 40px; height: 40px; color: var(--color-borde-fuerte); }
.estado-vacio h2 { color: var(--color-texto); font-size: var(--texto-m); }
.vacio-lista { color: var(--color-texto-suave); padding: var(--esp-4); text-align: center; }

/* Paginación */
.paginacion { display: flex; align-items: center; justify-content: center; gap: var(--esp-3); flex-wrap: wrap; }

/* Zonas de confirmación */
.zona-peligro, .confirmacion { margin-top: var(--esp-4); display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: center; }
.zona-peligro form { display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: center; }

/* 5. Dominio ---------------------------------------------------------------- */
/* Cartón y sellos */
.tarjetas { display: grid; gap: var(--esp-4); }
.serie { font-family: var(--fuente-mono); font-weight: 700; font-size: .92em; background: var(--color-primario-suave); color: var(--color-primario-texto);
  padding: .1rem .45rem; border-radius: var(--radio-s); white-space: nowrap; }
.cabecera-carton { display: flex; justify-content: space-between; color: var(--color-texto-suave); font-size: var(--texto-s); margin-top: var(--esp-3); }
.sellos { list-style: none; padding: 0; margin: var(--esp-2) 0 var(--esp-3); display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: var(--esp-2); }
.sello { aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center; text-align: center; font-size: var(--texto-xs); line-height: 1.15; text-decoration: none; }
.sello strong { font-size: .92rem; }
.sello-hecho { background: var(--color-primario); color: var(--color-sobre-primario); border: 3px double var(--color-superficie); box-shadow: 0 0 0 2px var(--color-primario); }
.sello-hecho .dia { text-transform: capitalize; font-weight: 700; }
.sello-hueco { border: 2px dashed var(--color-borde-fuerte); color: var(--color-texto-suave); background: var(--color-superficie-2); }
a.sello-hueco:hover { border-color: var(--color-primario); color: var(--color-primario-texto); }
.sello-hueco .numero { font-size: var(--texto-l); font-weight: 700; }
.evidencias-mini { font-size: .68rem; }
.acciones-tarjeta { display: grid; grid-template-columns: 2fr 1fr; gap: var(--esp-2); margin-top: var(--esp-4); }
.acciones-tarjeta form { display: contents; }
/* Tarjeta del operario: acción principal a todo el ancho y secundarias compactas debajo. */
.tarjeta-operario { scroll-margin-top: 140px; }
.tarjeta-operario h2 { font-size: var(--texto-l); margin: 0; }
.tarjeta-operario__meta { margin: var(--esp-1) 0 0; color: var(--color-texto-suave); font-size: var(--texto-s); }
.tarjeta-operario:target { box-shadow: 0 0 0 3px var(--color-primario), var(--sombra-2); }
.tarjeta-hecha { border-color: color-mix(in srgb, var(--color-exito) 40%, transparent); }
.hecha-hoy { display: flex; align-items: center; gap: var(--esp-2); margin: var(--esp-3) 0 0; padding: var(--esp-2) var(--esp-3); border-radius: var(--radio-m);
  background: var(--color-exito-suave); color: var(--color-exito); font-weight: 700; font-size: var(--texto-s); }
.acciones-operario { display: grid; gap: var(--esp-2); margin-top: var(--esp-4); }
.acciones-operario form { display: contents; }
.acciones-operario__secundarias { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: var(--esp-2); }
.acciones-operario__secundarias .boton { padding-inline: var(--esp-2); }
@media (max-width: 22rem) { .acciones-operario__secundarias { grid-template-columns: 1fr; } }
.metricas-operario { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-2); }
.metricas-operario .kpi { grid-template-columns: 1fr; padding: var(--esp-3); text-align: center; }
.metricas-operario .kpi__icono { display: none; }
.metricas-operario .kpi > * { grid-column: 1; }
/* Registro de limpieza: «hoy, ahora», foto y firma cómodas en móvil. */
.sello-ahora { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); margin: 0; padding: var(--esp-3); border-radius: var(--radio-m);
  background: var(--color-primario-suave); color: var(--color-primario-texto); }
.sello-ahora a { margin-left: auto; color: inherit; font-weight: 700; }
.entrada-foto { padding: var(--esp-2); }
.entrada-foto::file-selector-button { font: inherit; font-weight: 700; min-height: var(--tactil); padding: var(--esp-2) var(--esp-4); margin-right: var(--esp-3);
  border: 1px solid var(--color-primario); border-radius: var(--radio-m); background: var(--color-primario-suave); color: var(--color-primario-texto); cursor: pointer; }
.firma-pie { display: flex; justify-content: space-between; align-items: center; gap: var(--esp-2); flex-wrap: wrap; }
.alerta-ciclo { display: flex; justify-content: space-between; align-items: center; gap: var(--esp-2); }
.ciclo-historial { border-top: 1px solid var(--color-borde); padding-top: var(--esp-3); margin-top: var(--esp-3); }
.miniaturas { display: flex; gap: var(--esp-2); flex-wrap: wrap; }
.miniaturas img { width: 84px; height: 84px; object-fit: cover; border-radius: var(--radio-s); border: 1px solid var(--color-borde); }
canvas.firma { width: 100%; max-width: 600px; aspect-ratio: 600 / 260; border: 1px dashed var(--color-texto-suave); border-radius: var(--radio-m);
  background: #fff linear-gradient(#b8c2bb, #b8c2bb) no-repeat center 78% / 84% 1px; touch-action: none; }
.firma-actual { max-width: 260px; border: 1px solid var(--color-borde); border-radius: var(--radio-s); background: #fff; }

/* Mapas */
.mapa { width: 100%; height: 240px; border-radius: var(--radio-l); border: 1px solid var(--color-borde); background: var(--color-superficie-2); margin: var(--esp-2) 0; z-index: 0; }
.mapa:has(.mapa-vacio) { height: auto; }
.mapa-medio { height: 300px; }
.mapa-ruta { height: 260px; }
.mapa-selector { height: 260px; cursor: crosshair; }
.mapa .leaflet-control-attribution { background: rgba(255, 255, 255, .9); color: #333; }
.mapa .leaflet-control-attribution a { color: #0b4f8a; text-decoration: underline; }
.mapa-vacio { margin: 0; padding: var(--esp-4); color: var(--color-texto-suave); }
.marcador-ruta { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; font-weight: 700; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
.marcador-ruta.hecho { background: #0f6b4f; }
.marcador-ruta.pendiente { background: #1d5a92; }
.panel-ruta { margin-bottom: var(--esp-4); }

/* Resumen, rutas, facturación, importación */
.fila-estado { display: grid; grid-template-columns: 1fr 120px auto; gap: var(--esp-3); align-items: center; padding: var(--esp-2) 0; border-bottom: 1px solid var(--color-borde); }
.fila-estado.registro-facturar { padding: var(--esp-2); border-radius: var(--radio-s); }
meter.cumplimiento { width: 100%; height: 10px; }
.parada { display: flex; gap: var(--esp-3); align-items: center; padding: var(--esp-2) 0; border-bottom: 1px solid var(--color-borde); }
.numero-parada { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--color-primario); color: var(--color-sobre-primario); font-weight: 700; }
.parada-datos { flex: 1; min-width: 0; }
.acciones-parada { display: flex; gap: var(--esp-1); }
.acciones-parada form { margin: 0; }
.lista-paradas { list-style: none; padding: 0; margin: 0; }
.fila-factura { display: grid; grid-template-columns: 1fr auto; gap: var(--esp-3); }
.factura-herramientas { display: flex; flex-direction: column; gap: var(--esp-2); align-items: stretch; min-width: 11rem; }
.boton-bloque { width: 100%; }
.acciones-cobro { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin: 0; }
.celda-larga { min-width: 220px; }
.pasos-importacion { margin: var(--esp-1) 0; padding-left: 1.3rem; }
.fila-error { background: var(--color-peligro-suave); }
.celda-error { color: var(--color-peligro); font-weight: 700; outline: 2px solid var(--color-peligro); outline-offset: -2px; }
.errores-importacion { color: var(--color-peligro); margin: var(--esp-1) 0; padding-left: 1.2rem; max-height: 220px; overflow-y: auto; }

@media (max-width: 40rem) {
  .fila-estado, .fila-factura { grid-template-columns: 1fr; }
  .fila-estado .insignia { justify-self: start; }
  .registro-cabecera, .tarjeta-cabecera { flex-wrap: wrap; }
}

/* 6. Utilidades e impresión ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } .boton.cargando::before { animation: none; } }
@media print {
  .lateral, .cabecera-movil, .cabecera-operario, .no-imprimir, .aviso, .saltar { display: none !important; }
  .app-admin { display: block; }
  body { background: #fff; color: #000; }
  .panel { border: 0; padding: 0; box-shadow: none; }
}