/* ─── Variables de tema (claro / oscuro) ───────────────────────────
   Paleta neutra pensada para panel administrativo y formulario público. */
:root {
  --bg: #f7f8fa;
  --surface: #ffffff;
  --surface-elevated: #f3f4f6;
  --border: #e8e8ea;
  --border-subtle: #f0f0f2;
  /* Acento principal (botones sólidos, FAB): negro en claro */
  --primary: #0a0a0a;
  --primary-dark: #262626;
  --primary-light: #f3f4f6;
  --primary-muted: rgba(10, 10, 10, 0.06);
  --on-primary: #ffffff;
  --link: #171717;
  --link-hover: #404040;
  --nav-bg: #f0f1f3;
  --nav-border: #e4e4e7;
  --nav-text: #18181b;
  --nav-muted: #71717a;
  --nav-active-bg: #ffffff;
  --nav-active-border: transparent;
  --text: #09090b;
  --muted: #71717a;
  --success: #15803d;
  --success-bg: #ecfdf3;
  --warning: #b45309;
  --warning-bg: #fffbeb;
  --danger: #dc2626;
  --danger-bg: #fef2f2;
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.06);
  --shadow: var(--shadow-sm);
  --shadow-card: var(--shadow-md);
  --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.04);
  --focus-ring: rgba(10, 10, 10, 0.12);
  /* Fuentes locales / del SO (instalación offline; sin dependencia de CDN) */
  --font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', 'Fira Code', 'Consolas', monospace;

  /* ── Sidebar animation tokens ───────────────────────────────
     Fuente única de verdad para toda la animación de la barra lateral.
     Cambiar aquí afecta CSS y JS vía var(). */
  --sidebar-w-open:      252px;   /* Ancho expandido */
  --sidebar-w-closed:    60px;    /* Ancho rail (solo íconos; ≥ slot 40px + margen) */
  --sb-dur:              280ms;   /* Duración óptima: no rápido, no pesado */
  /* Easing APERTURA: overshoots sutilmente → settle. Sensación de "abrir" */
  --sb-ease-open:        cubic-bezier(0.32, 0.72, 0, 1);
  /* Easing CIERRE: deceleración natural. Sensación de "cerrar" */
  --sb-ease-close:       cubic-bezier(0.4, 0, 0.2, 1);
  /* Delay texto: aparece 60ms DESPUÉS de que el sidebar empiece a abrir,
     y desaparece SIN delay al cerrar (nunca queda texto con espacio insuficiente) */
  --sb-text-delay-in:    60ms;
  --sb-text-delay-out:   0ms;
  --nav-group-duration-open:    260ms;
  --nav-group-duration-close:   220ms;
  --nav-group-easing-open:      cubic-bezier(0.32, 0.72, 0, 1);
  --nav-group-easing-close:     cubic-bezier(0.4, 0, 1, 1);
  --nav-item-stagger:           30ms;
  --nav-item-duration:          160ms;
  --nav-chevron-easing:         cubic-bezier(0.4, 0, 0.2, 1);
  /* Sangría texto de ítems dentro de grupo (respecto al icono de cada sub-enlace). */
  --nav-indent:                 11px;
  /* Espacio icono ↔ etiqueta en enlaces y cabeceras de grupo. */
  --nav-icon-text-gap:           7px;

  /* Cajón interactivo del sidebar (mismo lenguaje que .nav-sidebar-toggle) */
  --nav-slot-size:               40px;
  /* Primera columna del grid: mismo ancho que .nav-sidebar-toggle / .btn-theme-nav */
  --nav-icon-rail-col:          var(--nav-slot-size);
  --nav-slot-radius:             8px;
  --nav-slot-transition:         background 0.18s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.18s ease,
    color 0.15s ease,
    box-shadow 0.18s ease;
  --nav-slot-hover-bg-dark:      rgba(255, 255, 255, 0.1);
  --nav-slot-hover-bd-dark:      rgba(255, 255, 255, 0.14);
  --nav-slot-active-bg-dark:    rgba(255, 255, 255, 0.18);
  --nav-slot-hover-bg-light:    rgba(0, 0, 0, 0.05);
  --nav-slot-hover-bd-light:    rgba(0, 0, 0, 0.1);
  --nav-slot-active-bg-light:    rgba(0, 0, 0, 0.09);
  /* Izquierda del contenido dentro del ítem (un poco de aire; mismo orden que padding derecho 5px) */
  --nav-slot-icon-inset:        7px;
  /*
   * Eje horizontal del ícono (expandido escritorio ↔ rail sin salto): el rail centra el
   * cajón 40px en --sidebar-w-closed; aquí igualamos el borde izq. del cajón con el mismo
   * valor respecto al borde izq. del nav — restando el padding horizontal de .nav-links (.5rem).
   */
  --nav-rail-slot-from-edge: calc((var(--sidebar-w-closed) - var(--nav-slot-size)) / 2);
  --nav-expanded-item-margin-left: calc(var(--nav-rail-slot-from-edge) - 0.5rem);
  /* Pie lateral: mismo eje que los cajón 40px del menú (expandido y rail escritorio). */
  --nav-footer-pad-x:           0.65rem;
  --nav-footer-slot-margin-left: max(0px, calc(var(--nav-rail-slot-from-edge) - var(--nav-footer-pad-x)));

  /* ── Escala de espaciado (base 4px) ──────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ── Escala tipográfica ──────────────────────────────────── */
  --text-xs:   0.75rem;    /* 12px — caption, meta */
  --text-sm:   0.8125rem;  /* 13px — label, helper */
  --text-md:   0.875rem;   /* 14px — body */
  --text-base: 0.9375rem;  /* 15px — body prominente */
  --text-lg:   1rem;       /* 16px — subtítulo */
  --text-xl:   1.125rem;   /* 18px — título secundario */
  --text-2xl:  1.375rem;   /* 22px — título de página */
  --text-3xl:  1.65rem;    /* 26px — display */

  /* ── Colores semánticos adicionales ─────────────────────── */
  /* Acento de marca Entria: índigo neutro (complementa el negro) */
  --accent:      #4f46e5;
  --accent-dark: #3730a3;
  --accent-bg:   rgba(79, 70, 229, 0.08);
  --accent-muted: rgba(79, 70, 229, 0.12);
  /* Info: azul tranquilo para mensajes informativos */
  --info:    #2563eb;
  --info-bg: rgba(37, 99, 235, 0.08);
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0c0c0e;
  --surface: #141416;
  --surface-elevated: #1c1c1f;
  --border: #2a2a2e;
  --border-subtle: #222226;
  --primary: #fafafa;
  --primary-dark: #e4e4e7;
  --primary-light: #27272a;
  --primary-muted: rgba(250, 250, 250, 0.08);
  --on-primary: #0a0a0a;
  --link: #e4e4e7;
  --link-hover: #ffffff;
  --nav-bg: #111113;
  --nav-border: #27272a;
  --nav-text: #ececec;
  --nav-muted: #a1a1aa;
  --nav-active-bg: #1a1a1d;
  --nav-active-border: transparent;
  --text: #fafafa;
  --muted: #a1a1aa;
  --success: #4ade80;
  --success-bg: rgba(74, 222, 128, 0.12);
  --warning: #fbbf24;
  --warning-bg: rgba(251, 191, 36, 0.1);
  --danger: #f87171;
  --danger-bg: rgba(248, 113, 113, 0.12);
  --shadow-sm: 0 1px 0 rgba(255, 255, 255, 0.04);
  --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.55);
  --shadow: var(--shadow-md);
  --shadow-card: var(--shadow-lg);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --focus-ring: rgba(250, 250, 250, 0.18);
  --accent:      #818cf8;
  --accent-dark: #6366f1;
  --accent-bg:   rgba(129, 140, 248, 0.12);
  --accent-muted: rgba(129, 140, 248, 0.16);
  --info:    #60a5fa;
  --info-bg: rgba(96, 165, 250, 0.1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  transition: background .2s, color .2s;
  -webkit-font-smoothing: antialiased;
}
[data-theme="light"] body {
  background: var(--bg);
}

a {
  color: var(--link);
  text-decoration: none;
}
a:hover {
  color: var(--link-hover);
  text-decoration: underline;
}

input, select, textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: var(--font);
  background: var(--surface-elevated);
  color: var(--text);
  line-height: 1.45;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
/* Normalizar altura mínima de campos de texto */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="submit"]):not([type="button"]),
select,
textarea {
  min-height: 42px;
}
/* Checkbox y radio: resetear al tamaño nativo */
input[type="checkbox"],
input[type="radio"] {
  width: auto;
  min-height: 0;
  padding: 0;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--primary);
}
/* File input: padding reducido */
input[type="file"] {
  padding: 7px 12px;
  cursor: pointer;
  font-size: 13px;
}
/* Range: sin padding */
input[type="range"] {
  padding: 0;
  min-height: 0;
  cursor: pointer;
}
/* Select: arrow nativo normalizado cross-browser */
select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  padding-right: 36px;
  cursor: pointer;
}
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea {
  background: var(--surface-elevated);
  border-color: var(--border);
  box-shadow: none;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: rgba(10, 10, 10, 0.2);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
[data-theme="light"] input:focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus {
  box-shadow: 0 0 0 3px var(--focus-ring);
}
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: var(--surface);
  color: var(--text);
  caret-color: var(--text);
  box-shadow: none;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--muted);
  opacity: 0.9;
}
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
  border-color: rgba(250, 250, 250, 0.42);
  background: var(--surface-elevated);
  box-shadow: 0 0 0 3px rgba(250, 250, 250, 0.16);
}
[data-theme="dark"] input::selection,
[data-theme="dark"] textarea::selection {
  background: rgba(250, 250, 250, 0.28);
  color: #ffffff;
}
textarea { resize: vertical; }

/* ── Estados de campo: disabled ────────────────────────────── */
input:disabled,
select:disabled,
textarea:disabled {
  opacity: 0.52;
  cursor: not-allowed;
  background: var(--surface-elevated) !important;
  box-shadow: none !important;
}

/* ── Estados de campo: inválido ─────────────────────────────── */
input:invalid:not(:placeholder-shown):not(:focus),
select:invalid:not(:focus),
textarea:invalid:not(:placeholder-shown):not(:focus) {
  border-color: var(--danger);
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.12);
}

/* ── .field--error: clase JS para marcar error explícito ────── */
.field--error input,
.field--error select,
.field--error textarea {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}
.field--error .field-error-msg {
  display: block;
  margin-top: 5px;
  font-size: var(--text-sm);
  color: var(--danger);
  font-weight: 500;
}
.field-error-msg { display: none; }

/* ── .field--success: campo validado ─────────────────────────── */
.field--success input,
.field--success select,
.field--success textarea {
  border-color: var(--success);
}

/* ── .field-hint: texto de ayuda bajo el campo ───────────────── */
.field-hint {
  display: block;
  margin-top: 5px;
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: 1.45;
}

/* ─── Layout centrado (formulario público y login) ───────────── */
.center-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

/* Login: tarjeta centrada vertical y horizontal, fondo plano */
.center-wrap.center-wrap--login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
[data-theme="light"] .center-wrap.center-wrap--login {
  background: var(--bg);
}
[data-theme="dark"] .center-wrap.center-wrap--login {
  background: var(--bg);
}

.login-page-inner {
  width: 100%;
  max-width: 400px;
  margin-inline: auto;
}

/* ─── Superficies unificadas (.ui-card) — FASE 1 ─────────────────
 * Shell compartido (background/border/radius/shadow/tema oscuro).
 * .doc-card NO forma parte: usa superficie elevada, --radius distinto y sin sombra.
 * ─────────────────────────────────────────────────────────────── */

.ui-card,
.card:not(.login-card),
.detail-card,
.stat-card,
.qr-card,
.table-wrap {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card);
  box-sizing: border-box;
}

[data-theme="dark"] .ui-card,
[data-theme="dark"] .card:not(.login-card),
[data-theme="dark"] .detail-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .qr-card,
[data-theme="dark"] .table-wrap {
  border-color: var(--border);
  box-shadow: var(--shadow);
}

/* Modificadores para nuevo markup (.ui-card) — mismos valores que aliases */
.ui-card--p-2xl {
  padding: 2rem;
  width: 100%;
}
.ui-card--p-lg { padding: 1.6rem; }
.ui-card--p-stat { padding: 1.35rem 1.15rem; text-align: center; }
.ui-card--flush {
  padding: 0;
  overflow: hidden;
}

/* Espaciado vertical tokenizado — sustituye márgenes inline repetidos en vistas */
.u-mt-3 { margin-top: var(--space-3); }
.u-mt-4 { margin-top: var(--space-4); }
.u-mt-6 { margin-top: var(--space-6); }
.u-mb-4 { margin-bottom: var(--space-4); }
.u-mb-5 { margin-bottom: var(--space-5); }
.u-mb-6 { margin-bottom: var(--space-6); }
.u-mb-8 { margin-bottom: var(--space-8); }
.u-max-w-none { max-width: none !important; }
.u-my-4-mx-auto {
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
  margin-left: auto;
  margin-right: auto;
}

.card:not(.login-card) {
  padding: 2rem;
  width: 100%;
}
/* Panel admin: tarjetas más densas que flujos centrados (antes en superadminRouter incrustado) */
.admin-main .card:not(.login-card):not(.card--flush) {
  padding: 1.5rem;
}
.card.card--flush {
  padding: 0;
  overflow: hidden;
}

.card.card--row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
/* Cards centradas (login, mensajes de error) conservan ancho máximo */
.center-wrap > .card { max-width: 480px; }

/* Flujos públicos (recuperar contraseña, etc.): margen + padding que antes iban inline */
.card.card--centered-tight {
  margin: 2rem auto;
  padding: var(--space-5);
}

/* Paneles informes fase 3 (antes margin/padding inline) */
.card.card--centered-report {
  margin: var(--space-4) auto;
  padding: var(--space-4);
}

.card.login-card {
  padding: 0;
  /* background, border, shadow: reglas propias [data-theme] .login-card más abajo */
}

/* ─── Página de formulario contratista ───────────────────────── */
.form-page { min-height: 100vh; background: var(--bg); }

.form-header {
  background: var(--surface);
  color: var(--text);
  padding: 1rem 1.5rem;
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: none;
  box-shadow: var(--shadow-md);
  border-left: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  margin: 0 0.75rem;
  max-width: calc(100% - 1.5rem);
}
[data-theme="light"] .form-header {
  border: 1px solid var(--border-subtle);
  border-top: none;
}
[data-theme="dark"] .form-header {
  margin: 0;
  max-width: none;
  border-radius: 0;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
  border-left: 3px solid var(--text);
}
.logo-area { display: flex; align-items: center; gap: 12px; }
.header-logo-img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: var(--surface-elevated);
  flex-shrink: 0;
  border: 1px solid var(--border-subtle);
}
[data-theme="dark"] .header-logo-img {
  border-color: var(--border);
}
.logo-icon { font-size: 24px; }
.company-label { font-size: 12px; opacity: .8; text-transform: uppercase; letter-spacing: .05em; }
.point-label { font-size: 16px; font-weight: 600; }

.form-container {
  max-width: 640px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.form-title {
  font-size: 1.65rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
  color: var(--text);
  letter-spacing: -0.03em;
}
.form-subtitle { color: var(--muted); margin-bottom: 2rem; }

.section-title {
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin: 2rem 0 1rem;
  padding-bottom: 0.35rem;
  border-bottom: none;
}
[data-theme="light"] .section-title {
  color: #64748b;
}

.field-group { margin-bottom: 1rem; }
.field-group label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.req { color: var(--danger); }

/* ─── Carga de documentos ─────────────────────────────────────── */
.docs-note { color: var(--muted); font-size: 13px; margin-bottom: 1rem; }
.transportador-docs-panel {
  margin: 1.25rem 0 0;
  padding: 1.25rem 1.25rem 1.35rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
[data-theme="light"] .transportador-docs-panel {
  background: var(--surface);
  box-shadow: var(--shadow-md);
}
.section-title-transport {
  margin-top: 0;
  color: var(--text);
}
.docs-note-transport { font-size: 12px; line-height: 1.45; color: var(--muted); margin-bottom: 1rem; }
.doc-item-transport .doc-label { font-weight: 600; }
.doc-upload-list { display: flex; flex-direction: column; gap: 12px; }

.doc-item {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 1.1rem;
  box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .doc-item {
  border-color: var(--border);
  box-shadow: none;
}
.doc-label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 8px; }

.file-drop { position: relative; cursor: pointer; }
.file-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; z-index: 2; }
.file-drop-ui {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 18px;
  text-align: center;
  transition: all 0.2s;
  background: var(--surface-elevated);
  box-shadow: none;
}
[data-theme="dark"] .file-drop-ui {
  background: var(--bg);
  border-color: var(--border);
  box-shadow: none;
}
.file-drop:hover .file-drop-ui,
.file-drop.has-file .file-drop-ui {
  border-color: var(--text);
  background: var(--surface-elevated);
}
.upload-icon { font-size: 24px; display: block; margin-bottom: 6px; }
.upload-text { font-size: 13px; color: var(--muted); }
.file-name-display {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-top: 4px;
}

.btn-add-doc {
  width: 100%;
  margin-top: 1rem;
  padding: 14px;
  background: var(--surface-elevated);
  border: 2px dashed var(--border);
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: none;
}
[data-theme="light"] .btn-add-doc:hover {
  border-color: var(--text);
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .btn-add-doc {
  background: transparent;
  border-color: var(--border);
}
[data-theme="dark"] .btn-add-doc:hover {
  border-color: var(--muted);
  color: var(--text);
  background: var(--surface-elevated);
}

/* ─── Botones — sistema unificado ────────────────────────────── */
/* Base compartida: todos los botones se alinean igual */
.btn-submit,
.btn-secondary,
.btn-action,
.btn-toggle,
.btn-delete,
.btn-view,
.btn-dl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--radius-pill);
  font-family: var(--font);
  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s, opacity 0.15s, transform 0.12s;
  max-width: 100%;
}

.btn-submit {
  width: 100%;
  padding: 12px 22px;
  margin-top: 1.5rem;
  background: var(--primary);
  color: var(--on-primary);
  border: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: var(--shadow-md);
  min-height: 44px;
}
.btn-submit:hover {
  background: var(--primary-dark);
  box-shadow: var(--shadow-lg);
}
.btn-submit:active {
  transform: translateY(1px);
  opacity: 0.96;
  box-shadow: var(--shadow-sm);
}

/* ─── btn-submit compacto: links y botones de acción en headers ── */
/* Los <a class="btn-submit"> nunca deben ser ancho completo       */
a.btn-submit {
  width: auto;
  margin-top: 0;
}
/* Botones dentro de contenedores de acciones */
.header-actions .btn-submit,
.admin-header .btn-submit,
.porteria-actions .btn-submit,
.qr-actions .btn-submit,
.delete-qr-actions .btn-submit,
.doc-actions .btn-submit,
.visits-table .btn-submit,
.pagination-bar .btn-submit {
  width: auto;
  margin-top: 0;
}
/* Botón submit dentro de form inline (ej: "Llegó" en tabla) */
form[style*="inline"] .btn-submit,
form[style*="display:inline"] .btn-submit {
  width: auto;
  margin-top: 0;
  padding: 6px 14px;
  min-height: 32px;
  font-size: 13px;
}

.btn-secondary {
  padding: 9px 18px;
  min-height: 38px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  box-shadow: none;
}
[data-theme="light"] .btn-secondary:hover {
  border-color: var(--text);
  color: var(--text);
  background: var(--surface-elevated);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}
[data-theme="dark"] .btn-secondary {
  background: transparent;
  border-color: var(--border);
  box-shadow: none;
}
[data-theme="dark"] .btn-secondary:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-muted);
  text-decoration: none;
}

.btn-action {
  padding: 7px 14px;
  min-height: 34px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  box-shadow: none;
}
[data-theme="light"] .btn-action:hover {
  border-color: var(--text);
  background: var(--surface-elevated);
  text-decoration: none;
}
[data-theme="dark"] .btn-action {
  background: transparent;
  border-color: var(--border);
  box-shadow: none;
}
[data-theme="dark"] .btn-action:hover {
  border-color: var(--primary);
  background: var(--primary-muted);
  text-decoration: none;
}

.btn-toggle {
  padding: 7px 14px;
  min-height: 34px;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}
[data-theme="light"] .btn-toggle {
  box-shadow: none;
}
[data-theme="light"] .btn-toggle:hover {
  border-color: var(--text);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .btn-toggle:hover {
  border-color: var(--muted);
  background: var(--surface-elevated);
}

.btn-delete {
  padding: 7px 14px;
  min-height: 34px;
  background: var(--surface);
  color: var(--danger);
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  box-shadow: none;
}
[data-theme="light"] .btn-delete:hover {
  background: var(--danger-bg);
  border-color: var(--danger);
  text-decoration: none;
}
[data-theme="dark"] .btn-delete {
  background: transparent;
  border-color: var(--border);
  box-shadow: none;
}
[data-theme="dark"] .btn-delete:hover {
  background: var(--danger-bg);
  border-color: var(--danger);
  text-decoration: none;
}

.btn-submit-danger {
  width: auto;
  margin-top: 0;
  background: var(--danger);
  color: #fff;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
}
.btn-submit-danger:hover { filter: brightness(1.05); }

.delete-qr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 1.25rem; }
.delete-qr-card p { margin-bottom: 1rem; line-height: 1.5; }

/* ─── Errores / éxitos ───────────────────────────────────────────── */
.form-error {
  background: var(--danger-bg);
  color: var(--danger);
  border: none;
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 14px;
  margin-top: 1rem;
  box-shadow: var(--shadow-md);
}
[data-theme="light"] .form-error {
  border: 1px solid var(--border-subtle);
}
.form-success-banner {
  background: var(--success-bg);
  color: var(--success);
  border: none;
  border-radius: var(--radius);
  padding: 14px 18px;
  font-size: 14px;
  margin-bottom: 1.25rem;
  font-weight: 600;
  box-shadow: var(--shadow-md);
}
[data-theme="light"] .form-success-banner {
  border: 1px solid var(--border-subtle);
}

/* ─── Badges de estado ────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
[data-theme="dark"] .badge {
  box-shadow: none;
}
.badge-pendiente                { background: var(--warning-bg);  color: var(--warning); }
.badge-en_revision              { background: var(--accent-bg);   color: var(--accent); }
.badge-documentacion_incompleta { background: var(--warning-bg);  color: var(--warning); }
.badge-aprobado                 { background: var(--success-bg);  color: var(--success); }
.badge-rechazado                { background: var(--danger-bg);   color: var(--danger); }
.badge-other                    { background: var(--surface-elevated); color: var(--muted); border: 1px solid var(--border); }
/* ── Variantes de badge adicionales (usadas en server.js / phase3Mount) ── */
.badge-docs         { background: var(--info-bg);         color: var(--info); }
.badge-en_sitio     { background: var(--success-bg);      color: var(--success); }
.badge-secondary    { background: var(--surface-elevated); color: var(--muted); border: 1px solid var(--border); }
.badge-info         { background: var(--info-bg);         color: var(--info); }
.badge-active       { background: var(--success-bg);      color: var(--success); }
.badge-suspended    { background: var(--warning-bg);      color: var(--warning); }
.badge-cancelled    { background: var(--surface-elevated); color: var(--muted); }
.badge-accent       { background: var(--accent-bg);       color: var(--accent); }
[data-theme="dark"] .badge-en_revision     { background: var(--accent-bg);   color: var(--accent); }
[data-theme="dark"] .badge-docs            { background: var(--info-bg);     color: var(--info); }
[data-theme="dark"] .badge-other,
[data-theme="dark"] .badge-secondary       { background: var(--border-subtle); color: var(--muted); border-color: var(--border); }

/* ── Stat cards: variantes faltantes ────────────────────────── */
.stat-alert .stat-num  { color: var(--warning); }
.stat-danger .stat-num { color: var(--danger); }
.stat-info .stat-num   { color: var(--info); }
.stat-accent .stat-num { color: var(--accent); }

/* ─── Confirmación ────────────────────────────────────────────── */
.success-card { text-align: center; }
.success-icon { font-size: 3.5rem; margin-bottom: 1rem; }
.success-card h2 { font-size: 1.5rem; color: var(--success); margin-bottom: .5rem; }
.visit-summary {
  text-align: left;
  margin: 1.5rem 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background: var(--surface);
}
[data-theme="dark"] .visit-summary {
  border-color: var(--border);
  box-shadow: none;
}
.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 14px;
}
.summary-row:last-child {
  border-bottom: none;
}
[data-theme="light"] .summary-row {
  border-bottom-color: rgba(15, 23, 42, 0.05);
}
.summary-row span:first-child { color: var(--muted); }
.wait-msg { color: var(--muted); font-size: 14px; margin-top: 1rem; }

.queue-ticket-banner {
  text-align: left;
  margin: 1rem 0 0;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(56, 189, 248, 0.4);
  background: rgba(56, 189, 248, 0.12);
}
.queue-ticket-num {
  font-size: 2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
  letter-spacing: 0.02em;
}
.visits-table .queue-num {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
  color: var(--muted);
  font-weight: 600;
}
[data-theme="dark"] .queue-ticket-banner {
  border-color: rgba(103, 232, 249, 0.25);
  background: rgba(103, 232, 249, 0.08);
}

/* ─── Admin layout — shell fijo al viewport ───────────────────── */
/*
 * El layout ocupa exactamente 100vh y oculta su overflow.
 * Esto convierte a .admin-layout en el contenedor de scroll, NO el body.
 * Resultado: barra lateral y contenido scrollean de forma independiente;
 * la aplicación nunca "mueve" el chrome fuera de la pantalla.
 */
.admin-layout {
  display: flex;
  height: 100vh;       /* Fijo al viewport — el body NO scrollea */
  overflow: hidden;    /* Todo overflow queda dentro del layout */
}

.admin-nav {
  width: var(--sidebar-w-open);
  background: var(--nav-bg);
  color: var(--nav-text);
  display: flex;
  flex-direction: column;
  padding: 0;
  flex-shrink: 0;
  min-height: 0;
  overflow: hidden;
  border-right: 1px solid var(--nav-border);
  box-shadow: 3px 0 18px rgba(0, 0, 0, 0.04);
  /* GPU: promueve la barra a su propia capa antes de animar */
  will-change: width;
  backface-visibility: hidden;
  /*
   * TRUCO DE EASING DIRECCIONAL:
   * El CSS spec dice que la transition usada es la del "after-change style"
   * (el estado final al que se transiciona, NO el estado de origen).
   *
   * Por tanto:
   *   - Esta transición (estado base) se usa cuando EXPANDE (→ base)
   *   - La transición en .sidebar-collapsed se usa cuando COLAPSA (→ collapsed)
   *
   * Resultado: apertura usa ease-open y cierre usa ease-close. Sin JS.
   */
  transition:
    width      var(--sb-dur) var(--sb-ease-open),
    box-shadow var(--sb-dur) var(--sb-ease-open);
}
[data-theme="dark"] .admin-nav {
  box-shadow: 3px 0 24px rgba(0, 0, 0, 0.3);
}
/* Modo rail: solo íconos — easing CIERRE cuando se llega a este estado */
.admin-layout.sidebar-collapsed .admin-nav {
  width: var(--sidebar-w-closed);
  box-shadow: none;
  transition:
    width      var(--sb-dur) var(--sb-ease-close),
    box-shadow var(--sb-dur) var(--sb-ease-close);
}
[data-theme="dark"] .admin-layout.sidebar-collapsed .admin-nav {
  box-shadow: none;
}
/* Logo-wrap en modo rail: desvanece con delay=0 (sale antes que el sidebar cierre),
   y aparece con delay-in (llega cuando ya hay espacio suficiente) */
.admin-layout.sidebar-collapsed .nav-logo-wrap {
  opacity: 0;
  max-width: 0;
  transform: translateX(-6px);
  pointer-events: none;
  /* Colapso: desaparece inmediatamente (delay-out=0) */
  transition:
    opacity   var(--sb-dur) var(--sb-ease-close) var(--sb-text-delay-out),
    max-width var(--sb-dur) var(--sb-ease-close) var(--sb-text-delay-out),
    transform var(--sb-dur) var(--sb-ease-close) var(--sb-text-delay-out);
}
/*
 * .nav-brand-row y .nav-brand-block: sin overrides en modo rail.
 * El toggle mantiene siempre el mismo margin/box (40×40); no alternar
 * estilos rail/expandido para evitar saltos visuales al animar el ancho.
 */
/* ── Modo rail: textos se desvanecen; glifo en columna fija (--nav-icon-rail-col) ───
 * Sin alternar justify-content → no salta al expandir/colapsar.
 */
.admin-layout.sidebar-collapsed .nav-link-text {
  opacity: 0;
  max-width: 0;
  min-width: 0;
  /*
   * padding-left: 0 explícito — necesario para garantizar que el gap
   * desaparece totalmente independientemente de box-sizing.
   */
  padding-left: 0;
  /* Sin translate en rail estable: evita sensación de “parpado” junto al icono */
  transform: none;
  transition:
    opacity      var(--sb-dur) var(--sb-ease-close) var(--sb-text-delay-out),
    max-width    var(--sb-dur) var(--sb-ease-close) var(--sb-text-delay-out),
    padding-left var(--sb-dur) var(--sb-ease-close) var(--sb-text-delay-out);
}
.admin-layout.sidebar-collapsed .nav-group-label {
  opacity: 0;
  max-width: 0;
  width: 0;
  padding-left: 0;
  overflow: hidden;
}
.admin-layout.sidebar-collapsed .nav-group-chevron {
  opacity: 0;
  width: 0;
  overflow: hidden;
}
.admin-layout.sidebar-collapsed .nav-group-trigger::after {
  content: attr(data-tooltip);
  position: fixed;
  z-index: 650;
  left: calc(var(--sidebar-w-closed) + 12px);
  transform: translateY(-50%);
  top: var(--nav-tooltip-top, 0px);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}
.admin-layout.sidebar-collapsed .nav-group-trigger:hover::after,
.admin-layout.sidebar-collapsed .nav-group-trigger:focus-visible::after {
  opacity: 1;
}
.admin-layout.sidebar-collapsed .nav-group-panel {
  display: none !important;
  height: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  border-left-color: transparent;
}
/* Rail: sin “tarjeta” de fondo en el contenedor del grupo (p. ej. grupo con hijo activo) */
.admin-layout.sidebar-collapsed .nav-group,
.admin-layout.sidebar-collapsed .nav-group.nav-group-open,
.admin-layout.sidebar-collapsed .nav-group.nav-group-has-active {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
/*
 * Escritorio — rail: cajón de cada ítem = mismo tamaño y lenguaje que .nav-sidebar-toggle
 * (40×40, radio 8px, borde 1px transparente, hover/active con tokens nav-slot).
 */
@media (min-width: 769px) {
  /* Rail estrecho: menos padding horizontal para que el toggle 40×40 quepa sin overflow */
  .admin-layout.sidebar-collapsed .nav-brand-block {
    padding-left: 10px;
    padding-right: 10px;
  }
  .admin-layout.sidebar-collapsed .nav-links {
    display: flex;
    flex-direction: column;
    /*
     * NO center aquí: mientras anima width 252→76, align-items:center desplazaría
     * los cajones hacia el centro. Inset fijo = mismo eje X que modo expandido.
     */
    align-items: stretch;
    gap: 2px;
    padding: 0.5rem 0 0.75rem;
    width: 100%;
    box-sizing: border-box;
  }
  .admin-layout.sidebar-collapsed .nav-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .admin-layout.sidebar-collapsed .nav-links .nav-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--nav-slot-size) !important;
    height: var(--nav-slot-size) !important;
    min-width: var(--nav-slot-size) !important;
    min-height: var(--nav-slot-size) !important;
    max-width: var(--nav-slot-size) !important;
    max-height: var(--nav-slot-size) !important;
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: var(--nav-rail-slot-from-edge) !important;
    margin-right: auto !important;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: var(--nav-slot-radius);
    background: transparent !important;
    color: var(--nav-text);
    box-shadow: none !important;
    transition: var(--nav-slot-transition) !important;
  }
  .admin-layout.sidebar-collapsed .nav-links .nav-link:hover {
    background: var(--nav-slot-hover-bg-dark) !important;
    border-color: var(--nav-slot-hover-bd-dark) !important;
    box-shadow: none !important;
  }
  [data-theme="light"] .admin-layout.sidebar-collapsed .nav-links .nav-link:hover {
    background: var(--nav-slot-hover-bg-light) !important;
    border-color: var(--nav-slot-hover-bd-light) !important;
  }
  .admin-layout.sidebar-collapsed .nav-links .nav-link:active {
    background: var(--nav-slot-active-bg-dark) !important;
  }
  [data-theme="light"] .admin-layout.sidebar-collapsed .nav-links .nav-link:active {
    background: var(--nav-slot-active-bg-light) !important;
  }
  .admin-layout.sidebar-collapsed .nav-links .nav-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--focus-ring);
  }
  .admin-layout.sidebar-collapsed .nav-links .nav-link.nav-active {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }
  .admin-layout.sidebar-collapsed .nav-links .nav-link.nav-active::before {
    display: none;
  }
  .admin-layout.sidebar-collapsed .nav-group-trigger {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--nav-slot-size) !important;
    height: var(--nav-slot-size) !important;
    min-width: var(--nav-slot-size) !important;
    min-height: var(--nav-slot-size) !important;
    max-width: var(--nav-slot-size) !important;
    max-height: var(--nav-slot-size) !important;
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: var(--nav-rail-slot-from-edge) !important;
    margin-right: auto !important;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: var(--nav-slot-radius);
    background: transparent !important;
    color: var(--nav-text);
    box-shadow: none !important;
    transition: var(--nav-slot-transition) !important;
  }
  .admin-layout.sidebar-collapsed .nav-group-has-active .nav-group-trigger {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }
  .admin-layout.sidebar-collapsed .nav-group-trigger:hover {
    background: var(--nav-slot-hover-bg-dark) !important;
    border-color: var(--nav-slot-hover-bd-dark) !important;
  }
  [data-theme="light"] .admin-layout.sidebar-collapsed .nav-group-trigger:hover {
    background: var(--nav-slot-hover-bg-light) !important;
    border-color: var(--nav-slot-hover-bd-light) !important;
  }
  .admin-layout.sidebar-collapsed .nav-group-trigger:active {
    background: var(--nav-slot-active-bg-dark) !important;
  }
  [data-theme="light"] .admin-layout.sidebar-collapsed .nav-group-trigger:active {
    background: var(--nav-slot-active-bg-light) !important;
  }
  .admin-layout.sidebar-collapsed .nav-group-trigger:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--focus-ring);
  }
  .admin-layout.sidebar-collapsed .nav-link-text,
  .admin-layout.sidebar-collapsed .nav-group-label,
  .admin-layout.sidebar-collapsed .nav-group-chevron {
    display: none !important;
  }
  .admin-layout.sidebar-collapsed .nav-links .nav-link > .nav-svg,
  .admin-layout.sidebar-collapsed .nav-links .nav-link > img {
    width: 16px !important;
    height: 16px !important;
    opacity: 1;
    flex-shrink: 0;
    margin: 0 !important;
    color: currentColor;
    transition: color 0.15s ease, opacity 0.15s ease;
  }
  .admin-layout.sidebar-collapsed .nav-group-icon,
  .admin-layout.sidebar-collapsed .nav-group-icon svg {
    width: 18px !important;
    height: 18px !important;
    opacity: 1;
    flex-shrink: 0;
    margin: 0 !important;
    color: currentColor;
    transition: color 0.15s ease, opacity 0.15s ease;
  }
  .admin-layout.sidebar-collapsed .nav-links .nav-link.nav-active > .nav-svg,
  .admin-layout.sidebar-collapsed .nav-links .nav-link.nav-active > img {
    opacity: 1;
    color: var(--accent);
  }
  .admin-layout.sidebar-collapsed .nav-group-has-active .nav-group-icon,
  .admin-layout.sidebar-collapsed .nav-group-has-active .nav-group-icon svg {
    opacity: 1;
    color: var(--accent);
  }
  .admin-layout.sidebar-collapsed .btn-theme-nav {
    margin-left: var(--nav-footer-slot-margin-left) !important;
    margin-right: auto !important;
    flex-shrink: 0;
  }
  .admin-layout.sidebar-collapsed .nav-footer {
    align-items: flex-start;
  }
  .admin-layout.sidebar-collapsed .nav-user-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--nav-slot-size) !important;
    height: var(--nav-slot-size) !important;
    min-width: var(--nav-slot-size) !important;
    min-height: var(--nav-slot-size) !important;
    max-width: var(--nav-slot-size) !important;
    max-height: var(--nav-slot-size) !important;
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: var(--nav-footer-slot-margin-left) !important;
    margin-right: auto !important;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: var(--nav-slot-radius);
    background: transparent !important;
    color: var(--nav-text);
    transition: var(--nav-slot-transition) !important;
  }
  .admin-layout.sidebar-collapsed .nav-user-btn:hover {
    background: var(--nav-slot-hover-bg-dark) !important;
    border-color: var(--nav-slot-hover-bd-dark) !important;
  }
  [data-theme="light"] .admin-layout.sidebar-collapsed .nav-user-btn:hover {
    background: var(--nav-slot-hover-bg-light) !important;
    border-color: var(--nav-slot-hover-bd-light) !important;
  }
  .admin-layout.sidebar-collapsed .nav-user-btn:active {
    background: var(--nav-slot-active-bg-dark) !important;
  }
  [data-theme="light"] .admin-layout.sidebar-collapsed .nav-user-btn:active {
    background: var(--nav-slot-active-bg-light) !important;
  }
  .admin-layout.sidebar-collapsed .nav-user-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--focus-ring);
  }
  .admin-layout.sidebar-collapsed .nav-user-btn[aria-expanded="true"] {
    background: var(--nav-slot-hover-bg-dark) !important;
    border-color: var(--nav-slot-hover-bd-dark) !important;
  }
  [data-theme="light"] .admin-layout.sidebar-collapsed .nav-user-btn[aria-expanded="true"] {
    background: var(--nav-slot-hover-bg-light) !important;
    border-color: var(--nav-slot-hover-bd-light) !important;
  }
  .admin-layout.sidebar-collapsed .nav-user-avatar {
    width: 28px;
    height: 28px;
    font-size: 10px;
    border-radius: 7px;
  }
  .admin-layout.sidebar-collapsed .nav-user-btn-info,
  .admin-layout.sidebar-collapsed .nav-user-chevron {
    display: none !important;
  }
}
/*
 * .nav-footer en modo rail: sin cambio de padding.
 * El footer mantiene su posición; solo se ocultan los elementos
 * de texto mediante opacity/max-height (ya definidos arriba).
 */

/* ── Indicador activo ──────────────────────────────────────────
 * El indicador vive en ::before FUERA del box (en el margen de 8px),
 * así el icono queda siempre en la misma posición: no hay diferencia
 * de espaciado entre items activos e inactivos.
 */
.nav-links .nav-link.nav-active {
  background: var(--surface-elevated);
  color: var(--text);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
[data-theme="light"] .nav-links .nav-link.nav-active {
  border-color: var(--border-subtle);
  box-shadow: var(--shadow-md);
}
/* Barra de acento izquierda: ::before centrado verticalmente en el margen */
.nav-links .nav-link.nav-active::before {
  content: '';
  position: absolute;
  left: -8px;          /* dentro del margen 8px, visible gracias a overflow:visible */
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 55%;
  min-height: 14px;
  background: var(--accent);
  border-radius: 0 3px 3px 0;
  transition: opacity var(--sb-dur) var(--sb-ease-close);
}
[data-theme="dark"] .nav-links .nav-link.nav-active::before {
  box-shadow: 0 0 6px rgba(129, 140, 248, 0.4);
}

/* ── Control de scrollbar durante animación ─────────────────
   .is-animating evita que el scrollbar parpadee o aparezca
   mientras el sidebar está en movimiento. JS lo aplica en el
   toggle y lo remueve en transitionend. */
.admin-layout.is-animating .nav-links {
  overflow: hidden;
}
/* Durante animación: reduce el will-change scope (sólo mientras se anima) */
.admin-layout.is-animating .admin-nav {
  will-change: width;
}

/* ── Anti-FOUC: bloquea transición en carga inicial ────────── */
.admin-nav.no-transition,
.admin-nav.no-transition * {
  transition-duration: 0.01ms !important;
  animation-duration: 0.01ms !important;
}

/* ── Tooltip rail (modo colapsado escritorio) ─────────────── */
.nav-rail-tooltip {
  position: fixed;
  z-index: 600;
  pointer-events: none;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  box-shadow: var(--shadow-md);
  transform: translateY(-50%);
  animation: navTooltipIn 0.15s cubic-bezier(0.4, 0, 0.2, 1) both;
}
[data-theme="dark"] .nav-rail-tooltip {
  background: var(--surface-elevated);
  box-shadow: var(--shadow-lg);
}
@keyframes navTooltipIn {
  from { opacity: 0; transform: translateY(-50%) translateX(-8px); }
  to   { opacity: 1; transform: translateY(-50%) translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .admin-nav,
  .nav-hamburger span,
  .admin-sidebar-backdrop,
  .nav-sidebar-toggle,
  .nav-link-text,
  .nav-logo-wrap,
  .nav-user-block,
  .nav-footer > .nav-user,
  .btn-theme-nav span,
  .nav-footer-actions .nav-footer-link > span,
  .nav-rail-tooltip {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}
[data-theme="light"] .admin-nav {
  background: var(--nav-bg);
  box-shadow: none;
  border-right: 1px solid var(--nav-border);
}
.nav-brand-block {
  flex-shrink: 0;
  position: relative;
  padding: 1.1rem 1rem 1rem;
  border-bottom: 1px solid var(--nav-border);
}
[data-theme="light"] .nav-brand-block {
  border-bottom-color: rgba(15, 23, 42, 0.06);
}
.nav-brand-logo { margin-bottom: .65rem; }
.nav-brand-logo img { max-height: 40px; max-width: 100%; object-fit: contain; }
.nav-brand-row {
  display: flex;
  align-items: center; /* mismo eje vertical que el cajón 40×40 del menú */
  gap: 0.35rem;
}
.nav-sidebar-toggle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--nav-slot-size);
  height: var(--nav-slot-size);
  padding: 0;
  margin: 0;
  border: 1px solid transparent;
  border-radius: var(--nav-slot-radius);
  background: transparent;
  color: var(--nav-text);
  cursor: pointer;
  transition: var(--nav-slot-transition);
}
.nav-sidebar-toggle:hover {
  background: var(--nav-slot-hover-bg-dark);
  border-color: var(--nav-slot-hover-bd-dark);
}
[data-theme="light"] .nav-sidebar-toggle:hover {
  background: var(--nav-slot-hover-bg-light);
  border-color: var(--nav-slot-hover-bd-light);
}
.nav-sidebar-toggle:active {
  background: var(--nav-slot-active-bg-dark);
}
[data-theme="light"] .nav-sidebar-toggle:active {
  background: var(--nav-slot-active-bg-light);
}
.nav-sidebar-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}
/* Hamburger — líneas con tamaños escalonados para look más refinado */
.nav-hamburger {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  pointer-events: none;
  width: 16px;
}
.nav-hamburger span {
  display: block;
  height: 1.6px;
  border-radius: 2px;
  background: currentColor;
  /*
   * transform: spring suave para la rotación de las barras (se ve natural)
   * width: ease-close sin overshoot (spring en width provoca glitch visual)
   * opacity: sincronizado con el sidebar
   */
  transition:
    transform var(--sb-dur) cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity   var(--sb-dur) var(--sb-ease-close),
    width     var(--sb-dur) var(--sb-ease-close);
}
.nav-hamburger span:nth-child(1) { width: 16px; }
.nav-hamburger span:nth-child(2) { width: 10px; }
.nav-hamburger span:nth-child(3) { width: 13px; }

/*
 * Colapsado escritorio: hamburguesa → chevron › limpio
 * Las tres barras se transforman así:
 *   Barra 1 → brazo superior del ›  (rota +35deg hacia abajo)
 *   Barra 2 → desaparece (opacidad 0)
 *   Barra 3 → brazo inferior del › (rota -35deg hacia arriba)
 * align-items cambia a center para que el vértice quede centrado.
 */
.admin-layout.sidebar-collapsed .nav-hamburger {
  width: 16px;
}
.admin-layout.sidebar-collapsed .nav-hamburger span:nth-child(1) {
  transform: translateY(3.4px) rotate(35deg);
  width: 10px;
}
.admin-layout.sidebar-collapsed .nav-hamburger span:nth-child(2) {
  opacity: 0;
  width: 0;
  transform: scaleX(0);
}
.admin-layout.sidebar-collapsed .nav-hamburger span:nth-child(3) {
  transform: translateY(-3.4px) rotate(-35deg);
  width: 10px;
}
.nav-logo-wrap {
  flex: 1;
  min-width: 0;
  max-width: 200px;   /* valor fijo necesario para animar max-width */
  overflow: hidden;
  padding-top: 0;
  /* Expansión: aparece 60ms después de que el sidebar empiece a abrir */
  transition:
    opacity   var(--sb-dur) var(--sb-ease-open) var(--sb-text-delay-in),
    max-width var(--sb-dur) var(--sb-ease-open) var(--sb-text-delay-in),
    transform var(--sb-dur) var(--sb-ease-open) var(--sb-text-delay-in);
}
.nav-logo { font-size: 1.05rem; font-weight: 800; line-height: 1.2; padding: 0; color: var(--text); letter-spacing: -0.03em; }
.nav-logo-sub {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--nav-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* Solo la lista de menús hace scroll */
.nav-links {
  flex: 1 1 0;
  min-height: 0;
  padding: 0.5rem 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--nav-border) transparent;
}
.nav-links::-webkit-scrollbar { width: 5px; }
.nav-links::-webkit-scrollbar-track { background: transparent; }
.nav-links::-webkit-scrollbar-thumb {
  background: var(--nav-border);
  border-radius: 5px;
}
.nav-links::-webkit-scrollbar-thumb:hover { background: var(--muted); }
.nav-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-group + .nav-group {
  margin-top: 4px;
}
.nav-group-trigger {
  display: grid;
  grid-template-columns: var(--nav-icon-rail-col) minmax(0, 1fr) auto;
  align-items: center;
  justify-items: stretch;
  box-sizing: border-box;
  min-height: var(--nav-slot-size);
  width: calc(100% - 16px);
  margin: 0 8px;
  /* Misma rejilla horizontal que .nav-links .nav-link. */
  padding: 10px 5px 10px var(--nav-slot-icon-inset);
  gap: 0;
  column-gap: 0;
  border-radius: var(--nav-slot-radius);
  border: 1px solid transparent;
  background: transparent;
  color: var(--nav-muted);
  cursor: pointer;
  text-align: left;
  position: relative;
  transition: var(--nav-slot-transition);
}
.nav-group-trigger:hover {
  background: var(--nav-slot-hover-bg-dark);
  border-color: var(--nav-slot-hover-bd-dark);
  color: var(--nav-text);
}
[data-theme="light"] .nav-group-trigger:hover {
  background: var(--nav-slot-hover-bg-light);
  border-color: var(--nav-slot-hover-bd-light);
}
.nav-group-trigger:active {
  background: var(--nav-slot-active-bg-dark);
}
[data-theme="light"] .nav-group-trigger:active {
  background: var(--nav-slot-active-bg-light);
}
.nav-group-trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.nav-group-icon {
  grid-column: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.7;
}
.nav-group-icon .nav-svg-group {
  width: 18px;
  height: 18px;
}
.nav-group-label {
  grid-column: 2;
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  max-width: 170px;
  padding-left: var(--nav-icon-text-gap);
  transition:
    opacity var(--sb-dur) var(--sb-ease-open) var(--sb-text-delay-in),
    max-width var(--sb-dur) var(--sb-ease-open) var(--sb-text-delay-in),
    padding-left var(--sb-dur) var(--sb-ease-open) var(--sb-text-delay-in);
}
.nav-group-chevron {
  grid-column: 3;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0;
  color: var(--nav-muted);
  opacity: 0.5;
  transform: rotate(0deg);
  transform-origin: center;
  transition:
    transform var(--nav-group-duration-open) var(--nav-chevron-easing),
    opacity 150ms;
}
.nav-group-chevron svg {
  width: 14px;
  height: 14px;
}
.nav-group-trigger:hover .nav-group-chevron {
  opacity: 1;
}
.nav-group-open .nav-group-chevron {
  transform: rotate(90deg);
}
.nav-group-closing .nav-group-chevron {
  transition-duration: var(--nav-group-duration-close);
}
.nav-group-panel {
  height: 0;
  opacity: 0;
  overflow: hidden;
  margin: 0 8px;
  border-left: 1px solid var(--border-subtle);
  transition: opacity 80ms linear 140ms;
}
.nav-group-open .nav-group-panel {
  opacity: 1;
  transition: opacity 120ms linear 0ms;
}
.nav-group-has-active .nav-group-trigger {
  color: var(--text);
  border-color: var(--nav-slot-hover-bd-dark);
  background: var(--nav-slot-hover-bg-dark);
}
[data-theme="light"] .nav-group-has-active .nav-group-trigger {
  border-color: var(--nav-slot-hover-bd-light);
  background: var(--nav-slot-hover-bg-light);
}
.nav-group .nav-link {
  margin: 0;
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity var(--nav-item-duration) cubic-bezier(0.22, 1, 0.36, 1),
    transform var(--nav-item-duration) cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-group .nav-link .nav-link-text {
  padding-left: var(--nav-indent);
}
.nav-group-open .nav-link {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(var(--nav-item-index, 0) * var(--nav-item-stagger));
}
.nav-group:not(.nav-group-open) .nav-link {
  transition-delay: 0ms;
}
.nav-links .nav-link {
  display: grid;
  grid-template-columns: var(--nav-icon-rail-col) minmax(0, 1fr);
  align-items: center;
  box-sizing: border-box;
  min-height: var(--nav-slot-size);
  /* gap: 0 — espacio icono↔texto vía padding-left en .nav-link-text */
  gap: 0;
  padding: 10px 5px 10px var(--nav-slot-icon-inset);
  margin: 0 8px;
  color: var(--nav-muted);
  font-size: 13px;
  font-weight: 400;
  border-radius: var(--nav-slot-radius);
  border: 1px solid transparent;
  position: relative;
  /*
   * overflow: visible — el nav-svg (20px) es mayor que el content-area
   * calculado (columna íconos + paddings - borde), y con
   * overflow: hidden se clipaba 2px del icono haciéndolo parecer más
   * pequeño en modo rail. Con visible no hay clipping y el hover/active
   * background sigue redondeado (es el background propio del link, no
   * de un hijo, por lo que border-radius lo recorta siempre).
   */
  overflow: visible;
  transition: var(--nav-slot-transition);
  text-decoration: none;
}
.nav-links .nav-link:hover {
  background: var(--nav-slot-hover-bg-dark);
  border-color: var(--nav-slot-hover-bd-dark);
  color: var(--nav-text);
  text-decoration: none;
  box-shadow: none;
}
[data-theme="light"] .nav-links .nav-link:hover {
  background: var(--nav-slot-hover-bg-light);
  border-color: var(--nav-slot-hover-bd-light);
}
.nav-links .nav-link:active {
  background: var(--nav-slot-active-bg-dark);
}
[data-theme="light"] .nav-links .nav-link:active {
  background: var(--nav-slot-active-bg-light);
}
.nav-links .nav-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.nav-links .nav-link.nav-active .nav-svg {
  color: var(--accent);
  opacity: 1;
}
.nav-links .nav-link > .nav-svg {
  grid-column: 1;
  justify-self: start;
}
/*
 * Escritorio expandido: mismo eje del ícono que en rail (40×40 centrado en barra cerrada),
 * misma altura de fila y sin padding extra que desplace el glifo al abrir.
 * Móvil sigue usando la regla base (.nav-links .nav-link margin/padding anteriores).
 */
@media (min-width: 769px) {
  .admin-layout:not(.sidebar-collapsed) .nav-links .nav-link {
    margin: 0 0.5rem 0 var(--nav-expanded-item-margin-left);
    padding: 0 5px 0 0;
    min-height: var(--nav-slot-size);
  }
  .admin-layout:not(.sidebar-collapsed) .nav-links .nav-link > .nav-svg,
  .admin-layout:not(.sidebar-collapsed) .nav-links .nav-link > img {
    justify-self: center;
  }
  .admin-layout:not(.sidebar-collapsed) .nav-links .nav-link.nav-active::before {
    left: calc(-1 * var(--nav-expanded-item-margin-left));
  }
  .admin-layout:not(.sidebar-collapsed) .nav-group-trigger {
    width: auto;
    margin: 0 0.5rem 0 var(--nav-expanded-item-margin-left);
    padding: 0 6px 0 0;
    min-height: var(--nav-slot-size);
  }
  .admin-layout:not(.sidebar-collapsed) .nav-group-icon {
    justify-self: center;
  }
  .admin-layout:not(.sidebar-collapsed) .nav-group-panel {
    margin: 0 0.5rem 0 var(--nav-expanded-item-margin-left);
  }
  /*
   * Pie: mismo inset que lista de enlaces (.nav-links) — antes el tema centraba con margin:auto
   * y el usuario era ancho completo desde el padding: saltaban durante la animación del width.
   */
  .admin-layout:not(.sidebar-collapsed) .nav-footer {
    align-items: flex-start;
  }
  .admin-layout:not(.sidebar-collapsed) .btn-theme-nav {
    margin-left: var(--nav-footer-slot-margin-left);
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
  }
  .admin-layout:not(.sidebar-collapsed) .nav-user-btn {
    margin-left: var(--nav-footer-slot-margin-left);
    margin-right: 0.5rem;
    width: calc(100% - var(--nav-footer-slot-margin-left) - 0.5rem);
    min-height: var(--nav-slot-size);
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 12px;
    align-items: center;
    box-sizing: border-box;
  }
}
.nav-svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.7;
  color: var(--nav-muted);
}
.nav-link:hover .nav-svg,
.nav-link.nav-active .nav-svg {
  opacity: 1;
}
.nav-link-text {
  grid-column: 2;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;       /* crucial: padding-left se incluye dentro del max-width */
  padding-left: var(--nav-icon-text-gap); /* hueco icono ↔ texto */
  opacity: 1;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--nav-muted);
  max-width: 180px;             /* valor fijo — CSS no anima desde/hacia 'auto' */
  transform: translateX(0);
  /*
   * Expansión: texto y gap aparecen con delay-in (60ms).
   * padding-left también anima para que el gap entre icono y texto
   * aparezca de forma fluida sincronizado con el texto.
   */
  transition:
    opacity      var(--sb-dur) var(--sb-ease-open) var(--sb-text-delay-in),
    max-width    var(--sb-dur) var(--sb-ease-open) var(--sb-text-delay-in),
    padding-left var(--sb-dur) var(--sb-ease-open) var(--sb-text-delay-in),
    transform    var(--sb-dur) var(--sb-ease-open) var(--sb-text-delay-in);
}
.nav-link.nav-active .nav-link-text {
  font-weight: 500;
  color: var(--text);
}

/* Pie lateral: fijo al fondo, no participa del scroll de .nav-links */
.nav-footer {
  flex-shrink: 0;
  padding: 0.85rem var(--nav-footer-pad-x) 0.9rem;
  margin-top: 0;
  border-top: 1px solid var(--nav-border);
  background: var(--nav-active-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  font-size: 12px;
  color: var(--nav-muted);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
[data-theme="light"] .nav-footer {
  border-top-color: rgba(15, 23, 42, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(248, 250, 252, 0.98) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
/*
 * Botón de tema — ícono compacto, no invasivo.
 * Siempre mide lo mismo en expanded y rail, sin transiciones de layout.
 */
.btn-theme-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--nav-slot-size);
  height: var(--nav-slot-size);
  padding: 0;
  margin: 0 auto;          /* centrado en el footer-column */
  border: 1px solid transparent;
  border-radius: var(--nav-slot-radius);
  background: transparent;
  color: var(--nav-text);
  cursor: pointer;
  flex-shrink: 0;
  transition: var(--nav-slot-transition);
}
.btn-theme-nav:hover {
  background: var(--nav-slot-hover-bg-dark);
  border-color: var(--nav-slot-hover-bd-dark);
}
[data-theme="light"] .btn-theme-nav:hover {
  background: var(--nav-slot-hover-bg-light);
  border-color: var(--nav-slot-hover-bd-light);
}
.btn-theme-nav:active {
  background: var(--nav-slot-active-bg-dark);
}
[data-theme="light"] .btn-theme-nav:active {
  background: var(--nav-slot-active-bg-light);
}
.btn-theme-nav:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.theme-toggle-icon { display: inline-flex; align-items: center; justify-content: center; }
[data-theme="light"] .theme-toggle-icon--moon { display: none; }
[data-theme="dark"] .theme-toggle-icon--sun { display: none; }

/* ── Avatar de usuario ────────────────────────────────────────────────────── */
.nav-user-avatar {
  grid-column: 1;
  justify-self: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  line-height: 1;
  user-select: none;
}
.nav-user-avatar--lg {
  width: 38px;
  height: 38px;
  font-size: 13px;
  border-radius: 10px;
}

/* ── Botón de usuario en el pie de la barra lateral ────────────────────────
 * Grid con primera columna = --nav-icon-rail-col: avatar centrado en rail y estable al expandir.
 */
.nav-user-btn {
  display: grid;
  grid-template-columns: var(--nav-icon-rail-col) minmax(0, 1fr) auto;
  align-items: center;
  gap: 0;
  column-gap: 0;
  box-sizing: border-box;
  min-height: var(--nav-slot-size);
  width: 100%;
  padding: 4px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--nav-slot-radius);
  cursor: pointer;
  text-align: left;
  color: var(--nav-text);
  transition: var(--nav-slot-transition);
}
.nav-user-btn:hover {
  background: var(--nav-slot-hover-bg-dark);
  border-color: var(--nav-slot-hover-bd-dark);
}
[data-theme="light"] .nav-user-btn:hover {
  background: var(--nav-slot-hover-bg-light);
  border-color: var(--nav-slot-hover-bd-light);
}
.nav-user-btn:active {
  background: var(--nav-slot-active-bg-dark);
}
[data-theme="light"] .nav-user-btn:active {
  background: var(--nav-slot-active-bg-light);
}
.nav-user-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.nav-user-btn[aria-expanded="true"] {
  background: var(--nav-slot-hover-bg-dark);
  border-color: var(--nav-slot-hover-bd-dark);
}
[data-theme="light"] .nav-user-btn[aria-expanded="true"] {
  background: var(--nav-slot-hover-bg-light);
  border-color: var(--nav-slot-hover-bd-light);
}

/* Info (nombre + rol) — se oculta en modo rail igual que nav-link-text */
.nav-user-btn-info {
  grid-column: 2;
  min-width: 0;
  overflow: hidden;
  padding-left: var(--nav-icon-text-gap);
  box-sizing: border-box;
  max-width: 160px;
  transition:
    opacity      var(--sb-dur) var(--sb-ease-open) var(--sb-text-delay-in),
    max-width    var(--sb-dur) var(--sb-ease-open) var(--sb-text-delay-in),
    padding-left var(--sb-dur) var(--sb-ease-open) var(--sb-text-delay-in);
}
.nav-user-name {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
}
.nav-user-role {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--nav-muted);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Chevron — rota 180° cuando el panel está abierto */
.nav-user-chevron {
  grid-column: 3;
  justify-self: end;
  flex-shrink: 0;
  margin-left: 0;
  opacity: 0.45;
  overflow: hidden;
  max-width: 18px;
  transition:
    transform    var(--sb-dur) var(--sb-ease-close),
    opacity      0.15s,
    max-width    var(--sb-dur) var(--sb-ease-open) var(--sb-text-delay-in);
}
.nav-user-btn[aria-expanded="true"] .nav-user-chevron {
  transform: rotate(180deg);
  opacity: 0.85;
}

/* Colapso rail: ocultar info + chevron sin salto */
.admin-layout.sidebar-collapsed .nav-user-btn-info {
  opacity: 0;
  max-width: 0;
  padding-left: 0;
  min-width: 0;
  transition:
    opacity      var(--sb-dur) var(--sb-ease-close) var(--sb-text-delay-out),
    max-width    var(--sb-dur) var(--sb-ease-close) var(--sb-text-delay-out),
    padding-left var(--sb-dur) var(--sb-ease-close) var(--sb-text-delay-out);
}
.admin-layout.sidebar-collapsed .nav-user-chevron {
  opacity: 0;
  max-width: 0;
  margin-left: 0;
  transition:
    opacity   var(--sb-dur) var(--sb-ease-close) var(--sb-text-delay-out),
    max-width var(--sb-dur) var(--sb-ease-close) var(--sb-text-delay-out);
}

/* ── Panel flotante de usuario (position:fixed) ───────────────────────────── */
.nav-user-panel {
  position: fixed;
  z-index: 601;
  width: 240px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.10);
  padding: 6px;
  animation: navUserPanelIn 0.2s cubic-bezier(0.34, 1.3, 0.64, 1) both;
}
[data-theme="light"] .nav-user-panel {
  box-shadow: 0 8px 32px rgba(15,23,42,.12), 0 2px 8px rgba(15,23,42,.06);
}
@keyframes navUserPanelIn {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.nav-user-panel-hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 4px 0;
}
.nav-user-panel-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  border: none;
  background: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: background 0.12s, color 0.12s;
}
.nav-user-panel-item:hover {
  background: var(--surface-elevated);
  color: var(--text);
  text-decoration: none;
}
.nav-user-panel-item--danger { color: var(--danger); }
.nav-user-panel-item--danger:hover {
  background: var(--danger-bg);
  color: var(--danger);
}

/* Icono de notificaciones y badge */
.nav-notif-icon { position: relative; display: inline-flex; flex-shrink: 0; }
.nav-notif-badge {
  display: none;
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--danger);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.nav-footer-ico { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.75; }
.nav-app-version {
  margin: 0.15rem 0 0;
  padding: 0 2px;
  font-size: 10px;
  line-height: 1.35;
  /*
   * La versión siempre ocupa el mismo espacio (expanded y collapsed).
   * Solo cambia la opacidad para que no cause saltos de layout al expandir.
   */
  opacity: 0.45;
  text-align: center;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  transition: opacity var(--sb-dur) var(--sb-ease-close) var(--sb-text-delay-out);
}
.admin-layout.sidebar-collapsed .nav-app-version {
  opacity: 0;
  pointer-events: none;
  /* height/margin se dejan intactos para que el espacio siempre esté reservado */
}

.theme-corner-btn,
.theme-fab-mobile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s, background 0.15s, color 0.15s;
  box-shadow: var(--shadow-md);
}
[data-theme="light"] .theme-corner-btn,
[data-theme="light"] .theme-fab-mobile {
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: var(--shadow-md);
}
[data-theme="dark"] .theme-corner-btn,
[data-theme="dark"] .theme-fab-mobile {
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.theme-corner-btn {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 100;
  width: 44px;
  height: 44px;
  padding: 0;
}
.theme-corner-btn:hover,
.theme-fab-mobile:hover {
  box-shadow: var(--shadow-lg);
}
[data-theme="light"] .theme-corner-btn:hover,
[data-theme="light"] .theme-fab-mobile:hover {
  background: var(--primary-dark);
}
.theme-fab-mobile {
  position: fixed;
  bottom: 22px;
  right: 18px;
  z-index: 100;
  width: 52px;
  height: 52px;
}

.admin-main {
  flex: 1;
  min-width: 0;         /* Evita que flex item desborde su contenedor */
  padding: 2rem 2rem 2.5rem;
  overflow-y: auto;     /* Solo el contenido principal scrollea */
  overflow-x: hidden;
}
[data-theme="light"] .admin-main {
  background: transparent;
}

/* ─── Cabecera de página (.page-header + alias .admin-header) ──── */
.page-header,
.admin-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
  gap: var(--space-4);
}

.admin-header-text,
.page-header__left {
  flex: 1 1 280px;
  min-width: 0;
}

.admin-header h1 {
  font-size: var(--text-3xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 1.15;
}
.page-header__title {
  font-size: var(--text-3xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 1.15;
  margin: 0;
}

.page-header__eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: var(--space-1);
}

.page-header__desc {
  margin-top: var(--space-1);
  font-size: var(--text-md);
  color: var(--muted);
  line-height: 1.5;
}

.header-actions,
.page-header__right {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.back-link { color: var(--muted); font-size: 14px; text-decoration: none; }
.back-link:hover { color: var(--text); }

/* ─── Stats ───────────────────────────────────────────────────── */
/* Bento: bloques con aire y profundidad suave */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 1.15rem;
  margin-bottom: 1.75rem;
}
/* padding, alineación, hover: propias (shell → grupo .ui-card) */
.stat-card {
  padding: 1.35rem 1.15rem;
  text-align: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
[data-theme="light"] .stat-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}
.stat-num {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text);
}
.stat-label { font-size: 13px; color: var(--muted); margin-top: 4px; }
.stat-pending .stat-num { color: var(--warning); }
.stat-review .stat-num { color: #4f46e5; }
[data-theme="dark"] .stat-review .stat-num { color: #a5b4fc; }
.stat-docs .stat-num { color: #b45309; }
[data-theme="dark"] .stat-docs .stat-num { color: #fcd34d; }
.stat-ok .stat-num { color: var(--success); }
.stat-no .stat-num { color: var(--danger); }
.stat-other .stat-num { color: #4b5563; }

.stats-grid--porteria {
  margin-bottom: 1rem;
}
.stats-grid--porteria .porteria-stat-sub {
  font-size: 11px;
  color: var(--muted);
  margin: 0.45rem 0 0;
  line-height: 1.35;
}
.stats-grid--porteria .porteria-stat-datetime {
  font-size: 1.2rem;
  line-height: 1.3;
  word-break: break-word;
}

/* ─── Filtros ─────────────────────────────────────────────────── */
.filter-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  align-items: center;
}
/* Inputs de búsqueda en filtros: crecen pero con límite */
.filter-bar input[type="text"],
.filter-bar input[type="search"] {
  width: auto;
  flex: 1 1 200px;
  min-width: 0;
  max-width: 260px;
}
/* Inputs de fecha en filtros: ancho fijo */
.filter-bar input[type="date"] {
  width: auto;
  flex: 0 0 auto;
  min-width: 140px;
  max-width: 170px;
}
/* Selects en filtros: tamaño basado en contenido, con límites */
.filter-bar select,
.filter-bar .field-select {
  width: auto;
  flex: 0 0 auto;
  min-width: 130px;
  max-width: 210px;
}
/* Etiqueta + select/input en la misma línea */
.filter-bar label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}
.filter-bar label select,
.filter-bar label input {
  flex: 0 0 auto;
  width: auto;
  min-width: 110px;
  max-width: 180px;
}

.filter-bar--porteria { flex-direction: column; align-items: stretch; gap: 0.35rem; }
.porteria-search-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.filter-bar--porteria .porteria-search-form input[type="search"] {
  flex: 1 1 200px;
  min-width: 200px;
  max-width: none;
}
.porteria-search-hint { margin: 0; font-size: 12px; line-height: 1.45; }

/* ─── Tabla de visitas ────────────────────────────────────────── */
/* overflow + scroll (shell → grupo .ui-card) */
.table-wrap {
  overflow: auto;
}

/* Superadmin: scroll horizontal dentro de .card (--flush); sin shell propio */
.sa-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ─── Tabla base unificada (.ui-table) + alias .visits-table (.sa-table = variante en bloques siguientes) ───
 * Shell común (portería / visitas / listados): mismos valores que tenía solo .visits-table.
 * [data-theme="light"] borde filas: antes solo visits; ahora también .ui-table para nuevas tablas.
 */
.ui-table,
.visits-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.ui-table thead,
.visits-table thead {
  background: var(--surface-elevated);
}

.ui-table th,
.visits-table th {
  padding: 14px 18px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}

.ui-table td,
.visits-table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}

[data-theme="light"] .ui-table td,
[data-theme="light"] .ui-table th,
[data-theme="light"] .visits-table td,
[data-theme="light"] .visits-table th {
  border-bottom-color: rgba(15, 23, 42, 0.06);
}

/* Superadmin: tabla completa (mismo shell que embed anterior); thead sticky, paddings y borde thead propios */
.sa-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 700px;
}

.sa-table thead th {
  padding: 0.85rem 1.25rem;
  text-align: left;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  background: var(--surface-elevated);
  position: sticky;
  top: 0;
  z-index: 1;
}

.sa-table tbody td {
  padding: 0.95rem 1.25rem;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
  font-size: var(--text-md);
}

.sa-table tbody tr { transition: background 0.12s ease; }

.sa-table tbody tr:last-child td,
.ui-table tbody tr:last-child td,
.visits-table tbody tr:last-child td {
  border-bottom: none;
}

.sa-table tbody tr:hover td {
  background: var(--surface-elevated);
}

/* Modificadores opcionales nuevas tablas */
.ui-table--sticky thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-elevated);
}

/* Densidad compacta (~60% del padding 14px 18px) */
.ui-table--dense thead th,
.ui-table--dense tbody td,
.visits-table.ui-table--dense thead th,
.visits-table.ui-table--dense tbody td {
  padding: 9px 11px;
}

.visit-row {
  cursor: pointer;
  transition: background 0.15s ease;
}
.visit-row:hover {
  background: var(--surface-elevated);
}
[data-theme="light"] .visit-row:hover {
  background: var(--surface-elevated);
}
.visit-row:last-child td { border-bottom: none; }
.doc-count {
  font-weight: 700;
  color: var(--text);
}
.tipo-tercero {
  display: block; max-width: 160px; font-size: 12px; line-height: 1.35;
  color: var(--muted); font-weight: 600;
}

/* Estado vacío: alias .empty-row / .sa-table-empty; portería mantiene padding más compacto */
.ui-table__empty,
.sa-table-empty {
  text-align: center;
  color: var(--muted);
  font-size: var(--text-sm);
  padding: var(--space-12) var(--space-4) !important;
}
.ui-table__empty-title {
  display: block;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: var(--space-1);
}
.ui-table__empty-icon {
  display: block;
  margin: 0 auto var(--space-3);
  width: 32px;
  height: 32px;
  opacity: 0.35;
}
.empty-row {
  padding: var(--space-8) !important;
}

/* ─── Anchos máximos layout (Fase 2; no altera utilidades Fase 1)
 * Superan .center-wrap > .card { max-width: 480px } donde aplica.
 */
.center-wrap > .card.l-max-w-420,
.center-wrap > .card.card--centered-tight.l-max-w-420 { max-width: 420px; }

.center-wrap > .card.l-max-w-520,
.center-wrap > .card.card--centered-tight.l-max-w-520 { max-width: 520px; }

.center-wrap > .card.l-max-w-560,
.center-wrap > .card.card--centered-tight.l-max-w-560 { max-width: 560px; }

.center-wrap > .card.card--centered-report.l-max-w-560 { max-width: 560px; }

.card.l-max-w-600 { max-width: 600px; }

/* 640 — quiz y flujos de evaluación (Fase 3) */
.center-wrap > .card.card--centered-report.l-max-w-640 { max-width: 640px; }

/* 700 — portal contratista center-wrap (Fase 3) */
.center-wrap.l-max-w-700 { max-width: 700px; }

.center-wrap > .card.card--centered-report.l-max-w-720 { max-width: 720px; }

.visits-table.l-max-w-720 { max-width: 720px; }

body.l-max-w-480 { max-width: 480px; }
body.l-max-w-560 { max-width: 560px; }

.pagination-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
  font-size: 14px;
}
.pagination-bar .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 18px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
  box-shadow: var(--shadow-sm);
}
.pagination-bar .page-link:hover {
  background: var(--surface-elevated);
  border-color: var(--text);
  text-decoration: none;
}
.pagination-bar .page-info {
  color: var(--muted);
  font-weight: 500;
  padding: 0 0.35rem;
}

/* ─── Detalle de visita ───────────────────────────────────────── */
.visit-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.35rem;
  margin-bottom: 1.75rem;
}
/* shell → grupo .ui-card */
.detail-card {
  padding: 1.6rem;
}
.detail-card h2 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: none;
  color: var(--text);
  letter-spacing: -0.02em;
}
[data-theme="light"] .detail-card h2 {
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06);
  padding-bottom: 0.85rem;
  margin-bottom: 1.1rem;
}
[data-theme="dark"] .detail-card h2 {
  border-bottom: 1.5px solid var(--border);
}
.detail-rows { display: flex; flex-direction: column; gap: 0; }
.detail-row { display: flex; justify-content: space-between; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--border-subtle); font-size: 14px; gap: 12px; }
.detail-row span:first-child { color: var(--muted); flex-shrink: 0; }
.detail-row strong { text-align: right; word-break: break-word; }
.docs-section { margin-top: 0; }

/* ─── Documentos adjuntos ─────────────────────────────────────── */
/* .doc-card: superficie secundaria (no usa shell .ui-card: otro fondo/radio/sombra) */
.docs-grid { display: flex; flex-direction: column; gap: 10px; }
.doc-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--surface-elevated);
  border-radius: var(--radius);
  border: 1px solid var(--border-subtle);
  box-shadow: none;
}
[data-theme="dark"] .doc-card {
  background: var(--bg);
  border-color: var(--border);
  box-shadow: none;
}
.doc-icon { font-size: 28px; flex-shrink: 0; }
.doc-info { flex: 1; min-width: 0; }
.doc-type { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.doc-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-size { font-size: 12px; color: var(--muted); }
.doc-actions { display: flex; gap: 8px; flex-shrink: 0; }
.btn-view,
.btn-dl {
  padding: 6px 14px;
  min-height: 32px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  box-shadow: none;
}
[data-theme="dark"] .btn-view,
[data-theme="dark"] .btn-dl {
  background: transparent;
  border-color: var(--border);
  box-shadow: none;
}
.btn-view:hover {
  border-color: var(--text);
  color: var(--text);
  background: var(--surface-elevated);
  text-decoration: none;
}
.btn-dl:hover { border-color: var(--success); color: var(--success); background: var(--success-bg); text-decoration: none; }

/* ─── QR Codes ────────────────────────────────────────────────── */
.qr-hint { font-size: 13px; color: var(--muted); line-height: 1.5; margin: 0 0 1.25rem; max-width: 52rem; }
.qr-hint code {
  font-size: 12px;
  background: var(--surface-elevated);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
[data-theme="dark"] .qr-hint code {
  background: var(--bg);
  box-shadow: none;
  border-color: var(--border);
}

.qr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.5rem; }
/* shell → grupo .ui-card; oscuro refuerza grosor de borde */
.qr-card {
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
[data-theme="light"] .qr-card:hover {
  transform: translateY(-2px);
}
[data-theme="dark"] .qr-card {
  border-width: 2px;
}
.qr-card.qr-inactive {
  opacity: 0.62;
  border-style: dashed;
}
.qr-label { font-size: 1.1rem; font-weight: 800; }
.qr-desc { font-size: 13px; color: var(--muted); }
.qr-visits { font-size: 13px; color: var(--success); font-weight: 600; }
.qr-url {
  font-size: 11px;
  color: var(--muted);
  word-break: break-all;
  font-family: ui-monospace, monospace;
  background: var(--surface-elevated);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
[data-theme="dark"] .qr-url {
  background: var(--bg);
  box-shadow: none;
  border-color: var(--border);
}
.qr-img-wrap { text-align: center; }
.qr-img {
  width: 160px;
  height: 160px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.qr-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ─── Login — tarjeta única centrada, estilo minimalista ───────── */
.login-card {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
[data-theme="light"] .login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}
[data-theme="dark"] .login-card {
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}

.login-card-content {
  padding: 2.25rem 2rem 2.5rem;
  text-align: center;
}

.login-brand-slot {
  display: flex;
  justify-content: center;
  margin-bottom: 1.75rem;
}

.login-brand-logo {
  margin: 0;
}

.login-brand-logo img {
  max-height: 64px;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

.login-logo {
  font-size: 2.25rem;
  line-height: 1;
  width: 4rem;
  height: 4rem;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  background: var(--surface-elevated);
  border: 1px solid var(--border);
}
[data-theme="dark"] .login-logo {
  background: transparent;
}

.login-title {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 0.35rem;
  line-height: 1.3;
}

.login-subtitle {
  margin: 0 0 1.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted);
}

.login-form {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.login-fields-stack {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.login-form .login-field {
  margin-bottom: 0;
}

.login-form .login-field label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 0.4rem;
}

.login-form .login-field input {
  border-radius: var(--radius-sm);
  min-height: 44px;
}

.login-error {
  margin: 0;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
}

.login-submit {
  margin-top: 0.25rem;
  width: 100%;
  min-height: 46px;
  font-size: 0.9375rem;
}

/* ─── Ajustes / usuarios ──────────────────────────────────────── */
.settings-page .settings-lead { color: var(--muted); margin-bottom: 1.25rem; line-height: 1.55; font-size: 14px; }
.settings-page .settings-muted { color: var(--muted); font-size: 14px; margin-bottom: 1rem; }
.brand-preview { margin-bottom: 1.25rem; }
.brand-preview img { max-height: 80px; max-width: 220px; object-fit: contain; border-radius: 8px; border: 1px solid var(--border); padding: 8px; background: var(--surface); }
.checkbox-row { display: flex; align-items: center; gap: 10px; font-size: 14px; margin: 1rem 0 1.5rem; cursor: pointer; font-weight: 500; }
.checkbox-row input { width: auto; }
.narrow-form .detail-card { max-width: 420px; }
.inline-user-form {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem 1.25rem;
}
.inline-user-form .flex-grow { flex: 1; min-width: 180px; }
.btn-submit-inline {
  width: auto !important;
  margin-top: 0 !important;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  align-self: flex-end;
}
/* Modificador: botón primario compacto (sin ancho 100%) */
.btn-submit--auto {
  width: auto;
  margin-top: 0;
}
.users-table-wrap { margin-top: 1rem; }
.badge-you {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text);
  vertical-align: middle;
}
.btn-delete-sm { padding: 4px 10px; font-size: 12px; }

.users-help { font-size: 13px; color: var(--muted); line-height: 1.5; margin-bottom: 1.25rem; }
.user-form-rows { align-items: flex-end; }
.select-role {
  font-weight: 500;
}
.role-badge {
  display: inline-block; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; padding: 4px 10px; border-radius: 999px;
}
.role-adm {
  background: var(--primary-light);
  color: var(--text);
}
[data-theme="dark"] .role-adm {
  color: var(--text);
}
.role-op { background: var(--surface-elevated); color: var(--muted); border: 1px solid var(--border); }
.role-gate {
  background: rgba(34, 139, 230, 0.12);
  color: var(--primary);
  border: 1px solid rgba(34, 139, 230, 0.35);
}
[data-theme="dark"] .role-gate {
  color: var(--text);
}

.porteria-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 1rem;
}
.inline-gate-form {
  display: inline-block;
  margin: 0;
}
.porteria-hint {
  margin-top: 0.75rem;
  margin-bottom: 0;
}


.forbid-banner { margin-bottom: 1rem; margin-top: 0; }

/* Barra superior móvil + backdrop (solo ≤768px, controlado también por CSS) */
.admin-mobile-bar {
  display: none;
}
.admin-sidebar-backdrop {
  display: none;
}

/* ─── Responsive ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .admin-mobile-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    min-height: 50px;
    padding: 0 12px;
    padding-left: 10px;
    background: var(--nav-bg);
    color: var(--nav-text);
    border-bottom: 1px solid var(--nav-border);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 320;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  }
  [data-theme="dark"] .admin-mobile-bar {
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
  }
  .admin-mobile-bar__title {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .admin-mobile-bar .nav-sidebar-toggle {
    color: inherit;
    width: 42px;
    height: 42px;
    border-radius: var(--radius);
  }
  .admin-sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 300;
    margin: 0;
    padding: 0;
    border: none;
    background: rgba(0, 0, 0, 0.42);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--sb-dur) var(--sb-ease-close);
    -webkit-tap-highlight-color: transparent;
  }
  .admin-layout.mobile-drawer-open .admin-sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  /* Shell móvil: mismo modelo que escritorio — scroll solo en contenido */
  .admin-layout {
    height: 100vh;
    max-height: 100dvh;
    overflow: hidden;
    flex-direction: row;
  }
  .admin-layout.sidebar-collapsed .admin-nav {
    width: min(286px, 88vw);
  }
  .admin-nav {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(286px, 88vw);
    max-width: 300px;
    z-index: 310;
    transform: translateX(-100%);
    box-shadow: 8px 0 48px rgba(0, 0, 0, 0.12);
    height: auto;
    max-height: 100dvh;
    /* Cajón móvil: transform (GPU compuesto) con ease-close */
    transition:
      transform  var(--sb-dur) var(--sb-ease-close),
      box-shadow var(--sb-dur) var(--sb-ease-close);
  }
  .admin-layout.mobile-drawer-open .admin-nav {
    /* Apertura del cajón: ease-open */
    transition:
      transform  var(--sb-dur) var(--sb-ease-open),
      box-shadow var(--sb-dur) var(--sb-ease-open);
  }
  [data-theme="dark"] .admin-nav {
    box-shadow: 8px 0 48px rgba(0, 0, 0, 0.5);
  }
  .admin-layout.mobile-drawer-open .admin-nav {
    transform: translateX(0);
  }
  /* Cajón abierto: hamburguesa → X (barra superior y botón dentro del nav) */
  .admin-layout.mobile-drawer-open .nav-hamburger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
    width: 17px;
  }
  .admin-layout.mobile-drawer-open .nav-hamburger span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
    width: 0;
  }
  .admin-layout.mobile-drawer-open .nav-hamburger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
    width: 17px;
  }
  .admin-main {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: calc(50px + 1rem);
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 2rem;
  }
  .ui-table,
  .visits-table {
    font-size: 12px;
  }
  .ui-table th,
  .ui-table td,
  .visits-table th,
  .visits-table td {
    padding: 8px 10px;
  }
  .doc-actions {
    flex-direction: column;
  }
  .qr-img {
    width: 120px;
    height: 120px;
  }
  [data-theme="light"] .form-header {
    margin: 0;
    max-width: none;
    border-radius: 0;
  }
  .login-page-inner {
    max-width: none;
  }
  .login-card-content {
    padding: 1.75rem 1.35rem 2rem;
  }
  .login-brand-slot {
    margin-bottom: 1.35rem;
  }
}

/* ══════════════════════════════════════════════════════════════
   BREADCRUMB — Navegación contextual minimalista
   ══════════════════════════════════════════════════════════════ */
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  font-size: 13px;
  line-height: 1.4;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}
.bc-item {
  color: var(--muted);
  text-decoration: none;
  font-weight: 400;
  white-space: nowrap;
  transition: color 0.12s;
}
a.bc-item:hover {
  color: var(--text);
  text-decoration: none;
}
.bc-sep {
  color: var(--border);
  margin: 0 6px;
  font-size: 11px;
  user-select: none;
}
.bc-current {
  color: var(--text);
  font-weight: 600;
}
/* Versión con acción a la derecha */
.breadcrumb-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.breadcrumb-row .breadcrumb {
  margin-bottom: 0;
}
.breadcrumb-row .breadcrumb-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   DESIGN SYSTEM v2 — Componentes SaaS adicionales
   ═══════════════════════════════════════════════════════════════ */

/* ── Empty State ──────────────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-12) var(--space-8);
  gap: var(--space-3);
}
.empty-state__icon {
  font-size: 2.5rem;
  line-height: 1;
  opacity: 0.4;
  margin-bottom: var(--space-1);
}
.empty-state__title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.02em;
}
.empty-state__desc {
  font-size: var(--text-md);
  color: var(--muted);
  line-height: 1.55;
  max-width: 360px;
}
.empty-state__action {
  margin-top: var(--space-2);
}

/* ── Skeleton / Placeholder ───────────────────────────────────── */
@keyframes skeletonPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.45; }
}
.skeleton {
  background: var(--surface-elevated);
  border-radius: var(--radius-sm);
  animation: skeletonPulse 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.skeleton-line {
  height: 14px;
  border-radius: 4px;
  background: var(--surface-elevated);
  animation: skeletonPulse 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.skeleton-line + .skeleton-line { margin-top: var(--space-2); }
.skeleton-line--sm  { height: 10px; width: 60%; }
.skeleton-line--lg  { height: 20px; }
.skeleton-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--surface-elevated);
  animation: skeletonPulse 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
/* Spinner inline */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  display: inline-block;
  width: 18px; height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--text);
  border-radius: 50%;
  animation: spin 0.65s linear infinite;
  flex-shrink: 0;
  vertical-align: middle;
}
.spinner--sm { width: 14px; height: 14px; border-width: 2px; }
.spinner--lg { width: 28px; height: 28px; border-width: 3px; }

/* ── Banner / Alert ───────────────────────────────────────────── */
.banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  font-size: var(--text-md);
  line-height: 1.5;
  border: 1px solid transparent;
  margin-bottom: var(--space-4);
}
.banner__icon { flex-shrink: 0; font-size: 1rem; margin-top: 2px; }
.banner__body { flex: 1; min-width: 0; }
.banner__title { font-weight: 600; margin-bottom: 2px; }
.banner__close {
  flex-shrink: 0;
  background: none; border: none; cursor: pointer;
  color: inherit; opacity: 0.55; padding: 0;
  font-size: 1rem; line-height: 1; margin-left: auto;
  transition: opacity 0.15s;
}
.banner__close:hover { opacity: 1; }
/* Variantes */
.banner--info    { background: var(--info-bg);    color: var(--info);    border-color: color-mix(in srgb, var(--info) 30%, transparent); }
.banner--success { background: var(--success-bg); color: var(--success); border-color: color-mix(in srgb, var(--success) 30%, transparent); }
.banner--warning { background: var(--warning-bg); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 30%, transparent); }
.banner--danger  { background: var(--danger-bg);  color: var(--danger);  border-color: color-mix(in srgb, var(--danger) 30%, transparent); }

/* ── Toasts ────────────────────────────────────────────────────── */
#toast-container {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: none;
  max-width: 360px;
  width: calc(100vw - var(--space-8));
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--text);
  pointer-events: all;
  animation: toastIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.toast--success { border-left: 3px solid var(--success); }
.toast--warning { border-left: 3px solid var(--warning); }
.toast--danger  { border-left: 3px solid var(--danger); }
.toast--info    { border-left: 3px solid var(--info); }
@keyframes toastIn {
  from { opacity: 0; transform: translateX(24px) scale(0.96); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

/* .page-header: definición canónica arriba junto a .admin-header (~línea 2228) */

/* ── Divider ──────────────────────────────────────────────────── */
.divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--space-6) 0;
}

/* ── Code / Monospace block ───────────────────────────────────── */
.code-block {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  font-size: var(--text-sm);
  font-family: var(--font-mono);
  line-height: 1.65;
  overflow-x: auto;
  color: var(--text);
  word-break: break-all;
}
code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--surface-elevated);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
pre code {
  background: none;
  padding: 0;
  border: none;
  font-size: inherit;
}