/**
 * Copyright © 2026 Eprodes Solutions S.L.
 * Estilo tipo franja promocional centrada (texto + chevrons), colores desde BO por mensaje.
 * Efectos de apertura (--oe_*) y de mensaje (--me_*) configurables en BO.
 */

.epd-topbar {
  position: relative;
  z-index: var(--epd-tb-z, 5000);
  width: 100%;
  font-size: 0.9375rem;
  line-height: 1.35;
  font-family: inherit;
  box-sizing: border-box;
  cursor: default;
  /* background-color y color los aplica JS según mensaje activo */
  /*
   * Espacio horizontal reservado (flechas + gaps + padding .inner + botón cerrar).
   * Valores conservadores para no desbordar 100vw; .epd-topbar--single lo reduce vía JS.
   */
  --epd-tb-hreserve: 8.35rem;
  /* --epd-tb-vp-min en px desde BO (inline en el root) */
}

/* Duraciones: --epd-tb-open-dur y --epd-tb-msg-dur desde BO (inline en cada .epd-topbar) */
/* Transiciones de apertura / cierre por tipo (clases: epd-topbar--oe_none|slide|fade|scale) */
.epd-topbar--oe_slide {
  transition:
    transform var(--epd-tb-open-dur, 350ms) ease,
    opacity var(--epd-tb-open-dur, 350ms) ease,
    background-color var(--epd-tb-open-dur, 350ms) ease,
    color var(--epd-tb-open-dur, 350ms) ease;
}

.epd-topbar--oe_fade {
  transition:
    opacity var(--epd-tb-open-dur, 350ms) ease,
    background-color var(--epd-tb-open-dur, 350ms) ease,
    color var(--epd-tb-open-dur, 350ms) ease;
}

.epd-topbar--oe_scale {
  transition:
    transform var(--epd-tb-open-dur, 350ms) ease,
    opacity var(--epd-tb-open-dur, 350ms) ease,
    background-color var(--epd-tb-open-dur, 350ms) ease,
    color var(--epd-tb-open-dur, 350ms) ease;
}

.epd-topbar--oe_none {
  transition: background-color var(--epd-tb-open-dur, 350ms) ease, color var(--epd-tb-open-dur, 350ms) ease;
}

/* Estado antes de mostrar (barra en DOM, aún sin .epd-topbar--visible) */
.epd-topbar--oe_slide:not(.epd-topbar--visible):not(.epd-topbar--hidden) {
  transform: translateY(-100%);
  opacity: 0;
}

.epd-topbar--oe_slide.epd-topbar--visible {
  transform: translateY(0);
  opacity: 1;
}

.epd-topbar--oe_fade:not(.epd-topbar--visible):not(.epd-topbar--hidden) {
  transform: translateY(0);
  opacity: 0;
}

.epd-topbar--oe_fade.epd-topbar--visible {
  opacity: 1;
}

.epd-topbar--oe_scale:not(.epd-topbar--visible):not(.epd-topbar--hidden) {
  transform: scale(0.96) translateY(-0.35rem);
  opacity: 0;
}

.epd-topbar--oe_scale.epd-topbar--visible {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.epd-topbar--oe_none:not(.epd-topbar--hidden) {
  transform: translateY(0);
  opacity: 1;
}

.epd-topbar.epd-topbar--no-close {
  --epd-tb-hreserve: 5.85rem;
}

/* Un solo mensaje: sin flechas, más ancho útil */
.epd-topbar--single {
  --epd-tb-hreserve: 5.85rem;
}

.epd-topbar--single.epd-topbar--no-close {
  --epd-tb-hreserve: 3.35rem;
}

.epd-topbar--hidden {
  display: none;
}

/*
 * Fija arriba del viewport. Ancho y left los fija el JS según el contenedor del hook (padre),
 * o ancho completo si el padre es body/html. La altura en flujo se reserva con .epd-topbar__flow-spacer.
 */
.epd-topbar--fixed {
  position: fixed;
  /* top lo fija el JS (apilado acumulado entre barras fixed) */
  padding-top: env(safe-area-inset-top, 0px);
  box-sizing: border-box;
  max-width: none;
}

/* Reserva en el DOM el hueco vertical del slot del hook (mismo ancho que la columna del tema) */
.epd-topbar__flow-spacer {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  flex-shrink: 0;
  box-sizing: border-box;
}

.epd-topbar--no-close .epd-topbar__inner {
  padding-right: 0.65rem;
}

.epd-topbar__inner {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: center;
  min-height: 2.65rem;
  box-sizing: border-box;
  padding: 0.5rem 2.65rem 0.5rem 0.65rem;
  background: transparent;
  color: inherit;
}

.epd-topbar__stage {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 0.65rem;
  min-width: 0;
}

.epd-topbar--single .epd-topbar__nav {
  display: none;
}

.epd-topbar__nav {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 2px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  line-height: 1;
  opacity: 0.92;
  transition: opacity 0.2s ease, transform 0.15s ease;
}

.epd-topbar__nav:hover,
.epd-topbar__nav:focus {
  opacity: 1;
  outline: none;
}

.epd-topbar__nav:focus-visible {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.45);
  opacity: 1;
}

.epd-topbar__nav:active {
  transform: scale(0.94);
}

.epd-topbar__nav-icon {
  display: block;
  font-size: 1.35rem;
  font-weight: 300;
  line-height: 1;
  margin-top: -0.1em;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

.epd-topbar__viewport {
  flex: 0 1 auto;
  min-width: 0;
  text-align: center;
  overflow: hidden;
  box-sizing: border-box;
  /*
   * Mínimo deseado (BO) pero nunca más que el viewport menos reserva (flechas, cierre, safe areas).
   */
  min-width: min(
    var(--epd-tb-vp-min, 240px),
    calc(
      100vw - var(--epd-tb-hreserve) - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)
    )
  );
  max-width: min(
    52rem,
    calc(
      100vw - var(--epd-tb-hreserve) - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)
    )
  );
}

.epd-topbar__slides {
  width: 100%;
}

.epd-topbar__slide {
  display: none;
  width: 100%;
  margin: 0 auto;
  padding: 0 0.15rem;
  box-sizing: border-box;
  background: transparent;
  color: inherit;
}

.epd-topbar__slide--active {
  display: block;
}

/* Efectos al activar un slide (varios mensajes). Un solo mensaje: sin animación. */
.epd-topbar--single .epd-topbar__slide--active {
  animation: none !important;
}

.epd-topbar--me_fade:not(.epd-topbar--single) .epd-topbar__slide--active {
  animation: epd-tb-msg-fade var(--epd-tb-msg-dur, 400ms) ease forwards;
}

.epd-topbar--me_slide_left:not(.epd-topbar--single) .epd-topbar__slide--active {
  animation: epd-tb-msg-slide-left var(--epd-tb-msg-dur, 400ms) ease forwards;
}

.epd-topbar--me_slide_right:not(.epd-topbar--single) .epd-topbar__slide--active {
  animation: epd-tb-msg-slide-right var(--epd-tb-msg-dur, 400ms) ease forwards;
}

.epd-topbar--me_slide_up:not(.epd-topbar--single) .epd-topbar__slide--active {
  animation: epd-tb-msg-slide-up var(--epd-tb-msg-dur, 400ms) ease forwards;
}

.epd-topbar--me_zoom:not(.epd-topbar--single) .epd-topbar__slide--active {
  animation: epd-tb-msg-zoom var(--epd-tb-msg-dur, 400ms) ease forwards;
}

.epd-topbar--me_none:not(.epd-topbar--single) .epd-topbar__slide--active {
  animation: none;
}

@keyframes epd-tb-msg-fade {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes epd-tb-msg-slide-left {
  from {
    opacity: 0;
    transform: translateX(1.1rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes epd-tb-msg-slide-right {
  from {
    opacity: 0;
    transform: translateX(-1.1rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes epd-tb-msg-slide-up {
  from {
    opacity: 0;
    transform: translateY(0.65rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes epd-tb-msg-zoom {
  from {
    opacity: 0;
    transform: scale(0.93);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.epd-topbar__body {
  font-weight: 700;
  letter-spacing: 0.01em;
}

.epd-topbar__slide a,
.epd-topbar__linkblock {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: inherit;
  cursor: pointer;
}

.epd-topbar__slide a:hover,
.epd-topbar__linkblock:hover {
  text-decoration: none;
}

.epd-topbar__linkblock {
  display: inline;
}

.epd-topbar__content {
  margin: 0;
  font-weight: 700;
  cursor: inherit;
}

.epd-topbar__content a {
  cursor: pointer;
}

/* Marquesina continua a nivel de barra */
.epd-topbar--marquee-mode {
  --epd-tb-hreserve: 3.35rem;
}

.epd-topbar--marquee-mode.epd-topbar--no-close {
  --epd-tb-hreserve: 1.25rem;
}

.epd-topbar--marquee-mode .epd-topbar__inner {
  padding-top: 0;
  padding-bottom: 0;
}

.epd-topbar--marquee-mode .epd-topbar__stage {
  align-items: stretch;
}

.epd-topbar--marquee-mode .epd-topbar__nav {
  display: none;
}

.epd-topbar--marquee-mode .epd-topbar__viewport {
  display: flex;
  flex: 1 1 auto;
  align-items: stretch;
  align-self: stretch;
  max-width: calc(
    100vw - var(--epd-tb-hreserve) - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)
  );
  text-align: left;
}

.epd-topbar--marquee-mode .epd-topbar__slides {
  display: flex;
  flex: 1 1 auto;
  align-items: stretch;
  align-self: stretch;
  width: 100%;
  min-height: 100%;
}

.epd-topbar--marquee-mode .epd-topbar__linkblock {
  display: inline;
  white-space: nowrap;
}

.epd-topbar__marquee-viewport {
  overflow: hidden;
  width: 100%;
  max-width: 100%;
}

.epd-topbar--marquee-mode .epd-topbar__marquee-viewport {
  display: flex;
  flex: 1 1 auto;
  align-items: stretch;
  align-self: stretch;
  min-height: 100%;
  white-space: nowrap;
}

.epd-topbar__marquee-track {
  will-change: transform;
}

.epd-topbar--marquee-mode .epd-topbar__marquee-track {
  display: inline-flex;
  align-items: stretch;
  min-height: 100%;
  white-space: nowrap;
  animation: epd-tb-marquee-x var(--epd-tb-marquee-dur, 12s) linear infinite;
}

.epd-topbar--marquee-mode .epd-topbar__marquee-cycle {
  display: inline-flex;
  align-items: stretch;
  align-self: stretch;
  flex: 0 0 auto;
  min-height: 100%;
  white-space: nowrap;
}

.epd-topbar__marquee-item {
  flex: 0 0 auto;
  font-weight: 700;
  background: transparent;
}

.epd-topbar--marquee-mode .epd-topbar__marquee-item {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.epd-topbar--marquee-mode .epd-topbar__marquee-item--has-bg {
  align-self: stretch;
  min-height: 100%;
  padding: 0 0.65em;
  box-sizing: border-box;
}

.epd-topbar__marquee-gap {
  display: inline-block;
  flex: 0 0 auto;
  align-self: stretch;
  white-space: nowrap;
}

.epd-topbar:not(.epd-topbar--visible) .epd-topbar__marquee-track {
  animation-play-state: paused;
}

.epd-topbar--marquee-mode.epd-topbar--marquee-pause-hover .epd-topbar__marquee-viewport:hover .epd-topbar__marquee-track,
.epd-topbar--marquee-mode.epd-topbar--marquee-pause-hover .epd-topbar__marquee-viewport:focus-within .epd-topbar__marquee-track {
  animation-play-state: paused;
}

@keyframes epd-tb-marquee-x {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-1 * var(--epd-tb-marquee-dist, 50%)));
  }
}

.epd-topbar__close {
  position: absolute;
  right: 0.35rem;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem 0.45rem;
  opacity: 0.88;
}

.epd-topbar__close:hover,
.epd-topbar__close:focus {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .epd-topbar--oe_slide,
  .epd-topbar--oe_fade,
  .epd-topbar--oe_scale,
  .epd-topbar--oe_none {
    transition: none !important;
  }

  .epd-topbar__slide--active {
    animation: none !important;
  }

  .epd-topbar__marquee-track {
    animation: none !important;
  }
}

@media (max-width: 767px) {
  .epd-topbar {
    font-size: 0.8125rem;
  }

  .epd-topbar__inner {
    padding-right: 2.4rem;
    padding-left: 0.35rem;
    min-height: 2.45rem;
  }

  .epd-topbar--no-close .epd-topbar__inner {
    padding-right: 0.35rem;
  }

  .epd-topbar {
    --epd-tb-hreserve: 7.5rem;
  }

  .epd-topbar.epd-topbar--no-close {
    --epd-tb-hreserve: 4.65rem;
  }

  .epd-topbar--single {
    --epd-tb-hreserve: 5rem;
  }

  .epd-topbar--single.epd-topbar--no-close {
    --epd-tb-hreserve: 2.75rem;
  }

  .epd-topbar--marquee-mode {
    --epd-tb-hreserve: 2.75rem;
  }

  .epd-topbar--marquee-mode.epd-topbar--no-close {
    --epd-tb-hreserve: 1rem;
  }

  .epd-topbar__nav {
    width: 1.5rem;
    height: 1.5rem;
  }

  .epd-topbar__nav-icon {
    font-size: 1.2rem;
  }
}