/* ============================================================
   INNOVO — design tokens
   ============================================================ */
:root{
  --ink-950:#0A1420; --ink-900:#0F1C2B; --ink-800:#182A3D; --ink-700:#233C53;
  --ink-600:#35506B; --slate-500:#5C7288; --slate-400:#8296A8; --slate-300:#AFC0CD;
  --paper-0:#FFFFFF; --paper-50:#F3F6F8; --paper-100:#E7ECF0; --paper-150:#DCE3E9;
  --line:#DCE3E9; --line-soft:#E7ECF0;
  --teal-800:#0A3B47; --teal-700:#0C4C5B; --teal-600:#106072; --teal-500:#177E93; --teal-100:#DCEEF2; --teal-50:#EEF6F8;
  --gold-700:#7C591C; --gold-600:#9C7325; --gold-500:#AE7B26; --gold-100:#F3E7D0; --gold-50:#FAF3E6;
  --success-700:#1E5C3B; --success-600:#2E7D4F; --success-100:#DCEFE2;
  --warning-700:#7A3E0C; --warning-600:#B25B12; --warning-100:#FBE6D3;
  --critical-700:#7A2424; --critical-600:#B23A3A; --critical-100:#F8DEDE;
  /* dominios de análisis (AI Pods) — paleta categórica validada (OKLCH + separación CVD) */
  --fin-700:#1C5CAB; --fin-600:#2A78D6; --fin-100:#D4E2F2; --fin-50:#F0F4F9;
  --ops-700:#4A3AA7; --ops-600:#4A3AA7; --ops-100:#D9D5F1; --ops-50:#F2F0F9;
  --rsk-700:#B23D6E; --rsk-600:#E87BA4; --rsk-100:#F2D4DF; --rsk-50:#F9F0F4;
  --imp-600:var(--gold-600);
  --bg:var(--paper-50); --surface:var(--paper-0); --surface-sunken:var(--paper-100);
  --text:var(--ink-900); --text-soft:var(--slate-500); --text-faint:var(--slate-400);
  --accent:var(--teal-600); --accent-strong:var(--teal-700); --accent-soft:var(--teal-50); --accent-line:var(--teal-100);
  --shadow-sm:0 1px 2px rgba(10,20,32,.06);
  --shadow-md:0 4px 16px rgba(10,20,32,.08);
  --shadow-lg:0 12px 40px rgba(10,20,32,.14);
  --radius-sm:6px; --radius-md:10px; --radius-lg:16px;
  --font-display:'Fraunces',ui-serif,Georgia,serif;
  --font-body:'Manrope',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0B141F; --surface:#101B29; --surface-sunken:#0D1826;
    --text:#EAF0F4; --text-soft:#9FB3C4; --text-faint:#6F8598;
    --line:#1F3245; --line-soft:#182A3B;
    --accent:#3AA6BC; --accent-strong:#5FC0D4; --accent-soft:#122A32; --accent-line:#1D4753;
    --gold-500:#D6A24E; --gold-100:#3A2C13; --gold-50:#231A0D;
    --success-600:#4CAE79; --success-100:#123321;
    --warning-600:#E08A3C; --warning-100:#3A2510;
    --critical-600:#E1706F; --critical-100:#3A1717;
    --fin-500:#3987E5; --fin-600:#3987E5; --fin-100:#172C45; --fin-50:#0F1D2E;
    --ops-500:#8570F0; --ops-600:#5E32E2; --ops-100:#1E1844; --ops-50:#14102D;
    --rsk-500:#D05D8D; --rsk-600:#D05D8D; --rsk-100:#451728; --rsk-50:#2E0F1B;
    --imp-600:#BE8637;
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0B141F; --surface:#101B29; --surface-sunken:#0D1826;
  --text:#EAF0F4; --text-soft:#9FB3C4; --text-faint:#6F8598;
  --line:#1F3245; --line-soft:#182A3B;
  --accent:#3AA6BC; --accent-strong:#5FC0D4; --accent-soft:#122A32; --accent-line:#1D4753;
  --gold-500:#D6A24E; --gold-100:#3A2C13; --gold-50:#231A0D;
  --success-600:#4CAE79; --success-100:#123321;
  --warning-600:#E08A3C; --warning-100:#3A2510;
  --critical-600:#E1706F; --critical-100:#3A1717;
  --fin-500:#3987E5; --fin-600:#3987E5; --fin-100:#172C45; --fin-50:#0F1D2E;
  --ops-500:#8570F0; --ops-600:#5E32E2; --ops-100:#1E1844; --ops-50:#14102D;
  --rsk-500:#D05D8D; --rsk-600:#D05D8D; --rsk-100:#451728; --rsk-50:#2E0F1B;
  --imp-600:#BE8637;
  color-scheme: dark;
}

*,*::before,*::after{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:14.5px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:600; margin:0; text-wrap:balance; color:var(--text);}
p{margin:0;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
::selection{background:var(--accent-line); color:var(--ink-900);}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px;}
.mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums;}
.tnum{font-variant-numeric:tabular-nums;}

/* scrollbars */
::-webkit-scrollbar{width:10px; height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--slate-300); border-radius:8px; border:2px solid var(--bg);}

/* ============================================================
   App shell
   ============================================================ */
.shell{display:grid; grid-template-columns:248px 1fr; min-height:100vh; transition:grid-template-columns .15s ease;}
/* Menú lateral colapsado: la clase se agrega/quita sobre .shell (ver
   attachRailCollapseHandler en app.js) y se recuerda en localStorage, así que
   al volver a entrar el menú sigue en el estado que se dejó. */
.shell.rail-collapsed{grid-template-columns:72px 1fr;}
.rail{
  background:var(--ink-950); color:#CBD8E2; position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column; padding:22px 14px 16px;
  border-right:1px solid rgba(255,255,255,.06);
}
.rail-brand{display:flex; align-items:center; gap:10px; padding:2px 8px 22px; border-bottom:1px solid rgba(255,255,255,.08); margin-bottom:16px;}
.rail-brand-mark{
  width:32px; height:32px; border-radius:8px; flex:none;
  background:linear-gradient(155deg, var(--teal-500), var(--teal-800));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:16px; color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}
.rail-brand-text{display:flex; flex-direction:column; line-height:1.15; white-space:nowrap; overflow:hidden;}
.rail-brand-text b{font-family:var(--font-display); font-size:16.5px; font-weight:600; color:#fff; letter-spacing:.2px;}
.rail-brand-text span{font-size:9.5px; letter-spacing:1.1px; color:#7C93A6; text-transform:uppercase; margin-top:2px;}
.rail-nav{display:flex; flex-direction:column; gap:2px;}
.rail-section-label{font-size:10px; text-transform:uppercase; letter-spacing:1.2px; color:#5E7688; padding:16px 12px 6px; white-space:nowrap; overflow:hidden;}
.rail-link{
  display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:8px;
  color:#B6C6D3; text-decoration:none; font-size:13.5px; font-weight:600; border:1px solid transparent;
  transition:background .12s ease, color .12s ease; white-space:nowrap; overflow:hidden;
}
.rail-link svg{flex:none; opacity:.85;}
.rail-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.rail-link.active{background:rgba(58,166,188,.16); color:#fff; border-color:rgba(58,166,188,.3);}
.rail-link.active svg{opacity:1; color:var(--teal-500);}
/* Botón "Colapsar menú", fijo al fondo del rail (margin-top:auto lo empuja
   abajo dentro del flex column) — su flecha apunta a la izquierda (colapsar)
   normalmente y se voltea a la derecha (expandir) cuando ya está colapsado. */
.rail-collapse-toggle{
  margin-top:auto; display:flex; align-items:center; gap:10px; width:100%;
  padding:9px 12px; border-radius:8px; border:1px solid transparent; background:transparent;
  color:#8FA3B3; cursor:pointer; font-size:12.5px; font-weight:600; font-family:inherit;
  white-space:nowrap; overflow:hidden;
}
.rail-collapse-toggle:hover{background:rgba(255,255,255,.06); color:#fff;}
.rail-collapse-toggle svg{flex:none; transition:transform .15s ease; transform:rotate(180deg);}
.shell.rail-collapsed .rail-brand{justify-content:center; padding:2px 0 22px;}
.shell.rail-collapsed .rail-brand-text,
.shell.rail-collapsed .rail-section-label,
.shell.rail-collapsed .rail-link span,
.shell.rail-collapsed .rail-collapse-toggle span{display:none;}
.shell.rail-collapsed .rail-link{justify-content:center; padding:9px 0;}
.shell.rail-collapsed .rail-collapse-toggle{justify-content:center; padding:9px 0;}
.shell.rail-collapsed .rail-collapse-toggle svg{transform:rotate(0deg);}

.main{min-width:0; display:flex; flex-direction:column;}
.topbar{
  position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line); padding:14px 32px; display:flex; align-items:center; gap:16px; min-height:30px;
}
.crumbs{display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--text-soft); flex:1; min-width:0;}
.crumbs a{text-decoration:none; color:var(--text-soft); font-weight:600;}
.crumbs a:hover{color:var(--accent);}
.crumbs .sep{color:var(--text-faint);}
.crumbs .cur{color:var(--text); font-weight:700;}
.topbar-actions{display:flex; align-items:center; gap:10px;}

.view{padding:28px 32px 64px; max-width:1320px; width:100%; margin:0 auto;}
.view-head{display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:22px; flex-wrap:wrap;}
.view-eyebrow{display:flex; align-items:center; gap:8px; font-size:11px; font-weight:700; letter-spacing:1.1px; text-transform:uppercase; color:var(--accent); margin-bottom:6px;}
.view-title{font-size:26px; font-weight:600;}
.view-sub{color:var(--text-soft); font-size:14px; margin-top:6px; max-width:640px;}

/* ============================================================
   Primitives: buttons, badges, pills, cards
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border-radius:8px;
  font-size:13px; font-weight:700; border:1px solid var(--line); background:var(--surface); color:var(--text);
  box-shadow:var(--shadow-sm); transition:transform .08s ease, box-shadow .12s ease, background .12s ease; white-space:nowrap;
}
.btn:hover{box-shadow:var(--shadow-md);}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--accent); border-color:var(--accent-strong); color:#fff;}
.btn-primary:hover{background:var(--accent-strong);}
.btn-ghost{background:transparent; border-color:transparent; box-shadow:none;}
.btn-ghost:hover{background:var(--surface-sunken); box-shadow:none;}
.btn-sm{padding:6px 11px; font-size:12px; border-radius:7px;}
.btn svg{flex:none;}

.badge{display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:100px; font-size:11px; font-weight:700; letter-spacing:.2px; white-space:nowrap;}
.badge-dot{width:6px; height:6px; border-radius:50%; flex:none;}
.badge-neutral{background:var(--surface-sunken); color:var(--text-soft); border:1px solid var(--line);}
.badge-accent{background:var(--accent-soft); color:var(--accent-strong); border:1px solid var(--accent-line);}
.badge-gold{background:var(--gold-50); color:var(--gold-700); border:1px solid var(--gold-100);}
.badge-success{background:var(--success-100); color:var(--success-700); border:1px solid transparent;}
.badge-warning{background:var(--warning-100); color:var(--warning-700); border:1px solid transparent;}
.badge-critical{background:var(--critical-100); color:var(--critical-700); border:1px solid transparent;}
.badge-fin{background:var(--fin-50); color:var(--fin-700); border:1px solid var(--fin-100);}
.badge-ops{background:var(--ops-50); color:var(--ops-700); border:1px solid var(--ops-100);}
.badge-rsk{background:var(--rsk-50); color:var(--rsk-700); border:1px solid var(--rsk-100);}
:root[data-theme="dark"] .badge-success, :root:not([data-theme="light"]) .badge-success{color:var(--success-600);}
:root[data-theme="dark"] .badge-warning, :root:not([data-theme="light"]) .badge-warning{color:var(--warning-600);}
:root[data-theme="dark"] .badge-critical, :root:not([data-theme="light"]) .badge-critical{color:var(--critical-600);}
:root[data-theme="dark"] .badge-gold, :root:not([data-theme="light"]) .badge-gold{color:var(--gold-500);}
:root[data-theme="dark"] .badge-fin, :root:not([data-theme="light"]) .badge-fin{color:var(--fin-500);}
:root[data-theme="dark"] .badge-ops, :root:not([data-theme="light"]) .badge-ops{color:var(--ops-500);}
:root[data-theme="dark"] .badge-rsk, :root:not([data-theme="light"]) .badge-rsk{color:var(--rsk-500);}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .badge-success{color:var(--success-600);}
  :root:not([data-theme="light"]) .badge-warning{color:var(--warning-600);}
  :root:not([data-theme="light"]) .badge-critical{color:var(--critical-600);}
  :root:not([data-theme="light"]) .badge-gold{color:var(--gold-500);}
  :root:not([data-theme="light"]) .badge-fin{color:var(--fin-500);}
  :root:not([data-theme="light"]) .badge-ops{color:var(--ops-500);}
  :root:not([data-theme="light"]) .badge-rsk{color:var(--rsk-500);}
}

.tag-sim{display:inline-flex; align-items:center; gap:6px; padding:3px 9px 3px 7px; border-radius:100px; font-size:10.5px; font-weight:700; background:var(--gold-50); color:var(--gold-700); border:1px dashed var(--gold-100);}

.has-tip{position:relative; cursor:help; text-decoration:underline dotted; text-underline-offset:3px; text-decoration-color:currentColor;}
.has-tip::after{
  content:attr(data-tip);
  position:absolute; left:50%; bottom:calc(100% + 11px); transform:translateX(-50%) translateY(4px);
  background:var(--ink-950); color:#F4F8FA; font-size:11.5px; font-weight:500; letter-spacing:normal; line-height:1.45;
  padding:9px 11px; border-radius:8px; white-space:normal; width:max-content; max-width:230px;
  box-shadow:var(--shadow-lg); opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .14s ease, transform .14s ease; z-index:60; text-align:left;
}
.has-tip::before{
  content:''; position:absolute; left:50%; bottom:calc(100% + 5px); transform:translateX(-50%) translateY(4px);
  border:5px solid transparent; border-top-color:var(--ink-950); opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .14s ease, transform .14s ease; z-index:60;
}
.has-tip:hover::after, .has-tip:focus-visible::after,
.has-tip:hover::before, .has-tip:focus-visible::before{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
}

.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);}
.card-pad{padding:20px 22px;}
.card-head{display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:14px;}
.card-title{font-size:15px; font-weight:800; font-family:var(--font-body);}
.card-title-lg{font-size:17px; font-weight:700; font-family:var(--font-display);}
.card-desc{font-size:12.5px; color:var(--text-soft); margin-top:3px;}

.grid{display:grid; gap:16px;}
.g-2{grid-template-columns:repeat(2,1fr);}
.g-3{grid-template-columns:repeat(3,1fr);}
.g-4{grid-template-columns:repeat(4,1fr);}
.g-5{grid-template-columns:repeat(5,1fr);}
.g-12{grid-template-columns:repeat(12,1fr);}
@media (max-width:1080px){ .g-4{grid-template-columns:repeat(2,1fr);} .g-5{grid-template-columns:repeat(2,1fr);} .g-3{grid-template-columns:repeat(2,1fr);} }

.kpi{padding:18px 20px;}
.kpi-label{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.7px; color:var(--text-soft); display:flex; align-items:center; gap:6px; justify-content:space-between;}
.kpi-value{font-family:var(--font-display); font-size:30px; font-weight:600; margin-top:8px; color:var(--text);}
.kpi-value .unit{font-size:15px; color:var(--text-soft); font-weight:500; margin-left:3px;}
.kpi-delta{font-size:11.5px; margin-top:7px; color:var(--text-soft); display:flex; align-items:center; gap:5px;}

.section{margin-top:30px;}
.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:14px;}
.section-title{font-size:17px; font-weight:700; font-family:var(--font-display);}
.section-note{font-size:12px; color:var(--text-faint);}

.divider{height:1px; background:var(--line); border:none; margin:20px 0;}

/* progress bar */
.bar-track{height:8px; border-radius:100px; background:var(--surface-sunken); overflow:hidden; position:relative;}
.bar-fill{height:100%; border-radius:100px; background:var(--accent);}
.bar-row{display:flex; align-items:center; gap:12px;}
.bar-row .bar-track{flex:1;}
.bar-row .bar-num{font-size:12.5px; font-weight:700; width:40px; text-align:right; font-family:var(--font-mono);}

/* compare bars (planeado vs ejecutado) */
.cmp{display:flex; flex-direction:column; gap:5px;}
.cmp-track{position:relative; height:22px; background:var(--surface-sunken); border-radius:6px; overflow:hidden;}
.cmp-seg{position:absolute; top:0; bottom:0; left:0; border-radius:6px;}
.cmp-plan{background:repeating-linear-gradient(135deg, var(--slate-300), var(--slate-300) 5px, transparent 5px, transparent 9px); opacity:.6; z-index:1;}
.cmp-exec{background:var(--accent); z-index:2;}
.cmp-legend{display:flex; gap:14px; font-size:11px; color:var(--text-soft);}
.cmp-legend span{display:flex; align-items:center; gap:5px;}
.cmp-legend i{width:10px; height:10px; border-radius:3px; display:inline-block;}

/* tables */
.tbl-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-md);}
table.tbl{width:100%; border-collapse:collapse; font-size:13px; min-width:560px;}
table.tbl th{text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.6px; color:var(--text-soft); font-weight:700; padding:11px 14px; background:var(--surface-sunken); border-bottom:1px solid var(--line); white-space:nowrap;}
table.tbl td{padding:12px 14px; border-bottom:1px solid var(--line-soft); vertical-align:top;}
table.tbl tr:last-child td{border-bottom:none;}
table.tbl tr:hover td{background:var(--surface-sunken);}

/* tabs (sub-nav within a project) */
.tabbar{display:flex; gap:2px; border-bottom:1px solid var(--line); overflow-x:auto; padding:0 32px;}
.tab{padding:12px 14px; font-size:13px; font-weight:700; color:var(--text-soft); text-decoration:none; border-bottom:2px solid transparent; white-space:nowrap; display:flex; align-items:center; gap:7px;}
.tab:hover{color:var(--text);}
.tab.active{color:var(--accent-strong); border-bottom-color:var(--accent);}
.tab-pending-badge{display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--gold-600, #b7791f); color:#fff; font-size:10.5px; font-weight:800; line-height:1;}

/* project header */
.proj-head{padding:22px 32px 0;}
.proj-title-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.proj-meta{display:flex; flex-wrap:wrap; gap:16px; margin-top:10px; font-size:12.5px; color:var(--text-soft);}
.proj-meta b{color:var(--text); font-weight:700;}
.proj-meta .mi{display:flex; align-items:center; gap:6px;}

/* project cards (Proyectos) */
.pcard{display:flex; flex-direction:column; gap:14px; padding:22px; position:relative; overflow:hidden;}
.pcard.real{border-color:var(--accent-line);}
.pcard-strip{position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--slate-300);}
.pcard.real .pcard-strip{background:var(--accent);}
.pcard-top{display:flex; align-items:flex-start; justify-content:space-between; gap:12px;}
.pcard-name{font-family:var(--font-display); font-size:18px; font-weight:600;}
.pcard-loc{font-size:12px; color:var(--text-soft); margin-top:4px; display:flex; align-items:center; gap:5px;}
.pcard-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding-top:6px;}
.pcard-stat b{display:block; font-family:var(--font-mono); font-size:15px; font-weight:600;}
.pcard-stat span{font-size:10.5px; color:var(--text-soft); text-transform:uppercase; letter-spacing:.4px;}
.pcard-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:2px;}

/* insight card */
.insight-card{border-left:3px solid var(--accent);}
.insight-flow{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:6px;}
.insight-step{background:var(--surface-sunken); border-radius:var(--radius-md); padding:14px 16px;}
.insight-step h4{font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--accent-strong); font-weight:800; margin-bottom:7px;}
.insight-step p{font-size:12.5px; color:var(--text); line-height:1.55;}
@media (max-width:1080px){.insight-flow{grid-template-columns:1fr 1fr;}}

/* evidence trail */
.evtrail{display:flex; flex-direction:column;}
.evnode{display:flex; gap:14px; position:relative; padding-bottom:22px;}
.evnode:last-child{padding-bottom:0;}
.evnode .line{position:absolute; left:13px; top:26px; bottom:0; width:1px; background:var(--line);}
.evnode:last-child .line{display:none;}
.evdot{width:27px; height:27px; border-radius:50%; background:var(--accent-soft); border:1px solid var(--accent-line); color:var(--accent-strong); display:flex; align-items:center; justify-content:center; flex:none; font-size:12px; font-weight:800; z-index:1;}
.evbody{flex:1; padding-top:2px;}
.evbody b{font-size:12.5px; display:block; margin-bottom:3px;}
.evbody p{font-size:12.5px; color:var(--text-soft);}
.evbody .src{display:inline-flex; align-items:center; gap:6px; margin-top:6px; font-size:11.5px; background:var(--surface-sunken); padding:4px 9px; border-radius:6px; font-family:var(--font-mono);}

/* risk matrix / list */
.risk-row{display:grid; grid-template-columns:120px 1fr 1fr 90px; gap:16px; padding:14px 0; border-bottom:1px solid var(--line-soft); align-items:start;}
.risk-row:last-child{border-bottom:none;}
.risk-row b{font-size:13px;}
.risk-row p{font-size:12px; color:var(--text-soft); margin-top:3px;}
@media (max-width:900px){.risk-row{grid-template-columns:1fr; gap:6px;}}

/* pods */
.pod{padding:18px; display:flex; flex-direction:column; gap:10px; overflow:hidden;}
.pod-icon{width:36px; height:36px; border-radius:9px; background:var(--accent-soft); border:1px solid var(--accent-line); display:flex; align-items:center; justify-content:center; color:var(--accent-strong);}
.pod-icon-fin{background:var(--fin-50); border-color:var(--fin-100); color:var(--fin-600);}
.pod-icon-ops{background:var(--ops-50); border-color:var(--ops-100); color:var(--ops-600);}
.pod-icon-imp{background:var(--gold-50); border-color:var(--gold-100); color:var(--imp-600);}
.pod-icon-rsk{background:var(--rsk-50); border-color:var(--rsk-100); color:var(--rsk-600);}
.pod-top{height:3px; border-radius:3px 3px 0 0; margin:-18px -18px 12px; background:var(--accent-strong);}
.pod-top-fin{background:var(--fin-600);}
.pod-top-ops{background:var(--ops-600);}
.pod-top-imp{background:var(--imp-600);}
.pod-top-rsk{background:var(--rsk-600);}

/* chat / assistant */
.chat-shell{display:grid; grid-template-columns:260px 1fr; gap:20px; align-items:start;}
@media (max-width:980px){.chat-shell{grid-template-columns:1fr;}}
.chat-suggest{display:flex; flex-direction:column; gap:8px;}
.suggest-btn{text-align:left; padding:10px 12px; border-radius:9px; border:1px solid var(--line); background:var(--surface); font-size:12.5px; font-weight:600; color:var(--text); line-height:1.4;}
.suggest-btn:hover{border-color:var(--accent-line); background:var(--accent-soft);}
.chat-window{display:flex; flex-direction:column; height:560px;}
.chat-log{flex:1; overflow-y:auto; padding:22px; display:flex; flex-direction:column; gap:16px;}
.msg{display:flex; gap:11px; max-width:78%;}
.msg.user{align-self:flex-end; flex-direction:row-reverse;}
.msg-avatar{width:26px; height:26px; border-radius:7px; flex:none; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800;}
.msg.ai .msg-avatar{background:var(--accent); color:#fff;}
.msg.user .msg-avatar{background:var(--surface-sunken); color:var(--text-soft); border:1px solid var(--line);}
.msg-bubble{background:var(--surface-sunken); border-radius:12px; padding:12px 14px; font-size:13px; line-height:1.6;}
.msg.user .msg-bubble{background:var(--accent); color:#fff;}
.msg-bubble p+p{margin-top:8px;}
.msg-bubble ul{margin:6px 0 0; padding-left:18px;}
.msg-tag{margin-top:8px;}
.chat-input{display:flex; gap:10px; padding:14px 16px; border-top:1px solid var(--line);}
.chat-input input{flex:1; border:1px solid var(--line); border-radius:9px; padding:10px 13px; font-size:13px; background:var(--bg); color:var(--text); font-family:inherit;}
.chat-input input:focus-visible{outline:2px solid var(--accent); outline-offset:0;}
.typing{display:flex; gap:4px; padding:4px 2px;}
.typing i{width:6px; height:6px; border-radius:50%; background:var(--text-faint); animation:tbounce 1.1s infinite ease-in-out;}
.typing i:nth-child(2){animation-delay:.15s;} .typing i:nth-child(3){animation-delay:.3s;}
@keyframes tbounce{0%,60%,100%{transform:translateY(0); opacity:.5;} 30%{transform:translateY(-4px); opacity:1;}}
@media (prefers-reduced-motion:reduce){ .typing i{animation:none;} }

/* empty / unavailable state */
.unavail{display:flex; align-items:center; gap:10px; padding:14px 16px; border-radius:var(--radius-md); background:var(--surface-sunken); border:1px dashed var(--line); color:var(--text-soft); font-size:12.5px;}

/* callout */
.callout{border-radius:var(--radius-md); padding:14px 16px; font-size:12.5px; display:flex; gap:10px; align-items:flex-start; line-height:1.55;}
.callout-sim{background:var(--gold-50); border:1px solid var(--gold-100); color:var(--gold-700);}
.callout-info{background:var(--accent-soft); border:1px solid var(--accent-line); color:var(--accent-strong);}
.callout-critical{background:var(--critical-100); border:1px solid var(--critical-100); color:var(--critical-700);}
:root[data-theme="dark"] .callout-critical, :root:not([data-theme="light"]) .callout-critical{color:var(--critical-600);}

/* orchestrator diagram */
.orc-wrap{display:flex; flex-direction:column; align-items:center; gap:0; padding:20px 10px;}
.orc-inputs{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; width:100%; max-width:840px;}
.orc-node{border:1px solid var(--line); background:var(--surface); border-radius:var(--radius-md); padding:14px; text-align:center;}
.orc-arrow{color:var(--text-faint); margin:10px 0;}
.orc-core{width:220px; padding:18px; text-align:center; border-radius:var(--radius-lg); background:var(--ink-950); color:#fff; box-shadow:var(--shadow-lg);}
.orc-core b{font-family:var(--font-display); font-size:15px;}
.orc-core span{font-size:11px; color:#9FB3C4; display:block; margin-top:4px;}
.orc-output{margin-top:10px; width:280px; padding:16px; text-align:center; border-radius:var(--radius-md); background:var(--accent-soft); border:1px solid var(--accent-line); color:var(--accent-strong); font-weight:700; font-size:13px;}

footer.pagefoot{padding:26px 32px 40px; color:var(--text-faint); font-size:11.5px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;}

/* ============================================================
   INNOVO APP — estilos nuevos (login, carga de archivos, admin)
   ============================================================ */
.login-shell{min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--bg); padding:20px;}
.login-card{width:100%; max-width:400px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:36px 32px;}
.login-logo{display:flex; align-items:center; gap:10px; margin-bottom:22px;}
.login-logo .mark{width:36px; height:36px; border-radius:9px; background:linear-gradient(155deg, var(--teal-500), var(--teal-800)); display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--font-display); font-weight:700; font-size:16px;}
.login-logo b{font-family:var(--font-display); font-size:19px; color:var(--text);}
.login-logo span{display:block; font-size:10.5px; letter-spacing:.6px; text-transform:uppercase; color:var(--text-faint);}
.field{margin-bottom:16px;}
.field label{display:block; font-size:12.5px; font-weight:700; color:var(--text-soft); margin-bottom:6px;}
.field input, .field select, .field textarea{
  width:100%; padding:10px 12px; border-radius:var(--radius-sm); border:1px solid var(--line);
  background:var(--surface); color:var(--text); font-family:var(--font-body); font-size:13.5px;
}
.field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent);}
.form-error{background:var(--critical-100); color:var(--critical-700); border-radius:var(--radius-sm); padding:9px 12px; font-size:12.5px; margin-bottom:14px;}
.login-hint{margin-top:18px; padding-top:16px; border-top:1px solid var(--line); font-size:11.5px; color:var(--text-faint); line-height:1.6;}

/* dropzone de carga de archivos */
.dropzone{
  border:2px dashed var(--line); border-radius:var(--radius-md); padding:28px; text-align:center;
  color:var(--text-soft); cursor:pointer; transition:border-color .15s ease, background .15s ease;
}
.dropzone.dragover{border-color:var(--accent); background:var(--accent-soft);}
.dropzone input{display:none;}
.file-row{display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius-md); margin-top:10px;}
.file-row .fi-icon{width:36px; height:36px; border-radius:8px; background:var(--surface-sunken); display:flex; align-items:center; justify-content:center; flex:none; color:var(--text-soft);}
.file-row .fi-body{flex:1; min-width:0;}
.file-row .fi-name{font-weight:700; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.file-row .fi-meta{font-size:11.5px; color:var(--text-faint); margin-top:2px;}
.file-row .fi-summary{font-size:12px; color:var(--text-soft); margin-top:4px; max-height:2.8em; overflow:hidden;}
.file-status{font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:100px; flex:none;}
.file-status-ready{background:var(--success-100); color:var(--success-700);}
.file-status-processing{background:var(--warning-100); color:var(--warning-700);}
.file-status-error{background:var(--critical-100); color:var(--critical-700);}

/* tabla de administración de usuarios */
.admin-table{width:100%; border-collapse:collapse; font-size:13px;}
.admin-table th{text-align:left; padding:10px 12px; font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--text-faint); border-bottom:1px solid var(--line);}
.admin-table td{padding:11px 12px; border-bottom:1px solid var(--line-soft); vertical-align:middle;}
.admin-table tr:hover td{background:var(--surface-sunken);}
.role-pill{font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:100px; background:var(--surface-sunken); color:var(--text-soft); white-space:nowrap;}
.role-pill-SUPER_ADMIN{background:var(--ink-950); color:#fff;}
.role-pill-PROJECT_MANAGER{background:var(--fin-50); color:var(--fin-700);}
.role-pill-ECONOMIC_BUYER{background:var(--gold-50); color:var(--gold-700);}
.role-pill-EJECUTOR{background:var(--rsk-50); color:var(--rsk-700);}

/* modal simple */
.modal-backdrop{position:fixed; inset:0; background:rgba(10,20,32,.55); display:flex; align-items:center; justify-content:center; z-index:100; padding:20px;}
.modal{background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); width:100%; max-width:440px; padding:26px 26px 20px; max-height:90vh; overflow-y:auto;}
.modal h3{margin-bottom:16px;}
.modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:20px;}

/* toasts */
#toast-stack{position:fixed; top:18px; right:18px; z-index:200; display:flex; flex-direction:column; gap:8px;}
.toast{background:var(--ink-950); color:#fff; padding:11px 16px; border-radius:var(--radius-md); font-size:13px; box-shadow:var(--shadow-lg); max-width:340px; display:flex; align-items:flex-start; gap:10px;}
.toast-text{flex:1; line-height:1.45;}
/* el botón de cerrar solo existe en los toasts de error (ver toast() en utils.js:
   son los únicos que no desaparecen solos) */
.toast-close{flex:none; background:transparent; border:none; padding:2px; margin-top:1px; color:inherit; opacity:.75; cursor:pointer; line-height:0;}
.toast-close:hover{opacity:1;}
.toast-error{background:var(--critical-700);}
.toast-success{background:var(--success-700);}

.topbar-user{display:flex; align-items:center; gap:10px; font-size:12.5px;}
.topbar-user .tu-name{font-weight:700; color:var(--text);}
.topbar-user .tu-role{color:var(--text-faint);}

.loading-spin{display:inline-block; width:16px; height:16px; border:2px solid var(--line); border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* botón de exportar — fijo en el header del proyecto (fuera de las pestañas) */
.export-split{display:flex; position:relative; flex:none;}
.export-split-main{border-top-right-radius:0; border-bottom-right-radius:0;}
.export-split-toggle{border-top-left-radius:0; border-bottom-left-radius:0; border-left:1px solid rgba(255,255,255,.28); padding-left:10px; padding-right:10px;}
.export-dropdown{position:absolute; top:calc(100% + 8px); right:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); box-shadow:var(--shadow-lg); min-width:190px; padding:6px; z-index:60;}
.export-dropdown-item{display:flex; align-items:center; gap:9px; width:100%; text-align:left; padding:9px 10px; font-size:13px; font-weight:600; color:var(--text); background:none; border:none; border-radius:8px; cursor:pointer; font-family:inherit;}
.export-dropdown-item:hover{background:var(--surface-sunken);}

/* pestaña "Pregúntale a Innovo" — acento visual para distinguirla como acción */
.tab.tab-accent{color:var(--accent-strong); background:var(--accent-soft); border-radius:8px 8px 0 0;}
.tab.tab-accent:hover{color:var(--accent-strong);}
.tab.tab-accent.active{border-bottom-color:var(--accent);}

/* botón flotante — acceso rápido a "Pregúntale a Innovo" desde cualquier pestaña del proyecto */
.fab{position:fixed; right:28px; bottom:28px; width:56px; height:56px; border-radius:50%; background:var(--accent); color:#fff; border:none; box-shadow:var(--shadow-lg); display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:90; transition:transform .15s ease, background .15s ease;}
.fab:hover{background:var(--accent-strong); transform:translateY(-2px);}
.fab-modal-backdrop{position:fixed; inset:0; z-index:100; background:rgba(10,20,32,.35);}
.fab-modal{position:fixed; right:28px; bottom:96px; width:min(400px, calc(100vw - 40px)); height:min(560px, calc(100vh - 150px)); background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); display:flex; flex-direction:column; overflow:hidden; z-index:101;}
.fab-modal-head{display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--line); flex:none;}
.fab-modal-title{display:flex; align-items:center; gap:8px; font-weight:800; font-size:13.5px; color:var(--text);}
.fab-modal-close{background:none; border:none; color:var(--text-soft); cursor:pointer; padding:4px; display:flex; border-radius:6px;}
.fab-modal-close:hover{background:var(--surface-sunken); color:var(--text);}
.fab-modal .chat-log{padding:16px;}
.fab-modal .chat-input{padding:12px 14px;}
@media (max-width: 560px){
  .fab{right:18px; bottom:18px;}
  .fab-modal{right:12px; left:12px; width:auto; bottom:88px;}
}

/* data viz — dashboards de Inicio */
.chart-card-head{margin-bottom:16px;}
.chart-card-title{font-size:13.5px; font-weight:700; color:var(--text);}
.chart-card-sub{font-size:11.5px; color:var(--text-faint); margin-top:2px;}
.chart-card .bar-row .bar-num{width:auto; min-width:40px;}

.status-bar{display:flex; gap:2px; height:14px; border-radius:100px; overflow:hidden; background:var(--surface-sunken);}
.status-seg{height:100%;}
.status-seg.critical{background:var(--critical-600);}
.status-seg.warning{background:var(--warning-600);}
.status-seg.success{background:var(--success-600);}
.status-seg.neutral{background:var(--text-faint);}
.status-legend{display:flex; flex-wrap:wrap; gap:16px; margin-top:14px;}
.status-legend-item{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-soft);}
.status-legend-item svg{flex:none;}
.status-legend-item.critical svg{color:var(--critical-600);}
.status-legend-item.warning svg{color:var(--warning-600);}
.status-legend-item.success svg{color:var(--success-600);}
.status-legend-item.neutral svg{color:var(--text-faint);}