/* ==========================================================================
   ERP modular · Prototipo — hoja de estilos
   Mobile-first, sin dependencias. Los "design tokens" (custom properties de
   :root) permiten adaptar la interfaz a la marca de cada cliente (marca blanca).
   Contrastes de texto y chips verificados (WCAG 2.2 AA) en tests/color-turnos.test.js.
   ========================================================================== */

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

  /* Marca (JS los sobrescribe con la paleta accesible derivada del color elegido) */
  --color-marca: #4f46e5;
  --marca-sobre: #ffffff;          /* texto encima del color de marca */
  --marca-texto-claro: #4f46e5;    /* marca como texto sobre superficies claras (≥ 4,5:1) */
  --marca-texto-oscuro: #8f8af0;   /* marca como texto sobre superficies oscuras (≥ 4,5:1) */

  /* Tipografía del sistema */
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif;
  --fuente-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --texto-xs: 0.75rem;
  --texto-s: 0.875rem;
  --texto-m: 1rem;
  --texto-l: 1.125rem;
  --texto-xl: 1.5rem;
  --texto-xxl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);

  /* Espaciado (escala de 4 px) */
  --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;

  /* Radios */
  --radio-s: 6px;
  --radio-m: 10px;
  --radio-l: 16px;
  --radio-total: 999px;

  /* Dimensiones */
  --ancho-lateral: 15.5rem;
  --ancho-lateral-colapsada: 4.75rem;
  --alto-nav-movil: 4.25rem;
  --ancho-contenido: 78rem;
  --objetivo-tactil: 2.75rem;

  /* Movimiento */
  --duracion: 160ms;
  --curva: cubic-bezier(0.2, 0, 0, 1);

  /* Tema claro */
  --fondo: #f6f7fb;
  --superficie: #ffffff;
  --superficie-2: #f1f3f8;
  --superficie-hover: #eceff6;
  --borde: #e3e6ee;
  --borde-control: #8a93a6;
  --texto: #141824;
  --texto-suave: #4a5163;
  --texto-tenue: #5b6275;
  --marca-texto: var(--marca-texto-claro);
  --marca-suave: color-mix(in srgb, var(--color-marca) 12%, var(--superficie));
  --foco: var(--marca-texto);

  --ok: #166534;       --ok-fondo: #dcfce7;
  --aviso: #92400e;    --aviso-fondo: #fef3c7;
  --error: #b91c1c;    --error-fondo: #fee2e2;
  --info: #1e40af;     --info-fondo: #dbeafe;
  --neutro: #4a5163;   --neutro-fondo: #eceff6;

  --sombra-1: 0 1px 2px rgb(16 24 40 / 0.06), 0 1px 3px rgb(16 24 40 / 0.08);
  --sombra-2: 0 4px 12px rgb(16 24 40 / 0.08), 0 2px 4px rgb(16 24 40 / 0.06);
  --sombra-3: 0 24px 48px rgb(16 24 40 / 0.18);
}

/* Tema oscuro: por preferencia del sistema (salvo que se fuerce el claro) o forzado */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo: #0f1117;
    --superficie: #171a23;
    --superficie-2: #1e2230;
    --superficie-hover: #252a3a;
    --borde: #2c3142;
    --borde-control: #6b7387;
    --texto: #e7e9ef;
    --texto-suave: #b3b9c7;
    --texto-tenue: #9ba2b3;
    --marca-texto: var(--marca-texto-oscuro);
    --marca-suave: color-mix(in srgb, var(--color-marca) 22%, var(--superficie));
    --ok: #86efac;       --ok-fondo: #12301f;
    --aviso: #fcd34d;    --aviso-fondo: #3a2a0a;
    --error: #fca5a5;    --error-fondo: #3b1517;
    --info: #93c5fd;     --info-fondo: #172554;
    --neutro: #b3b9c7;   --neutro-fondo: #252a3a;
    --sombra-1: 0 1px 2px rgb(0 0 0 / 0.4);
    --sombra-2: 0 4px 14px rgb(0 0 0 / 0.45);
    --sombra-3: 0 24px 48px rgb(0 0 0 / 0.6);
  }
}
:root[data-tema="oscuro"] {
  color-scheme: dark;
  --fondo: #0f1117;
  --superficie: #171a23;
  --superficie-2: #1e2230;
  --superficie-hover: #252a3a;
  --borde: #2c3142;
  --borde-control: #6b7387;
  --texto: #e7e9ef;
  --texto-suave: #b3b9c7;
  --texto-tenue: #9ba2b3;
  --marca-texto: var(--marca-texto-oscuro);
  --marca-suave: color-mix(in srgb, var(--color-marca) 22%, var(--superficie));
  --ok: #86efac;       --ok-fondo: #12301f;
  --aviso: #fcd34d;    --aviso-fondo: #3a2a0a;
  --error: #fca5a5;    --error-fondo: #3b1517;
  --info: #93c5fd;     --info-fondo: #172554;
  --neutro: #b3b9c7;   --neutro-fondo: #252a3a;
  --sombra-1: 0 1px 2px rgb(0 0 0 / 0.4);
  --sombra-2: 0 4px 14px rgb(0 0 0 / 0.45);
  --sombra-3: 0 24px 48px rgb(0 0 0 / 0.6);
}
:root[data-tema="claro"] { color-scheme: light; }

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-bottom: calc(var(--alto-nav-movil) + var(--esp-4)); /* la barra inferior no tapa el foco (WCAG 2.4.11) */
}
body {
  margin: 0;
  font-family: var(--fuente);
  font-size: var(--texto-m);
  line-height: 1.5;
  color: var(--texto);
  background: var(--fondo);
  padding-bottom: calc(var(--alto-nav-movil) + env(safe-area-inset-bottom, 0px));
}
h1, h2, h3, h4 { line-height: 1.25; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: var(--texto-xxl); font-weight: 700; }
h2 { font-size: var(--texto-l); font-weight: 650; }
h3 { font-size: var(--texto-m); font-weight: 650; }
p { margin: 0 0 var(--esp-3); }
p:last-child { margin-bottom: 0; }
a { color: var(--marca-texto); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
code, .mono { font-family: var(--fuente-mono); font-size: 0.875em; }
svg { flex-shrink: 0; }
img, svg { max-width: 100%; }
[hidden] { display: none !important; }
ul, ol { padding-left: 1.25rem; }

:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
  border-radius: var(--radio-s);
}
:focus:not(:focus-visible) { outline: none; }

.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

.saltar {
  position: absolute;
  left: var(--esp-3);
  top: -4rem;
  z-index: 100;
  padding: var(--esp-2) var(--esp-4);
  background: var(--color-marca);
  color: var(--marca-sobre);
  border-radius: var(--radio-m);
  font-weight: 600;
  text-decoration: none;
}
.saltar:focus { top: var(--esp-3); }

/* ---------- 3. Estructura ---------- */
.app { min-height: 100vh; }

/* Barra lateral (escritorio) / barra de pestañas inferior (móvil) */
.lateral {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 40;
  height: calc(var(--alto-nav-movil) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--superficie);
  border-top: 1px solid var(--borde);
  box-shadow: 0 -2px 10px rgb(16 24 40 / 0.06);
}
.lateral__marca, .lateral__pie { display: none; }
.lateral__lista {
  list-style: none;
  margin: 0;
  padding: 0 var(--esp-1);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: var(--alto-nav-movil);
}
.lateral__enlace {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 100%;
  min-height: var(--objetivo-tactil);
  padding: var(--esp-1);
  color: var(--texto-suave);
  text-decoration: none;
  font-size: 0.6875rem;
  font-weight: 600;
  border-radius: var(--radio-m);
  text-align: center;
}
.lateral__enlace svg { width: 1.375rem; height: 1.375rem; }
.lateral__enlace:hover { color: var(--texto); background: var(--superficie-hover); }
.lateral__enlace[aria-current="page"] { color: var(--marca-texto); }
.lateral__enlace[aria-current="page"] .lateral__icono {
  background: var(--marca-suave);
}
.lateral__icono {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 1.75rem;
  border-radius: var(--radio-total);
}
.lateral__texto { line-height: 1.1; }
.lateral__texto-largo { display: none; }

.principal { min-width: 0; }

.barra {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  background: color-mix(in srgb, var(--fondo) 88%, transparent);
  border-bottom: 1px solid var(--borde);
}
.barra__marca-movil { display: flex; align-items: center; gap: var(--esp-2); font-weight: 700; }
.barra__ruta { display: none; color: var(--texto-tenue); font-size: var(--texto-s); margin: 0; }
.barra__ruta strong { color: var(--texto); font-weight: 600; }
.barra__acciones { margin-left: auto; display: flex; align-items: center; gap: var(--esp-2); }
.barra .chip { display: none; }

main {
  max-width: var(--ancho-contenido);
  margin: 0 auto;
  padding: var(--esp-5) var(--esp-4) var(--esp-7);
}
main:focus { outline: none; }

.pie {
  max-width: var(--ancho-contenido);
  margin: 0 auto;
  padding: 0 var(--esp-4) var(--esp-6);
  color: var(--texto-tenue);
  font-size: var(--texto-s);
}

/* Cabecera de sección */
.seccion > * + * { margin-top: var(--esp-5); }
.cabecera-seccion { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--esp-3); }
.cabecera-seccion h1:focus { outline: none; }
.cabecera-seccion h1:focus-visible { outline: 3px solid var(--foco); outline-offset: 4px; }
.subtitulo { color: var(--texto-suave); margin: var(--esp-1) 0 0; }
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--esp-1);
  font-size: var(--texto-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--marca-texto); margin-bottom: var(--esp-1);
}

/* Logo de marca (iniciales) */
.logo {
  display: inline-grid;
  place-items: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: var(--radio-m);
  background: var(--color-marca);
  color: var(--marca-sobre);
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: -0.02em;
  box-shadow: inset 0 -2px 0 rgb(0 0 0 / 0.15);
}

/* ---------- 4. Componentes ---------- */
.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-l);
  box-shadow: var(--sombra-1);
  padding: var(--esp-4);
}
.tarjeta > * + * { margin-top: var(--esp-4); }
.tarjeta__cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2) var(--esp-3); }
.tarjeta__cabecera p { color: var(--texto-suave); font-size: var(--texto-s); margin: var(--esp-1) 0 0; }
.tarjeta--plana { box-shadow: none; background: var(--superficie-2); }

.rejilla { display: grid; gap: var(--esp-4); }
.rejilla-2, .rejilla-3 { display: grid; gap: var(--esp-4); }

/* KPIs (stat tiles: etiqueta · valor · contexto) */
.kpis { display: grid; gap: var(--esp-3); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.kpi {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  padding: var(--esp-4);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-l);
  box-shadow: var(--sombra-1);
  color: inherit;
  text-decoration: none;
}
a.kpi:hover { border-color: color-mix(in srgb, var(--color-marca) 45%, var(--borde)); box-shadow: var(--sombra-2); }
.kpi__cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-2); }
.kpi__etiqueta { font-size: var(--texto-s); font-weight: 600; color: var(--texto-suave); }
.kpi__icono {
  display: inline-grid; place-items: center;
  width: 2.25rem; height: 2.25rem; border-radius: var(--radio-m);
  background: var(--marca-suave); color: var(--marca-texto);
}
.kpi__icono svg { width: 1.25rem; height: 1.25rem; }
.kpi__valor { font-size: 2rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kpi__contexto { font-size: var(--texto-s); color: var(--texto-tenue); display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: center; }
.kpi__ir { position: absolute; top: var(--esp-4); right: var(--esp-4); color: var(--texto-tenue); }

/* Chips de estado: siempre icono/punto + texto (nunca solo color) */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.15rem 0.6rem;
  border-radius: var(--radio-total);
  font-size: var(--texto-xs);
  font-weight: 650;
  line-height: 1.5;
  white-space: nowrap;
  background: var(--neutro-fondo);
  color: var(--neutro);
}
.chip svg { width: 0.85rem; height: 0.85rem; }
.chip--ok { background: var(--ok-fondo); color: var(--ok); }
.chip--aviso { background: var(--aviso-fondo); color: var(--aviso); }
.chip--error { background: var(--error-fondo); color: var(--error); }
.chip--info { background: var(--info-fondo); color: var(--info); }
.chip--marca { background: var(--marca-suave); color: var(--marca-texto); }
.chip--contorno { background: transparent; border: 1px solid var(--borde-control); color: var(--texto-suave); }

/* Botones */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-height: var(--objetivo-tactil);
  padding: 0 var(--esp-4);
  border: 1px solid var(--borde-control);
  border-radius: var(--radio-m);
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  font-size: var(--texto-s);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.boton svg { width: 1.1rem; height: 1.1rem; }
.boton:hover { background: var(--superficie-hover); }
.boton--primario { background: var(--color-marca); border-color: var(--color-marca); color: var(--marca-sobre); box-shadow: var(--sombra-1); }
.boton--primario:hover { background: color-mix(in srgb, var(--color-marca) 88%, #000); }
.boton--fantasma { background: transparent; border-color: transparent; color: var(--texto-suave); }
.boton--fantasma:hover { color: var(--texto); }
.boton--peligro { color: var(--error); border-color: currentColor; background: var(--superficie); }
.boton--peligro:hover { background: var(--error-fondo); }
.boton--grande { min-height: 3.5rem; font-size: var(--texto-m); padding: 0 var(--esp-5); border-radius: var(--radio-l); }
.boton--icono { padding: 0; width: var(--objetivo-tactil); }
.boton--pequeno { min-height: 2.25rem; padding: 0 var(--esp-3); font-size: var(--texto-xs); }
.boton:disabled, .boton[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.boton--primario:disabled { background: var(--color-marca); }
.acciones { display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: center; }
.acciones--fin { justify-content: flex-end; }

/* Formularios */
.form > * + * { margin-top: var(--esp-4); }
.campos { display: grid; gap: var(--esp-4); }
.campo { display: flex; flex-direction: column; gap: var(--esp-1); min-width: 0; }
.campo > label, .etiqueta { font-size: var(--texto-s); font-weight: 600; color: var(--texto); }
.opcional { font-weight: 400; color: var(--texto-tenue); }
.ayuda { font-size: var(--texto-xs); color: var(--texto-tenue); margin: 0; }
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), select, textarea {
  width: 100%;
  min-height: var(--objetivo-tactil);
  padding: var(--esp-2) var(--esp-3);
  border: 1px solid var(--borde-control);
  border-radius: var(--radio-m);
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  font-size: var(--texto-m); /* 16 px: evita el zoom automático en iOS */
}
textarea { min-height: 5rem; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 0; border-color: var(--foco); }
input[readonly] { background: var(--superficie-2); }
input[type="checkbox"], input[type="radio"] { width: 1.15rem; height: 1.15rem; accent-color: var(--color-marca); margin: 0; }
input[type="color"] { width: 3rem; height: var(--objetivo-tactil); padding: 2px; border: 1px solid var(--borde-control); border-radius: var(--radio-m); background: var(--superficie); cursor: pointer; }
[aria-invalid="true"] { border-color: var(--error) !important; box-shadow: 0 0 0 1px var(--error); }
.error-campo { display: flex; gap: var(--esp-1); align-items: center; color: var(--error); font-size: var(--texto-s); font-weight: 600; margin: 0; }
.error-campo svg { width: 1rem; height: 1rem; }
fieldset { border: 1px solid var(--borde); border-radius: var(--radio-m); padding: var(--esp-3) var(--esp-4) var(--esp-4); margin: 0; min-width: 0; }
legend { font-weight: 650; font-size: var(--texto-s); padding: 0 var(--esp-1); }
.casilla { display: flex; align-items: center; gap: var(--esp-2); min-height: var(--objetivo-tactil); font-size: var(--texto-s); cursor: pointer; }
.casillas { display: flex; flex-wrap: wrap; gap: 0 var(--esp-4); }

/* Control segmentado (radios) */
.segmentado { display: inline-flex; flex-wrap: wrap; padding: 3px; gap: 3px; background: var(--superficie-2); border: 1px solid var(--borde); border-radius: var(--radio-m); }
.segmentado label { position: relative; }
.segmentado input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.segmentado span {
  display: inline-flex; align-items: center; gap: var(--esp-1);
  min-height: 2.5rem; padding: 0 var(--esp-3);
  border-radius: calc(var(--radio-m) - 3px);
  font-size: var(--texto-s); font-weight: 600; color: var(--texto-suave);
}
.segmentado input:checked + span { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-1); }
.segmentado input:focus-visible + span { outline: 3px solid var(--foco); outline-offset: 1px; }

/* Pestañas internas (patrón ARIA tabs) */
.pestanas {
  display: flex;
  gap: var(--esp-1);
  overflow-x: auto;
  padding: 3px;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-m);
  scrollbar-width: thin;
}
.pestana {
  display: inline-flex; align-items: center; gap: var(--esp-2);
  min-height: 2.5rem;
  padding: 0 var(--esp-3);
  border: 0;
  border-radius: calc(var(--radio-m) - 3px);
  background: transparent;
  color: var(--texto-suave);
  font: inherit; font-size: var(--texto-s); font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.pestana svg { width: 1rem; height: 1rem; }
.pestana:hover { color: var(--texto); }
.pestana[aria-selected="true"] { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-1); }
.panel-pestana:focus-visible { outline-offset: 4px; }
.panel-pestana > * + * { margin-top: var(--esp-4); }

/* Avisos (banners) */
.aviso {
  display: flex;
  gap: var(--esp-3);
  align-items: flex-start;
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--radio-m);
  border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
  background: var(--info-fondo);
  color: var(--info);
  font-size: var(--texto-s);
}
.aviso svg { width: 1.25rem; height: 1.25rem; margin-top: 1px; }
.aviso p { margin: 0; }
.aviso strong { font-weight: 700; }
.aviso > div > * + * { margin-top: var(--esp-1); }
.aviso--aviso { background: var(--aviso-fondo); color: var(--aviso); }
.aviso--error { background: var(--error-fondo); color: var(--error); }
.aviso--ok { background: var(--ok-fondo); color: var(--ok); }
.aviso ul { margin: var(--esp-1) 0 0; }

/* Tablas: en móvil se convierten en tarjetas (cada celda muestra su etiqueta) */
.tabla-envoltura { border: 1px solid var(--borde); border-radius: var(--radio-l); background: var(--superficie); }
.tabla { width: 100%; border-collapse: collapse; font-size: var(--texto-s); }
.tabla caption { text-align: left; padding: var(--esp-3) var(--esp-4); font-weight: 650; }
.tabla thead { display: none; }
.tabla tr { display: block; padding: var(--esp-3) var(--esp-4); border-top: 1px solid var(--borde); }
.tabla tbody tr:first-child { border-top: 0; }
.tabla caption + thead + tbody tr:first-child { border-top: 1px solid var(--borde); }
.tabla td { display: grid; grid-template-columns: minmax(7.5rem, 38%) 1fr; gap: var(--esp-3); padding: var(--esp-1) 0; align-items: start; }
.tabla td::before { content: attr(data-etiqueta); font-weight: 600; color: var(--texto-tenue); font-size: var(--texto-xs); text-transform: uppercase; letter-spacing: 0.04em; padding-top: 2px; }
.tabla td.celda-principal { display: block; font-weight: 600; font-size: var(--texto-m); padding-bottom: var(--esp-2); }
.tabla td.celda-principal::before { display: none; }
.tabla td[data-etiqueta=""]::before { display: none; }
.tabla td[data-etiqueta=""] { display: block; }
.tabla .num { font-variant-numeric: tabular-nums; }
.tabla .secundario { display: block; color: var(--texto-tenue); font-size: var(--texto-xs); font-weight: 400; }
.tabla tr.fila--destacada { background: var(--marca-suave); }
.tabla tfoot td { font-weight: 700; }
.celda-alerta { color: var(--error); font-weight: 700; }
.huella { font-family: var(--fuente-mono); font-size: var(--texto-xs); overflow-wrap: anywhere; word-break: break-all; }

/* Estados vacíos */
.vacio {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--esp-2);
  padding: var(--esp-6) var(--esp-4);
  color: var(--texto-suave);
  border: 1px dashed var(--borde-control);
  border-radius: var(--radio-l);
  background: var(--superficie-2);
}
.vacio__icono { display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--radio-total); background: var(--marca-suave); color: var(--marca-texto); }
.vacio__icono svg { width: 1.5rem; height: 1.5rem; }
.vacio h3 { color: var(--texto); }
.vacio p { max-width: 36rem; font-size: var(--texto-s); }

/* Listas de alertas / actividad */
.lista-alertas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-2); }
.lista-alertas li {
  display: flex; gap: var(--esp-3); align-items: flex-start;
  padding: var(--esp-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio-m);
  background: var(--superficie);
  font-size: var(--texto-s);
}
.lista-alertas .chip { flex-shrink: 0; }
.lista-alertas__texto { flex: 1; min-width: 0; }
.lista-alertas__meta { display: block; color: var(--texto-tenue); font-size: var(--texto-xs); }

.cronologia { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--borde); }
.cronologia li { position: relative; padding: 0 0 var(--esp-3) var(--esp-4); font-size: var(--texto-s); }
.cronologia li::before { content: ""; position: absolute; left: -7px; top: 0.35rem; width: 12px; height: 12px; border-radius: 50%; background: var(--superficie); border: 2px solid var(--marca-texto); }
.cronologia time { font-weight: 700; font-variant-numeric: tabular-nums; margin-right: var(--esp-2); }

/* Lista de definiciones (detalles) */
.datos { display: grid; grid-template-columns: max-content 1fr; gap: var(--esp-2) var(--esp-4); margin: 0; font-size: var(--texto-s); }
.datos dt { color: var(--texto-tenue); font-weight: 600; }
.datos dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

.totales { display: grid; gap: var(--esp-1); margin: 0 0 0 auto; max-width: 22rem; font-size: var(--texto-s); }
.totales div { display: flex; justify-content: space-between; gap: var(--esp-4); }
.totales dt { color: var(--texto-suave); }
.totales dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; }
.totales .total { font-size: var(--texto-l); border-top: 1px solid var(--borde); padding-top: var(--esp-2); margin-top: var(--esp-1); }
.totales .total dt { color: var(--texto); font-weight: 700; }

/* Reloj checador */
.reloj { display: grid; gap: var(--esp-4); }
.reloj__pantalla {
  display: flex; flex-direction: column; align-items: center; gap: var(--esp-2);
  padding: var(--esp-5) var(--esp-4);
  border-radius: var(--radio-l);
  background: linear-gradient(160deg, var(--marca-suave), var(--superficie-2));
  border: 1px solid var(--borde);
  text-align: center;
}
.reloj__hora { font-size: clamp(2.5rem, 2rem + 3vw, 3.75rem); font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.reloj__fecha { color: var(--texto-suave); font-size: var(--texto-s); text-transform: capitalize; }
.reloj__botones { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-3); }

/* Calendario de turnos */
.calendario { display: grid; gap: var(--esp-2); }
.calendario__dia {
  padding: var(--esp-2) var(--esp-3);
  border-radius: var(--radio-m);
  border: 1px solid var(--borde);
  background: var(--superficie);
  font-size: var(--texto-xs);
}
.calendario__dia--descanso { background: var(--superficie-2); color: var(--texto-tenue); border-style: dashed; }
.calendario__dia strong { display: block; font-size: var(--texto-s); }

/* Muestras de color de marca */
.muestras { display: flex; flex-wrap: wrap; gap: var(--esp-2); border: 0; padding: 0; }
.muestra { position: relative; }
.muestra input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.muestra span {
  display: block; width: var(--objetivo-tactil); height: var(--objetivo-tactil);
  border-radius: var(--radio-total);
  border: 3px solid var(--superficie);
  box-shadow: 0 0 0 1px var(--borde-control);
}
.muestra input:checked + span { box-shadow: 0 0 0 2px var(--superficie), 0 0 0 4px var(--texto); }
.muestra input:focus-visible + span { outline: 3px solid var(--foco); outline-offset: 4px; }
.vista-previa-marca { display: flex; flex-wrap: wrap; gap: var(--esp-3); align-items: center; padding: var(--esp-4); border-radius: var(--radio-m); background: var(--superficie-2); }

/* Diálogo */
dialog {
  width: min(48rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: var(--radio-l);
  background: var(--superficie);
  color: var(--texto);
  box-shadow: var(--sombra-3);
}
dialog::backdrop { background: rgb(10 12 20 / 0.55); }
.dialogo__cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); padding: var(--esp-4) var(--esp-5); border-bottom: 1px solid var(--borde); position: sticky; top: 0; background: var(--superficie); z-index: 1; }
.dialogo__cuerpo { padding: var(--esp-5); }
.dialogo__cuerpo > * + * { margin-top: var(--esp-4); }
.dialogo__pie { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--esp-2); padding: var(--esp-4) var(--esp-5); border-top: 1px solid var(--borde); }

/* Avisos flotantes (decorativos: el texto se anuncia en las regiones aria-live) */
.toasts {
  position: fixed;
  z-index: 60;
  left: 50%;
  bottom: calc(var(--alto-nav-movil) + var(--esp-3) + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: grid;
  gap: var(--esp-2);
  width: min(26rem, calc(100vw - 2rem));
  pointer-events: none;
}
.toast {
  display: flex; gap: var(--esp-2); align-items: flex-start;
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--radio-m);
  background: var(--texto);
  color: var(--superficie);
  box-shadow: var(--sombra-3);
  font-size: var(--texto-s);
  font-weight: 500;
}
.toast svg { width: 1.1rem; height: 1.1rem; margin-top: 1px; }

/* Distintivo VERI*FACTU */
.verifactu {
  display: inline-flex; align-items: center; gap: var(--esp-2);
  padding: var(--esp-1) var(--esp-3);
  border: 2px solid currentColor; border-radius: var(--radio-s);
  font-weight: 800; letter-spacing: 0.04em; color: var(--texto);
}
.bloque-codigo {
  display: block;
  padding: var(--esp-3);
  border-radius: var(--radio-m);
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  font-family: var(--fuente-mono);
  font-size: var(--texto-xs);
  overflow-wrap: anywhere;
  word-break: break-all;
  white-space: pre-wrap;
}

.separador { border: 0; border-top: 1px solid var(--borde); margin: var(--esp-4) 0; }
.texto-suave { color: var(--texto-suave); }
.texto-tenue { color: var(--texto-tenue); font-size: var(--texto-s); }
.num { font-variant-numeric: tabular-nums; }
.prosa { max-width: 46rem; }
.prosa > * + * { margin-top: var(--esp-3); }
.prosa li + li { margin-top: var(--esp-1); }
details > summary { cursor: pointer; font-weight: 600; min-height: var(--objetivo-tactil); display: flex; align-items: center; gap: var(--esp-2); }
details > summary::marker { color: var(--texto-tenue); }

/* En pantallas estrechas el texto de algunos botones se oculta visualmente (sigue siendo su nombre accesible) */
@media (max-width: 39.99rem) {
  .texto-adaptable {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  #btn-restablecer { width: var(--objetivo-tactil); padding: 0; }
}

/* ---------- 5. Tablet ---------- */
@media (min-width: 40rem) {
  main { padding: var(--esp-6) var(--esp-5) var(--esp-7); }
  .campos--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .campos--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .campos--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .campo--ancho { grid-column: 1 / -1; }
  .tarjeta { padding: var(--esp-5); }
  .reloj__botones { grid-template-columns: repeat(4, 1fr); }
  .calendario { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .barra .chip { display: inline-flex; }
}

/* Tablas clásicas cuando hay sitio */
@media (min-width: 52rem) {
  .tabla-envoltura { overflow-x: auto; }
  .tabla thead { display: table-header-group; }
  .tabla tr { display: table-row; padding: 0; border-top: 0; }
  .tabla th, .tabla td { display: table-cell; padding: var(--esp-3) var(--esp-4); text-align: left; vertical-align: middle; border-top: 1px solid var(--borde); }
  .tabla td::before { display: none; }
  .tabla td.celda-principal { display: table-cell; font-size: inherit; padding-bottom: var(--esp-3); }
  .tabla td[data-etiqueta=""] { display: table-cell; }
  .tabla thead th { border-top: 0; background: var(--superficie-2); color: var(--texto-suave); font-size: var(--texto-xs); font-weight: 650; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
  .tabla thead th:first-child { border-top-left-radius: calc(var(--radio-l) - 1px); }
  .tabla thead th:last-child { border-top-right-radius: calc(var(--radio-l) - 1px); }
  .tabla caption + thead th { border-radius: 0; }
  .tabla tbody tr:hover { background: var(--superficie-2); }
  .tabla .num, .tabla th.num { text-align: right; }
  .rejilla-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rejilla-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .reloj { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
}

/* ---------- 6. Escritorio: barra lateral colapsable ---------- */
@media (min-width: 64rem) {
  body { padding-bottom: 0; }
  html { scroll-padding-bottom: 0; }
  .app { display: grid; grid-template-columns: var(--ancho-lateral) minmax(0, 1fr); }
  .app[data-lateral="colapsada"] { grid-template-columns: var(--ancho-lateral-colapsada) minmax(0, 1fr); }
  .lateral {
    position: sticky;
    top: 0;
    inset: auto;
    height: 100vh;
    padding: var(--esp-4) var(--esp-3);
    display: flex;
    flex-direction: column;
    gap: var(--esp-5);
    border-top: 0;
    border-right: 1px solid var(--borde);
    box-shadow: none;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .lateral__marca { display: flex; align-items: center; gap: var(--esp-3); padding: 0 var(--esp-1); min-height: 2.5rem; }
  .lateral__nombre { font-weight: 750; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; }
  .lateral__nombre small { display: block; font-weight: 500; color: var(--texto-tenue); font-size: var(--texto-xs); }
  .lateral__lista { display: flex; flex-direction: column; gap: 2px; height: auto; padding: 0; }
  .lateral__enlace {
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--esp-3);
    height: auto;
    min-height: 2.75rem;
    padding: 0 var(--esp-3);
    font-size: var(--texto-s);
    text-align: left;
    position: relative;
  }
  .lateral__icono { width: auto; height: auto; background: none !important; }
  .lateral__enlace svg { width: 1.25rem; height: 1.25rem; }
  .lateral__enlace[aria-current="page"] { background: var(--marca-suave); color: var(--marca-texto); }
  .lateral__texto-corto { display: none; }
  .lateral__texto-largo { display: inline; }
  .lateral__pie { display: block; margin-top: auto; }
  .lateral__colapsar { width: 100%; justify-content: flex-start; padding: 0 var(--esp-3); }
  .lateral__colapsar svg { transform: rotate(180deg); }

  .app[data-lateral="colapsada"] .lateral { padding-inline: var(--esp-2); }
  .app[data-lateral="colapsada"] .lateral__marca { justify-content: center; padding: 0; }
  .app[data-lateral="colapsada"] .lateral__nombre,
  .app[data-lateral="colapsada"] .lateral__texto,
  .app[data-lateral="colapsada"] .lateral__colapsar-texto {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .app[data-lateral="colapsada"] .lateral__enlace,
  .app[data-lateral="colapsada"] .lateral__colapsar { justify-content: center; padding: 0; }
  .app[data-lateral="colapsada"] .lateral__colapsar svg { transform: none; }
  /* Etiqueta emergente visible al pasar el ratón o con foco cuando está colapsada */
  .app[data-lateral="colapsada"] .lateral__enlace:is(:hover, :focus-visible)::after {
    content: attr(data-etiqueta);
    position: fixed;
    left: calc(var(--ancho-lateral-colapsada) - 0.25rem);
    padding: var(--esp-1) var(--esp-3);
    border-radius: var(--radio-s);
    background: var(--texto);
    color: var(--superficie);
    font-size: var(--texto-xs);
    font-weight: 600;
    white-space: nowrap;
    box-shadow: var(--sombra-2);
    z-index: 50;
  }
  .barra { position: sticky; top: 0; z-index: 30; padding: var(--esp-3) var(--esp-5); backdrop-filter: blur(8px); }
  .barra__marca-movil { display: none; }
  .barra__ruta { display: block; }
  html { scroll-padding-top: 5rem; } /* la barra superior fija no tapa el foco */
  .toasts { bottom: var(--esp-5); left: auto; right: var(--esp-5); transform: none; }
}

/* ---------- 7. Movimiento (solo si el usuario no pide reducirlo) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .boton, .pestana, .lateral__enlace, .kpi, .chip, input, select, textarea, .segmentado span, .muestra span {
    transition: background-color var(--duracion) var(--curva), color var(--duracion) var(--curva),
      border-color var(--duracion) var(--curva), box-shadow var(--duracion) var(--curva), transform var(--duracion) var(--curva);
  }
  a.kpi:hover { transform: translateY(-2px); }
  .boton:active:not(:disabled) { transform: scale(0.98); }
  .seccion:not([hidden]), .panel-pestana:not([hidden]) { animation: aparecer 220ms var(--curva); }
  .toast { animation: aparecer-toast 220ms var(--curva); }
  dialog[open] { animation: aparecer 200ms var(--curva); }
  .app { transition: grid-template-columns 200ms var(--curva); }
  @keyframes aparecer { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  @keyframes aparecer-toast { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
}

/* ---------- 8. Modo de alto contraste forzado (Windows) ---------- */
@media (forced-colors: active) {
  .chip, .boton, .tarjeta, .kpi, .aviso, .pestana[aria-selected="true"], .lateral__enlace[aria-current="page"] { border: 1px solid CanvasText; }
  .lateral__enlace[aria-current="page"] { text-decoration: underline; }
}

/* ---------- 9. Impresión ---------- */
@media print {
  .lateral, .barra, .toasts, .acciones, .pestanas, .saltar { display: none !important; }
  body { padding: 0; background: #fff; color: #000; }
  .tarjeta, .kpi { box-shadow: none; }
}

/* ---------- 10. Trabajadores y Obras ---------- */
/* Barra inferior móvil con más de 5 secciones: columnas automáticas con desplazamiento horizontal */
@media (max-width: 63.99rem) {
  .lateral__lista {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(4.25rem, 1fr);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
}
.tb-asignar { display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: center; margin-top: var(--esp-2); }
.tb-asignar select { width: auto; flex: 1 1 14rem; }
.ob-iframe-correo { width: 100%; min-height: 18rem; border: 1px solid var(--borde); border-radius: var(--radio-m); background: #fff; }

/* ---------- 11. Permisos, usuarios y documentos ---------- */
/* Elementos que el usuario activo no puede usar (data-permiso): se ocultan también a lectores de pantalla */
[data-denegado] { display: none !important; }

/* Selector "Ver como…" de la cabecera */
.ver-como { display: flex; align-items: center; gap: var(--esp-2); font-size: var(--texto-s); font-weight: 600; color: var(--texto-suave); }
.ver-como__select { width: auto !important; max-width: 15rem; min-height: 2.25rem !important; padding-block: var(--esp-1) !important; font-size: var(--texto-s) !important; }
@media (max-width: 39.99rem) { .ver-como__select { max-width: 9.5rem; } }

.lista-simple { margin: 0; padding-left: 1rem; }

/* Matriz de permisos: tabla real también en móvil (desplazamiento horizontal) */
.matriz-envoltura { overflow-x: auto; }
.matriz { width: 100%; border-collapse: collapse; font-size: var(--texto-s); }
.matriz caption { text-align: left; padding: var(--esp-3) var(--esp-4); font-weight: 600; color: var(--texto-suave); }
.matriz th, .matriz td { padding: var(--esp-2) var(--esp-3); border-top: 1px solid var(--borde); text-align: center; vertical-align: middle; }
.matriz thead th { background: var(--superficie-2); color: var(--texto-suave); font-size: var(--texto-xs); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.matriz th[scope="row"], .matriz thead th:first-child { text-align: left; white-space: nowrap; }
.matriz td:last-child { min-width: 11rem; }
.matriz__casilla { display: inline-grid; place-items: center; min-width: var(--objetivo-tactil); min-height: var(--objetivo-tactil); cursor: pointer; border-radius: var(--radio-s); }
.matriz__casilla:hover { background: var(--superficie-hover); }
.matriz input:disabled, .matriz select:disabled { cursor: not-allowed; opacity: 0.75; }

/* Zona de subida (arrastrar y soltar): el input nativo sigue siendo el control con foco y teclado */
.zona-subida { position: relative; border: 2px dashed var(--borde-control); border-radius: var(--radio-l); background: var(--superficie-2); }
.zona-subida:focus-within { outline: 3px solid var(--foco); outline-offset: 2px; }
.zona-subida--activa { border-color: var(--marca-texto); background: var(--marca-suave); }
.zona-subida__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.zona-subida__texto { display: flex; flex-direction: column; align-items: center; gap: var(--esp-2); padding: var(--esp-6) var(--esp-4); text-align: center; color: var(--texto-suave); cursor: pointer; }
.zona-subida__texto strong { color: var(--texto); font-size: var(--texto-m); }
.zona-subida__texto span { font-size: var(--texto-xs); color: var(--texto-tenue); max-width: 34rem; }