/* ============================================================
   CRO board · sistema de diseño (dark, moderno)
   ============================================================ */
:root{
  /* superficies */
  --bg:#0b0d12;
  --surface-1:#11141b;
  --surface-2:#161a23;
  --surface-3:#1d2230;
  --border:#232a38;
  --border-strong:#2e3647;
  /* texto */
  --text:#e8ebf2;
  --muted:#98a2b3;
  --faint:#6b7484;
  /* marca + semántico */
  --brand:#4d8df0;
  --brand-2:#6aa6ff;
  --brand-ink:#0a1a33;
  --ok:#34d399; --ok-bg:rgba(52,211,153,.12); --ok-bd:rgba(52,211,153,.35);
  --warn:#fbbf24; --warn-bg:rgba(251,191,36,.12); --warn-bd:rgba(251,191,36,.35);
  --bad:#f87171; --bad-bg:rgba(248,113,113,.12); --bad-bd:rgba(248,113,113,.35);
  /* forma */
  --r-sm:8px; --r:11px; --r-lg:16px;
  --sh-1:0 1px 2px rgba(0,0,0,.3);
  --sh-2:0 8px 30px rgba(0,0,0,.35);
  --ring:0 0 0 3px rgba(77,141,240,.25);
  --grad:linear-gradient(135deg,#5DCAA5,#4d8df0);
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:
    radial-gradient(900px 500px at 50% -200px, rgba(77,141,240,.10), transparent 70%),
    var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  font-size:14px; line-height:1.5;
}
a{color:var(--brand-2);text-decoration:none}
.app-root{min-height:100%}
h1,h2,h3{margin:0;font-weight:650;letter-spacing:-.01em}

/* scrollbar */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:20px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:var(--border-strong);background-clip:content-box}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 16px;border-radius:var(--r-sm);
  border:1px solid var(--border-strong);
  background:var(--surface-2);color:var(--text);
  font-weight:600;font-size:13.5px;cursor:pointer;
  transition:.16s ease;white-space:nowrap;
}
.btn:hover{background:var(--surface-3);border-color:#3a445a;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:none;box-shadow:var(--ring)}
.btn.primary{background:linear-gradient(180deg,var(--brand-2),var(--brand));border-color:transparent;color:#fff;box-shadow:0 4px 14px rgba(77,141,240,.30)}
.btn.primary:hover{filter:brightness(1.06)}
.btn.ghost{background:transparent;border-color:var(--border)}
.btn.ghost:hover{background:var(--surface-2)}
.btn.danger{background:transparent;border-color:var(--bad-bd);color:#f8a3a3}
.btn.danger:hover{background:var(--bad-bg)}
.btn.sm{padding:6px 11px;font-size:12.5px}

/* ---------- formularios ---------- */
label{display:block;font-size:12.5px;color:var(--muted);margin:14px 0 5px;font-weight:500}
input,select,textarea{
  width:100%;padding:10px 12px;border-radius:var(--r-sm);
  border:1px solid var(--border-strong);background:var(--surface-2);
  color:var(--text);font-size:14px;font-family:inherit;transition:.15s;
}
input::placeholder{color:var(--faint)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring);background:var(--surface-1)}
input.num{text-align:right;font-variant-numeric:tabular-nums}

/* ---------- utilidades ---------- */
.row{display:flex;gap:10px;align-items:center}
.muted{color:var(--muted)}
.hint{color:var(--muted);font-size:13px;margin:-2px 0 16px}
.err{color:#f8a3a3;background:var(--bad-bg);border:1px solid var(--bad-bd);padding:9px 12px;border-radius:var(--r-sm);font-size:13px;margin:10px 0}
.grid{display:grid;gap:12px}

/* ---------- logo ---------- */
.logo{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.02em}
.logo .mark{width:28px;height:28px;border-radius:8px;background:var(--grad);display:grid;place-items:center;color:#06231b;font-weight:800;box-shadow:0 2px 10px rgba(93,202,165,.35)}

/* ---------- login ---------- */
.center-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}
.card{
  background:linear-gradient(180deg,var(--surface-1),var(--surface-1)) padding-box,
            linear-gradient(180deg,var(--border-strong),transparent) border-box;
  border:1px solid transparent;border-radius:var(--r-lg);
  padding:30px;width:100%;max-width:392px;box-shadow:var(--sh-2);
}
.card h1{font-size:23px;margin:18px 0 4px}
.card .logo{margin-bottom:4px}

/* ---------- shell / sidebar ---------- */
.shell{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.side{
  background:var(--surface-1);border-right:1px solid var(--border);
  padding:18px 14px;display:flex;flex-direction:column;gap:3px;position:sticky;top:0;height:100vh;
}
.side .brand{display:flex;align-items:center;gap:9px;font-weight:700;padding:6px 8px 4px;letter-spacing:-.02em}
.side .proj-name{padding:2px 9px 14px;font-size:12.5px;color:var(--faint);font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-bottom:1px solid var(--border);margin-bottom:8px}
.side .navitem{
  display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:var(--r-sm);
  color:var(--muted);font-size:13.5px;font-weight:550;cursor:pointer;transition:.14s;position:relative;
}
.side .navitem:hover{background:var(--surface-2);color:var(--text)}
.side .navitem.active{background:rgba(77,141,240,.13);color:#cfe0ff}
.side .navitem.active::before{content:"";position:absolute;left:-14px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--brand)}
.side .spacer{flex:1}

/* ---------- main / topbar ---------- */
.main{padding:26px 30px;overflow:auto;min-width:0}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.topbar h2{font-size:20px}

/* ---------- paneles / cards ---------- */
.panel{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r);padding:18px;margin-bottom:16px;box-shadow:var(--sh-1)}
.panel-title{font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:650;margin-bottom:12px}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:14px}
.pcard{
  background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r);
  padding:18px;cursor:pointer;transition:.16s;position:relative;overflow:hidden;
}
.pcard::after{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--grad);opacity:0;transition:.16s}
.pcard:hover{border-color:#33405a;transform:translateY(-2px);box-shadow:var(--sh-2)}
.pcard:hover::after{opacity:1}
.pcard h3{font-size:16px;margin-bottom:6px}

/* ---------- tablas ---------- */
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--border)}
th{color:var(--faint);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.05em}
tbody tr{transition:.12s}
tbody tr:hover{background:var(--surface-2)}
tbody tr:last-child td{border-bottom:none}
.num{text-align:right;font-variant-numeric:tabular-nums}
table.data td input{padding:7px 9px}

/* ---------- chips / badges ---------- */
.chip{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:6px;
  background:var(--surface-3);color:var(--muted);font-size:12px;font-weight:700}
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-size:12.5px;font-weight:600;border:1px solid var(--border-strong);color:var(--muted)}
.badge.ok{color:#86efc4;background:var(--ok-bg);border-color:var(--ok-bd)}
.badge.warn{color:#fcd96b;background:var(--warn-bg);border-color:var(--warn-bd)}
.badge.bad{color:#fca3a3;background:var(--bad-bg);border-color:var(--bad-bd)}

/* ---------- veredicto (Resultados) ---------- */
.verdict{display:flex;align-items:center;gap:16px;padding:20px 22px;border-radius:var(--r);margin-bottom:16px;border:1px solid var(--border);background:var(--surface-1)}
.verdict-badge{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:22px;font-weight:800;flex:0 0 auto}
.verdict.ok .verdict-badge{background:var(--ok-bg);color:var(--ok);box-shadow:inset 0 0 0 1px var(--ok-bd)}
.verdict.warn .verdict-badge{background:var(--warn-bg);color:var(--warn);box-shadow:inset 0 0 0 1px var(--warn-bd)}
.verdict.bad .verdict-badge{background:var(--bad-bg);color:var(--bad);box-shadow:inset 0 0 0 1px var(--bad-bd)}
.verdict-title{font-size:19px;font-weight:700;letter-spacing:-.01em}
.verdict-sub{color:var(--muted);font-size:13.5px;margin-top:2px}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.kpi{padding:4px 4px}
.kpi-label{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--faint);font-weight:600}
.kpi-val{font-size:24px;font-weight:700;margin-top:3px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* barra de tasa en el desglose */
.ratecell{display:flex;flex-direction:column;gap:4px;min-width:120px}
.ratepct{font-variant-numeric:tabular-nums;font-weight:600}
.bar{height:6px;border-radius:6px;background:var(--surface-3);overflow:hidden}
.bar>span{display:block;height:100%;border-radius:6px;background:var(--grad)}

/* ---------- estados vacíos ---------- */
.list-empty,.stub{
  text-align:center;color:var(--muted);padding:40px 24px;
  border:1px dashed var(--border-strong);border-radius:var(--r);background:rgba(255,255,255,.012);
}
.stub{text-align:left;line-height:1.6}

/* ---------- toast ---------- */
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);
  background:var(--surface-3);border:1px solid var(--border-strong);
  padding:11px 18px;border-radius:var(--r);font-size:13.5px;box-shadow:var(--sh-2);
  animation:toastin .25s ease}
@keyframes toastin{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}

/* ---------- responsive ---------- */
@media(max-width:760px){
  .shell{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;border-right:none;border-bottom:1px solid var(--border)}
  .side .brand,.side .proj-name{width:100%}
  .side .spacer{display:none}
  .main{padding:18px 16px}
}