:root{
  --navy:#0f2a4a; --navy2:#163b64; --accent:#c99a2e; --bg:#f4f6f9;
  --card:#ffffff; --text:#1c2b3a; --muted:#5b6b7c; --line:#e2e7ee;
  --ok:#1f8a4c; --warn:#b9531f;
}
*{box-sizing:border-box;}
body{margin:0;font-family:'Segoe UI',Arial,sans-serif;background:var(--bg);color:var(--text);}
header{background:linear-gradient(120deg,var(--navy),var(--navy2));color:#fff;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;position:sticky;top:0;z-index:20;}
header h1{font-size:16px;margin:0;font-weight:600;}
header .tag{font-size:11px;opacity:.75;}
nav{display:flex;gap:6px;flex-wrap:wrap;}
nav button{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);color:#fff;padding:7px 12px;border-radius:6px;cursor:pointer;font-size:12px;}
nav button.active{background:var(--accent);border-color:var(--accent);color:#25200a;font-weight:600;}
main{max-width:1000px;margin:20px auto 60px;padding:0 18px;}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:22px 24px;margin-bottom:16px;box-shadow:0 1px 2px rgba(15,42,74,.04);}
.card h2{font-size:15px;margin:0 0 4px;color:var(--navy);}
.card h3{font-size:13px;color:var(--navy2);margin:18px 0 8px;text-transform:uppercase;letter-spacing:.03em;border-bottom:1px solid var(--line);padding-bottom:4px;}
.card p.sub{margin:0 0 16px;color:var(--muted);font-size:13px;}
label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px;font-weight:600;}
input[type=text],input[type=email],input[type=password],select,textarea{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:6px;font-size:14px;margin-bottom:14px;font-family:inherit;}
textarea{resize:vertical;min-height:70px;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;}
.block{border:1px solid var(--line);border-radius:8px;padding:12px 14px;margin-bottom:8px;}
.block .bnum{font-size:11px;color:var(--muted);margin-bottom:6px;font-weight:700;letter-spacing:.03em;}
.word-row{display:grid;grid-template-columns:1fr 50px 60px;align-items:center;padding:4px 0;border-bottom:1px dashed #eef1f5;gap:6px;}
.word-row:last-child{border-bottom:none;}
.word-row .wtext{font-size:13px;}
.word-row .col-label{font-size:9px;color:var(--muted);text-align:center;text-transform:uppercase;}
.radio-cell{display:flex;justify-content:center;}
/* Paso 1 (Personalidad) necesita más ancho que el resto del wizard para mostrar
   varias tarjetas por fila; :has() la ensancha solo mientras ese paso está activo. */
main:has(.step-panel[data-step="1"].active){max-width:1280px;}
#blocks-container{display:grid;grid-template-columns:1fr;gap:16px;}
#blocks-container .block-card{margin-bottom:0;}
@media (min-width:768px){
  #blocks-container{grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));align-items:start;}
}
.progress-bar{height:6px;background:var(--line);border-radius:4px;overflow:hidden;margin-bottom:6px;}
.progress-bar > div{height:100%;background:var(--accent);width:0%;transition:width .2s;}
.progress-label{font-size:12px;color:var(--muted);margin-bottom:14px;}
.btn{background:var(--navy);color:#fff;border:none;padding:10px 20px;border-radius:6px;font-size:13px;cursor:pointer;font-weight:600;}
.btn:hover{background:var(--navy2);}
.btn.secondary{background:#fff;color:var(--navy);border:1px solid var(--navy);}
.btn.gold{background:var(--accent);color:#25200a;}
.btn[disabled]{opacity:.4;cursor:not-allowed;}
.btn-row{display:flex;gap:10px;justify-content:space-between;margin-top:8px;flex-wrap:wrap;}
.btn-row .right{display:flex;gap:10px;margin-left:auto;}
.err{color:var(--warn);font-size:13px;margin:6px 0 0;display:none;}
table.list{width:100%;border-collapse:collapse;font-size:13px;}
table.list th{text-align:left;font-size:11px;color:var(--muted);text-transform:uppercase;padding:8px 10px;border-bottom:2px solid var(--line);}
table.list td{padding:9px 10px;border-bottom:1px solid var(--line);}
table.list tr:hover{background:#fafbfc;cursor:pointer;}
.pill{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;}
.pill.done{background:#e5f5eb;color:var(--ok);}
.pill.pending{background:#fdf0e4;color:var(--warn);}
.pill.ampliacion{background:#fff3cd;color:#8a6d1a;}
.empty{color:var(--muted);font-size:13px;padding:30px;text-align:center;}
.kv{display:grid;grid-template-columns:240px 1fr;gap:7px 14px;font-size:13px;margin-bottom:14px;}
.kv b{color:var(--navy);}
/* La misma familia tipográfica que usa la portada (motor.js, buildCoverPageHTML) —
   el resto de la app (dashboard, login, formularios) sigue con la fuente por
   defecto; esto solo aplica dentro del contenedor del informe. */
.report{font-family:'Arial Narrow',Arial,Helvetica,sans-serif;}
.report h3{color:var(--navy);border-bottom:2px solid var(--accent);padding-bottom:4px;margin-top:24px;font-size:13px;text-transform:uppercase;letter-spacing:.03em;}
.report h4{color:var(--navy2);font-size:12.5px;margin:14px 0 4px;text-transform:uppercase;}
.report .field{margin-bottom:10px;}
.report .field b{display:block;font-size:12.5px;color:var(--navy2);margin-bottom:2px;}
.report .field span{font-size:13.5px;line-height:1.5;}
.report .narrative{font-size:13.5px;line-height:1.65;background:#fbfaf6;border-left:3px solid var(--accent);padding:10px 14px;margin:8px 0;}
.codebar{display:flex;gap:8px;margin:12px 0;flex-wrap:wrap;}
.codebar .seg{flex:1;min-width:60px;text-align:center;background:var(--navy);color:#fff;border-radius:6px;padding:9px 4px;}
.codebar .seg small{display:block;font-size:9px;opacity:.7;}
.codebar .seg b{font-size:16px;}
.banner{background:#eaf1ff;border:1px solid #c8d9f6;color:#1c3b6b;padding:9px 13px;border-radius:6px;font-size:12.5px;margin-bottom:14px;}
.diag{background:#fff6ea;border:1px solid #f0dcae;color:#7a5410;padding:9px 13px;border-radius:6px;font-size:12.5px;margin-bottom:14px;}
.tierbar{display:flex;gap:2px;margin:8px 0 14px;border-radius:5px;overflow:hidden;height:22px;font-size:10px;}
.tierbar div{display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;}
.chartwrap{margin:10px 0 18px;}
.barrow{display:grid;grid-template-columns:150px 1fr 46px;align-items:center;gap:8px;margin-bottom:8px;font-size:12px;}
.barrow .barlabel{color:var(--navy2);font-weight:600;}
.bartrack{background:#eef1f5;border-radius:5px;height:16px;overflow:hidden;position:relative;}
.barfill{height:100%;border-radius:5px 0 0 5px;transition:width .3s;}
.barval{text-align:right;font-weight:700;color:var(--navy);}
.discscale{display:flex;font-size:9px;color:var(--muted);justify-content:space-between;margin:2px 0 10px 158px;max-width:calc(100% - 204px);}
.divergerow{margin-bottom:16px;}
.divergerow .dg-labels{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-bottom:3px;}
.divergerow .dg-track{position:relative;height:10px;background:linear-gradient(90deg,#c8d9f6,#eef1f5,#f6d9c8);border-radius:5px;}
.divergerow .dg-marker{position:absolute;top:-4px;width:4px;height:18px;background:var(--navy);border-radius:2px;transform:translateX(-50%);}
.toast{position:fixed;bottom:20px;right:20px;background:var(--navy);color:#fff;padding:12px 18px;border-radius:8px;font-size:13px;box-shadow:0 4px 12px rgba(0,0,0,.2);opacity:0;transform:translateY(10px);transition:all .25s;pointer-events:none;z-index:50;}
.toast.show{opacity:1;transform:translateY(0);}
.stepper{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:16px;}
.stepper .step{flex:1;min-width:90px;text-align:center;padding:7px 4px;border-radius:6px;font-size:10.5px;background:#eef1f5;color:var(--muted);cursor:pointer;border:1px solid var(--line);}
.stepper .step.active{background:var(--navy);color:#fff;border-color:var(--navy);}
.stepper .step.done{background:#e5f5eb;color:var(--ok);border-color:#bfe6cd;}
.likert-table{width:100%;border-collapse:collapse;font-size:12.5px;}
.likert-table th{font-size:10px;text-transform:uppercase;color:var(--muted);padding:6px 4px;border-bottom:2px solid var(--line);text-align:center;}
.likert-table th:first-child{text-align:left;}
.likert-table td{padding:8px 4px;border-bottom:1px solid var(--line);text-align:center;}
.likert-table td:first-child{text-align:left;padding-right:10px;}
.pt-par-num{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;font-weight:700;margin-bottom:4px;}
.pt-stmt{font-size:12px;margin-bottom:2px;}
.pt-stmt b{color:var(--navy2);margin-right:4px;}
.abpair{border:1px solid var(--line);border-radius:8px;padding:12px 14px;margin-bottom:10px;}
.abpair .stmt{font-size:12.5px;margin-bottom:4px;padding:6px 8px;border-radius:5px;background:#f7f8fa;}
.abpair .stmt b{color:var(--navy2);margin-right:6px;}
.abpair input[type=range]{width:100%;}
.abpair .split{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:2px;}
.choice-group{display:flex;flex-direction:column;gap:8px;margin-top:10px;}
.choice-btn{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:8px;padding:12px 14px;cursor:pointer;font-size:13px;transition:border-color .15s,background .15s;}
.choice-btn:hover{border-color:var(--navy2);background:#fafbfc;}
.choice-btn:has(input:checked){border-color:var(--navy);background:#eef4fb;font-weight:600;}
.choice-btn input[type=radio]{width:auto;margin:0;flex-shrink:0;}
.choice-group-inline{flex-direction:row;flex-wrap:wrap;gap:6px;}
.choice-group-inline .choice-btn{flex:1 1 0;justify-content:center;padding:8px 6px;font-size:12px;text-align:center;gap:6px;}
.rankgrid{display:grid;grid-template-columns:1fr 64px;gap:4px 8px;align-items:center;margin-bottom:4px;}
.rankgrid .rtext{font-size:12px;}
.rankgrid select{padding:4px 6px;font-size:12px;margin-bottom:0;}
#ap-container{display:grid;grid-template-columns:1fr;gap:12px;}
#ap-container .card{margin-bottom:0;}
@media (min-width:900px){
  #ap-container{grid-template-columns:repeat(auto-fill, minmax(340px, 1fr));align-items:start;}
}
.center-page{max-width:420px;margin:60px auto;}
.center-page .card{text-align:center;}
/* Forzar impresión de colores de fondo (barras, cuadrante, codebar) — los navegadores
   los omiten por defecto al imprimir/exportar a PDF a menos que se indique explícitamente. */
*{ -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; color-adjust: exact !important; }
@media print{
  header, nav, .btn-row, .no-print, .stepper{display:none !important;}
  body{background:#fff;}
  main{max-width:100%;margin:0;padding:0;}
  .card{box-shadow:none;border:none;page-break-inside:avoid;}
  .barfill, .codebar .seg, .tierbar div, .dg-marker, svg *{
    -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important;
  }
  .bartrack, .dg-track{ border:1px solid #ccc; }
  .barfill{ border-right:1px solid rgba(0,0,0,.15); }
  /* 'Segoe UI' es una fuente de Windows que en algunos equipos no se empaqueta bien en el
     motor de impresión/PDF de Chrome, y hace que glifos puntuales (frecuentemente "l", "i")
     salgan con trazo más grueso que el resto del texto. Arial (o Arial Narrow, que es la
     misma familia de trazo) evita ese problema al imprimir — y así el PDF exportado queda
     con la misma tipografía que la portada (Arial Narrow) en vez de mezclarla con la fuente
     por defecto de la app. Si Arial Narrow no está instalada en el motor de impresión, cae
     a Arial de todos modos, así que el fix del bug de glifos no se reintroduce. */
  body, * { font-family: 'Arial Narrow', Arial, Helvetica, sans-serif !important; }
}
.view{display:none;}
.view.active{display:block;}
.step-panel{display:none;}
.step-panel.active{display:block;}

/* Tabla "Diligenciar evaluación ponderada" — 18 columnas, ancha a
   propósito (18 columnas no caben en una pantalla normal). Solo Nombre
   queda fija al hacer scroll horizontal.

   Bug real (captura del cliente): Total/Recomendación tenían también
   position:sticky;right, "pegadas" a la derecha — pero con la tabla más
   ancha que el viewport, esas columnas quedaban "pegadas" (activas)
   durante casi TODO el rango de scroll, y position:sticky en una tabla
   HTML normal no reserva espacio propio: la columna pegada termina
   tapando cualquier columna normal que esté scrolleada justo debajo suyo
   en ese momento (pasó con Assessment; según la resolución de pantalla
   podía tapar otras). No era un tema de un ancho puntual mal calculado —
   probamos anchos exactos medidos con Puppeteer y el problema persistía
   en pantallas angostas/medianas. Se optó por sacarle el sticky a Total/
   Recomendación en vez de perseguir el problema: cero riesgo de
   superposición, en cualquier pantalla, siempre — a cambio de que ya no
   quedan visibles sin hacer scroll hasta el final. Nombre SÍ sigue
   sticky (una sola columna fija a la izquierda no tiene este problema:
   nada más queda "pegado" compitiendo por el mismo espacio).
   Aun así, esta vista usa un <main> mucho más ancho (ver regla con
   :has() más abajo) y la tabla ya no se estira más de la cuenta
   (width:auto, pisa table.list) — en pantallas de escritorio normales
   (≥1900px) la tabla completa entra sin necesitar scroll horizontal en
   absoluto.

   Fix real de las columnas angostas (el intento anterior solo le ponía
   width al <th> — con table-layout:auto eso es apenas una sugerencia: si
   el contenido del <td> necesita más espacio, el navegador igual estira
   la columna). Ahora la tabla usa table-layout:fixed con un <colgroup>
   (ver index.html) que define el ancho real de cada columna una sola vez
   — con fixed, ese ancho es un tope duro, no una sugerencia, y ya no
   depende de qué tan ancho sea el contenido del th ni del td. */
#ponderada-table{width:auto;table-layout:fixed;border-collapse:separate;border-spacing:0;white-space:nowrap;}
#ponderada-table th,#ponderada-table td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#ponderada-table .pond-sticky-nombre{white-space:normal;overflow:visible;text-overflow:clip;}
#ponderada-table td{padding:6px 4px;}
#ponderada-table td input[type=number]{width:100%;max-width:44px;padding:4px 3px;margin:0;font-size:12.5px;}
#ponderada-table .pond-sticky{position:sticky;background:var(--card);z-index:2;}
#ponderada-table thead .pond-sticky{z-index:3;}
#ponderada-table .pond-sticky-nombre{left:0;box-shadow:2px 0 4px -2px rgba(15,42,74,.12);}
#ponderada-tbody tr:hover .pond-sticky{background:#fafbfc;}
#ponderada-table .pond-calc{color:var(--muted);font-style:italic;font-size:12.5px;}
#ponderada-table .pond-locked{color:var(--text);font-size:12.5px;}
#ponderada-table .pond-acciones{overflow:visible;text-overflow:clip;}
#ponderada-table .pond-total-val{font-weight:700;color:var(--navy);}
/* Encabezados verticales — como en tablas dinámicas de Excel. El ancho de
   columna lo fija el <colgroup> (arriba en index.html), no el texto del
   título (que antes obligaba a columnas de 90-145px solo para caber
   horizontal, p.ej. "SERVICIO AL ASOCIADO (MÁX. 30)"). Los 16 encabezados
   de datos (todo menos # y Nombre) van verticales — rotate(180deg) sobre
   writing-mode:vertical-rl para que se lean de abajo hacia arriba, igual
   que un pivot table de Excel. */
#ponderada-table th.pond-th-flat{white-space:nowrap;}
#ponderada-table th.pond-th-vert{height:148px;padding:6px 2px;vertical-align:bottom;text-align:left;overflow:visible;}
#ponderada-table th.pond-th-vert span{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;display:inline-block;font-size:11px;}
/* Contenedor mucho más ancho SOLO mientras esta vista está activa — en
   pantallas normales de escritorio deja entrar la tabla completa sin
   scroll horizontal (ver explicación arriba). :has() tiene soporte sólido
   en Chrome/Edge/Firefox/Safari actuales (todos ≥2022), que es lo que usa
   esta app. */
body:has(#view-evaluacion-ponderada.active) main{max-width:2400px;}
/* Fila con cambios sin guardar (edición global) — fondo suave, incluso en
   Nombre (que ya trae su propio fondo por ser sticky, por eso va después
   en el cascade con más especificidad) y por encima del hover. */
#ponderada-tbody tr.pond-modificada td{background:#fff6df;}
#ponderada-tbody tr.pond-modificada .pond-sticky{background:#fff6df;}