/* ============================================================
   Cúbrica · Encuestas — estilos compartidos
   ============================================================ */
:root{
  --brand:#1E2126; --brand2:#2A2E35; --bg:#F4F2EE; --card:#FFFFFF;
  --ink:#1F2128; --muted:#6B7075; --line:#E4E2DD;
  --accent:#1F55E0; --accent-soft:#E7EDFC;

  /* Paleta de datos (validada) */
  --surface-1:#FCFCFB; --text-primary:#0B0B0B; --text-secondary:#52514E;
  --text-muted:#898781; --grid:#E1E0D9; --baseline:#C3C2B7;
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100;
  --s5:#e87ba4; --s6:#008300; --s7:#4a3aa7; --s8:#e34948;
  --seq-100:#cde2fb; --seq-250:#86b6ef; --seq-400:#3987e5; --seq-450:#2a78d6;
  --seq-550:#1c5cab; --seq-650:#104281;
  --div-neg:#e34948; --div-mid:#f0efec; --div-pos:#2a78d6;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; padding:0;}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--ink); font-size:16px; line-height:1.45;}

/* ---- barra superior ---- */
.top{position:sticky; top:0; z-index:20; background:var(--brand); color:#fff;
  padding:12px 16px; display:flex; align-items:center; justify-content:space-between; gap:10px;}
.top a{color:inherit; text-decoration:none;}
.brand .wm{font-weight:800; font-size:19px; letter-spacing:3px;}
.brand .tg{font-weight:600; font-size:10px; letter-spacing:2px; color:#B9BCC4; text-transform:uppercase; margin-top:1px;}
.topacts{display:flex; align-items:center; gap:8px;}
.chip{background:var(--brand2); border:1px solid #3A3E46; border-radius:999px; padding:7px 13px;
  font-size:13px; font-weight:700; white-space:nowrap; color:#fff; cursor:pointer;}
.chip:hover{background:#343941;}

.wrap{max-width:1080px; margin:0 auto; padding:18px 16px 64px;}
.wrap.narrow{max-width:640px;}
h1{font-size:24px; margin:6px 2px 2px;}
.sub{color:var(--muted); font-size:14px; margin:0 2px 18px;}
h2.sec{font-size:12px; letter-spacing:1.6px; text-transform:uppercase; color:var(--muted);
  font-weight:800; margin:26px 2px 10px;}
.card{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px; margin-bottom:14px;}

/* ---- botones ---- */
.btn{border:none; border-radius:12px; padding:13px 18px; font-size:15px; font-weight:700;
  font-family:inherit; cursor:pointer; background:#E7E5E0; color:var(--ink);}
.btn:hover{filter:brightness(.97);}
.btn.primary{background:var(--accent); color:#fff;}
.btn.sm{padding:9px 13px; font-size:13px; border-radius:10px;}
.btn:disabled{opacity:.5; cursor:not-allowed;}

/* ---- formularios ---- */
label.lbl{display:block; font-size:13px; font-weight:700; color:var(--muted); margin:0 0 6px 2px;}
input[type=text],input[type=password],textarea,select{
  width:100%; font-size:16px; font-family:inherit; border:2px solid var(--line);
  border-radius:12px; padding:13px 14px; background:#fff; color:var(--ink); -webkit-appearance:none;}
input:focus,textarea:focus,select:focus{outline:none; border-color:var(--accent);}
textarea{min-height:70px; resize:vertical;}
select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7075' stroke-width='3'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:40px;}
.row2{display:flex; gap:10px; flex-wrap:wrap;} .row2>*{flex:1 1 180px;}

/* ---- avisos ---- */
.alert{border-radius:12px; padding:12px 14px; font-size:14px; margin-bottom:14px; border:1px solid;}
.alert.warn{background:#FDF6E3; border-color:#E8D9A8; color:#6B5307;}
.alert.err{background:#FCEDEC; border-color:#F1C7C5; color:#8E2320;}
.alert.ok{background:#EAF6EE; border-color:#BFE3CB; color:#1F5B33;}
.alert a{color:inherit; font-weight:700;}

/* ---- tarjetas del hub ---- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px;}
.tile{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px;
  display:flex; flex-direction:column; gap:8px; text-decoration:none; color:inherit; transition:.15s;}
.tile:hover{transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,.07);}
.tile .bar{height:5px; width:38px; border-radius:3px;}
.tile .tt{font-weight:800; font-size:17px; line-height:1.2;}
.tile .ts{font-size:13px; color:var(--muted);}
.tile .foot{display:flex; align-items:center; justify-content:space-between; margin-top:6px;
  padding-top:10px; border-top:1px solid var(--line); font-size:13px; color:var(--muted);}
.tile .cnt{font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums;}
.tile.ghost{border-style:dashed; align-items:flex-start; justify-content:center; color:var(--muted);}

/* ---- KPI ---- */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:16px;}
.kpi{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 16px;}
.kpi .k{font-size:11px; letter-spacing:1.2px; text-transform:uppercase; color:var(--text-muted); font-weight:800;}
.kpi .v{font-size:32px; font-weight:800; line-height:1.15; margin-top:4px;}
.kpi .d{font-size:12px; color:var(--text-secondary);}

/* ---- gráficas ---- */
.chart{background:var(--surface-1); border:1px solid var(--line); border-radius:16px; padding:16px 18px; margin-bottom:14px;}
.chart h3{margin:0 0 2px; font-size:16px; color:var(--text-primary);}
.chart .cap{margin:0 0 14px; font-size:13px; color:var(--text-secondary);}
.bars{display:flex; flex-direction:column; gap:9px;}
.brow{display:grid; grid-template-columns:minmax(120px,34%) 1fr auto; align-items:center; gap:10px;}
.brow .bl{font-size:13px; color:var(--text-secondary); line-height:1.25;}
.brow .track{background:var(--grid); border-radius:0 4px 4px 0; height:20px; position:relative;}
.brow .fill{height:20px; border-radius:0 4px 4px 0; background:var(--seq-450); min-width:2px;}
.brow .bv{font-size:13px; font-weight:700; color:var(--text-primary); font-variant-numeric:tabular-nums; min-width:44px; text-align:right;}
.legend{display:flex; flex-wrap:wrap; gap:12px; margin-top:12px; font-size:12px; color:var(--text-secondary);}
.legend .li{display:flex; align-items:center; gap:6px;}
.legend .sw{width:12px; height:12px; border-radius:3px; flex:0 0 auto;}
.stack{display:flex; height:26px; border-radius:4px; overflow:hidden; background:var(--grid); gap:2px;}
.stack .seg{height:100%; position:relative;}
.drow{display:grid; grid-template-columns:minmax(120px,30%) 1fr; align-items:center; gap:10px; margin-bottom:9px;}
.empty{color:var(--text-muted); font-size:14px; padding:8px 2px;}
[data-tip]{cursor:default;}

/* ---- tabla ---- */
.tblwrap{overflow:auto; border:1px solid var(--line); border-radius:14px; background:#fff; max-height:60vh;}
table{border-collapse:collapse; width:100%; font-size:13px;}
th,td{padding:9px 12px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap;}
th{position:sticky; top:0; background:#F7F6F3; font-size:11px; text-transform:uppercase;
  letter-spacing:.8px; color:var(--muted); z-index:1;}
td{font-variant-numeric:tabular-nums; color:var(--text-primary);}
tr:hover td{background:#FAFAF8;}

/* ---- tooltip ---- */
#tip{position:fixed; z-index:80; background:#1E2126; color:#fff; padding:7px 10px; border-radius:8px;
  font-size:12px; pointer-events:none; opacity:0; transition:opacity .12s; max-width:260px; line-height:1.35;}
#tip.on{opacity:1;}

/* ---- toast ---- */
.toast{position:fixed; left:50%; transform:translateX(-50%); bottom:24px; z-index:90; background:#3F8F52;
  color:#fff; padding:12px 18px; border-radius:999px; font-weight:700; font-size:15px;
  opacity:0; transition:.25s; pointer-events:none;}
.toast.show{opacity:1; bottom:34px;}

@media print{ .top,.btn,.chip{display:none!important;} body{background:#fff;} }