/* Damocles · capa de UX (planes, candados, avisos). Estilos nuevos de la rama ux-autoexplicativo; app.css queda como estaba. */

/* Barra global: cuenta creada pero correo sin confirmar */
.ux-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; padding: 9px 16px;
  background: rgba(240, 172, 60, .10); border-bottom: 1px solid var(--high); color: var(--text); font-size: 14px; line-height: 1.4; }
.ux-bar b { color: var(--high); font-weight: 600; }
.ux-bar form { margin: 0; display: inline; }
.ux-bar-btn { font: 600 12px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--accent-ink); background: var(--high);
  border: 0; border-radius: 3px; padding: 8px 12px; min-height: 36px; cursor: pointer; }
.ux-bar-btn:hover { filter: brightness(1.1); }
.ux-bar a { color: var(--accent-2); }

/* Aviso de error del formulario de ventas (con los datos ya escritos) */
.ux-error { margin-bottom: 12px; }

/* ================= Menú principal agrupado (EXPLORAR · ANALIZAR · INFORMES) y Planes ================= */
.nav { gap: 8px; flex-wrap: wrap; row-gap: 6px; }  /* si no cabe todo, la barra de la derecha baja a otra fila en vez de montarse */
.nav-main { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.nav-group { position: relative; }
.nav-grp-btn { display: inline-flex; align-items: center; gap: 7px; font: 500 12.5px var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-2); background: none; border: 1px solid transparent; border-radius: 2px; padding: 9px 12px; cursor: pointer; white-space: nowrap; }
.nav-grp-btn .car { font-size: 10px; opacity: .8; }
.nav-group:hover .nav-grp-btn, .nav-group.open .nav-grp-btn { color: var(--text); background: rgba(46, 168, 240, .06); }
.nav-group.on .nav-grp-btn { color: var(--accent); background: rgba(46, 168, 240, .08); border-color: rgba(46, 168, 240, .12); }
.nav-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 320px; padding: 6px; z-index: 60;
  background: var(--panel-solid); border: 1px solid var(--line-2); box-shadow: 0 14px 34px rgba(0, 0, 0, .45); }
.nav-group:hover .nav-menu, .nav-group:focus-within .nav-menu, .nav-group.open .nav-menu { display: block; }
.nav-menu a { display: block; padding: 10px 12px; border-radius: 2px; border: 1px solid transparent; min-height: 44px; }
.nav-menu a:hover { background: rgba(46, 168, 240, .08); }
.nav-menu a.on { background: rgba(46, 168, 240, .08); border-color: rgba(46, 168, 240, .14); }
.nm-l { display: flex; align-items: center; font: 600 13px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text); }
.nav-menu a.on .nm-l { color: var(--accent); }
.nm-d { display: block; margin-top: 3px; font: 400 13px/1.4 var(--sans); color: var(--text-2); }
.plan-badge { font: 700 11px/1 var(--mono); font-style: normal; letter-spacing: .08em; margin-left: 9px; padding: 3px 6px; border-radius: 2px;
  border: 1px solid var(--accent); color: var(--accent); }
.nav-planes { font: 700 13px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent);
  border: 1px solid var(--accent); border-radius: 2px; padding: 8px 14px; white-space: nowrap; }
.nav-planes:hover, .nav-planes.on { filter: brightness(1.12); }
.nav-burger, .nav-m-extra, .m-only { display: none; }
.nav a:focus-visible, .nav button:focus-visible, .nav select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 1480px) and (min-width: 1201px) {  /* escritorio justo: se compacta sin perder el menú */
  .nav-grp-btn { padding: 9px 8px; letter-spacing: .06em; }
  .nav-right { gap: 6px; }
  .nav-right .country-sel select { width: 132px; text-overflow: ellipsis; }
  .nav-right .btn-login { padding: 8px 9px; letter-spacing: .06em; }
  .nav-right .view-as select { max-width: 112px; }
  .nav-planes { padding: 8px 11px; letter-spacing: .08em; }
}
@media (max-width: 1200px) {
  .nav { flex-wrap: wrap; padding: 10px 16px; row-gap: 8px; }
  .logo { margin-right: auto; }
  .nav-burger { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; order: 2; width: 44px; height: 44px;
    background: none; border: 1px solid var(--line-2); border-radius: 2px; cursor: pointer; padding: 0; }
  .nav-burger span, .nav-burger::before, .nav-burger::after { content: ""; display: block; width: 20px; height: 2px; background: var(--text); border-radius: 1px; }
  .nav-burger span { margin: 0; }
  .nav-right { order: 3; flex-basis: 100%; margin-left: 0; flex-wrap: wrap; gap: 8px; }
  .nav-right .country-sel, .nav-right .hide-m, .clock { display: none; }
  .nav-right .btn-login, .nav-right .nav-planes { display: inline-flex; align-items: center; min-height: 44px; }
  .nav-right .nav-planes { padding: 0 18px; }
  .nav-right .btn-login.hide-m { display: none; }
  .nav-right .view-as select { min-height: 44px; }
  .m-only { display: inline; }
  .nav-main { order: 4; flex-basis: 100%; display: none; flex-direction: column; align-items: stretch; gap: 0; max-height: calc(100vh - 140px); overflow-y: auto;
    border-top: 1px solid var(--line); padding-top: 6px; }
  .nav.open .nav-main { display: flex; }
  .nav-group { border-bottom: 1px solid var(--line); padding-bottom: 4px; }
  .nav-grp-btn, .nav-group:hover .nav-grp-btn, .nav-group.on .nav-grp-btn { pointer-events: none; padding: 10px 2px 4px; color: var(--accent); background: none; border-color: transparent; font-size: 12px; letter-spacing: .18em; }
  .nav-grp-btn .car { display: none; }
  .nav-menu { display: block; position: static; min-width: 0; padding: 0; background: none; border: 0; box-shadow: none; }
  .nav-menu a { padding: 9px 2px; min-height: 48px; }
  .nav-m-extra { display: block; padding: 10px 0 12px; }
  .nav-m-country { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
  .nav-m-country select { flex: 1; min-height: 44px; background: var(--panel-solid); color: var(--text); border: 1px solid var(--line-2); border-radius: 2px;
    font: 500 13px var(--mono); letter-spacing: .08em; padding: 0 10px; }
  .nav-m-link { display: flex; align-items: center; min-height: 44px; color: var(--text-2); font: 500 13px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
}
@media (max-width: 720px) {
  .ticker { display: none; }
  .logo-name { font-size: 15px; letter-spacing: .06em; }
  .nav-right .btn-login, .nav-right .nav-planes { font-size: 12px; letter-spacing: .06em; padding-left: 12px; padding-right: 12px; }
  .nav-right .nav-planes { padding: 0 14px; }
}

/* ================= Modal de invitación accesible ================= */
html.modal-open { overflow: hidden; }
.invite-box h2 { margin: 10px 0 8px; padding-right: 44px; font-size: 26px; line-height: 1.2; }
.invite-box .x { top: 6px; right: 6px; width: 44px; height: 44px; display: grid; place-items: center; font-size: 28px; line-height: 1; border-radius: 2px; }
.invite-box .x:hover { color: var(--text); background: rgba(46, 168, 240, .08); }
.invite-box .x:focus-visible, .invite-box .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.inv-list { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 7px; font-size: 15px; color: var(--text); }
.inv-list[hidden] { display: none; }
.inv-price { margin: 14px 0 0; font: 600 15px var(--mono); letter-spacing: .02em; color: var(--accent); }
.inv-price:empty { display: none; }
.inv-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.inv-actions .btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 600px) {
  .invite-box { padding: 22px 18px; }
  .invite-box h2 { font-size: 22px; }
  .inv-actions { flex-direction: column; }
  .inv-actions .btn { width: 100%; }
}

/* ================= Cabecera de página explicada y términos con ayuda ================= */
.page-head { margin-bottom: 4px; }
.page-head h1 { font-size: 34px; margin-top: 10px; }
.page-head .ph-what { margin: 8px 0 0; font-size: 17px; color: var(--text-2); max-width: 900px; }
.page-head .ph-data { margin: 8px 0 0; font-size: 14px; color: var(--text-2); max-width: 900px; }
.page-head .ph-data b { font: 600 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-right: 6px; }
.page-head .ph-help { display: inline-block; margin-top: 10px; font: 500 13px var(--mono); letter-spacing: .04em; color: var(--accent-2, var(--accent)); }
.term { position: relative; color: inherit; text-decoration: none; border-bottom: 1px dotted var(--accent); cursor: help; }
.term:hover, .term:focus-visible { color: var(--accent); }
.term:hover::after, .term:focus-visible::after { content: attr(data-tip); position: absolute; left: 0; top: calc(100% + 6px); z-index: 70; width: max-content;
  max-width: min(320px, 80vw); padding: 8px 10px; background: var(--panel-solid); border: 1px solid var(--line-2); box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  font: 400 13px/1.45 var(--sans); letter-spacing: 0; text-transform: none; color: var(--text); white-space: normal; text-align: left; }
.glosario { display: grid; gap: 14px; margin-top: 6px; }
.glosario dt { font: 600 20px var(--display); color: var(--text); scroll-margin-top: 90px; }
.glosario dd { margin: 4px 0 0; color: var(--text-2); max-width: 820px; }
.glosario .gl-item { padding: 16px 18px; border: 1px solid var(--line); background: var(--panel-solid); }
.glosario .gl-item:target { border-color: var(--accent); }
.glosario .gl-short { color: var(--text); font-size: 16px; margin: 6px 0 0; }

/* ================= /planes: columnas, tabla comparativa, calculadora, créditos y preguntas frecuentes ================= */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pl-h2 { font-size: 28px; margin-top: 10px; }
.pl-lead { margin: 8px 0 0; max-width: 900px; font-size: 16px; }
.pl-ciclo { display: inline-flex; margin-top: 16px; border: 1px solid var(--line-2); border-radius: 2px; overflow: hidden; }
.pl-ciclo-b { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; font: 600 13px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.pl-ciclo-b em { font: 500 11px var(--mono); font-style: normal; letter-spacing: .06em; color: var(--low); text-transform: none; }
.pl-ciclo-b[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.pl-ciclo-b[aria-pressed="true"] em { color: var(--accent-ink); }
.pl-ciclo-b:hover { color: var(--text); }
.pl-ciclo-b[aria-pressed="true"]:hover { color: var(--accent-ink); }
.pl[data-ciclo="mensual"] .ciclo-a, .pl[data-ciclo="anual"] .ciclo-m { display: none; }

.pl-foco { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 18px; padding: 14px 18px; border: 1px solid var(--accent); background: rgba(46, 168, 240, .09); color: var(--text); }
.pl-foco.ya { border-color: var(--low); background: rgba(67, 200, 138, .08); }
.pl-foco.ninguno { border-color: var(--high); background: rgba(240, 172, 60, .08); }
.pl-foco a { font: 600 13px var(--mono); letter-spacing: .06em; }

.pl-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.pl-card { display: flex; flex-direction: column; gap: 8px; padding: 22px 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 2px; }
.pl-card.feat { background: var(--bg-2); box-shadow: inset 0 3px 0 var(--accent); }
.pl-card.mine { border-color: var(--accent); }
.pl-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pl-top h2 { font-size: 24px; }
.pl-who { margin: 0; color: var(--text-2); font-size: 14px; min-height: 3.1em; }
.pl-price { margin-top: 6px; font: 600 36px/1.1 var(--display); }
.pl-price b { font-weight: 600; }
.pl-price i { display: block; font: 400 14px var(--sans); font-style: normal; color: var(--text-2); }
.pl-clp { font: 500 13px var(--mono); color: var(--accent-2); min-height: 2.6em; }
.pl-min { font-size: 13px; color: var(--text-2); }
.pl-cta { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-top: 4px; }
.pl-cta .pl-btn { width: 100%; justify-content: center; text-align: center; min-height: 48px; }
.pl-form { margin: 0; }
.pl-sec { text-align: center; font: 500 13px var(--mono); letter-spacing: .04em; padding: 6px 0; }
.pl-state { text-align: center; padding: 14px 10px; border: 1px solid var(--line-2); color: var(--low); font: 600 13px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.pl-micro { margin: 0; font-size: 12.5px; color: var(--muted); text-align: center; }
.pl-ben { margin: 10px 0 0; padding-left: 18px; color: var(--text); font-size: 14px; line-height: 1.55; flex: 1; }
.pl-ben li { margin-bottom: 5px; }
.pl-nota { margin: 4px 0 0; font-size: 13px; color: var(--text-2); }
.pl-no { margin: 8px 0 0; padding-top: 10px; border-top: 1px dashed var(--line-2); font-size: 13px; color: var(--muted); }
.pl-no b { color: var(--text-2); font-weight: 600; }

.pl-tabla-wrap { overflow-x: auto; position: relative; }  /* relative: el texto .sr (absoluto) no debe ensanchar la página */
.pl-tabla-wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pl-tabla { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 14px; }
.pl-tabla th, .pl-tabla td { padding: 11px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.pl-tabla thead th { position: sticky; top: 0; background: var(--panel-solid); font: 600 13px var(--mono); letter-spacing: .08em; text-transform: uppercase; z-index: 1; }
.pl-tabla thead th .tag { margin-left: 8px; }
.pl-tabla tbody th[scope="row"] { font-weight: 500; width: 32%; }
.pl-tabla tbody th small { display: block; margin-top: 2px; font-weight: 400; font-size: 12.5px; color: var(--muted); }
.pl-tabla tr.grp th { padding-top: 18px; background: var(--bg-2); font: 600 12px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.pl-tabla td.ok { color: var(--text); }
.pl-tabla td.ok span[aria-hidden] { color: var(--low); font-weight: 700; }
.pl-tabla td.no { color: var(--muted); }
.pl-tabla td.no span[aria-hidden] { color: var(--crit); }
.pl-tabla td.mine, .pl-tabla th.mine { background: rgba(46, 168, 240, .07); }
.pl-tabla tr.desde th, .pl-tabla tr.desde td { background: rgba(240, 172, 60, .13); box-shadow: inset 0 1px 0 var(--high), inset 0 -1px 0 var(--high); }
.pl-tabla tr.desde th[scope="row"] { color: var(--high); }
.pl-tabla tr[id] { scroll-margin-top: 110px; }

.pl-calc { display: flex; flex-wrap: wrap; gap: 18px 36px; align-items: flex-end; margin-top: 18px; }
.pl-calc-in { display: grid; gap: 6px; font: 500 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.pl-calc-in input { width: 140px; min-height: 48px; padding: 8px 12px; background: var(--bg-2); border: 1px solid var(--line-2); color: var(--text); font: 600 24px var(--display); border-radius: 2px; }
.pl-calc-in input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pl-calc-out { display: flex; flex-wrap: wrap; gap: 14px 36px; }
.pl-calc-out > div { display: grid; gap: 2px; }
.pl-calc-out b { font: 600 28px var(--display); }
.pl-calc-out i { font: 500 13px var(--mono); font-style: normal; color: var(--accent-2); }
.pl-calc-nota { margin: 14px 0 0; font-size: 14px; }
.pl-calc-ventas { margin: 8px 0 0; font-size: 14px; color: var(--high); }
.pl-calc-ventas[hidden] { display: none; }

.pl-cr h3 { font-size: 17px; margin-bottom: 8px; }
.pl-lista { margin: 0 0 10px; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; }
.pl-packs { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.pl-pack { display: grid; gap: 2px; min-width: 150px; padding: 12px 16px; border: 1px solid var(--line-2); background: var(--bg-2); }
.pl-pack span { font: 600 18px var(--display); color: var(--accent); }
.pl-pack i { font: 500 12.5px var(--mono); font-style: normal; color: var(--text-2); }

.pl-faq { display: grid; gap: 8px; margin-top: 14px; max-width: 980px; }
.pl-faq details { border: 1px solid var(--line); background: var(--panel-solid); }
.pl-faq summary { cursor: pointer; padding: 14px 18px; min-height: 44px; font: 600 16px var(--display); list-style: none; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.pl-faq summary::-webkit-details-marker { display: none; }
.pl-faq summary::after { content: "+"; font: 400 22px var(--mono); color: var(--accent); }
.pl-faq details[open] summary::after { content: "–"; }
.pl-faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pl-faq p { margin: 0; padding: 0 18px 16px; color: var(--text-2); font-size: 15px; }
.pl-ventas { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px 36px; }

@media (max-width: 1200px) { .pl-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .pl-cards { grid-template-columns: 1fr; }
  .pl-card.feat { order: -1; }              /* en móvil el plan destacado va primero */
  .pl-who, .pl-clp { min-height: 0; }
  .pl-h2 { font-size: 23px; }
  .pl-ciclo { display: flex; }
  .pl-ciclo-b { flex: 1; justify-content: center; padding: 0 10px; }
  .pl-calc-in input { width: 100%; }
  .pl-tabla th, .pl-tabla td { padding: 10px 10px; }
  .pl-tabla tbody th[scope="row"] { position: sticky; left: 0; background: var(--panel-solid); min-width: 150px; z-index: 1; }
  .pl-tabla tr.desde th[scope="row"] { background: #2a2417; }
}
@media (prefers-reduced-motion: no-preference) { .pl-tabla tr.desde { animation: pl-flash 1.6s ease-out 1; } }
@keyframes pl-flash { from { outline: 2px solid var(--high); } to { outline: 2px solid transparent; } }

/* /soluciones: franja que lleva a /planes */
.sol-planes { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px 36px; }

/* /registro: aviso del correo de organización y pasos visibles */
.reg-org { margin: 10px 0 14px; padding: 12px 14px; border: 1px solid var(--high); background: rgba(240, 172, 60, .08); font-size: 14px; color: var(--text); }
.reg-org b { color: var(--high); }
.reg-pasos { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 16px; padding: 0; }
.reg-pasos li { display: flex; gap: 8px; align-items: flex-start; padding: 10px; border: 1px solid var(--line-2); font-size: 13px; color: var(--text-2); }
.reg-pasos li b { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-2); font: 600 12px var(--mono); }
.reg-pasos li.on { border-color: var(--accent); color: var(--text); }
.reg-pasos li.on b { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
@media (max-width: 520px) { .reg-pasos { grid-template-columns: 1fr; } }

/* /cuenta: primeros pasos del plan Free */
.acct-pasos-l { margin: 10px 0 0; padding-left: 22px; display: grid; gap: 8px; }
.acct-pasos-l li { padding-left: 4px; }
.acct-pasos-l li a { font-weight: 600; margin-right: 8px; }
@media (max-width: 720px) { .sol-demo { grid-template-columns: 1fr !important; padding: 24px 16px !important; gap: 20px !important; } }

/* ================= Portada (/): hero, «Qué obtienes», «Cómo funciona», muestra viva y cierre ================= */
.ho-sec-h { margin-bottom: 14px; }
.ho-h2 { font-size: 30px; margin-top: 10px; letter-spacing: -.015em; }
.ho-hero { padding: 44px 50px 36px; }
.ho-hero h1 { font-size: 46px; line-height: 1.08; letter-spacing: -.025em; margin: 14px 0 18px; max-width: 1080px; }
.ho-hero h1 em { font-style: normal; color: var(--accent); }
.ho-hero .lead { font-size: 20px; color: var(--text-2); line-height: 1.55; max-width: 900px; margin: 0; }
.ho-para { margin: 10px 0 0; font: 500 13px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text); }
.ho-cta { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px 18px; margin-top: 26px; }
.ho-cta-main { position: relative; padding-bottom: 30px; }   /* el microcopy cuelga bajo el botón sin ensanchar la columna */
.ho-micro { position: absolute; left: 0; top: calc(100% - 22px); white-space: nowrap; font: 500 12px var(--mono); letter-spacing: .06em; color: var(--text-2); }
.ho-link { align-self: center; padding: 14px 4px; font: 600 13px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.ho-link:hover { color: var(--accent-2); }
.ho-marca { margin: 26px 0 0; padding-top: 16px; border-top: 1px solid var(--line); max-width: 760px; font-size: 20px; font-style: italic; color: var(--text); }

/* con sesión: una sola línea y los planes plegados */
.ho-ses { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 14px 20px; }
.ho-ses-txt { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; font-size: 15px; color: var(--text-2); }
.ho-ses-txt b { color: var(--text); font: 600 15px var(--display); }
.ho-ses-txt span + span::before { content: "·"; margin-right: 18px; color: var(--muted); }
.ho-det { border: 1px dashed var(--line-2); border-radius: 2px; }
.ho-det > summary { cursor: pointer; padding: 12px 20px; min-height: 44px; display: flex; align-items: center; font: 500 12px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); }
.ho-det > summary:hover { color: var(--text); }
.ho-det > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ho-det[open] > summary { border-bottom: 1px dashed var(--line-2); }
.ho-det .ho-qo { padding: 18px 20px 12px; }

/* Qué obtienes: 4 tarjetas; en móvil, carrusel con scroll-snap */
.ho-qo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.ho-qo-grid:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.ho-qo-card { display: flex; flex-direction: column; gap: 6px; padding: 20px 20px 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 2px; min-width: 0; }
.ho-qo-card.feat { background: var(--bg-2); box-shadow: inset 0 3px 0 var(--accent); }
.ho-qo-card.mine { border-color: var(--accent); }
.ho-qo-card h3 { font-size: 22px; }
.ho-price { margin-top: 4px; font: 600 32px/1.1 var(--display); }
.ho-price i { font: 400 14px var(--sans); font-style: normal; color: var(--text-2); }
.ho-clp { font: 500 12.5px var(--mono); color: var(--accent-2); min-height: 1.4em; }
.ho-ben { margin: 10px 0 14px; padding-left: 18px; font-size: 14.5px; line-height: 1.5; flex: 1; }
.ho-ben li { margin-bottom: 6px; }
.ho-qo-card .pl-cta { margin-top: auto; }
.ho-qo-pie { margin: 12px 0 0; font: 500 13px var(--mono); letter-spacing: .06em; }

/* Cómo funciona: cifras, tres pasos y cobertura */
.ho-cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 18px 0 8px; }
.ho-cifras .kpi { padding: 14px 16px; border: 1px solid var(--line); background: var(--bg-2); }
.ho-cifras .kpi .v { font-size: 32px; margin-top: 6px; }
.ho-pasos { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ho-pasos li { display: flex; gap: 14px; align-items: flex-start; }
.ho-pasos li > b { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--accent); color: var(--accent); font: 600 15px var(--mono); }
.ho-pasos h3 { font-size: 19px; margin: 3px 0 6px; }
.ho-pasos p { margin: 0; color: var(--text-2); font-size: 15px; line-height: 1.55; }
.ho-cob { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
.ho-cob h3 { font-size: 19px; }
.ho-cob > .t2 { margin: 6px 0 12px; font-size: 14.5px; max-width: 860px; }
.ho-cob-fila { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 8px 18px; padding: 10px 0; border-top: 1px dashed var(--line); align-items: start; }
.ho-cob-t { display: grid; gap: 2px; }
.ho-cob-t b { font: 600 13px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.ho-cob-t span { font-size: 13px; color: var(--muted); }
.ho-cob ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ho-cob li { padding: 5px 10px; border: 1px solid var(--line-2); border-radius: 2px; font-size: 14px; background: var(--bg-2); }
.ho-cob li i { font: 500 12px var(--mono); font-style: normal; color: var(--text-2); margin-left: 4px; }

/* muestra viva */
.ho-vivo { display: grid; gap: 22px; scroll-margin-top: 90px; }
.ho-vivo > * { min-width: 0; }
.ho-vivo-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 14px 28px; }
.ho-vivo-n { margin: 8px 0 0; font-size: 15px; max-width: 760px; }
.ho-filtros { display: grid; gap: 10px; justify-items: end; }
.ho-feat-b { padding: 34px 44px 40px; }
.sol-band .ho-dif { margin: 0; padding: 16px 20px 0; max-width: 980px; font-size: 15.5px; }

/* cierre */
.ho-cierre { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 22px 40px; padding: 36px 44px; border-color: var(--line-2); }
.ho-cierre > div:first-child { flex: 1 1 520px; }
.ho-cierre .t2 { margin: 10px 0 0; max-width: 860px; font-size: 16px; }
.ho-cierre .ho-cta { margin-top: 0; }

@media (max-width: 1100px) {
  .ho-qo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ho-pasos { grid-template-columns: 1fr; }
  .ho-filtros { justify-items: start; }
  .ho-hero { padding: 32px 30px; }
  .ho-hero h1 { font-size: 38px; }
  .ho-feat-b { padding: 26px 28px 30px; }
}
@media (max-width: 720px) {
  .ho-h2 { font-size: 23px; }
  .ho-hero { padding: 20px 16px 22px; }
  .ho-hero h1 { font-size: 26px; line-height: 1.12; margin: 8px 0 10px; }
  .ho-hero .lead { font-size: 15.5px; line-height: 1.45; }
  .ho-para { font-size: 11.5px; margin-top: 8px; }
  .ho-cta { flex-direction: column; align-items: stretch; margin-top: 16px; gap: 10px; }
  .ho-cta-main { padding-bottom: 0; display: grid; gap: 8px; }
  .ho-cta .btn { width: 100%; justify-content: center; text-align: center; min-height: 48px; }
  .ho-micro { position: static; white-space: normal; text-align: center; font-size: 11.5px; letter-spacing: .02em; }
  .ho-hero .ho-link { display: none; }
  .ho-marca { font-size: 16px; margin-top: 18px; }
  .ho-cierre { padding: 22px 16px; }
  .ho-cierre .ho-link { text-align: center; }
  /* «Qué obtienes» en carrusel horizontal: la tarjeta siguiente asoma para invitar a deslizar */
  .ho-qo-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 -16px; padding: 2px 16px 12px; scroll-padding: 0 16px; -webkit-overflow-scrolling: touch; }
  .ho-det .ho-qo-grid { margin: 0 -20px; padding: 2px 20px 12px; }
  .ho-qo-card { flex: 0 0 82%; scroll-snap-align: start; }
  .ho-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ho-cifras .kpi .v { font-size: 26px; }
  .ho-cob-fila { grid-template-columns: 1fr; }
  .ho-feat-b { padding: 20px 18px 24px; }
  .ho-ses { padding: 12px 16px; }
  .ho-ses .btn { width: 100%; justify-content: center; min-height: 44px; }
  .ho-filtros { width: 100%; }
  .ho-filtros .field { max-width: none !important; }
}

/* ================= Candados unificados (E3-1): REGISTRO, MEJORA, CUPO, CRÉDITO y SEGURIDAD comparten pieza ================= */
.lock-lines { display: grid; gap: 4px; margin-top: 2px; max-width: 70ch; }
.lock-l { margin: 0; line-height: 1.5; }
.lock-l3 { color: var(--text); font-weight: 500; }
.gate[data-lock-tipo="cupo"] .gate-ic, .gate[data-lock-tipo="cupo"] .lbl { color: var(--high); }
.gate[data-lock-tipo="seguridad"] .gate-ic, .gate[data-lock-tipo="seguridad"] .lbl { color: var(--high); }
.gate[data-lock-tipo="credito"] .gate-ic { color: var(--accent-2); }
.lock-actions .btn { min-height: 44px; display: inline-flex; align-items: center; }
/* página de seguridad (429/403): no usa el marco del sitio */
.lock-solo { display: grid; place-items: center; min-height: 100vh; margin: 0; background: var(--bg); color: var(--text); }
.lock-solo-in { width: min(640px, 100% - 32px); padding: 24px 0; }
.lock-brand { font: 700 13px var(--mono); letter-spacing: .2em; color: var(--accent); margin-bottom: 14px; }

/* ================= Insignia de plan y botones bloqueados (E3-2) ================= */
.plan-pill { display: inline-block; font: 700 10px/1 var(--mono); font-style: normal; letter-spacing: .08em; margin-left: 8px; padding: 3px 6px;
  border-radius: 2px; border: 1px solid currentColor; vertical-align: middle; white-space: nowrap; color: var(--accent-2); background: rgba(46, 168, 240, .10); }
/* lo que pide otro plan se ve distinto de lo que sí se puede usar: borde punteado, sin relleno y más tenue (sigue siendo clicable: invita) */
.btn[data-lock], .btn.is-locked, .gbtn[data-lock], .gbtn.is-locked, summary[data-lock] {
  background: transparent !important; border: 1px dashed var(--line-2) !important; color: var(--text-2) !important; font-weight: 500 !important; opacity: .86; }
.btn[data-lock]:hover, .btn.is-locked:hover, .gbtn[data-lock]:hover, .gbtn.is-locked:hover { opacity: 1; border-color: var(--accent) !important; color: var(--text) !important; }
.btn[data-lock] .plan-pill, .btn.is-locked .plan-pill, .gbtn[data-lock] .plan-pill, .gbtn.is-locked .plan-pill, summary[data-lock] .plan-pill { color: var(--accent-2); }

/* ================= Medidores de cupo (E3-3) ================= */
.cupo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding: 8px 14px; margin: 0 0 12px; border: 1px solid var(--line);
  background: rgba(10, 22, 42, .55); font: 500 12.5px var(--mono); color: var(--text-2); }
.cupo-i { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.cupo-i b { color: var(--text); font-weight: 700; }
.cupo-bar { width: 54px; height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; display: inline-block; }
.cupo-bar i { display: block; height: 100%; background: var(--accent); }
.cupo-i.warn b, .cupo-i.warn .cupo-t { color: var(--high); }
.cupo-i.warn .cupo-bar i { background: var(--high); }
.cupo-i.out b, .cupo-i.out .cupo-t { color: var(--crit); }
.cupo-i.out .cupo-bar i { background: var(--crit); }
.cupo-aviso { color: var(--high); }
.cupo-aviso a { color: var(--accent-2); text-decoration: underline; }
#drawer .cupo, #node-body .cupo { margin: 0 0 14px; }
@media (max-width: 720px) { .cupo { font-size: 12px; gap: 6px 12px; } }

/* La grilla de fotos de la ficha empujaba la página más ancho que la pantalla (1fr con imágenes grandes): se fija el mínimo en 0 */
.photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* tabla de lugares de la ficha: en pantallas chicas se desliza dentro de su caja en vez de ensanchar toda la página */
@media (max-width: 720px) { .pm-table { display: block; overflow-x: auto; max-width: 100%; } }

/* ================= Cabecera explicada, estados vacíos, naturaleza de la información (etapa F) ================= */
.page-head.ph-intro { display: block; }
.ph-intro .ph-diff { margin: 8px 0 0; font-size: 15px; color: var(--text); max-width: 900px; border-left: 2px solid var(--accent); padding-left: 10px; }
.ph-intro .ph-scope { margin: 6px 0 0; font-size: 13.5px; color: var(--text-2); max-width: 900px; }
.ph-intro .ph-scope b { font: 600 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-right: 6px; }
.ph-intro .ph-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; font: 500 13px var(--mono); letter-spacing: .03em; }
.ph-intro .ph-links a { color: var(--accent-2, var(--accent)); }
.ph-intro .ph-links a i { font-style: normal; color: var(--text); }
.ph-intro .ph-links .ph-help { margin: 0; color: var(--text-2); }
.page-head.compacto h1 { font-size: 26px; margin-top: 4px; }
.page-head.compacto .ph-what { font-size: 15px; margin-top: 4px; }
.page-head.compacto .ph-data, .page-head.compacto .ph-scope, .page-head.compacto .ph-diff { font-size: 13px; margin-top: 4px; }
.page-head.compacto .ph-links { margin-top: 6px; }
.ph-band { padding: 14px 22px 12px; border-bottom: 1px solid var(--line); background: rgba(10, 22, 42, .45); }
@media (max-width: 720px) {
  .ph-intro .ph-what { font-size: 15.5px; }
  .ph-intro .ph-links a { min-height: 44px; display: inline-flex; align-items: center; }
  .page-head.compacto .ph-data, .page-head.compacto .ph-scope { display: none; }
  .page-head.compacto h1 { font-size: 24px; }
}

.empty.vacio { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 30px 20px; }
.vacio .vc-que { margin: 0; font: 600 17px var(--display); color: var(--text); }
.vacio .vc-causa { margin: 0; max-width: 560px; font-size: 14.5px; color: var(--text-2); }
.vacio .vc-paso { margin-top: 4px; }
.gl-leer h3 { font: 600 18px var(--display); margin: 0; scroll-margin-top: 90px; }
.gl-leer .gl-item:target { border-color: var(--accent); }
.glosario .gl-item { scroll-margin-top: 100px; }  /* el ancla no queda bajo la barra fija */
.gl-leer .gl-go { display: inline-block; margin-top: 8px; font: 500 13px var(--mono); }

.naturaleza { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 18px; margin: 14px 0 0;
  padding: 10px 14px; border: 1px dashed var(--line-2); font-size: 13px; line-height: 1.5; color: var(--text-2); }
.naturaleza b { color: var(--text); }
.naturaleza a { white-space: nowrap; font: 500 12.5px var(--mono); color: var(--accent-2, var(--accent)); text-decoration: underline; }
@media print { .naturaleza a { display: none; } }

.rect-form { max-width: 720px; }
.rect-form input, .rect-form select, .rect-form textarea { min-width: 0; width: 100%; box-sizing: border-box; }
.rect-form textarea { min-height: 150px; }
.rect-form label span.t2 { font: 400 13px var(--sans); letter-spacing: 0; text-transform: none; }
@media (max-width: 720px) { .rect-form .grid { grid-template-columns: minmax(0, 1fr); } .rect-form .btn { width: 100%; justify-self: stretch; } }
.rect-ref { padding: 10px 14px; border: 1px solid var(--line); background: rgba(10, 22, 42, .55); font-size: 14px; word-break: break-word; }

/* Ticker simplificado: la nota explicativa y el tooltip con la fuente se leen al pasar el cursor */
.ticker .tk-sep { opacity: .35; margin: 0 4px; }
.ticker .tk-head { font: 600 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); opacity: .85; }

/* ======================================================================================================================
   Etapa G · móvil y accesibilidad
   (1) mínimos globales: contraste AA, foco visible, reducción de movimiento, rótulos de 12 px o más, objetivos táctiles de 44 px
   (2) Análisis: tabla sin textos montados (escritorio) y tarjetas apiladas con filtros plegables (móvil)
   (3) Registro: casilla de términos · (4) Vinculaciones en móvil · (5) Planes y ficha en móvil
   ====================================================================================================================== */

/* ---------- (1) mínimos globales ---------- */
/* El gris de apoyo (--muted) pasa de 4,2:1 sobre --panel-2 a 5,6:1 sin cambiar la paleta */
:root { --muted: #8497b2; }

/* Foco del teclado visible y consistente: anillo de 2 px con separación; los campos lo muestran en su contenedor */
a:focus-visible, button:focus-visible, summary:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible, .btn:focus-visible, .chip-f:focus-visible, .gseg button:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.field:focus-within, .form-grid input:focus-visible, .form-grid textarea:focus-visible, .form-grid select:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 1px; }
.field input:focus-visible, .field select:focus-visible { outline: none; }
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
tr.click:focus-visible { outline: 2px solid var(--accent-2); outline-offset: -2px; }

/* Quien pide menos movimiento: sin ticker animado, sin transiciones ni desplazamientos suaves */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .ticker-track { animation: none !important; }
  .ticker { overflow-x: auto; }
  .eco-card:hover { transform: none; }
}

/* Rótulos: nunca bajo 12 px. Las mayúsculas con mucho espaciado quedan para etiquetas cortas */
.lbl.sm, .gk, .tk-head, .field label, .ticker .tk-head, .graph-hint, .gpanel.lbl, .gzv { font-size: 12px; }
.lbl.sm { letter-spacing: .1em; }
.tag, .lvl, .src-line, .ho-micro, .crumb, .cat, .count, .imp, .kpi .s, .plan-pill, .plan-badge, .pm-table th { font-size: 12px; }
.tag { letter-spacing: .08em; }
.src-line { letter-spacing: .02em; }
.t th { font-size: 12px; }

/* Objetivos táctiles de 44 px en móvil (botones, chips, segmentos del grafo, ayudas) */
@media (max-width: 720px) {
  .btn, .btn.sm, .btn.lg, .chip-f, .gseg button, .gbtn, .btn-login, .country-sel select, .flag-grid a, .backbar a, .pager .btn, summary.gbtn {
    min-height: 44px; }
  .chip-f { display: inline-flex; align-items: center; }
  .gseg button { padding: 8px 12px; }
  .gbtn { display: inline-flex; align-items: center; }
  .flag-grid a { display: flex; align-items: center; justify-content: center; }
  .src-line { font-size: 12.5px; }
  .panel.pad { padding: 18px 16px; }
  .panel-h { flex-wrap: wrap; }
  .lbl { letter-spacing: .12em; }
  .page-head .ph-help { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ---------- (2) Análisis ---------- */
/* Escritorio: los rótulos del sector envuelven dentro de su columna en vez de montarse sobre la siguiente */
.t-an { table-layout: auto; }
.t-an .tag { white-space: normal; max-width: 100%; line-height: 1.3; text-align: left; overflow-wrap: anywhere; }
.t-an td .stack { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.t-an td { overflow-wrap: break-word; vertical-align: top; }
.t-an td:nth-child(1) { min-width: 200px; }
.t-an .col-min { min-width: 150px; }
.t-an .small-mono { overflow-wrap: anywhere; }
.t-scroll { overflow-x: auto; }
.an-cta, .an-toggle { display: none; }
.an-more { display: contents; }
.t-an .tg-l { display: none; }

@media (max-width: 720px) {
  /* filtros: la búsqueda y «Buscar» siempre a la vista; el resto vive en un panel que se abre con «Filtros» */
  #an-form { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; padding: 14px 16px !important; }
  #an-form .field { padding: 0 12px; }
  #an-form .an-q { grid-column: 1 / -1; }
  #an-form .an-toggle { grid-column: 1; grid-row: 2; }
  #an-form .an-actions { display: contents; }
  #an-form .an-actions .btn { width: 100%; }
  #an-form .an-actions .btn.primary { grid-column: 2; grid-row: 2; min-height: 44px; }
  #an-form .an-actions .btn:not(.primary) { display: none; }
  #an-form.an-open .an-actions .btn:not(.primary) { display: inline-flex; grid-row: 4; }
  #an-form .an-more { display: none; grid-column: 1 / -1; grid-row: 3; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #an-form.an-open .an-more { display: grid; }
  #an-form .an-more .field { flex-direction: column; align-items: stretch; gap: 0; padding-top: 6px; }
  #an-form .an-more .field label { font-size: 12px; letter-spacing: .08em; }
  #an-form .an-more .field select { padding: 8px 0 10px; font-size: 16px; min-height: 40px; }
  .an-cache { display: none; }
  .an-tabs { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .an-tabs a { padding: 8px 6px !important; min-height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 2px; letter-spacing: .04em; font-size: 12px; line-height: 1.25; }
  .an-main > .panel-h { padding: 10px 16px; }
  .an-main > .panel-h .muted { display: none; }
  .page-head.compacto[data-page="analisis"] .ph-links { margin-top: 6px; gap: 0 16px; }
  .page-head.compacto[data-page="analisis"] .ph-data { display: block; }
  .ph-intro .ph-links a { min-height: 44px; }
  .an-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; }
  .an-toggle[aria-expanded="true"] .car { transform: rotate(180deg); }
  /* aviso de registro: queda fijo al pie de la pantalla mientras no se llega a él, y sigue su lugar después */
  .an-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 16px; margin: 0; position: sticky; bottom: 0; z-index: 20;
    border-top: 1px solid var(--accent); border-bottom: 1px solid var(--line); background: #0a2540; box-shadow: 0 -6px 18px rgba(0, 0, 0, .35); }
  .an-cta p { margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--text); }
  .an-cta .btn { min-height: 48px; padding: 0 14px; white-space: nowrap; }

  /* tabla → una tarjeta por persona o empresa: nombre y rol arriba, datos en dos columnas, sin columnas cortadas */
  .t-scroll { overflow: visible; }
  table.t-an, .t-an tbody { display: block; width: 100%; }
  .t-an tr.t-head { display: none; }
  .t-an tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; padding: 16px; border-bottom: 1px solid var(--line); }
  .t-an td { display: block; padding: 0; border: 0; min-width: 0 !important; max-width: none !important; overflow-wrap: anywhere; }
  .t-an td:nth-child(1), .t-an td[colspan], .t-an tr.t-full > td { grid-column: 1 / -1; }
  .t-an .tg-l { display: block; margin-bottom: 3px; font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .t-an td:empty { display: none; }
  /* personas: nombre, rol; bando+estado; organización+lugar; sector; caso */
  .t-an.t-persona td:nth-child(2) { grid-column: 1 / -1; font-size: 15px; }
  .t-an.t-persona td:nth-child(5), .t-an.t-persona td:nth-child(8) { grid-column: 1 / -1; }
  /* empresas: nombre; papel+sector; rubros; caso; cifras */
  .t-an.t-empresa td:nth-child(4), .t-an.t-empresa td:nth-child(5) { grid-column: 1 / -1; }
  .t-an .tag { font-size: 12px; }
  .t-an .small-mono { font-size: 12.5px; }
}

/* ---------- (3) Registro: casilla de términos ---------- */
.auth-box .form-grid label.check { align-items: flex-start; gap: 12px; min-height: 44px; padding: 8px 0; line-height: 1.5; cursor: pointer; }
.auth-box .form-grid label.check input { flex: none; width: 24px; height: 24px; margin: 0; padding: 0; accent-color: var(--accent); }
.auth-box .form-grid label.check span { flex: 1; min-width: 0; }
.auth-box .form-grid label.check a { color: var(--accent-2); text-decoration: underline; }

/* ---------- (4) Vinculaciones en móvil: el grafo primero, los controles en un panel ---------- */
.vz-toggle { display: none; }
@media (max-width: 720px) {
  .vz-toggle { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; margin-top: 10px; }
  .vz-toggle .car { transition: transform .15s; }
  .vz-toggle[aria-expanded="true"] .car { transform: rotate(180deg); }
  .side-layout.vz { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin-top: 0 !important; }
  .side-layout.vz > aside { display: none; }
  .side-layout.vz.vz-open > aside { display: grid; }
  .side-layout.vz .graph-box { order: 2; }
  .side-layout.vz .gbar { display: none; }
  .side-layout.vz.vz-open .gbar { display: flex; padding: 10px; }
  .side-layout.vz .gbar .gpanel:first-child { display: none; }
  .side-layout.vz #cy { height: calc(100svh - 230px); height: calc(100dvh - 230px); min-height: 60vh; }
  .side-layout.vz .gzoom { bottom: 12px; right: 8px; }
  .side-layout.vz .gzoom .gbtn { min-width: 44px; }
  .side-layout.vz .graph-hint { left: 8px; right: auto; bottom: 8px; max-width: calc(100% - 76px); padding: 6px 10px; }
  .page-head.compacto[data-page="vinculaciones"] .ph-links a:not(.ph-help) { display: none; }
  .side-layout.vz .flag-grid { grid-template-columns: repeat(4, 1fr); }
  .side-layout.vz .gpop-body { width: min(300px, calc(100vw - 48px)); }
}

/* ---------- (5) Planes y ficha en móvil ---------- */
.pl-rec { display: none; }
.pl-card.feat .pl-rec { display: inline-flex; }
.ficha-idx { display: none; }
.ficha-titulo { overflow-wrap: anywhere; }
@media (max-width: 720px) {
  .pl-card .pl-btn, .pl-card .btn { width: 100%; min-height: 48px; }
  .pl-card .pl-cta { display: block; }
  .pl-card .pl-sec { display: flex; align-items: center; min-height: 44px; }
  .pl-ciclo-b { min-height: 44px; }

  .ficha-head { padding: 20px 16px !important; }
  .ficha-head > .row { flex-direction: column; align-items: stretch !important; gap: 16px !important; }
  .ficha-head > .row > div:first-child { align-self: flex-start; }
  .ficha-head > .row > div:first-child > div:first-child { width: 120px !important; height: 120px !important; }
  .ficha-head .avatar.lg { width: 96px; height: 96px; }
  .ficha-head h1 { font-size: 28px !important; line-height: 1.15; overflow-wrap: anywhere; }
  .ficha-head h1 .accent { display: block; font-size: 17px !important; margin-top: 4px; }
  .ficha-head .ficha-stats { width: 100%; min-width: 0 !important; text-align: left !important; }
  .ficha-head .ficha-stats .stack { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ficha-head .ficha-stats .stack > .btn, .ficha-head .ficha-stats .stack > form, .ficha-head .ficha-stats .stack > a { width: 100%; text-align: center; }
  .ficha-head .ficha-stats .stack > :first-child { grid-column: 1 / -1; }
  .ficha-head .src-line, .ficha-head .src-line a { overflow-wrap: anywhere; }
  .ficha-idx { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 4px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
  .ficha-idx a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 22px;
    background: var(--panel-solid); font: 500 13px var(--mono); letter-spacing: .04em; color: var(--text-2); white-space: nowrap; }
  .ficha-idx a:hover, .ficha-idx a:focus-visible { color: var(--accent-2); border-color: var(--accent); }
  .ficha-sec { scroll-margin-top: 130px; }
  .wrap.stack > section.panel .timeline { overflow-wrap: anywhere; }
}
@media (min-width: 721px) { .ficha-sec { scroll-margin-top: 90px; } }
@media (max-width: 720px) {
}

/* Informes a la carta: un select con opciones largas ensanchaba la columna y provocaba scroll horizontal en escritorio */
.inf-form { grid-template-columns: minmax(0, 1fr); }
.inf-form select, .inf-form input { min-width: 0; max-width: 100%; width: 100%; text-overflow: ellipsis; }
.inf-card > * { min-width: 0; }
@media (max-width: 720px) {
  /* cabeceras más bajas: lo que importa (precios, filas, grafo) aparece antes */
  .page-head h1 { font-size: 28px; margin-top: 6px; }
  .page-head .ph-what { font-size: 15.5px; }
  .page-head .ph-data { font-size: 13px; }
  .pl .page-head .ph-what { font-size: 15px; line-height: 1.5; }
}

/* ======================================================================================================================
   Sin desborde horizontal en móvil (390 px): Macrozonas, Archivo histórico, ficha y noticia
   Ninguna caja fuerza un ancho mínimo mayor que la pantalla: las cuadrículas y filas flexibles se pueden encoger, las palabras largas
   se parten, las tablas se desplazan dentro de su contenedor y las imágenes, marcos y mapas no pasan del ancho disponible.
   ====================================================================================================================== */
/* Filtro del archivo (antes con columnas fijas de 240 px en el HTML) */
.cr-form { padding: 20px 22px; display: grid; grid-template-columns: minmax(0, 1fr) 240px 240px auto; gap: 12px; }
.cr-form .field, .cr-form .field input { min-width: 0; }

/* Territorios: la columna del nombre se encoge y parte el texto; la barra y la cifra conservan su ancho */
.rank { grid-template-columns: minmax(0, 1fr) 120px 56px; }
.rank > span:first-child { min-width: 0; overflow-wrap: anywhere; }

img, video, canvas, iframe, embed, object { max-width: 100%; }
main img, main video, main iframe { height: auto; }
main iframe { max-width: 100%; }

@media (max-width: 720px) {
  .cr-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 16px; }
  .cr-form > .field:first-of-type, .cr-form > .btn { grid-column: 1 / -1; }
  .rank { grid-template-columns: minmax(0, 1fr) 72px 48px; gap: 8px; }

  /* cuadrículas y filas flexibles: los hijos pueden ser más angostos que su contenido */
  .grid > *, .stack > *, .row > *, .seg > *, .chips > *, .wrap > *, .panel, .panel > *, .ficha-head > *, .kpi, .two > * { min-width: 0; }
  .row, .seg, .chips, .ficha-head > .row { flex-wrap: wrap; }
  .seg, .row { max-width: 100%; }

  /* palabras y enlaces muy largos (URL, nombres compuestos) se parten en vez de ensanchar la página */
  main h1, main h2, main h3, main p, main li, main dd, main .lead, main .t, main .d, main .crumb, main .crumbs, main .tag, main .lbl, main a,
  main .src-line, main .small-mono, main .mono { overflow-wrap: anywhere; }

  /* etiquetas largas (p. ej. «informado por N medios · cuenta como 1 hecho») bajan de línea dentro de su caja */
  main .tag { max-width: 100%; white-space: normal; }

  /* tablas (menos Análisis, que ya se apila en tarjetas): se desplazan dentro de su contenedor */
  main table:not(.t-an) { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* bloques con ancho propio en línea (mapas, esquemas, grafos) */
  main pre, main code { max-width: 100%; overflow-x: auto; overflow-wrap: anywhere; }
  main svg { max-width: 100%; height: auto; }
}

/* ---------- contratación en pasos (/contratar), resultado del pago, condiciones y administración de compras ---------- */
.ct { max-width: 860px; }
.ct h1 { margin: 6px 0 8px; font-size: 30px; }
.ct-lead { max-width: 660px; margin: 0 0 18px; font-size: 16px; }
.ct-now { margin: 0 0 16px; font-size: 15px; }
.ct-steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0 22px; padding: 0; }
.ct-steps li { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border: 1px solid var(--line-2); font-size: 14px; color: var(--text-2); min-width: 0; }
.ct-steps li b { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line-2); font: 600 12px var(--mono); }
.ct-steps li.on { border-color: var(--accent); color: var(--text); }
.ct-steps li.on b { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.ct-steps li.done b { border-color: var(--low); color: var(--low); }
.ct-set { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
.ct-set legend { padding: 0; margin-bottom: 10px; }
.ct-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ct-opt { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--line-2); background: var(--panel); cursor: pointer; min-height: 56px; min-width: 0; }
.ct-opt input { flex: none; margin: 3px 0 0; width: 20px; height: 20px; accent-color: var(--accent); }
.ct-opt > span { display: grid; gap: 5px; min-width: 0; }
.ct-opt b { font: 600 17px var(--display); }
.ct-opt i { font-style: normal; color: var(--text-2); font-size: 14px; line-height: 1.45; }
.ct-opt em { font-style: normal; color: var(--accent-2); font-weight: 600; font-size: 15px; }
.ct-opt em.ct-sub { color: var(--text-2); font-weight: 500; font-size: 13.5px; }
.ct-opt small { color: var(--text-2); font-weight: 400; }
.ct-opt:has(input:checked) { border-color: var(--accent); background: rgba(46, 168, 240, .08); }
.ct-opt:focus-within { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.ct-off { opacity: .6; cursor: not-allowed; }
.ct-field { display: block; font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); margin-bottom: 6px; }
.ct-field .t2 { text-transform: none; letter-spacing: 0; font: 13px var(--sans); }
.ct-in { width: 100%; min-height: 44px; background: var(--bg-2); border: 1px solid var(--line-2); color: var(--text); padding: 11px 14px; font: 15px var(--sans); border-radius: 2px; }
.ct-in:focus { outline: none; border-color: var(--accent); }
.ct-in[aria-invalid="true"] { border-color: var(--crit); }
.ct-num { width: 140px; }
.ct-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 6px; }
.ct-wide { grid-column: 1 / -1; }
.ct-fieldwrap { min-width: 0; }
.ct-err { color: var(--crit); font-size: 13.5px; margin-top: 6px; }
.ct-nota { font-size: 14px; margin: 14px 0 0; }
.ct-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.ct-card { margin-bottom: 16px; }
.ct-flash { margin: 14px 0 0; }
.ct-dl { margin: 0; padding: 4px 20px 8px; }
.ct-dl > div { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 4px 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ct-dl > div:last-child { border-bottom: 0; }
.ct-dl dt { color: var(--text-2); font-size: 14px; }
.ct-dl dd { margin: 0; overflow-wrap: anywhere; }
.ct-total dd b { font: 600 24px var(--display); }
.ct-total .ct-clp { display: block; font-size: 17px; color: var(--accent-2); margin-top: 2px; }
.ct-total small { display: block; margin-top: 4px; font-size: 13px; line-height: 1.5; }
.ct-accept { padding: 20px; }
.ct-check { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.5; cursor: pointer; }
.ct-check input { flex: none; width: 22px; height: 22px; margin-top: 2px; accent-color: var(--accent); }
.ct-res .ct-dl { padding: 0; margin-top: 14px; }
.ct-res .ct-dl > div { grid-template-columns: 170px minmax(0, 1fr); }
.ct-marcas { margin: 6px 0 0 18px; padding: 0; font-size: 14px; }
.ct-marcas li { margin: 4px 0; }
.ct-ta { width: 100%; min-height: 420px; font: 13.5px/1.55 var(--mono) !important; resize: vertical; }
.adm-cond .ph, .legal .ph { overflow-wrap: anywhere; }
.legal-ant { margin: 0 0 16px; }
.legal-body h2 { scroll-margin-top: 16px; }
@media (max-width: 640px) {
  .ct h1 { font-size: 25px; }
  .ct-opts, .ct-grid2 { grid-template-columns: 1fr; }
  .ct-steps { display: flex; gap: 6px; }
  .ct-steps li { flex: none; }
  .ct-steps li:not(.on) span { display: none; }
  .ct-steps li:not(.on) { justify-content: center; padding: 10px 12px; }
  .ct-steps li.on { flex: 1; min-width: 0; }
  .ct-dl { padding: 2px 14px 6px; }
  .ct-dl > div, .ct-res .ct-dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ct-actions { flex-direction: column-reverse; align-items: stretch; }
  .ct-actions .btn { width: 100%; justify-content: center; text-align: center; min-height: 48px; }
  .ct-num { width: 100%; }
  .ct-accept { padding: 16px 14px; }
  .ct-res { padding: 22px 16px !important; }
}
.ct .flash { margin-bottom: 14px; }
.ct .flash ul { margin: 6px 0 0 18px; padding: 0; }

/* ---- UF del día en Administración y en Precios y créditos (maquiavelo/uf.py) ---- */
.uf-box { display: grid; gap: 12px; padding: 16px 24px; }
.uf-box .flash { margin: 0; }
.uf-uso { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: flex-end; }
.uf-uso .uf-v { font: 600 24px var(--sans); }
.uf-uso form { margin: 0 0 0 auto; }
.uf-fuentes { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 13px; }
.uf-fuentes li { overflow-wrap: anywhere; }
@media (max-width: 720px) { .uf-box { padding: 14px 16px; } .uf-uso form { margin-left: 0; } }

/* ================= Menú: entrada directa «Termómetro» (sin desplegable) ================= */
.nav-solo { position: relative; display: flex; align-items: center; }
.nav-solo-a { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; font: 500 12.5px var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-2); border: 1px solid transparent; border-radius: 2px; padding: 9px 12px; white-space: nowrap; }
.nav-solo-a:hover { color: var(--text); background: rgba(46, 168, 240, .06); }
.nav-solo.on .nav-solo-a { color: var(--accent); background: rgba(46, 168, 240, .08); border-color: rgba(46, 168, 240, .12); }
.nav-beta { font: 600 10px/1 var(--mono); font-style: normal; letter-spacing: .08em; color: var(--ten); border: 1px solid rgba(199,125,255,.6);
  border-radius: 2px; padding: 3px 5px; }
.nav-solo-d { display: none; }
@media (max-width: 1480px) and (min-width: 1201px) { .nav-solo-a { padding: 9px 8px; letter-spacing: .06em; } }
@media (max-width: 1200px) {
  .nav-solo { display: block; border-bottom: 1px solid var(--line); padding: 4px 0 8px; }
  .nav-solo-a { display: flex; min-height: 48px; padding: 9px 2px; font: 600 13px var(--mono); letter-spacing: .06em; color: var(--text); }
  .nav-solo.on .nav-solo-a { background: none; border-color: transparent; }
  .nav-solo-d { display: block; margin-top: -4px; padding: 0 2px; }
}

/* ================= Termómetro de tensión: páginas (/termometro, ficha, metodología, comparar) ================= */
.termo-pg { display: grid; gap: 22px; max-width: 1180px; }
.termo-pg h1 { font-size: clamp(28px, 4vw, 38px); }
.termo-sub { font: 600 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.termo-bajada { margin: 10px 0 0; max-width: 72ch; color: var(--text-2); font-size: 16px; }
.termo-aviso { margin: 0; padding: 12px 16px; border: 1px solid rgba(199,125,255,.55); background: color-mix(in srgb, var(--ten) 9%, var(--panel-solid));
  font-weight: 600; font-size: 16px; color: var(--text); max-width: 100%; }
.termo-bita { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: space-between; align-items: center; padding: 12px 18px; font-size: 14px; }
.termo-pg .panel-h h2 { font-size: 19px; }
.termo-tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.termo-tabla th { text-align: left; font: 500 11.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); padding: 10px 12px;
  border-bottom: 1px solid var(--line); white-space: nowrap; }
.termo-tabla td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.termo-tabla tr.grupo td { font: 600 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); background: var(--bg-2); padding: 8px 12px; }
.termo-tabla tr.yo td { background: color-mix(in srgb, var(--ten) 8%, var(--panel-solid)); }
.termo-tabla a.pais { color: var(--text); font-weight: 600; }
.termo-tabla a.pais:hover { color: var(--accent); }
.termo-chip-yo { font: 600 10px var(--mono); letter-spacing: .08em; color: var(--ten); border: 1px solid rgba(199,125,255,.6); border-radius: 2px; padding: 2px 6px;
  margin-left: 8px; white-space: nowrap; }
.termo-sello { font: 500 12px var(--mono); white-space: nowrap; } .termo-sello.ok { color: var(--low); } .termo-sello.pend, .termo-sello.gris { color: var(--text-2); }
.termo-nivel-t { font: 600 13px var(--mono); letter-spacing: .04em; white-space: nowrap; }
.termo-mono { font: 500 12.5px var(--mono); color: var(--text-2); }
.termo-lista { display: none; }
.termo-fila { display: grid; grid-template-columns: minmax(0, 1fr) 96px 16px; gap: 10px; align-items: center; min-height: 56px; padding: 10px 16px;
  border-bottom: 1px solid var(--line); color: var(--text); }
.termo-fila .p { font-weight: 600; } .termo-fila .s { display: block; font: 500 12px var(--mono); color: var(--text-2); }
.termo-fila.yo { background: color-mix(in srgb, var(--ten) 8%, var(--panel-solid)); }
.termo-pie { display: grid; gap: 6px; font: 500 12px var(--mono); color: var(--text-2); }
.termo-pie .frase { font: 600 14px var(--sans); color: var(--text); }
.termo-nota { padding: 12px 16px; border: 1px dashed var(--line-2); color: var(--text-2); font-size: 14px; }
@media (max-width: 720px) {
  .termo-tabla-wrap { display: none; }
  .termo-lista { display: block; }
  .termo-acc .btn { width: 100%; justify-content: center; min-height: 44px; display: inline-flex; align-items: center; }
}
/* ficha */
.termo-migas { font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); display: flex; flex-wrap: wrap; gap: 8px; }
.termo-migas a { color: var(--accent); }
/* En el teléfono los enlaces chicos del termómetro (migas, «Ver rectificación», «Serie», «Cómo leerlo») miden 44 px de alto al tacto */
@media (max-width: 720px) {
  .termo-migas a, a.termo-mono { display: inline-flex; align-items: center; min-height: 44px; }
  .termo-migas { align-items: center; row-gap: 0; }
}
.termo-cab { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.termo-acc { display: flex; gap: 8px; flex-wrap: wrap; }
.termo-acc .btn { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
.termo-subnav { position: sticky; top: 0; z-index: 30; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 6px 0;
  background: color-mix(in srgb, var(--bg) 94%, transparent); border-bottom: 1px solid var(--line); }
.termo-subnav a { font: 600 12px var(--mono); letter-spacing: .06em; color: var(--text-2); padding: 10px 12px; min-height: 44px; display: inline-flex;
  align-items: center; white-space: nowrap; border-bottom: 2px solid transparent; }
.termo-subnav a:hover { color: var(--text); border-bottom-color: var(--ten-2); }
.termo-sec { scroll-margin-top: 70px; }
.termo-g2 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 18px; }
.termo-g2 > * { min-width: 0; }
.termo-lect { display: grid; gap: 12px; align-content: start; }
.termo-nivel { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; }
.termo-nivel .nom { font: 700 34px/1.05 var(--display); letter-spacing: .01em; text-transform: uppercase; }
.termo-nivel .tend { font: 600 13px var(--mono); color: var(--text-2); }
.termo-cifra { font-size: 15px; } .termo-cifra b { font: 700 22px var(--mono); }
.termo-amp { font: 500 12.5px var(--mono); color: var(--ten); border: 1px solid rgba(199,125,255,.55); padding: 8px 10px; }
.termo-porque { padding: 12px 14px; background: var(--bg-2); border: 1px solid var(--line); font-size: 15px; }
.termo-estado { font: 500 13px var(--mono); color: var(--text-2); }
.termo-estado.ambar { color: var(--high); }
.termo-comp { display: grid; gap: 12px; align-content: start; }
.termo-crow { display: grid; grid-template-columns: 170px minmax(0, 1fr) minmax(0, 150px); gap: 10px; align-items: center; }
.termo-crow .n { font-size: 14px; font-weight: 600; } .termo-crow .n small { display: block; font: 400 11.5px var(--mono); color: var(--text-2); }
.termo-crow .v { font: 500 12px var(--mono); color: var(--text-2); }
.termo-bar { height: 10px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
.termo-bar i { display: block; height: 100%; background: var(--ten-2); border-radius: 5px; }
.termo-marca { font: 500 11.5px var(--mono); color: var(--text-2); grid-column: 1 / -1; margin-top: -6px; }
.termo-det { border: 1px solid var(--line); background: var(--bg-2); }
.termo-det > summary { cursor: pointer; padding: 12px 14px; min-height: 44px; font: 600 13px var(--mono); letter-spacing: .04em; list-style-position: inside; }
.termo-det > div { padding: 0 14px 14px; display: grid; gap: 10px; }
.termo-det ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; }
.termo-fuente { font: 500 11.5px var(--mono); color: var(--text-2); }
.termo-disputa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.termo-disputa > div { border: 1px solid var(--line); padding: 10px; background: var(--panel-solid); }
.termo-svg { width: 100%; height: auto; display: block; }
.termo-svg text { font: 10px var(--mono); fill: var(--text-2); }
.termo-svg .bar { fill: var(--ten-2); fill-opacity: .55; }
.termo-svg .hab { stroke: var(--text-2); stroke-dasharray: 2 4; }
.termo-svg .n1 { fill: var(--line-2); } .termo-svg .n2 { fill: var(--ten-1); } .termo-svg .n3 { fill: var(--ten-2); } .termo-svg .n4 { fill: var(--ten-3); }
.termo-svg .na { fill: transparent; stroke: var(--line-2); stroke-dasharray: 2 2; }
.termo-leyenda { display: flex; flex-wrap: wrap; gap: 8px 16px; font: 500 11.5px var(--mono); color: var(--text-2); }
.termo-leyenda span { display: inline-flex; align-items: center; gap: 6px; } .termo-leyenda .tcel { width: 14px; height: 10px; }
.termo-tira { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 1px; height: 18px; min-width: 0; }
.termo-sen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.termo-sen > .panel { display: grid; gap: 8px; align-content: start; padding: 16px 18px; min-width: 0; }
.termo-sen .estado { font: 600 13px var(--mono); }
.termo-sen ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; }
.termo-hechos { margin: 0; padding: 0; list-style: none; display: grid; }
.termo-hechos li { display: grid; grid-template-columns: 86px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.termo-hechos .tp { font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; color: var(--ten); }
.termo-votos { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.termo-votos .btn { min-height: 44px; }
.termo-cita { font-size: 14px; color: var(--text-2); border-left: 3px solid var(--ten-2); padding: 6px 12px; margin: 0; }
.termo-dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.termo-dos ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.termo-casos .tira30 { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 1px; height: 14px; max-width: 320px; }
.termo-cmp { border-collapse: collapse; width: 100%; font-size: 13px; }
.termo-cmp th { font: 500 10.5px var(--mono); color: var(--text-2); padding: 6px 2px; text-align: center; vertical-align: bottom; }
.termo-cmp td { padding: 3px 2px; } .termo-cmp td.pais { text-align: left; font-weight: 600; padding-right: 10px; white-space: nowrap; }
.termo-cmp .tcel { height: 22px; min-width: 20px; }
.termo-avisame form { display: grid; gap: 10px; }
.termo-avisame label { display: flex; gap: 10px; align-items: center; min-height: 44px; }
.termo-avisame input[type=radio] { width: 20px; height: 20px; }
@media (max-width: 960px) {
  .termo-g2, .termo-dos { grid-template-columns: 1fr; }
  .termo-sen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .termo-sen, .termo-disputa { grid-template-columns: 1fr; }
  .termo-crow { grid-template-columns: 112px minmax(0, 1fr); }
  .termo-crow .v { grid-column: 1 / -1; }
  .termo-hechos li { grid-template-columns: 70px minmax(0, 1fr); }
  .termo-hechos li > :last-child { grid-column: 1 / -1; }
  .termo-nivel .nom { font-size: 28px; }
  .termo-cmp th:nth-child(n+2):nth-child(-n+7), .termo-cmp td:nth-child(n+2):nth-child(-n+7) { display: none; }  /* móvil: 6 semanas */
}
/* franja de la portada y tarjeta de /panel */
.termo-franja { display: grid; gap: 10px; padding: 16px 18px; }
.termo-franja .fr-h { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; align-items: baseline; }
.termo-franja .fr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.termo-franja .fr-c { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); background: var(--panel-solid); color: var(--text); min-height: 44px; }
.termo-franja .fr-c:hover { border-color: rgba(199,125,255,.6); }
.termo-franja .fr-c .p { font-weight: 600; }
.termo-franja .fr-pie { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; font: 500 12px var(--mono); color: var(--text-2); }
@media (max-width: 720px) { .termo-franja .fr-grid { grid-template-columns: 1fr; } .termo-franja .fr-c { grid-template-columns: minmax(0, 1fr) 96px; align-items: center; } }
.kpi.termo-kpi { display: grid; gap: 8px; align-content: start; }
.kpi.termo-kpi .v { font-size: 26px; margin-top: 0; }
.kpi.termo-kpi .s { letter-spacing: .08em; }
/* administración del termómetro */
.termo-adm td, .termo-adm th { padding: 10px 12px; }
.termo-adm details summary { cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; }
.termo-adm form.inline { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; }
.termo-adm input[type=text], .termo-adm input[type=date], .termo-adm input[type=number], .termo-adm select {
  background: var(--panel-solid); color: var(--text); border: 1px solid var(--line-2); padding: 8px; min-height: 40px; font: 13px var(--sans); }
/* informe mensual (pantalla): sección «Tensión observada en el mes» */
.rp-tension .tm-franja { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 1px; height: 18px; margin: 8px 0; }
.rp-tension .tm-dias span { white-space: nowrap; }
/* ---------- Investigar: selector Personas | Temas y la investigación de un tema (paquete P5) ---------- */
.inv-tipo { display: flex; gap: 0; border: 1px solid var(--line-2); width: max-content; max-width: 100%; }
.inv-tipo-b { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 120px; padding: 0 18px;
  font: 600 12.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); background: var(--bg-2); }
.inv-tipo-b + .inv-tipo-b { border-left: 1px solid var(--line-2); }
.inv-tipo-b:hover { color: var(--text); }
.inv-tipo-b.on { background: var(--accent); color: var(--accent-ink); }
.inv-tipo-b:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tema-pasos { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 10px 0 14px; padding: 0; font: 500 12.5px var(--mono);
  letter-spacing: .08em; color: var(--text-2); }
.tema-pasos li { display: inline-flex; align-items: center; gap: 8px; }
.tema-pasos b { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--line-2); font-weight: 600; }
.tema-pasos li.on { color: var(--text); } .tema-pasos li.on b { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.tema-pasos li.hecho b { border-color: var(--accent); color: var(--accent); }
.tema-form { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px 14px; align-items: end; }
.tema-form > label, .tema-mas, .tema-form2 .tema-form > label { display: grid; gap: 6px; font: 500 12px var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-2); min-width: 0; }
.tema-form input, .tema-form textarea, .tema-form select, .tema-mas input, .tema-mas select {
  background: var(--bg-2); border: 1px solid var(--line-2); color: var(--text); padding: 12px 14px; font: 16px var(--sans); border-radius: 2px;
  width: 100%; min-width: 0; min-height: 44px; text-transform: none; letter-spacing: 0; }
.tema-form input:focus, .tema-form textarea:focus, .tema-mas input:focus, .tema-mas select:focus { outline: none; border-color: var(--accent); }
.tema-form .tema-desc { grid-column: 1 / -1; }
.tema-form .tema-go { grid-column: 1 / -1; }
.tema-form .tema-go .btn, .tema-acc .btn { min-height: 44px; padding: 12px 18px; }
.tema-form2 { display: grid; gap: 16px; }
.tema-form2 .tema-form { grid-template-columns: 1fr; }
.tema-aviso { margin: 0; }
.tema-ed { display: grid; gap: 14px; }
.tema-campo { border: 1px solid var(--line); padding: 12px 14px 14px; margin: 0; min-width: 0; display: grid; gap: 10px; }
.tema-campo legend { padding: 0 6px; font: 600 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text); }
.tema-campo legend span { font-weight: 400; letter-spacing: .04em; text-transform: none; color: var(--text-2); margin-left: 6px; }
.tchips { display: flex; flex-wrap: wrap; gap: 8px; }
.tchips:empty { display: none; }
.tchip { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; max-width: 100%; padding: 6px 10px 6px 12px;
  border: 1px solid var(--accent); background: rgba(46,168,240,.08); color: var(--text); cursor: pointer; font-size: 14px; }
.tchip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tchip span { overflow-wrap: anywhere; }
.tchip small { font: 500 11px var(--mono); color: var(--text-2); letter-spacing: .06em; }
.tchip i { font-style: normal; font-size: 18px; line-height: 1; color: var(--text-2); }
.tchip:has(input:not(:checked)) { border-color: var(--line-2); background: transparent; }
.tchip input:not(:checked) ~ span { text-decoration: line-through; color: var(--text-2); }
.tchip input:not(:checked) ~ i { transform: rotate(45deg); }
.tchip:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.tema-regla { margin: 0; }
.tema-acc { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.tema-acc form { display: inline-block; margin: 0; }
.tema-acc2 { margin-top: 14px; }
.tema-acc2 .btn { min-height: 44px; display: inline-flex; align-items: center; }
/* página de un tema */
.tema-volver { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent-2); font: 500 13px var(--mono); letter-spacing: .06em; }
.tema-head h1 { margin: 8px 0 6px; font: 600 clamp(24px, 4vw, 34px)/1.15 var(--display); overflow-wrap: anywhere; }
.tema-desc-txt { color: var(--text-2); max-width: 900px; margin: 0 0 10px; }
.tema-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; color: var(--text-2); font-size: 14px; }
.tema-ocupado { display: flex; gap: 8px; align-items: center; margin: 12px 0 0; color: var(--accent-2); }
.tema-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.tema-kpis .kpi { padding: 12px 14px; border: 1px solid var(--line); background: var(--bg-2); }
.tema-kpis .kpi .v { font-size: 26px; margin-top: 4px; }
.tema-kpis .kpi .v.sm { font-size: 15px; font-family: var(--mono); }
.tema-resumen { margin-top: 8px; } .tema-resumen .src-line { margin-top: 10px; }
.tema-dos { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; }
.tema-tl { list-style: none; margin: 0; padding: 6px 18px 16px; display: grid; gap: 12px; }
.tema-tl-h { font: 600 12.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text); border-left: 3px solid var(--accent);
  padding-left: 8px; }
.tema-tl-h span { font-weight: 400; color: var(--text-2); margin-left: 6px; letter-spacing: .04em; text-transform: none; }
.tema-tl ul { list-style: none; margin: 6px 0 0; padding: 0 0 0 11px; display: grid; gap: 8px; }
.tema-tl ul li { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; font-size: 14px; }
.tema-tl ul li a { flex-basis: 100%; color: var(--text); overflow-wrap: anywhere; }
.tema-tl-f { color: var(--text-2); font-size: 12px; }
.tema-act { list-style: none; margin: 0; padding: 4px 18px 16px; display: grid; gap: 2px; }
.tema-act li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; min-height: 44px; border-bottom: 1px solid var(--line); padding: 6px 0; }
.tema-act li a { font-weight: 600; color: var(--text); }
.tema-act-n { margin-left: auto; font: 500 12px var(--mono); color: var(--text-2); }
.tema-notas { list-style: none; margin: 0; padding: 0 18px 12px; }
.tema-notas li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.tema-nota-h a { color: var(--text); overflow-wrap: anywhere; }
.tema-nota-m { font-size: 13px; margin-top: 4px; overflow-wrap: anywhere; }
.tema-motivo { color: var(--accent-2); }
.tema-dl { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 8px 14px; margin: 10px 0 0; }
.tema-dl dt { font: 500 11.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.tema-dl dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .tema-form, .tema-dos { grid-template-columns: 1fr; }
  .tema-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .inv-tipo { width: 100%; } .inv-tipo-b { flex: 1; min-width: 0; }
  .tema-dl { grid-template-columns: 1fr; }
  .tema-acc .btn { width: 100%; justify-content: center; } .tema-acc form { display: block; width: 100%; }
}
/* lista de temas en móvil: una tarjeta por tema (la tabla de 6 columnas no cabe en 390 px) */
@media (max-width: 720px) {
  .tema-t, .tema-t tbody, .tema-t tr, .tema-t td { display: block; width: 100%; }
  .tema-t tr:first-child { display: none; }
  .tema-t tr { border-bottom: 1px solid var(--line); padding: 10px 0; }
  .tema-t td { border: 0; padding: 4px 18px; text-align: left; }
  .tema-t td.num::before { content: "Notas: "; color: var(--text-2); }
  .tema-t .inv-sub { max-width: none; }
  .tema-t .inv-act { display: flex; flex-wrap: wrap; gap: 8px; }
  .tema-t .inv-act .btn { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ================= Perfil: sector y cargo (registro, /cuenta y aviso «Completa tu perfil») ================= */
.form-grid > label[hidden] { display: none; }
.form-grid select { width: 100%; min-width: 0; max-width: 100%; }
.perfil-opc { text-transform: none; letter-spacing: 0; color: var(--muted); }
.perfil-bar { background: rgba(46, 168, 240, .07); border-bottom: 1px solid rgba(46, 168, 240, .35); padding: 12px 16px; }
.perfil-bar-in { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 2.4fr); gap: 10px 20px; align-items: start; }
.perfil-bar-txt { display: grid; gap: 4px; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.perfil-bar-txt b { color: var(--accent); font-weight: 600; }
.perfil-bar-f { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); align-items: end; gap: 10px; margin: 0; }
.perfil-bar-f input, .perfil-bar-f select { padding: 9px 10px; font-size: 14px; }
.perfil-bar-acc { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.perfil-bar-acc .btn { min-height: 40px; }
@media (max-width: 900px) { .perfil-bar-in { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {   /* en el teléfono, controles táctiles de 44 px como el resto de los formularios */
  .perfil-bar-f input, .perfil-bar-f select, .perfil-bar-acc .btn { min-height: 44px; }
}
.perfil-falta a { color: var(--accent-2); }
.perfil-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.perfil-resumen table { width: 100%; }
.perfil-resumen td.n { text-align: right; font-variant-numeric: tabular-nums; width: 64px; }
/* /politicas/aceptar: enlaces a cada versión visibles como enlaces y el «¿No estás de acuerdo?» en un solo párrafo */
.pol-pend a, .pol-desacuerdo a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; }
.pol-desacuerdo { margin: 18px 0 0; font-size: 14px; line-height: 1.5; }