/* panel.css - Panel Central de Sedes
   Sobrio y funcional (panel interno). Funcion sobre forma.
   Sistema de diseno de BLUEPRINT.md seccion 7.

   Reglas que respeta este archivo:
   - Vanilla CSS puro: cero frameworks, cero @import, cero fuentes/imagenes
     externas (CSP estricta de helmet). Todo self-contained.
   - Accesibilidad: contraste AA, :focus-visible global, areas tactiles >=44px
     en celular, prefers-reduced-motion respetado (incluye pseudo-elementos).
   - Movimiento: solo transform/opacity/color. Los unicos loops infinitos son
     spinners de carga que viven mientras dura un fetch y desaparecen solos.
   - Contrato: no se renombra ninguna clase que panel.js escriba o lea.
*/

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  color-scheme: light;

  /* --- Marca --- */
  --primario: #1A3C8F;          /* acento: texto, bordes, foco */
  --primario-hover: #16337A;
  --primario-tinte: #EDF2FC;
  --primario-tenue: rgba(26, 60, 143, 0.08);
  --btn-pri-bg: #1A3C8F;        /* relleno del boton primario */
  --btn-pri-bg-h: #16337A;
  --btn-pri-fg: #FFFFFF;
  --header-grad: linear-gradient(135deg, #21489B 0%, #1A3C8F 45%, #132A66 100%);

  /* --- Semanticos: base / tinte / texto sobre tinte / borde --- */
  --exito: #16A34A;  --exito-tinte: #ECFDF5;  --exito-texto: #15803D;  --exito-borde: #A7F3D0;
  --alerta: #D97706; --alerta-tinte: #FFFBEB; --alerta-texto: #B45309; --alerta-borde: #FDE68A;
  --peligro: #DC2626;--peligro-tinte:#FEF2F2; --peligro-texto:#B91C1C; --peligro-borde:#FECACA;
  --info: #2563EB;   --info-tinte: #EFF6FF;   --info-texto: #1D4ED8;   --info-borde: #BFDBFE;
  --neutro-tinte: #F3F4F6; --neutro-texto: #4B5563;

  /* --- Superficies --- */
  --bg: #F4F6FA;
  --superficie: #FFFFFF;
  --superficie-2: #F8FAFC;      /* zebra, thead, hover */
  --borde: #E4E8EF;
  --borde-fuerte: #CBD3E1;

  /* --- Texto --- */
  --texto: #111827;
  --texto-medio: #4B5563;
  --texto-suave: #6B7280;
  --texto-invertido: #FFFFFF;

  /* --- Espaciado (rejilla de 4) --- */
  --s1: 8px;
  --s15: 12px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 40px;

  /* --- Tipografia --- */
  --fs-xs: 12px; --fs-sm: 13px; --fs-md: 15px; --fs-lg: 17px;
  --fs-xl: 20px; --fs-2xl: 24px; --fs-3xl: 30px;

  /* --- Forma y profundidad --- */
  --radio: 10px;
  --radio-sm: 6px;
  --sombra: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.06);
  --sombra-md: 0 8px 24px -6px rgba(16, 24, 40, 0.14), 0 2px 6px rgba(16, 24, 40, 0.06);
  --sombra-lg: 0 24px 48px -12px rgba(16, 24, 40, 0.28);
  --anillo: 0 0 0 3px rgba(26, 60, 143, 0.18);

  /* --- Movimiento --- */
  --dur-rapida: 130ms;
  --dur-media: 200ms;
  --dur-lenta: 300ms;
  --ease-aparecer: cubic-bezier(0, 0, 0.2, 1);
  --ease-suave: cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Modo oscuro: SOLO se reasignan tokens, ningun componente cambia --- */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --primario: #8FB2FF;
    --primario-hover: #A9C4FF;
    --primario-tinte: #14213A;
    --primario-tenue: rgba(143, 178, 255, 0.14);
    --btn-pri-bg: #2E5CC8;
    --btn-pri-bg-h: #3A6AD8;
    --btn-pri-fg: #FFFFFF;
    --header-grad: linear-gradient(135deg, #1D2E58 0%, #152341 45%, #101A31 100%);

    --exito: #22C55E;  --exito-tinte: #0F2A1D;  --exito-texto: #6EE7B7;  --exito-borde: #1F5237;
    --alerta: #F59E0B; --alerta-tinte: #2A200C; --alerta-texto: #FCD34D; --alerta-borde: #5A3F12;
    --peligro: #EF4444;--peligro-tinte:#2C1518; --peligro-texto:#FCA5A5; --peligro-borde:#5E2226;
    --info: #60A5FA;   --info-tinte: #101E33;   --info-texto: #93C5FD;   --info-borde: #1E3A6B;
    --neutro-tinte: #202938; --neutro-texto: #B4BECC;

    --bg: #0F1420;
    --superficie: #171E2B;
    --superficie-2: #1D2534;
    --borde: #2A3444;
    --borde-fuerte: #3C4A5E;

    --texto: #E8EDF5;
    --texto-medio: #C3CCDA;
    --texto-suave: #98A4B6;

    --sombra: 0 1px 2px rgba(0, 0, 0, 0.4);
    --sombra-md: 0 8px 24px -6px rgba(0, 0, 0, 0.55);
    --sombra-lg: 0 24px 48px -12px rgba(0, 0, 0, 0.65);
    --anillo: 0 0 0 3px rgba(143, 178, 255, 0.28);
  }
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--texto);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--s2);
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--texto);
}

h1 { font-size: var(--fs-xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texto-suave);
  margin-bottom: var(--s1);
}

p { margin: 0 0 var(--s2); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--primario);
  text-decoration: none;
  font-weight: 600;
}
a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Foco visible en TODO lo enfocable (antes solo lo tenia .btn) */
:focus-visible {
  outline: 2px solid var(--primario);
  outline-offset: 2px;
  border-radius: var(--radio-sm);
}

::selection { background: var(--primario-tenue); }

/* ==========================================================================
   3. LAYOUT / HEADER
   ========================================================================== */
.app-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding: var(--s15) var(--s3);
  background: var(--header-grad);
  color: var(--texto-invertido);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 6px 20px -14px rgba(16, 24, 40, 0.8);
}

/* Linea de luz superior: relieve sin una sola imagen (CSP-safe) */
.app-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
  pointer-events: none;
}

.app-header h1 {
  display: flex;
  align-items: center;
  color: var(--texto-invertido);
  font-size: var(--fs-lg);
  letter-spacing: -0.01em;
  margin: 0;
  white-space: nowrap;
}

/* Marca: 4 cuadros (varias sedes) hechos con box-shadow, sin archivos */
.app-header h1::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: currentColor;
  box-shadow:
    11px 0 0 currentColor,
    0 11px 0 currentColor,
    11px 11px 0 rgba(255, 255, 255, 0.45);
  margin-right: 28px;
  flex: 0 0 auto;
}

.app-header .header-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.app-header .user-name {
  font-size: var(--fs-sm);
  font-weight: 600;
  opacity: 0.92;
  padding: 0 var(--s1);
  white-space: nowrap;
}

/* CONTRASTE: .btn-ghost es azul; sobre el header azul era casi invisible */
.app-header .btn-ghost {
  color: var(--texto-invertido);
  opacity: 0.88;
}
.app-header .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.14);
  opacity: 1;
}
.app-header .btn-ghost:focus-visible {
  outline-color: var(--texto-invertido);
}

.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--s3);
}

.page { display: none; }

.page.active {
  display: block;
  animation: page-in var(--dur-lenta) var(--ease-aparecer) both;
}

@keyframes page-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  margin-bottom: var(--s3);
  flex-wrap: wrap;
}

.page-head h2 {
  font-size: var(--fs-2xl);
  letter-spacing: -0.02em;
}

/* ==========================================================================
   4. TARJETAS
   ========================================================================== */
.card {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: var(--s3);
  box-shadow: var(--sombra);
}

.card + .card { margin-top: var(--s2); }

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s1);
  margin-bottom: var(--s2);
}

.card-title {
  font-size: var(--fs-lg);
  font-weight: 650;
  margin: 0;
}

/* --- KPIs --- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s2);
  margin-bottom: var(--s3);
}

.stat {
  position: relative;
  overflow: hidden;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: var(--s3);
  box-shadow: var(--sombra);
  transition: transform var(--dur-media) var(--ease-suave),
              box-shadow var(--dur-media) var(--ease-suave);
}

/* Acento lateral: identifica la tarjeta sin depender solo del color del numero */
.stat::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--primario);
}

.stat.is-exito::before  { background: var(--exito); }
.stat.is-alerta::before { background: var(--alerta); }
.stat.is-peligro::before{ background: var(--peligro); }

.stat:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra-md);
}

.stat-label {
  display: flex;
  align-items: center;
  gap: var(--s1);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--texto-suave);
  margin-bottom: 6px;
}

.stat-label .btn-info { margin-left: auto; }

.stat-value {
  font-size: var(--fs-3xl);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;  /* el numero no baila al refrescar */
}

.stat.is-exito .stat-value { color: var(--exito-texto); }
.stat.is-alerta .stat-value { color: var(--alerta-texto); }
.stat.is-peligro .stat-value { color: var(--peligro-texto); }

/* panel.js pone .kpi-cambio SOLO cuando el valor realmente cambio */
.kpi-cambio { animation: kpi-salto 420ms var(--ease-suave); }

@keyframes kpi-salto {
  0%   { transform: translateY(6px); opacity: 0.35; }
  60%  { transform: translateY(-2px); opacity: 1; }
  100% { transform: none; }
}

/* ==========================================================================
   5. SEMAFORO DE SALUD
   ========================================================================== */
.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--texto-suave);
  box-shadow: 0 0 0 3px var(--neutro-tinte);
}

.dot-verde { background: var(--exito); box-shadow: 0 0 0 3px var(--exito-tinte); }
.dot-ambar { background: var(--alerta); box-shadow: 0 0 0 3px var(--alerta-tinte); }
.dot-rojo  { background: var(--peligro); box-shadow: 0 0 0 3px var(--peligro-tinte); }
.dot-desconocido { background: var(--texto-suave); box-shadow: 0 0 0 3px var(--neutro-tinte); }

/* Latido SOLO en rojo y FINITO (5 veces). La tabla se repinta cada 30s,
   asi que la alerta se vuelve a notar sin dejar un loop infinito corriendo. */
.dot-rojo { animation: latido 1.6s var(--ease-suave) 5; }

@keyframes latido {
  0%, 100% { box-shadow: 0 0 0 3px var(--peligro-tinte); }
  50%      { box-shadow: 0 0 0 6px var(--peligro-tinte); }
}

.salud {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
}

/* ==========================================================================
   6. BADGES
   ========================================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 650;
  line-height: 1.5;
  border: 1px solid transparent;
  white-space: nowrap;
}

/* Punto de color: el estado nunca se comunica SOLO por color */
.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

.badge-neutro { background: var(--neutro-tinte); color: var(--neutro-texto); border-color: var(--borde); }
.badge-exito  { background: var(--exito-tinte);  color: var(--exito-texto);  border-color: var(--exito-borde); }
.badge-alerta { background: var(--alerta-tinte); color: var(--alerta-texto); border-color: var(--alerta-borde); }
.badge-peligro{ background: var(--peligro-tinte);color: var(--peligro-texto);border-color: var(--peligro-borde); }
.badge-info   { background: var(--info-tinte);   color: var(--info-texto);   border-color: var(--info-borde); }

/* ==========================================================================
   7. TABLAS
   ========================================================================== */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

thead th {
  text-align: left;
  font-weight: 700;
  color: var(--texto-suave);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--s1) var(--s2);
  background: var(--superficie-2);
  border-bottom: 1px solid var(--borde);
  white-space: nowrap;
}

thead th:first-child { border-top-left-radius: var(--radio-sm); }
thead th:last-child  { border-top-right-radius: var(--radio-sm); }

tbody td {
  padding: var(--s15) var(--s2);
  border-bottom: 1px solid var(--borde);
  vertical-align: middle;
}

tbody tr:last-child td { border-bottom: none; }

tbody tr { transition: background-color var(--dur-rapida) var(--ease-suave); }
tbody tr:hover { background: var(--superficie-2); }

td .muted { font-size: var(--fs-xs); }

/* ==========================================================================
   8. BOTONES
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 650;
  line-height: 1;
  padding: 10px var(--s2);
  min-height: 38px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  background: var(--superficie);
  color: var(--texto);
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background-color var(--dur-rapida) var(--ease-suave),
              border-color var(--dur-rapida) var(--ease-suave),
              color var(--dur-rapida) var(--ease-suave),
              transform var(--dur-rapida) var(--ease-suave),
              opacity var(--dur-rapida) var(--ease-suave);
}

.btn:hover {
  background: var(--superficie-2);
  border-color: var(--borde-fuerte);
}

/* Respuesta tactil inmediata: en celular el dedo ve algo antes que el servidor */
.btn:active:not(:disabled) { transform: scale(0.97); }

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.btn-primario {
  background: var(--btn-pri-bg);
  border-color: var(--btn-pri-bg);
  color: var(--btn-pri-fg);
}
.btn-primario:hover { background: var(--btn-pri-bg-h); border-color: var(--btn-pri-bg-h); }

.btn-exito {
  background: var(--exito);
  border-color: var(--exito);
  color: #FFFFFF;
}
.btn-exito:hover { background: var(--exito-texto); border-color: var(--exito-texto); }

.btn-peligro {
  background: var(--peligro);
  border-color: var(--peligro);
  color: #FFFFFF;
}
.btn-peligro:hover { background: var(--peligro-texto); border-color: var(--peligro-texto); }

/* En la fila de una sede, "Purgar" no debe gritar mas que el resto:
   se muestra discreto y solo se vuelve solido al apuntarlo. El boton
   solido de verdad es el del modal de confirmacion. */
td .btn-peligro,
.btn-row .btn-peligro[data-act="purgar"] {
  background: var(--peligro-tinte);
  border-color: var(--peligro-borde);
  color: var(--peligro-texto);
}
td .btn-peligro:hover {
  background: var(--peligro);
  border-color: var(--peligro);
  color: #FFFFFF;
}

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--primario);
}
.btn-ghost:hover { background: var(--primario-tenue); border-color: transparent; }

.btn-sm {
  font-size: var(--fs-sm);
  padding: 6px 12px;
  min-height: 34px;
}

/* Boton de informacion (regla R&H). Se usa suelto, sin .btn: se autoabastece. */
.btn-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  color: var(--texto-medio);   /* --texto-suave sobre el tinte daba 4.39:1 */
  background: var(--neutro-tinte);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background-color var(--dur-rapida) var(--ease-suave),
              color var(--dur-rapida) var(--ease-suave),
              transform var(--dur-rapida) var(--ease-suave);
}

.btn-info:hover {
  background: var(--primario-tenue);
  color: var(--primario);
}
.btn-info:active { transform: scale(0.92); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
}

/* --- Estado CARGANDO: cero JS ---
   panel.js ya hace btn.disabled = true mientras el fetch esta en vuelo
   (bindLogin y crearSede) y lo devuelve a false en .then y en .catch.
   El spinner nace y muere con esa espera: no queda ningun loop colgado. */
#loginSubmit:disabled,
#wizardCrear:disabled {
  position: relative;
  color: transparent;
  opacity: 0.9;
  cursor: progress;
}

#loginSubmit:disabled::after,
#wizardCrear:disabled::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #FFFFFF;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* ==========================================================================
   9. FORMULARIOS
   ========================================================================== */
.form-group { margin-bottom: var(--s2); }

label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 650;
  color: var(--texto);
  margin-bottom: 6px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
select,
textarea {
  width: 100%;
  font-family: inherit;
  font-size: 16px;            /* 16px evita el zoom automatico de iOS al enfocar */
  color: var(--texto);
  padding: 10px var(--s15);
  min-height: 42px;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-sm);
  background: var(--superficie);
  transition: border-color var(--dur-rapida) var(--ease-suave),
              box-shadow var(--dur-rapida) var(--ease-suave);
}

input::placeholder, textarea::placeholder { color: var(--texto-suave); opacity: 0.75; }

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--primario);
  box-shadow: var(--anillo);
}

/* Checkboxes de la matriz de permisos y de los modulos por sede */
input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--btn-pri-bg);
  vertical-align: -3px;
  margin-right: 4px;
  cursor: pointer;
}
input[type="checkbox"]:disabled { cursor: not-allowed; opacity: 0.55; }

/* Las etiquetas de permisos/modulos las pinta panel.js como <label> sueltos */
#permMatriz label,
#modulosToggles label {
  font-weight: 500;
  font-size: 14px;
  color: var(--texto-medio);
  padding: 7px var(--s1);
  margin-bottom: 2px;
  border-radius: var(--radio-sm);
  cursor: pointer;
  transition: background-color var(--dur-rapida) var(--ease-suave);
}
#permMatriz label:hover,
#modulosToggles label:hover { background: var(--superficie-2); }

.hint {
  font-size: var(--fs-xs);
  color: var(--texto-suave);
  margin-top: 4px;
  line-height: 1.5;
}

/* ==========================================================================
   10. LOGIN
   ========================================================================== */
.login-wrap {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s3);
  background:
    radial-gradient(1100px 520px at 50% -12%, var(--primario-tinte) 0%, transparent 62%),
    var(--bg);
}

.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: var(--s4);
  box-shadow: var(--sombra-md);
  animation: page-in var(--dur-lenta) var(--ease-aparecer) both;
}

.login-card h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--primario);
  font-size: var(--fs-2xl);
  margin-bottom: var(--s1);
}

/* Misma marca de 4 cuadros del header, en el color de la marca */
.login-card h1::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: currentColor;
  box-shadow:
    11px 0 0 currentColor,
    0 11px 0 currentColor,
    11px 11px 0 var(--borde-fuerte);
  margin-right: 28px;
  flex: 0 0 auto;
}

.login-card .hint { text-align: center; }

/* Unica accion de la pantalla: se le da tamano de accion principal */
.login-card .btn-primario {
  min-height: 46px;
  margin-top: var(--s1);
  font-size: var(--fs-md);
}

/* ==========================================================================
   11. ALERTAS
   ========================================================================== */
.alert {
  padding: var(--s15) var(--s2);
  border-radius: var(--radio-sm);
  border: 1px solid transparent;
  border-left-width: 3px;
  font-size: 14px;
  margin-bottom: var(--s2);
}

.alert-exito  { background: var(--exito-tinte);  border-color: var(--exito-borde);  color: var(--exito-texto); }
.alert-alerta { background: var(--alerta-tinte); border-color: var(--alerta-borde); color: var(--alerta-texto); }
.alert-peligro{ background: var(--peligro-tinte);border-color: var(--peligro-borde);color: var(--peligro-texto); }
.alert-info   { background: var(--info-tinte);   border-color: var(--info-borde);   color: var(--info-texto); }

.alert-exito  { border-left-color: var(--exito); }
.alert-alerta { border-left-color: var(--alerta); }
.alert-peligro{ border-left-color: var(--peligro); }
.alert-info   { border-left-color: var(--info); }

/* ==========================================================================
   12. MODALES
   ========================================================================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(9, 14, 24, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s3);
  z-index: 1000;
  animation: fade-in var(--dur-media) var(--ease-aparecer) both;
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal {
  width: 100%;
  max-width: 480px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-lg);
  max-height: 90vh;
  max-height: 90dvh;
  overflow-y: auto;
  animation: modal-in var(--dur-lenta) var(--ease-aparecer) both;
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

.modal-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding: var(--s3);
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
}

.modal-head h3 { margin: 0; }

.modal-body { padding: var(--s3); }

.modal-body h4 { margin-top: var(--s3); }
.modal-body h4:first-child { margin-top: 0; }

.modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--s1);
  padding: var(--s2) var(--s3);
  border-top: 1px solid var(--borde);
  background: var(--superficie-2);
}

.modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: transparent;
  border: none;
  border-radius: var(--radio-sm);
  font-size: var(--fs-xl);
  line-height: 1;
  color: var(--texto-suave);
  cursor: pointer;
  flex: 0 0 auto;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-rapida) var(--ease-suave),
              color var(--dur-rapida) var(--ease-suave);
}

.modal-close:hover { background: var(--neutro-tinte); color: var(--texto); }

/* ==========================================================================
   13. WIZARD / PROGRESO
   ========================================================================== */
.wizard-steps {
  list-style: none;
  margin: 0 0 var(--s3);
  padding: 0;
}

.wizard-steps li {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s15) 0;
  border-bottom: 1px solid var(--borde);
  font-size: 14px;
  color: var(--texto-medio);
}

.wizard-steps li:last-child { border-bottom: none; }

.step-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: 700;
  flex: 0 0 auto;
  background: var(--neutro-tinte);
  color: var(--texto-suave);
  border: 1px solid var(--borde);
}

.wizard-steps li.is-ok     { color: var(--texto); }
.wizard-steps li.is-ok .step-icon    { background: var(--exito); color: #FFFFFF; border-color: var(--exito); }
.wizard-steps li.is-activo .step-icon{ background: var(--btn-pri-bg); color: #FFFFFF; border-color: var(--btn-pri-bg); }
.wizard-steps li.is-error  { color: var(--peligro-texto); }
.wizard-steps li.is-error .step-icon { background: var(--peligro); color: #FFFFFF; border-color: var(--peligro); }

/* El paso en curso respira: se ve que el servidor sigue trabajando */
.wizard-steps li.is-activo .step-icon { animation: respira 1.8s var(--ease-suave) infinite; }

@keyframes respira {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

.progress {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: var(--neutro-tinte);
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: var(--btn-pri-bg);
  border-radius: 999px;
  transition: width var(--dur-lenta) var(--ease-suave);
}

/* Credenciales del paso 3: bloque destacado, facil de leer y copiar */
[data-step="3"] .mono {
  display: block;
  padding: var(--s1) var(--s15);
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  font-size: 14px;
  word-break: break-all;
  user-select: all;
}

/* ==========================================================================
   14. PESTANAS
   ========================================================================== */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--borde);
  margin-bottom: var(--s3);
  flex-wrap: wrap;
}

.tab {
  padding: var(--s1) var(--s2);
  min-height: 40px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 650;
  color: var(--texto-suave);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  border-radius: var(--radio-sm) var(--radio-sm) 0 0;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--dur-rapida) var(--ease-suave),
              background-color var(--dur-rapida) var(--ease-suave),
              border-color var(--dur-rapida) var(--ease-suave);
}

.tab:hover { color: var(--texto); background: var(--superficie-2); }

.tab.active {
  color: var(--primario);
  border-bottom-color: var(--primario);
}

/* ==========================================================================
   15. UTILIDADES
   ========================================================================== */
.muted { color: var(--texto-suave); }
.text-right { text-align: right; }
.text-center { text-align: center; }
.nowrap { white-space: nowrap; }
.mono { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: var(--fs-sm); }
.mt-1 { margin-top: var(--s1); }
.mt-2 { margin-top: var(--s2); }
.mt-3 { margin-top: var(--s3); }
.mb-0 { margin-bottom: 0; }
.hidden { display: none !important; }

.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--borde);
  border-top-color: var(--primario);
  border-radius: 50%;
  display: inline-block;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* --- Estado vacio: no es un error, es "todavia no hay nada" --- */
.empty {
  display: block;
  text-align: center;
  color: var(--texto-suave);
  padding: var(--s5) var(--s2);
  font-size: 14px;
}

.empty-icon {
  display: block;
  width: 44px;
  height: 44px;
  margin: 0 auto var(--s2);
  border-radius: var(--radio);
  border: 2px dashed var(--borde-fuerte);
  position: relative;
}

/* Mismos 4 cuadros de la marca, en gris: "aqui van tus sedes" */
.empty-icon::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 13px;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--borde-fuerte);
  box-shadow: 10px 0 0 var(--borde-fuerte), 0 10px 0 var(--borde-fuerte), 10px 10px 0 var(--borde-fuerte);
}

.empty-title {
  display: block;
  font-size: var(--fs-lg);
  font-weight: 650;
  color: var(--texto);
  margin-bottom: 4px;
}

.empty .btn { margin-top: var(--s3); }

/* Fila de tabla usada como estado vacio / error (colspan) */
td.empty { padding: var(--s4) var(--s2); }

/* --- Toast: posicionado desde CSS (panel.js ya no escribe estilos inline) --- */
#toast {
  position: fixed;
  right: var(--s3);
  bottom: var(--s3);
  left: auto;
  z-index: 2000;
  max-width: 360px;
  margin: 0;
  box-shadow: var(--sombra-md);
  animation: toast-in var(--dur-media) var(--ease-aparecer) both;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   16. RESPONSIVE
   ========================================================================== */

/* --- Tabla de sedes en modo tarjeta (celular) ---
   panel.js pone data-th="..." en cada <td>; aqui se convierte en etiqueta. */
@media (max-width: 720px) {
  .tabla-sedes,
  .tabla-sedes tbody,
  .tabla-sedes tr,
  .tabla-sedes td { display: block; width: 100%; }

  .tabla-sedes thead { display: none; }

  .tabla-sedes tr {
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--superficie);
    padding: var(--s1) var(--s2);
    margin-bottom: var(--s2);
  }
  .tabla-sedes tr:hover { background: var(--superficie); }

  .tabla-sedes td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s2);
    padding: 7px 0;
    border-bottom: 1px solid var(--borde);
    text-align: right;
  }
  .tabla-sedes tr td:last-child { border-bottom: none; }

  .tabla-sedes td::before {
    content: attr(data-th);
    flex: 0 0 auto;
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--texto-suave);
    text-align: left;
  }

  /* Filas de aviso (colspan) no llevan etiqueta */
  .tabla-sedes td[colspan] { display: block; text-align: center; }
  .tabla-sedes td[colspan]::before { content: none; }

  /* Acciones: rejilla de 2 columnas, dedo-friendly */
  .tabla-sedes td[data-th="Acciones"] { display: block; text-align: left; padding-top: var(--s15); }
  .tabla-sedes td[data-th="Acciones"]::before { display: block; margin-bottom: 6px; }
  td .btn-row { flex-direction: row; flex-wrap: wrap; }
  td .btn-row .btn { flex: 1 1 130px; min-height: 44px; }
}

@media (max-width: 640px) {
  .container { padding: var(--s2); }

  /* En celular la nav se envuelve en 2-3 lineas: pegado ocuparia ~1/5 de la
     pantalla de forma permanente. Se suelta y se compacta. */
  .app-header {
    position: static;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: var(--s1) var(--s2) var(--s15);
  }

  .app-header h1 { font-size: var(--fs-md); }

  .app-header .header-actions { justify-content: flex-start; gap: 2px; }

  .app-header .btn {
    min-height: 38px;
    padding: 8px 10px;
    font-size: var(--fs-sm);
  }

  .app-header .user-name {
    width: 100%;
    order: -1;
    padding: 0;
    font-size: var(--fs-xs);
    opacity: 0.8;
  }

  .card,
  .stat,
  .login-card { padding: var(--s2); }

  .login-card { padding: var(--s3) var(--s2); }

  .stat { padding: var(--s2) var(--s2) var(--s2) var(--s3); }
  .stat-value { font-size: var(--fs-2xl); }

  .page-head { flex-direction: column; align-items: stretch; }
  .page-head .btn { width: 100%; min-height: 46px; }

  .empty .btn { width: 100%; min-height: 46px; }

  .btn-row { flex-direction: column; }
  .btn-row .btn { width: 100%; }

  thead th,
  tbody td { padding: var(--s1); font-size: var(--fs-sm); }

  .modal-backdrop { padding: var(--s1); align-items: flex-end; }
  .modal { max-height: 92dvh; }
  .modal-head, .modal-body { padding: var(--s2); }
  .modal-foot { flex-direction: column-reverse; padding: var(--s2); }
  .modal-foot .btn { width: 100%; min-height: 46px; }

  #toast {
    right: var(--s1);
    left: var(--s1);
    bottom: var(--s1);
    max-width: none;
  }
}

/* ==========================================================================
   17. MOVIMIENTO REDUCIDO (va al final: gana por cascada)
   El selector * NO alcanza pseudo-elementos: por eso ::before y ::after
   estan listados explicitamente (ahi viven los spinners).
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  /* Excepcion: un spinner congelado en un frame al azar parece un error.
     Se deja girar, pero lento y suave. */
  .spinner,
  #loginSubmit:disabled::after,
  #wizardCrear:disabled::after {
    animation: spin 2.4s linear infinite !important;
  }

  .btn:active:not(:disabled) { transform: none; }
  .stat:hover { transform: none; }
}