/* PADO · Halloween
Oscuro, deportivo y estacional sin perder la identidad PADO. */
:root{
--pado-season-accent:#ff8a1f;
--pado-season-accent-2:#9b6cff;
--pado-season-glow:rgba(255,138,31,.18);
--pado-background:#07070d;
--pado-blue:#11102a;
--pado-dark:#171323;
--pado-panel:#12101c;
--pado-panel-2:#191327;
--warning:#ffb347;
}
html{background:#07070d}
body{
background:
radial-gradient(circle at 86% -8%,rgba(155,108,255,.08),transparent 27rem),
radial-gradient(circle at 6% 8%,rgba(255,138,31,.10),transparent 22rem),
#07070d;
}
body:before{
content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.22;
background:
repeating-radial-gradient(circle at 100% 0,transparent 0 34px,rgba(255,255,255,.025) 35px 36px,transparent 37px 64px),
linear-gradient(135deg,transparent 0 48%,rgba(255,138,31,.018) 49% 51%,transparent 52% 100%);
}
.app-shell,.login-shell,.auth-shell,.page-shell{position:relative;z-index:1}
.side-nav{background:linear-gradient(180deg,rgba(23,16,42,.76) 0%,rgba(14,16,36,.79) 58%,rgba(9,9,19,.84) 100%);backdrop-filter:blur(2px);border-right-color:rgba(255,138,31,.14)}
.side-nav:after{content:"";position:absolute;inset:auto 14px 70px;height:1px;background:linear-gradient(90deg,transparent,#ff8a1f,transparent);opacity:.45}
.side-nav nav a:hover,.logout:hover{background:rgba(255,138,31,.10);color:#ffd3a3}
.side-nav nav a:hover .nav-icon,.logout:hover .nav-icon{color:#ff9a38}
.nav-label,.eyebrow{color:#ff9a38}
.panel,.login-card,.auth-card,.stat-card,.match-card,.user-chip,.modal-card,.list-card{
border-color:rgba(155,108,255,.12);
}
.login-card,.auth-card,.match-card,.user-chip,.list-card{background:rgba(18,16,28,.58)!important;backdrop-filter:blur(2px)}
.modal-card{background:rgba(18,16,28,.86)!important;backdrop-filter:blur(5px)}
.panel{background:linear-gradient(180deg,rgba(25,19,39,.56),rgba(14,14,25,.60));backdrop-filter:blur(2px);box-shadow:0 18px 50px rgba(0,0,0,.34),0 0 0 1px rgba(255,138,31,.018)}
.stat-card{background:linear-gradient(135deg,rgba(24,17,41,.54),rgba(13,20,39,.58));backdrop-filter:blur(2px);border-color:rgba(255,138,31,.15)}
.page-top{position:relative}
.page-top:after{content:"HALLOWEEN 🎃";position:absolute;right:0;top:calc(100% + 10px);z-index:2;pointer-events:none;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,138,31,.24);background:rgba(255,138,31,.07);color:#ffb063;font-size:9px;font-weight:900;letter-spacing:.14em;white-space:nowrap}
.btn:not(.btn--danger):not(.btn--secondary){box-shadow:0 0 0 1px rgba(255,138,31,.13),0 8px 24px rgba(196,255,0,.06)}
.btn--secondary{background:rgba(32,24,51,.72);border-color:rgba(155,108,255,.26)}
.btn--ghost{border-color:rgba(255,138,31,.42);color:#ffb063}
.field input,.field select,.field textarea{background:rgba(13,13,24,.78);border-color:rgba(155,108,255,.20)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:#ff8a1f;box-shadow:0 0 0 3px rgba(255,138,31,.11)}
.badge--ok{background:rgba(255,138,31,.10);color:#ffb063}
th{background:rgba(21,16,39,.76);color:#cfc6df}
.live-board{background:linear-gradient(135deg,rgba(23,16,42,.70),rgba(12,23,48,.74));backdrop-filter:blur(2px)}
.auth-brand-panel{background:radial-gradient(circle at 20% 15%,rgba(255,138,31,.08),transparent 17rem),linear-gradient(155deg,rgba(24,16,43,.72),rgba(9,21,46,.78));backdrop-filter:blur(2px)}
/* Landing */
.navbar{background:linear-gradient(180deg,rgba(15,10,25,.96),rgba(7,7,13,.88))!important;border-bottom:1px solid rgba(255,138,31,.16)}
.hero:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 80% 20%,rgba(155,108,255,.07),transparent 27rem),radial-gradient(circle at 15% 80%,rgba(255,138,31,.07),transparent 25rem)}
.feature,.class.section,.schedule.section,.about.section,.coming-soon,.contact.section{background-color:rgba(9,8,17,.78)!important}
.custom-btn.bg-color{box-shadow:0 0 0 1px rgba(255,138,31,.18)}
@media(max-width:720px){.page-top:after{display:none}}
/* Reserva espacio bajo el encabezado para la etiqueta de temporada */
@media(min-width:721px){body.pado-theme--halloween .page-top{margin-bottom:56px!important}}
/* Fantasmas de Halloween más blancos y con recorridos alternos
Ocho apariciones distribuidas por la pantalla con trayectorias tipo pseudo-aleatorias. */
body.pado-theme--halloween::after{
content:"";
position:fixed;
inset:0;
pointer-events:none;
z-index:0;
opacity:1;
background-repeat:no-repeat;
background-image:
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,");
background-size:114px 150px,84px 112px,94px 124px,70px 92px,88px 116px,76px 100px,68px 90px,98px 130px;
background-position:8% 18%,88% 16%,52% 78%,30% 62%,72% 42%,18% 84%,92% 70%,44% 10%;
filter:drop-shadow(0 0 16px rgba(255,255,255,.14)) drop-shadow(0 0 22px rgba(155,108,255,.16)) drop-shadow(0 0 26px rgba(255,138,31,.10));
animation:padoHalloweenGhosts 30s linear infinite;
}
@keyframes padoHalloweenGhosts{
0%{opacity:0;background-position:6% 18%,90% 12%,54% 80%,28% 64%,74% 44%,18% 86%,92% 72%,44% 10%}
8%{opacity:.68;background-position:12% 28%,84% 20%,62% 70%,36% 56%,70% 34%,22% 74%,82% 62%,48% 18%}
16%{opacity:.20;background-position:18% 20%,78% 28%,70% 62%,44% 48%,64% 28%,28% 66%,74% 54%,56% 24%}
24%{opacity:.74;background-position:72% 18%,16% 52%,42% 74%,88% 64%,54% 30%,30% 16%,12% 66%,82% 28%}
32%{opacity:.14;background-position:78% 26%,22% 44%,34% 64%,82% 54%,48% 24%,36% 20%,20% 58%,74% 20%}
40%{opacity:.70;background-position:44% 12%,90% 46%,10% 72%,64% 58%,24% 34%,76% 18%,86% 50%,14% 30%}
48%{opacity:.18;background-position:52% 22%,82% 38%,18% 60%,58% 48%,30% 28%,70% 26%,78% 42%,20% 22%}
56%{opacity:.72;background-position:16% 62%,62% 16%,90% 72%,38% 30%,76% 50%,12% 22%,48% 80%,66% 10%}
64%{opacity:.16;background-position:22% 54%,54% 26%,80% 62%,46% 24%,68% 42%,18% 18%,40% 70%,58% 18%}
72%{opacity:.76;background-position:86% 58%,10% 18%,58% 18%,22% 76%,42% 56%,80% 72%,30% 38%,60% 84%}
80%{opacity:.18;background-position:78% 48%,18% 26%,50% 26%,30% 66%,36% 48%,72% 62%,24% 46%,54% 74%}
88%{opacity:.70;background-position:34% 18%,74% 80%,14% 44%,90% 26%,58% 68%,8% 58%,84% 14%,44% 52%}
96%{opacity:.22;background-position:26% 28%,66% 70%,22% 54%,82% 34%,50% 58%,14% 48%,76% 22%,50% 44%}
100%{opacity:0;background-position:20% 18%,58% 62%,30% 48%,74% 42%,42% 50%,20% 38%,68% 30%,56% 36%}
}
@media(max-width:720px){
body.pado-theme--halloween::after{
background-size:84px 110px,64px 84px,72px 96px,54px 72px,68px 90px,60px 80px,52px 70px,74px 98px;
animation-duration:33s;
}
.panel{background:linear-gradient(180deg,rgba(25,19,39,.62),rgba(14,14,25,.66))}
.stat-card{background:linear-gradient(135deg,rgba(24,17,41,.58),rgba(13,20,39,.62))}
}
@media(prefers-reduced-motion:reduce){
body.pado-theme--halloween::after{
animation:none;
opacity:.22;
}
}
/* Landing PADO: conservar visible el video principal con cualquier tema.
El CSS original usa z-index:-1 en .hero-video; los fondos estacionales
podían quedar por encima. Este bloque crea capas locales dentro del hero. */
.hero{
position:relative;
isolation:isolate;
background:transparent!important;
}
.hero .hero-video{
z-index:0!important;
opacity:1!important;
visibility:visible!important;
display:block!important;
}
.hero .bg-overlay{
z-index:1!important;
}
.hero::after{
z-index:2!important;
}
.hero>.container{
position:relative;
z-index:3!important;
}
/* Landing optimizada: conserva Halloween, pero reduce repintados sobre el video. */
@supports selector(body:has(.hero-video)){
body.pado-theme--halloween:has(.hero-video)::after{
background-image:
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,");
background-size:112px 148px,86px 114px,96px 126px,72px 96px;
background-position:10% 18%,86% 20%,66% 72%,30% 60%;
filter:none;
will-change:transform,opacity;
transform:translate3d(0,0,0);
animation:padoHalloweenLandingGhostDrift 18s ease-in-out infinite;
}
body.pado-theme--halloween:has(.hero-video) .hero{contain:paint}
body.pado-theme--halloween:has(.hero-video) .hero-video{transform:translateZ(0);backface-visibility:hidden;will-change:transform}
body.pado-theme--halloween:has(.hero-video) .feature,
body.pado-theme--halloween:has(.hero-video) .class.section,
body.pado-theme--halloween:has(.hero-video) .schedule.section,
body.pado-theme--halloween:has(.hero-video) .about.section,
body.pado-theme--halloween:has(.hero-video) .coming-soon,
body.pado-theme--halloween:has(.hero-video) .contact.section{
content-visibility:auto;
contain-intrinsic-size:700px;
}
}
@keyframes padoHalloweenLandingGhostDrift{
0%,100%{opacity:0;transform:translate3d(-1.5%,1.5%,0)}
15%{opacity:.48}
45%{opacity:.36;transform:translate3d(1%,-2%,0)}
72%{opacity:.48;transform:translate3d(-.5%,-4%,0)}
92%{opacity:.10}
}
@media(max-width:720px){
@supports selector(body:has(.hero-video)){
body.pado-theme--halloween:has(.hero-video)::after{
background-image:
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,");
background-size:82px 108px,66px 88px;
background-position:14% 24%,82% 56%;
animation-duration:22s;
}
}
}
/* Landing: mejorar legibilidad sin oscurecer demasiado el video ni aumentar carga */
body.pado-theme--halloween .hero h1,
body.pado-theme--halloween .hero h2,
body.pado-theme--halloween .hero h3,
body.pado-theme--halloween .hero h6{
color:#fff!important;
text-shadow:0 2px 8px rgba(0,0,0,.88),0 0 22px rgba(0,0,0,.58);
}
body.pado-theme--halloween .hero .text-verde{
text-shadow:0 2px 8px rgba(0,0,0,.92),0 0 18px rgba(196,255,0,.16);
}
body.pado-theme--halloween .navbar .nav-link,
body.pado-theme--halloween .navbar a{
text-shadow:0 1px 6px rgba(0,0,0,.78);
}
body.pado-theme--halloween .feature p,
body.pado-theme--halloween .feature h6,
body.pado-theme--halloween .class.section p,
body.pado-theme--halloween .class.section h3,
body.pado-theme--halloween .schedule.section p,
body.pado-theme--halloween .about.section p,
body.pado-theme--halloween .about.section h3,
body.pado-theme--halloween .coming-soon p,
body.pado-theme--halloween .contact.section p,
body.pado-theme--halloween .contact.section label{
color:rgba(255,255,255,.88)!important;
text-shadow:0 1px 4px rgba(0,0,0,.62);
}
body.pado-theme--halloween .feature h2,
body.pado-theme--halloween .class.section h2,
body.pado-theme--halloween .schedule.section h2,
body.pado-theme--halloween .about.section h2,
body.pado-theme--halloween .coming-soon h2,
body.pado-theme--halloween .contact.section h2{
color:#fff!important;
text-shadow:0 2px 7px rgba(0,0,0,.68);
}
/* Landing: cards claras y legibles sin perder el tema Halloween */
body.pado-theme--halloween .class.section .class-thumb,
body.pado-theme--halloween .schedule.section .class-thumb{
overflow:hidden;
background:rgba(248,247,250,.97)!important;
border:1px solid rgba(255,138,31,.20);
border-radius:0 0 4px 4px;
box-shadow:0 12px 30px rgba(0,0,0,.18);
}
body.pado-theme--halloween .class.section .class-thumb .class-info,
body.pado-theme--halloween .schedule.section .class-thumb .class-info{
background:rgba(248,247,250,.97)!important;
color:#20232a!important;
}
body.pado-theme--halloween .class.section .class-thumb .class-info h3,
body.pado-theme--halloween .schedule.section .class-thumb .class-info h3{
color:#20232a!important;
text-shadow:none!important;
}
body.pado-theme--halloween .class.section .class-thumb .class-info p,
body.pado-theme--halloween .schedule.section .class-thumb .class-info p{
color:#676d78!important;
text-shadow:none!important;
}
body.pado-theme--halloween .class.section .class-thumb .class-info .text-verde,
body.pado-theme--halloween .schedule.section .class-thumb .class-info .text-verde{
color:#a9df00!important;
text-shadow:none!important;
}
/* =========================================================
PADO PERFORMANCE MODE · Halloween
Los fantasmas conservan apariciones variables, pero su
posición cambia por pasos y el movimiento continuo usa GPU.
========================================================= */
body.pado-theme--halloween .side-nav,
body.pado-theme--halloween .panel,
body.pado-theme--halloween .login-card,
body.pado-theme--halloween .auth-card,
body.pado-theme--halloween .stat-card,
body.pado-theme--halloween .match-card,
body.pado-theme--halloween .user-chip,
body.pado-theme--halloween .list-card,
body.pado-theme--halloween .live-board,
body.pado-theme--halloween .auth-brand-panel{
-webkit-backdrop-filter:none!important;
backdrop-filter:none!important;
}
body.pado-theme--halloween::after{
filter:none!important;
will-change:transform,opacity;
transform:translate3d(0,0,0);
animation:
padoHalloweenGhostMoveLite 32s steps(1,end) infinite,
padoHalloweenGhostPulseLite 8s ease-in-out infinite,
padoHalloweenGhostFloatLite 13s ease-in-out infinite!important;
}
@keyframes padoHalloweenGhostMoveLite{
0%{background-position:6% 18%,90% 12%,54% 80%,28% 64%,74% 44%,18% 86%,92% 72%,44% 10%}
12.5%{background-position:72% 18%,16% 52%,42% 74%,88% 64%,54% 30%,30% 16%,12% 66%,82% 28%}
25%{background-position:44% 12%,90% 46%,10% 72%,64% 58%,24% 34%,76% 18%,86% 50%,14% 30%}
37.5%{background-position:16% 62%,62% 16%,90% 72%,38% 30%,76% 50%,12% 22%,48% 80%,66% 10%}
50%{background-position:86% 58%,10% 18%,58% 18%,22% 76%,42% 56%,80% 72%,30% 38%,60% 84%}
62.5%{background-position:34% 18%,74% 80%,14% 44%,90% 26%,58% 68%,8% 58%,84% 14%,44% 52%}
75%{background-position:12% 30%,58% 68%,82% 22%,44% 80%,92% 48%,26% 14%,68% 58%,36% 42%}
87.5%{background-position:76% 30%,24% 72%,48% 18%,88% 82%,16% 42%,62% 56%,34% 10%,54% 76%}
100%{background-position:6% 18%,90% 12%,54% 80%,28% 64%,74% 44%,18% 86%,92% 72%,44% 10%}
}
@keyframes padoHalloweenGhostPulseLite{
0%,100%{opacity:.18}
24%{opacity:.66}
48%{opacity:.28}
72%{opacity:.72}
}
@keyframes padoHalloweenGhostFloatLite{
0%,100%{transform:translate3d(0,1.2%,0)}
50%{transform:translate3d(.7%,-2.4%,0)}
}
body.pado-theme--halloween .feature,
body.pado-theme--halloween .class.section,
body.pado-theme--halloween .schedule.section,
body.pado-theme--halloween .about.section,
body.pado-theme--halloween .coming-soon,
body.pado-theme--halloween .contact.section{
content-visibility:auto;
contain-intrinsic-size:720px;
}
@media(max-width:720px){
body.pado-theme--halloween::after{
background-size:82px 108px,62px 82px,70px 92px,52px 70px,0 0,0 0,0 0,0 0!important;
animation:
padoHalloweenGhostMoveLite 38s steps(1,end) infinite,
padoHalloweenGhostPulseLite 10s ease-in-out infinite,
padoHalloweenGhostFloatLite 15s ease-in-out infinite!important;
}
}
@media(prefers-reduced-motion:reduce){
body.pado-theme--halloween::after{animation:none!important;opacity:.20!important}
}