/* Estilos comunes de /guias/: las diez guías y su índice.

   Va antes del <style> de cada página, así que cada página puede cambiar lo
   que necesite: aquí está lo que comparten (colores, cabecera, título,
   tablas, ejercicios, cierre, pie, el menú de las guías) y en su <style> se
   queda lo propio (los colores de sus funciones, sus esquemas, sus tamaños
   distintos, su impresión). Si cambias algo aquí, cambia en todas.

   build-light.js lo publica con una versión calculada sola
   (scripts/menu-guias.js), así que nadie se queda con la copia vieja.
   Sin JavaScript, salvo los ejercicios de la sección 4 (practica.js). */

/* ══ 1. Lo de todas las páginas, índice incluido ══════════════════════════ */

/* Colores, en claro y en oscuro */
:root{
  --bg:#F5F1E8; --surface:#FFFFFF; --surface-2:#FAF7F0;
  --ink:#102A43; --ink-2:#334E68; --muted:#5C6B7E; --border:#E6E0D2;
  --teal:#0F766E; --teal-ink:#0F766E; --teal-tint:#E5F4F1;
  --navy:#102A43; --navy-ink:#FFFFFF;
  --otra:#5C6B7E; --otra-tint:#EDEAE2;
  --shadow:0 1px 2px rgba(15,42,67,.05),0 8px 22px rgba(15,42,67,.07);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E1620; --surface:#16212E; --surface-2:#1B2837;
    --ink:#E8EEF5; --ink-2:#C4D0DD; --muted:#93A3B5; --border:#2A3A4D;
    --teal:#0F766E; --teal-ink:#5EEAD4; --teal-tint:#123A38;
    --navy:#1F3A5A; --navy-ink:#FFFFFF;
    --otra:#93A3B5; --otra-tint:#223042;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 22px rgba(0,0,0,.25);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0E1620; --surface:#16212E; --surface-2:#1B2837;
  --ink:#E8EEF5; --ink-2:#C4D0DD; --muted:#93A3B5; --border:#2A3A4D;
  --teal:#0F766E; --teal-ink:#5EEAD4; --teal-tint:#123A38;
  --navy:#1F3A5A; --navy-ink:#FFFFFF;
  --otra:#93A3B5; --otra-tint:#223042;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 22px rgba(0,0,0,.25);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:'Lora',Georgia,serif;font-size:1.06rem;line-height:1.65}
a{color:var(--teal-ink)}
.wrap{max-width:760px;margin:0 auto;padding:0 16px}
h1,h2,h3{font-family:'Fraunces',Georgia,serif;color:var(--ink);line-height:1.2;letter-spacing:-.01em}
p{margin-bottom:14px}
em{font-style:italic}

/* Cabecera */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-family:'Fraunces',serif;font-weight:700;font-size:1.1rem}
.brand img{width:36px;height:36px;border-radius:50%;background:#fff;box-shadow:var(--shadow)}
.top-link{font-family:'DM Sans',sans-serif;font-weight:700;font-size:.9rem;text-decoration:none;color:var(--ink);border:1.5px solid var(--border);border-radius:999px;padding:8px 14px;background:var(--surface);white-space:nowrap}

/* Título */
.cab{padding:28px 0 8px}
.kicker{display:inline-block;font-family:'DM Sans',sans-serif;font-weight:700;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-ink);background:var(--teal-tint);border-radius:999px;padding:6px 12px;margin-bottom:16px}
h1{font-size:clamp(1.9rem,5.5vw,2.7rem);margin-bottom:14px}
.lead{font-size:1.15rem;color:var(--ink-2)}
.firma{font-family:'DM Sans',sans-serif;font-size:.86rem;color:var(--muted);margin-top:4px}

/* Cierre, pie y foco */
.cierre{background:var(--navy);color:var(--navy-ink);border-radius:18px;padding:30px 22px;text-align:center;margin:30px 0 36px}
.cierre h2{color:var(--navy-ink);font-size:clamp(1.4rem,4vw,1.8rem);margin-bottom:10px}
.cierre p{opacity:.9;max-width:48ch;margin:0 auto 18px}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:'DM Sans',sans-serif;font-weight:700;font-size:1rem;text-decoration:none;border-radius:999px;padding:13px 22px;background:#FFFFFF;color:#102A43}
footer{border-top:1px solid var(--border);padding:22px 0 34px;font-family:'DM Sans',sans-serif;font-size:.85rem;color:var(--muted);text-align:center}
footer p{margin-bottom:6px}
footer a{color:inherit}
:focus-visible{outline:3px solid var(--teal-ink);outline-offset:2px;border-radius:6px}
@media (max-width:600px){
  body{font-size:1.02rem}
  .top-link{padding:7px 12px;font-size:.84rem}
}

/* ══ 2. Lo de las guías ══════════════════════════════════════════════════ */

/* Resumen */
.resumen{background:var(--surface);border:1px solid var(--border);border-left:5px solid var(--teal);border-radius:14px;padding:20px 22px;box-shadow:var(--shadow);margin:22px 0 8px}
.resumen h2{font-size:1.15rem;margin-bottom:10px}
.resumen ul{padding-left:20px}
.resumen ol{padding-left:22px}
.resumen li{margin-bottom:6px}

/* Secciones */
section{padding:26px 0 6px}
section > h2{font-size:clamp(1.45rem,4vw,1.85rem);margin-bottom:12px}
h3{font-size:1.2rem;margin:22px 0 8px}
ul.lista{padding-left:22px;margin-bottom:14px}
ul.lista li{margin-bottom:6px}

/* Oración analizada: cada función, con su etiqueta debajo (los colores de
   cada función, en la guía) */
.or{background:var(--surface-2);border:1px dashed var(--border);border-radius:12px;padding:16px 16px 12px;margin:12px 0 14px;font-size:1.1rem;line-height:2.6}
.f{display:inline-flex;flex-direction:column;align-items:center;line-height:1.3;border-radius:6px;padding:2px 6px;margin:0 1px;vertical-align:top}
.f small{font-family:'DM Sans',sans-serif;font-weight:700;font-size:.68rem;letter-spacing:.04em;margin-top:2px}
.f.otra{background:var(--otra-tint)} .f.otra small{color:var(--otra)}
.prueba{font-family:'DM Sans',sans-serif;font-size:.95rem;color:var(--ink-2);margin:-4px 0 16px;padding-left:14px;border-left:3px solid var(--border)}
.aviso{background:var(--teal-tint);border-radius:12px;padding:14px 18px;margin:14px 0}
.aviso p:last-child{margin-bottom:0}

/* Pruebas en orden (subordinadas, tipos de compuestas, valores de «se») */
ol.ruta{list-style:none;margin:10px 0 14px}
ol.ruta > li{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px 18px;margin-bottom:10px;box-shadow:var(--shadow)}
.paso{display:inline-block;font-family:'DM Sans',sans-serif;font-weight:700;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.pregunta{font-family:'Fraunces',Georgia,serif;font-weight:700;font-size:1.12rem;margin-bottom:6px}
.como{font-size:.98rem;color:var(--ink-2);margin-bottom:8px}
.sal{font-family:'DM Sans',sans-serif;font-size:.94rem;margin:0 0 4px;padding-left:12px;border-left:3px solid var(--border)}
.sal b{font-weight:700}
.sal.si b{color:var(--si)} .sal.no b{color:var(--no)}
.sal:last-child{margin-bottom:0}

/* Tablas */
.tabla-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:14px;background:var(--surface);box-shadow:var(--shadow);margin:8px 0 14px}
table{border-collapse:collapse;width:100%;min-width:520px;font-family:'DM Sans',sans-serif;font-size:.94rem}
th,td{padding:11px 14px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
thead th{background:var(--surface-2)}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:none}

/* Ejercicios (la solución, en un <details> que pone cada guía) */
ol.ejercicios{list-style:none;counter-reset:ej}
ol.ejercicios > li{counter-increment:ej;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px 18px;margin-bottom:10px}
ol.ejercicios > li > p:first-child::before{content:counter(ej) ". ";font-family:'DM Sans',sans-serif;font-weight:700;color:var(--muted)}
ol.ejercicios > li > p:first-child{font-size:1.1rem;margin-bottom:8px}

/* Preguntas frecuentes */
.faq details{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 18px;margin-bottom:10px}
.faq summary{cursor:pointer;font-family:'DM Sans',sans-serif;font-weight:700;font-size:1rem;color:var(--ink)}
.faq details[open] summary{margin-bottom:8px}
.faq details p{font-size:.98rem;color:var(--ink-2);margin-bottom:6px}

/* Otra guía */
.otra-guia{font-family:'DM Sans',sans-serif;font-size:.95rem;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 18px;margin:26px 0 0}
.otra-guia a{font-weight:700}
@media (max-width:600px){ .or{font-size:1.02rem} }

/* ══ 3. El menú de las guías ═════════════════════════════════════════════
   «Estás en», botón «Guías» (móvil y tableta), menú lateral (ordenador),
   «En esta guía» y anterior/siguiente. El HTML lo pone build-light.js con
   scripts/menu-guias.js; los colores son las variables de arriba, así que
   el modo oscuro sale solo. Sin JavaScript. */

/* Colores de los grupos: los mismos del índice /guias/ */
:root{ --g-teal:#0F766E; --g-simple:#102A43; --g-compuesta:#9D4B5E; --barra-alto:60px }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --g-simple:#9FB8D6; --g-compuesta:#E3A3B3 }
}
:root[data-theme="dark"]{ --g-simple:#9FB8D6; --g-compuesta:#E3A3B3 }

/* Al saltar a un apartado, que no lo tape la barra fija del móvil */
main[id], section[id], h2[id], h3[id]{ scroll-margin-top:calc(var(--barra-alto) + 12px) }

/* ── Saltar al contenido ──────────────────────────────────────────────── */
/* El primer enlace de la página. Con el ratón o el dedo no se ve; con el
   teclado (Tab) aparece arriba y lleva al texto sin recorrer el menú. */
.saltar{
  position:absolute; left:16px; top:-200px; z-index:40;
  display:inline-flex; align-items:center; min-height:44px; padding:0 18px; border-radius:999px;
  font-family:'DM Sans',sans-serif; font-weight:700; font-size:.92rem; text-decoration:none;
  color:var(--navy-ink); background:var(--navy); border:1.5px solid var(--navy);
}
.saltar:focus{ top:8px }

/* ── Barra «Estás en» ─────────────────────────────────────────────────── */
.barra-guias{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:8px;
  margin:0 -16px; padding:8px 16px;
  min-height:var(--barra-alto);
  background:var(--bg);
  border-bottom:1px solid var(--border);
}
@supports (backdrop-filter: blur(1px)){
  .barra-guias{ background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(8px) }
}
.migas{ flex:1; min-width:0; font-family:'DM Sans',sans-serif; font-size:.84rem }
.migas ol{ list-style:none; display:flex; align-items:center; min-width:0 }
.migas li{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.migas li + li{ flex:1; min-width:0 }
.migas li + li::before{ content:'›'; color:var(--muted); margin:0 7px }
.migas a{ color:var(--ink-2); text-decoration:none; padding:12px 0 }
.migas a:hover{ color:var(--teal-ink); text-decoration:underline; text-underline-offset:3px }

/* Volver arriba y botón «Guías»: al menos 44x44 para el dedo */
.subir{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  color:var(--ink); background:var(--surface); border:1.5px solid var(--border);
}
.subir:hover{ border-color:var(--teal-ink); color:var(--teal-ink) }
.menu-movil{ position:relative; flex:none }
.menu-movil > summary{
  list-style:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
  min-height:44px; padding:0 16px; border-radius:999px;
  font-family:'DM Sans',sans-serif; font-weight:700; font-size:.92rem;
  color:var(--navy-ink); background:var(--navy); border:1.5px solid var(--navy);
}
.menu-movil > summary::-webkit-details-marker{ display:none }
.menu-movil > summary:hover{ filter:brightness(1.12) }
.menu-movil .cerrar{ display:none }
.menu-movil[open] .abrir{ display:none }
.menu-movil[open] .cerrar{ display:inline }
.menu-movil .panel{
  position:absolute; right:0; top:calc(100% + 8px);
  width:min(360px, calc(100vw - 32px));
  max-height:calc(100vh - var(--barra-alto) - 24px); overflow-y:auto; overscroll-behavior:contain;
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  box-shadow:0 2px 4px rgba(15,42,67,.08),0 18px 40px rgba(15,42,67,.18);
  padding:10px 10px 14px;
}

/* ── Lista de guías (la misma en el panel del móvil y en el lateral) ─── */
.lista-guias{ font-family:'DM Sans',sans-serif; font-size:.9rem; line-height:1.35 }
.lista-guias ul, .lista-guias ol{ list-style:none; margin:0; padding:0 }
.lg-todas a{
  display:flex; align-items:center; gap:6px; padding:10px 10px;
  font-weight:700; color:var(--teal-ink); text-decoration:none; border-radius:10px;
}
.lg-todas a::before{ content:'←' }
.lg-todas a:hover{ background:var(--teal-tint) }
.lg-grupo{ margin-top:10px }
.lg-titulo{
  display:flex; align-items:center; gap:8px;
  margin:0 0 2px; padding:4px 10px;
  font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
}
.lg-titulo::before{ content:''; width:8px; height:8px; border-radius:50%; flex:none; background:var(--g-color) }
.lg-teal{ --g-color:var(--g-teal) }
.lg-simple{ --g-color:var(--g-simple) }
.lg-compuesta{ --g-color:var(--g-compuesta) }
.lg-prof{ --g-color:var(--muted) }
.lista-guias ul > li > a{
  display:block; padding:10px 10px 10px 12px; border-radius:10px;
  border-left:3px solid transparent;
  color:var(--ink-2); text-decoration:none;
}
.lista-guias ul > li > a:hover{ background:var(--surface-2); color:var(--ink) }
.lista-guias a[aria-current="page"]{
  background:var(--surface-2); color:var(--ink); font-weight:700; border-left-color:var(--g-color);
}
/* Apartados de la guía actual (solo en el lateral) */
.lista-guias .lg-indice{ margin:4px 0 8px 14px; border-left:1px solid var(--border) }
.lg-indice a{
  display:block; padding:5px 10px 5px 12px;
  font-size:.82rem; color:var(--muted); text-decoration:none; border-radius:0 8px 8px 0;
}
.lg-indice a:hover{ color:var(--teal-ink); background:var(--surface-2) }

/* ── En esta guía (móvil y tableta) ───────────────────────────────────── */
.en-esta-guia{
  margin:18px 0 4px; background:var(--surface); border:1px solid var(--border); border-radius:14px;
  font-family:'DM Sans',sans-serif;
}
.en-esta-guia > summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:10px;
  min-height:48px; padding:0 16px; font-weight:700; font-size:.95rem; color:var(--ink);
}
.en-esta-guia > summary::-webkit-details-marker{ display:none }
.en-esta-guia > summary::after{ content:'▾'; margin-left:auto; color:var(--muted); transition:transform .15s }
.en-esta-guia[open] > summary::after{ transform:rotate(180deg) }
.en-esta-guia > summary span{ font-weight:400; font-size:.84rem; color:var(--muted) }
.en-esta-guia ol{ list-style:none; padding:0 8px 10px; margin:0 }
.en-esta-guia li a{
  display:block; padding:10px 10px; border-radius:10px; font-size:.92rem;
  color:var(--ink-2); text-decoration:none; border-top:1px solid var(--border);
}
.en-esta-guia li:first-child a{ border-top:none }
.en-esta-guia li a:hover{ background:var(--surface-2); color:var(--teal-ink) }

/* ── Anterior / siguiente ─────────────────────────────────────────────── */
.pasar{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; margin:26px 0 0; font-family:'DM Sans',sans-serif }
.pasar a{
  display:flex; flex-direction:column; gap:3px; min-height:44px;
  padding:14px 16px; border:1px solid var(--border); border-radius:12px; background:var(--surface);
  color:var(--ink); text-decoration:none; font-weight:700; line-height:1.3;
  transition:border-color .15s, transform .15s;
}
.pasar a span{ font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted) }
.pasar .sig{ text-align:right; grid-column:2 }
.pasar a:hover{ border-color:var(--teal-ink); transform:translateY(-1px) }
@media (max-width:520px){
  .pasar{ grid-template-columns:minmax(0,1fr) }
  .pasar .sig{ grid-column:1 }
}

/* ── El menú lateral, solo en pantallas anchas ────────────────────────── */
/* Solo en las guías que lo llevan (:has): el cuadro de equivalencias, con
   tablas más anchas que la columna, no lo lleva y conserva la barra con el
   botón «Guías» también en el ordenador. Un navegador sin :has() ve la
   versión del móvil, que también sirve. */
.menu-lateral{ display:none }
@media (min-width:1080px){
  .wrap:has(> .menu-lateral){ max-width:1100px; display:grid; grid-template-columns:236px minmax(0,1fr); column-gap:48px; align-items:start }
  .wrap:has(> .menu-lateral) > *{ grid-column:2; min-width:0; max-width:760px }
  .wrap:has(> .menu-lateral) > .top{ grid-column:1 / -1; max-width:none }
  .wrap > .menu-lateral{
    display:block; grid-column:1; grid-row:2 / span 8;
    position:sticky; top:0; max-height:100vh; overflow-y:auto; overscroll-behavior:contain;
    padding:12px 4px 28px 0;
    scrollbar-width:thin; scrollbar-color:var(--border) transparent;
  }
  /* Con ratón no hace falta tanto relleno como con el dedo */
  .menu-lateral .lista-guias ul > li > a{ padding:7px 10px 7px 12px }
  .menu-lateral .lg-todas a{ padding:8px 10px }
  /* Con el menú al lado, la barra ya no flota: queda «Estás en» y nada más */
  .wrap:has(> .menu-lateral) > .barra-guias{ position:static; margin:0; padding:4px 0 0; min-height:0; border:none; background:none; backdrop-filter:none }
  .wrap:has(> .menu-lateral) .subir,
  .wrap:has(> .menu-lateral) .menu-movil,
  .wrap:has(> .menu-lateral) .en-esta-guia{ display:none }
  .wrap:has(> .menu-lateral) :is(main[id], section[id], h2[id], h3[id]){ scroll-margin-top:16px }
}

@media (prefers-reduced-motion:reduce){
  .pasar a, .en-esta-guia > summary::after{ transition:none }
  .pasar a:hover{ transform:none }
}

/* ══ 4. Practica y comprueba (practica.js) ════════════════════════════════
   Los ejercicios que se corrigen solos. Sin JavaScript solo se ve el aviso
   .pr-sinjs; los colores son las variables de arriba (claro y oscuro). */
:root{ --pr-bien:#15803D; --pr-bien-tint:#E6F4EA; --pr-mal:#B91C1C; --pr-mal-tint:#FCE8E8; --pr-marca:#FDF0C4 }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --pr-bien:#86EFAC; --pr-bien-tint:#123524; --pr-mal:#FCA5A5; --pr-mal-tint:#3B1A1A; --pr-marca:#4A3D12 }
}
:root[data-theme="dark"]{ --pr-bien:#86EFAC; --pr-bien-tint:#123524; --pr-mal:#FCA5A5; --pr-mal-tint:#3B1A1A; --pr-marca:#4A3D12 }

.pr-sinjs{ font-family:'DM Sans',sans-serif; font-size:.95rem; background:var(--surface-2); border:1px dashed var(--border); border-radius:12px; padding:14px 18px }
.pr-cabecera{
  position:sticky; top:calc(var(--barra-alto) + 8px); z-index:5;
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin:10px 0 6px; padding:10px 14px; border-radius:12px;
  background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow);
  font-family:'DM Sans',sans-serif;
}
/* En el móvil, con la barra fija arriba, el contador fijo taparía demasiado */
@media (max-width:600px){ .pr-cabecera{ position:static } }
.pr-contador{ margin:0; font-weight:700; color:var(--ink) }
.pr-reiniciar, .pr-comprobar{
  min-height:44px; padding:0 18px; border-radius:999px; cursor:pointer;
  font-family:'DM Sans',sans-serif; font-weight:700; font-size:.92rem;
}
.pr-reiniciar{ background:var(--surface); color:var(--ink); border:1.5px solid var(--border) }
.pr-reiniciar:hover{ border-color:var(--teal-ink); color:var(--teal-ink) }
.pr-comprobar{ background:var(--navy); color:var(--navy-ink); border:1.5px solid var(--navy); margin-top:12px }
.pr-comprobar:hover{ filter:brightness(1.12) }
.pr-bloque{ margin-top:18px }
.pr-consigna{ font-size:.98rem; color:var(--ink-2) }
.pr-borrador{ background:var(--surface-2); border-left:4px solid var(--border); border-radius:0 12px 12px 0; padding:14px 18px; margin:0 0 12px }
.pr-borrador p:last-child{ margin-bottom:0 }
.pr-item{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px 18px; margin-bottom:10px }
.pr-item.pr-acertado{ border-color:var(--pr-bien) }
.pr-ficha, .pr-grupo{ border:none; min-width:0 }
.pr-enunciado{ font-size:1.08rem; line-height:1.55; margin-bottom:10px; padding:0 }
.pr-num{ font-family:'DM Sans',sans-serif; font-weight:700; color:var(--muted) }
.pr-marca{ background:var(--pr-marca); color:inherit; font-weight:700; border-radius:4px; padding:0 3px }
.pr-grupo{ margin-top:10px }
.pr-grupo > legend{ font-family:'DM Sans',sans-serif; font-weight:700; font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; padding:0 }
.pr-opciones{ display:flex; flex-wrap:wrap; gap:8px }
.pr-opcion{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 14px 0 12px;
  border:1.5px solid var(--border); border-radius:999px; background:var(--surface-2); cursor:pointer;
  font-family:'DM Sans',sans-serif; font-size:.95rem; color:var(--ink);
}
.pr-opcion input{ accent-color:var(--teal); width:18px; height:18px; margin:0; flex:none }
.pr-opcion:hover{ border-color:var(--teal-ink) }
.pr-opcion:has(input:checked){ border-color:var(--teal-ink); background:var(--teal-tint) }
.pr-opcion:has(input:focus-visible){ outline:3px solid var(--teal-ink); outline-offset:2px }
.pr-opcion input:focus-visible{ outline:none }
.pr-resultado:empty{ display:none }
.pr-resultado{ margin-top:12px; border-radius:10px; padding:12px 14px; font-family:'DM Sans',sans-serif; font-size:.95rem; background:var(--surface-2); color:var(--ink-2) }
.pr-resultado p{ margin:0 }
.pr-resultado.pr-bien{ background:var(--pr-bien-tint) }
.pr-resultado.pr-mal{ background:var(--pr-mal-tint) }
.pr-bien .pr-veredicto{ color:var(--pr-bien) }
.pr-mal .pr-veredicto{ color:var(--pr-mal) }
@media (min-width:1080px){
  .wrap:has(> .menu-lateral) .pr-cabecera{ top:8px }
}

/* Al imprimir (el cuadro de equivalencias es para imprimir), sin menús */
@media print{
  .saltar, .barra-guias, .menu-lateral, .en-esta-guia, .pasar{ display:none !important }
  .wrap{ display:block !important; max-width:none !important }
}