/* Guia de uso · afectados-futbol · (c) 2026 RUNCODEAI, S.L. (sociedad unipersonal) */
.guia{max-width:1040px}
.guia h1{font-size:30px;line-height:1.2;margin-bottom:4px}
.guia .entradilla{font-size:17px;color:#23384f;line-height:1.6}
.paso-g{counter-increment:pg;background:var(--f2);border:1px solid var(--ln);border-radius:12px;padding:20px 22px;display:grid;gap:12px}
/* en un grid, los hijos no encogen por debajo de su contenido salvo que se diga */
.paso-g>*{min-width:0}
.paso-g>h2{display:flex;align-items:center;gap:12px;font-size:20px;margin:0}
.paso-g>h2::before{content:counter(pg);flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--az);color:#23384f;font-size:17px;display:grid;place-items:center}
.guia main,.pasos-g{counter-reset:pg}
.guia p{font-size:16px;line-height:1.65}
.clave{border-left:4px solid var(--do);background:#fff8e5;color:#795100;padding:12px 16px;border-radius:6px;font-size:15.5px}
.ok-no{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.ok-no>div{border:1px solid var(--ln);border-radius:10px;padding:14px 16px;background:var(--f1)}
.ok-no h3{margin:0 0 8px;font-size:15px}
.h3-junto{margin-top:6px}
.p-caja{font-size:15px}
.p-caja-at{font-size:14px}
.ok-no ul{margin:0;padding-left:20px;font-size:15px;line-height:1.6}
.ok-no .si-c{border-color:#1d5c44}.ok-no .no-c{border-color:#5c2020}
figure{margin:0;display:grid;gap:8px}
figure img{width:100%;height:auto;border:1px solid var(--ln);border-radius:10px;display:block;background:var(--f1)}
figcaption{color:var(--at);font-size:13.5px;line-height:1.5}
.dib{width:100%;height:auto;background:var(--f1);border:1px solid var(--ln);border-radius:10px}
.tabla-g{width:100%;border-collapse:collapse;font-size:14.5px}
.tabla-g th,.tabla-g td{border-bottom:1px solid var(--ln);padding:8px 10px;text-align:left;vertical-align:top;white-space:normal}
.tabla-g th{color:var(--at)}
.tabla-g code{white-space:nowrap}
.faq{display:grid;gap:10px}
.faq details{background:var(--f1);border:1px solid var(--ln);border-radius:10px;padding:0 16px}
.faq summary{cursor:pointer;padding:13px 0;font-weight:600;color:#23384f;font-size:15.5px}
.faq details[open] summary{border-bottom:1px solid var(--ln)}
.faq details>p{padding:12px 0;font-size:15.5px}
.indice{background:var(--f1);border:1px solid var(--ln);border-radius:10px;padding:14px 18px}
.indice ol{margin:8px 0 0;padding-left:22px;line-height:1.9;font-size:15.5px}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:700px){.dos{grid-template-columns:1fr}.guia h1{font-size:25px}.paso-g{padding:16px}}

.az{color:var(--az)}

/* --- v0.41: los dos canarios, cada uno con su color, y la leyenda --- */
.leyenda{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin:2px 0}
.leyenda>div{border:1px solid var(--ln);border-radius:10px;padding:10px 12px;background:var(--f1);font-size:14.5px;line-height:1.5}
.leyenda b{display:block;font-size:15px;margin-bottom:2px}
.pt{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:7px;vertical-align:-1px}
.pt-web{background:#17734d}.pt-a{background:#165bb9}.pt-b{background:#926300}.pt-ctrl{background:#b53030}
.lec{width:100%;border-collapse:collapse;font-size:14.5px}
.lec th,.lec td{border-bottom:1px solid var(--ln);padding:9px 10px;text-align:left;vertical-align:top}
.lec th{color:var(--at);font-weight:600}
.lec .v{white-space:nowrap;font-weight:700}
.lec .v.si{color:#17734d}.lec .v.no{color:#b53030}.lec .v.nd{color:#586c82}
/* la tabla de lecturas: cuatro columnas estrechas y la explicacion ancha, sin barrido lateral */
.lec{table-layout:fixed}
.lec th,.lec td{white-space:normal}  /* la base pone nowrap en todas las tablas y aqui la explicacion tiene que envolver */
.lec th:nth-child(-n+4),.lec td:nth-child(-n+4){width:12%}
@media(max-width:700px){.lec .v{white-space:normal}.lec th:nth-child(-n+4),.lec td:nth-child(-n+4){width:14%}}

/* Lectura por niveles y títulos centrados. */
.guia h1,.guia h2,.guia h3{text-align:center}
.guia p,.guia li{text-align:justify;hyphens:auto}
.explicacion-ampliada>summary{cursor:pointer;padding:20px;border:1px solid #34465e;border-radius:12px;text-align:center;font-weight:700}
#empieza-aqui li{margin:14px 0}
@media print{.explicacion-ampliada>summary{display:none}}

.pt-ext{background:#7953ae}

.lec td.resultado-falla{color:#ff8585;font-weight:700}

/* R14: desplegable visible y accesible con teclado. */
.explicacion-ampliada>summary{background:#f5c542;color:#18202b;border:2px solid #f5c542}
.explicacion-ampliada>summary:hover{background:#ffda68}
.explicacion-ampliada>summary:focus-visible{outline:3px solid #23384f;outline-offset:4px}