:root {
  --bg: #f5f6f8; --panel: #ffffff; --texto: #1d2330; --suave: #5d6677; --borde: #dfe3ea;
  --primario: #1f5fbf; --primario-txt: #ffffff; --primario-suave: #e6eefb;
  --ok: #1d8a4e; --ok-suave: #e3f4ea; --mal: #c23b32; --mal-suave: #fbe7e5;
  --medio: #b7791f; --medio-suave: #fcf1dc; --gris-suave: #eef0f4;
  --radio: 10px; --sombra: 0 1px 3px rgba(20, 30, 50, .08);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12151c; --panel: #1b2029; --texto: #e6e9ef; --suave: #9aa3b5; --borde: #2c3341;
    --primario: #5b9bff; --primario-txt: #0d1420; --primario-suave: #1c2a42;
    --ok: #4cc283; --ok-suave: #16301f; --mal: #f0776d; --mal-suave: #3a1c1a;
    --medio: #e3b05a; --medio-suave: #382c14; --gris-suave: #232936; --sombra: none;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--texto);
  font: 15px/1.55 "Segoe UI", system-ui, -apple-system, sans-serif; }
a { color: var(--primario); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.5rem; margin: 0 0 1rem; }
h2 { font-size: 1.15rem; margin: 1.6rem 0 .7rem; }
h3 { font-size: 1rem; margin: 0 0 .5rem; }
.suave { color: var(--suave); }
.peq { font-size: .85rem; }

/* ---------- Estructura: menú lateral + contenido ----------
   ≥ 1100 px: menú de 248 px (plegable a riel de 76 px) · 768–1099 px: riel · < 768 px: barra superior + cajón */
:root { --ancho-menu: 248px; --alto-barra: 0px; }
.app { display: flex; min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; flex: 0 0 var(--ancho-menu); width: var(--ancho-menu); box-sizing: border-box;
  background: var(--panel); border-right: 1px solid var(--borde); padding: 14px 12px; display: flex; flex-direction: column; gap: 14px;
  overflow-x: hidden; overflow-y: auto; z-index: 20; transition: flex-basis .2s ease, width .2s ease; }
.contenido { flex: 1 1 auto; min-width: 0; }
main { max-width: 1150px; margin: 0 auto; padding: 24px 24px 60px; }
.sb-cab { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 44px; }
.sb-marca { display: flex; align-items: center; gap: 10px; min-width: 0; padding-left: 4px; color: var(--texto); font-weight: 700; font-size: 1.02rem; white-space: nowrap; }
.sb-marca:hover { text-decoration: none; }
.sb-logo { width: 30px; height: 30px; flex: none; border-radius: 8px; background: var(--primario); color: var(--primario-txt);
  display: grid; place-items: center; font-weight: 800; font-size: .9rem; }
.sb-boton { width: 44px; height: 44px; flex: none; padding: 0; display: grid; place-items: center; border: 1px solid var(--borde);
  border-radius: 10px; background: var(--panel); color: var(--suave); cursor: pointer; }
.sb-boton:hover { color: var(--texto); border-color: var(--primario); }
.sb-boton svg, .nav-item svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }
.sb-cerrar { display: none; border-color: transparent; }
.sb-nav { display: flex; flex-direction: column; gap: 14px; }
.sb-grupo { display: flex; flex-direction: column; gap: 2px; }
.sb-titulo { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--suave); padding: 0 12px 4px; }
.nav-item { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 12px; box-sizing: border-box; border-radius: 10px; color: var(--texto); line-height: 1.25; }
.nav-item:hover { background: var(--gris-suave); text-decoration: none; }
.nav-item.activo { background: var(--primario-suave); color: var(--primario); font-weight: 600; }
.nav-item:focus-visible, .sb-boton:focus-visible, .sb-marca:focus-visible { outline: 2px solid var(--primario); outline-offset: 2px; }
.sb-cuenta { margin-top: auto; border: 1px solid var(--borde); border-radius: 12px; padding: 12px 14px; background: var(--bg);
  display: flex; flex-direction: column; gap: 2px; }
.sb-cuenta-l { font-size: .8rem; color: var(--suave); }
.sb-cuenta-v { font-size: 1.6rem; font-weight: 800; line-height: 1.1; }
.sb-cuenta-u { font-size: 1rem; }
.topbar, .velo { display: none; }

/* Riel de íconos: plegado a mano en escritorio, y siempre en tableta (el nombre aparece al pasar el mouse) */
@media (min-width: 1100px) {
  .menu-plegado { --ancho-menu: 76px; }
  .menu-plegado .sidebar .nav-txt, .menu-plegado .sb-marca { display: none; }
  .menu-plegado .sb-cab { justify-content: center; }
  .menu-plegado .nav-item { justify-content: center; padding: 0; }
  .menu-plegado .sb-cuenta { padding: 8px 0; align-items: center; text-align: center; }
  .menu-plegado .sb-cuenta-v { font-size: 1.1rem; }
  .menu-plegado .sb-cuenta-u { display: block; font-size: .65rem; font-weight: 600; color: var(--suave); }
}
@media (min-width: 768px) and (max-width: 1099px) {
  :root { --ancho-menu: 76px; }
  .sidebar .nav-txt, .sb-plegar { display: none; }
  .sb-cab { justify-content: center; }
  .sb-marca { padding: 0; }
  .nav-item { justify-content: center; padding: 0; }
  .sb-cuenta { padding: 8px 0; align-items: center; text-align: center; }
  .sb-cuenta-v { font-size: 1.1rem; }
  .sb-cuenta-u { display: block; font-size: .65rem; font-weight: 600; color: var(--suave); }
}
/* Móvil: barra superior fija y menú como cajón sobre un velo */
@media (max-width: 767px) {
  :root { --alto-barra: 56px; }
  .app { display: block; }
  .sidebar { position: fixed; top: 0; left: 0; bottom: 0; height: auto; width: min(300px, 86vw); z-index: 40;
    transform: translateX(-105%); visibility: hidden; box-shadow: 8px 0 24px rgba(20, 24, 33, .18);
    transition: transform .22s ease, visibility .22s; }
  .menu-abierto .sidebar { transform: none; visibility: visible; }
  .menu-abierto body { overflow: hidden; }
  .sb-plegar { display: none; }
  .sb-cerrar { display: grid; }
  .velo { display: block; position: fixed; inset: 0; z-index: 30; border: 0; padding: 0; margin: 0; background: rgba(20, 24, 33, .48);
    opacity: 0; pointer-events: none; transition: opacity .2s; }
  .menu-abierto .velo { opacity: 1; pointer-events: auto; }
  .topbar { display: flex; position: sticky; top: 0; z-index: 15; height: var(--alto-barra); box-sizing: border-box; align-items: center;
    gap: 6px; padding: 0 12px 0 6px; background: var(--panel); border-bottom: 1px solid var(--borde); }
  .topbar .sb-boton { border-color: transparent; background: transparent; color: var(--texto); }
  .topbar-marca { flex: 1; font-weight: 700; color: var(--texto); }
  .topbar-marca:hover { text-decoration: none; }
  .topbar-dias { font-size: .8rem; font-weight: 700; padding: 3px 10px; border-radius: 99px; background: var(--primario-suave); color: var(--primario); }
  main { padding: 16px 16px 48px; }
}
@media (prefers-reduced-motion: reduce) { .sidebar, .velo { transition: none; } }

.panel { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 18px; box-shadow: var(--sombra); }
.grid { display: grid; gap: 14px; }
.grid > * { min-width: 0; } /* una tabla ancha no debe ensanchar la columna (en el celular desbordaba la página) */
.kpis { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); }
.dos { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.kpi .v { font-size: 1.7rem; font-weight: 700; line-height: 1.2; }
.kpi .l { color: var(--suave); font-size: .85rem; }
.kpi .s { color: var(--suave); font-size: .8rem; margin-top: 2px; }

.btn { display: inline-block; border: 1px solid var(--borde); background: var(--panel); color: var(--texto);
  padding: 8px 14px; border-radius: 8px; cursor: pointer; font: inherit; text-decoration: none; }
.btn:hover { border-color: var(--primario); text-decoration: none; }
.btn.prim { background: var(--primario); color: var(--primario-txt); border-color: var(--primario); font-weight: 600; }
.btn.peq { padding: 4px 10px; font-size: .85rem; }
.btn.peligro { color: var(--mal); }
.btn:disabled { opacity: .5; cursor: default; }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--borde); vertical-align: top; }
th { font-size: .8rem; color: var(--suave); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-scroll { overflow-x: auto; }
tr.modulo td { background: var(--gris-suave); font-weight: 600; }

.chip { display: inline-block; padding: 1px 9px; border-radius: 99px; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.chip.fortaleza, .chip.ok { background: var(--ok-suave); color: var(--ok); }
.chip.en-desarrollo, .chip.medio { background: var(--medio-suave); color: var(--medio); }
.chip.debilidad, .chip.mal { background: var(--mal-suave); color: var(--mal); }
.chip.sin-datos, .chip.gris { background: var(--gris-suave); color: var(--suave); }
.chip.azul { background: var(--primario-suave); color: var(--primario); }

.barra { height: 8px; background: var(--gris-suave); border-radius: 99px; overflow: hidden; min-width: 80px; }
.barra > i { display: block; height: 100%; background: var(--primario); }
.barra.ok > i { background: var(--ok); } .barra.medio > i { background: var(--medio); } .barra.mal > i { background: var(--mal); }

.flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 10px; border: 1px solid var(--borde); background: var(--panel); }
.flash.ok { border-color: var(--ok); background: var(--ok-suave); }
.flash.aviso { border-color: var(--mal); background: var(--mal-suave); }
.flash.info { border-color: var(--primario); background: var(--primario-suave); }

form .campo { margin-bottom: 14px; }
label { display: block; font-weight: 600; margin-bottom: 4px; font-size: .9rem; }
input[type=text], input[type=number], input[type=search], input[type=password], input[type=tel], select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--borde); border-radius: 8px;
  background: var(--panel); color: var(--texto); font: inherit; }
textarea { min-height: 70px; resize: vertical; }
.fila { display: flex; gap: 12px; flex-wrap: wrap; }
.fila > * { flex: 1 1 180px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: normal; line-height: 1.4; }
.check input[type=checkbox] { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--primario); cursor: pointer; }

/* Modos de ronda */
.modos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 10px; }
.modo { border: 1px solid var(--borde); border-radius: var(--radio); padding: 12px; cursor: pointer; display: block; font-weight: normal; }
.modo:has(input:checked) { border-color: var(--primario); background: var(--primario-suave); }
.modo input { margin-right: 6px; }
.modo b { font-size: .95rem; }
.modo .d { color: var(--suave); font-size: .82rem; margin-top: 4px; }

/* Ronda */
.ronda-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.progreso { height: 6px; background: var(--gris-suave); border-radius: 99px; overflow: hidden; margin-bottom: 18px; }
.progreso > i { display: block; height: 100%; background: var(--primario); transition: width .3s; }
.reloj { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.1rem; }
.reloj.alerta { color: var(--mal); }
.pregunta { max-width: 860px; margin: 0 auto; }
.contexto { background: var(--gris-suave); border-left: 3px solid var(--primario); padding: 10px 14px; border-radius: 6px; margin-bottom: 12px; white-space: pre-line; }
.enunciado { font-size: 1.08rem; font-weight: 600; margin-bottom: 14px; white-space: pre-line; }
.opcion { display: flex; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; margin-bottom: 8px;
  border: 1px solid var(--borde); border-radius: var(--radio); background: var(--panel); color: var(--texto);
  font: inherit; cursor: pointer; }
.opcion:hover:not(:disabled) { border-color: var(--primario); }
.opcion .letra { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--gris-suave); font-weight: 700; font-size: .9rem; }
.opcion.sel { border-color: var(--primario); background: var(--primario-suave); }
.opcion.sel .letra { background: var(--primario); color: var(--primario-txt); }
.opcion.correcta { border-color: var(--ok); background: var(--ok-suave); }
.opcion.correcta .letra { background: var(--ok); color: #fff; }
.opcion.incorrecta { border-color: var(--mal); background: var(--mal-suave); }
.opcion.incorrecta .letra { background: var(--mal); color: #fff; }
.opcion:disabled { cursor: default; }
.confianza { margin-top: 14px; }
.confianza .acciones .btn { flex: 1 1 140px; text-align: center; }
.feedback { margin-top: 16px; padding: 14px 16px; border-radius: var(--radio); border: 1px solid var(--borde); }
.feedback.ok { background: var(--ok-suave); border-color: var(--ok); }
.feedback.mal { background: var(--mal-suave); border-color: var(--mal); }
.feedback .t { font-weight: 700; margin-bottom: 6px; }
.feedback .norma { margin-top: 8px; font-size: .88rem; color: var(--suave); }
/* «Dónde confirmarlo»: norma y artículo para verificar la respuesta */
.fuentes { margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: var(--primario-suave); border-left: 3px solid var(--primario); font-size: .9rem; }
.fuentes .t { font-weight: 700; margin-bottom: 4px; font-size: .88rem; }
.fuentes ul { margin: 0; padding-left: 18px; }
.fuentes li { margin: 2px 0; }
.fuentes .donde { font-weight: 700; color: var(--primario); }
.explicacion { white-space: pre-line; }
.atajos { margin-top: 18px; text-align: center; color: var(--suave); font-size: .8rem; }
kbd { border: 1px solid var(--borde); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; font-size: .78rem; background: var(--panel); }
.puntos { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-top: 16px; }
.puntos span { width: 22px; height: 22px; border-radius: 50%; font-size: .7rem; display: grid; place-items: center; background: var(--gris-suave); color: var(--suave); cursor: pointer; }
.puntos span.actual { outline: 2px solid var(--primario); }
.puntos span.ok { background: var(--ok); color: #fff; } .puntos span.mal { background: var(--mal); color: #fff; }
.puntos span.hecha { background: var(--primario); color: var(--primario-txt); }

/* Resultado */
.resp-item { border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px; margin-bottom: 10px; background: var(--panel); }
.resp-item.mal { border-left: 4px solid var(--mal); } .resp-item.ok { border-left: 4px solid var(--ok); }
.resp-item .ops { margin: 8px 0; padding-left: 0; list-style: none; }
.resp-item .ops li { padding: 3px 8px; border-radius: 6px; }
.resp-item .ops li.c { background: var(--ok-suave); } .resp-item .ops li.e { background: var(--mal-suave); }
.grande { font-size: 3rem; font-weight: 800; line-height: 1; }

/* Gráficas */
:root { --o1: #86b6ef; --o2: #5598e7; --o3: #2a78d6; --o4: #1c5cab; --o5: #104281; --guia: #9aa3b5; }
@media (prefers-color-scheme: dark) {
  :root { --o1: #184f95; --o2: #256abf; --o3: #3987e5; --o4: #6da7ec; --o5: #b7d3f6; --guia: #5d6677; }
}
svg.linea, svg.col { display: block; overflow: visible; }
svg.linea text, svg.col text { fill: var(--suave); font-size: 11px; font-variant-numeric: tabular-nums; }
svg.linea .eje { stroke: var(--borde); }
svg.linea .trazo { stroke: var(--primario); fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
svg.linea .area { fill: var(--primario); opacity: .1; }
svg.linea .punto { fill: var(--primario); stroke: var(--panel); stroke-width: 2; }
svg.linea .guia { stroke: var(--guia); stroke-width: 1; }
svg .meta { stroke: var(--suave); stroke-dasharray: 4 4; stroke-width: 1; }
svg text.ref { fill: var(--suave); font-size: 11px; font-weight: 600; }
svg .captura { fill: transparent; }
svg.col .base { stroke: var(--borde); }
svg.col .valor { fill: var(--texto); font-weight: 600; }
svg.col text.n { font-size: 10px; }
svg.col g:hover .barra, svg.col g:focus .barra { opacity: .8; }
svg.col g:focus { outline: none; }
path.barra.s1, .bh-barra.s1, .ap-seg.s1, .ap-sw.s1 { fill: var(--primario); background: var(--primario); }
path.barra.ok, .bh-barra.ok, .ap-seg.ok, .ap-sw.ok { fill: var(--ok); background: var(--ok); }
path.barra.medio, .bh-barra.medio, .ap-seg.medio, .ap-sw.medio { fill: var(--medio); background: var(--medio); }
path.barra.mal, .bh-barra.mal, .ap-seg.mal, .ap-sw.mal { fill: var(--mal); background: var(--mal); }
path.barra.gris, .bh-barra.gris, .ap-seg.gris, .ap-sw.gris { fill: var(--borde); background: var(--borde); }
.ap-seg.o1, .ap-sw.o1 { background: var(--o1); } .ap-seg.o2, .ap-sw.o2 { background: var(--o2); }
.ap-seg.o3, .ap-sw.o3 { background: var(--o3); } .ap-seg.o4, .ap-sw.o4 { background: var(--o4); }
.ap-seg.o5, .ap-sw.o5 { background: var(--o5); }
.valor-fin { font-size: .8rem; color: var(--suave); text-align: right; margin-top: -4px; }

/* Barras horizontales */
.bh { display: grid; gap: 2px; }
.bh-fila { display: grid; grid-template-columns: minmax(120px, 38%) 1fr 64px; gap: 12px; align-items: center; padding: 5px 0; }
.bh-cab { padding: 0; height: 16px; }
.bh-l { font-size: .9rem; line-height: 1.3; }
.bh-v { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; font-size: .9rem; }
.bh-pista { position: relative; height: 14px; background: var(--gris-suave); border-radius: 0 4px 4px 0; }
.bh-pista.sin-fondo { background: none; height: 16px; }
.bh-pista:focus { outline: 2px solid var(--primario); outline-offset: 2px; }
.bh-barra { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0 4px 4px 0; }
.bh-ic { position: absolute; top: 50%; height: 2px; margin-top: -1px; background: var(--texto); opacity: .55; }
.bh-ic::before, .bh-ic::after { content: ""; position: absolute; top: -4px; width: 2px; height: 10px; background: inherit; }
.bh-ic::before { left: 0; } .bh-ic::after { right: 0; }
.bh-ref { position: absolute; top: -3px; bottom: -3px; border-left: 1px dashed var(--suave); }
.bh-ref-l { position: absolute; transform: translateX(-50%); font-size: .72rem; color: var(--suave); font-weight: 600; white-space: nowrap; }
.bh-ref-l.izq { transform: translateX(calc(-100% - 3px)); } .bh-ref-l.der { transform: translateX(3px); }
@media (max-width: 600px) { .bh-fila { grid-template-columns: 1fr 52px; } .bh-fila .bh-l { grid-column: 1 / -1; } .bh-cab .bh-l, .bh-cab > div:first-child { display: none; } }

/* Telaraña (radar) */
svg.radar { display: block; margin: 0 auto; overflow: visible; }
svg.radar text { fill: var(--suave); font-size: 11.5px; font-variant-numeric: tabular-nums; }
svg.radar .anillo { fill: none; stroke: var(--borde); }
svg.radar .anillo.ext { stroke: var(--guia); }
svg.radar .eje { stroke: var(--borde); }
svg.radar text.rd-esc { font-size: 9.5px; opacity: .8; }
svg.radar .rd-area.s1 { fill: var(--primario); fill-opacity: .18; stroke: var(--primario); stroke-width: 2; stroke-linejoin: round; }
svg.radar .rd-area.previo { fill: none; stroke: var(--guia); stroke-width: 1.6; stroke-dasharray: 5 4; stroke-linejoin: round; }
svg.radar .rd-area.linea { fill: none; }
svg.radar .rd-p.s1 { fill: var(--primario); stroke: var(--panel); stroke-width: 2; }
svg.radar .rd-p.previo { fill: var(--guia); }
svg.radar .rd-l { fill: var(--texto); font-weight: 600; }
svg.radar .rd-v { fill: var(--primario); font-weight: 700; }
svg.radar .rd-eje { cursor: default; outline: none; }
svg.radar .rd-eje:hover .rd-l, svg.radar .rd-eje:focus .rd-l { fill: var(--primario); }
.rd-ley { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; font-size: .85rem; color: var(--suave); margin-top: 6px; }
.rd-ley span { display: inline-flex; align-items: center; gap: 6px; }
.rd-sw { width: 16px; height: 0; border-top: 3px solid var(--primario); }
.rd-sw.previo { border-top: 2px dashed var(--guia); }

/* Escala Likert en miniatura (respuesta elegida y lado de la conducta deseable) */
.lk-mini { display: inline-flex; gap: 3px; vertical-align: middle; }
.lk-mini span { width: 30px; text-align: center; font-size: .72rem; font-weight: 600; padding: 2px 0; border-radius: 4px;
  border: 1px solid var(--borde); color: var(--suave); }
.lk-mini span.deseable { border-color: var(--ok); }
.lk-mini span.recomendada { box-shadow: inset 0 -3px 0 var(--ok); }
.lk-mini span.elegida { background: var(--primario); border-color: var(--primario); color: var(--primario-txt); }
.lk-mini span.elegida.lejos { background: var(--medio); border-color: var(--medio); }
.resp-item.reflexionar { border-left: 4px solid var(--medio); }
.filtros { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.filtros .btn.activo { border-color: var(--primario); background: var(--primario-suave); color: var(--primario); font-weight: 600; }
.kpi .v.ok { color: var(--ok); } .kpi .v.medio { color: var(--medio); } .kpi .v.mal { color: var(--mal); }
.lectura li { margin-bottom: 4px; }
td .delta { font-size: .8rem; font-weight: 600; } .delta.sube { color: var(--ok); } .delta.baja { color: var(--mal); }
tr.actual td { background: var(--primario-suave); }

/* Prueba completa */
.pc-barra { position: sticky; top: var(--alto-barra); z-index: 5; background: var(--bg); padding: 8px 0; display: flex; justify-content: space-between;
  align-items: center; gap: 10px; flex-wrap: wrap; }
.pc-secciones { display: flex; gap: 6px; flex-wrap: wrap; }
.pc-secciones .btn.activo, .confianza .btn.activo { border-color: var(--primario); background: var(--primario-suave); color: var(--primario); font-weight: 600; }
.pc-nav { margin-top: 12px; justify-content: space-between; }
.pc-velo { display: none; }
.pc-afirmacion { font-size: 1.1rem; font-weight: 600; margin: 6px 0 16px; }
.pc-escala label { text-align: center; }
.pc-mapa-t { font-weight: 600; margin: 12px 0 4px; color: var(--suave); }
.pc-puntos { justify-content: flex-start; margin-top: 4px; }
.pc-puntos span { width: 28px; height: 28px; border-radius: 6px; position: relative; }
.pc-puntos span.marcada::after { content: "☆"; position: absolute; top: -9px; right: -5px; font-size: .75rem; color: var(--medio); }
.pc-aporte { display: flex; height: 26px; border-radius: 6px; overflow: hidden; background: var(--gris-suave); margin: 10px 0 6px; }
.pc-aporte span { display: grid; place-items: center; color: #fff; font-size: .78rem; font-weight: 700; min-width: 2px; }
.pc-aporte .f { background: var(--o4); } .pc-aporte .c { background: var(--o3); } .pc-aporte .i { background: var(--o2); }
.formula { font-variant-numeric: tabular-nums; }
.formula td { padding: 6px 8px; }

/* Cuadrantes confianza × acierto */
.cuadrantes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cuadrante { border: 1px solid var(--borde); border-left: 4px solid var(--borde); border-radius: 8px; padding: 10px 12px; }
.cuadrante .v { font-size: 1.6rem; font-weight: 800; line-height: 1.1; }
.cuadrante.ok { border-left-color: var(--ok); } .cuadrante.ok .v { color: var(--ok); }
.cuadrante.mal { border-left-color: var(--mal); } .cuadrante.mal .v { color: var(--mal); }
.cuadrante.medio { border-left-color: var(--medio); } .cuadrante.medio .v { color: var(--medio); }
.cuadrante.gris .v { color: var(--suave); }
select.btn { padding-right: 8px; }

/* Barra apilada */
.ap { display: flex; gap: 2px; height: 18px; }
.ap-seg { min-width: 3px; }
.ap-seg:first-child { border-radius: 4px 0 0 4px; } .ap-seg:last-child { border-radius: 0 4px 4px 0; }
.ap-seg:focus { outline: 2px solid var(--texto); outline-offset: 1px; }
.ap-ley { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 14px; margin-top: 10px; font-size: .85rem; }
.ap-item { display: flex; gap: 6px; align-items: center; }
.ap-item b { margin-left: auto; font-variant-numeric: tabular-nums; }
.ap-sw { width: 10px; height: 10px; border-radius: 3px; flex: none; }

/* Tooltip */
.tt { position: fixed; z-index: 50; pointer-events: none; opacity: 0; transition: opacity .1s; max-width: 280px;
  background: var(--texto); color: var(--panel); padding: 6px 10px; border-radius: 6px; font-size: .8rem; line-height: 1.4; }

/* Panel de análisis */
.hero { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; }
.hero .cifra { font-size: 3.4rem; font-weight: 800; line-height: 1; }
.hero .cifra small { font-size: 1.1rem; font-weight: 600; color: var(--suave); }
.escala { position: relative; height: 12px; background: var(--gris-suave); border-radius: 99px; margin: 26px 0 22px; }
.escala .rango { position: absolute; top: 0; bottom: 0; background: var(--primario); opacity: .25; border-radius: 99px; }
.escala .punto-e { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--primario); border: 2px solid var(--panel); }
.escala .marca-e { position: absolute; top: -6px; bottom: -6px; border-left: 2px solid var(--suave); }
.escala .marca-e span { position: absolute; top: -20px; transform: translateX(-50%); font-size: .75rem; font-weight: 600; color: var(--suave); white-space: nowrap; }
.escala .eje-e { position: absolute; top: 18px; font-size: .72rem; color: var(--suave); transform: translateX(-50%); }
.tres { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.indice { font-size: .85rem; color: var(--suave); }
.indice a { margin-right: 12px; white-space: nowrap; }
.nota { font-size: .82rem; color: var(--suave); margin-top: 8px; }
.seccion-t { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.seccion-t h2 { margin-bottom: .4rem; }
@media (max-width: 600px) { .hero { grid-template-columns: 1fr; } .hero .cifra { font-size: 2.8rem; } }
.vacio { padding: 30px; text-align: center; color: var(--suave); }
pre.prompt { background: var(--gris-suave); padding: 12px; border-radius: 8px; white-space: pre-wrap; font-size: .85rem; }
details summary { cursor: pointer; font-weight: 600; }

.prueba-banner { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; border-left: 4px solid var(--primario); }
.prueba-banner .grande { color: var(--primario); }
.likert-item { padding: 12px 0; border-bottom: 1px solid var(--borde); }
.likert-item .texto { font-weight: 600; margin-bottom: 8px; }
.likert-escala { display: flex; gap: 6px; flex-wrap: wrap; }
.likert-escala label { flex: 1 1 140px; border: 1px solid var(--borde); border-radius: 8px; padding: 8px 10px; cursor: pointer; font-weight: normal; font-size: .9rem; }
.likert-escala label:has(input:checked) { border-color: var(--primario); background: var(--primario-suave); }
.likert-escala input { margin-right: 6px; }

.estados { grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr)); }
@media (max-width: 600px) { .estados { grid-template-columns: 1fr; } }

/* ---------- Taller de cálculos y plazos ---------- */
.tl-como { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 10px; margin-top: 6px; }
.tl-como > div { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; background: var(--panel);
  border: 1px solid var(--borde); border-radius: var(--radio); padding: 12px 14px; }
.tl-como .suave { grid-column: 2; }
.tl-num { grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--primario-suave); color: var(--primario); font-weight: 800; }
.tl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 10px; }
.tl-card { display: flex; flex-direction: column; gap: 6px; background: var(--panel); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 14px; color: var(--texto); box-shadow: var(--sombra); transition: border-color .15s, transform .15s; }
.tl-card:hover { border-color: var(--primario); text-decoration: none; transform: translateY(-1px); }
.tl-card:focus-visible { outline: 2px solid var(--primario); outline-offset: 2px; }
.tl-card.rec { border-color: var(--primario); }
.tl-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tl-card-pie { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 6px; }

.tl-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.tl-avance { min-width: 200px; font-weight: 600; font-size: .9rem; color: var(--suave); }
.tl-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; align-items: start; }
.tl-caso { position: sticky; top: 16px; }
.tl-caso-txt { margin: 0 0 12px; font-size: 1rem; }
.tl-datos th { text-transform: none; letter-spacing: 0; font-size: .85rem; width: 55%; }
.tl-datos td { font-weight: 600; font-variant-numeric: tabular-nums; }
.tl-apoyo { margin-top: 12px; border: 1px solid var(--borde); border-radius: 8px; padding: 8px 12px; background: var(--bg); }
.tl-apoyo[open] summary { margin-bottom: 8px; }
.tl-apoyo .tl-regla { margin: 0 0 10px; }
.tl-regla { background: var(--primario-suave); border-left: 3px solid var(--primario); border-radius: 6px; padding: 10px 12px; }
.tl-tabla { font-size: .85rem; margin: 6px 0; }
.tl-tabla th, .tl-tabla td { padding: 5px 6px; }
.tl-lista { margin: 4px 0; padding-left: 18px; font-size: .9rem; }
.tl-lista li { margin: 3px 0; }

.tl-pasos { display: flex; flex-direction: column; gap: 10px; }
.tl-paso { display: grid; grid-template-columns: 34px 1fr; gap: 12px; background: var(--panel); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 14px; transition: opacity .2s, border-color .2s; }
.tl-paso.pendiente { opacity: .45; }
.tl-paso.pendiente .tl-zona { display: none; }
.tl-paso.actual { border-color: var(--primario); box-shadow: 0 0 0 3px var(--primario-suave); }
.tl-paso.ok { border-left: 4px solid var(--ok); }
.tl-paso.ayuda { border-left: 4px solid var(--medio); }
.tl-paso-n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .9rem;
  background: var(--gris-suave); color: var(--suave); }
.tl-paso.actual .tl-paso-n { background: var(--primario); color: var(--primario-txt); }
.tl-paso.ok .tl-paso-n { background: var(--ok); color: #fff; }
.tl-paso.ok .tl-paso-n::before { content: "✓"; } .tl-paso.ok .tl-paso-n { font-size: 0; } .tl-paso.ok .tl-paso-n::before { font-size: .95rem; }
.tl-paso.ayuda .tl-paso-n { background: var(--medio); color: #fff; }
.tl-preg { font-weight: 600; margin: 3px 0 8px; }
.tl-form { display: flex; gap: 8px; flex-wrap: wrap; }
.tl-input { flex: 1 1 220px; display: flex; align-items: center; border: 1px solid var(--borde); border-radius: 8px; background: var(--panel); }
.tl-input:focus-within { border-color: var(--primario); box-shadow: 0 0 0 3px var(--primario-suave); }
.tl-input input { border: 0; background: transparent; font-size: 1.05rem; font-variant-numeric: tabular-nums; padding: 9px 10px; min-width: 0; flex: 1; }
.tl-input input:focus { outline: none; }
.tl-u { padding: 0 10px; color: var(--suave); font-weight: 600; white-space: nowrap; }
.tl-u.pre { padding-right: 0; }
.tl-signo { flex: none; align-self: stretch; min-width: 40px; border: 0; border-left: 1px solid var(--borde); background: none;
  color: var(--suave); font: inherit; font-weight: 700; cursor: pointer; border-radius: 0 8px 8px 0; }
.tl-signo:hover { color: var(--primario); }
.tl-opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.tl-op { flex: 1 1 160px; text-align: center; }
.tl-op.tl-mal { border-color: var(--mal); background: var(--mal-suave); color: var(--mal); text-decoration: line-through; }
.tl-fb { margin-top: 8px; padding: 9px 12px; border-radius: 8px; font-size: .93rem; }
.tl-fb.ok { background: var(--ok-suave); border-left: 3px solid var(--ok); }
.tl-fb.mal { background: var(--mal-suave); border-left: 3px solid var(--mal); }
.tl-paso.ayuda .tl-fb.mal { background: var(--medio-suave); border-left-color: var(--medio); }
.tl-exp { margin-top: 4px; color: var(--texto); }
.tl-seguir { margin-top: 8px; }
.tl-fin { border-color: var(--primario); }
.tl-fin-cab { display: flex; gap: 16px; align-items: center; margin-bottom: 12px; }
.tl-fin-cifra { font-size: 2.6rem; font-weight: 800; line-height: 1; color: var(--primario); white-space: nowrap; }
.tl-fin-cifra small { font-size: 1rem; color: var(--suave); font-weight: 600; }
@media (max-width: 999px) {
  .tl-layout { grid-template-columns: minmax(0, 1fr); }
  .tl-caso { position: static; }
}
@media (prefers-reduced-motion: reduce) { .tl-card, .tl-paso { transition: none; } }

/* ---------- Sesión (modo servidor) ---------- */
.sb-salir { margin: 0; }
.sb-salir .nav-item { width: 100%; border: 0; background: none; font: inherit; color: var(--texto); cursor: pointer; text-align: left; }
.entrar-pagina { background: var(--bg); }
.entrar { max-width: 400px; margin: 0 auto; padding: 48px 16px; }
.entrar-marca { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 16px; font-size: 1.1rem; }
.entrar-panel h1 { margin: 0 0 4px; }
.entrar-panel input:not([type=checkbox]) { width: 100%; box-sizing: border-box; }
.entrar-boton { width: 100%; margin-top: 6px; }
.entrar-panel textarea { width: 100%; box-sizing: border-box; }
.ayuda { display: block; margin-top: 4px; font-size: .8rem; font-weight: normal; color: var(--suave); }
.sol-form { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; min-width: 280px; }
.sol-form input[type=text] { flex: 1 1 160px; }
.sol-crear { margin-top: 6px; }
.sol-crear summary { cursor: pointer; color: var(--primario); }
.sol-crear .sol-form { margin-top: 6px; }
.credenciales { font-size: 1.1rem; }
.credenciales code { font-size: 1.15rem; user-select: all; }

/* ---------- Perfil de estudio ---------- */
.pf-frases { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }
.pf-plan { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.pf-plan li > div:first-child { display: inline; }
.pf-plan li { padding-left: 2px; }
.pf-plan-acc { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.pf-form { display: inline; margin: 0; }
.pf-rasgos { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.pf-rasgos .cuadrante { display: flex; flex-direction: column; gap: 4px; background: var(--panel); }
.pf-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 10px; }
.pf-card { display: flex; flex-direction: column; gap: 6px; background: var(--panel); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 12px 14px; box-shadow: var(--sombra); }
.pf-card > div:last-child:has(.pf-form) { margin-top: auto; padding-top: 2px; }
.pf-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.pf-antidoto { padding: 6px 10px; border-radius: 8px; background: var(--gris-suave); }
.pf-regla { font-size: .9rem; padding: 8px 12px; border-radius: 8px; background: var(--primario-suave); border-left: 3px solid var(--primario); }
.pf-mas { margin-top: 10px; }
.pf-mas summary { cursor: pointer; font-weight: 600; color: var(--primario); }
.pf-mas[open] summary { margin-bottom: 10px; }
td.pf-mal { color: var(--mal); } td.pf-bien { color: var(--ok); }

/* ---------- Ajustes para móvil (< 768 px) ---------- */
@media (min-width: 768px) { .solo-movil { display: none !important; } }
@media (max-width: 767px) {
  .solo-escritorio, .txt-largo, .atajos { display: none !important; }
  h1 { font-size: 1.3rem; }
  h2 { font-size: 1.05rem; margin-top: 1.3rem; }
  .panel { padding: 14px; overflow-x: auto; }  /* una tabla ancha se desplaza dentro de su panel, no la página */
  .grid { gap: 10px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi .v { font-size: 1.35rem; }
  .dos, .tres, .estados { grid-template-columns: minmax(0, 1fr); }
  th, td { padding: 8px 6px; }
  .ronda-top { align-items: flex-start; }
  .ronda-top > .acciones { width: 100%; }
  .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .35em; }
  .btn.peq { min-height: 36px; }
  .opcion { padding: 12px; }
  .prueba-banner { gap: 12px; }
  .grande { font-size: 2.4rem; }
  .cuadrantes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .filtros { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .filtros .btn { flex: none; }

  /* Dominio por indicador (Inicio): cada fila es una tarjeta */
  .tabla-dominio, .tabla-dominio tbody { display: block; }
  .tabla-dominio tr.cab { display: none; }
  .tabla-dominio tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center;
    padding: 12px 0; border-bottom: 1px solid var(--borde); }
  .tabla-dominio tr.modulo { display: block; padding: 0; border: 0; }
  .tabla-dominio tr.modulo td { display: block; padding: 6px 8px; border-radius: 6px; }
  .tabla-dominio td { border: 0; padding: 0; text-align: left; }
  .tabla-dominio .t-nombre { grid-column: 1; grid-row: 1; font-weight: 600; line-height: 1.35; }
  .tabla-dominio .t-dominio { grid-column: 2; grid-row: 1; font-weight: 800; font-size: 1.05rem; }
  .tabla-dominio .t-barra { grid-column: 1 / -1; width: auto !important; }
  .tabla-dominio .t-barra .barra { min-width: 0; }
  .tabla-dominio .t-acierto { grid-column: 1; grid-row: 3; font-size: .82rem; color: var(--suave); }
  .tabla-dominio .t-acierto::before { content: "Acierto "; }
  .tabla-dominio .t-estado { grid-column: 2; grid-row: 3; justify-self: end; }
  .tabla-dominio .t-accion { grid-column: 1 / -1; }
  .tabla-dominio .t-accion .btn { width: 100%; }
  .tabla-dominio .t-banco, .tabla-dominio .t-vistas, .tabla-dominio .t-resp { display: none; }

  /* Prueba completa: navegación fija abajo y el mapa como hoja inferior */
  .pc-pagina { padding-bottom: 84px; }
  .pc-barra { padding: 6px 0; gap: 6px; }
  .pc-barra > .acciones { width: 100%; justify-content: space-between; flex-wrap: nowrap; }
  .pc-secciones { flex-wrap: nowrap; overflow-x: auto; width: 100%; }
  .pc-secciones .btn { flex: none; }
  .pc-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 12; margin: 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: var(--panel); border-top: 1px solid var(--borde); display: grid; grid-template-columns: 1fr auto 1fr 1fr; gap: 8px; }
  .pc-nav .btn { min-height: 48px; padding: 0 10px; }
  #mapa-det { display: none; }
  .mapa-abierto #mapa-det { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 36; margin: 0; max-height: 72vh;
    overflow-y: auto; border-radius: 18px 18px 0 0; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
  .mapa-abierto #mapa-det summary { pointer-events: none; list-style: none; }
  .mapa-abierto .pc-velo { display: block; position: fixed; inset: 0; z-index: 35; border: 0; padding: 0; background: rgba(20, 24, 33, .48); }
  .pc-puntos span { width: 36px; height: 36px; }
}