/* ============================================================
   KANKURUÁ × UARIV · SVR — Tema institucional (colores patrios)
   Azul #003893 (primario) · Amarillo #FCD116 (acento) · Rojo #CE1126 (énfasis)
   ============================================================ */
:root {
  --bg:#f6f7f9; --bg2:#eef1f5;
  --ink:#14213d; --soft:#3c4a63; --muted:#76839b;
  --azul:#003893; --azul2:#1a54b0;
  --amarillo:#FCD116; --rojo:#CE1126;
  --glass:rgba(255,255,255,.6); --glass-border:rgba(255,255,255,.7);
  --line:rgba(20,33,61,.10);
  --shadow:0 10px 34px rgba(20,33,61,.08), inset 0 1px 0 rgba(255,255,255,.7);
  --radius:18px;
  --green:#2e8b57; --amber:#d98324; --red:#ce1126;
  --font:'Segoe UI',system-ui,-apple-system,sans-serif;
  --maxw:1180px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:var(--font); color:var(--ink); line-height:1.6;
  background:radial-gradient(900px 500px at 12% -6%, rgba(0,56,147,.07), transparent 60%),
    linear-gradient(160deg,var(--bg),var(--bg2)); min-height:100vh; -webkit-font-smoothing:antialiased; }
a { color:var(--azul); text-decoration:none; }
a:hover { text-decoration:underline; }
.glass { background:var(--glass); backdrop-filter:blur(20px) saturate(1.35); -webkit-backdrop-filter:blur(20px) saturate(1.35);
  border:1px solid var(--glass-border); border-radius:var(--radius); box-shadow:var(--shadow); }

.shell { display:flex; min-height:100vh; }
.side { width:246px; flex:0 0 246px; padding:24px 18px; margin:18px 0 18px 18px; align-self:flex-start; position:sticky; top:18px; height:calc(100vh - 36px);
  display:flex; flex-direction:column; background:var(--glass); backdrop-filter:blur(20px) saturate(1.35); -webkit-backdrop-filter:blur(20px) saturate(1.35);
  border:1px solid var(--glass-border); border-radius:var(--radius); box-shadow:var(--shadow); }
.brand { display:flex; gap:12px; align-items:center; margin-bottom:26px; }
.brand-mark { width:40px; height:46px; border-radius:10px; background:linear-gradient(180deg,var(--azul),var(--azul2)); color:#fff; font-weight:800;
  display:grid; place-items:center; font-size:20px; font-family:Georgia,serif; box-shadow:0 6px 16px rgba(0,56,147,.3); position:relative; overflow:hidden; }
.brand-mark::after { content:""; position:absolute; left:0; right:0; bottom:0; height:4px; background:linear-gradient(90deg,var(--amarillo) 0 50%,var(--rojo) 50% 100%); }
.brand-name strong { display:block; font-size:17px; letter-spacing:-.01em; color:var(--azul); }
.brand-name span { font-size:10px; letter-spacing:.18em; color:var(--muted); text-transform:uppercase; }
.nav { display:flex; flex-direction:column; gap:3px; }
.nav a { color:var(--soft); text-decoration:none; padding:10px 13px; border-radius:12px; font-size:14px; font-weight:500; transition:background .2s,color .2s,transform .2s; }
.nav a:hover { background:rgba(255,255,255,.6); color:var(--azul); transform:translateX(2px); text-decoration:none; }
.side-foot { margin-top:auto; }
.who { padding:12px 14px; border-radius:14px; margin-bottom:10px; background:rgba(255,255,255,.55); border:1px solid var(--glass-border); }
.who-name { font-weight:600; font-size:14px; color:var(--ink); }
.who-role { color:var(--azul); font-size:11px; text-transform:uppercase; letter-spacing:.5px; font-weight:600; }
.flagbar { display:flex; height:6px; border-radius:6px; overflow:hidden; margin-top:6px; }
.flagbar i { flex:1; } .flagbar .y { background:var(--amarillo); } .flagbar .b { background:var(--azul); } .flagbar .r { background:var(--rojo); }

.content { flex:1; min-width:0; padding:30px clamp(16px,4vw,56px) 60px; max-width:var(--maxw); }
.topbar { margin-bottom:22px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.crumbs { display:flex; align-items:center; gap:8px; flex-wrap:wrap; color:var(--muted); font-size:12px; }
.crumbs a { color:var(--muted); } .crumbs a:hover { color:var(--azul); } .crumbs .sep { color:var(--line); } .crumbs .current { color:var(--soft); }

h1 { font-size:clamp(28px,4.5vw,46px); letter-spacing:-.02em; line-height:1.05; margin:0 0 10px; font-weight:700; color:var(--azul); }
h2 { font-size:18px; font-weight:650; margin:0 0 14px; color:var(--ink); }
h3 { font-size:14px; font-weight:600; margin:0 0 6px; color:var(--ink); }
.sub { color:var(--soft); margin:0 0 26px; max-width:720px; }

.btn { display:inline-flex; align-items:center; gap:7px; padding:11px 18px; border-radius:12px; font-weight:600; font-size:14px;
  border:1px solid transparent; cursor:pointer; transition:transform .18s,box-shadow .18s; }
.btn.solid { background:linear-gradient(135deg,var(--azul),var(--azul2)); color:#fff; box-shadow:0 8px 20px rgba(0,56,147,.22); }
.btn.solid:hover { transform:translateY(-2px); text-decoration:none; }
.btn.ghost { background:rgba(255,255,255,.5); border-color:var(--line); color:var(--soft); }
.btn.ghost:hover { color:var(--ink); transform:translateY(-2px); text-decoration:none; }
.btn.flag { background:linear-gradient(90deg,var(--amarillo) 0 33%,var(--azul) 33% 66%,var(--rojo) 66% 100%); color:#fff; font-weight:800; }

.grid { display:grid; gap:16px; }
.grid.cards { grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); }
.grid.cols-3 { grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
.card { border-radius:var(--radius); padding:20px; background:var(--glass); backdrop-filter:blur(20px) saturate(1.35); -webkit-backdrop-filter:blur(20px) saturate(1.35);
  border:1px solid var(--glass-border); box-shadow:var(--shadow); transition:transform .22s ease,box-shadow .22s ease; }
a.card:hover { transform:translateY(-3px); text-decoration:none; }
.card .lbl { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.14em; }
.card .num { font-size:30px; font-weight:700; letter-spacing:-.02em; color:var(--azul); line-height:1; }

.badge { display:inline-flex; align-items:center; gap:6px; font-size:10px; font-weight:700; padding:3px 10px; border-radius:20px; text-transform:uppercase; letter-spacing:.4px; }
.badge.ALTA, .badge.ALTO { background:rgba(206,17,38,.10); color:var(--rojo); }
.badge.MEDIA, .badge.MEDIO { background:rgba(217,131,36,.14); color:var(--amber); }
.badge.BAJA, .badge.BAJO { background:rgba(46,139,87,.13); color:var(--green); }
.badge.INFO { background:rgba(0,56,147,.08); color:var(--azul); }
.badge.ACTIVA { background:rgba(46,139,87,.13); color:var(--green); }
.dot { width:9px; height:9px; border-radius:50%; display:inline-block; }
.dot.up { background:var(--green); } .dot.down { background:var(--red); } .dot.flat { background:var(--muted); }
.tag { font-size:10px; font-weight:700; padding:3px 9px; border-radius:7px; background:rgba(0,56,147,.07); color:var(--azul); letter-spacing:.4px; }
.muted { color:var(--muted); }
.row { display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
.table { width:100%; border-collapse:collapse; }
.table th, .table td { text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); }
.table th { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.6px; }

.hero { padding:20px 0 6px; }
.kicker { font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--azul); font-weight:700; margin-bottom:14px; }
.hero h1 { font-size:clamp(34px,6vw,56px); max-width:820px; }
.hero h1 .accent { color:var(--rojo); }
.hero .lede { color:var(--soft); font-size:clamp(16px,2vw,19px); max-width:680px; margin-top:16px; }
.demo-note { background:rgba(252,209,22,.10); border:1px dashed rgba(206,17,38,.4); color:var(--soft); border-radius:14px; padding:14px 18px; font-size:13px; margin-bottom:24px; }

/* Grafo SVR */
.org-tree { padding:8px 0 26px; }
.org-cols { display:flex; gap:20px; flex-wrap:wrap; align-items:flex-start; justify-content:center; }
.org-col { flex:1 1 220px; max-width:280px; min-width:200px; }
.node { display:block; text-align:left; width:100%; }
.node.area { border-radius:16px; padding:14px 16px; background:var(--glass); backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid var(--glass-border); box-shadow:var(--shadow); border-left:4px solid var(--accent,var(--azul)); }
.node.area .t { font-weight:700; font-size:14px; color:var(--ink); display:block; }
.node.area .r { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.14em; display:block; margin-top:4px; }
.node.area .o { color:var(--soft); font-size:12px; display:block; margin-top:8px; }
.org-cargos { display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.node.cargo { border-radius:11px; padding:9px 12px; background:rgba(255,255,255,.55); border:1px solid var(--line); text-decoration:none; color:inherit; transition:border-color .16s,transform .16s; }
.node.cargo:hover { border-color:var(--azul); transform:translateX(3px); text-decoration:none; }
.node.cargo .t { font-size:13px; font-weight:600; display:block; }
.node.cargo .r { font-size:9px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); display:block; }

.kpi-strip { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:22px; }
.kpi-mini { flex:1 1 150px; background:var(--glass); backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid var(--glass-border); border-radius:16px; padding:14px 16px; box-shadow:var(--shadow); }
.kpi-mini .lbl { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.14em; }
.kpi-mini b { font-size:26px; font-weight:700; letter-spacing:-.02em; display:block; margin-top:2px; color:var(--azul); }
.dash-panels { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:22px; }
.trend-count { display:flex; gap:18px; flex-wrap:wrap; margin-top:8px; }
.tc { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--soft); }
.tc b { font-size:20px; } .tc.up{color:var(--green);} .tc.down{color:var(--red);} .tc.flat{color:var(--muted);}
.divrow { border-radius:18px; padding:18px 20px; margin-bottom:14px; }
.divrow-head { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:12px; }
.divrow-name b { font-size:16px; color:var(--ink); }
.divrow-kpis { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.kpi-cell { background:rgba(255,255,255,.45); border:1px solid var(--line); border-radius:12px; padding:10px 12px; }
.kpi-cell .lbl { color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.12em; display:block; }
.kpi-cell .val { font-size:20px; font-weight:650; color:var(--ink); display:flex; align-items:center; gap:6px; margin-top:2px; }

.login-wrap { max-width:460px; margin:60px auto; }
.login-card { padding:30px; background:var(--glass); backdrop-filter:blur(20px) saturate(1.35); -webkit-backdrop-filter:blur(20px) saturate(1.35); border:1px solid var(--glass-border); box-shadow:var(--shadow); }
.field { margin-bottom:15px; }
.field label { display:block; color:var(--muted); font-size:11px; margin-bottom:6px; text-transform:uppercase; letter-spacing:.5px; }
.field input { width:100%; padding:11px 13px; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.6); color:var(--ink); font-size:14px; }
.field input:focus { outline:none; border-color:var(--azul); }
.demo-logins { margin-top:20px; }
.demo-logins a { display:flex; justify-content:space-between; padding:10px 14px; border-radius:12px; background:rgba(255,255,255,.5); border:1px solid var(--line); margin-bottom:8px; }
.demo-logins a:hover { border-color:var(--azul); text-decoration:none; }
.demo-logins .r { color:var(--azul); font-size:10px; font-weight:700; letter-spacing:.3px; }

/* preloader + cursor */
#preloader { position:fixed; inset:0; z-index:100; background:var(--bg); display:flex; align-items:center; justify-content:center;
  animation:preOut 1s ease .9s forwards; pointer-events:none; }
.pre-bar { width:160px; height:5px; border-radius:3px; overflow:hidden; display:flex; transform-origin:left; animation:preBar .8s ease .1s both; }
.pre-bar i { flex:1; } .pre-bar i:nth-child(1){background:var(--amarillo);} .pre-bar i:nth-child(2){background:var(--azul);} .pre-bar i:nth-child(3){background:var(--rojo);}
@keyframes preBar { from{transform:scaleX(0);} to{transform:scaleX(1);} }
@keyframes preOut { to{opacity:0; visibility:hidden;} }
@media (prefers-reduced-motion:reduce){ #preloader{display:none;} }
.reveal { opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none;} }

@media (max-width:900px){
  .shell { flex-direction:column; }
  .side { width:100%; flex:none; height:auto; position:static; margin:12px; }
  .nav { flex-direction:row; flex-wrap:wrap; }
  .side-foot { margin-left:auto; }
  .content { padding:20px 14px 50px; }
  .dash-panels { grid-template-columns:1fr; }
}