/* ==========================================================
   AJUSTE 10B · tema de las maquetas aprobadas (navy)
   Fondo #071426 · tarjetas #0E2140 · bordes #1D3557 · Montserrat.
   El tema oscuro navy es el de siempre; «Tema» sigue cambiando a claro.
   ========================================================== */
:root[data-theme="dark"], :root:not([data-theme="light"]) {
  --bg:#071426; --surface:#0E2140; --surface-2:#12284B; --surface-3:#183259;
  --line:#1D3557; --line-strong:#2B4A75;
  --text:#F2F5FA; --text-soft:#A9B6CC; --text-faint:#7F90AC;
  --ok:#3CCB7F; --warn:#E0B03C; --alert:#F07A1A; --crit:#FF6F73;
  --ok-bg:#0B3A22; --warn-bg:#3A2E0B; --alert-bg:#3A230B; --crit-bg:#3A0F14; --blue-bg:#0B2A4A;
  color-scheme: dark;
}
:root:not([data-theme="light"]) .side { background:#0A1A33; border-right:1px solid #1D3557; }

/* barra de secciones de un módulo que junta varias vistas */
.secciones { display:flex; gap:4px; flex-wrap:wrap; padding:0 24px; border-bottom:1px solid var(--line); background:var(--bg); }
.secciones button { padding:10px 14px; border:0; border-bottom:3px solid transparent; background:transparent; color:var(--text-soft); font-weight:700; font-size:13px; }
.secciones button.on { border-bottom-color:var(--blue); color:var(--text); }
.secciones button:hover { color:var(--text); }
@media (max-width:760px){ .secciones { padding:0 12px; overflow-x:auto; flex-wrap:nowrap; } .secciones button { white-space:nowrap; } }

/* pestañas tipo maqueta (subrayado azul) */
.tabs-10b { display:flex; gap:4px; border-bottom:1px solid var(--line); flex-wrap:wrap; margin:6px 0 14px; }
.tabs-10b button { padding:10px 14px; border:0; border-bottom:3px solid transparent; background:transparent; color:var(--text-soft); font-weight:700; }
.tabs-10b button.on { border-bottom-color:var(--blue); color:var(--text); }

/* ---------- Bandeja (maqueta aprobada 16–21 oct) ---------- */
.bj-rejilla { display:flex; flex-wrap:wrap; gap:16px; align-items:flex-start; }
.bj-lista { flex:3 1 640px; min-width:0; display:flex; flex-direction:column; gap:10px; }
.bj-lado { flex:1 1 300px; min-width:0; display:flex; flex-direction:column; gap:16px; }
.bj-msg { background:var(--surface); border:1px solid var(--bj, #0077C8); border-left:8px solid var(--bj, #0077C8); border-radius:12px; padding:12px 14px; display:flex; flex-direction:column; gap:8px; }
.bj-msg.hecho { opacity:.78; }
.bj-top { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-start; }
.bj-cont { min-width:92px; text-align:center; background:var(--bg); border-radius:10px; padding:6px 8px; }
.bj-cont b { display:block; font-size:22px; font-weight:800; line-height:1; }
.bj-cont span { font-size:11px; font-weight:700; }
.bj-cuerpo { flex:1 1 340px; min-width:0; }
.bj-tipo { font-size:10px; font-weight:800; border-radius:999px; padding:2px 8px; color:#fff; text-transform:uppercase; letter-spacing:.02em; }
.bj-hace { font-size:11px; color:var(--text-soft); }
.bj-asunto { font-size:15px; font-weight:800; margin-top:4px; }
.bj-asunto.rojo { color:var(--crit); }
.bj-det { font-size:13px; color:var(--text-soft); margin-top:2px; white-space:pre-line; max-height:4.6em; overflow:hidden; }
.bj-resp { font-size:12px; color:var(--text-soft); margin-top:4px; }
.bj-resp b { color:var(--text); }
.bj-acc { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.bj-acc .btn { min-height:40px; border-radius:8px; }
.bj-acc .btn.mal { background:transparent; border-color:var(--crit); color:var(--crit); }
.bj-caja { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:16px; display:flex; flex-direction:column; gap:8px; font-size:13px; line-height:1.5; }
.bj-caja h2 { font-size:14px; font-weight:800; letter-spacing:1px; text-transform:uppercase; }
.bj-fila { display:flex; justify-content:space-between; gap:10px; border-top:1px solid var(--line); padding:6px 0; font-size:13px; }
.bj-fila span { color:var(--text-soft); }
.bj-fila b { text-align:right; }
.bj-vacio { padding:18px; border-radius:10px; background:var(--ok-bg); color:var(--ok); font-weight:600; }

/* caja roja de texto legal o para cliente sin autorizar (decidido 23 oct) */
.texto-por-autorizar { border:2px solid #E30613; background:rgba(227,6,19,.08); color:#FF6F73; border-radius:10px; padding:10px 12px; font-weight:800; letter-spacing:.04em; }

/* ---------- Tablero de control (maqueta aprobada 18–21 oct) ---------- */
.tb { display:flex; flex-direction:column; gap:16px; }
.tb-cab { display:flex; flex-wrap:wrap; align-items:baseline; gap:16px; }
.tb-reloj { font-size:40px; font-weight:600; line-height:1; font-variant-numeric:tabular-nums; }
.tb-franja { display:flex; height:4px; border-radius:2px; overflow:hidden; margin-top:-6px; }
.tb-franja span { flex:1; }
.tb-urg { display:flex; flex-wrap:wrap; align-items:center; gap:12px; background:#3A0A10; border:1px solid #E30613; border-radius:12px; padding:12px 16px; color:#FFE3E1; text-decoration:none; cursor:pointer; }
.tb-urg b { font-size:26px; font-weight:800; color:#FF6F73; }
.tb-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; }
.tb-k { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px 16px; }
.tb-k .t { color:var(--text-soft); font-size:13px; }
.tb-k .v { font-size:34px; font-weight:600; font-variant-numeric:tabular-nums; }
.tb-k .d { color:var(--text-soft); font-size:12px; }
.tb-caja { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:16px; display:flex; flex-direction:column; gap:12px; }
.tb-caja h2 { font-size:14px; font-weight:800; letter-spacing:1px; text-transform:uppercase; }
.tb-tit { display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:8px; }
.tb-tit span { color:var(--text-soft); font-size:12px; }
.tb-barra { display:flex; gap:3px; }
.tb-barra button { min-width:44px; height:56px; border:0; border-radius:8px; font-size:20px; font-weight:600; cursor:pointer; }
.tb-ley { display:flex; flex-wrap:wrap; gap:14px; font-size:12px; color:var(--text-soft); }
.tb-ley i { display:inline-block; width:12px; height:12px; border-radius:3px; vertical-align:-1px; margin-right:6px; }
.tb-chips { display:flex; flex-wrap:wrap; gap:6px; }
.tb-chips span { background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:6px 10px; font-size:13px; }
.tb-graf { position:relative; height:170px; display:flex; align-items:flex-end; gap:3px; border-bottom:1px solid var(--line); }
.tb-graf > div { position:relative; flex:1 1 0; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:2px; }
.tb-graf .prom { position:absolute; left:-1px; right:-1px; height:2px; background:#F2F4F8; }
.tb-marcas { position:relative; height:16px; font-size:11px; color:var(--text-soft); }
.tb-marcas span { position:absolute; transform:translateX(-50%); white-space:nowrap; }
.tb-rejilla { display:grid; gap:10px; }
.tb-riesgo { background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:12px 14px; display:flex; flex-direction:column; gap:8px; }
.tb-riesgo .bar { height:8px; border-radius:4px; background:#16294A; overflow:hidden; }
.tb-riesgo .chip { font-size:12px; border:1px solid #2B4A75; border-radius:999px; padding:3px 9px; color:var(--text-soft); }
.tb-cron { display:flex; gap:10px; align-items:center; background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:10px 12px; }
.tb-cron .n { text-align:center; min-width:46px; font-size:22px; font-weight:600; }
.tb-cron .n small { display:block; font-size:10px; color:var(--text-soft); font-weight:500; }
.tb-cas { border-radius:10px; padding:10px 12px; display:flex; flex-direction:column; gap:2px; min-height:64px; border:1px solid; }
.tb-cas.verde { background:#0B3A22; border-color:#00853B; color:#CFF5DA; }
.tb-cas.ambar { background:#4A3A08; border-color:#C89A0E; color:#FFF2C8; }
.tb-cas.naranja { background:#4D2A0F; border-color:#E8742A; color:#FFE2C8; }
.tb-cas.morado { background:#2E2350; border-color:#B48CFF; color:#EBDDFF; }
.tb-cas.rojo { background:#5A0B12; border-color:#E30613; color:#FFE3E1; }
.tb-al { display:flex; flex-wrap:wrap; align-items:center; gap:12px; background:#12284A; border:1px solid var(--line); border-radius:10px; padding:12px 14px; }
.tb-al.esc { background:#3A0A10; border-color:#A3141F; }
.tb-al .r { font-size:22px; font-weight:600; min-width:76px; font-variant-numeric:tabular-nums; }
.tb-esp { display:flex; align-items:center; gap:10px; }
.tb-esp .b { height:6px; border-radius:3px; background:var(--bg); overflow:hidden; margin-top:4px; }
:root[data-theme="light"] .tb-cas, :root[data-theme="light"] .tb-al.esc, :root[data-theme="light"] .tb-urg { color:#1b1b1b; }

/* ---------- Asistencias (maqueta aprobada 21 oct) ---------- */
.as-dec { display:grid; grid-template-columns:repeat(auto-fit,minmax(380px,1fr)); gap:12px; }
.as-dec > div { background:#2A0D14; border:1px solid var(--b); border-left:8px solid var(--b); border-radius:14px; padding:14px; display:flex; flex-direction:column; gap:10px; }
.as-tramo { display:flex; height:12px; border-radius:6px; overflow:hidden; }
.as-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
.as-kpis > div { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px 14px; display:flex; align-items:center; gap:12px; }
.as-kpis i { width:14px; height:40px; border-radius:4px; display:block; }
.as-kpis b { font-size:26px; font-weight:800; line-height:1; display:block; }
.as-srv { flex:3 1 640px; min-width:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:12px; align-content:start; }
.as-srv > div { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px 14px; display:flex; flex-direction:column; gap:8px; }
.as-pos { min-height:50px; border-radius:8px; border:2px solid; color:var(--text); text-align:left; display:flex; align-items:center; gap:10px; padding:6px 10px; width:100%; }
.as-pos .n { width:64px; flex:0 0 64px; font-size:10px; font-weight:800; }
.as-det { flex:1 1 300px; min-width:0; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:16px; display:flex; flex-direction:column; gap:10px; position:sticky; top:12px; }
.as-fila { display:flex; justify-content:space-between; gap:10px; border-bottom:1px solid var(--line); padding:6px 0; }
.as-fila span:first-child { color:var(--text-soft); }
.as-mat { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:12px; overflow-x:auto; }
.as-mat .g { display:grid; gap:4px; align-items:center; min-width:900px; }
.as-cel { width:34px; height:34px; border-radius:7px; font-size:12px; font-weight:800; padding:0; border:1px solid transparent; }
.as-pill { font-size:9px; font-weight:800; border-radius:999px; padding:1px 5px; color:#fff; }
.as-chip { min-height:34px; padding:0 12px; border-radius:999px; border:1px solid #2B4A75; background:var(--surface); color:var(--text); font-weight:700; font-size:12px; }
.as-chip.on { background:#0077C8; border-color:#0077C8; color:#fff; }
.as-cal { display:grid; grid-template-columns:repeat(auto-fill,minmax(52px,1fr)); gap:4px; }
.as-cal button { border-radius:8px; border:2px solid; padding:6px 0; display:flex; flex-direction:column; align-items:center; gap:2px; }
@media print { .side, .topbar, .secciones, .tabs-10b, .no-print { display:none !important; } .as-mat { overflow:visible; } body { background:#fff; } }
@media print { .print-only { display:block !important; font-weight:700; margin-bottom:8px; } @page { size: letter landscape; margin: 10mm; } }

/* ---------- Rol del día (maqueta aprobada 20 oct) ---------- */
.rd-pos { position:relative; min-width:120px; flex:1 1 120px; min-height:48px; border-radius:8px; border:2px solid; text-align:left; padding:6px 10px; display:flex; flex-direction:column; justify-content:center; }
.rd-pos .n { font-size:10px; font-weight:800; opacity:.85; }
.rd-pos .q { font-size:13px; font-weight:700; }
.rd-pos .bang { position:absolute; top:-8px; right:-8px; width:20px; height:20px; border-radius:10px; background:#E30613; color:#fff; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.rd-fila { display:flex; gap:8px; align-items:center; }
.rd-fila > span { width:48px; flex:0 0 48px; font-size:10px; font-weight:800; color:var(--text-soft); }

/* ---------- Cubrir este turno (maqueta aprobada 21 oct) ---------- */
.cb-cand { display:flex; gap:10px; align-items:center; border:1px solid var(--line); border-left:6px solid var(--c); border-radius:10px; padding:8px 10px; background:var(--bg); cursor:pointer; text-align:left; width:100%; color:var(--text); }
.cb-cand.sel { outline:2px solid #F2F5FA; }
.cb-cand small { display:block; color:var(--text-soft); font-size:11px; }
.cb-pres { display:flex; gap:4px; }
.cb-pres span { width:28px; height:16px; border-radius:4px; }
.cb-lista { display:flex; flex-direction:column; gap:6px; max-height:46vh; overflow:auto; padding-right:4px; }