/* styles.css — layout compartido: grid raíz, nav, tarjetas, tablas, chips.
   Reproduce fielmente la jerarquía visual del .dc.html original
   (Score Board Click Seguros), usando clases en vez de repetir el mismo
   inline style cientos de veces — los VALORES (color/tamaño/espaciado) son
   los mismos. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  background: var(--lit-grid-bg);
  font-family: var(--font-sans);
  color: var(--neutral-800);
  overflow: hidden; /* el scroll vive en .aside y en #main por separado, no en body */
}
a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--orange-500); text-decoration: underline; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--neutral-150); border-radius: 8px; }
button { font-family: inherit; }
input, select, textarea { font-family: inherit; }

/* ===== Grid raíz ===== */
.app-grid {
  display: grid;
  grid-template-columns: 232px 1fr;
  height: 100vh;
  transition: grid-template-columns var(--duration-base) var(--ease-standard);
}
.app-grid.menu-cerrado { grid-template-columns: 68px 1fr; }

/* ===== Aside / nav =====
   Alto fijo a la ventana + su propio scroll — independiente del scroll de
   #main. Antes usaba position:sticky sobre un body que scrolleaba entero;
   si el menú (o el contenido) creciera más que la ventana, la parte de
   abajo del menú quedaba inalcanzable, sin scrollbar propia. */
.aside {
  background: var(--blue-900);
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 16px 10px 20px;
  height: 100vh;
  overflow-y: auto;
  scrollbar-width: none;      /* Firefox: sigue siendo scrolleable, sin barra visible */
}
.aside::-webkit-scrollbar { display: none; } /* Chrome/Edge/Safari */
.aside-top { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:2px 6px; }
.aside-logo { width: 120px; height: auto; display: block; }
.menu-btn {
  background: rgba(255,255,255,.10); border:0; border-radius:8px; width:30px; height:30px;
  flex-shrink:0; color:#AFC4E4; font-size:15px; font-weight:700; cursor:pointer; line-height:1;
}
.perfil-wrap { display:flex; flex-direction:column; gap:6px; padding:0 4px; }
.perfil-label { font-size:9.5px; letter-spacing:1.1px; font-weight:700; color:#7C97C4; }
.perfil-select {
  width:100%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  border-radius:9px; padding:9px 10px; font-size:12.5px; font-weight:600; color:#fff;
  cursor:pointer; outline:none; appearance:none;
}
.perfil-select option { color:#05172E; }

.nav { display:flex; flex-direction:column; gap:4px; }
.nav-item {
  display:flex; align-items:center; gap:11px; width:100%; background:transparent; border:0;
  border-radius:10px; padding:10px 11px; color:#AFC4E4; cursor:pointer; text-align:left;
  transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.nav-item:hover { background: rgba(255,255,255,.06); color:#fff; }
.nav-item.activo { background: rgba(255,255,255,.14); color:#fff; }
.nav-item .ico { display:flex; flex-shrink:0; }
.nav-txt { display:flex; flex-direction:column; gap:1px; min-width:0; text-align:left; }
.nav-txt .tit { font-size:13.5px; font-weight:600; white-space:nowrap; }
.nav-txt .sub { font-size:10px; opacity:.72; white-space:nowrap; }

.aside-foot {
  margin-top:auto; flex-shrink:0; border-top:1px solid rgba(255,255,255,.10); padding-top:24px;
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.aside-foot-txt { display:flex; flex-direction:column; align-items:center; gap:3px; font-size:11.5px; font-weight:700; letter-spacing:.6px; color:#fff; }

/* ===== Main / pantalla =====
   Su propio scroll, independiente de .aside (ver arriba). */
main { display:flex; flex-direction:column; min-width:0; height:100vh; overflow-y:auto; }
.pantalla { display:flex; flex-direction:column; min-height:100%; }

/* Modo embebido (?embed=inicio, my4DX): sin alto fijo ni scroll propio — el
   iframe contenedor toma el alto del contenido. */
html.embed, html.embed body { height:auto; overflow:visible; }
html.embed main { height:auto; overflow:visible; }
.pantalla-pad { padding:26px 30px 40px; display:flex; flex-direction:column; gap:16px; }
.pantalla-pad-tight { padding:24px 28px 26px; display:flex; flex-direction:column; gap:14px; flex:1; }

.page-header { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.page-header.top { align-items:center; }
.page-title { margin:0; font-size:26px; font-weight:700; color:var(--blue-900); letter-spacing:-0.4px; }
.page-title.xl { font-size:31px; font-weight:800; letter-spacing:-0.7px; line-height:1.05; }
.page-sub { font-size:12.5px; color:var(--neutral-500); }
.header-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

.select-pill, select.select-pill {
  background:#fff; border:1px solid #DDE2E9; border-radius:11px; padding:11px 16px;
  font-size:13.5px; font-weight:700; color:var(--blue-900); cursor:pointer; outline:none;
}
.btn {
  border:0; border-radius:11px; padding:12px 18px; font-size:13.5px; font-weight:700;
  cursor:pointer; font-family:inherit; display:inline-flex; align-items:center; gap:8px;
}
.btn.sm { border-radius:10px; padding:9px 14px; font-size:12.5px; }
.btn-dark { background:var(--blue-900); color:#fff; }
.btn-outline { background:#fff; border:1px solid #DDE2E9; color:var(--blue-900); }
.btn-orange { background:var(--orange-500); color:#fff; border-radius:999px; }
.btn-orange:hover { background:var(--orange-600); }
.btn-text { background:transparent; border:0; padding:0; color:var(--blue-700); font-weight:700; font-size:12.5px; cursor:pointer; }
.btn-link-header { background:transparent; border:0; color:#9FC0EE; font-size:11px; cursor:pointer; padding:0; }
.btn-agregar-sem { background:transparent; border:1px dashed var(--blue-400); color:var(--blue-600); border-radius:8px; padding:6px 14px; font-size:12px; font-weight:600; cursor:pointer; font-family:inherit; }
.btn-agregar-sem:hover { background:var(--blue-050); border-style:solid; }

footer.mantra {
  background: var(--blue-900); padding:15px 28px; display:flex; align-items:center;
  justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:auto;
}
footer.mantra .frase { font-size:12.5px; color:#C9DAF4; font-style:italic; }
footer.mantra .autor { font-size:12px; color:#8FB4EA; }

/* ===== Tarjetas ===== */
.card {
  background:#fff; border:1px solid var(--lit-borde-sutil); border-radius:16px;
  box-shadow: var(--shadow-sm); padding:20px 22px; display:flex; flex-direction:column; gap:14px;
}
.card-title { font-size:13.5px; font-weight:800; color:var(--blue-900); letter-spacing:.4px; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.stat-tile {
  background:#fff; border:1px solid var(--lit-borde-sutil); border-radius:16px;
  box-shadow: var(--shadow-sm); padding:18px 20px; display:flex; flex-direction:column; gap:4px;
}
.stat-label { font-size:10.5px; letter-spacing:1.1px; font-weight:800; color:var(--neutral-500); }
.stat-value { font-size:26px; font-weight:800; color:var(--blue-900); line-height:1.15; }
.stat-foot { font-size:11px; color:var(--neutral-400); }

/* ===== Tablas de captura (header azul-900 + grid) ===== */
.tbl {
  background:#fff; border:1px solid var(--lit-borde-sutil); border-radius:12px;
  overflow:hidden; box-shadow: var(--shadow-sm);
}
.tbl-head {
  background:var(--blue-900); padding:11px 18px; display:flex; align-items:center;
  justify-content:space-between; gap:12px;
}
.tbl-head .tit { font-size:12.5px; font-weight:700; color:#fff; letter-spacing:.7px; }
.tbl-head .hint { font-size:11px; color:#9FC0EE; }
.tbl-body { padding:16px 18px; display:grid; gap:8px; align-items:center; }
.th { font-size:9.5px; letter-spacing:.5px; text-transform:uppercase; color:var(--neutral-500); font-weight:700; text-align:center; }
.th.left { text-align:left; }
/* Celdas sueltas del grid (así las usan cap/leads/hist): el estilo va en la celda
   misma. Antes eran `.row-total > span` / `.row-sep > *` y no aplicaban a nada.
   Valores del TOTAL del original: 11.5px/700, borde #E6E9EF, padding 11px. */
.row-total { border-top:1px solid #E6E9EF; padding-top:11px; font-size:11.5px; font-weight:700; color:var(--blue-900); text-align:center; }
.row-total.left { text-align:left; }
.row-sep { border-top:1px solid #F1F3F7; padding-top:11px; }

/* Celdas */
.cell-edit, input.cell-edit, select.cell-edit {
  width:100%; box-sizing:border-box; background:var(--lit-input-bg); border:1px solid var(--lit-input-border);
  border-radius:7px; padding:8px 6px; text-align:center; font-size:11.5px; font-weight:700;
  color:var(--blue-900); font-family:inherit; outline:none;
}
.cell-edit.left, input.cell-edit.left { text-align:left; font-weight:500; }
.cell-edit.big { font-size:12.5px; padding:8px 6px; }
.cell-conf, input.cell-conf {
  width:100%; box-sizing:border-box; background:var(--lit-conf-bg); border:1px solid var(--lit-conf-border);
  border-radius:8px; padding:9px 6px; text-align:center; font-size:12.5px; font-weight:700;
  color:var(--blue-900); font-family:inherit; outline:none;
}
.cell-calc {
  background:var(--lit-fondo-gris); border:1px solid var(--lit-borde-sutil); border-radius:7px;
  padding:8px 6px; text-align:center; font-size:11px; font-weight:600; color:var(--neutral-600);
}
.cell-calc.big { font-size:11.5px; }
select.cell-edit { cursor:pointer; }

/* ===== Chips / badges ===== */
.chip { display:inline-block; padding:5px 11px; border-radius:999px; font-size:10.5px; font-weight:700; }
.badge-estado { font-size:10.5px; font-weight:700; padding:5px 11px; border-radius:999px; background:#F1F3F7; }

/* ===== Estados vacíos ===== */
.empty-box {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  padding:26px 16px; border:1px dashed #D8DDE5; border-radius:12px; background:#FAFBFC;
}
.empty-box.lg { padding:34px 16px; }
.empty-title { font-size:13.5px; font-weight:700; color:var(--lit-texto-secundario); }
.empty-sub { font-size:11.5px; color:var(--neutral-400); }

/* ===== Barras de progreso ===== */
.bar-track { border-radius:999px; background:var(--lit-pista-vacia); overflow:hidden; }
.bar-fill { height:100%; transition: width var(--duration-slow) var(--ease-standard); }

/* ===== Pastillas de mes/semana (Captura, Leads) ===== */
.pastillas { display:grid; grid-template-columns:repeat(12,1fr); gap:7px; }
.pastilla {
  display:flex; flex-direction:column; align-items:center; gap:3px; border:1px solid var(--lit-borde-sutil);
  border-radius:9px; padding:8px 4px; background:#fff; cursor:pointer; font-size:11px; font-weight:700;
  color:var(--neutral-600);
}
.pastilla.activa { background:var(--blue-900); color:#fff; border-color:var(--blue-900); }
.pastilla.cerrada { background:#F4F6F9; color:var(--neutral-400); }
.pastilla .marca { font-size:9px; font-weight:600; }

/* ===== Aviso banner ===== */
.aviso-banner {
  display:flex; align-items:center; justify-content:space-between; gap:12px; border-radius:10px;
  padding:11px 16px; flex-wrap:wrap;
}
.aviso-info { background:var(--blue-050); border:1px solid var(--blue-100); }
.aviso-warn { display:flex; align-items:center; gap:9px; background:#FDF8E7; border:1px solid #F5DFA0; border-radius:9px; padding:9px 13px; font-size:11.5px; color:#7A6109; }

/* ===== Utilidades ===== */
.hidden { display:none !important; }
.mono { font-family: var(--font-mono); }
.legend-dot { width:9px; height:9px; border-radius:2px; display:inline-block; }
.legend-dot.round { border-radius:50%; }

/* Responsive: nunca scroll horizontal en el body; tablas anchas hacen scroll propio */
.tbl-scroll { overflow-x:auto; }
.btn-link-header:disabled { color:#6F8CB5; cursor:default; opacity:.8; }