/* ============================================================================
   ui.css — Sistema visual Test Vocacional UBAM
   Paleta institucional (azul marino + cian) aplicada de forma consistente.
   Se carga DESPUÉS de Bootstrap 4 y sobrescribe sus componentes.
   ============================================================================ */

/* ---------- Tokens ---------- */
:root{
  --navy:#0b4e6b;
  --navy-deep:#08394f;
  --navy-line:#1d6484;
  --cyan:#0e9bc9;
  --cyan-deep:#0b7ea6;
  --cyan-wash:#e8f4f9;
  --ink:#15303b;
  --ink-soft:#587683;
  --ink-faint:#8aa4ae;
  --paper:#eef3f7;
  --surface:#ffffff;
  --surface-2:#f6f9fb;
  --line:#d6e2e9;
  --line-strong:#bcccd5;
  --ok:#1f9d6b;
  --ok-wash:#e4f4ec;
  --warn:#b9791a;
  --warn-wash:#f8efe0;
  --bad:#cf4b4b;
  --bad-wash:#fae9e9;
  --gold:#b98f3c;

  --chart-a:#0e9bc9;
  --chart-b:#bf863a;
  --radar-grid:#cfdde4;
  --radar-label:#587683;
  --radar-surface:#ffffff;

  --font-display:"Libre Franklin","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-body:"Source Sans 3","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",monospace;

  --r-sm:8px; --r-md:12px; --r-lg:18px;
  --shadow-sm:0 1px 2px rgba(11,57,79,.06), 0 2px 10px rgba(11,57,79,.05);
  --shadow-md:0 8px 30px rgba(11,57,79,.14);
  --shadow-nav:0 2px 12px rgba(8,57,79,.28);
}

/* ---------- Base ---------- */
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);color:var(--ink);line-height:1.18}
a{color:var(--cyan-deep)}
a:hover{color:var(--navy)}
hr{border-top:1px solid var(--line)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.text-mono{font-family:var(--font-mono)}
.text-muted{color:var(--ink-soft)!important}
.eyebrow{font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft)}

/* ---------- Navbar (unifica las 3 variantes existentes) ---------- */
.navbar{
  background:var(--navy)!important;
  box-shadow:var(--shadow-nav);
  padding:.6rem 1.4rem;
}
.navbar .navbar-brand img{filter:brightness(0) invert(1);height:38px;width:auto}
.navbar .nav-link,.navbar .navbar-brand,.navbar .dropdown-toggle{color:#eaf4f8!important}
.navbar .nav-link:hover{color:#fff!important}
.navbar-toggler{border-color:rgba(255,255,255,.3)}
.navbar .dropdown-menu{
  border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-md);
  padding:6px;margin-top:8px
}
.navbar .dropdown-item{border-radius:8px;font-size:14px;padding:8px 12px;color:var(--ink)}
.navbar .dropdown-item:hover{background:var(--cyan-wash);color:var(--navy)}
.navbar .dropdown-item i{color:var(--cyan-deep)}

/* ---------- Botones (sobre Bootstrap) ---------- */
.btn{
  font-family:var(--font-display);font-weight:600;font-size:.95rem;
  border-radius:var(--r-sm);padding:.5rem 1.15rem;
  transition:transform .12s ease, box-shadow .12s ease, background-color .12s ease, color .12s ease;
}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.btn:active{transform:none}
.btn-primary,.btn-info{
  background:var(--cyan)!important;border-color:var(--cyan)!important;color:#03212c!important;
}
.btn-primary:hover,.btn-info:hover{background:var(--cyan-deep)!important;border-color:var(--cyan-deep)!important;color:#fff!important}
.btn-outline-primary{color:var(--navy)!important;border-color:var(--line-strong)!important;background:transparent!important}
.btn-outline-primary:hover{background:var(--navy)!important;color:#fff!important;border-color:var(--navy)!important}
.btn-secondary{background:var(--surface)!important;border-color:var(--line-strong)!important;color:var(--ink)!important}
.btn-secondary:hover{background:var(--surface-2)!important;color:var(--navy)!important}
.btn-success{background:var(--ok)!important;border-color:var(--ok)!important;color:#fff!important}
.btn-success:hover{filter:brightness(.94)}
.btn-danger{background:transparent!important;border-color:color-mix(in srgb,var(--bad) 45%,transparent)!important;color:var(--bad)!important}
.btn-danger:hover{background:var(--bad)!important;color:#fff!important;border-color:var(--bad)!important}
.btn-dark{background:var(--navy)!important;border-color:var(--navy)!important;color:#fff!important}
.btn-lg{padding:.7rem 1.7rem;font-size:1rem}
.btn-sm{padding:.32rem .8rem;font-size:.82rem}
.rounded-pill,.btn.rounded-pill{border-radius:40px!important}

/* ---------- Tarjetas ---------- */
.card{
  border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);background:var(--surface)
}
.card-header{
  background:var(--surface-2);border-bottom:1px solid var(--line);
  font-family:var(--font-display);font-weight:700;color:var(--ink)
}
.ui-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);padding:22px 24px;margin-bottom:16px
}
.ui-card__head{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.ui-card__head h3,.ui-card__head h4{font-size:15px;font-weight:700;margin:0}
.ui-rule{flex:1;height:1px;background:linear-gradient(90deg,var(--line-strong),transparent)}

/* ---------- Formularios ---------- */
label{font-family:var(--font-display);font-size:12px;font-weight:600;color:var(--ink-soft);letter-spacing:.02em;margin-bottom:5px}
.form-control,.custom-select,.custom-select-modern{
  font-family:var(--font-body);font-size:14px;color:var(--ink);
  background-color:var(--surface);border:1.5px solid var(--line-strong);
  border-radius:var(--r-sm);height:calc(2.4rem + 4px);padding:.45rem .8rem;
  transition:border-color .14s ease, box-shadow .14s ease
}
textarea.form-control{height:auto}
.form-control:focus,.custom-select:focus,.custom-select-modern:focus{
  border-color:var(--cyan);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--cyan) 22%,transparent);
  background-color:var(--surface)
}
.form-control::placeholder{color:var(--ink-faint)}
.is-valid,.form-control.is-valid{border-color:var(--ok)!important}
.is-invalid,.form-control.is-invalid{border-color:var(--bad)!important}

/* ---------- Chips / estados ---------- */
.ui-chip{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-display);font-weight:600;font-size:12px;
  padding:3px 10px;border-radius:30px;border:1px solid var(--line-strong);
  color:var(--ink-soft);background:var(--surface-2)
}
.ui-chip .dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.ui-chip--ok{color:var(--ok);background:var(--ok-wash);border-color:color-mix(in srgb,var(--ok) 30%,transparent)}
.ui-chip--warn{color:var(--warn);background:var(--warn-wash);border-color:color-mix(in srgb,var(--warn) 30%,transparent)}
.ui-chip--idle{color:var(--ink-faint)}

/* ---------- Tabs (nav-pills / nav-tabs) ---------- */
.nav-pills .nav-link,.nav-tabs .nav-link{
  font-family:var(--font-display);font-weight:600;font-size:13.5px;color:var(--ink-soft);
  border-radius:10px 10px 0 0;border:1px solid transparent
}
.nav-pills .nav-link.active,.nav-tabs .nav-link.active{
  background:var(--surface)!important;color:var(--navy)!important;
  border-color:var(--line);border-bottom-color:var(--surface)
}
.nav-pills .nav-link:hover:not(.active),.nav-tabs .nav-link:hover:not(.active){color:var(--navy)}
.nav-tabs{border-bottom:1px solid var(--line)}
.tab-content{background:var(--surface);border:1px solid var(--line);border-top:none;border-radius:0 0 var(--r-md) var(--r-md);padding:18px}

/* ---------- Tablas ---------- */
.table{color:var(--ink);font-size:13.5px}
.table thead th,.thead-dark th{
  background:var(--navy)!important;color:#fff!important;border:none!important;
  font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  padding:11px 14px;vertical-align:middle
}
.table td{padding:10px 14px;border-color:var(--line);vertical-align:middle}
.table-striped tbody tr:nth-of-type(odd){background:var(--surface-2)}
.table-hover tbody tr:hover{background:var(--cyan-wash)}
.ui-tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.ui-tablewrap .table{margin:0}
/* encabezado que arma por JS administrar-Registrados / administrar-Vinculacion */
#tbl-registrados tr:first-child th{
  background:var(--navy)!important;color:#fff!important;border:none!important;
  font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:11px 14px
}
#tbl-registrados td{padding:9px 14px;border-color:var(--line);font-size:13px}
.bg-primary{background:var(--navy)!important;color:#fff!important}
.bg-primary td,.bg-primary th{color:#fff!important;font-family:var(--font-mono)}

/* ---------- Modales (Bootstrap) ---------- */
.modal-content{border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-md);overflow:hidden}
.modal-header{
  background:linear-gradient(135deg,var(--navy),var(--cyan-deep))!important;
  color:#fff;border-bottom:none;padding:15px 22px
}
.modal-header .modal-title{color:#fff!important;font-family:var(--font-display);font-weight:700;font-size:1.05rem;letter-spacing:.3px}
.modal-header .modal-title i{color:#fff}
.modal-header .close{color:#fff;opacity:.9;text-shadow:none;font-weight:400}
.modal-header .close:hover{opacity:1}
.modal-body{background:var(--surface-2);padding:22px}
.modal-footer{background:var(--surface);border-top:1px solid var(--line);padding:14px 22px}

/* ---------- SweetAlert2 ---------- */
.swal2-popup{border-radius:var(--r-lg)!important;font-family:var(--font-body)!important}
.swal2-title{font-family:var(--font-display)!important;color:var(--ink)!important}
.swal2-styled.swal2-confirm{background:var(--cyan)!important;color:#03212c!important;border-radius:var(--r-sm)!important;font-family:var(--font-display)!important;font-weight:600!important}
.swal2-styled.swal2-cancel{border-radius:var(--r-sm)!important;font-family:var(--font-display)!important;font-weight:600!important}

/* ---------- Progreso (cuestionario) ---------- */
.ui-testhead{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--line);padding:14px 0}
.ui-progrow{max-width:1000px;margin:0 auto;padding:0 22px;display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.ui-prog{flex:1;min-width:170px}
.ui-prog__top{display:flex;justify-content:space-between;font-size:12px;font-family:var(--font-display);font-weight:600;margin-bottom:5px;color:var(--ink)}
.ui-prog__top .pct{font-family:var(--font-mono);color:var(--ink-soft)}
.ui-prog__track{height:8px;border-radius:20px;background:var(--surface-2);border:1px solid var(--line);overflow:hidden}
.ui-prog__fill{height:100%;border-radius:20px;background:linear-gradient(90deg,var(--cyan),var(--cyan-deep));transition:width .4s ease}
.ui-prog--apt .ui-prog__fill{background:linear-gradient(90deg,var(--navy-line),var(--navy))}
/* progreso viejo de bootstrap dentro de #progresBar-* */
.progress{height:10px;border-radius:20px;background:var(--surface-2);border:1px solid var(--line)}
.progress-bar{background:linear-gradient(90deg,var(--cyan),var(--cyan-deep))!important;font-family:var(--font-display);font-weight:600}

/* ---------- Filas de pregunta + control segmentado ---------- */
.ui-qgroup{
  font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--navy);
  background:var(--cyan-wash);border:1px solid var(--line);border-radius:10px;
  padding:10px 16px;margin:18px 0 12px;display:flex;align-items:center;gap:8px
}
.ui-qrow{
  display:grid;grid-template-columns:34px 1fr auto;gap:16px;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:13px 16px;margin-bottom:8px;transition:border-color .14s ease
}
.ui-qrow:hover{border-color:var(--line-strong)}
.ui-qrow.is-saved{border-left:3px solid var(--ok)}
.ui-qrow.is-error{border-left:3px solid var(--bad)}
.ui-seg-src{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ui-seg-host{min-width:0}
.ui-qrow__n{font-family:var(--font-mono);font-size:12.5px;color:var(--ink-faint);text-align:center}
.ui-qrow__q{font-size:14px;color:var(--ink)}
.ui-qrow__save{font-size:11px;font-family:var(--font-display);font-weight:600;color:var(--ok);display:none;align-items:center;gap:4px;margin-top:3px}
.ui-qrow.is-saved .ui-qrow__save{display:flex}
.ui-seg{display:flex;border:1.5px solid var(--line-strong);border-radius:9px;overflow:hidden}
.ui-seg button{
  border:none;background:var(--surface);color:var(--ink-soft);
  font-family:var(--font-display);font-weight:600;font-size:11.5px;padding:7px 10px;cursor:pointer;
  border-left:1px solid var(--line);white-space:nowrap
}
.ui-seg button:first-child{border-left:none}
.ui-seg button.is-on{background:var(--cyan);color:#03212c}
.ui-seg--apt button.is-on{background:var(--navy);color:#fff}
@media (max-width:720px){
  .ui-qrow{grid-template-columns:28px 1fr}
  .ui-seg{grid-column:1/-1;margin-top:8px}
  .ui-seg button{flex:1}
}

/* selects viejos del cuestionario, por si se conservan */
#globalIntereses,#globalAptitudes{
  background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:var(--r-md);
  height:440px
}
#globalIntereses .table td,#globalAptitudes .table td{border-color:var(--line)}

/* ---------- KPIs ---------- */
.ui-kpirow{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:16px 0}
@media (max-width:720px){.ui-kpirow{grid-template-columns:1fr 1fr}}
.ui-kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px}
.ui-kpi .k{font-size:11px;font-family:var(--font-display);font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft)}
.ui-kpi .v{font-family:var(--font-mono);font-size:24px;color:var(--ink);margin-top:3px}
.ui-kpi .v small{font-size:12px;color:var(--ink-faint)}

/* ---------- Barras (ranking, serie única) ---------- */
.ui-bars{display:grid;gap:7px}
.ui-bar{display:grid;grid-template-columns:150px 1fr 52px;gap:12px;align-items:center;font-size:12.5px}
.ui-bar__lab{color:var(--ink-soft);text-align:right;font-family:var(--font-display);font-weight:600}
.ui-bar__track{background:var(--surface-2);border-radius:5px;height:16px;position:relative;overflow:hidden;border:1px solid var(--line)}
.ui-bar__fill{position:absolute;left:0;top:0;bottom:0;background:var(--cyan);border-radius:0 4px 4px 0}
.ui-bar.is-hi .ui-bar__fill{background:var(--navy)}
.ui-bar__val{font-family:var(--font-mono);color:var(--ink);text-align:right}
@media (max-width:560px){.ui-bar{grid-template-columns:96px 1fr 42px;gap:8px}}

/* ---------- Radar (perfil vocacional) ---------- */
.ui-radar-wrap{display:flex;flex-direction:column;align-items:center}
.ui-radar{width:100%;max-width:452px;height:auto;display:block}
.ui-radar .rg{stroke:var(--radar-grid);fill:none}
.ui-radar .rl{fill:var(--radar-label);font:500 10.5px "IBM Plex Mono",ui-monospace,monospace}
.ui-radar .s-a{stroke:var(--chart-a);fill:none;stroke-width:2.2;stroke-linejoin:round}
.ui-radar .s-a.fill{fill:var(--chart-a);fill-opacity:.15}
.ui-radar .s-b{stroke:var(--chart-b);fill:none;stroke-width:2.2;stroke-linejoin:round;stroke-dasharray:5 4}
.ui-radar .m-a{fill:var(--chart-a)}
.ui-radar .m-b{fill:var(--chart-b)}
.ui-radar .mk{stroke:var(--radar-surface);stroke-width:1.4}
.ui-legend{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;font-family:var(--font-display);font-weight:600;font-size:12.5px;color:var(--ink-soft);margin-top:6px}
.ui-legend span{display:flex;align-items:center;gap:8px}
.ui-legend i{display:block;width:22px;border-top:3px solid var(--c)}
.ui-legend .mk-dash{border-top-style:dashed}

/* ---------- Carreras (pills) ---------- */
.ui-pillgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:9px}
.ui-pill{
  display:flex;align-items:center;gap:9px;
  background:var(--surface-2);border:1.5px solid var(--line-strong);border-radius:10px;
  padding:10px 13px;font-family:var(--font-display);font-weight:600;font-size:13px;color:var(--navy);
  transition:background .14s ease,color .14s ease,border-color .14s ease
}
.ui-pill:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.ui-pill .mk{width:6px;height:6px;border-radius:50%;background:var(--cyan);flex:none}
.ui-pill:hover .mk{background:#fff}
.ui-pill--primary{border-color:color-mix(in srgb,var(--gold) 55%,transparent);background:color-mix(in srgb,var(--gold) 12%,var(--surface))}
.ui-pill--primary .mk{background:var(--gold)}

/* carreras que inyecta administrar-Cuestionario.js como <li> sueltos */
#lst-recomendaciones{list-style:none;padding-left:0}
#lst-recomendaciones li{
  display:flex;align-items:center;gap:9px;
  background:var(--surface-2);border:1.5px solid var(--line-strong);border-radius:10px;
  padding:10px 13px;font-family:var(--font-display);font-weight:600;font-size:13px;color:var(--navy)
}
#lst-recomendaciones li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cyan);flex:none}
#lst-recomendaciones b,#lst-recomendaciones hr{grid-column:1/-1;width:100%}
#lst-recomendaciones b{font-family:var(--font-display);font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin-top:8px;display:block}

/* ---------- BTT ---------- */
.btt-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);overflow:hidden;margin-bottom:16px}
.btt-card .card-header,.btt-card__head{
  background:var(--navy)!important;color:#fff!important;
  font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.05em;text-transform:uppercase;
  padding:12px 18px
}
.btt-card .card-header i{color:var(--cyan)!important}
.btt-tog{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;border:1.5px solid var(--line-strong);cursor:pointer}
.dom-card{background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--navy);border-radius:var(--r-md);padding:18px 22px;box-shadow:var(--shadow-sm)}
.dom-card .lab{font-size:11px;font-family:var(--font-display);font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft)}
.dom-card .area{font-family:var(--font-display);font-weight:800;font-size:1.7rem;color:var(--navy);text-transform:uppercase;margin:2px 0 6px}

/* ---------- Footer ---------- */
footer,.page-footer{background:var(--navy-deep)!important;color:#a9cad6!important}
footer a,.page-footer a{color:#dcecf1!important;text-decoration:underline}
footer b,.page-footer b{color:#eaf4f8!important;font-family:var(--font-display)}

/* ---------- Overlay de carga ---------- */
#contenedorCarga{background:rgba(238,243,247,.86)}

/* ---------- Utilidades ---------- */
.ui-container{max-width:1000px;margin:0 auto;padding:24px 22px 40px}
.ui-container--narrow{max-width:720px}
@media (max-width:600px){.ui-container{padding:18px 14px 28px}}
.ui-areas-top{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
@media (max-width:640px){.ui-areas-top{grid-template-columns:1fr}}
.ui-areatile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:15px 16px;border-top:3px solid var(--cyan)}
.ui-areatile:first-child{border-top-color:var(--gold)}
.ui-areatile .lab{font-size:11px;font-family:var(--font-display);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.ui-areatile .nm{font-family:var(--font-display);font-weight:700;font-size:15px;margin:4px 0 2px}
.ui-areatile .sc{font-family:var(--font-mono);font-size:20px;color:var(--navy)}
.ui-areatile .sc small{font-size:12px;color:var(--ink-faint)}