/* ===========================================================================
   TEMAS ESTACIONALES — Muebles Roca
   ---------------------------------------------------------------------------
   REGLA INNEGOCIABLE: toda regla de este archivo empieza con html[data-tema].
   Si una regla no lo hace, está mal escrita. Sin el atributo (11 meses al año)
   este archivo no pinta absolutamente nada y el sitio es idéntico al original.

   NO SE EDITA css/style.css POR UN TEMA. Los desplazamientos del navbar de
   más abajo ganan por especificidad — ver el comentario de esa sección.
   =========================================================================== */

/* --- Medidas comunes -------------------------------------------------------
   El alto vive acá y NO dentro de cada preset: si lo declarara cada preset,
   html[data-tema="patrio"] (0,2,1) le ganaría a la media query de móvil
   html[data-tema] (0,1,1) y el banner nunca encogería en el teléfono. */
html[data-tema] {
  --tema-banner-h: 44px;
}

/* --- Preset: patrio (Guatemala, 1 al 20 de septiembre) ---------------------
   El celeste de la bandera (#6CACE4) con texto blanco encima da 2.6:1 y
   REPRUEBA WCAG AA. Por eso el fondo usa el profundo (5.3:1, cumple) y el
   claro queda sólo para la línea decorativa, que no lleva texto. */
html[data-tema="patrio"] {
  --tema-accent: #6CACE4;
  --tema-bg: #1B6CA8;
  --tema-fg: #FFFFFF;
}

/* --- Preset: navidad (mínimo, valida que la forma aguanta otro caso) ------ */
html[data-tema="navidad"] {
  --tema-accent: #C8102E;
  --tema-bg: #14532D;
  --tema-fg: #FFFFFF;
}

/* --- El banner ------------------------------------------------------------
   Fijo, no absoluto: el navbar es position:fixed, así que si el banner se
   fuera con el scroll el navbar quedaría flotando con un hueco de 44px
   encima. Como se queda siempre a la vista, lleva la × para cerrarlo. */
html[data-tema] .tema-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--tema-banner-h);
  z-index: 1000;                  /* igual que .navbar; el menú móvil (1100) lo tapa */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 48px;
  background: var(--tema-bg);
  color: var(--tema-fg);
  overflow: hidden;               /* red de seguridad: nada se desborda al hero */
}

/* El color va declarado acá y NO se hereda de .tema-banner: css/style.css:530
   tiene `p { color: var(--text-soft) }`, y una regla que matchea al elemento le
   gana SIEMPRE al valor heredado del padre, por débil que sea su especificidad.
   Sin esta línea el mensaje sale en ink-700 (#2F3742) sobre el azul. */
html[data-tema] .tema-banner-msg {
  margin: 0;
  color: var(--tema-fg);
  font-family: var(--font-main);
  font-size: 0.83rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
  line-height: 1.2;
}

html[data-tema] .tema-banner-x {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--tema-fg);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.75;
}

html[data-tema] .tema-banner-x:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.14);
}

/* Recuadro con la bandera, junto al texto.
   La primera versión ponía la bandera como franja tricolor de lado a lado del
   banner: a 1440px cada tercio medía 480px y no se leía como bandera, se leía
   como una barra blanca suelta. La bandera se reconoce por su PROPORCIÓN, no
   por su color — a 21×14px funciona. Decorativa: aria-hidden en el marcado. */
html[data-tema] .tema-banner-flag {
  width: 21px;
  height: 14px;
  flex-shrink: 0;
  border-radius: 2px;
  background: linear-gradient(
    to right,
    var(--tema-accent) 0 33.333%,
    #FFFFFF 33.333% 66.666%,
    var(--tema-accent) 66.666% 100%
  );
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28);
}

/* Hairline al pie: celeste sólido, sin tricolor. */
html[data-tema] .tema-banner-linea {
  display: none;
}

html[data-tema="patrio"] .tema-banner-linea {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--tema-accent);
}

/* --- Hacerle lugar al banner ----------------------------------------------
   El navbar es position:fixed con top:18px declarado en SIETE lugares:
   css/style.css:733 (.navbar-inner), :893 (.navbar-home), :931 (.nav-shadow),
   más inline en index.html:2334, index.html:2374, contacto.html:900 y
   nosotros.html:1326.

   Esta única regla los gana los siete SIN EDITAR NINGUNO: la especificidad
   html[data-tema-banner] .navbar-home es (0,2,1) contra (0,1,0) de las
   originales. La especificidad le gana al orden de carga, así que da igual
   que el <style> inline venga después. Sin banner, la regla no existe. */
html[data-tema-banner] .navbar-home,
html[data-tema-banner] .navbar-inner,
html[data-tema-banner] .nav-shadow {
  top: calc(18px + var(--tema-banner-h));
}

html[data-tema-banner] body {
  padding-top: var(--tema-banner-h);
}

/* --- Acentos: NINGUNO, a propósito ----------------------------------------
   Acá hubo `html[data-tema="patrio"] .eyebrow { color: var(--tema-bg) }` y se
   quitó. El sitio tiene TRECE overrides contextuales de .eyebrow (style.css
   :1263 :3744 :3897 :4136 :4215 :4732, más inline en index.html :311 :709
   :1244 :1531): unos son rojos sobre fondo claro y otros BLANCOS sobre fondo
   oscuro o sobre foto. La regla del tema, con especificidad (0,2,1), le ganaba
   también a los blancos y dejaba azul #1B6CA8 sobre oscuro — ilegible.

   Pintar un componente con tantos contextos exige auditar los trece y volver a
   verificarlos en cada cambio: es justo el acoplamiento que este sistema
   promete no crear. El banner y la bandera ya visten la página.

   Si algún día se quiere un acento, va sobre un componente de UN solo
   contexto, verificado en claro Y en oscuro antes de darlo por bueno. */

/* --- Móvil ----------------------------------------------------------------
   Misma especificidad que la declaración de arriba y más abajo en el archivo,
   así que gana. Ver el comentario de "Medidas comunes". */
@media (max-width: 720px) {
  html[data-tema] {
    --tema-banner-h: 38px;
  }

  /* Asimétrico a propósito: a la derecha hay que dejarle lugar a la ×, a la
     izquierda no. Simétrico desperdiciaba 34px que el mensaje necesitaba. */
  html[data-tema] .tema-banner {
    padding: 0 40px 0 12px;
    gap: 8px;
  }

  html[data-tema] .tema-banner-msg {
    font-size: 0.74rem;
  }

  html[data-tema] .tema-banner-flag {
    width: 18px;
    height: 12px;
  }
}