/* Disposición del portal. Los componentes vienen de sia.css (sistema de diseño); aquí solo
   va lo que necesita la aplicación: estructura de página, adaptaciones móviles y formularios. */

body{background:var(--fondo-alterno);min-height:100dvh;display:flex;flex-direction:column}
a{color:var(--azul)}
.p-oculto{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.p-saltar{position:absolute;left:8px;top:-60px;z-index:20;background:var(--azul);color:var(--sobre-azul);padding:10px 14px;border-radius:var(--radio-m)}
.p-saltar:focus{top:8px}

/* ---------- barra y sesión ---------- */
.p-barra{position:sticky;top:0;z-index:10}
.p-barra .sia-barra{padding-inline:max(16px,calc((100vw - var(--contenedor))/2))}
.p-barra a.sia-barra__izq{text-decoration:none;color:var(--tinta)}
.p-tema{background:none;border:0;color:var(--tinta-suave);cursor:pointer}
.p-nav{display:flex;gap:4px;overflow-x:auto;background:var(--fondo);border-bottom:1px solid var(--linea);padding-inline:max(8px,calc((100vw - var(--contenedor))/2))}
.p-nav a{text-decoration:none;white-space:nowrap}
.p-cinta{background:var(--amarillo);color:var(--sobre-amarillo);font:600 13px/18px var(--font-text);text-align:center;padding:6px 16px}

/* ---------- contenido ---------- */
.p-main{width:100%;max-width:var(--contenedor);margin:0 auto;padding:24px 16px 32px;flex:1}
.p-main--lectura{max-width:840px}
.p-titulo{font:400 28px/34px var(--font-display);color:var(--tinta)}
@media (min-width:720px){.p-titulo{font-size:34px;line-height:40px}.p-main{padding:32px 24px 48px}}
.p-grid-2{display:grid;gap:24px}
@media (min-width:900px){.p-grid-2{grid-template-columns:1fr 1fr}.p-grid-2--ancha{grid-template-columns:1.6fr 1fr}}
.p-seccion{display:grid;gap:12px}
.p-tarjeta-cuerpo{padding:20px;display:grid;gap:14px}
@media (min-width:720px){.p-tarjeta-cuerpo{padding:24px}}

/* continuar: tarjeta principal con bloque de color */
.p-continuar{display:grid}
.p-continuar__color{background:var(--azul);position:relative;overflow:hidden;min-height:96px;display:grid;place-items:center;color:var(--sobre-azul)}
.p-continuar__color::after{content:"";position:absolute;width:120px;height:120px;right:-30px;bottom:-40px;border-radius:var(--radio-l);background:var(--amarillo)}
.p-continuar__color .sia-ico{width:48px;height:48px;position:relative;z-index:1}
@media (min-width:720px){.p-continuar{grid-template-columns:1fr 260px}}

.p-curso{display:grid;grid-template-columns:56px 1fr;gap:14px;padding:14px;align-items:center;text-decoration:none;color:var(--tinta)}
.p-curso__icono{aspect-ratio:1;border-radius:var(--radio-m);background:var(--azul-suave);display:grid;place-items:center;color:var(--azul)}
.p-curso__icono .sia-ico{width:28px;height:28px}
a.sia-tarjeta:hover{border-color:var(--azul)}
.p-lista{display:grid;gap:12px}

/* pestañas como enlaces */
.p-pestanas{overflow-x:auto}
.p-pestanas a{text-decoration:none}

/* ---------- pantalla de curso ---------- */
.p-lectura{display:grid;gap:16px}
.p-lectura p{font:400 18px/28px var(--font-text)}
.p-puntos{display:grid;gap:10px}
.p-puntos li{display:grid;grid-template-columns:24px 1fr;gap:10px;font:400 18px/28px var(--font-text)}
.p-puntos li::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--amarillo);box-shadow:0 0 0 2px var(--azul);margin:9px 0 0 6px}
.p-pasos{display:grid;gap:10px;counter-reset:paso}
.p-pasos li{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:start;padding:12px;border:1.5px solid var(--linea-fuerte);border-radius:var(--radio-m);background:var(--fondo);font:400 17px/26px var(--font-text)}
.p-pasos li::before{counter-increment:paso;content:counter(paso);width:36px;height:36px;border-radius:50%;background:var(--azul);color:var(--sobre-azul);display:grid;place-items:center;font:700 16px/1 var(--font-text)}
.p-compara{display:grid;gap:16px}
@media (min-width:640px){.p-compara{grid-template-columns:1fr 1fr}}
.p-compara__lado{border:1.5px solid var(--linea-fuerte);border-radius:var(--radio-m);padding:16px;background:var(--fondo);display:grid;gap:10px;align-content:start}
.p-compara__lado--si{border-color:var(--verde)}
.p-compara__lado--no{border-color:var(--error)}
.p-compara__lado ul{display:grid;gap:8px}
.p-compara__lado li{font:400 17px/26px var(--font-text)}
.p-fuente{font:400 13px/18px var(--font-text);color:var(--tinta-suave)}
.p-escuchar{display:flex;align-items:center;gap:12px}
.p-escuchar[hidden]{display:none}
.p-avance-pantallas{display:flex;gap:3px;flex-wrap:wrap}
.p-avance-pantallas a{width:14px;height:14px;border-radius:3px;background:var(--linea);display:block}
.p-avance-pantallas a.v{background:var(--azul)}
.p-avance-pantallas a.a{background:var(--amarillo);box-shadow:inset 0 0 0 2px var(--azul-900)}
.p-pie-fijo{position:sticky;bottom:0;z-index:5}
.p-pie-fijo .sia-pie{padding-inline:max(16px,calc((100vw - 840px)/2 + 16px))}
@media (max-width:540px){.p-pie-fijo .sia-btn{min-width:0;flex:1;padding-inline:12px}}

/* opción con radio real: el estado lo lleva el input, no solo el color */
.sia-opcion input{position:absolute;opacity:0;pointer-events:none}
.sia-opcion:has(input:checked){border-color:var(--azul);background:var(--azul-claro)}
.sia-opcion:has(input:checked) .sia-opcion__letra{background:var(--azul);border-color:var(--azul);color:var(--sobre-azul)}
.sia-opcion:has(input:focus-visible){outline:3px solid var(--foco);outline-offset:3px}
.sia-opcion{position:relative}
/* La leyenda flotada se acomoda dentro del relleno como cualquier bloque, en vez de montarse en el borde. */
.p-leyenda{float:left;width:100%;padding:0}
.p-retro{display:none}
.p-retro.is-visible{display:grid}

/* navegador de preguntas */
.p-preguntas{display:flex;gap:6px;flex-wrap:wrap}
.p-preguntas button{width:40px;height:40px;border-radius:50%;border:2px solid var(--linea-fuerte);background:var(--fondo);color:var(--tinta-suave);font:700 14px/1 var(--font-text);display:grid;place-items:center;cursor:pointer}
.p-preguntas button.r{background:var(--verde);border-color:var(--verde);color:var(--sobre-verde)}
.p-preguntas button.r .sia-ico{width:18px;height:18px}
.p-preguntas button[aria-current]{background:var(--azul);border-color:var(--azul);color:var(--sobre-azul)}

/* ---------- acceso ---------- */
.p-acceso{max-width:480px;margin:0 auto;display:grid;gap:20px}
.p-nip{font:700 28px/1 var(--font-text);letter-spacing:.5em;text-align:center;padding-left:.5em}
.p-fecha{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:8px}
.p-quien{display:flex;gap:14px;align-items:center;padding:16px;border-radius:var(--radio-m);background:var(--azul-claro)}
.p-quien .sia-avatar{width:52px;height:52px;font-size:18px}

/* ---------- Calidad ---------- */
.p-kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:720px){.p-kpis{grid-template-columns:repeat(4,1fr)}}
.p-kpi{background:var(--fondo);border:1px solid var(--linea);border-radius:var(--radio-m);padding:14px 16px;display:grid;gap:4px;text-decoration:none;color:var(--tinta)}
.p-kpi b{font:700 28px/32px var(--font-text)}
.p-kpi.is-act{border-color:var(--azul);box-shadow:inset 0 0 0 1px var(--azul)}
.p-filtros{display:grid;gap:12px;align-items:end}
@media (min-width:720px){.p-filtros{grid-template-columns:repeat(4,1fr) auto}}
.p-tabla-scroll{overflow-x:auto;border:1px solid var(--linea);border-radius:var(--radio-m);background:var(--fondo)}
.p-tabla-scroll .sia-tabla{min-width:720px}
.p-tabla-scroll .sia-tabla th{position:sticky;top:0}
.p-celda-estado .sia-estado{font-size:13px;padding:2px 10px 2px 6px}
.p-celda-estado .sia-estado .sia-ico{width:16px;height:16px}
.p-acciones{display:flex;gap:8px;flex-wrap:wrap}
.p-formulario{display:grid;gap:14px}
@media (min-width:720px){.p-formulario--2{grid-template-columns:1fr 1fr}}
.p-check{display:flex;gap:10px;align-items:flex-start;font:400 16px/24px var(--font-text)}
.p-check input{width:22px;height:22px;margin-top:1px;accent-color:var(--azul)}
.p-reactivo{display:grid;gap:8px;padding:16px 0;border-bottom:1px solid var(--linea)}
.p-reactivo ol{display:grid;gap:4px;padding-left:4px}
.p-reactivo li.ok{font-weight:700;color:var(--verde)}
details.p-detalle summary{cursor:pointer;font:600 16px/24px var(--font-text);color:var(--azul);padding:8px 0}

/* ---------- navegación inferior del colaborador en celular ---------- */
.p-nav-inferior{position:sticky;bottom:0;z-index:9}
.p-nav-inferior a.is-act{color:var(--azul)}
@media (min-width:900px){.p-nav-inferior{display:none}}
@media (max-width:899px){.p-solo-escritorio{display:none!important}}
@media (min-width:900px){.p-solo-movil{display:none!important}}
@media (max-width:600px){.sia-sesion__quien span:not(.sia-avatar){display:none}.sia-barra__titulo{display:none}}

/* diálogo de inactividad */
dialog.p-dialogo{border:0;border-radius:var(--radio-l);padding:0;max-width:420px;width:calc(100% - 32px);background:var(--fondo);color:var(--tinta)}
dialog.p-dialogo::backdrop{background:rgba(10,12,30,.55)}

@media print{.p-barra,.p-nav,.p-nav-inferior,.p-cinta,.p-no-imprimir{display:none!important}body{background:#fff}}

/* La retroalimentación de la práctica gana a la selección: verde la correcta, rojo la elegida errónea. */
.sia-opcion.is-ok:has(input){border-color:var(--verde);background:var(--verde-claro)}
.sia-opcion.is-ok:has(input) .sia-opcion__letra{background:var(--verde);border-color:var(--verde);color:var(--sobre-verde)}
.sia-opcion.is-mal:has(input){border-color:var(--error);background:var(--error-claro)}
.sia-opcion.is-mal:has(input) .sia-opcion__letra{background:var(--error);border-color:var(--error);color:var(--sobre-error)}
.p-tabla-scroll th[scope=row]{min-width:210px}
.p-pestanas .sia-pestana{white-space:nowrap}

/* ---------- evaluación ---------- */
.p-reglas-previas{display:grid;gap:12px}
.p-reglas-previas li{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;padding:14px 16px;background:var(--fondo);border:1px solid var(--linea);border-radius:var(--radio-m);font:400 17px/26px var(--font-text)}
.p-reglas-previas .sia-ico{color:var(--azul);margin-top:3px}
.p-pregunta{border:0;padding:0;margin:0;min-width:0}
.p-enunciado{display:block;font:700 22px/30px var(--font-text);color:var(--tinta)}
@media (min-width:720px){.p-enunciado{font-size:24px;line-height:32px}}
.p-guardado{min-height:20px;color:var(--tinta-suave)}
.p-guardado[data-tono=ok]{color:var(--verde)}
.p-guardado[data-tono=ok]::before{content:"✓ "}
.p-guardado[data-tono=alerta]{color:var(--error);font-weight:600}
.p-tiempo{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.p-tiempo [data-limite]{font-variant-numeric:tabular-nums}
.p-navegador summary{cursor:pointer;color:var(--azul);font-weight:600;padding:4px 0;width:max-content}
.p-navegador[open] summary{margin-bottom:8px}
.p-preguntas button.m{background:var(--amarillo-claro);border-color:var(--revision);color:var(--revision)}
.p-preguntas button.m .sia-ico{width:18px;height:18px}
.p-leyenda-nav{display:flex;gap:16px;margin-top:8px}
.p-leyenda-nav span{display:inline-flex;gap:4px;align-items:center}
.p-leyenda-nav .sia-ico{width:16px;height:16px}
.p-herramientas{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
.p-marcar{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border:1.5px solid var(--linea-fuerte);border-radius:var(--radio-pildora);font:600 15px/20px var(--font-text);cursor:pointer;background:var(--fondo);position:relative}
.p-marcar input{position:absolute;opacity:0;pointer-events:none}
.p-marcar:has(input:checked){background:var(--amarillo-claro);border-color:var(--revision);color:var(--revision)}
.p-marcar:has(input:focus-visible){outline:3px solid var(--foco);outline-offset:3px}
.p-marcar .sia-ico{width:18px;height:18px}
.p-resumen{display:grid;gap:8px}
.p-resumen a{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:center;padding:12px 14px;background:var(--fondo);border:1.5px solid var(--linea);border-radius:var(--radio-m);text-decoration:none;color:var(--tinta)}
.p-resumen a:hover{border-color:var(--azul)}
.p-resumen .n{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font:700 14px/1 var(--font-text);border:2px solid var(--linea-fuerte)}
.p-resumen .texto{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font:400 15px/22px var(--font-text)}
.p-revision{display:grid;gap:16px}
.p-revision article{display:grid;gap:10px;padding:16px;background:var(--fondo);border:1.5px solid var(--linea);border-radius:var(--radio-m)}
.p-revision article.ok{border-left:6px solid var(--verde)}
.p-revision article.mal{border-left:6px solid var(--error)}
.p-revision .sia-opcion{cursor:default;min-height:44px;padding:10px 14px}
.p-celebra{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--verde-claro);color:var(--verde)}
.p-celebra .sia-ico{width:40px;height:40px}
@media (prefers-reduced-motion:no-preference){.p-celebra{animation:p-aparece .5s ease-out}}
@keyframes p-aparece{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}