/* Estilos de las páginas del backend (ayuda, demostración, olvido de clave y pantallas de administración nuevas).
   Usa solo las variables de color de estilo.css: funciona igual en el tema claro y en el oscuro. */
.b-angosto{max-width:820px;margin:0 auto;padding:8px 0 24px}
.b-titulo{font-family:var(--titulo);font-size:clamp(1.5rem,4.5vw,2.1rem);color:var(--selva);margin:20px 0 8px;line-height:1.15}
.b-titulo-caja{font-family:var(--titulo);font-size:1.5rem;color:var(--selva);margin:0 0 10px}
.b-bajada{font-size:1.08rem;max-width:68ch}
.b-lista{padding-left:1.2em}
.b-lista li{margin:4px 0}

/* Preguntas frecuentes */
.b-faq{margin:18px 0}
.b-faq details{background:var(--sup);border:2px solid var(--borde);border-radius:var(--radio);margin:10px 0;box-shadow:0 3px 0 var(--canto)}
.b-faq summary{cursor:pointer;padding:14px 18px;font-weight:700;font-size:1.05rem;min-height:48px;display:flex;align-items:center;list-style-position:inside}
.b-faq summary:focus-visible{outline:3px solid var(--sol);outline-offset:2px;border-radius:var(--radio)}
.b-faq details[open] summary{border-bottom:2px solid var(--borde)}
.b-faq details > :not(summary){margin:12px 18px}
.b-faq details > :last-child{margin-bottom:16px}
.b-faq li{margin:4px 0}

/* Contacto */
.b-contacto h2{margin-top:0;font-family:var(--titulo);font-size:1.3rem}
.b-canales{display:flex;flex-wrap:wrap;gap:12px;margin:10px 0 14px}
.b-form label{display:block;font-weight:600;margin:12px 0 4px}
.b-form input,.b-form textarea{width:100%;padding:11px 12px;border:2px solid var(--borde);border-radius:12px;font:inherit;font-size:16px;background:var(--fondo);color:inherit;box-sizing:border-box}
.b-form textarea{resize:vertical;min-height:120px}
.b-form .ayuda{margin:4px 0 0;font-size:14px}
.b-form button{margin-top:16px}
.b-trampa{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Demostración */
.b-demos{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px;margin:20px 0}
.b-demos li{display:flex;flex-direction:column;gap:6px;margin:0}
.b-grupo{font-family:var(--titulo);font-size:1.4rem;margin:30px 0 4px}
.b-grupo-txt{margin:0 0 4px;color:var(--gris)}
.b-demos h3{font-family:var(--titulo);font-size:1.12rem;margin:6px 0 0}
.b-demos p{flex:1;margin:4px 0 10px}
.b-demos .btn{align-self:flex-start}
.b-demo-marca{margin:16px 0 0;color:var(--gris);font-size:14px}
.b-demo-lab .b-titulo{margin-top:6px}
.b-demo-fin{border-color:var(--sol)}
.b-demo-fin h2{font-family:var(--titulo);font-size:1.25rem;margin-top:0}
.b-demo-fin:focus{outline:3px solid var(--sol);outline-offset:3px}

/* Administración */
.b-pestanas{display:flex;gap:6px;flex-wrap:wrap}
.b-pestanas a{padding:6px 12px;border-radius:10px;border:2px solid var(--borde);text-decoration:none}
.b-pestanas a[aria-current="page"]{background:var(--sol);color:var(--sobre-acento);border-color:var(--sol);font-weight:700}
.b-consulta{max-width:none}
.b-consulta-cab{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:baseline}
.b-consulta-cab h3{margin:0!important}
.b-respondida{opacity:.8}
.b-mensaje{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--fondo);border-radius:10px;padding:10px 14px}
.b-consulta-contacto{overflow-wrap:anywhere}
.b-caption{text-align:left;font-weight:700;padding:6px 0}
.b-curso h4{font-family:var(--titulo);font-size:1.02rem;margin:22px 0 6px}
.b-lecciones th[scope=row]{font-weight:600;text-align:left}
.b-barra{display:inline-block;vertical-align:middle;width:min(160px,40vw);height:12px;border-radius:6px;background:var(--fondo);border:1px solid var(--borde);overflow:hidden}
.b-barra span{display:block;height:100%;background:var(--btn-tierra)}
.b-pct{font-variant-numeric:tabular-nums;font-weight:700}
@media (forced-colors:active){.b-barra span{background:CanvasText}}