/*!
 * d7-equivalencias.css — clases de Drupal 7 que Drupal 10/11 renombró.
 *
 * El marcado del frontal es copia literal del de D7, así que conserva nombres
 * de clase que las hojas de core ya no definen. Sin estas reglas los elementos
 * afectados dejan de estar ocultos y desplazan la página: el enlace «Pasar al
 * contenido principal» ocupaba 23 px y bajaba todo el contenido.
 *
 * Equivalencias: element-invisible ≈ visually-hidden,
 * element-focusable ≈ focusable. Definición tomada de system.base.css de D7.
 */

.element-invisible {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  height: 1px;
}

.element-invisible.element-focusable:active,
.element-invisible.element-focusable:focus {
  position: static !important;
  clip: auto;
  overflow: visible;
  height: auto;
}

.element-hidden {
  display: none;
}

/*
 * Botón de envío del formulario de contacto.
 *
 * D7 lo emite como <button> y Drupal 11 como <input type="submit">, así que en
 * D11 le caen dos reglas del diseño escritas para los campos de texto:
 * `input[type="submit"] { padding: 10px 40px }` y
 * `.contact form input { margin-top: 20px }`. Se le devuelve el aspecto que
 * tiene en D7 sin tocar esas reglas, que siguen valiendo para los campos.
 */
.contact form input[type="submit"] {
  padding-top: 6px;
  padding-bottom: 6px;
  margin-top: 0;
}

/*
 * Pase de imágenes del detalle de ficha.
 *
 * Sustituye al de owl.carousel, que superponía las diapositivas por su cuenta.
 * Solo se activa cuando hay más de una imagen: con una sola, el contenedor no
 * recibe la clase y la imagen se muestra en flujo normal, como antes.
 */
.pase-imagenes {
  position: relative;
}

.pase-imagenes > .item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity .3s ease-in-out;
}

.pase-imagenes > .item.activa {
  position: relative;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .pase-imagenes > .item {
    transition: none;
  }
}

/* Logotipo de la cabecera.
   En D7 el enlace conserva los 15 px de relleno derecho que `.navbar-brand`
   trae de Bootstrap 3 —`a.logo { padding: 0 }` de custom.css anula el resto—,
   de modo que el enlace mide 137 px y no 122. Bootstrap 5 deja `.navbar-brand`
   sin relleno, así que en D11 el menú se pegaba al logotipo en todas las
   páginas. Se reproduce el valor calculado que sirve D7. */
.navbar-brand.logo {
  padding: 0 15px 0 0;
}

/* Barra de administración de Drupal.
   El navbar del tema es `position: fixed; top: 0`, la misma posición que ocupa
   la barra de administración, así que con la sesión iniciada la tapaba entera.
   Drupal publica en el elemento raíz la altura de sus barras
   —`--drupal-displace-offset-top`, que se actualiza al abrir la bandeja—, así
   que el navbar arranca por debajo de ella. Los valores de las clases sirven
   solo de respaldo para el instante previo a que el JS fije la variable: 39 px
   la barra sola, 79 con la bandeja horizontal desplegada. */
body {
  --ficesa-desplazamiento: var(--drupal-displace-offset-top, 0px);
}
body.toolbar-fixed {
  --ficesa-desplazamiento: var(--drupal-displace-offset-top, 39px);
}
body.toolbar-fixed.toolbar-horizontal.toolbar-tray-open {
  --ficesa-desplazamiento: var(--drupal-displace-offset-top, 79px);
}
/* El selector lleva `body` a propósito: esta hoja se carga antes que
   bs3-compat.css —el orden reproduce el de html.tpl.php de D7— y allí
   `.navbar-fixed-top { top: 0 }` ganaría por ser posterior con la misma
   especificidad. */
body .navbar-fixed-top {
  top: var(--ficesa-desplazamiento, 0px);
}

/* Marca de campo obligatorio.
   D7 escribe el asterisco como texto —`<span class="form-required">*</span>`
   dentro de cada etiqueta—, así que se ve sin necesidad de CSS. Drupal 11 se
   limita a poner la clase `form-required` en la propia etiqueta y deja el
   dibujo al tema; aquí no lo pintaba nadie y los cinco campos obligatorios del
   alta al boletín salían sin marcar. */
.form-required::after {
  content: " *";
}

/* Modal de la política de protección de datos.
   El enlace «Ver principio política de protección de datos» del alta al
   boletín abre este modal. En D7 esa página la sirve el tema interno, así que
   su CSS vive en `ficesa_internal/css/custom.css`; aquí la sirve el frontal y
   sin estas reglas el modal salía desplegado desde la carga y a todo lo ancho.
   Portado tal cual, salvo lo que allí afecta a otros modales y al botón de
   envío. */
div#modal {
  z-index: 110000000;
  position: absolute;
  margin: auto !important;
  padding: 30px;
  opacity: 0;
  transform: scale(0.9);
  transition: 0.3s 0.3s;
  display: none;
  width: 70%;
  min-width: 500px;
  height: auto;
  background: rgba(245, 245, 245, 0.9);
  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 1px 8px 0 rgba(0, 0, 0, 0.12), 0 3px 3px -2px rgba(0, 0, 0, 0.4);
  border-radius: 7px;
}
div#modal.visible {
  opacity: 1;
  transform: scale(1);
}
.modal-overlay {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 400%;
  width: 400%;
  margin: -50%;
  opacity: 0;
  display: none;
  transition: opacity 0.3s;
  background: #000;
}
.modal-overlay.visible {
  transform: scale(2);
  opacity: 0.7;
}
span.modal-close {
  float: right;
  font-size: 30px;
  transition: 0.5s;
  cursor: pointer;
  position: relative;
  z-index: 1;
}
span.modal-close:hover {
  color: red;
}
@media (max-width: 768px) {
  div#modal.visible {
    right: 0;
    width: 100%;
    min-width: 0;
  }
}

/* Mensajes de estado (errores de login, avisos, etc.).
   Bootstrap 5 anima su alerta con `.fade.show { opacity: 1 }`, definido en
   el propio CSS compilado de Bootstrap 5. Ese fichero está neutralizado a
   propósito en este tema —es la capa que se sustituyó por bs3-compat.css—,
   así que solo queda `.fade { opacity: 0 }` de bs3-compat sin nada que lo
   contrarreste: el aviso se generaba con el texto correcto pero invisible.
   D7 no anima estos mensajes en absoluto, así que mostrarlos sin transición
   es más fiel al original que intentar portar la animación de BS5. */
.fade.show {
  opacity: 1;
}