/* Tablero · Otoño — tokens y componentes
   Plataforma Central DGDDIACEE. Cambia solo las variables de :root para ajustar el tema. */
:root{
  /* superficies */
  --pergamino:#F4EEE4;      /* fondo de página */
  --avena:#EFE5D5;        /* fondos suaves, filas al pasar */
  --lino:#FFFDF8;          /* tarjetas */
  --linea:#E8DDCC;        /* bordes */
  --linea-2:#DCCDB6;
  /* texto */
  --corteza:#2B1D14;       /* títulos */
  --castano:#8A4B26;      /* acentos tipográficos */
  --texto:#4A3A2E;
  --tenue:#8A7868;
  /* marca */
  --roble:#3B281C;       /* barra lateral, botones */
  --roble-2:#4F3726;
  --ocre:#B3841D;       /* detalles, foco */
  --ocre-claro:#E4C27A;
  --ocre-suave:#F3E5C6;
  /* series de gráficas (paleta validada para daltonismo, en este orden) */
  --serie-1:#B24A22;        /* óxido */
  --serie-2:#1F6E9C;        /* crepúsculo */
  --serie-3:#B3841D;        /* ocre */
  --serie-4:#83366E;        /* ciruela */
  /* estados (reservados; siempre con icono y texto) */
  --ok:#3F6E45;      --ok-fondo:#E3ECDD;
  --aviso:#8C6512;   --aviso-fondo:#F5E8C8;
  --critico:#9A2E1E; --critico-fondo:#F6DFD8;
  --neutro:#5E5246;  --neutro-fondo:#ECE4D8;
  /* tipografía */
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --radio:18px;
  --sombra:0 1px 0 rgba(255,255,255,.7) inset,0 18px 40px -30px rgba(59,40,28,.45);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{min-height:100vh;background:var(--pergamino);color:var(--texto);font-family:var(--sans);-webkit-font-smoothing:antialiased;font-size:15px}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(900px 600px at 100% -10%,#EBD9BE,transparent 60%),radial-gradient(700px 500px at 20% 110%,#E6E0CF,transparent 60%)}
:focus-visible{outline:2.5px solid var(--ocre);outline-offset:3px;border-radius:6px}
a{color:inherit}

/* estructura */
.app{position:relative;z-index:1;display:grid;grid-template-columns:260px minmax(0,1fr);min-height:100vh}
.side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:28px;padding:28px 18px;background:var(--roble);color:#EADFCB;overflow:hidden}
.side .brand{display:flex;align-items:center;gap:12px;padding:0 8px;color:#fff;text-decoration:none}
.side .logo{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.08);display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.side .logo svg{width:22px;height:22px;color:var(--ocre-claro)}
.side .brand b{display:block;font-size:17px;letter-spacing:.16em}
.side .brand small{display:block;margin-top:4px;font-size:11.5px;letter-spacing:.08em;color:#BFAE95}
.nav{list-style:none;display:flex;flex-direction:column;gap:2px}
.nav a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:11px;color:#D9CBB3;text-decoration:none;font-weight:500;transition:background-color .2s,color .2s}
.nav a svg{width:19px;height:19px;flex:none;opacity:.85}
.nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.nav a[aria-current]{background:rgba(228,194,122,.14);color:#fff;box-shadow:inset 3px 0 0 var(--ocre-claro)}
.side .bough{position:absolute;right:-18px;bottom:64px;width:190px;opacity:.9;pointer-events:none}
.side .me{text-decoration:none;margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px;border-radius:12px;background:rgba(255,255,255,.05);font-size:13.5px;color:#D9CBB3;position:relative}
.side .me svg{width:18px;height:18px}
.main{padding:34px clamp(18px,4vw,52px) 48px;min-width:0}

/* encabezado */
.head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 28px;margin-bottom:26px}
.date{font-size:13.5px;color:var(--tenue);margin-bottom:8px}
.head h1{font-family:var(--serif);font-weight:500;font-size:clamp(32px,3.6vw,48px);line-height:1.05;letter-spacing:-.025em;color:var(--corteza);font-variation-settings:"opsz" 144,"SOFT" 40}
.head h1 em{font-style:italic;font-weight:400;color:var(--castano)}
.tag{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;background:var(--ocre-suave);color:var(--aviso);font-size:12.5px;font-weight:600}
.tag svg{width:14px;height:14px}
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.select{position:relative}
.select select{appearance:none;-webkit-appearance:none;height:42px;padding:0 38px 0 14px;border-radius:11px;border:1px solid var(--linea-2);background:var(--lino);font:inherit;font-size:14px;color:var(--corteza);cursor:pointer}
.select::after{content:"";position:absolute;right:15px;top:17px;width:7px;height:7px;border-right:1.8px solid var(--tenue);border-bottom:1.8px solid var(--tenue);transform:rotate(45deg);pointer-events:none}
.seg{display:inline-flex;padding:4px;border-radius:12px;background:var(--avena);border:1px solid var(--linea)}
.seg button{height:34px;padding:0 14px;border:0;border-radius:9px;background:transparent;font:inherit;font-size:13.5px;font-weight:500;color:var(--texto);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--lino);color:var(--corteza);box-shadow:0 1px 3px rgba(59,40,28,.12)}

/* tarjetas */
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px}
.card{background:var(--lino);border:1px solid var(--linea);border-radius:var(--radio);box-shadow:var(--sombra);padding:22px 24px;min-width:0}
.card h2{font-size:15.5px;font-weight:600;color:var(--corteza);letter-spacing:-.005em}
.card .hint{margin-top:4px;font-size:13px;color:var(--tenue)}
.card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:16px}
.link{font-size:13.5px;font-weight:600;color:var(--castano);text-decoration:none;white-space:nowrap}
.link:hover{text-decoration:underline;text-underline-offset:3px}

/* indicadores */
.kpi{grid-column:span 3;display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden}
.kpi .label{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:500;color:var(--texto)}
.kpi .label i{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--avena);color:var(--castano)}
.kpi .label svg{width:16px;height:16px}
.kpi .value{font-family:var(--serif);font-size:44px;font-weight:500;line-height:1;letter-spacing:-.02em;color:var(--corteza);font-variant-numeric:lining-nums tabular-nums}
.kpi .delta{font-size:13px;color:var(--tenue)}
.kpi .delta b{font-weight:600;color:var(--texto)}
.kpi.feature{background:var(--roble);border-color:var(--roble);color:#EADFCB}
.kpi.feature .label{color:#EADFCB}.kpi.feature .label i{background:rgba(255,255,255,.08);color:var(--ocre-claro)}
.kpi.feature .value{color:#fff}.kpi.feature .delta{color:#BFAE95}.kpi.feature .delta b{color:#fff}
.kpi.feature .leafmark{position:absolute;right:-34px;bottom:-52px;width:118px;opacity:.12;transform:rotate(-18deg);color:var(--ocre-claro)}

/* gráficas */
.wide{grid-column:span 8}.narrow{grid-column:span 4}.full{grid-column:1/-1}
.chart{width:100%;height:auto;display:block;overflow:visible}
.chart text{font-family:var(--sans);font-size:12px;fill:var(--tenue);font-variant-numeric:tabular-nums}
.chart .grid-l{stroke:var(--linea);stroke-width:1}
.chart .base{stroke:var(--linea-2);stroke-width:1}
.chart .b{fill:var(--serie-1);transition:opacity .2s}
.chart .hit{fill:transparent;cursor:pointer}
.chart:has(.hit:hover) .b{opacity:.55}
.chart .b.on{opacity:1!important}
.chart .val{fill:var(--corteza);font-weight:600}
.donut-wrap{display:flex;flex-direction:column;align-items:center;gap:18px}
.donut{width:min(100%,220px);height:auto}
.donut .seg-a{cursor:pointer;transition:opacity .2s}
.donut:has(.seg-a:hover) .seg-a{opacity:.5}
.donut .seg-a:hover{opacity:1}
.donut .total{font-family:var(--serif);font-size:30px;fill:var(--corteza);font-weight:500}
.donut .cap{font-size:11.5px;fill:var(--tenue)}
.legend{list-style:none;width:100%;display:flex;flex-direction:column;gap:8px}
.legend li{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--texto)}
.legend .sw{width:10px;height:10px;border-radius:3px;flex:none}
.legend b{margin-left:auto;font-weight:600;color:var(--corteza);font-variant-numeric:tabular-nums}
.legend span.pct{width:44px;text-align:right;color:var(--tenue);font-variant-numeric:tabular-nums}
.tip{position:fixed;z-index:50;pointer-events:none;padding:9px 12px;border-radius:10px;background:var(--corteza);color:#F7EFE2;font-size:13px;line-height:1.35;box-shadow:0 10px 24px -10px rgba(0,0,0,.4);opacity:0;transform:translateY(4px);transition:opacity .12s,transform .12s;white-space:nowrap}
.tip.show{opacity:1;transform:none}
.tip b{display:block;font-weight:600}

/* tabla */
.table-wrap{overflow-x:auto;margin:0 -24px;padding:0 24px}
table{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
th{text-align:left;font-size:12.5px;font-weight:600;color:var(--tenue);padding:0 12px 10px;border-bottom:1px solid var(--linea)}
td{white-space:nowrap;padding:14px 12px;border-bottom:1px solid var(--linea);color:var(--texto);vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr{transition:background-color .15s}
tbody tr:hover{background:var(--avena)}
td.strong{font-weight:600;color:var(--corteza)}
td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 8px;border-radius:999px;font-size:12.5px;font-weight:600;white-space:nowrap}
.badge svg{width:14px;height:14px}
.badge.ok{background:var(--ok-fondo);color:var(--ok)}
.badge.aviso{background:var(--aviso-fondo);color:var(--aviso)}
.badge.critico{background:var(--critico-fondo);color:var(--critico)}
.badge.neutro{background:var(--neutro-fondo);color:var(--neutro)}
.foot{margin-top:28px;font-size:13px;color:var(--tenue);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

/* entrada */
.rise{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
.chart .b{transform-box:fill-box;transform-origin:50% 100%;animation:grow .8s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}
@keyframes grow{from{transform:scaleY(0)}}

/* adaptable */
@media (max-width:1180px){.kpi{grid-column:span 6}.wide,.narrow{grid-column:1/-1}.donut-wrap{flex-direction:row;align-items:center}.donut{width:200px;flex:none}}
@media (max-width:880px){
  .app{grid-template-columns:1fr}
  .side{position:sticky;top:0;z-index:20;height:auto;flex-direction:row;align-items:center;gap:12px;padding:12px 16px;overflow-x:auto}
  .side .brand small,.side .bough,.side .me{display:none}
  .nav{flex-direction:row}
  .nav a{padding:9px 11px;white-space:nowrap}
  .nav a span{display:none}
  .nav a[aria-current]{box-shadow:inset 0 -2px 0 var(--ocre-claro)}
}
@media (max-width:560px){.chart text{font-size:21px}.kpi{grid-column:1/-1}.donut-wrap{flex-direction:column}.kpi .value{font-size:38px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}