/* ============================================================================= MYBEYOGA — controles de cabecera (tema/idioma) + ajuste de anchura tablet ----------------------------------------------------------------------------- La paleta oscura y los arreglos puntuales (los pocos colores que mybeyoga.css escribe a fuego) van INLINE en , no aquí: tienen que estar listos antes del primer pintado, y un fichero externo más añade una petición a la cadena que bloquea el render (ver inc/theme-mode.php, mby_theme_mode_early_script). Esta hoja solo trae lo que puede llegar un instante más tarde sin que se note -- el estilo de los botones nuevos y un apriete de anchura entre 768 y 1023px -- y así se sirve como fichero externo normal, cacheable entre páginas. Construidos con var(--yg-*) desde el principio: los botones se repintan solos al cambiar de tema, sin duplicar nada de color aquí. Sin !important: si el panel de accesibilidad activa "Alto contraste", manda siempre sobre el tema oscuro (ver inc/assets/a11y-panel.css). Contraste oscuro medido (luminancia relativa WCAG, paleta en inc/theme-mode.php): ink/paper 14.67:1, body/paper 11.40:1, muted/paper 6.62:1, forest/paper 8.19:1, mismos pares sobre cream y sand entre 6.05 y 13.39:1, texto de botón (paper) sobre forest 8.19:1, badge sobre sage-soft 5.84:1, sage/night 11.57:1, alerta de error 13.92:1 (texto) y 4.81:1 (borde). Todos ≥ 4.5:1 (texto) o ≥ 3:1 (gráfico/borde). ============================================================================= */ :root .yg-header__tools, :root .yg-mmenu__tools { display: flex; align-items: center; gap: 0.5rem; } :root .yg-header__tools { margin-inline-end: 0.25rem; } :root .yg-mmenu__tools { padding: 0 1.25rem 1rem; } :root .mby-theme-toggle, :root .mby-lang__toggle { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; min-width: 2.75rem; min-height: 2.75rem; padding: 0 0.625rem; border: 1px solid var(--yg-line, rgba(34, 39, 28, 0.16)); border-radius: var(--yg-radius-m, 4px); background: transparent; color: var(--yg-ink, #22271C); cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } :root .mby-theme-toggle { width: 2.75rem; padding: 0; } :root .mby-theme-toggle:hover, :root .mby-lang__toggle:hover { border-color: var(--yg-forest, #47601F); color: var(--yg-forest, #47601F); } :root .mby-theme-toggle:focus-visible, :root .mby-lang__toggle:focus-visible { outline: 2px solid var(--yg-forest, #47601F); outline-offset: 2px; } :root .mby-theme-toggle__icon { display: block; } :root .mby-theme-toggle__icon--moon { display: none; } html[data-theme="dark"] .mby-theme-toggle__icon--sun { display: none; } html[data-theme="dark"] .mby-theme-toggle__icon--moon { display: block; } :root .mby-lang { position: relative; } :root .mby-lang__toggle { width: auto; font-family: var(--yg-sans, inherit); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; } :root .mby-lang__toggle svg { flex: none; transition: transform 0.2s ease; } :root .mby-lang__toggle[aria-expanded="true"] svg { transform: rotate(180deg); } :root .mby-lang__menu { position: absolute; top: calc(100% + 0.5rem); right: 0; z-index: 45; margin: 0; padding: 0.375rem; min-width: 8.5rem; list-style: none; background: var(--yg-paper, #fff); border: 1px solid var(--yg-line, rgba(34, 39, 28, 0.16)); border-radius: var(--yg-radius-m, 4px); box-shadow: 0 16px 34px -16px rgba(15, 20, 10, 0.5); } :root .yg-mmenu__tools .mby-lang__menu { top: auto; bottom: calc(100% + 0.5rem); right: auto; left: 0; } :root .mby-lang__menu[hidden] { display: none; } :root .mby-lang__menu li + li { margin-top: 0.125rem; } :root .mby-lang__menu a { display: flex; align-items: center; min-height: 2.5rem; padding: 0.375rem 0.625rem; border-radius: var(--yg-radius, 2px); font-family: var(--yg-sans, inherit); font-size: 0.8125rem; font-weight: 600; color: var(--yg-ink, #22271C); text-decoration: none; } :root .mby-lang__menu a:hover { background: var(--yg-sand, #E3DDD8); } :root .mby-lang__menu a[aria-current="true"] { color: var(--yg-forest, #47601F); } :root .mby-lang__menu a[aria-current="true"]::after { content: "\2713"; margin-inline-start: auto; padding-inline-start: 0.5rem; } /* Menú móvil: los controles ya viven en la columna que crece hasta el fondo (.yg-mmenu__nav tiene flex:1 en mybeyoga.css), así que quedan pegados justo encima de "Escríbenos" sin más ajuste. */ :root .yg-mmenu__tools .mby-lang__toggle, :root .yg-mmenu__tools .mby-theme-toggle { border-color: var(--yg-line, rgba(34, 39, 28, 0.2)); } @media (prefers-reduced-motion: reduce) { :root .mby-theme-toggle, :root .mby-lang__toggle, :root .mby-lang__toggle svg { transition: none !important; } } /* Google Translate se carga en la página (assets/js/theme-mode.js) al elegir "EN": el único control visible tiene que seguir siendo nuestro botón .mby-lang. Se oculta toda la interfaz propia del widget -- la barra superior (que si no, empuja la cabecera fija hacia abajo con un "top" que Google añade al body), el contenedor del selector, los tooltips y el resaltado amarillo al pasar el ratón. !important porque el widget de Google inyecta sus reglas con más especificidad que cualquiera de las de aquí. */ #google_translate_element { position: absolute !important; top: -9999px !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; } /* iframe.skiptranslate cubre TODOS los iframes que inyecta el widget -- la barra superior y los de soporte -- con nombre de clase estable; Google ofusca y cambia el resto de clases (VIpgJd-...) entre versiones, así que no se depende de ellas. .goog-te-banner-frame/.goog-te-gadget-icon se dejan también por si alguna vez sirve esa variante más antigua. */ iframe.skiptranslate, .goog-te-banner-frame, .goog-te-balloon-frame, #goog-gt-tt, .goog-tooltip, .goog-tooltip:hover, .goog-te-gadget-icon { display: none !important; } .goog-text-highlight { background: none !important; box-shadow: none !important; } /* Google mete top:40px y position:relative inline en para dejar sitio a la barra que acabamos de ocultar; con !important en la hoja de estilos se gana siempre al estilo inline (que no lleva !important). */ body { top: 0 !important; } /* Sellos de acreditacion en tema oscuro: son logotipos oficiales sobre blanco (las banderolas se integran con mix-blend-mode: multiply), asi que sobre el papel oscuro desaparecian. En oscuro llevan su tarjeta clara de origen, en todas las paginas (antes solo se corregia en la de Formacion). */ html[data-theme="dark"] .yg-creds .yg-creds__banner, html[data-theme="dark"] .yg-creds .yg-creds__medal { background: #F3EFE2; border-color: transparent; }