/* ===========================================================================
   Planes de Modalidad 40 IMSS
   Paleta y specs de marcas tomadas del sistema de dataviz del análisis.
   Claro y oscuro son dos juegos elegidos, no una inversión automática.
   =========================================================================== */

:root{
  color-scheme: light;
  --surface-0:#f5f5f3; --surface-1:#fcfcfb; --surface-2:#efefec;
  --line:#dedcd6; --line-soft:#eceae4;
  --text-primary:#0b0b0b; --text-secondary:#52514e; --text-muted:#7a7873;
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100; --s8:#e34948;
  --good:#1baf7a; --warn:#eda100; --bad:#e34948;
  --accent-soft:#e8f0fd;
  --radio:12px;
}
@media (prefers-color-scheme: dark){
  :root:where(:not([data-theme="light"])){
    color-scheme: dark;
    --surface-0:#131312; --surface-1:#1a1a19; --surface-2:#232322;
    --line:#33322f; --line-soft:#282826;
    --text-primary:#ffffff; --text-secondary:#c3c2b7; --text-muted:#8d8c84;
    --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500; --s8:#e66767;
    --good:#199e70; --warn:#c98500; --bad:#e66767;
    --accent-soft:#152233;
  }
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--surface-0); color:var(--text-primary);
  font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-text-size-adjust:100%;
}
a{color:var(--s1);text-decoration:none}
a:hover{text-decoration:underline}

/* ─── Estructura ────────────────────────────────────────────────────────── */
.topbar{
  background:var(--surface-1);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50;
}
.topbar .in{max-width:1240px;margin:0 auto;padding:12px 18px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.marca{font-weight:800;letter-spacing:-.02em;font-size:16px;color:var(--text-primary)}
.marca span{color:var(--s1)}
.nav{display:flex;gap:16px;flex:1;flex-wrap:wrap}
.nav a{color:var(--text-secondary);font-size:14px;font-weight:500}
.nav a.on{color:var(--s1);font-weight:700}
.wrap{max-width:1240px;margin:0 auto;padding:22px 18px 70px}

h1{font-size:clamp(21px,3.4vw,29px);letter-spacing:-.02em;margin:.2em 0 .1em}
h2{font-size:clamp(17px,2.4vw,21px);letter-spacing:-.015em;margin:32px 0 8px;padding-top:14px;border-top:1px solid var(--line)}
h3{font-size:15.5px;margin:20px 0 6px}
.sub{color:var(--text-secondary);font-size:14px;margin:.2em 0 0}
p{color:var(--text-secondary)}

/* ─── Piezas ────────────────────────────────────────────────────────────── */
.card{background:var(--surface-1);border:1px solid var(--line);border-radius:var(--radio);padding:16px 18px;margin:14px 0}
.grid{display:grid;gap:12px}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}

.tile{background:var(--surface-1);border:1px solid var(--line);border-radius:var(--radio);padding:13px 15px}
.tile .lbl{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted);font-weight:700}
.tile .val{font-size:clamp(19px,3vw,25px);font-weight:700;letter-spacing:-.02em;margin-top:3px;font-variant-numeric:tabular-nums}
.tile .note{font-size:12px;color:var(--text-secondary);margin-top:2px}

.btn{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--s1);color:#fff;border:none;border-radius:9px;
  padding:9px 15px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;
}
.btn:hover{filter:brightness(1.08);text-decoration:none}
.btn.sec{background:var(--surface-2);color:var(--text-primary);border:1px solid var(--line)}
.btn.peligro{background:var(--bad)}
.btn.chico{padding:6px 11px;font-size:13px}
.acciones{display:flex;gap:9px;flex-wrap:wrap;margin:14px 0}

label.campo{display:flex;flex-direction:column;gap:5px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);font-weight:700}
input,select,textarea{
  font:inherit;font-size:14.5px;padding:9px 11px;border-radius:9px;
  border:1px solid var(--line);background:var(--surface-2);color:var(--text-primary);width:100%;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--s1);outline-offset:1px}
.ayuda{font-size:12px;color:var(--text-secondary);text-transform:none;letter-spacing:0;font-weight:400}
.conv{font-size:13px;font-weight:700;color:var(--s1);text-transform:none;letter-spacing:0;font-variant-numeric:tabular-nums}
.conv.err{color:var(--bad)}

/* ─── Tablas ────────────────────────────────────────────────────────────── */
.tabwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--radio);background:var(--surface-1);margin:12px 0}
table{border-collapse:collapse;width:100%;font-size:13px;min-width:520px}
th,td{padding:8px 10px;text-align:right;border-bottom:1px solid var(--line-soft);white-space:nowrap}
th{background:var(--surface-2);color:var(--text-secondary);font-size:11px;text-transform:uppercase;letter-spacing:.05em;font-weight:700;position:sticky;top:0}
td:first-child,th:first-child{text-align:left}
tbody tr:hover td{background:var(--accent-soft)}
tbody tr:last-child td{border-bottom:none}
td.num{font-variant-numeric:tabular-nums}
tr.hl td{background:var(--accent-soft);font-weight:600}
tr.clic{cursor:pointer}
tr.fuera td{opacity:.55}

.tag{display:inline-block;font-size:10.5px;font-weight:700;border-radius:5px;padding:2px 7px;letter-spacing:.03em}
.tag.ok{background:color-mix(in srgb,var(--good) 16%,transparent);color:var(--good)}
.tag.wa{background:color-mix(in srgb,var(--warn) 20%,transparent);color:var(--warn)}
.tag.no{background:color-mix(in srgb,var(--bad) 16%,transparent);color:var(--bad)}
.tag.n{background:var(--surface-2);color:var(--text-secondary)}

/* ─── Avisos ────────────────────────────────────────────────────────────── */
.aviso{border-left:4px solid var(--s1);background:var(--surface-1);border-radius:0 var(--radio) var(--radio) 0;padding:12px 16px;margin:12px 0}
.aviso.alerta{border-left-color:var(--warn)}
.aviso.critico{border-left-color:var(--bad)}
.aviso .t{font-weight:700;color:var(--text-primary);font-size:13.5px}
.aviso p{margin:2px 0 0;font-size:13px}

/* ─── Detalle mes a mes ─────────────────────────────────────────────────── */
.drill{background:var(--surface-2)}
.drill td{font-size:12.5px}
.filadrill{display:none}
.filadrill.abierta{display:table-row}

.simrow{display:flex;justify-content:space-between;gap:14px;padding:7px 0;border-bottom:1px solid var(--line-soft);font-size:14px}
.simrow:last-child{border-bottom:none}
.simrow .k{color:var(--text-secondary)}
.simrow .v{font-variant-numeric:tabular-nums;font-weight:600;text-align:right}

/* ─── Gráficas ──────────────────────────────────────────────────────────── */
svg{display:block;width:100%;height:auto;overflow:visible}
.leyenda{display:flex;flex-wrap:wrap;gap:14px;margin:4px 0 8px;font-size:12.5px;color:var(--text-secondary)}
.leyenda span{display:flex;align-items:center;gap:6px}
.sw{width:11px;height:11px;border-radius:3px;flex:none}
.tip{position:fixed;pointer-events:none;background:var(--surface-1);border:1px solid var(--line);border-radius:9px;padding:8px 11px;font-size:12.5px;box-shadow:0 6px 22px rgba(0,0,0,.16);opacity:0;transition:opacity .1s;z-index:60;color:var(--text-primary);max-width:250px}
.tip b{display:block;margin-bottom:3px;font-size:12px;color:var(--text-secondary)}
.tip .r{display:flex;justify-content:space-between;gap:14px;font-variant-numeric:tabular-nums}

/* ─── Acceso ────────────────────────────────────────────────────────────── */
.acceso{max-width:400px;margin:8vh auto;padding:0 18px}
.acceso .card{padding:26px 24px}
.acceso h1{font-size:22px;margin-bottom:4px}
.acceso .campos{display:flex;flex-direction:column;gap:14px;margin-top:18px}
.err{background:color-mix(in srgb,var(--bad) 12%,transparent);color:var(--bad);padding:9px 12px;border-radius:9px;font-size:13.5px;margin-top:12px}

.vacio{text-align:center;padding:48px 20px;color:var(--text-secondary)}
.vacio h2{border:none;margin-top:0}