/* ExpressComercial — hoja base.
   Paleta acordada: menu verde petroleo, cuerpo blanco, acento teal.
   Los colores viven todos aca arriba; nada de valores sueltos mas abajo. */

:root{
    --ground:#FFFFFF; --surface:#FFFFFF; --surface-2:#F5F8F7;
    --line:#E1E8E5; --line-soft:#EDF1EF;
    --ink:#0C1A17; --ink-2:#43554F; --ink-3:#71847E;
    --rail:#08221E; --rail-2:#11332C; --rail-line:#1C4239;
    --rail-ink:#BFD5CE; --rail-ink-2:#7EA096;
    --accent:#00897A; --accent-ink:#00695E; --accent-soft:#DDEFEB;
    --warm:#D2691E; --blue:#2563C9;
    --pos:#0F7A55; --pos-bg:#E1F1E9; --neg:#B93A2B; --neg-bg:#FAE7E3;
    --grid:#E6ECE9;
    --shadow:0 1px 2px rgba(12,26,23,.05), 0 8px 24px -18px rgba(12,26,23,.35);
    --r:12px;
}

*{box-sizing:border-box}
body{
    margin:0; background:var(--ground); color:var(--ink);
    font-family:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
    font-size:15px; line-height:1.45; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0}
.num{font-family:"Bricolage Grotesque","Schibsted Grotesk",sans-serif; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.lbl{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px}

/* ---------- login ---------- */
.login{min-height:100dvh; display:grid; grid-template-columns:1fr 1fr}
.login-art{
    background:var(--rail); color:#fff; padding:48px 44px;
    display:flex; flex-direction:column; justify-content:space-between;
}
.login-art h1{font-family:"Bricolage Grotesque",sans-serif; font-size:34px; font-weight:700; letter-spacing:-.03em}
.login-art h1 em{font-style:normal; color:var(--rail-ink-2); font-weight:500}
.login-art p{color:var(--rail-ink-2); max-width:34ch; font-size:14px; margin:14px 0 0}
.login-art .pie{font-size:11.5px; color:var(--rail-ink-2)}
.login-form{display:flex; align-items:center; justify-content:center; padding:32px}
.login-box{width:100%; max-width:340px; display:flex; flex-direction:column; gap:16px}
.login-box h2{font-family:"Bricolage Grotesque",sans-serif; font-size:21px; font-weight:600}
.campo{display:flex; flex-direction:column; gap:6px}
.campo input{
    padding:11px 13px; border-radius:9px; border:1px solid var(--line);
    background:var(--surface-2); color:var(--ink); font:inherit; font-size:14px;
}
.campo input:focus{border-color:var(--accent); background:var(--surface); outline:none}
.btn{
    padding:12px 16px; border-radius:9px; border:0; background:var(--accent); color:#fff;
    font:inherit; font-weight:600; font-size:14px; cursor:pointer;
}
.btn:hover{background:var(--accent-ink)}
.btn[disabled]{opacity:.6; cursor:default}
.aviso{
    padding:10px 13px; border-radius:9px; font-size:13px;
    background:var(--neg-bg); color:var(--neg); display:none;
}
.aviso.ver{display:block}

/* ---------- estructura del portal ---------- */
.app{display:grid; grid-template-columns:236px minmax(0,1fr); min-height:100dvh}

.rail{
    background:var(--rail); color:var(--rail-ink); display:flex; flex-direction:column;
    position:sticky; top:0; height:100dvh; border-right:1px solid var(--rail-line);
}
.brand{padding:20px 18px 16px; border-bottom:1px solid var(--rail-line)}
.brand-mark{display:flex; align-items:center; gap:9px}
.brand-dot{width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px rgba(0,137,122,.18)}
.brand-name{font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:17px; letter-spacing:-.02em; color:#fff}
.brand-name em{font-style:normal; color:var(--rail-ink-2); font-weight:500}
.brand-sub{margin-top:7px; font-size:11.5px; color:var(--rail-ink-2); line-height:1.35}

.nav{padding:14px 10px; display:flex; flex-direction:column; gap:2px; overflow-y:auto; flex:1}
.nav-group{padding:14px 8px 6px; color:var(--rail-ink-2); font-family:"IBM Plex Mono",monospace; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase}
.nav-item{
    display:flex; align-items:center; gap:10px; width:100%; text-align:left;
    padding:9px 10px; border-radius:9px; border:0; background:transparent; cursor:pointer;
    color:var(--rail-ink); font:inherit; font-size:13.5px; font-weight:500;
}
.nav-item:hover{background:var(--rail-2)}
.nav-item[aria-current="true"]{background:var(--rail-2); color:#fff}
.rail-foot{padding:12px 18px 16px; border-top:1px solid var(--rail-line); font-size:11px; color:var(--rail-ink-2); display:flex; flex-direction:column; gap:3px}
.rail-foot b{color:var(--rail-ink); font-weight:500}
.rail-foot a{color:var(--rail-ink-2); cursor:pointer; text-decoration:underline}

.topbar{
    position:sticky; top:0; z-index:20; background:var(--surface); border-bottom:1px solid var(--line);
    padding:12px 22px; display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.topbar h1{font-family:"Bricolage Grotesque",sans-serif; font-size:19px; font-weight:600; letter-spacing:-.02em}
.topbar .crumb{font-size:11.5px; color:var(--ink-3); margin-top:1px}
.filters{display:flex; gap:7px; flex-wrap:wrap; margin-left:auto; align-items:center}
.filtro{display:inline-flex; align-items:center; gap:7px; padding:5px 11px; border-radius:999px; border:1px solid var(--line); background:var(--surface-2); font-size:12.5px; color:var(--ink-2)}
.filtro select, .filtro input{border:0; background:transparent; font:inherit; font-size:12.5px; color:var(--ink); font-weight:600; cursor:pointer}
.filtro select:focus, .filtro input:focus{outline:none}

.body{padding:20px 22px 40px; display:flex; flex-direction:column; gap:16px}
.note{
    display:flex; gap:10px; align-items:flex-start; padding:10px 13px; border-radius:10px;
    background:var(--surface-2); border:1px solid var(--line-soft); font-size:12.5px; color:var(--ink-2);
}

.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(186px,1fr)); gap:12px}
.kpi{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
    padding:14px 15px 13px; box-shadow:var(--shadow);
    display:flex; flex-direction:column; gap:7px; position:relative; overflow:hidden;
}
.kpi.lead::before{content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--accent)}
.kpi-val{display:flex; align-items:baseline; gap:5px}
.kpi-val .n{font-size:29px; font-weight:600; line-height:1}
.kpi-val .u{font-size:11.5px; color:var(--ink-3); font-weight:500}
.kpi-foot{display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--ink-3)}
.delta{
    display:inline-flex; align-items:center; gap:3px; padding:2px 7px; border-radius:999px;
    font-family:"IBM Plex Mono",monospace; font-size:11px; font-weight:500; white-space:nowrap;
}
.delta.up{background:var(--pos-bg); color:var(--pos)}
.delta.down{background:var(--neg-bg); color:var(--neg)}

.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); display:flex; flex-direction:column; min-width:0}
.card-head{padding:14px 16px 10px}
.card-head h2{font-family:"Bricolage Grotesque",sans-serif; font-size:14.5px; font-weight:600}
.card-head .sub{font-size:11.5px; color:var(--ink-3); margin-top:2px}
.card-body{padding:4px 16px 16px; min-width:0; overflow-x:auto}

table{border-collapse:collapse; width:100%; font-size:13px}
th{
    text-align:left; font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.09em;
    text-transform:uppercase; color:var(--ink-3); font-weight:400; padding:8px 10px;
    border-bottom:1px solid var(--line); white-space:nowrap;
}
td{padding:9px 10px; border-bottom:1px solid var(--line-soft); color:var(--ink-2); white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--surface-2)}
td.name{color:var(--ink); font-weight:500; white-space:normal; min-width:210px}
td.r{text-align:right; font-variant-numeric:tabular-nums}

.vacio{padding:44px 20px; text-align:center; color:var(--ink-3); font-size:13px}
.cargando{padding:44px 20px; text-align:center; color:var(--ink-3); font-size:13px}

svg{display:block}
.mark-lbl{font-family:"IBM Plex Mono",monospace; font-size:10.5px; fill:var(--ink-2)}

@media (max-width:1080px){
    .app{grid-template-columns:1fr}
    .rail{position:static; height:auto}
    .login{grid-template-columns:1fr}
    .login-art{display:none}
}

/* ---------- tablero ---------- */
.vista{display:flex; flex-direction:column; gap:16px}
.grid2{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:16px}

.nav-item .ico{width:17px; height:17px; flex:none; color:var(--rail-ink-2); display:inline-flex}
.nav-item .ico svg{width:100%; height:100%}
.nav-item[aria-current="true"] .ico{color:var(--accent-ink)}

.kpi{padding-bottom:0; overflow:hidden}
.kpi-top{display:flex; align-items:center; gap:8px}
.kpi-ico{width:16px; height:16px; color:var(--ink-3); display:inline-flex; flex:none}
.kpi-ico svg{width:100%; height:100%}
.kpi.lead .kpi-ico{color:var(--accent)}
.kpi-spark{margin:6px -15px 0; line-height:0; min-height:0}
.kpi-foot{flex-wrap:wrap; row-gap:4px}

/* lista al costado del anillo */
.lista{display:flex; flex-direction:column}
.lista-fila{
    display:grid; grid-template-columns:9px minmax(0,1fr) auto auto; align-items:center; gap:10px;
    padding:8px 2px; border-bottom:1px solid var(--line-soft); font-size:13px;
}
.lista-fila:last-child{border-bottom:0}
.punto{width:9px; height:9px; border-radius:3px; flex:none}
.lista-nom{color:var(--ink); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lista-nom.resto{color:var(--ink-3); font-style:italic; font-weight:400}
.lista-val{color:var(--ink-2); font-variant-numeric:tabular-nums; font-size:12.5px}

.legend{display:flex; gap:12px; margin-left:auto; align-items:center; flex-wrap:wrap}
.legend span{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--ink-3)}
.swatch{width:11px; height:11px; border-radius:3px; flex:none}

td.malo, .malo{color:var(--neg)}

/* graficos */
.tick{font-family:"IBM Plex Mono",monospace; font-size:10px; fill:var(--ink-3)}
.gridline{stroke:var(--grid); stroke-width:1}
.hit{fill:transparent; cursor:pointer}
.dot{stroke:var(--surface); stroke-width:2}

#tip{
    position:fixed; z-index:60; pointer-events:none; opacity:0; transition:opacity .1s ease;
    background:var(--rail); color:#fff; border:1px solid var(--rail-line); border-radius:9px;
    padding:9px 11px; font-size:12px; box-shadow:0 10px 30px -12px rgba(0,0,0,.6); max-width:280px;
}
#tip .t{font-weight:600; margin-bottom:5px; font-size:12.5px}
#tip .row{display:flex; justify-content:space-between; gap:16px; color:var(--rail-ink)}
#tip .row b{color:#fff; font-family:"IBM Plex Mono",monospace; font-weight:500}

.filters .btn{padding:7px 16px; font-size:13px}

@media (max-width:1200px){ .grid2{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){*{transition:none !important}}