/* ===== theme.css — piel Praxiom sobre Bootstrap 5 =====
   Consume los tokens de tokens.css (misma paleta que beststrategist.com).
   Regla: aquí NO se definen colores nuevos; todo sale de variables (o
   color-mix sobre ellas). Oscuro por defecto; body.light activa el claro. */

/* ── Variables de puente y de gráficas ─────────────────────────── */
body{
  /* chrome de las gráficas (leídas por app.js: chartText/chartMuted/chartGrid) */
  --chart-text:  hsl(220 18% 94%);
  --chart-muted: hsl(220 11% 62%);
  --chart-grid:  hsl(222 16% 17% / .7);
  /* puente Bootstrap → tokens */
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);
  --bs-border-color: var(--border);
  --bs-secondary-color: var(--text2);
  --bs-secondary-bg: var(--bg3);
  --bs-tertiary-bg: var(--bg3);
  --bs-emphasis-color: var(--text);
  --bs-link-color: var(--accent-glow);
  --bs-link-hover-color: var(--accent);
}
body.light{
  --chart-text:  hsl(0 0% 10%);
  --chart-muted: hsl(0 0% 40%);
  --chart-grid:  hsl(0 0% 0% / .07);
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:.875rem;
  line-height:1.55;
  font-feature-settings:"cv02","cv03","cv04","cv11";
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

::selection{background:var(--accent-a25)}
*{scrollbar-width:thin;scrollbar-color:var(--border2) transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ── Glows ambientales (firma del sitio) ───────────────────────── */
/* (radial-gradient en vez de filter:blur — mismo efecto, sin costo de rasterizado) */
.glow{position:fixed;border-radius:50%;opacity:.16;z-index:0;pointer-events:none}
.glow.a{width:900px;height:900px;background:radial-gradient(circle, var(--accent) 0%, transparent 62%);top:-360px;right:-280px}
.glow.b{width:800px;height:800px;background:radial-gradient(circle, var(--purple) 0%, transparent 62%);top:55vh;left:-360px;opacity:.10}
body.light .glow{opacity:.10}
body.light .glow.b{opacity:.06}

/* ── Fondo interactivo (js/fondo.js — mismo efecto que english_tutor) ──
   El glow del cursor va SOBRE el contenido como tinte transparente
   (pointer-events:none); la red de partículas va DETRÁS del contenido. */
.cursor-glow{
  position:fixed;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(320px circle at var(--cursor-x,-9999px) var(--cursor-y,-9999px),
    color-mix(in srgb, var(--accent) 6%, transparent), transparent 80%);
}
body.light .cursor-glow{
  background:radial-gradient(340px circle at var(--cursor-x,-9999px) var(--cursor-y,-9999px),
    color-mix(in srgb, var(--accent) 14%, transparent), transparent 78%);
}
.cursor-net{
  position:fixed;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:0;opacity:.7;
}
body.light .cursor-net{opacity:.5}
@media (hover: none){ .cursor-glow,.cursor-net{display:none} }
@media (prefers-reduced-motion: reduce){ .cursor-glow,.cursor-net{display:none} }
.container-fluid,.app-header,.app-footer{position:relative;z-index:1}

/* ── Cabecera ───────────────────────────────────────────────────── */
.app-header{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:9px 18px;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  z-index:100;
}
.ah-left{display:flex;align-items:center;gap:10px;min-width:0}
.brand-link{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none}
.brand-link:hover .brand-app{color:var(--accent)}
.ah-right{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.brand-mark{
  width:28px;height:28px;border-radius:8px;flex:none;
  background:linear-gradient(135deg,var(--accent),var(--accent-h));
  color:#fff;font-weight:800;font-size:14px;
  display:inline-flex;align-items:center;justify-content:center;
}
.brand-txt{font-weight:700;font-size:14.5px;letter-spacing:-.01em;white-space:nowrap}
.brand-sep{color:var(--text3);margin:0 7px;font-weight:400}
.brand-app{color:var(--accent-glow)}
.proy-nombre{
  margin-left:8px;padding:3px 10px;border:1px solid var(--border);border-radius:99px;
  color:var(--text2);font-size:12.5px;max-width:32ch;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;
}
#recalc-badge{
  display:none;font-size:12px;color:var(--orange);
  background:color-mix(in srgb, var(--orange) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--orange) 35%, transparent);
  border-radius:99px;padding:2px 10px;
}
.chip-nube{
  font-size:12px;color:var(--green);
  background:color-mix(in srgb, var(--green) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--green) 30%, transparent);
  border-radius:99px;padding:2px 10px;max-width:26ch;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;
}
.ico{width:15px;height:15px;flex:none;vertical-align:-2px}
.btn .ico{margin-right:2px}
.ico-sol{display:none}
body.light .ico-sol{display:inline}
body.light .ico-luna{display:none}

.app-footer{
  margin-top:28px;padding:16px 18px;border-top:1px solid var(--border);
  color:var(--text3);font-size:12.5px;text-align:center;
}
.app-footer .foot-legal{max-width:760px;margin:6px auto 0;font-size:11.5px}
.app-footer .foot-legal strong{color:var(--text2)}
.app-footer .foot-links{margin-top:6px}
.app-footer .foot-links a{color:var(--text2);text-decoration:none}
.app-footer .foot-links a:hover{color:var(--accent-glow)}

/* ── Botones ────────────────────────────────────────────────────── */
.btn{--bs-btn-font-weight:600;border-radius:10px;transition:background .15s,border-color .15s,color .15s,box-shadow .15s}
.btn:focus-visible{box-shadow:0 0 0 3px var(--accent-a25)}
.btn-primary{
  --bs-btn-bg:var(--accent); --bs-btn-border-color:var(--accent);
  --bs-btn-hover-bg:var(--accent-h); --bs-btn-hover-border-color:var(--accent-h);
  --bs-btn-active-bg:var(--accent-h); --bs-btn-active-border-color:var(--accent-h);
  --bs-btn-color:#fff; --bs-btn-hover-color:#fff; --bs-btn-active-color:#fff;
}
.btn-primary:hover{box-shadow:0 0 0 3px var(--accent-a16)}
.btn-ghost{
  background:transparent;border:1px solid var(--border);color:var(--text);
}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent-glow);background:var(--accent-a06)}
.btn-icon{background:transparent;border:1px solid var(--border);color:var(--text2);padding:.25rem .5rem}
.btn-icon:hover{border-color:var(--accent);color:var(--accent-glow)}
.btn-danger-ghost{background:transparent;border:1px solid color-mix(in srgb, var(--red) 40%, var(--border));color:var(--red)}
.btn-danger-ghost:hover{background:color-mix(in srgb, var(--red) 12%, transparent);border-color:var(--red);color:var(--red)}
/* variantes bootstrap usadas por el markup/JS generado */
.btn-success{--bs-btn-bg:var(--green);--bs-btn-border-color:var(--green);--bs-btn-hover-bg:color-mix(in srgb, var(--green) 85%, black);--bs-btn-hover-border-color:var(--green);--bs-btn-color:#fff;--bs-btn-hover-color:#fff}
.btn-outline-primary{
  --bs-btn-color:var(--text2); --bs-btn-border-color:var(--border);
  --bs-btn-hover-bg:var(--accent-a10); --bs-btn-hover-color:var(--accent-glow); --bs-btn-hover-border-color:var(--accent);
  --bs-btn-active-bg:var(--accent); --bs-btn-active-border-color:var(--accent); --bs-btn-active-color:#fff;
}
.btn-outline-secondary,.btn-outline-light,.btn-outline-warning,.btn-outline-success,.btn-outline-danger{
  --bs-btn-color:var(--text2); --bs-btn-border-color:var(--border);
  --bs-btn-hover-bg:var(--accent-a10); --bs-btn-hover-color:var(--accent-glow); --bs-btn-hover-border-color:var(--accent);
  --bs-btn-active-bg:var(--accent); --bs-btn-active-border-color:var(--accent); --bs-btn-active-color:#fff;
}
.btn-outline-danger{--bs-btn-color:var(--red);--bs-btn-border-color:color-mix(in srgb, var(--red) 40%, var(--border));--bs-btn-hover-bg:color-mix(in srgb, var(--red) 12%, transparent);--bs-btn-hover-color:var(--red);--bs-btn-hover-border-color:var(--red)}

/* ── Dropdown ───────────────────────────────────────────────────── */
.dropdown-menu{
  background:var(--card2);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-2);--bs-dropdown-link-color:var(--text);
  --bs-dropdown-link-hover-bg:var(--accent-a10);--bs-dropdown-link-hover-color:var(--text);
  --bs-dropdown-link-active-bg:var(--accent);--bs-dropdown-link-active-color:#fff;
  font-size:13px;
}
.dropdown-item{border-radius:8px;padding:.42rem .8rem}
.dropdown-menu li{padding:0 .3rem}
.dropdown-divider{border-color:var(--border)}

/* ── Tarjetas ───────────────────────────────────────────────────── */
.card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);color:var(--text);
}
.card.shadow-sm{box-shadow:var(--shadow-1)!important}
.section-title{
  font-size:.95rem;font-weight:650;letter-spacing:-.01em;
  border-bottom:1px solid var(--accent-a25);
  padding-bottom:5px;margin-bottom:12px;color:var(--accent-glow);
}
/* KPIs (tarjetas generadas por el JS) */
.card-kpi{border-left:3px solid var(--accent);border-radius:var(--radius-sm);transition:transform .1s;background:var(--card)}
.card-kpi:hover{transform:translateY(-2px)}
.card-kpi.green{border-left-color:var(--green)}
.card-kpi.red{border-left-color:var(--red)}
.card-kpi.yellow{border-left-color:var(--yellow)}
.kpi-value{font-size:1.3rem;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--text)}
.kpi-label{font-size:.7rem;color:var(--text3);text-transform:uppercase;letter-spacing:.4px}

/* ── Pestañas ───────────────────────────────────────────────────── */
.nav-tabs{border-bottom:1px solid var(--border);gap:2px}
.nav-tabs .nav-link{
  font-size:.82rem;padding:.42rem .8rem;color:var(--text2);font-weight:550;
  border:1px solid transparent;border-radius:9px 9px 0 0;cursor:pointer;
}
.nav-tabs .nav-link:hover{color:var(--text);border-color:transparent;background:var(--accent-a06)}
.nav-tabs .nav-link.active{
  color:var(--accent-glow);background:var(--accent-a10);
  border-color:var(--border) var(--border) transparent;
  box-shadow:inset 0 -2px 0 var(--accent);
}
.tab-content{min-height:400px}
#resultados-panel{display:none}

/* ── Formularios ────────────────────────────────────────────────── */
label.form-label{font-size:.78rem;margin-bottom:2px;color:var(--text2)}
/* OJO: background-color (no el shorthand background) para NO resetear el
   background-image/repeat/position de la flecha de .form-select. */
.form-control,.form-select{
  font-size:.82rem;background-color:var(--bg3);border:1px solid var(--border);
  color:var(--text);border-radius:var(--radius-sm);
}
.form-control:focus,.form-select:focus{
  background-color:var(--bg3);color:var(--text);
  border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-a16);
}
.form-control::placeholder{color:var(--text3)}
/* Campos BLOQUEADOS (readonly por «Repetir…», disabled, o la clase bg-light
   que pone el motor): fondo apagado hacia el fondo de la página, texto tenue
   y cursor de no-permitido — nunca blancos en oscuro. El !important es
   necesario porque .bg-light de Bootstrap también lo usa. */
.form-control:disabled,.form-select:disabled,
.form-control[readonly],
.form-control.bg-light{
  background-color:color-mix(in srgb, var(--bg) 60%, var(--bg3))!important;
  color:var(--text3);
  border-color:color-mix(in srgb, var(--border) 60%, transparent);
  cursor:not-allowed;
}
.form-control:disabled::placeholder{color:var(--text3)}
/* En claro la mezcla anterior aclararía el campo; ahí el bloqueado debe ser
   un gris MÁS oscuro que el editable (convención clásica de formularios). */
body.light .form-control:disabled,body.light .form-select:disabled,
body.light .form-control[readonly],
body.light .form-control.bg-light{
  background-color:color-mix(in srgb, var(--border) 35%, var(--bg3))!important;
}
.form-select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23888fa8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .7rem center;
  background-size:14px 10px;
}
.form-text{color:var(--text3)}
.form-check-input{background-color:var(--bg3);border-color:var(--border2)}
.form-check-input:checked{background-color:var(--accent);border-color:var(--accent)}
.form-check-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-a16)}
.input-group-text{background:var(--bg3);border-color:var(--border);color:var(--text2)}
.year-grid{display:grid;gap:6px}
.unit-annual{font-size:.7rem;color:var(--accent-glow);font-variant-numeric:tabular-nums}
.frec-row{background:var(--accent-a06);border-radius:8px;padding:6px 8px;margin-top:6px}
.periodo-selector{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:4px 8px}

/* ── Acordeones (secciones generadas) ───────────────────────────── */
.accordion{--bs-accordion-bg:var(--card);--bs-accordion-border-color:var(--border);
  --bs-accordion-color:var(--text);--bs-accordion-btn-color:var(--text);
  --bs-accordion-active-bg:var(--accent-a10);--bs-accordion-active-color:var(--accent-glow);
  --bs-accordion-btn-focus-box-shadow:0 0 0 3px var(--accent-a16);
  --bs-accordion-btn-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23888fa8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
  --bs-accordion-btn-active-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%237c8aff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
}
.accordion-item{border-radius:var(--radius-sm);overflow:hidden;margin-bottom:6px;border:1px solid var(--border)}
.accordion-button{font-size:.85rem;padding:.55rem .85rem;background:var(--card2);font-weight:550}
.accordion-body{padding:.8rem;background:var(--card)}

/* ── Alertas / badges ───────────────────────────────────────────── */
.alert{border-radius:var(--radius-sm)}
.alert-info{background:var(--accent-a10);border:1px solid var(--accent-a25);color:var(--text)}
.alert-secondary{background:var(--bg3);border:1px solid var(--border);color:var(--text2)}
.alert-warning{background:color-mix(in srgb, var(--orange) 12%, transparent);border:1px solid color-mix(in srgb, var(--orange) 35%, transparent);color:var(--text)}
.alert-danger{background:color-mix(in srgb, var(--red) 12%, transparent);border:1px solid color-mix(in srgb, var(--red) 35%, transparent);color:var(--text)}
.badge-count{font-size:.7rem}
.badge.bg-warning{background:color-mix(in srgb, var(--orange) 15%, transparent)!important;color:var(--orange)!important;border:1px solid color-mix(in srgb, var(--orange) 35%, transparent)}

/* ── Utilidades bootstrap re-mapeadas ───────────────────────────── */
.text-muted{color:var(--text2)!important}
.text-primary{color:var(--accent-glow)!important}
.text-success{color:var(--green)!important}
.text-danger{color:var(--red)!important}
.border-bottom{border-color:var(--border)!important}
hr{border-color:var(--border);opacity:1}
h5{font-weight:650;letter-spacing:-.01em}
code{color:var(--accent-glow);background:var(--accent-a06);padding:1px 5px;border-radius:6px}

/* ── Tablas de estados financieros (estilo contable, tokenizado) ── */
.result-table{border-collapse:separate;border-spacing:0;margin-bottom:0;
  --bs-table-bg:transparent;--bs-table-color:var(--text)}
.result-table th,.result-table td{font-size:.78rem;white-space:nowrap;border-color:var(--border)}
.result-table td{font-variant-numeric:tabular-nums;color:var(--text)}
.result-table thead th{
  background:var(--bg3);color:var(--text);font-weight:650;text-align:right;
  position:sticky;top:0;z-index:3;border-bottom:2px solid var(--accent);
}
.result-table thead th:first-child{text-align:left}
.result-table th:first-child,.result-table td:first-child{
  position:sticky;left:0;z-index:2;background:var(--card);
  min-width:240px;max-width:340px;white-space:normal;
  border-right:2px solid var(--border2);
}
.result-table thead th:first-child{z-index:4;background:var(--bg3)}
.result-table tbody tr:nth-child(even) td{background:color-mix(in srgb, var(--bg3) 45%, transparent)}
.result-table tbody tr:nth-child(even) td:first-child{background:var(--card2)}
.result-table tbody tr:hover td{background:var(--accent-a06)}
.result-table tbody tr:hover td:first-child{background:color-mix(in srgb, var(--accent) 8%, var(--card))}
.pos{color:var(--green)}
.neg{color:var(--red)}
.total-row td{font-weight:700;background:var(--accent-a06)!important;border-top:1px solid var(--accent-a25)}
.grand-row td{font-weight:700;background:var(--accent-a10)!important;border-top:3px double var(--accent)}
.head-row td{font-weight:700;background:var(--bg3)!important;color:var(--text2);
  text-transform:uppercase;letter-spacing:.4px;font-size:.72rem}
.muted-row td{color:var(--text3);font-style:italic;font-size:.72rem}
.flujo-row td{background:color-mix(in srgb, var(--green) 12%, transparent)!important}
.indent-1{padding-left:1.4rem!important}
.indent-2{padding-left:2.6rem!important}
.statement-scroll{max-height:540px;overflow:auto;border:1px solid var(--border);border-radius:var(--radius-sm)}
.table{--bs-table-bg:transparent;--bs-table-color:var(--text);--bs-table-border-color:var(--border)}
.table-bordered>:not(caption)>*>*{border-color:var(--border)}

/* ── Offcanvas (panel de proyectos) ─────────────────────────────── */
.offcanvas{background:var(--bg2);color:var(--text);border-left:1px solid var(--border);--bs-offcanvas-width:420px}
.offcanvas-header{border-bottom:1px solid var(--border)}
.offcanvas-title{font-weight:650}
.btn-close{filter:invert(1) grayscale(100%)}
body.light .btn-close{filter:none}
.pj-sec{margin-top:18px}
.pj-sec h6{font-weight:650;font-size:.85rem;color:var(--text);margin-bottom:6px}
.pj-email{font-weight:400;font-size:.75rem;color:var(--green);margin-left:6px}
.pj-lista{display:flex;flex-direction:column;gap:6px}
.pj-item{
  display:flex;align-items:center;gap:8px;justify-content:space-between;
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:8px 10px;
}
.pj-item:hover{border-color:color-mix(in srgb, var(--accent) 35%, var(--border))}
.pj-item .pj-nombre{font-weight:600;font-size:.83rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.pj-item .pj-meta{font-size:.7rem;color:var(--text3)}
.pj-item .pj-btns{display:flex;gap:4px;flex:none}
.pj-item .pj-btns button{
  background:transparent;border:1px solid var(--border);border-radius:7px;
  color:var(--text2);font-size:.72rem;padding:2px 8px;cursor:pointer;
}
.pj-item .pj-btns button:hover{border-color:var(--accent);color:var(--accent-glow)}
.pj-item .pj-btns button.pj-del:hover{border-color:var(--red);color:var(--red)}
.pj-vacio{color:var(--text3);font-size:.8rem;font-style:italic;padding:6px 2px}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 900px){
  .brand-txt{display:none}
  .proy-nombre{max-width:18ch}
}
@media (max-width: 620px){
  .app-header{padding:8px 10px}
  .ah-right .btn{font-size:.75rem;padding:.3rem .55rem}
}