/* Estilos generales */ :root { --font-scale: 1; } /* Usar 100% como base para respetar preferencias del usuario/sistema */ html { font-size: calc(100% * var(--font-scale)); } body { font-family: Arial, sans-serif; /* Antes: 16px. Ahora 1rem para que escale con */ font-size: 1rem; line-height: 1.6; background-color: #FFFFFF; color: #000000; padding: 20px; } /* Cabecera */ header { background-color: #D6E4F0; padding: 15px; margin-bottom: 20px; border-radius: 8px; } /* Menú de navegación */ nav ul { list-style: none; padding: 0; display: flex; gap: 15px; } nav a { text-decoration: none; color: #2A4D69; font-weight: bold; } /* Controles de accesibilidad */ .controles-accesibilidad { display: flex; gap: .5rem; flex-wrap: wrap; } .controles-accesibilidad button { margin-right: 12px; padding: .5rem .75rem; font-size: 1rem; cursor: pointer; background-color: #B0CDE6; border: 2px solid #2A4D69; border-radius: 6px; color: #2A4D69; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .controles-accesibilidad button:hover, .controles-accesibilidad button:focus { background-color: #2A4D69; color: #FFFFFF; } /* Foco visible global */ :focus-visible { outline: 3px solid #2A4D69; outline-offset: 3px; } a:focus-visible, button:focus-visible { box-shadow: 0 0 0 3px rgba(42,77,105,.25); } /* Texto informativo de atajos */ .info-atajos { font-size: 0.9rem; margin-top: 8px; color: #333333; } /* Región en vivo (no visible) */ .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ===== Modo de alto contraste ===== */ body.alto-contraste { background: #000; color: #fff; } body.alto-contraste a { color: #0ff; text-decoration: underline; } body.alto-contraste nav a { color: #0ff !important; } body.alto-contraste button, body.alto-contraste [role="button"] { background: #fff; color: #000; border: 2px solid #fff; } /* Diseño responsive para móviles */ @media screen and (max-width: 600px) { nav ul { flex-direction: column; gap: 10px; } .controles-accesibilidad button { display: block; margin-bottom: 10px; } .info-atajos { font-size: 1rem; } } /* ===================================================== Bloque de VÍDEO y TRANSCRIPCIÓN (accesible y responsive) ===================================================== */ #video-refuerzo { margin: 2rem 0; } #video-refuerzo h2 { margin-bottom: .5rem; } #video-ayuda { font-size: .95rem; margin-bottom: .75rem; } .contenedor-video { position: relative; aspect-ratio: 16 / 9; width: 100%; max-width: 960px; margin-inline: auto; border: 2px solid #2A4D69; border-radius: 12px; overflow: hidden; background: #000; } .contenedor-video iframe { display: block; width: 100%; height: 100%; border: 0; } /* Detalles/Transcripción */ #transcripcion-video { max-width: 960px; margin: 1rem auto; border: 2px solid #B0CDE6; border-radius: 10px; background: #F7FBFF; color: inherit; } #transcripcion-video[open] { background: #FFFFFF; } #transcripcion-video > summary { padding: .75rem 1rem; cursor: pointer; font-weight: 700; list-style: none; } #transcripcion-video > summary:focus-visible { outline: 3px solid #2A4D69; outline-offset: 2px; } #transcripcion-video > div { padding: 1rem; } #transcripcion-video pre { font-family: inherit; font-size: 1rem; line-height: 1.6; margin: 0; white-space: pre-wrap; } /* Alto contraste aplicado al bloque */ body.alto-contraste .contenedor-video { border-color: #FFFFFF; } body.alto-contraste #transcripcion-video { background: #000000; border-color: #FFFFFF; color: #FFFFFF; } body.alto-contraste #transcripcion-video > summary { border-bottom: 1px solid #FFFFFF; } /* Responsive fino */ @media screen and (max-width: 600px) { .contenedor-video { max-width: 100%; border-width: 1px; border-radius: 8px; } #transcripcion-video { margin: 1rem 0; } } /* ===================================================== Biblioteca de recursos — mejoras visuales ===================================================== */ .lista-recursos { list-style: none; padding: 0; margin: 1rem 0 2rem; } .lista-recursos .recurso { max-width: 960px; margin: 1rem auto; padding: 1rem; border: 1px solid #e0e6ef; border-radius: 12px; background: #fff; } .lista-recursos .recurso h3 { margin: 0 0 .5rem; font-size: 1.15rem; } .lista-recursos .recurso p { margin: 0 0 .75rem; } /* Compactar recursos no-vídeo */ .lista-recursos .recurso[data-tipo="pdf"], .lista-recursos .recurso[data-tipo="excel"], .lista-recursos .recurso[data-tipo="word"] { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .5rem 1rem; } .lista-recursos .recurso[data-tipo="pdf"] a, .lista-recursos .recurso[data-tipo="excel"] a, .lista-recursos .recurso[data-tipo="word"] a { justify-self: end; } /* Ayuda de atajos dentro de la biblioteca */ .ayuda-atajos { max-width: 960px; margin: 1rem auto; border: 2px dashed #B0CDE6; background: #F7FBFF; border-radius: 12px; } .ayuda-atajos h2 { margin-top: 0.25rem; } /* Alto contraste biblioteca */ body.alto-contraste .lista-recursos .recurso { background: #000; color: #fff; border-color: #fff; } body.alto-contraste .ayuda-atajos { background: #000; color: #fff; border-color: #fff; } .fin-de-pagina { margin-top: 2rem; padding: 1rem 0; border-top: 1px solid currentColor; font-style: italic; opacity: 0.95; } .fin-de-pagina .volver-arriba { margin-left: 0.75rem; text-decoration: underline; } .fin-de-pagina .volver-arriba:focus, .fin-de-pagina .volver-arriba:hover { outline: 2px solid currentColor; outline-offset: 2px; }