/* RAPIZZA OS — cerebro visual · lenguaje heredado del tablero Ventas Rapizza */
:root{
  color-scheme: light;
  --page:#f3edea; --surface:#fbf8f7; --surface-2:#f6f0ee; --sunken:#efe8e5;
  --ink:#171110; --ink-2:#5e5350; --ink-3:#938784;
  --line:#e7dfdc; --line-2:#d2c8c4;
  --brand:#d81f26; --on-brand:#fff; --accent:#f5b800;
  --s1:#2a78d6; --s1-hi:#1c5cab; --s2:#eb6834; --s3:#1baf7a;
  --good:#006300; --bad:#c0392f; --warn:#8a5a00;
  --ring:0 0 0 1px rgba(23,17,16,.08);
  --lift:0 1px 2px rgba(23,17,16,.05), 0 10px 26px -16px rgba(23,17,16,.3);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  color-scheme: dark;
  --page:#100d0e; --surface:#1b1718; --surface-2:#221d1e; --sunken:#151112;
  --ink:#fff; --ink-2:#c9bfbc; --ink-3:#928683;
  --line:#2f2829; --line-2:#3e3637;
  --brand:#f2454b; --on-brand:#fff; --accent:#ffcb2e;
  --s1:#3987e5; --s1-hi:#6da7ec; --s2:#d95926; --s3:#199e70;
  --good:#0ca30c; --bad:#e66767; --warn:#e0a93f;
  --ring:0 0 0 1px rgba(255,255,255,.09);
  --lift:0 1px 2px rgba(0,0,0,.4), 0 10px 26px -16px rgba(0,0,0,.8);
}}
*{box-sizing:border-box}
html{scroll-padding-top:70px}
body{margin:0; background:var(--page); color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0; text-wrap:balance}
.num{font-variant-numeric:tabular-nums}
a{color:var(--s1)}
button{font:inherit}

/* barra */
.top{position:sticky; top:0; z-index:20; background:var(--page); border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:12px; padding:10px 18px; flex-wrap:wrap}
.logo{font-family:"Archivo Black",Impact,sans-serif; font-size:17px; letter-spacing:.01em;
  background:var(--brand); color:var(--on-brand); padding:6px 11px 5px; border-radius:7px;
  box-shadow:3px 3px 0 var(--accent); text-transform:uppercase; line-height:1}
.top nav{display:flex; gap:2px; flex-wrap:wrap}
.top nav a{color:var(--ink-2); text-decoration:none; font-weight:600; font-size:13.5px;
  padding:7px 11px; border-radius:8px}
.top nav a[aria-current="page"]{background:var(--surface); color:var(--ink); box-shadow:var(--ring)}
.top .spacer{flex:1}
.top .quien{font-size:12.5px; color:var(--ink-3)}
.salir{appearance:none; border:0; background:var(--sunken); color:var(--ink-2); cursor:pointer;
  font-weight:600; font-size:12.5px; padding:6px 11px; border-radius:8px}

.wrap{max-width:1080px; margin:0 auto; padding:18px 18px 56px}

/* login */
.login{max-width:360px; margin:9vh auto; background:var(--surface); border-radius:14px;
  box-shadow:var(--ring),var(--lift); padding:26px}
.login .logo{display:inline-block; margin-bottom:14px}
.login h1{font-size:17px; margin-bottom:14px}
.login label{display:block; font-size:12.5px; font-weight:600; color:var(--ink-2); margin:12px 0 4px}
.login input{width:100%; padding:9px 11px; border-radius:8px; border:1px solid var(--line-2);
  background:var(--page); color:var(--ink); font:inherit}
.login button{width:100%; margin-top:16px; appearance:none; border:0; background:var(--brand);
  color:var(--on-brand); font-weight:700; padding:11px; border-radius:9px; cursor:pointer}
.login .err{color:var(--bad); font-size:13px; margin-top:10px; min-height:1em}

/* paneles y fichas */
.panel{min-width:0; background:var(--surface); border-radius:14px; box-shadow:var(--ring),var(--lift);
  padding:18px 20px; margin-bottom:14px}
.phead{display:flex; align-items:center; gap:10px; margin-bottom:4px; flex-wrap:wrap}
.phead h2{font-size:15.5px; font-weight:700}
.phead .spacer{flex:1}
.psub{font-size:12.5px; color:var(--ink-3); margin-bottom:14px}
.cols{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px}
@media (max-width:720px){ .cols{grid-template-columns:minmax(0,1fr)} }

.eyebrow{font-size:11.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3)}
.big{font-family:"Archivo Black",Impact,sans-serif; font-size:clamp(30px,7vw,52px); line-height:1.03;
  margin:6px 0 2px; letter-spacing:-.015em}
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(135px,1fr)); gap:1px; background:var(--line);
  grid-auto-rows:1fr; margin-top:16px; border-radius:10px; overflow:hidden}
.tile{background:var(--surface); padding:12px 14px}
.tile .k{font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3)}
.tile .v{font-size:20px; font-weight:700; margin-top:3px}
.tile .s{font-size:12.5px; color:var(--ink-3); margin-top:1px}

.chip{display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:600;
  padding:3px 9px; border-radius:999px; box-shadow:var(--ring); white-space:nowrap}
.chip.alerta{color:var(--bad)} .chip.oportunidad{color:var(--warn)} .chip.info{color:var(--ink-2)}
.chip.up{color:var(--good)} .chip.dn{color:var(--bad)}

/* tarjetas de señal / recomendación */
.card{border-left:3px solid var(--line-2); background:var(--surface-2); border-radius:0 12px 12px 0;
  padding:13px 16px; margin-bottom:10px}
.card.alerta{border-color:var(--bad)} .card.oportunidad{border-color:var(--accent)} .card.info{border-color:var(--s1)}
.card h3{font-size:14.5px; margin-bottom:3px}
.card p{margin:0; font-size:13.5px; color:var(--ink-2)}
.card .meta{font-size:11.5px; color:var(--ink-3); margin-top:7px; display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.card .acciones{margin-top:9px; display:flex; gap:7px; flex-wrap:wrap}
.card .acciones button{appearance:none; border:0; background:var(--surface); box-shadow:var(--ring);
  color:var(--ink-2); font-weight:600; font-size:12px; padding:5px 11px; border-radius:7px; cursor:pointer}
.card .acciones button:hover{color:var(--ink)}
.card .acciones button.pri{background:var(--brand); color:var(--on-brand)}

/* controles */
.controls{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:16px}
.seg{display:flex; background:var(--sunken); border-radius:9px; padding:3px; box-shadow:var(--ring)}
.seg button{appearance:none; border:0; background:transparent; color:var(--ink-2); cursor:pointer;
  font-weight:600; font-size:13.5px; padding:7px 14px; border-radius:7px}
.seg button[aria-pressed="true"]{background:var(--surface); color:var(--ink); box-shadow:var(--ring)}
.nav-p{display:flex; align-items:center; gap:2px; background:var(--surface); border-radius:9px; box-shadow:var(--ring)}
.nav-p button{appearance:none; border:0; background:transparent; color:var(--ink); cursor:pointer;
  font-size:17px; line-height:1; padding:8px 12px; border-radius:8px}
.nav-p button:disabled{color:var(--ink-3); cursor:default}
.nav-p .lbl{padding:0 6px; font-weight:600; font-size:13.5px; min-width:150px; text-align:center; text-transform:capitalize}
.hoy{appearance:none; border:0; background:var(--surface); box-shadow:var(--ring); color:var(--ink-2);
  font-weight:600; font-size:13px; padding:8px 13px; border-radius:9px; cursor:pointer}

/* gráfico de barras */
.plot{position:relative; height:240px; margin:8px 0 0}
.grid{position:absolute; inset:0 0 22px 0; pointer-events:none}
.gl{position:absolute; left:0; right:0; border-top:1px solid var(--line)}
.gl span{position:absolute; left:0; top:-8px; font-size:11px; color:var(--ink-3); background:var(--surface); padding-right:6px}
.bars{position:absolute; inset:0 0 22px 0; display:flex; align-items:flex-end; gap:2px; padding-left:34px}
.bar{flex:1; min-width:0; background:var(--s1); border-radius:4px 4px 0 0; cursor:pointer; position:relative;
  border:0; padding:0; min-height:2px}
.bar:hover,.bar[data-sel="1"]{background:var(--s1-hi)}
.bar[data-empty="1"]{background:var(--line); cursor:default}
.xax{position:absolute; left:34px; right:0; bottom:0; height:20px; display:flex; gap:2px}
.xax span{flex:1; min-width:0; text-align:center; font-size:10.5px; color:var(--ink-3); overflow:hidden; white-space:nowrap}
.tip{position:fixed; z-index:50; background:var(--ink); color:var(--page); font-size:12.5px; line-height:1.4;
  padding:7px 10px; border-radius:7px; pointer-events:none; white-space:nowrap; transform:translate(-50%,-110%);
  box-shadow:0 6px 18px -8px rgba(0,0,0,.5)}
.tip b{display:block; font-size:13.5px}

/* apilada + ranking + tabla */
.stack{display:flex; gap:2px; height:15px; margin:6px 0 14px}
.stack i{display:block; border-radius:3px; min-width:3px}
.legend{display:flex; flex-direction:column; gap:9px}
.lrow{display:flex; align-items:center; gap:9px; font-size:14px}
.dot{width:10px; height:10px; border-radius:3px; flex:none}
.lrow .nm{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lrow .vl{font-weight:600} .lrow .pc{color:var(--ink-3); font-size:12.5px; min-width:44px; text-align:right}
.rank{display:flex; flex-direction:column; gap:9px}
.rrow{display:grid; grid-template-columns:minmax(0,1fr) 92px; gap:10px; align-items:center; font-size:14px}
.rbar{position:relative; height:26px; display:flex; align-items:center}
.rbar i{position:absolute; left:0; top:0; bottom:0; background:var(--s1); opacity:.16; border-radius:5px}
.rbar em{position:relative; font-style:normal; padding-left:9px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rbar em s{text-decoration:none; color:var(--ink-3); font-size:12px; margin-left:7px}
.rval{text-align:right; font-weight:600; font-size:13.5px}
.tblwrap{overflow-x:auto; margin-top:6px}
table{border-collapse:collapse; width:100%; font-size:13.5px}
th,td{text-align:right; padding:7px 10px; border-bottom:1px solid var(--line); white-space:nowrap}
th:first-child,td:first-child{text-align:left}
th{font-size:11.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3);
  border-bottom:1px solid var(--line-2)}
tbody tr:hover{background:var(--surface-2)}
td.mut{color:var(--ink-3)}

.vacio{color:var(--ink-3); font-size:13.5px; padding:14px 0}
.foot{margin-top:26px; padding-top:18px; border-top:1px solid var(--line); font-size:12.5px; color:var(--ink-3); line-height:1.65}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}