/* ==========================================================================
   TD-PLANIF · Hoja de estilos
   Marca CGE: azul primario #001689 · tipografía Arial
   ========================================================================== */

:root{
  --cge-azul:#001689;
  --cge-azul-claro:#2A46B8;
  --cge-azul-soft:#E8ECF8;
  --cge-cian:#0090D7;

  --bg:#F4F6FB;
  --surface:#FFFFFF;
  --surface-2:#F0F3FA;
  --ink:#12182B;
  --muted:#5A637A;
  --faint:#8B94A8;
  --line:#DFE4EF;
  --line-2:#C7CFE2;

  --ok:#1F8A4C;
  --warn:#B8791A;
  --crit:#C0392B;
  --ok-bg:rgba(31,138,76,.12);
  --warn-bg:rgba(184,121,26,.14);
  --crit-bg:rgba(192,57,43,.12);

  --plan:#001689;
  --comp:#B8791A;
  --real:#1F8A4C;

  --shadow:0 1px 2px rgba(18,24,43,.06), 0 10px 28px -18px rgba(18,24,43,.35);
  --radius:10px;
  --sidebar:236px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:Arial, Helvetica, "Liberation Sans", sans-serif;
  font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0; font-weight:700; line-height:1.2}
a{color:var(--cge-azul)}
button{font-family:inherit}
.tnum{font-variant-numeric:tabular-nums}
.mono{font-family:Consolas,"Courier New",monospace}

/* ── layout ─────────────────────────────────────────────────────────────── */
.app{display:grid; grid-template-columns:var(--sidebar) 1fr; min-height:100vh}

.sidebar{
  background:var(--cge-azul); color:#fff; display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.brand{display:flex; align-items:center; gap:10px; padding:16px 16px 14px; border-bottom:1px solid rgba(255,255,255,.14)}
.brand .logo{
  width:38px;height:38px;border-radius:8px;background:#fff;color:var(--cge-azul);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;letter-spacing:-.5px;
  flex:none;
}
.brand .txt strong{display:block;font-size:14px;letter-spacing:.3px}
.brand .txt span{display:block;font-size:10.5px;opacity:.75}

.nav{padding:10px 8px; display:flex; flex-direction:column; gap:2px; flex:1}
.nav .grp{font-size:10px; text-transform:uppercase; letter-spacing:.12em; opacity:.6; padding:12px 10px 5px}
.nav a{
  display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:7px;
  color:#fff; text-decoration:none; font-size:13px; opacity:.86;
}
.nav a:hover{background:rgba(255,255,255,.10); opacity:1}
.nav a.on{background:#fff; color:var(--cge-azul); font-weight:700; opacity:1}
.nav a .ic{width:16px;text-align:center;flex:none}
.sidebar .foot{padding:12px 16px; font-size:10.5px; opacity:.6; border-top:1px solid rgba(255,255,255,.14)}

.main{min-width:0; display:flex; flex-direction:column}
.topbar{
  background:var(--surface); border-bottom:1px solid var(--line);
  padding:11px 22px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  position:sticky; top:0; z-index:20;
}
.topbar h1{font-size:17px}
.topbar .sp{flex:1}
.topbar .pill{
  font-size:12px; background:var(--surface-2); border:1px solid var(--line);
  border-radius:99px; padding:5px 11px; color:var(--muted);
}
.topbar .pill b{color:var(--ink)}
.content{padding:22px; flex:1}
.page-intro{color:var(--muted); max-width:80ch; margin:0 0 16px}

/* ── controles ──────────────────────────────────────────────────────────── */
.btn{
  border:1px solid var(--line-2); background:var(--surface); color:var(--ink);
  padding:8px 14px; border-radius:8px; cursor:pointer; font-size:13px; font-weight:700;
}
.btn:hover{border-color:var(--cge-azul); color:var(--cge-azul)}
.btn.primary{background:var(--cge-azul); border-color:var(--cge-azul); color:#fff}
.btn.primary:hover{background:var(--cge-azul-claro); color:#fff}
.btn.danger{color:var(--crit); border-color:var(--crit)}
.btn.danger:hover{background:var(--crit); color:#fff}
.btn.sm{padding:5px 10px; font-size:12px; font-weight:400}
.btn:disabled{opacity:.5; cursor:not-allowed}

input,select,textarea{
  font-family:inherit; font-size:13px; padding:7px 10px;
  border:1px solid var(--line-2); border-radius:7px; background:var(--surface); color:var(--ink);
  width:100%;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--cge-azul-soft); border-color:var(--cge-azul)}
label{display:block; font-size:11.5px; color:var(--muted); margin-bottom:4px; font-weight:700}
.field{margin-bottom:12px}
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end}
.row > *{flex:1; min-width:150px}
.row.tight > *{min-width:110px}

.filters{
  display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:12px 14px; margin-bottom:16px; box-shadow:var(--shadow);
}
.filters .f{min-width:130px}
.filters .f.wide{min-width:210px}

/* ── tarjetas / KPIs ────────────────────────────────────────────────────── */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow)}
.card .hd{padding:12px 16px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:10px}
.card .hd h3{font-size:14px}
.card .hd .sp{flex:1}
.card .bd{padding:16px}

.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; margin-bottom:16px}
.kpi{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; box-shadow:var(--shadow); border-top:3px solid var(--line-2)}
.kpi.plan{border-top-color:var(--plan)}
.kpi.comp{border-top-color:var(--comp)}
.kpi.real{border-top-color:var(--real)}
.kpi .lab{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); font-weight:700}
.kpi .val{font-size:26px; font-weight:700; margin-top:5px; letter-spacing:-.5px}
.kpi.plan .val{color:var(--plan)} .kpi.comp .val{color:var(--comp)} .kpi.real .val{color:var(--real)}
.kpi .sub{font-size:11.5px; color:var(--muted); margin-top:2px}
.kpi .bar{height:6px; background:var(--surface-2); border-radius:99px; margin-top:9px; overflow:hidden}
.kpi .bar i{display:block; height:100%; border-radius:99px; background:var(--cge-azul)}
.kpi.comp .bar i{background:var(--comp)} .kpi.real .bar i{background:var(--real)}

/* ── tablas ─────────────────────────────────────────────────────────────── */
.tbl-wrap{overflow:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow); max-height:66vh}
table{border-collapse:collapse; width:100%; font-size:13px}
th,td{padding:8px 11px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle}
thead th{
  background:var(--surface-2); color:var(--muted); font-size:11px; text-transform:uppercase;
  letter-spacing:.05em; position:sticky; top:0; z-index:2; font-weight:700;
}
tbody tr:hover{background:var(--surface-2)}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}
tbody tr:last-child td{border-bottom:none}
tr.tot td{background:var(--cge-azul-soft); font-weight:700; border-top:2px solid var(--cge-azul)}
tr.grp td{background:var(--surface-2); font-weight:700; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted)}
td .idt{display:inline-block}

.chip{display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:99px; white-space:nowrap}
.chip.ok{background:var(--ok-bg); color:var(--ok)}
.chip.warn{background:var(--warn-bg); color:var(--warn)}
.chip.crit{background:var(--crit-bg); color:var(--crit)}
.chip.neu{background:var(--surface-2); color:var(--muted); border:1px solid var(--line)}
.chip.plan{background:var(--cge-azul-soft); color:var(--cge-azul)}

.mini{height:6px; background:var(--surface-2); border-radius:99px; overflow:hidden; min-width:60px}
.mini i{display:block;height:100%;border-radius:99px;background:var(--cge-azul)}
.mini i.ok{background:var(--ok)} .mini i.warn{background:var(--warn)} .mini i.crit{background:var(--crit)}

/* ── mensajes ───────────────────────────────────────────────────────────── */
.msg{padding:11px 14px; border-radius:8px; font-size:13px; margin-bottom:12px; border:1px solid transparent}
.msg.ok{background:var(--ok-bg); color:var(--ok); border-color:rgba(31,138,76,.3)}
.msg.warn{background:var(--warn-bg); color:var(--warn); border-color:rgba(184,121,26,.3)}
.msg.crit{background:var(--crit-bg); color:var(--crit); border-color:rgba(192,57,43,.3)}
.msg.info{background:var(--cge-azul-soft); color:var(--cge-azul); border-color:rgba(0,22,137,.2)}
.msg b{font-weight:700}

.empty{padding:40px 20px; text-align:center; color:var(--faint)}

/* toast */
.toasts{position:fixed; right:18px; bottom:18px; display:flex; flex-direction:column; gap:8px; z-index:100}
.toast{
  background:var(--ink); color:#fff; padding:11px 15px; border-radius:8px; font-size:13px;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.5); max-width:380px; animation:tin .25s ease;
}
.toast.ok{background:var(--ok)} .toast.crit{background:var(--crit)} .toast.warn{background:var(--warn)}
@keyframes tin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* modal */
.modal-bg{position:fixed; inset:0; background:rgba(18,24,43,.45); display:flex; align-items:center; justify-content:center; z-index:90; padding:20px}
.modal{background:var(--surface); border-radius:12px; box-shadow:0 30px 70px -20px rgba(0,0,0,.5); width:min(620px,100%); max-height:88vh; display:flex; flex-direction:column}
.modal .hd{padding:14px 18px; border-bottom:1px solid var(--line); display:flex; align-items:center}
.modal .hd h3{font-size:15px; flex:1}
.modal .bd{padding:18px; overflow:auto}
.modal .ft{padding:12px 18px; border-top:1px solid var(--line); display:flex; gap:10px; justify-content:flex-end}
.x{background:none;border:0;font-size:20px;line-height:1;cursor:pointer;color:var(--muted);padding:0 4px}

/* tabs */
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:16px; flex-wrap:wrap}
.tabs button{
  background:none; border:0; border-bottom:2px solid transparent; padding:9px 13px;
  cursor:pointer; font-size:13px; color:var(--muted); font-weight:700;
}
.tabs button.on{color:var(--cge-azul); border-bottom-color:var(--cge-azul)}

/* param card */
.params{display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:12px}
.param{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; box-shadow:var(--shadow)}
.param .k{font-size:11px; color:var(--faint); letter-spacing:.04em}
.param h4{font-size:13.5px; margin:3px 0 5px}
.param p{font-size:12px; color:var(--muted); margin:0 0 9px}
.param .nota{font-size:11.5px; color:var(--warn); margin:6px 0 0}

.grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}

.tree{font-size:13px}
.tree .nd{display:flex; align-items:center; gap:8px; padding:5px 8px; border-radius:6px; cursor:pointer}
.tree .nd:hover{background:var(--surface-2)}
.tree .nd.on{background:var(--cge-azul-soft); color:var(--cge-azul); font-weight:700}
.tree .nd .tw{width:12px; color:var(--faint); font-size:10px}

/* ── ingreso ────────────────────────────────────────────────────────────── */
.login-fondo{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
  background:linear-gradient(150deg, var(--cge-azul) 0%, #001068 45%, #000A45 100%);
}
.login-caja{
  width:min(400px,100%); background:var(--surface); border-radius:14px;
  box-shadow:0 30px 80px -24px rgba(0,0,0,.6); padding:26px 28px 22px;
}
.login-marca{display:flex; align-items:center; gap:12px; margin-bottom:22px}
.login-marca .logo{
  width:46px;height:46px;border-radius:10px;background:var(--cge-azul);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;
  letter-spacing:-.5px;flex:none;
}
.login-marca strong{display:block;font-size:17px;letter-spacing:.3px}
.login-marca span{display:block;font-size:11.5px;color:var(--muted)}
.login-form .field{margin-bottom:14px}
.login-form input{padding:9px 11px}
.login-form .btn{margin-top:6px; padding:10px 14px}
.login-pie{font-size:11.5px; color:var(--faint); text-align:center; margin:18px 0 0; line-height:1.5}

/* ── menú de la sesión (topbar) ─────────────────────────────────────────── */
.usuario-menu{position:relative}
.usuario-btn{
  display:flex; align-items:center; gap:8px; background:none; border:1px solid var(--line);
  border-radius:99px; padding:4px 10px 4px 4px; cursor:pointer; color:var(--ink); font-size:13px;
}
.usuario-btn:hover{border-color:var(--cge-azul)}
.usuario-btn .av{
  width:28px;height:28px;border-radius:50%;background:var(--cge-azul);color:#fff;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;
}
.usuario-btn .nm{font-weight:700; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.usuario-btn .cv{color:var(--faint); font-size:10px}

.menu-desplegable{
  position:absolute; right:0; top:calc(100% + 8px); z-index:40; width:250px;
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  box-shadow:0 16px 40px -12px rgba(18,24,43,.4); display:flex; flex-direction:column; padding:6px;
}
.menu-desplegable[hidden]{display:none}
.menu-desplegable .cab{
  display:flex; flex-direction:column; gap:1px; padding:10px 10px 12px;
  border-bottom:1px solid var(--line); margin-bottom:6px;
}
.menu-desplegable .cab strong{font-size:13.5px}
.menu-desplegable .cab span{font-size:11.5px; color:var(--muted)}
.menu-desplegable > button{
  background:none; border:0; text-align:left; padding:9px 10px; border-radius:7px;
  cursor:pointer; font-size:13px; color:var(--ink);
}
.menu-desplegable > button:hover{background:var(--surface-2)}
.menu-desplegable > button.peligro{color:var(--crit)}
.menu-desplegable > button.peligro:hover{background:var(--crit-bg)}

@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .sidebar{position:static; height:auto}
  .nav{flex-direction:row; flex-wrap:wrap}
  .grid2,.grid3{grid-template-columns:1fr}
}
/* En los reportes las tablas fluyen (sin scroll interno): se leen y se imprimen
   de corrido, en vez de una caja con scroll por cada tabla. */
.reporte-tabla .tbl-wrap{max-height:none; overflow:visible; border:none; box-shadow:none; border-radius:0}

/* Mini-gráfico mensual de reportes (columnas Plan vs Real, sin dependencias) */
.chart-leg{display:flex; gap:16px; font-size:12px; color:var(--muted); margin:0 0 8px}
.chart-leg i{display:inline-block; width:11px; height:11px; border-radius:2px; vertical-align:-1px; margin-right:6px}
.chart-mes{display:flex; align-items:flex-end; gap:6px; height:140px; padding:4px 0 0}
.cm-col{flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; height:100%; min-width:0}
.cm-track{position:relative; width:100%; max-width:30px; flex:1; display:flex; align-items:flex-end; justify-content:center}
.cm-plan{position:absolute; left:0; right:0; bottom:0; background:var(--surface-2); border-radius:4px 4px 0 0}
.cm-real{position:relative; width:100%; background:var(--real); border-radius:4px 4px 0 0; min-height:2px}
.cm-lab{font-size:10.5px; color:var(--faint)}
@media print{ .cm-real{-webkit-print-color-adjust:exact; print-color-adjust:exact} }

/* Encabezado que sólo se ve al imprimir un reporte */
.print-only{display:none}
.print-head .ph-brand{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#001689;font-weight:700}
.print-head .ph-title{font-size:20px;font-weight:800;margin:2px 0}
.print-head .ph-meta{font-size:12px;color:#555}

@media print{
  @page{margin:14mm}
  .sidebar,.topbar,.filters,.btn,.kpi .bar{display:none!important}
  .app{grid-template-columns:1fr}
  .main,.content{display:block!important}
  .content{padding:0!important;overflow:visible!important}
  .print-only{display:block!important}
  .print-head{margin:0 0 12px;padding:0 0 8px;border-bottom:2px solid #001689}
  body{background:#fff!important;color:#000!important}
  .card{box-shadow:none!important;border:1px solid #ccc!important;break-inside:avoid;margin-bottom:10px!important}
  .tbl-wrap{max-height:none!important;overflow:visible!important;border:none!important;box-shadow:none!important}
  .kpis{break-inside:avoid}
  table{font-size:11px!important}
  thead{display:table-header-group}
  tr{break-inside:avoid}
  a{color:#000!important;text-decoration:none!important}
}

/* ── selector de línea de planificación (OPEX / CAPEX) ──────────────────── */
:root{ --opex:#1F8A4C; --capex:#6B3FA0; }
.lineas{display:flex; gap:10px; margin-bottom:14px; flex-wrap:wrap}
.linea-tab{
  flex:1; min-width:230px; text-align:left; font-family:inherit; cursor:pointer;
  background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--line-2);
  border-radius:var(--radius); padding:11px 15px; box-shadow:var(--shadow);
}
.linea-tab:hover{border-color:var(--line-2)}
.linea-tab .t{font-weight:700; font-size:14px; color:var(--muted)}
.linea-tab .n{font-size:11.5px; color:var(--faint); margin-top:2px}
.linea-tab.opex.on{border-color:var(--opex); border-top-color:var(--opex); background:rgba(31,138,76,.06)}
.linea-tab.capex.on{border-color:var(--capex); border-top-color:var(--capex); background:rgba(107,63,160,.06)}
.linea-tab.opex.on .t{color:var(--opex)}
.linea-tab.capex.on .t{color:var(--capex)}
.linea-tab.on .n{color:var(--muted)}
.chip.l-opex{background:rgba(31,138,76,.12); color:var(--opex)}
.chip.l-capex{background:rgba(107,63,160,.12); color:var(--capex)}