/* ==========================================================================
   La Voz de Dios · CAPA DE WORDPRESS
   La última hoja de la cascada, y la única que la maqueta de preview/ NO
   carga. Por eso aquí va solo lo que existe únicamente dentro de WordPress:

     · lo que pinta el editor de bloques y no está en la maqueta,
     · lo que mete la propia administración (la barra de arriba).

   Todo lo demás —reinicio, componentes, secciones— vive en las hojas que
   comparten maqueta y tema, para que las dos se vean igual.

   COLORES Y MEDIDAS: se leen de tokens.css (--c-*, --t-*, --r-*), igual que
   en el resto del proyecto. Antes este fichero usaba --wp--preset--*, las
   variables que genera theme.json, y eso creaba un segundo sistema de
   diseño en paralelo con el primero. Ahora hay uno solo: tokens.css manda,
   y theme.json lo refleja para el editor.
   ========================================================================== */

/* ---------- Selección de texto ----------
   No está en la maqueta y se hereda en todo el sitio. */
::selection{
  background: var(--c-tinta);
  color: var(--c-fondo);
}

/* ---------- Botones del editor de bloques ----------
   Los .btn de la maqueta los define componentes.css. Esto es solo para los
   botones que se insertan desde el editor, que llegan con las clases de
   core y sin nuestros estilos.

   El !important del hover es necesario: el estilo en línea que core genera
   desde theme.json gana por especificidad a cualquier selector de clase. */
.wp-block-button__link{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform var(--t-rapida) var(--curva),
              box-shadow var(--t-rapida) var(--curva),
              background-color var(--t-rapida);
}
.wp-block-button__link:hover{
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--c-tinta) !important;
}

/* ---------- Foco visible, red de seguridad ----------
   componentes.css ya da foco propio a .btn, .enlace-f y el carrusel. Esto
   cubre lo que llega desde el editor y los campos de formulario, que la
   maqueta no tiene. :where() mantiene la especificidad en cero, así que
   cualquier regla concreta lo pisa sin pelear. */
:where(a, button, input, textarea, select):focus-visible{
  outline: 3px solid var(--c-enlace);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Barra de administración de WordPress ----------
   Solo la ven los administradores, pero para ellos tapaba la cabecera.
   La barra es position:fixed, así que todo lo que se pega al borde superior
   —la cabecera sticky y el panel del menú móvil— tiene que bajar otro tanto.

   Los cortes son los de WordPress (admin-bar.css), no los del tema:
     > 782px   barra fija de 32 px
     ≤ 782px   barra fija de 46 px
     ≤ 600px   la barra pasa a position:absolute y se va con el scroll,
               y WordPress quita el margin-top del html: nada que apartar.

   .ns-historia__foto se define en nosotros.css, que carga DESPUÉS de esta
   hoja; funciona igual porque body.admin-bar añade especificidad de sobra.

   El panel móvil calcula su relleno con --alto-cab, que menu.js lee de
   getBoundingClientRect().bottom, así que ese se corrige solo. */
body.admin-bar .cab{ top: 32px }
body.admin-bar .panel{ top: 32px }
body.admin-bar .ns-historia__foto{ top: 128px }

@media screen and (max-width: 782px){
  body.admin-bar .cab{ top: 46px }
  body.admin-bar .panel{ top: 46px }
  body.admin-bar .ns-historia__foto{ top: 142px }
}

@media screen and (max-width: 600px){
  body.admin-bar .cab{ top: 0 }
  body.admin-bar .panel{ top: 0 }
  body.admin-bar .ns-historia__foto{ top: 96px }
}