/* =====================================================================
   Temas de temporada (Halloween, Navidad…): lo común a todos. El interruptor de la cabecera, la píldora del menú
   móvil y la nota que anuncia el tema y señala dónde quitarlo. Los colores los pone la hoja de cada tema
   (assets/css/<tema>.css) con las variables --nota-*; aquí solo la forma, el sitio y el movimiento.
   Cada tema hace visibles sus piezas con <html data-campana="<tema>"> (tema.js, antes de pintar) y aplica su
   aspecto con <html data-<tema>>. Sin tema encendido esta hoja no se ve: todo empieza oculto.
   ===================================================================== */

/* El interruptor, junto al de claro/oscuro y con su forma: Dondulcín en el color del texto, con lo que le ponga
   cada tema (la luz de Halloween, la nieve de Navidad). Solo el del tema encendido se ve (lo levanta su hoja). */
.campana-btn {
  position: relative; display: none; place-items: center; width: 48px; height: 48px; flex: none;
  border: 0; border-radius: 50%; background: var(--soft-100); color: var(--ink); cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 200ms ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.campana-btn__icon { width: 22px; height: 22px; fill: currentColor; overflow: visible; transition: rotate 460ms var(--ease-out); }
.campana-btn:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
  .campana-btn:hover { background: var(--soft-200); }
  .campana-btn:hover .campana-btn__icon { rotate: -10deg; }
}
@media (max-width: 400px) { .campana-btn { width: 44px; height: 44px; } }
/* en el móvil más estrecho la cabecera ya va llena (idioma, tema, cesta, menú): el interruptor se queda en el menú */
@media (max-width: 480px) { :root[data-campana] .header .header__tools .campana-btn { display: none !important; } }

.campana-pill {
  position: relative; display: none; align-items: center; gap: 0.6rem; justify-self: start; height: 44px; padding: 0 1.1rem 0 0.85rem;
  border: 0; border-radius: 999px; background: rgb(255 255 255 / 0.12); color: #fff; cursor: pointer;
  font: inherit; font-size: 1.0625rem; font-weight: 750; font-stretch: 90%; letter-spacing: -0.01em;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--ease-out); -webkit-tap-highlight-color: transparent;
}
.campana-pill .campana-btn__icon { width: 22px; height: 22px; }
.campana-pill[aria-pressed="true"] { background: #fff; color: var(--red); }
.campana-pill:active { transform: scale(0.96); }

/* La nota de temporada: anuncia el tema y señala con su pico dónde se quita (el interruptor de la cabecera; en el
   móvil, el botón del menú). Panel flotante; sale una vez por visitante cada vez que se enciende en el panel
   (main.js la coloca bajo su botón y le pone el pico en --caret). */
.campana-nota {
  --caret: 24px;
  position: absolute; z-index: 2; top: calc(100% + 12px); right: var(--gutter); width: min(19.5rem, calc(100vw - 2rem));
  padding: 1rem 1.15rem 1.05rem; border-radius: 16px; background: var(--nota-fondo); color: var(--nota-texto);
  box-shadow: 0 2px 6px rgb(20 0 0 / 0.25), 0 22px 44px -18px rgb(20 0 0 / 0.65); /* taste-skill-ignore: panel flotante, como la lista de idiomas */
  transform-origin: calc(100% - var(--caret)) -8px;
  opacity: 0; transform: translateY(-6px) scale(0.96); transition: opacity 180ms ease, transform 260ms var(--ease-out);
}
.campana-nota.is-open { opacity: 1; transform: none; }
.campana-nota::before {
  content: ""; position: absolute; top: -6px; right: calc(var(--caret) - 8px); width: 16px; height: 16px;
  border-radius: 3px; background: inherit; rotate: 45deg;
}
.campana-nota__titulo { margin: 0.2rem 0 0; color: var(--nota-titulo); font-size: 1.1875rem; font-weight: 800; font-stretch: 88%; line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance; }
.campana-nota__texto { margin: 0.4rem 0 0; font-size: 0.9375rem; line-height: 1.45; }
.campana-nota__menu, .campana-nota.is-menu .campana-nota__cabecera { display: none; }
.campana-nota.is-menu .campana-nota__menu { display: inline; }
.campana-nota__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1rem; margin-top: 0.85rem; }
.campana-nota__ok, .campana-nota__quitar {
  min-height: 40px; border: 0; cursor: pointer; font: inherit; font-size: 0.9375rem; font-weight: 650;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.campana-nota__ok { padding: 0 1.15rem; border-radius: 999px; background: var(--nota-ok); color: var(--nota-ok-texto); transition: background-color 160ms ease, transform 160ms var(--ease-out); }
.campana-nota__ok:active { transform: scale(0.97); }
.campana-nota__quitar {
  padding: 0; background: none; color: var(--nota-enlace); text-decoration: underline; text-decoration-thickness: 1.5px;
  text-underline-offset: 0.25em; text-decoration-color: color-mix(in srgb, var(--nota-enlace) 50%, transparent); transition: text-decoration-color 160ms ease;
}
.campana-nota :focus-visible { outline-color: var(--nota-enlace); }
@media (hover: hover) and (pointer: fine) {
  .campana-nota__ok:hover { background: var(--nota-ok-hover); }
  .campana-nota__quitar:hover { text-decoration-color: var(--nota-enlace); }
}

@media (prefers-reduced-motion: reduce) {
  .campana-btn, .campana-btn__icon, .campana-pill { transition: none; }
  .campana-nota { transform: none; transition: opacity 120ms ease; }
}