/* Autodiagnóstico público: lo que añade a base.css (copiada de la página del mapa).
   Fuentes servidas desde el propio dominio: nada de terceros (ni Google Fonts). */
@font-face { font-family: "Raleway"; src: url("fuentes/raleway-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Raleway"; src: url("fuentes/raleway-600.woff2") format("woff2"); font-weight: 600 700; font-display: swap; }
@font-face { font-family: "Roboto Slab"; src: url("fuentes/RobotoSlab.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

.saltar { position: absolute; left: -9999px; top: 8px; z-index: 10; background: var(--surface); padding: 8px 12px; border-radius: 6px; }
.saltar:focus { left: 12px; }
.progreso { margin-left: auto; color: var(--muted); font-size: 14px; font-weight: 600; }

main.wrap { min-height: 70vh; }
.paso-v { display: none; padding: 24px 0 120px; }
.paso-v.on { display: block; }
.intro.estrecha { padding-top: 16px; }
.claves { margin: 4px 0 8px; padding-left: 20px; color: var(--muted); }
.claves li { margin: 2px 0; }
.bloque.ancho { max-width: 860px; margin: 0 auto 16px; padding: 22px 24px; }
.bloque.ancho h2 { font-size: 24px; display: flex; gap: 12px; align-items: center; margin-bottom: 6px; }
.cod { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--surface-2); color: var(--accent); font-family: var(--display); font-size: 15px; font-weight: 700; flex: none; }
.preg { grid-template-columns: minmax(0, 1fr) auto; }
.preg p { font-size: 16px; }
.seg button { padding: 9px 14px; font-size: 14.5px; min-height: 44px; }
.seg button[aria-checked="true"][data-v="0"] { background: color-mix(in srgb, var(--bad) 24%, transparent); font-weight: 600; }
.seg button[aria-checked="true"][data-v="1"] { background: color-mix(in srgb, var(--mid) 26%, transparent); font-weight: 600; }
.seg button[aria-checked="true"][data-v="2"] { background: color-mix(in srgb, var(--ok) 24%, transparent); font-weight: 600; }

.btn { min-height: 44px; padding: 9px 16px; font-size: 15px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.btn.prim { background: #B83F0B; border-color: #B83F0B; color: #fff; }
.btn.grande { font-size: 17px; padding: 12px 26px; }
.btn[aria-disabled="true"] { opacity: .6; }
.btn:disabled { opacity: .6; cursor: progress; }

.navpasos { position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; justify-content: space-between; gap: 12px;
  padding: 12px max(20px, calc((100vw - 860px) / 2)); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); border-top: 1px solid var(--line); }
.navpasos[hidden] { display: none; }

.res { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-bottom: 20px; }
.res h2, .panel > h2 { font-size: 20px; margin-bottom: 8px; }
.plan.corto li b { font-size: 16px; }

.envio { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 16px; }
.envio h3 { font-size: 18px; margin-bottom: 4px; }
form#f-plan { display: grid; gap: 12px; margin-top: 12px; }
form#f-plan label { display: grid; gap: 4px; font-size: 14px; font-weight: 600; }
form#f-plan input:not([type="checkbox"]) { font: inherit; font-weight: 400; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; min-height: 44px; }
form#f-plan label.casilla { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
form#f-plan input[type="checkbox"] { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: #B83F0B; }
.error { color: var(--bad); font-weight: 600; margin: 0; min-height: 1em; font-size: 14px; }
.error:empty { display: none; }
.hecho { border: 1px solid var(--ok); border-radius: var(--r); padding: 14px 16px; margin-top: 12px; }
.hecho h3 { color: var(--ok); }
#privacidad p { font-size: 14px; margin: 6px 0; }

.pasos { display: grid; gap: 16px; margin-bottom: 20px; }
.paso-plan .cab { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; margin-bottom: 6px; }
.paso-plan .num { font-family: var(--display); font-weight: 700; color: var(--accent); font-size: 26px; line-height: 1; margin-right: 4px; }
.paso-plan .tag { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--gold); font-weight: 600; }
.paso-plan h3 { font-size: 22px; margin: 4px 0 8px; }
.paso-plan .porque { color: var(--muted); margin: 0 0 8px; }
.paso-plan h4, .trans-panel h4 { margin: 14px 0 4px; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.paso-plan p, .trans-panel p { margin: 0; }
.paso-plan ul, .trans-panel ul { margin: 0; padding-left: 20px; }
.trans-panel { margin-bottom: 20px; }
.trans-panel h3 { font-size: 19px; margin-bottom: 6px; }
.reglas { margin: 6px 0 10px; padding-left: 20px; }
.reglas li { margin: 3px 0; }
.cta { text-align: center; margin: 24px 0 40px; }
.cta p { margin: 8px auto; max-width: 60ch; }
.imprimir { margin-left: auto; }

@media (max-width: 900px) { .res { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .preg { grid-template-columns: minmax(0, 1fr); }
  .seg { width: 100%; }
  .seg button { flex: 1; white-space: normal; }
  .bloque.ancho { padding: 18px 16px; }
  .imprimir { display: none; }
}
@media print {
  :root { --bg: #fff; --surface: #fff; --surface-2: #f3f3f3; --text: #000; --muted: #333; --line: #ccc; color-scheme: light; }
  body::before, header.top .btn, .cta .btn, .saltar { display: none !important; }
  header.top { position: static; backdrop-filter: none; }
  .logo.d { display: none !important; } .logo.l { display: block !important; }
  .panel, .paso-plan { break-inside: avoid; box-shadow: none !important; }
  .grad { color: #B83F0B; background: none; }
}
footer { padding-bottom: 96px; }
[hidden] { display: none !important; }
[tabindex="-1"]:focus { outline: none; }
@media (max-width: 760px) { .preg { grid-template-columns: minmax(0, 1fr); } .preg .seg { grid-column: auto; width: 100%; } .seg button { flex: 1; white-space: normal; } }
/* Los desplegables del contexto no deben desbordar su columna (la opción más larga del sector
   ensanchaba el select por encima del ancho de la rejilla). Dos columnas en escritorio, una en móvil. */
.bloque.ancho .ctx { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.ctx label { min-width: 0; }
.ctx select { width: 100%; min-width: 0; max-width: 100%; text-overflow: ellipsis; min-height: 44px; }
.hecho .btn { margin-top: 4px; width: 100%; }
/* Respuestas propias de cada pregunta (5-nov-2026): las opciones van siempre debajo, en tres botones iguales. */
.preg { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 14px 0; }
.preg .seg { grid-column: auto; width: 100%; display: flex; }
.seg button { flex: 1 1 0; white-space: normal; line-height: 1.3; }

/* Ronda 1 de revisión (#266), 5-nov-2026 */
/* Dorado legible: en claro, el #D6A50E no llega a 4,5:1 en texto pequeño. */
:root { --gold-texto: #7A5A00; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --gold-texto: #D6A50E; } }
.eyebrow, ol.plan .tag, .paso-plan .tag, .paso-plan h4, .trans-panel h4 { color: var(--gold-texto); }
@media (prefers-color-scheme: light) { .grad { background-image: linear-gradient(120deg, #B83F0B, #8A5A00); } }
/* Texto secundario más legible. */
.bloque .sub, .aviso, .paso-plan .porque { font-weight: 500; color: color-mix(in srgb, var(--muted) 80%, var(--text)); }
.bloque .sub { font-size: 15px; }
/* Respuesta elegida: estado neutro de marca, el semáforo queda para el resultado. */
.seg button[aria-checked="true"][data-v] { background: color-mix(in srgb, #B83F0B 16%, transparent); box-shadow: inset 0 0 0 2px #B83F0B; font-weight: 700; }
/* Móvil: respuestas apiladas a lo ancho y radar sin rótulos (la leyenda de debajo los da). */
@media (max-width: 640px) {
  .preg .seg { flex-direction: column; }
  .seg button { border-right: 0; border-bottom: 1px solid var(--line); text-align: left; padding: 11px 14px; }
  .seg button:last-child { border-bottom: 0; }
  svg.radar text { display: none; }
}
footer a { color: inherit; }