/* adscentral — hoja de estilos única.
   Escala tipográfica y paleta definidas acá arriba: no inventar valores sueltos más abajo. */

:root {
  --bg: #0e1117;
  --bg-elev: #161b22;
  --bg-elev-2: #1c2430;
  --border: #262d38;
  --text: #e6edf3;
  --text-dim: #8b949e;
  --accent: #3b82f6;
  --accent-hover: #2563eb;
  --ok: #22c55e;
  --warn: #f59e0b;
  --error: #ef4444;

  --radius: 10px;
  --radius-sm: 6px;

  /* Escala tipográfica */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2rem;
  --fs-3xl: 2.75rem;

  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-8: 3rem;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--fs-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.25; margin: 0; font-weight: 650; }
p { margin: 0; }
code {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.9em;
  background: var(--bg-elev-2);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-sm);
}

/* ---------- Header ---------- */

/* Fijo al scrollear: las tablas son largas y sin esto se pierde la navegación y el botón de
   salir apenas se baja un poco. */
.app-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-3) var(--sp-5);
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

/* Para quien navega con teclado: primer tabulador salta el menú y va al contenido. */
.saltar-al-contenido {
  position: absolute;
  left: -9999px;
  z-index: 30;
  padding: var(--sp-3) var(--sp-4);
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
}
.saltar-al-contenido:focus { left: var(--sp-4); top: var(--sp-2); }

.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.logo-mark {
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--accent), #8b5cf6);
  flex-shrink: 0;
}

.nav { display: flex; gap: var(--sp-1); flex: 1; flex-wrap: wrap; }

.nav a, .nav-pendiente {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  text-decoration: none;
  color: var(--text-dim);
}

.nav a:hover { color: var(--text); background: var(--bg-elev-2); }
.nav a.is-active { color: var(--text); background: var(--bg-elev-2); font-weight: 600; }
.nav-pendiente { opacity: 0.4; cursor: not-allowed; }

.logout { display: flex; align-items: center; gap: var(--sp-3); }
.usuario { font-size: var(--fs-sm); color: var(--text-dim); }

/* ---------- Botones ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 550;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s;
}

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }

.btn-ghost { background: transparent; color: var(--text-dim); border-color: var(--border); }
.btn-ghost:hover { color: var(--text); background: var(--bg-elev-2); }

.btn-block { width: 100%; }

.btn:focus-visible, a:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- Layout ---------- */

/* 1360px: con 1200 quedaban dos gráficos apretados al lado y las tablas anchas scrolleaban.
   Sigue con tope para que las líneas de texto no se vuelvan ilegibles en pantallas muy anchas. */
.container { max-width: 1360px; margin: 0 auto; padding: var(--sp-5) var(--sp-5) var(--sp-8); }

.page-head { margin-bottom: var(--sp-5); }
.page-head h1 { font-size: var(--fs-xl); letter-spacing: -0.02em; }
.page-sub { color: var(--text-dim); font-size: var(--fs-sm); margin-top: var(--sp-1); }

/* ---------- Tarjetas de KPI ---------- */

/* Las seis métricas entran en una sola fila en escritorio. Antes ocupaban dos filas y empujaban
   los gráficos y las tablas fuera de la pantalla: en un tablero que se mira de reojo, lo que
   obliga a scrollear para el dato básico está mal ubicado. */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}

.card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
}

.card-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  font-weight: 600;
  /* Etiquetas como "Tasa de conv." no deben partirse y descuadrar la altura de las tarjetas */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-value {
  font-size: var(--fs-2xl);
  font-weight: 650;
  letter-spacing: -0.03em;
  margin-top: 2px;
  /* Proporcional, no tabular: son cifras sueltas de distinto tamaño, no una columna alineada */
  white-space: nowrap;
  overflow-wrap: normal;
}

/* ---------- Paneles ---------- */

.panel {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  margin-bottom: var(--sp-4);
}

/* El título de sección es una etiqueta, no un encabezado que compita con el de la página:
   antes todos los h2 tenían el mismo peso visual que el h1 y la jerarquía se perdía. */
.panel h2 {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  font-weight: 600;
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border);
}
/* En los paneles con tabla el borde del título duplicaría la línea del encabezado */
.panel:has(> .tabla-scroll) h2 { border-bottom: none; padding-bottom: 0; }
.panel-vacio p { color: var(--text-dim); font-size: var(--fs-sm); max-width: 62ch; }

/* Estado vacío: en vez de una tabla en blanco o un "no hay datos" seco, dice qué pasó y qué
   hacer. Un espacio vacío sin explicación se lee como un error de la aplicación. */
.vacio {
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
  color: var(--text-dim);
  font-size: var(--fs-sm);
}
.vacio strong { display: block; color: var(--text); font-size: var(--fs-base); margin-bottom: var(--sp-1); }

.lista-pasos {
  margin: var(--sp-4) 0 0;
  padding-left: var(--sp-5);
  color: var(--text-dim);
  font-size: var(--fs-sm);
  display: grid;
  gap: var(--sp-2);
}
.lista-pasos strong { color: var(--text); }

/* ---------- Filtros ---------- */

/* Dos filas: los atajos de período arriba, y en la segunda el rango a la izquierda con el resto
   de los controles empujados a la derecha. */
.filtros {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-2);
}

.presets { grid-column: 1 / -1; }

.filtros-derecha { display: flex; align-items: flex-end; gap: var(--sp-3); flex-wrap: wrap; }

@media (max-width: 900px) {
  .filtros { grid-template-columns: 1fr; }
  .filtros-derecha { justify-content: flex-start; }
}

.presets { display: flex; flex-wrap: wrap; gap: var(--sp-1); }

.preset {
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: var(--fs-xs);
  color: var(--text-dim);
  text-decoration: none;
  white-space: nowrap;
}
.preset:hover { color: var(--text); border-color: var(--text-dim); }
.preset.is-active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }

.rango-custom { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; align-self: flex-end; }
.rango-custom label { font-size: var(--fs-xs); color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; }
.rango-custom input[type="date"] {
  padding: var(--sp-1) var(--sp-2);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm);
  color-scheme: dark;
}

.switch-moneda { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; align-self: flex-end; }
.switch-moneda a {
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-dim);
  text-decoration: none;
}
.switch-moneda a.is-active { background: var(--bg-elev-2); color: var(--text); }

.filtros-resumen { font-size: var(--fs-xs); color: var(--text-dim); margin: 0 0 var(--sp-4); }
.filtros-resumen strong { color: var(--text); }
.quitar-filtro { color: var(--accent); text-decoration: none; margin-left: var(--sp-1); }
.quitar-filtro:hover { text-decoration: underline; }

.selector { display: inline-flex; flex-direction: column; gap: 2px; }
.selector-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  font-weight: 600;
}
.selector-input {
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm);
  min-width: min(140px, 100%);
}
.selector-input:hover { border-color: var(--text-dim); }

/* ---------- Estado de la sincronización on-demand ---------- */

.sync-estado {
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
  font-size: var(--fs-sm);
}
.sync-estado ul { margin: var(--sp-2) 0 0; padding-left: var(--sp-5); }
.sync-estado .btn { margin-top: var(--sp-3); }
.sync-ok { border-color: rgba(34, 197, 94, 0.4); background: rgba(34, 197, 94, 0.08); }
.sync-error { border-color: rgba(239, 68, 68, 0.4); background: rgba(239, 68, 68, 0.08); }

/* ---------- Variación en las tarjetas ---------- */

.card-var { font-size: var(--fs-xs); font-weight: 600; margin-top: var(--sp-1); }
.card-var.sube-bien { color: var(--ok); }
.card-var.sube-mal { color: var(--error); }
.card-var.neutro { color: var(--text-dim); }

/* ---------- Gráficos ---------- */

/* Altura fija: sin esto Chart.js crece indefinidamente al recalcular el layout */
.grafico-wrap { position: relative; height: 260px; }
@media (max-width: 640px) { .grafico-wrap { height: 220px; } }

/* Dos gráficos lado a lado en escritorio.
   Apilados sumaban más de 700px de alto y empujaban las tablas fuera de la pantalla; la
   comparación entre inversión y resultados además se lee mejor con los dos a la vista. */
.graficos-par {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.graficos-par .panel { margin: 0; }

/* ---------- Varios ---------- */

.migas { font-size: var(--fs-sm); margin-bottom: var(--sp-2); }
.migas a { color: var(--text-dim); text-decoration: none; }
.migas a:hover { color: var(--text); }

.link-cliente { color: var(--accent); text-decoration: none; font-weight: 550; }
.link-cliente:hover { text-decoration: underline; }

.campania-nombre { display: block; }
.campania-meta { display: block; font-size: var(--fs-xs); color: var(--text-dim); }

.tabla tfoot td { border-top: 2px solid var(--border); border-bottom: none; }

.lista-alertas { margin: 0; padding-left: var(--sp-5); font-size: var(--fs-sm); display: grid; gap: var(--sp-2); }
.detalle-error {
  display: block;
  font-family: ui-monospace, Consolas, monospace;
  font-size: var(--fs-xs);
  color: var(--text-dim);
  margin-top: var(--sp-1);
  word-break: break-word;
}

.pie-sync { font-size: var(--fs-xs); color: var(--text-dim); margin-top: var(--sp-5); text-align: right; }

/* ---------- Configuración de clientes ---------- */

.form-cliente {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-4);
}

.campo-ancho { flex: 1 1 320px; min-width: 0; }
.campo-ancho input { width: 100%; }

.campo input[type="text"],
.campo input[type="number"] {
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm);
}

.campo-ayuda { font-size: var(--fs-xs); color: var(--text-dim); }

.campo-check { align-self: center; }
.check { display: flex; align-items: center; gap: var(--sp-2); cursor: pointer; font-size: var(--fs-sm); }
.check input { width: 1rem; height: 1rem; accent-color: var(--accent); cursor: pointer; }

.acciones-panel { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); flex-wrap: wrap; }
.acciones-panel .panel-nota { margin: 0; }

.form-inline { display: inline; }

.alert-aviso {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.35);
  color: #fcd34d;
  margin-bottom: var(--sp-4);
}

/* ---------- Alertas ---------- */

.lista-alertas-detalle { display: grid; gap: var(--sp-3); }

.alerta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-4);
  background: var(--bg);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--radius-sm);
}

/* El color indica gravedad, pero nunca va solo: cada alerta lleva su etiqueta de nivel. */
.alerta-critico { border-left-color: var(--error); }
.alerta-alto { border-left-color: var(--warn); }
.alerta-medio { border-left-color: var(--text-dim); }

.alerta-cuerpo { min-width: 0; }
.alerta-donde { font-size: var(--fs-sm); margin-bottom: var(--sp-1); }
.alerta-titulo { font-size: var(--fs-base); font-weight: 650; margin-bottom: var(--sp-1); }
.alerta-detalle { font-size: var(--fs-sm); color: var(--text-dim); max-width: 78ch; }
.alerta-numeros { font-size: var(--fs-xs); color: var(--text-dim); margin-top: var(--sp-2); }

.alerta-acciones {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-2);
  flex-shrink: 0;
}

/* Contador en la navegación: el número tiene que verse sin entrar a la página. */
.nav-contador {
  display: inline-block;
  min-width: 1.25rem;
  padding: 0 5px;
  margin-left: var(--sp-1);
  border-radius: 999px;
  background: var(--error);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.25rem;
  text-align: center;
}
.nav-contador-suave { background: var(--warn); color: #1a1a19; }

/* ---------- Resumen de alertas en el dashboard y en la vista de cliente ---------- */

/* Va arriba de los KPIs y con borde propio: su función es contradecir el total. Un panel más,
   igual a los demás, se lee después de los números y ya es tarde. */
.panel-alertas {
  border-left: 3px solid var(--warn);
  margin-bottom: var(--sp-4);
}

.panel-alertas-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border);
}

/* Los h2 de panel son etiquetas en mayúscula y gris, que es lo correcto cuando solo nombran la
   sección. Acá el h2 ES el dato ("2 alertas activas"), así que va con el peso de un dato. La
   línea divisoria pasa al contenedor para que también abarque el enlace de la derecha. */
.panel-alertas-head h2 {
  margin: 0;
  padding: 0;
  border: none;
  font-size: var(--fs-base);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 650;
  color: var(--text);
}

.texto-critico { color: var(--error); }

.lista-alertas-resumen { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }

/* Grid en vez de flex: la columna del cliente se alinea entre filas, así el ojo baja por una sola
   línea vertical en lugar de zigzaguear según el largo de cada nombre. */
.alerta-linea {
  display: grid;
  grid-template-columns: minmax(min(9rem, 30%), auto) 1fr auto;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--text-dim);
  font-size: var(--fs-sm);
}

.alerta-linea.alerta-critico { border-left-color: var(--error); }
.alerta-linea.alerta-alto { border-left-color: var(--warn); }

.alerta-linea-titulo { min-width: 0; }
.alerta-linea-donde { color: var(--text-dim); min-width: 0; }
.alerta-linea .campania-meta { display: inline; white-space: nowrap; }

@media (max-width: 640px) {
  .alerta { flex-direction: column; }
  .alerta-acciones { flex-direction: row; align-items: center; }

  /* Apilado: tres columnas en 375px dejarían el título en una palabra por línea. */
  .alerta-linea { grid-template-columns: 1fr; gap: var(--sp-1); }
  .alerta-linea .campania-meta { display: block; }
}

/* ---------- Avisos de credenciales ---------- */

.avisos { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-5); }

.aviso {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
  font-size: var(--fs-sm);
}

/* Colores de estado, no de la paleta de series: acá el color SÍ significa gravedad.
   Nunca van solos — el texto dice qué pasa y en cuántos días. */
.aviso-critico { border-left-color: var(--error); background: rgba(239, 68, 68, 0.08); }
.aviso-alto { border-left-color: var(--warn); background: rgba(245, 158, 11, 0.08); }
.aviso-medio { border-left-color: var(--text-dim); }

.aviso-texto { display: grid; gap: 2px; }
.aviso-texto span { color: var(--text-dim); }
.aviso-accion { font-family: ui-monospace, Consolas, monospace; font-size: var(--fs-xs); }

.aviso-dias {
  font-size: var(--fs-lg);
  font-weight: 650;
  white-space: nowrap;
  /* Proporcional, no tabular: es un número suelto, no una columna */
}
.aviso-critico .aviso-dias { color: var(--error); }
.aviso-alto .aviso-dias { color: var(--warn); }

@media (max-width: 640px) {
  .aviso { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
}

/* ---------- Reportes ---------- */

.form-reporte {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-3);
}

.campo { display: flex; flex-direction: column; gap: 2px; }
.campo label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  font-weight: 600;
}
.campo input[type="date"] {
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm);
  color-scheme: dark;
}

.alert-ok {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.35);
  color: #86efac;
  margin-bottom: var(--sp-4);
}
.alert-ok a { color: inherit; }

.filtro-activo { font-weight: 400; color: var(--text-dim); font-size: var(--fs-sm); }

/* El flex va en un contenedor DENTRO de la celda, no en la celda misma: un td con display:flex
   deja de ser celda de tabla y pierde la alineacion vertical y el borde compartido, con lo que
   esa columna quedaba desfasada respecto del resto de la fila. */
.links-reporte { white-space: nowrap; }
.links-acciones { display: flex; gap: var(--sp-3); align-items: center; }
.links-reporte a { color: var(--accent); text-decoration: none; }
.links-reporte a:hover { text-decoration: underline; }

.btn-copiar {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font: inherit;
  font-size: var(--fs-xs);
  padding: 2px var(--sp-2);
  cursor: pointer;
}
.btn-copiar:hover { color: var(--text); border-color: var(--text-dim); }

/* ---------- Diagnóstico de configuración ---------- */

.panel-alerta { border-color: rgba(239, 68, 68, 0.4); background: rgba(239, 68, 68, 0.06); }

.panel-nota { color: var(--text-dim); font-size: var(--fs-xs); margin-bottom: var(--sp-3); }

.explicacion {
  font-size: var(--fs-sm);
  margin-top: var(--sp-3);
  padding: var(--sp-3);
  background: var(--bg);
  border-left: 3px solid var(--warn);
  border-radius: var(--radius-sm);
  max-width: 80ch;
}

.pill {
  display: inline-block;
  padding: 0.1rem var(--sp-2);
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 650;
  white-space: nowrap;
}
.pill-ok { background: rgba(34, 197, 94, 0.15); color: #86efac; }
.pill-error { background: rgba(239, 68, 68, 0.15); color: #fca5a5; }
.pill-aviso { background: rgba(245, 158, 11, 0.15); color: #fcd34d; }

.fila-error td { background: rgba(239, 68, 68, 0.05); }
.fila-aviso td { background: rgba(245, 158, 11, 0.05); }

/* ---------- Tablas ---------- */

.tabla { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.tabla th, .tabla td { padding: var(--sp-3); text-align: left; border-bottom: 1px solid var(--border); }
.tabla th {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  font-weight: 600;
  /* Queda fijo al scrollear una tabla larga: sin encabezado no se sabe qué columna se está
     leyendo, que es justo cuando más se necesita. */
  position: sticky;
  top: 0;
  background: var(--bg-elev);
  z-index: 1;
  white-space: nowrap;
}
.tabla tbody tr:last-child td { border-bottom: none; }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; }

/* Resalte de fila: en una tabla de siete columnas, seguir un renglón con la vista es difícil */
.tabla tbody tr:hover td { background: var(--bg-elev-2); }
.tabla tfoot td { background: var(--bg-elev); }

/* Las tablas anchas scrollean dentro de su contenedor: la página nunca scrollea horizontal */
.tabla-scroll { overflow-x: auto; }

/* ---------- Login ---------- */

.login-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--sp-5);
}

.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-6);
  display: grid;
  gap: var(--sp-2);
}

.login-brand { display: flex; align-items: center; gap: var(--sp-2); }
.login-brand h1 { font-size: var(--fs-xl); letter-spacing: -0.02em; }
.login-sub { color: var(--text-dim); font-size: var(--fs-sm); margin-bottom: var(--sp-4); }

.login-card label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  font-weight: 600;
  margin-top: var(--sp-2);
}

.login-card input {
  width: 100%;
  padding: var(--sp-3);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm);
}

.login-card .btn { margin-top: var(--sp-5); padding: var(--sp-3); }

/* ---------- Alertas ---------- */

.alert {
  padding: var(--sp-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  border: 1px solid transparent;
}
.alert-error { background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.35); color: #fca5a5; }

/* ---------- Error ---------- */

.error-wrap {
  min-height: 100vh;
  display: grid;
  place-content: center;
  justify-items: start;
  gap: var(--sp-4);
  max-width: 900px;
  margin: 0 auto;
  padding: var(--sp-5);
}
.error-code { font-size: var(--fs-3xl); font-weight: 700; color: var(--text-dim); }
.error-wrap h1 { font-size: var(--fs-xl); }
.error-detalle {
  width: 100%;
  overflow-x: auto;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--text-dim);
}

/* ---------- Móvil ---------- */

@media (max-width: 640px) {
  .app-header { gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); }
  .nav { order: 3; width: 100%; }
  .container { padding: var(--sp-5) var(--sp-4) var(--sp-6); }
  .page-head h1 { font-size: var(--fs-xl); }
  .card-value { font-size: var(--fs-2xl); }
}