/* ============================================================
   Cierre unificado de modales
   Referencia visual: botón X de «Preferencias de cookies».
   Mismo icono de 16 px, caja transparente, hover/focus visibles.
   ============================================================ */

.a2-consent-dialog .btn-close,
.modal .modal-header .btn-close,
.modal .a2-more-head .btn-close,
.modal .a2-alta-head .btn-close,
#infoModal .btn-close,
.a2-page-close {
  box-sizing: content-box;
  width: 16px;
  height: 16px;
  min-width: 0;
  min-height: 0;
  padding: 8px;
  margin: 0 0 0 auto;
  border: 0;
  border-radius: 6px;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 16px 16px;
  opacity: .5;
  box-shadow: none;
  flex: 0 0 auto;
  transition: opacity .15s ease, background-color .15s ease;
}

/* Sobre cabeceras azules la X blanca necesita algo más de presencia. */
.modal .modal-header .btn-close-white { opacity: .8; }

/* Tema oscuro: la X se aclara y recupera la opacidad de referencia. */
[data-theme="dark"] .a2-consent-dialog .btn-close,
[data-theme="dark"] .modal .modal-header .btn-close,
[data-theme="dark"] .modal .a2-more-head .btn-close,
[data-theme="dark"] .modal .a2-alta-head .btn-close,
[data-theme="dark"] #infoModal .btn-close,
[data-theme="dark"] .a2-page-close { opacity: .9; }
[data-theme="dark"] .modal .modal-header .btn-close-white { opacity: .9; }

/* Icono blanco sin invertir toda la caja: así el hover/focus no cambia
   el color de fondo ni oculta la X. */
.modal .modal-header .btn-close-white,
[data-theme="dark"] .a2-consent-dialog .btn-close,
[data-theme="dark"] .modal .modal-header .btn-close,
[data-theme="dark"] .modal .a2-more-head .btn-close,
[data-theme="dark"] .modal .a2-alta-head .btn-close,
[data-theme="dark"] #infoModal .btn-close,
[data-theme="dark"] #menuModal .btn-close,
[data-theme="dark"] .a2-page-close {
  filter: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23F3F1EA'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
}

/* Hover y foco visibles, sin cambiar el tamaño ni el icono. */
.a2-consent-dialog .btn-close:hover,
.modal .modal-header .btn-close:hover,
.modal .a2-more-head .btn-close:hover,
.modal .a2-alta-head .btn-close:hover,
#infoModal .btn-close:hover,
.a2-page-close:hover {
  opacity: 1;
  background-color: var(--brand-soft);
}
.a2-consent-dialog .btn-close:focus-visible,
.modal .modal-header .btn-close:focus-visible,
.modal .a2-more-head .btn-close:focus-visible,
.modal .a2-alta-head .btn-close:focus-visible,
#infoModal .btn-close:focus-visible,
.a2-page-close:focus-visible {
  opacity: 1;
  background-color: var(--brand-soft);
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  box-shadow: none;
}
.modal .modal-header .btn-close-white:hover,
.modal .modal-header .btn-close-white:focus-visible {
  background-color: rgba(0, 0, 0, .22);
}
[data-theme="dark"] .modal .modal-header .btn-close-white:hover,
[data-theme="dark"] .modal .modal-header .btn-close-white:focus-visible {
  background-color: rgba(255, 255, 255, .18);
}
.modal .modal-header .btn-close-white:focus-visible { outline-color: #fff; }

/* La X de Alta/Más información queda a la derecha cuando el botón de
   vuelta está oculto en escritorio. */
.modal .a2-alta-head > .btn-close { margin-left: auto !important; }

/* En pantallas táctiles se amplía el área de pulsación sin cambiar el
   tamaño visual del botón. */
@media (hover: none) and (pointer: coarse) {
  .a2-consent-dialog .btn-close,
  .modal .modal-header .btn-close,
  .modal .a2-more-head .btn-close,
  .modal .a2-alta-head .btn-close { position: relative; }
  .a2-consent-dialog .btn-close::after,
  .modal .modal-header .btn-close::after,
  .modal .a2-more-head .btn-close::after,
  .modal .a2-alta-head .btn-close::after,
  .a2-page-close::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 12px;
  }
}