/**
 * El aviso junto al botón de los efectos de temporada (temporada.php):
 * «¿Te va lento el portal? ¡Desactiva el evento!». Lo crea el script del
 * botón, al entrar, una vez por sesión y hasta que se cierra.
 *
 * En su propia hoja y no en un <style>: el portal borra los <style> de la
 * página en cuanto está lista (functions.php, cei26_sin_estilos_sueltos()).
 * Del color de la casa, Black y White, que el modo oscuro invierte: con
 * Halloween, que lo lleva puesto, sale claro sobre lo oscuro.
 */

.AvisoTemporada {
  position: absolute;
  z-index: 10000;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  box-sizing: border-box;
  max-width: min(320px, calc(100vw - 32px));
  padding: 12px 12px 12px 16px;
  border-radius: 12px;
  background: var(--Global-Color-Black);
  color: var(--Global-Color-White);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .3);
  font-family: var(--Font-Family-Primary);
  animation: AvisoTemporada-entra .25s ease-out both;
}

/* La flecha, hacia el botón (--flecha la pone el script) */
.AvisoTemporada::before {
  content: "";
  position: absolute;
  top: -6px;
  left: calc(var(--flecha, 50%) - 6px);
  width: 12px;
  height: 12px;
  background: inherit;
  transform: rotate(45deg);
}

.AvisoTemporada .AvisoTemporada-texto {
  margin: 0;
  font-family: var(--Font-Family-Primary);
  font-size: var(--Font-Size-19);
  font-weight: var(--Font-Weight-400);
  line-height: 1.3;
  color: inherit;
}

.AvisoTemporada .AvisoTemporada-cerrar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: -4px -4px 0 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-family: var(--Font-Family-Primary);
  font-size: var(--Font-Size-19);
  cursor: pointer;
}

.AvisoTemporada .AvisoTemporada-cerrar:hover {
  background: rgba(128, 128, 128, .25);
}

.AvisoTemporada .AvisoTemporada-cerrar:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

@keyframes AvisoTemporada-entra {
  from { opacity: 0; transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
  .AvisoTemporada { animation: none; }
}