/* ============================================================================
   PokeWave · HALLOWEEN (1-31 de octubre)
   ============================================================================
   Solo se carga cuando app/Services/Temporada.php dice 'halloween' (octubre,
   o TEMPORADA_FORZADA=halloween en el .env). El 1 de noviembre deja de
   cargarse y la web vuelve sola a su rojo: este fichero no cambia nada fuera
   de octubre y no hay que borrarlo.

   Parte 1, escrita a mano: contraste y adornos (telaraña, fantasmas).
   Parte 2, GENERADA: cada regla de tailwind.css, app.css, games.css y de los
   <style> de las plantillas que usa el rojo de la marca, repetida en naranja.
     rojo #EE1515 → fondo #F56F25 · texto en claro #C2410C · texto en oscuro #F56F25
     rojo #C20E0E → fondo #D9581B · texto en claro #9A3412
     rosa #FFE0E0 → #FFE9DC
   Si se recompila tailwind.css con clases rojas nuevas, regenerar con
   generar-halloween-css.php (en el scratchpad de la sesión del 30-sep-2026).
   ========================================================================== */
/* ════════ Parte 1 · a mano ════════ */

/* ── Contraste: texto negro sobre el naranja ─────────────────────────────────
   Blanco sobre #F56F25 da 2,9 de contraste (mínimo 4,5); negro da 7,1. Es
   además el naranja y negro del logo de Halloween. Cubre la barra de menú
   (<nav class="bg-poke-red text-white">, cuyos enlaces heredan el color), las
   etiquetas y los botones que llevan fondo rojo y texto blanco en la misma
   clase, y sus estados al pasar el ratón. Los menús desplegables fijan su
   propio color (text-ink-950 dark:text-white), así que no les afecta. */
.bg-poke-red.text-white,
.bg-poke-red-dark.text-white,
.hover\:bg-poke-red:hover.hover\:text-white:hover,
.hover\:bg-poke-red-dark:hover.hover\:text-white:hover,
.group:hover .group-hover\:bg-poke-red.group-hover\:text-white {
  color: #1A0F08;
}
.bg-poke-red.text-white .opacity-70,
.bg-poke-red.text-white .opacity-80 { opacity: .8; }
/* Cabecera de «Pokémon del día» (home.twig): el blanco va en los hijos, y
   app.css lo fuerza con !important (.widget-header.bg-poke-red h3). */
.widget-header.bg-poke-red h3,
.widget-header.bg-poke-red .text-white { color: #1A0F08 !important; }
.widget-header.bg-poke-red .text-white\/80 { color: rgba(26, 15, 8, .75); }
.widget-header.bg-poke-red .bg-white { background-color: #1A0F08; }

/* Cajas naranjas con hijos que fijan su propio blanco o amarillo (el boletín
   de news/index.twig y news/show.twig): todo a negro. */
.bg-poke-red.text-white .text-poke-yellow,
.bg-poke-red.text-white input.text-white { color: #1A0F08; }
.bg-poke-red.text-white [class*="text-white/"] { color: rgba(26, 15, 8, .8); }
.bg-poke-red.text-white input::placeholder { color: rgba(26, 15, 8, .6); }
.bg-poke-red.text-white input:focus { color: #0A0A0A; }

/* El footer y la barra superior son siempre oscuros: ahí el texto naranja
   tiene que ser el brillante (7,8 de contraste), no el oscuro de los fondos
   claros (3,9). Con !important porque app.css fuerza los enlaces rojos con
   «html:not(.dark) a.text-poke-red», que pesa más. */
footer .text-poke-red,
footer .hover\:text-poke-red:hover,
.bg-ink-950 .text-poke-red,
.bg-ink-900 .text-poke-red { color: #F56F25 !important; }

/* ── Telaraña en la esquina derecha de la barra (solo pantallas anchas:
      por debajo de 1400 px taparía el botón «ÚNETE») ──────────────────────── */
.pw-hw-tela {
  position: absolute; top: 0; right: 0;
  color: rgba(26, 15, 8, .5);
  pointer-events: none;
}
@media (max-width: 1399.98px) { .pw-hw-tela { display: none; } }

/* ── Gengar y Haunter asomando por encima de la barra ────────────────────────
   Se pegan al borde superior de la barra, en el hueco libre a la derecha del
   buscador, alineados con el contenido (max-w-7xl = 80rem, px-6 = 1,5rem).
   La caja recorta el sprite: solo se ve la mitad de arriba, como si se
   escondieran detrás de la barra. Los sprites son pixel art de 96 px: se
   pintan a su tamaño y con image-rendering:pixelated para que no se emborronen
   en pantallas de alta densidad. Solo se anima transform (no repinta). */
.pw-hw-asoman {
  position: absolute; bottom: 100%;
  right: max(1.5rem, calc((100% - 80rem) / 2 + 1.5rem));
  display: flex; gap: .25rem;
  pointer-events: none; z-index: 1;
}
/* Gengar ocupa las filas 20-75 de su cuadro de 96 y Haunter las 21-68: con
   la caja de 40 px y la imagen subida 16 px se ven las filas 16-56, es decir
   orejas, ojos y sonrisa; el resto queda «detrás» de la barra. */
.pw-hw-asoma {
  display: block; position: relative;
  width: 62px; height: 40px; overflow: hidden;
}
.pw-hw-asoma img {
  position: absolute; left: -16px; top: -16px;
  width: 96px; height: 96px; max-width: none;
  image-rendering: pixelated;
  animation: pw-hw-asomar 4.5s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -2.1s);
}
@keyframes pw-hw-asomar {
  0%, 100% { transform: translateY(6px); }
  45%, 60% { transform: translateY(0); }
}

/* ── Desfile de fantasmas en lo alto del footer ──────────────────────────── */
.pw-hw-desfile {
  display: flex; justify-content: center; align-items: flex-end;
  gap: clamp(.25rem, 2.5vw, 2.5rem);
  padding: 1.25rem 1rem 0;
  border-bottom: 1px solid rgba(245, 111, 37, .25);
  background: radial-gradient(55% 140% at 50% 100%, rgba(245, 111, 37, .16), transparent 70%);
  overflow: hidden;
}
.pw-hw-desfile img {
  width: 96px; height: 96px; flex: none;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 6px rgba(245, 111, 37, .35));
  animation: pw-hw-flotar 3.4s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -.6s);
}
@keyframes pw-hw-flotar {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
@media (max-width: 639.98px) {
  .pw-hw-desfile { gap: 0; padding-top: .75rem; }
  .pw-hw-desfile img { width: 56px; height: 56px; }
}

/* Quien tiene desactivadas las animaciones en su sistema las ve quietas. */
@media (prefers-reduced-motion: reduce) {
  .pw-hw-asoma img, .pw-hw-desfile img { animation: none; }
}

/* ════════ Parte 2 · GENERADA, no editar a mano ════════ */
/* ── de tailwind.css ── */
.border-poke-red{border-color:rgb(245 111 37/var(--tw-border-opacity,1))}
.border-poke-red\/30{border-color:rgba(245,111,37,.3)}
.border-poke-red\/40{border-color:rgba(245,111,37,.4)}
.border-t-poke-red{border-top-color:rgb(245 111 37/var(--tw-border-opacity,1))}
.bg-poke-red{background-color:rgb(245 111 37/var(--tw-bg-opacity,1))}
.bg-poke-red-dark{background-color:rgb(217 88 27/var(--tw-bg-opacity,1))}
.bg-poke-red\/10{background-color:rgba(245,111,37,.1)}
.bg-poke-red\/15{background-color:rgba(245,111,37,.15)}
.bg-poke-red\/5{background-color:rgba(245,111,37,.05)}
.bg-poke-red\/95{background-color:rgba(245,111,37,.95)}
.from-poke-red{--tw-gradient-from:#F56F25 var(--tw-gradient-from-position);--tw-gradient-to:rgba(245,111,37,0) var(--tw-gradient-to-position)}
.text-poke-red{color:rgb(194 65 12/var(--tw-text-opacity,1))}
:where(.dark) .text-poke-red{color:rgb(245 111 37/var(--tw-text-opacity,1))}
.ring-poke-red{--tw-ring-color:rgb(245 111 37/var(--tw-ring-opacity,1))}
.ring-poke-red\/20{--tw-ring-color:rgba(245,111,37,.2)}
.ring-poke-red\/30{--tw-ring-color:rgba(245,111,37,.3)}
.hover\:border-poke-red:hover{border-color:rgb(245 111 37/var(--tw-border-opacity,1))}
.hover\:bg-poke-red:hover{background-color:rgb(245 111 37/var(--tw-bg-opacity,1))}
.hover\:bg-poke-red-dark:hover{background-color:rgb(217 88 27/var(--tw-bg-opacity,1))}
.hover\:bg-poke-red\/10:hover{background-color:rgba(245,111,37,.1)}
.hover\:text-poke-red:hover{color:rgb(194 65 12/var(--tw-text-opacity,1))}
:where(.dark) .hover\:text-poke-red:hover{color:rgb(245 111 37/var(--tw-text-opacity,1))}
.hover\:ring-poke-red:hover{--tw-ring-color:rgb(245 111 37/var(--tw-ring-opacity,1))}
.hover\:ring-poke-red\/30:hover{--tw-ring-color:rgba(245,111,37,.3)}
.focus\:border-poke-red:focus{border-color:rgb(245 111 37/var(--tw-border-opacity,1))}
.focus\:ring-poke-red:focus{--tw-ring-color:rgb(245 111 37/var(--tw-ring-opacity,1))}
.focus\:ring-poke-red\/15:focus{--tw-ring-color:rgba(245,111,37,.15)}
.focus\:ring-poke-red\/20:focus{--tw-ring-color:rgba(245,111,37,.2)}
.group:hover .group-hover\:text-poke-red{color:rgb(194 65 12/var(--tw-text-opacity,1))}
:where(.dark) .group:hover .group-hover\:text-poke-red{color:rgb(245 111 37/var(--tw-text-opacity,1))}
.group:hover .group-hover\:ring-poke-red{--tw-ring-color:rgb(245 111 37/var(--tw-ring-opacity,1))}
.peer:checked~.peer-checked\:border-poke-red{border-color:rgb(245 111 37/var(--tw-border-opacity,1))}
.peer:checked~.peer-checked\:bg-poke-red{background-color:rgb(245 111 37/var(--tw-bg-opacity,1))}
.peer:checked~.peer-checked\:bg-poke-red\/10{background-color:rgba(245,111,37,.1)}
.peer:checked~.peer-checked\:text-poke-red{color:rgb(194 65 12/var(--tw-text-opacity,1))}
:where(.dark) .peer:checked~.peer-checked\:text-poke-red{color:rgb(245 111 37/var(--tw-text-opacity,1))}
.has-\[\:checked\]\:border-poke-red:has(:checked){border-color:rgb(245 111 37/var(--tw-border-opacity,1))}
.has-\[\:checked\]\:bg-poke-red\/5:has(:checked){background-color:rgba(245,111,37,.05)}
.group:has(:checked) .group-has-\[\:checked\]\:border-poke-red{border-color:rgb(245 111 37/var(--tw-border-opacity,1))}
.group:has(:checked) .group-has-\[\:checked\]\:bg-poke-red{background-color:rgb(245 111 37/var(--tw-bg-opacity,1))}
/* ── de app.css ── */
::-webkit-scrollbar-thumb:hover{background:rgba(245,111,37,0.6)}
html:not(.dark) a.text-poke-red,html:not(.dark) .text-poke-red.hover\:underline{color:#C2410C}
:where(a,button):focus-visible{outline:2px solid #F56F25}
.pw-fact-content code{background:rgba(245,111,37, 0.08);color:#C2410C}
:where(.dark) .pw-fact-content code{color:#F56F25}
#pw-ptr{color:var(--primary, #C2410C)}
:where(.dark) #pw-ptr{color:var(--primary, #F56F25)}
#pw-ptr.pw-ptr-ready{background:var(--primary, #F56F25);color:#1A0F08}
.pw-top-source{color:var(--primary, #C2410C)}
:where(.dark) .pw-top-source{color:var(--primary, #F56F25)}
.pw-hero-wave::before{background:var(--hero-color, #F56F25)}
.pw-hero-wave-bottom::after{background:var(--hero-color, #F56F25)}
.pw-hero-wave-soft::before{background:var(--hero-color-soft, #FFE9DC)}
.news-card:hover{border-color:#F56F25}
.news-body > p:first-of-type::first-letter{color:var(--brand-red, #C2410C)}
:where(.dark) .news-body > p:first-of-type::first-letter{color:var(--brand-red, #F56F25)}
.news-body h2::before{background:var(--brand-red, #F56F25)}
.news-body ul > li::marker{color:var(--brand-red, #C2410C)}
:where(.dark) .news-body ul > li::marker{color:var(--brand-red, #F56F25)}
.news-body ol > li::marker{color:var(--brand-red, #C2410C)}
:where(.dark) .news-body ol > li::marker{color:var(--brand-red, #F56F25)}
.gen-block h4{color:#C2410C;border-bottom:2px solid #F56F25}
:where(.dark) .gen-block h4{color:#F56F25}
.gen-block a:hover{color:#C2410C}
:where(.dark) .gen-block a:hover{color:#F56F25}
.pw-poke-card:hover{box-shadow:0 12px 28px -10px rgba(245,111,37,.25)}
.pw-pokeball-bg{background:#F56F25}
.pw-tab.active::after{background:#F56F25}
.pw-step-pill.done{background:#F56F25;color:#1A0F08}
.pw-btn-pokeball{background:#F56F25;box-shadow:0 8px 20px -8px rgba(245,111,37,.65), inset 0 -3px 0 rgba(0,0,0,.18);color:#1A0F08}
@media (max-width: 768px){
a,button,[role="button"],input[type="checkbox"],input[type="radio"]{-webkit-tap-highlight-color:rgba(245,111,37, 0.1)}
}
/* ── de games.css ── */
.gx{--ga:#F56F25}
.gx-cat-hero{background:radial-gradient(120% 140% at 12% 0%, rgba(245,111,37,.55), transparent 55%),
    radial-gradient(120% 140% at 90% 20%, rgba(59,76,202,.55), transparent 55%),
    linear-gradient(160deg,#15171d 0%, #0a0808 100%)}
.gx-card{--ga:#F56F25}
/* ── de los <style> de partials/games-css.twig (con html.pw-halloween delante: esos <style> van en el <body> y llegan después) ── */
html.pw-halloween .gx{--ga:#F56F25}
html.pw-halloween .gx-cat-hero{background:radial-gradient(120% 140% at 12% 0%,rgba(245,111,37,.55),transparent 55%),radial-gradient(120% 140% at 90% 20%,rgba(59,76,202,.55),transparent 55%),linear-gradient(160deg,#15171d 0%,#0a0808 100%)}
html.pw-halloween .gx-card{background:radial-gradient(120% 130% at 100% 0%,color-mix(in srgb,var(--ga2,#3B4CCA) 70%,transparent),transparent 60%),linear-gradient(135deg,color-mix(in srgb,var(--ga,#F56F25) 92%,#000 8%) 0%,color-mix(in srgb,var(--ga,#F56F25) 55%,#0a0808) 100%)}
html.pw-halloween .gx-hero{background:radial-gradient(120% 150% at 8% 0%,color-mix(in srgb,var(--ga,#F56F25) 60%,transparent),transparent 55%),radial-gradient(120% 150% at 95% 30%,color-mix(in srgb,var(--ga2,#3B4CCA) 60%,transparent),transparent 55%),linear-gradient(160deg,#15171d 0%,#0a0808 100%)}
html.pw-halloween .gx-panel__head{background:linear-gradient(90deg,color-mix(in srgb,var(--ga,#F56F25) 14%,transparent),transparent)}
html.pw-halloween .gx-feat__ic{background:color-mix(in srgb,var(--ga,#F56F25) 16%,transparent)}
html.pw-halloween .gx-zone{background:linear-gradient(135deg,color-mix(in srgb,var(--ga,#F56F25) 85%,#000 10%),color-mix(in srgb,var(--ga2,#3B4CCA) 60%,#0a0808))}
html.pw-halloween .gx-trailer{background:linear-gradient(160deg,color-mix(in srgb,var(--ga,#F56F25) 80%,#000 12%),#0a0808)}
html.pw-halloween .gx-rich th{background:color-mix(in srgb,var(--ga,#F56F25) 12%,transparent)}
html.pw-halloween .gx-loc{background:var(--ga,#F56F25)}
html.pw-halloween .gx-answer{border-left:4px solid var(--ga,#F56F25)}
html.pw-halloween .gx-answer__lbl{color:var(--ga,#C2410C)}
html.pw-halloween:where(.dark) .gx-answer__lbl{color:var(--ga,#F56F25)}
html.pw-halloween .gx-cta--primary{background:var(--ga,#F56F25)}
html.pw-halloween .gx-cta--primary:hover{background:var(--ga,#F56F25)}
html.pw-halloween .gx-wt__list a:hover{border-color:var(--ga,#F56F25)}
html.pw-halloween .gx-wt__n{background:var(--ga,#F56F25);color:#1A0F08}
html.pw-halloween .gx-wt__list a:hover .gx-wt__go{color:var(--ga,#C2410C)}
html.pw-halloween:where(.dark) .gx-wt__list a:hover .gx-wt__go{color:var(--ga,#F56F25)}
/* ── de los <style> de partials/navbar.twig (con html.pw-halloween delante: esos <style> van en el <body> y llegan después) ── */
html.pw-halloween .pw-mm__a:hover{background:#F56F25;color:#1A0F08}
html.pw-halloween .pw-mm__all{color:#C2410C}
html.pw-halloween:where(.dark) .pw-mm__all{color:#F56F25}
/* ── de los <style> de home.twig (con html.pw-halloween delante: esos <style> van en el <body> y llegan después) ── */
html.pw-halloween .pw-imperdibles-arrow:hover:not(:disabled){background:#F56F25;border-color:#F56F25;color:#1A0F08}
html.pw-halloween .pw-imperdibles-card:hover{border-color:#F56F25}