/* Icono de «Mi reserva» en la cabecera (2026-10-14): botón redondo antes de «RESERVAR» en las cabeceras del tema y en la que
   el núcleo genera para móvil ([data-ecb-mobile-account]). Colores de la marca: azul noche #093a5d y dorado #df9b11. */
html .ecb-account-icon {
  display: inline-grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
  width: 40px !important;
  height: 40px !important;
  margin: 0 10px 0 16px !important;
  padding: 0 !important;
  border: 1.5px solid #093a5d !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: #093a5d !important;
  vertical-align: middle !important;
  text-decoration: none !important;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
}
/* El tema deja 40 px antes de «RESERVAR» y la fila del menú solo tiene ~40 px libres a 1440: el icono ocupa ese margen
   en vez de sumarse (si se sumara, el menú quedaría pegado al icono o la fila saltaría de línea). */
html .ecb-account-icon:not([data-ecb-mobile-account]) + a { margin-left: 0 !important; }
html .ecb-account-icon svg { width: 21px !important; height: 21px !important; display: block; }
html .ecb-account-icon:hover,
html .ecb-account-icon[aria-current="page"] { background: #093a5d !important; color: #fff !important; }
html .ecb-account-icon:active { transform: scale(0.96); }
html .ecb-account-icon:focus-visible { outline: 3px solid #df9b11 !important; outline-offset: 2px !important; }

@media (max-width: 1024px) {
  /* La barra móvil del núcleo es una rejilla logo | RESERVAR | menú: con el icono, una columna más. */
  html [data-ecb-mobile-header]:has(> [data-ecb-mobile-account]) { grid-template-columns: minmax(68px, 1fr) auto auto 44px !important; }
  html [data-ecb-mobile-account] { margin: 0 !important; justify-self: end !important; }
  /* Con el menú abierto la cabecera es oscura: icono en blanco. */
  html [data-ecb-mobile-header]:has(> [data-ecb-mobile-panel][data-ecb-open="true"]) [data-ecb-mobile-account] {
    border-color: rgb(255 255 255 / 65%) !important;
    background: transparent !important;
    color: #fff !important;
  }
}
@media (max-width: 359px) {
  html [data-ecb-mobile-header]:has(> [data-ecb-mobile-account]) { gap: 8px !important; padding-left: 8px !important; padding-right: 8px !important; }
}
@media (prefers-reduced-motion: reduce) {
  html .ecb-account-icon { transition: none !important; }
}