:root{
  --bg0:#070b14;
  --bg1:#0b1220;
  --card:#0f1a2e;
  --card2:#0c1628;
  --text:#e8eefc;
  --muted:rgba(232,238,252,.68);
  --muted2:rgba(232,238,252,.5);
  --border:rgba(255,255,255,.08);
  --primary:#4f7cff;
  --primary2:#7c4dff;
  --glow:rgba(79,124,255,.35);
}

html,body{height:100%;}
body.app-body{
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(79,124,255,.18), transparent 60%),
    radial-gradient(900px 500px at 90% 20%, rgba(124,77,255,.14), transparent 55%),
    radial-gradient(900px 500px at 50% 90%, rgba(0,255,209,.08), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  color:var(--text);
}

a{color:inherit;}
.link-light-muted{color:var(--muted); text-decoration:none;}
.link-light-muted:hover{color:var(--text); text-decoration:underline;}

/* ✅ Accesibilidad: forzar contraste en componentes Bootstrap sobre tema oscuro */
.text-dark{color: var(--text) !important;}
.text-body{color: var(--text) !important;}
.text-muted{color: var(--muted) !important;}
.bg-light{background-color: rgba(255,255,255,.06) !important;}
.bg-white{background-color: rgba(255,255,255,.06) !important;}
.border{border-color: rgba(255,255,255,.10) !important;}

.form-control, .form-select{
  background-color: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: var(--text) !important;
}
.form-control::placeholder{color: rgba(232,238,252,.55) !important;}
.form-control:focus, .form-select:focus{
  box-shadow: 0 0 0 .25rem rgba(79,124,255,.18) !important;
  border-color: rgba(79,124,255,.45) !important;
}

.input-group-text{
  background-color: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: var(--text) !important;
}

.card, .modal-content, .dropdown-menu{
  background-color: rgba(15,26,46,.92) !important;
  border-color: rgba(255,255,255,.10) !important;
  color: var(--text) !important;
}

.table{color: var(--text) !important;}
.table thead th{color: rgba(232,238,252,.92) !important;}

.alert{border-color: rgba(255,255,255,.10) !important;}
.alert-info{background: rgba(79,124,255,.12) !important; color: rgba(232,238,252,.95) !important;}
.alert-success{background: rgba(0,255,209,.10) !important; color: rgba(232,238,252,.95) !important;}
.alert-warning{background: rgba(255,193,7,.12) !important; color: rgba(232,238,252,.95) !important;}
.alert-danger{background: rgba(255,77,109,.12) !important; color: rgba(232,238,252,.95) !important;}

.btn-outline-dark{color: var(--text) !important; border-color: rgba(255,255,255,.22) !important;}
.btn-outline-dark:hover{background: rgba(255,255,255,.08) !important;}

.nav-glass{
  background: rgba(10,16,30,.72);
  backdrop-filter: blur(14px);
  border-bottom:1px solid var(--border);
}

.brand-mark{
  width:28px;height:28px;border-radius:10px;
  background: linear-gradient(135deg, rgba(79,124,255,.95), rgba(124,77,255,.95));
  box-shadow: 0 10px 30px rgba(79,124,255,.25);
  display:flex;align-items:center;justify-content:center;
}
.brand-mark-sm{width:22px;height:22px;border-radius:8px;}
.brand-dot{width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,.92); box-shadow:0 0 0 6px rgba(255,255,255,.12);}

.text-gradient{
  background: linear-gradient(90deg, #9ad7ff, #b8a6ff, #7cffd1);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.card-premium{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--border);
  border-radius:18px;
}

.bg-soft{background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06);}

.badge-glow{
  display:inline-flex; align-items:center;
  gap:.35rem;
  padding:.45rem .75rem;
  border-radius:999px;
  background: rgba(79,124,255,.14);
  border:1px solid rgba(79,124,255,.25);
  color: rgba(232,238,252,.92);
}

.icon-bubble{
  width:44px;height:44px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.25rem;
  border:1px solid rgba(255,255,255,.08);
}

.pill{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .6rem;border-radius:999px;font-size:.8rem;}
.pill-blue{background: rgba(124,77,255,.14); border:1px solid rgba(124,77,255,.25); color: rgba(232,238,252,.92);}

.footer-premium{border-top:1px solid var(--border); background: rgba(10,16,30,.55);}

.progress-premium{background: rgba(255,255,255,.08); border-radius:999px; overflow:hidden;}
.progress-premium .progress-bar{background: linear-gradient(90deg, var(--primary), var(--primary2));}

.timeline{display:flex;flex-direction:column;gap:14px;}
.timeline-item{display:flex;gap:12px;align-items:flex-start;}
.timeline-dot{width:10px;height:10px;border-radius:999px;background: rgba(79,124,255,.9); box-shadow:0 0 0 6px rgba(79,124,255,.18); margin-top:6px;}

.mini-kpi-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.mini-kpi{padding:14px;border-radius:14px;background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06);}
.mini-kpi-label{font-size:.78rem;color:var(--muted2);}
.mini-kpi-value{font-weight:700;}

.q-card{border-radius:16px; border:1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); overflow:hidden;}
.q-head{padding:16px 16px 10px 16px;}
.q-meta{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.q-dim{font-size:.78rem;color:rgba(154,215,255,.9);}
.q-index{font-size:.78rem;color:var(--muted2);}
.q-title{font-weight:800;font-size:1.05rem;margin-top:6px;}
.q-text{color:var(--muted);margin-top:6px;}
.q-scale{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:14px 16px 16px 16px;}
@media (max-width: 992px){.q-scale{grid-template-columns:1fr 1fr;}}

.scale-option{cursor:pointer;}
.scale-option input{display:none;}
.scale-pill{
  display:block;
  padding:12px 12px;
  border-radius:14px;
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
  min-height:64px;
}
.scale-label{display:block;font-weight:700;}
.scale-hint{display:block;font-size:.78rem;color:var(--muted2);margin-top:2px;}
.scale-option:hover .scale-pill{transform: translateY(-1px); border-color: rgba(79,124,255,.35);}
.scale-option input:checked + .scale-pill{
  background: rgba(79,124,255,.14);
  border-color: rgba(79,124,255,.45);
  box-shadow: 0 10px 30px rgba(79,124,255,.12);
}

.score-ring{position:relative;width:160px;height:160px;margin:0 auto;}
.score-ring-lg{width:190px;height:190px;}
.score-ring-inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:2;}
.score-value{font-size:3rem;font-weight:900;line-height:1;}
.score-label{color:var(--muted);font-weight:600;}
.score-ring-svg{position:absolute;inset:0;transform: rotate(-90deg);}
.ring-bg{fill:none;stroke: rgba(255,255,255,.10);stroke-width:12;}
.ring-fg{fill:none;stroke: url(#grad);stroke-width:12;stroke-linecap:round;filter: drop-shadow(0 10px 18px rgba(79,124,255,.18));}

/* SVG gradient fallback via stroke on element */
.ring-fg{stroke: rgba(79,124,255,.95);} 

.dim-bars{display:flex;flex-direction:column;gap:12px;}
.dim-bar{padding:12px;border-radius:14px;background: rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);}

.premium-chart{display:flex;flex-direction:column;gap:14px;}
.premium-chart-row{display:grid;grid-template-columns: 1.2fr 2.2fr .35fr;gap:14px;align-items:center;}
@media (max-width: 992px){.premium-chart-row{grid-template-columns:1fr;}}
.pcr-title{font-weight:800;}
.pcr-sub{font-size:.78rem;color:var(--muted2);}
.pcr-bar{height:12px;border-radius:999px;background: rgba(255,255,255,.08);overflow:hidden;border:1px solid rgba(255,255,255,.06);}
.pcr-bar-fill{height:100%;border-radius:999px;background: linear-gradient(90deg, var(--primary), var(--primary2)); width:0%; animation: fill 900ms ease forwards;}
@keyframes fill{from{width:0%}to{width:var(--w, 50%)}}

/* We set width inline; keep animation */
.pcr-bar-fill{animation-name: none;}
.pcr-bar-fill{transition: width .9s ease;}

.pcr-right{font-weight:900;text-align:right;}

.module-card{transition: transform .12s ease, border-color .12s ease;}
.module-card:hover{transform: translateY(-2px); border-color: rgba(79,124,255,.35);}

.checkline{display:flex;gap:10px;align-items:flex-start;color:var(--muted);}
.checkline i{color: rgba(124,77,255,.9); margin-top:2px;}

.table-dark{--bs-table-bg: rgba(10,16,30,.55); --bs-table-border-color: rgba(255,255,255,.08);}

.codebox{background: rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.08); padding:12px; border-radius:12px; color: rgba(232,238,252,.9); overflow:auto;}

/* Fix premium chart animation: set width directly */
.pcr-bar-fill{animation: none;}

/* Small utilities */
.text-white-75{color: rgba(255,255,255,.75) !important;}
.text-white-50{color: rgba(255,255,255,.5) !important;}