/* ==========================================================================
   ViTECH Accesibilidad · «Ir al contenido», foco del botón del menú móvil y
   zona principal. Paleta ViTECH: Gris #373643 y blanco.
   Foco: contorno de 2 px gris con separación de 2 px; sobre gris, blanco.
   ========================================================================== */

/* «Ir al contenido»: oculto hasta que recibe el foco; entonces arriba a la
   izquierda, por encima de la cabecera (#tahefobu-header 9999, menú móvil 99999). */
a.vt-skip {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100000;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  color: #373643; /* el tema le da un rosa de reposo */
}
a.vt-skip:focus {
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
  padding: 12px 20px;
  border-radius: 4px;
  background: #373643;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: underline;
  text-underline-offset: 3px;
  outline: 2px solid #373643;
  outline-offset: 2px;
}

/* El enlace del tema sale detrás de la cabecera. El PHP lo quita en Hello
   Elementor; si otro tema lo imprime, no se ve ni se tabula mientras exista el propio. */
body:has(a.vt-skip) .skip-link:not(.vt-skip) {
  display: none !important;
}

/* Botón del menú móvil de Header Footer Builder (el JS lo hace tabulable) y enlaces
   de la cabecera: el foco del navegador por defecto sale naranja en algunas páginas. */
#tahefobu-header a:focus-visible,
.tahefobu-mobile-toggle:focus-visible {
  outline: 2px solid #373643;
  outline-offset: 2px;
}

/* Interruptor claro/oscuro de la cabecera: oculto mientras no haya script que lo
   atienda. El CSS del sitio lo hace en las páginas de Elementor; aquí, también en
   las fichas de curso, que no lo cargan. */
html:not([data-vt-js]) .vt-toggle { display: none !important; }

/* Adaptación (WCAG 1.4.10): las cabeceras de sección (720 px) y las preguntas
   (820 px) tienen ancho fijo y en tablet se recortaban por la derecha. La misma
   regla va en el CSS del sitio (tools/elementor/extras.py); aquí llega también a
   las páginas importadas antes de ese cambio. */
.e-con.vt-center { margin-left: auto !important; margin-right: auto !important; max-width: 100% !important; }

/* 404 del tema: colores de la paleta en lugar de los del tema */
body.error404 .page-header .entry-title,
body.error404 .page-content { color: #373643; }

/* Modo oscuro (interruptor manual): la cabecera es gris. */
html[data-theme="dark"] a.vt-skip:focus {
  background: #FFFFFF;
  color: #373643;
  outline-color: #FFFFFF;
}
html[data-theme="dark"] .tahefobu-mobile-toggle:focus-visible {
  outline-color: #FFFFFF;
}

/* Hello Elementor da altura mínima al contenido con «.site-header + .elementor».
   Dentro del <main> ya no es hermano de la cabecera: se repite para que nada se mueva. */
.site-header + .vt-main > .elementor {
  min-height: calc(100vh - 320px);
}