:root {
  --tinta: #0E2238;
  --tinta-suave: #163654;
  --superficie: #F7F9FB;
  --blanco: #FFFFFF;
  --azul: #0077C8;
  --azul-suave: #E6F3FB;
  --verde: #178A5B;
  --verde-suave: #E5F3EC;
  --ambar: #B7791F;
  --ambar-suave: #FBF1E1;
  --rojo: #C0392B;
  --rojo-suave: #FBEAE8;
  --texto: #1A2733;
  --texto-sec: #5B6B7A;
  --borde: #DCE3EA;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--superficie);
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4 { font-family: inherit; margin: 0; }
.hidden { display: none !important; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; }

/* ============ LOGIN ============ */
.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(155deg, var(--tinta) 0%, var(--tinta-suave) 100%);
  padding: 24px;
}

.login-card {
  background: var(--blanco);
  border-radius: 10px;
  padding: 40px 36px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 24px 60px rgba(14, 34, 56, 0.35);
}

.brand { display: flex; align-items: center; gap: 10px; }
.brand-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--azul); flex-shrink: 0; }
.brand h1 { font-size: 1.2rem; color: var(--tinta); font-weight: 700; }

.subtitle { color: var(--texto-sec); font-size: 0.85rem; margin: 8px 0 26px; line-height: 1.45; }

form label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--tinta); margin: 14px 0 6px; }
form input {
  width: 100%; padding: 11px 12px; border: 1px solid var(--borde);
  border-radius: 6px; font-size: 0.95rem; min-height: 44px;
}
form input:focus { outline: 2px solid var(--azul); outline-offset: 1px; border-color: var(--azul); }

form button {
  width: 100%; margin-top: 22px; padding: 12px; min-height: 44px;
  background: var(--tinta); color: var(--blanco); border: none;
  border-radius: 6px; font-size: 0.95rem; font-weight: 600;
}
form button:hover { background: var(--tinta-suave); }

.error-msg { color: var(--rojo); font-size: 0.85rem; min-height: 1.2em; margin-top: 12px; }

/* ============ APP SHELL ============ */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 248px; background: var(--tinta); color: var(--blanco);
  display: flex; flex-direction: column; justify-content: space-between;
  flex-shrink: 0; position: fixed; top: 0; bottom: 0; left: 0; z-index: 40;
  transition: transform 0.25s ease;
}

.sidebar-top { padding: 22px 18px 0; }
.sidebar .brand { color: var(--blanco); font-weight: 700; font-size: 0.95rem; margin-bottom: 26px; }

.sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  color: #B9C9DA; text-decoration: none; padding: 11px 12px;
  border-radius: 7px; font-size: 0.9rem; min-height: 44px;
}
.nav-icon { width: 18px; text-align: center; opacity: 0.85; }
.nav-item:hover { background: rgba(255,255,255,0.06); color: var(--blanco); }
.nav-item.active { background: var(--azul); color: var(--blanco); font-weight: 600; }

.sidebar-bottom { padding: 16px 18px 22px; border-top: 1px solid rgba(255,255,255,0.1); }
.sidebar-di, .sidebar-user { display: flex; justify-content: space-between; padding: 6px 2px; font-size: 0.78rem; }
.sidebar-di-label, .sidebar-user-label { color: #7E93A8; }
.sidebar-di-value, .sidebar-user-value { color: var(--blanco); font-weight: 600; }

.logout-btn {
  width: 100%; margin-top: 10px; min-height: 40px;
  background: transparent; border: 1px solid #33506F; color: #C9D8E8;
  padding: 9px; border-radius: 6px; font-size: 0.85rem;
}
.logout-btn:hover { background: #16324E; }

.sidebar-scrim { display: none; }

.content { flex: 1; margin-left: 248px; padding: 26px 34px 60px; max-width: 1180px; }

.topbar { display: none; }

/* ============ VIEW HEADER / FILTERS ============ */
.view-header { margin-bottom: 18px; }
.view-header h2 { font-size: 1.3rem; color: var(--tinta); }
.view-subtitle { font-size: 0.8rem; color: var(--texto-sec); }

/* C05 — franja de contexto (muestra, periodo, última actualización).
   Deliberadamente discreta: mismo tono que .view-subtitle, sin fondo de
   color ni tipografía grande, para no competir visualmente con las
   tarjetas KPI que vienen justo debajo. */
.dashboard-contexto {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--texto-sec);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--borde);
}
.contexto-item strong { color: var(--tinta); font-weight: 600; }
.contexto-sep { color: var(--borde); }
@media (max-width: 640px) {
  .contexto-sep { display: none; }
  .dashboard-contexto { flex-direction: column; gap: 4px; }
}

.filter-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.filter-select, .filter-input {
  padding: 9px 12px; border: 1px solid var(--borde); border-radius: 6px;
  font-size: 0.85rem; background: var(--blanco); min-height: 40px; color: var(--texto);
}
.filter-input { flex: 1; min-width: 180px; }

/* Rango Desde/Hasta (componente común: Dashboard, Historial, Cambios, Reportes) */
.rango-fechas { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.rango-campo { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--texto-sec); }
.rango-campo .rango-fecha { flex: 0 0 auto; min-width: 150px; }
.rango-etiqueta { font-size: 0.82rem; font-weight: 600; color: var(--texto); }
.rango-error { font-size: 0.82rem; color: var(--rojo); width: 100%; }
.alert-info { background: var(--azul-suave); color: var(--texto); }
/* Último corte (Dashboard) */
.corte-panel { background: var(--blanco); border-radius: 8px; padding: 18px; border: 1px solid var(--borde); margin-bottom: 18px; }
.corte-panel h3 { font-size: 0.92rem; color: var(--tinta); margin-bottom: 10px; }
.corte-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-top: 10px; }
.corte-dato { display: flex; flex-direction: column; gap: 2px; font-size: 0.85rem; }
.corte-etiqueta { font-size: 0.72rem; color: var(--texto-sec); text-transform: uppercase; letter-spacing: 0.02em; }
/* Último corte compacto (solo presentación: mismos 9 datos, avisos y notas). */
.corte-panel { padding: 14px 16px; }
.corte-panel h3 { margin-bottom: 6px; }
.corte-grid { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 6px; }
.corte-dato { font-size: 0.84rem; }
.corte-etiqueta { font-size: 0.68rem; }
.corte-dato[data-corte="lineas"] { padding-left: 22px; border-left: 1px solid var(--borde); }
.corte-panel[data-estado="COMPLETADA"] [data-corte="estado"] strong { color: var(--verde); }
.corte-panel[data-estado="FALLIDA"] [data-corte="estado"] strong { color: var(--rojo); }
.corte-panel[data-estado="PROCESANDO"] [data-corte="estado"] strong { color: var(--ambar); }
.corte-panel .corte-pie { font-size: 0.7rem; margin-top: 8px; }
.corte-panel .hint { margin-bottom: 0; }
.corte-panel .inline-alert { margin-top: 4px; }

/* Barra única de filtros (Dashboard y Reportes; solo presentación). */
.barra-filtros {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  background: var(--blanco); border: 1px solid var(--borde); border-radius: 8px;
  padding: 12px 14px; margin-bottom: 16px;
}
.barra-filtros .rango-fechas, .barra-filtros .filter-row { margin-bottom: 0; }
.barra-filtros .rango-etiqueta { background: var(--azul-suave); color: var(--tinta); padding: 4px 10px; border-radius: 20px; font-size: 0.78rem; }
.filtro-campo { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--texto-sec); }

/* Periodo del contexto del Dashboard: mismo texto que la etiqueta del
   selector de rango (visible arriba). Se mantiene para lectores de pantalla
   y se oculta visualmente para no repetir la fecha. */
.dashboard-contexto .contexto-periodo {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.dashboard-contexto .contexto-sep-periodo { display: none; }

/* Indicadores agrupados en tres bloques (mismas tarjetas, mismo orden). */
.kpi-bloques { display: grid; grid-template-columns: 3fr 1fr; gap: 16px; margin-bottom: 24px; }
.kpi-bloque { min-width: 0; }
.kpi-bloque-periodo { grid-column: 1 / -1; }
.kpi-bloque-cabecera { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 8px; }
.kpi-bloque-titulo { font-size: 0.82rem; font-weight: 700; color: var(--tinta); text-transform: uppercase; letter-spacing: 0.03em; }
.kpi-bloque-nota { font-size: 0.72rem; color: var(--texto-sec); }
.kpi-bloque .kpi-grid { margin-bottom: 0; gap: 12px; }
.kpi-bloque-lineas .kpi-grid { grid-template-columns: repeat(3, 1fr); }
.kpi-bloque-hoy .kpi-grid { grid-template-columns: 1fr; }
.kpi-bloque-periodo .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.kpi-bloque .kpi-card { padding: 14px 16px; }
.kpi-bloque-hoy .kpi-card { background: var(--azul-suave); }
.historial-leyenda { font-size: 0.8rem; color: var(--texto-sec); margin: -6px 0 14px; }

/* ============ KPI CARDS ============ */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 26px; }
.kpi-card {
  background: var(--blanco); border-radius: 8px; padding: 16px 18px;
  border-left: 4px solid var(--azul); box-shadow: 0 1px 3px rgba(14,34,56,0.06);
}
.kpi-azul { border-left-color: var(--azul); }
.kpi-verde { border-left-color: var(--verde); }
.kpi-ambar { border-left-color: var(--ambar); }
.kpi-rojo { border-left-color: var(--rojo); }
.kpi-value { font-size: 1.6rem; font-weight: 700; color: var(--tinta); line-height: 1.1; }
.kpi-label { font-size: 0.78rem; color: var(--texto-sec); margin-top: 4px; }
.kpi-hint { font-size: 0.7rem; color: var(--texto-sec); margin-top: 2px; }

/* ============ CHARTS ============ */
.chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 26px; }
.chart-card { background: var(--blanco); border-radius: 8px; padding: 18px; border: 1px solid var(--borde); min-width: 0; }
.chart-card h3 { font-size: 0.92rem; color: var(--tinta); margin-bottom: 12px; }
.chart svg { width: 100%; height: auto; display: block; }
.chart-legend { display: flex; gap: 16px; margin-top: 8px; font-size: 0.75rem; color: var(--texto-sec); }

/* C04 — valores de los gráficos visibles directamente (sin depender del
   hover). Fila de chips desplazable horizontalmente cuando hay muchos
   puntos (p.ej. "Últimos 30 días"), para no desbordar el layout ni
   ocultar información: todo el texto sigue existiendo en el DOM, solo
   se puede necesitar desplazar para verlo todo, nunca pasar el mouse. */
.chart-values {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-top: 10px;
  padding-bottom: 4px;
  margin-top: 6px;
  border-top: 1px solid var(--borde);
  gap: 6px;
  scrollbar-width: thin;
}
.chart-value-chip {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--superficie);
  white-space: nowrap;
}
.chart-value-label { font-size: 0.66rem; font-weight: 600; color: var(--texto-sec); }
.chart-value-num { font-size: 0.72rem; font-weight: 700; color: var(--tinta); }
.legend-item { display: flex; align-items: center; gap: 6px; }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* ============ LISTS ============ */
.list-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.list-card { background: var(--blanco); border-radius: 8px; padding: 18px; border: 1px solid var(--borde); }
.list-card h3 { font-size: 0.92rem; color: var(--tinta); margin-bottom: 10px; }
.activity-list { display: flex; flex-direction: column; gap: 2px; }
.activity-item {
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--superficie); font-size: 0.82rem;
}
.activity-dn { font-weight: 600; color: var(--texto); }
.activity-fecha { color: var(--texto-sec); font-size: 0.75rem; text-align: right; }

.cambio-pill { font-size: 0.72rem; font-weight: 600; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.cambio-positivo { background: var(--verde-suave); color: var(--verde); }
.cambio-atencion { background: var(--ambar-suave); color: var(--ambar); }

.callout-banner {
  display: flex; align-items: baseline; gap: 10px; background: var(--azul-suave);
  border-radius: 8px; padding: 14px 18px; margin-bottom: 18px; color: var(--tinta); font-size: 0.9rem;
}
.callout-value { font-size: 1.6rem; font-weight: 700; }

/* ============ BADGES (estado) ============ */
.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px;
  border-radius: 20px; font-weight: 700; font-size: 0.76rem; white-space: nowrap;
}
.badge-icon { font-size: 0.6rem; }
.badge-enrolado { background: var(--verde-suave); color: var(--verde); }
.badge-no-enrolado { background: var(--ambar-suave); color: var(--ambar); }
.badge-error { background: var(--rojo-suave); color: var(--rojo); }
.badge-desconocido { background: #EEF1F4; color: var(--texto-sec); }

/* ============ QUERY CARD (consulta individual) ============ */
.query-card-v2 {
  background: var(--blanco); border-radius: 8px; padding: 24px;
  max-width: 560px; border: 1px solid var(--borde);
}
.query-card-v2 label { font-size: 0.8rem; font-weight: 600; color: var(--tinta); }
.query-row { display: flex; gap: 10px; margin-top: 8px; }
.dn-input {
  flex: 1; padding: 11px 12px; border: 1px solid var(--borde); border-radius: 6px;
  font-size: 1.05rem; letter-spacing: 0.5px; min-height: 44px;
}
.btn-primary {
  padding: 11px 20px; background: var(--azul); color: var(--blanco); border: none;
  border-radius: 6px; font-weight: 600; font-size: 0.88rem; min-height: 44px;
}
.btn-primary:hover { filter: brightness(0.94); }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-lg { padding: 12px 26px; font-size: 0.92rem; }
.btn-secondary {
  padding: 9px 16px; background: var(--blanco); color: var(--tinta); border: 1px solid var(--borde);
  border-radius: 6px; font-weight: 600; font-size: 0.84rem; min-height: 40px;
}
.btn-secondary:hover { background: var(--superficie); }
.btn-link { background: none; border: none; color: var(--azul); font-size: 0.85rem; font-weight: 600; padding: 10px 0; }

.hint { font-size: 0.75rem; color: var(--texto-sec); margin-top: 10px; line-height: 1.4; }

.result-zone { margin-top: 20px; }
.result-status-box { margin-bottom: 16px; }
.result-details { display: grid; grid-template-columns: auto 1fr; gap: 7px 16px; font-size: 0.86rem; margin: 12px 0; }
.result-details dt { color: var(--texto-sec); }
.result-details dd { margin: 0; font-weight: 600; color: var(--texto); }

.inline-alert { padding: 11px 14px; border-radius: 6px; font-size: 0.83rem; margin-top: 10px; }
.alert-warn { background: var(--ambar-suave); color: #7A5312; }
.alert-error { background: var(--rojo-suave); color: var(--rojo); }

/* ============ DATA TABLE ============ */
.data-table-wrap { background: var(--blanco); border-radius: 8px; border: 1px solid var(--borde); overflow: hidden; }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.data-table th {
  text-align: left; padding: 12px 16px; background: var(--superficie);
  color: var(--texto-sec); font-weight: 600; font-size: 0.75rem; border-bottom: 1px solid var(--borde);
}
.data-table td { padding: 12px 16px; border-bottom: 1px solid var(--superficie); color: var(--texto); }
.data-table tr.clickable { cursor: pointer; }
.data-table tr.clickable:hover td { background: var(--azul-suave); }
.table-empty { padding: 32px; text-align: center; color: var(--texto-sec); font-size: 0.88rem; }

.data-cards { display: none; }
.data-card { border-bottom: 1px solid var(--superficie); padding: 12px 16px; }
.data-card.clickable { cursor: pointer; }
.data-card-row { display: flex; justify-content: space-between; padding: 3px 0; font-size: 0.84rem; }
.data-card-key { color: var(--texto-sec); }
.data-card-val { font-weight: 600; text-align: right; }

.pager { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; font-size: 0.8rem; }
.pager-btn { background: none; border: 1px solid var(--borde); border-radius: 6px; padding: 7px 12px; font-size: 0.8rem; min-height: 36px; }
.pager-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pager-info { color: var(--texto-sec); }

/* ============ DROPZONE (consulta masiva) ============ */
.dropzone {
  background: var(--blanco); border: 2px dashed var(--borde); border-radius: 10px;
  padding: 46px 24px; text-align: center; cursor: pointer; margin-bottom: 18px;
}
.dropzone.dropzone-active { border-color: var(--azul); background: var(--azul-suave); }
.dropzone-icon { font-size: 1.8rem; color: var(--azul); margin-bottom: 8px; }
.dropzone-text { font-weight: 600; color: var(--tinta); font-size: 0.95rem; }
.dropzone-hint { font-size: 0.78rem; color: var(--texto-sec); margin-top: 6px; }
.hidden-file-input { display: none; }

.lote-card { background: var(--blanco); border-radius: 8px; padding: 22px; border: 1px solid var(--borde); max-width: 520px; }
.lote-card h3 { font-size: 0.95rem; color: var(--tinta); margin-bottom: 12px; word-break: break-all; }

/* C06 — encabezado del archivo actualmente seleccionado, con sus acciones
   "Cambiar archivo" / "Quitar archivo" (reutiliza .reporte-actions para los
   botones, sin introducir un patrón visual nuevo). */
.archivo-actual-info {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--superficie);
}
.archivo-actual-nombre { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--tinta); min-width: 0; }
.archivo-actual-nombre-texto { overflow-wrap: anywhere; }
.archivo-actual-tamanio { color: var(--texto-sec); font-weight: 400; font-size: 0.82rem; white-space: nowrap; }

.progress-label { font-size: 0.82rem; color: var(--texto-sec); margin-bottom: 8px; }
.progress-bar { width: 100%; height: 10px; background: var(--superficie); border-radius: 20px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--azul); transition: width 0.15s ease; border-radius: 20px; }

/* ============ REPORTES ============ */
.reportes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.reporte-card { background: var(--blanco); border-radius: 8px; padding: 20px; border: 1px solid var(--borde); }
.reporte-card h3 { font-size: 0.95rem; color: var(--tinta); margin-bottom: 6px; }
.reporte-desc { font-size: 0.82rem; color: var(--texto-sec); margin: 0 0 14px; line-height: 1.4; }
.reporte-actions { display: flex; gap: 8px; }
/* Mejora visual de Reportes (solo presentación; el orden del DOM no cambia:
   "order" solo reubica visualmente el conteo bajo el título). */
.reporte-card { display: flex; flex-direction: column; padding: 18px; min-width: 0; }
.reporte-card h3 { order: 0; }
.reporte-card .reporte-desc { order: 2; margin-bottom: 10px; }
.reporte-card .reporte-conteo { order: 1; font-size: 1.3rem; font-weight: 700; color: var(--tinta); margin: 0 0 8px; line-height: 1.2; }
.reporte-nota { order: 3; font-size: 0.76rem; color: var(--texto-sec); margin: 0 0 10px; line-height: 1.4; padding: 6px 9px; border-radius: 6px; background: var(--superficie); }
.reporte-nota-limite { background: var(--ambar-suave); color: #7A5312; }
.reporte-card .reporte-actions { order: 4; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--superficie); }
.reporte-card .reporte-actions .btn-secondary { flex: 1 1 0; }
.reporte-card .reporte-estado { order: 5; }
.reporte-card .reporte-estado .inline-alert { margin-top: 10px; }
/* No aplica por corte: legible y claramente diferenciada (antes opacity 0.55). */
.reporte-card.no-aplica { background: #F1F4F7; border-style: dashed; border-color: #C5D0DB; }
.reporte-card.no-aplica h3 { color: var(--texto-sec); }
.reporte-card.no-aplica .reporte-conteo {
  align-self: flex-start; font-size: 0.78rem; font-weight: 700; color: var(--texto-sec);
  background: var(--blanco); border: 1px solid #C5D0DB; border-radius: 20px; padding: 3px 10px;
}
.reportes-contexto { flex-direction: column; align-items: flex-start; gap: 3px; }
.reportes-contexto .contexto-sep { display: none; }
.reportes-contexto [data-contexto="base"] { color: var(--tinta); }
.reportes-carga { font-size: 0.8rem; font-weight: 600; color: var(--azul); margin: -6px 0 10px; display: flex; align-items: center; gap: 8px; }
.reportes-carga::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--azul-suave); border-top-color: var(--azul); animation: mlc-giro 0.8s linear infinite;
}
.reportes-grid[aria-busy="true"] { opacity: 0.7; transition: opacity 0.15s ease; }
@keyframes mlc-giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .reportes-carga::before { animation: none; } }

/* ============ DRAWER (detalle DN) ============ */
.drawer-overlay {
  position: fixed; inset: 0; background: rgba(14,34,56,0.35); z-index: 100;
  display: flex; justify-content: flex-end; opacity: 0; transition: opacity 0.2s ease;
}
.drawer-overlay.open { opacity: 1; }
.drawer-panel {
  background: var(--blanco); width: 420px; max-width: 92vw; height: 100%;
  overflow-y: auto; transform: translateX(100%); transition: transform 0.25s ease;
  box-shadow: -8px 0 30px rgba(14,34,56,0.2);
}
.drawer-overlay.open .drawer-panel { transform: translateX(0); }
.drawer-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 22px; border-bottom: 1px solid var(--borde); position: sticky; top: 0; background: var(--blanco);
}
.drawer-header h3 { font-size: 1.02rem; color: var(--tinta); }
.drawer-close { background: none; border: none; font-size: 1.1rem; color: var(--texto-sec); min-height: 36px; min-width: 36px; }
.drawer-body { padding: 20px 22px; }

.detalle-resumen { margin-bottom: 18px; }
.timeline-title { font-size: 0.85rem; color: var(--tinta); margin-bottom: 12px; }
.timeline { position: relative; padding-left: 18px; border-left: 2px solid var(--borde); }
.timeline-item { position: relative; padding-bottom: 18px; }
.timeline-dot { position: absolute; left: -23px; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--azul); }
.timeline-fecha { font-size: 0.75rem; color: var(--texto-sec); margin-bottom: 4px; }
.timeline-estado { display: flex; align-items: center; gap: 10px; }
.timeline-transicion { font-size: 0.75rem; color: var(--texto-sec); font-weight: 600; }

/* ============ RESPONSIVE ============ */
@media (max-width: 880px) {
  .sidebar { transform: translateX(-100%); box-shadow: 8px 0 30px rgba(0,0,0,0.2); }
  body.sidebar-open .sidebar { transform: translateX(0); }
  body.sidebar-open .sidebar-scrim { display: block; position: fixed; inset: 0; background: rgba(14,34,56,0.4); z-index: 30; }

  .content { margin-left: 0; padding: 18px 16px 50px; }

  .topbar {
    display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
    padding-bottom: 14px; border-bottom: 1px solid var(--borde);
  }
  .menu-toggle {
    background: var(--tinta); color: var(--blanco); border: none; border-radius: 6px;
    width: 40px; height: 40px; font-size: 1.1rem;
  }
  .topbar-brand { font-weight: 700; color: var(--tinta); font-size: 0.95rem; }

  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .chart-grid { grid-template-columns: 1fr; }
  .list-grid { grid-template-columns: 1fr; }
  /* .reportes-grid: auto-fill (2 columnas si caben, 1 en móvil). */
  .kpi-bloques { grid-template-columns: 1fr; }
}

.th-checkbox, .td-checkbox { width: 40px; text-align: center; }
.data-table input[type="checkbox"], .data-card input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }
.data-card-check { justify-content: flex-start !important; padding-bottom: 8px; border-bottom: 1px solid var(--superficie); margin-bottom: 4px; }

.selection-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--azul-suave); border-radius: 8px; padding: 12px 16px; margin-bottom: 14px;
}
.selection-count { font-weight: 600; color: var(--tinta); font-size: 0.85rem; }
.selection-bar .btn-primary, .selection-bar .btn-danger, .selection-bar .btn-secondary { min-height: 38px; padding: 8px 14px; font-size: 0.82rem; }

.btn-danger {
  padding: 9px 16px; background: var(--rojo); color: var(--blanco); border: none;
  border-radius: 6px; font-weight: 600; font-size: 0.84rem; min-height: 40px;
}
.btn-danger:hover { filter: brightness(0.92); }
.btn-danger:disabled, .btn-primary:disabled, .btn-secondary:disabled { opacity: 0.5; cursor: not-allowed; }

/* ============ CONFIRM MODAL ============ */
.confirm-overlay {
  position: fixed; inset: 0; background: rgba(14,34,56,0.45); z-index: 200;
  display: flex; align-items: center; justify-content: center; opacity: 0;
  transition: opacity 0.15s ease; padding: 20px;
}
.confirm-overlay.open { opacity: 1; }
.confirm-panel {
  background: var(--blanco); border-radius: 10px; padding: 24px; width: 100%; max-width: 420px;
  box-shadow: 0 20px 50px rgba(14,34,56,0.3); transform: scale(0.96); transition: transform 0.15s ease;
}
.confirm-overlay.open .confirm-panel { transform: scale(1); }
.confirm-title { font-size: 1.02rem; color: var(--tinta); margin-bottom: 10px; }
.confirm-message { font-size: 0.88rem; color: var(--texto-sec); line-height: 1.5; margin-bottom: 20px; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 10px; }

@media (max-width: 640px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .query-row { flex-direction: column; }
  .data-table { display: none; }
  .data-cards { display: block; }
  .activity-item { grid-template-columns: 1fr; gap: 4px; text-align: left; }
  .activity-fecha { text-align: left; }
  .drawer-panel { width: 100%; max-width: 100vw; }
  .selection-bar { flex-direction: column; align-items: stretch; }
  .barra-filtros { flex-direction: column; align-items: stretch; padding: 12px; }
  .barra-filtros .rango-campo { flex: 1 1 100%; }
  .barra-filtros .rango-campo .rango-fecha { flex: 1 1 auto; min-width: 0; }
  .barra-filtros .filtro-campo { flex: 1 1 100%; }
  .barra-filtros .filtro-campo .filter-select, .barra-filtros .filter-row > .filter-select { flex: 1 1 auto; width: 100%; }
  .kpi-bloque-lineas .kpi-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .kpi-bloque-periodo .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .kpi-bloque .kpi-card { padding: 10px 12px; }
  .kpi-bloque .kpi-value { font-size: 1.3rem; }
  .corte-dato[data-corte="lineas"] { padding-left: 0; border-left: 0; }
  .corte-grid { gap: 8px 16px; }
}