:root {
  /* OPCIÓN B: IDENTIDAD MARRÓN ATLAS PROFUNDO + DORADO + CELESTE */
  /* 1. FONDOS Y SUPERFICIES (Marrón Guerrero Noche) */
  --bg-profundo: #120904;       /* Fondo base bien oscuro tono café/tierra */
  --bg-superficie: #1f1109;     /* Header, barra inferior y base de modales */
  --bg-panel: #2e190d;          /* Barra fixture, slots de apoyo y cabeceras */
  --bg-overlay: rgba(10, 5, 2, 0.90);

  /* 2. BORDES Y BOTONES PRINCIPALES */
  --primary: #3b2010;           /* Marrón Atlas intenso para botones */
  --primary-light: #6b3b1e;     /* Marrón cálido para bordes de cajas */
  --borde-panel: #542f18;
  --verde-vivo: #22c55e;        /* Se mantiene para goles y escudos activos */
  --verde-brillo: #4ade80;

  /* 3. IDENTIDAD ATLAS (Marrón y Dorados) */
  --marron-atlas: #54341c;
  --marron-oscuro: #2d180a;
  --marron-profundo: #150903;
  --marron-borde: #9c6f44;
  --dorado: #f3c65f;            /* Dorado luminoso sobre el marrón */
  --dorado-intenso: #d97706;
  --dorado-oscuro: #b45309;

  /* 4. ACENTOS Y ESTADOS (Celeste y Rojo Derrota) */
  --celeste-atlas: #38bdf8;     /* Celeste vibrante para contrastar con el marrón */
  --celeste-oscuro: #0284c7;
  --rojo-derrota: #e63946;
  --rojo-oscuro: #c1121f;

  /* 5. FICHAS Y TEXTOS */
  --fondo-ficha: #fdfbf7;
  --texto-blanco: #ffffff;
  --texto-claro: #f1e9df;       /* Blanco cálido hueso */
  --texto-secundario: #c4a98b;  /* Arena/Bronce suave para subtítulos */

  /* Alias de compatibilidad */
  --azul-oscuro: var(--bg-profundo);
  --boton-gradiente: linear-gradient(135deg, #6b3b1e, #3b2010);
  --club-glow: rgba(56, 189, 248, 0.45);
  --club-acento: #38bdf8;
  --fondo-principal-dinamico: radial-gradient(circle at 50% 0%, #4a2a18 0%, #1a0d06 48%, #0c0603 100%);
  --fondo-header-dinamico: #1a0e08;
  --fondo-caja-dinamica: linear-gradient(180deg, #3a2114 0%, #1a0d06 100%);
  --borde-caja-dinamica: #8b5a32;
}

*{box-sizing:border-box;user-select:none;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{background-color:var(--bg-profundo);width:100%;height:100%;min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:var(--texto-blanco);}
body{display:flex;flex-direction:column;align-items:center;overflow-x:hidden;padding-bottom:95px;}
header{width:100%;max-width:420px;padding:8px 14px;background:var(--bg-superficie);border-bottom:2px solid var(--borde-panel);display:flex;justify-content:space-between;align-items:center;}
.header-club-bloque{display:flex;align-items:center;gap:7px;}
.header-escudo-atlas{width:26px;height:26px;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.6));}
.recursos{display:flex;gap:0;align-items:center;}
.btn-sonido{background:var(--bg-profundo);border:1px solid var(--primary-light);border-radius:6px;padding:5px 7px;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--texto-blanco);}
.barra-fixture{width:95%;max-width:380px;margin-top:6px;background:var(--bg-panel);border:1px solid var(--primary-light);border-radius:6px;padding:6px 12px;display:flex;justify-content:space-between;align-items:center;font-size:11px;}
.reloj-caja{background:var(--bg-profundo);padding:2px 6px;border-radius:4px;border:1px solid var(--celeste-atlas);font-size:10px;display:flex;align-items:center;gap:4px;margin-top:4px;font-weight:bold;color:#fff;}
.banco-caja{width:95%;max-width:380px;margin-top:8px;text-align:center;}
.banco-titulo{font-size:10px;font-weight:800;color:var(--texto-secundario);display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;padding:0 4px;}
.banco-slots{display:flex;justify-content:center;gap:6px;}
.slot-banco{width:60px;height:72px;border:2px dashed var(--celeste-atlas);border-radius:6px;background:rgba(0,0,0,0.3);display:flex;align-items:center;justify-content:center;padding:0;overflow:hidden;position:relative;flex-shrink:0;margin:0;}
.slot-banco .ficha-en-banco{position:relative;width:56px;height:70px;background:var(--fondo-ficha);border-radius:4px;display:flex;align-items:center;justify-content:center;margin:0;box-shadow:0 2px 4px rgba(0,0,0,0.65);}
.slot-banco .ficha-en-banco img{width:100%;height:100%;object-fit:contain;transform:scale(1.05);border-radius:4px;margin:0;}
.slot-banco.emparejando{border:2px solid var(--dorado);background:rgba(243,198,95,0.25);box-shadow:0 0 14px rgba(243,198,95,0.85);animation:pulsoPareja 0.35s forwards ease-in-out;}
@keyframes pulsoPareja{0%{transform:scale(1);filter:brightness(1);}50%{transform:scale(1.05);filter:brightness(1.2);}100%{transform:scale(0.5);opacity:0;}}
@keyframes pulsoNotif{0%{transform:scale(1);}50%{transform:scale(1.08);}100%{transform:scale(1);}}

#tablero-contenedor{position:relative;width:360px;height:460px;background:transparent;border:none;box-shadow:none;margin:0 auto;overflow:visible;perspective:1000px;}

.ficha{position:absolute;width:60px;height:76px;background:var(--fondo-ficha);border-top:1.5px solid #ffffff;border-left:1px solid #f1f5f9;border-right:2px solid #cbd5e1;border-bottom:4px solid #94a3b8;border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;overflow:hidden;margin:0;transition:none;}
.ficha:active{transform:none;}
.ficha.bloqueada-maHJong{filter:brightness(0.65);cursor:not-allowed;}
.ficha img.img-normal{width:100%;height:100%;object-fit:contain;transform:scale(1.18);pointer-events:none;border-radius:4px;display:block;margin:0;}
.ficha.misterio{perspective:1000px;}
.ficha.misterio .flip-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform 0.38s cubic-bezier(0.4,0.2,0.2,1);}
.ficha.misterio.revelada .flip-inner{transform:rotateY(180deg);}
.ficha.misterio .cara-dorso,.ficha.misterio .cara-figura{position:absolute;width:100%;height:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;align-items:center;justify-content:center;margin:0;}
.ficha.misterio .cara-dorso{background:radial-gradient(circle,var(--marron-oscuro) 0%,var(--marron-profundo) 100%);border:1px solid var(--marron-borde);border-radius:6px;transform:rotateY(0deg);}
.ficha.misterio .cara-dorso img{width:40px;height:40px;object-fit:contain;opacity:0.92;filter:drop-shadow(0 2px 5px rgba(0,0,0,0.7));margin:0;}
.ficha.misterio .cara-figura{background:var(--fondo-ficha);transform:rotateY(180deg);}
.ficha.misterio .cara-figura img{width:100%;height:100%;object-fit:contain;transform:scale(1.18);border-radius:4px;margin:0;}
.ficha.bloqueada-shake{animation:sacudirBloqueada 0.25s ease;}
@keyframes sacudirBloqueada{0%,100%{transform:translateX(0);}25%{transform:translateX(-4px) rotate(-1.5deg);}75%{transform:translateX(4px) rotate(1.5deg);}}

.barra-apoyos{width:95%;max-width:380px;margin:0 auto;display:flex;gap:4px;}
.slot-apoyo{flex:1;background:var(--bg-panel);border:1px solid var(--primary-light);border-radius:6px;padding:6px 2px;text-align:center;font-size:10px;font-weight:bold;position:relative;color:var(--texto-blanco);cursor:pointer;box-shadow:0 4px 6px rgba(0,0,0,0.3);}
.slot-apoyo .badge{position:absolute;top:-5px;right:-4px;background:var(--dorado);color:#000;border-radius:50%;width:16px;height:16px;font-size:9px;font-weight:900;display:flex;align-items:center;justify-content:center;border:1px solid #000;}
.slot-apoyo.sponsor-listo{background:linear-gradient(135deg,var(--dorado-oscuro),var(--dorado-intenso));border-color:var(--dorado);animation:pulse-sponsor 1.5s infinite;}
#slot-cooling{font-size:8px;line-height:1.15;letter-spacing:0.3px;}
#slot-cooling.cooling-off{opacity:0.38;cursor:not-allowed;}
#slot-cooling.cooling-on{background:linear-gradient(135deg,#f15a22,#00a651);border-color:#fff;color:#fff;}
#cooling-break-overlay{
  display:none;
  position:absolute;
  inset:0;
  z-index:9;
  overflow:hidden;
  background:rgba(6,10,18,0.42);
  align-items:center;
  justify-content:center;
  flex-direction:column;
  pointer-events:auto;
}
#cooling-break-overlay.activo{display:flex;}
.cooling-break-sweep{
  position:absolute;
  top:50%;
  left:-80%;
  width:85%;
  transform:translateY(-50%) skewX(-14deg);
  background:linear-gradient(90deg,transparent 0%,rgba(241,90,34,0.82) 18%,rgba(0,166,81,0.88) 55%,rgba(241,90,34,0.75) 82%,transparent 100%);
  padding:18px 24px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  box-shadow:0 8px 28px rgba(0,0,0,0.35);
  opacity:0.92;
}
.cooling-break-sweep.animar{animation:coolingSweep 3.1s cubic-bezier(0.22,0.61,0.36,1) forwards;}
.cooling-break-sweep img{height:42px;width:auto;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.5));transform:skewX(14deg);}
.cooling-break-sweep span{font-size:18px;font-weight:900;letter-spacing:2px;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,0.55);transform:skewX(14deg);}
#cooling-break-overlay #btn-reanudar-cooling{position:relative;z-index:2;margin-top:70px;width:auto;padding:10px 22px;}
@keyframes coolingSweep{
  0%{left:-95%;opacity:0;}
  12%{opacity:0.92;}
  38%{left:8%;}
  68%{left:8%;opacity:0.92;}
  100%{left:110%;opacity:0;}
}

#barra-navegacion-inferior{
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: var(--bg-superficie);
border-top: 2px solid var(--borde-panel);
display: flex;
justify-content: center;
align-items: center;
gap: 6px;
padding: 8px 4px;
z-index: 99999;
box-shadow: 0 -4px 16px rgba(0,0,0,0.8);
pointer-events: auto !important;
}
#nav-home-pilares{
display:flex !important;
align-items:center;
justify-content:center;
flex-shrink:0;
}
.nav-btn{width:48px;height:48px;aspect-ratio:1/1;background:var(--bg-profundo);border:1.5px solid var(--primary-light);border-radius:10px;padding:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.2s cubic-bezier(0.34,1.56,0.64,1);position:relative;flex:0 0 auto;box-shadow:0 2px 6px rgba(0,0,0,0.5);}
.nav-icon{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.7));display:block;pointer-events:none;}
.nav-fallback{font-size:22px;display:flex;align-items:center;justify-content:center;}
.nav-btn.activo{background:linear-gradient(135deg,var(--primary-light),var(--primary));border-color:var(--celeste-atlas);transform:none;box-shadow:0 0 12px var(--club-glow);}
.notif-badge-tv{position:absolute;top:-5px;right:-5px;background:var(--rojo-derrota);color:var(--texto-blanco);border-radius:50%;width:18px;height:18px;font-size:10px;font-weight:900;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--texto-blanco);animation:pulsoNotif 1.2s infinite;z-index:2;}

.overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: var(--bg-overlay);
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 38000;
text-align: center;
padding: 20px 20px 85px 20px;
}
.overlay.visible{display:flex;}
.modal{background:linear-gradient(180deg, var(--bg-panel) 0%, var(--bg-superficie) 100%);border:2px solid var(--celeste-atlas);border-radius:14px;width:100%;max-width:420px;padding:20px;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,0.85);display:flex;flex-direction:column;gap:15px;}
.modal h2{color:var(--dorado);font-size:20px;}
.modal p{font-size:13px;color:var(--texto-claro);line-height:1.4;}
.btn-accion{background:linear-gradient(135deg,var(--primary-light),var(--primary));color:var(--texto-blanco);border:1px solid var(--celeste-atlas);padding:12px 26px;border-radius:8px;font-weight:bold;cursor:pointer;margin-top:6px;font-size:14px;box-shadow:0 4px 10px rgba(0,0,0,0.3);}
.btn-accion:active{transform:scale(0.97);}
.btn-derrota{background:var(--rojo-derrota);border-color:var(--rojo-oscuro);}

#intro-secuencia{position:fixed;top:0;left:0;width:100%;height:100%;z-index:99999999;background:#050d24;display:flex;justify-content:center;align-items:center;transition:opacity 0.8s ease-in-out;}
#intro-guardianes.activa{opacity:1 !important;visibility:visible !important;}
.intro-boot{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    width:100%;padding:20px;box-sizing:border-box;
}
.intro-boot-escudo{
    position:relative;width:168px;height:168px;
    display:flex;align-items:center;justify-content:center;
    animation:introBootIn 0.9s cubic-bezier(0.2,0.8,0.2,1) both;
    filter:drop-shadow(0 0 28px rgba(255,255,255,0.28));
}
.intro-boot-escudo img{
    width:148px;height:148px;object-fit:contain;
    display:block;
}
.intro-boot-brillo{
    position:absolute;inset:-8%;
    background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,0.55) 50%,transparent 62%);
    transform:translateX(-120%);
    animation:introBootShine 3.6s 0.55s ease-in-out both;
    pointer-events:none;
    mix-blend-mode:screen;
}
.intro-boot-nombre{
    margin-top:18px;color:#fff;font-size:32px;font-weight:900;letter-spacing:0.5px;
    animation:introBootTxt 0.7s 0.45s ease both;
}
.intro-boot-sub{
    margin-top:4px;color:rgba(226,232,240,0.78);font-size:15px;font-weight:600;letter-spacing:1.4px;
    animation:introBootTxt 0.7s 0.65s ease both;
}
.intro-tap-hint{
    display:none;position:absolute;bottom:72px;left:50%;transform:translateX(-50%);
    width:max-content;max-width:86%;margin:0;color:#e2e8f0;font-size:13px;font-weight:700;
    letter-spacing:0.3px;text-align:center;z-index:2;animation:introBootTxt 0.6s 0.9s ease both;
}
@keyframes introBootIn{
    from{opacity:0;transform:scale(0.72);}
    to{opacity:1;transform:scale(1);}
}
@keyframes introBootShine{
    0%{transform:translateX(-120%);}
    33%{transform:translateX(120%);}
    66%{transform:translateX(-120%);}
    100%{transform:translateX(120%);}
}
@keyframes introBootTxt{
    from{opacity:0;transform:translateY(10px);}
    to{opacity:1;transform:translateY(0);}
}

.intro-pantalla {position:absolute; top:0; left:0; width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:25px; text-align:center; opacity:0; visibility:hidden; transition:opacity 0.8s ease;}
.intro-pantalla.activa {opacity:1; visibility:visible;}
#intro-match {transform:scale(0.3); transition:opacity 0.6s ease, transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
#intro-match.activa {transform:scale(1); opacity:1; visibility:visible;}
.intro-pantalla img.intro-logo{max-width:140px;max-height:140px;object-fit:contain;margin-bottom:12px;filter:drop-shadow(0 6px 14px rgba(0,0,0,0.8));}
.intro-pantalla h1{font-size:27px;font-weight:900;letter-spacing:3px;margin-top:10px;line-height:1.25;}
.sub-tag{font-size:13px;letter-spacing:4px;font-weight:800;margin-top:6px;}
.charla-caja{max-width:320px;margin-bottom:35px;}
.charla-caja p{font-size:17px;font-weight:600;line-height:1.5;color:var(--fondo-ficha);font-style:italic;}
.charla-caja small{display:block;margin-top:14px;color:var(--dorado);font-size:12px;font-weight:bold;}
.barra-carga-caja{width:230px;height:6px;background:rgba(255,255,255,0.08);border-radius:4px;overflow:hidden;border:1px solid var(--primary-light);margin:0 auto;}
.barra-carga-progreso{width:0%;height:100%;background:linear-gradient(90deg,var(--celeste-atlas),var(--dorado));animation:barraCarga 3.6s forwards ease-in-out;}

.pantalla-match-card{background:radial-gradient(circle,var(--bg-panel) 0%,var(--bg-profundo) 100%);border:2px solid var(--celeste-atlas);border-radius:18px;padding:26px 20px;width:92%;max-width:350px;box-shadow:0 0 40px rgba(0,0,0,0.85),inset 0 0 20px var(--club-glow);display:flex;flex-direction:column;align-items:center;margin:auto;}
.intro-fecha-num{font-size:16px;font-weight:900;letter-spacing:1.5px;color:var(--dorado);text-transform:uppercase;margin-bottom:8px;text-align:center;}
.estadio-sub{font-size:11px;font-weight:600;color:var(--texto-secundario);margin-bottom:16px;text-align:center;font-style:italic;}
.duelo-contenedor{display:flex;align-items:center;justify-content:center;width:100%;gap:14px;margin-bottom:10px;}
.club-bloque{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.escudo-box{width:82px;height:82px;border-radius:14px;background:rgba(255,255,255,0.04);border:1.5px solid rgba(255,255,255,0.15);display:flex;align-items:center;justify-content:center;padding:6px;box-shadow:0 8px 18px rgba(0,0,0,0.6);position:relative;overflow:hidden;}
.escudo-box img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,0.5));}
.nombre-club{font-size:13px;font-weight:800;margin-top:10px;color:var(--texto-blanco);text-align:center;min-height:32px;display:flex;align-items:center;justify-content:center;line-height:1.2;}
.vs-circulo{width:38px;height:38px;border-radius:50%;background:var(--bg-profundo);border:2px solid var(--celeste-atlas);color:var(--celeste-atlas);font-size:14px;font-weight:900;font-style:italic;display:flex;align-items:center;justify-content:center;box-shadow:0 0 16px var(--club-glow);flex-shrink:0;}

.mision-card{background:var(--bg-profundo);border:1.5px solid var(--primary-light);border-radius:10px;padding:10px;margin-bottom:8px;text-align:left;transition:all 0.2s;position:relative;}
.mision-card.clickable{cursor:pointer;}
.mision-card.clickable:hover{border-color:var(--dorado);background:var(--bg-panel);}
.mision-card.votada{border-color:var(--celeste-atlas);background:rgba(56,189,248,0.15);}
.mision-card h4{color:var(--dorado);font-size:13px;margin-bottom:3px;}
.mision-card p{font-size:11px;color:var(--texto-secundario);}
.barra-progreso-encuesta{width:100%;background:var(--bg-superficie);border:1px solid var(--primary-light);border-radius:4px;height:8px;overflow:hidden;margin-top:6px;}
.relleno-progreso-encuesta{height:100%;background:linear-gradient(90deg,var(--celeste-atlas),var(--dorado));transition:width 0.5s ease;}

.ficha-penal{width:60px;height:80px;background:var(--fondo-ficha);border-radius:6px;cursor:pointer;perspective:1000px;display:flex;align-items:center;justify-content:center;}
.ficha-penal .flip-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform 0.3s cubic-bezier(0.4,0.2,0.2,1);}
.ficha-penal.revelada .flip-inner{transform:rotateY(180deg);}
.ficha-penal .cara-dorso,.ficha-penal .cara-figura{position:absolute;width:100%;height:100%;backface-visibility:hidden;display:flex;align-items:center;justify-content:center;border-radius:6px;}
.ficha-penal .cara-dorso{background:radial-gradient(circle,var(--marron-oscuro) 0%,var(--marron-profundo) 100%);border:1.5px solid var(--marron-borde);}
.ficha-penal .cara-dorso img{width:35px;opacity:0.92;filter:drop-shadow(0 2px 5px rgba(0,0,0,0.7));}
.ficha-penal .cara-figura{background:var(--fondo-ficha);transform:rotateY(180deg);border:1.5px solid #cbd5e1;}
.ficha-penal .cara-figura img{width:90%;height:90%;object-fit:contain;}
.punto-penal{width:16px;height:16px;border-radius:50%;background:var(--bg-profundo);border:2px solid var(--primary-light);transition:all 0.3s;}
.punto-penal.gol{background:var(--verde-vivo);border-color:var(--verde-brillo);box-shadow:0 0 8px var(--verde-vivo);}
.punto-penal.fallo{background:var(--rojo-derrota);border-color:var(--rojo-oscuro);box-shadow:0 0 8px var(--rojo-derrota);}

.crowdfund-card{background:radial-gradient(circle,var(--bg-panel) 0%,var(--bg-profundo) 100%);border:1.5px solid var(--dorado);border-radius:12px;padding:14px;text-align:center;box-shadow:0 0 20px rgba(243,198,95,0.25);}
.crowdfund-stat-box{display:flex;justify-content:space-around;margin:12px 0 6px 0;background:var(--bg-profundo);border:1px solid var(--primary-light);border-radius:8px;padding:8px 4px;font-size:11px;}
.stat-col{display:flex;flex-direction:column;align-items:center;gap:2px;}
.stat-col span:first-child{color:var(--texto-secundario);font-size:10px;}
.stat-col span:last-child{font-weight:bold;font-size:13px;}

@keyframes parpadeoRapido {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(0.95); }
}
.animacion-ruleta {
animation: parpadeoRapido 0.15s infinite;
color: var(--texto-blanco) !important;
}

@media (max-width:400px) { #tablero-contenedor {transform:scale(0.9);transform-origin:top center;margin-top:-10px;margin-bottom:-40px;} }
@media (max-width:370px) { #tablero-contenedor {transform:scale(0.85);transform-origin:top center;margin-top:-20px;margin-bottom:-60px;} }
@media (max-width:340px) { #tablero-contenedor {transform:scale(0.78);transform-origin:top center;margin-top:-30px;margin-bottom:-80px;} }

html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}

body {
display: flex;
flex-direction: column;
}

header, .barra-fixture, .banco-caja, .barra-apoyos, #barra-navegacion-inferior {
flex-shrink: 0;
position: relative;
z-index: 10;
}

#tablero-contenedor {
flex: 1;
position: relative;
width: 100%;
overflow: hidden;
z-index: 5;
}

#barra-navegacion-inferior {
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-bottom: env(safe-area-inset-bottom);
}

/* =========================================
MODO ULTRA-COMPACTO (CORREGIDO)
========================================= */

.barra-fixture {
padding: 2px 8px !important;
}
.barra-fixture #logo-competicion-izq,
.barra-fixture #logo-competicion-der {
height: 16px !important;
}
#escudo-izq-container img,
#escudo-der-container img {
height: 38px !important;
}
.barra-fixture #txt-rival,
.barra-fixture #header-badge-dif {
font-size: 10px !important;
}
.reloj-caja {
padding: 1px 5px !important;
margin: 0 !important;
}
.reloj-caja #txt-cronometro {
font-size: 11px !important;
}

.banco-caja {
padding: 3px 10px !important;
}
.banco-titulo {
font-size: 9px !important;
margin-bottom: 2px !important;
}

.barra-apoyos {
padding: 2px 10px !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.slot-apoyo {
padding: 2px !important;
font-size: 9px !important;
min-height: 24px !important;
}
.slot-apoyo .badge {
width: 14px !important;
height: 14px !important;
font-size: 9px !important;
top: -4px !important;
right: -4px !important;
}

#barra-navegacion-inferior {
padding-top: 2px !important;
padding-bottom: calc(2px + env(safe-area-inset-bottom)) !important;
min-height: 40px !important;
}
.nav-btn {
padding: 2px !important;
}
.nav-icon {
width: 20px !important;
height: 20px !important;
}

/* =========================================
AGRANDAR LOGOS DE SPONSORS (Ingöt, Aconcagua, Sparkling)
========================================= */

#sponsor-goles-box img {
height: 210px !important;
}

#img-sponsor-derrota {
height: 210px !important;
}
#img-sponsor-derrota.sponsor-sparkling {
height: 280px !important;
}
#img-sponsor-derrota.sponsor-ingot {
height: 280px !important;
}
#img-sponsor-derrota.sponsor-fortius {
height: 248px !important;
}
#img-sponsor-derrota.sponsor-shopping {
height: 230px !important;
}
#img-sponsor-derrota.sponsor-lincoln {
height: 236px !important;
}
#img-sponsor-derrota.sponsor-befol {
height: 236px !important;
}

#img-video-sponsor {
height: 140px !important;
}
#img-video-sponsor.sponsor-fortius {
height: 168px !important;
}

#modal-ingot-celebracion img {
height: 90px !important;
}

/* =========================================
AJUSTES MILIMÉTRICOS DEFINITIVOS: BANCO Y BARRA INFERIOR
========================================= */

.banco-caja {
padding: 0px 10px 2px 10px !important;
}
.banco-titulo {
font-size: 8px !important;
margin-bottom: 2px !important;
color: var(--texto-secundario);
}

.slot-banco {
width: 45px !important;
height: 57px !important;
border-radius: 4px !important;
}

.slot-banco {
width: 44px !important;
height: 56px !important;
border-radius: 4px !important;
}

.ficha-en-banco {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}

.ficha-en-banco img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
transform: scale(1.2) !important;
}

/* =========================================
AJUSTE DE LOGOS: AFA Y PRIMERA C
========================================= */

.barra-fixture #logo-competicion-izq {
height: 22px !important;
}

.barra-fixture #logo-competicion-der {
height: 28px !important;
}
.barra-fixture #logo-competicion-der.logo-copa-arg {
height: 52px !important;
max-width: 100px !important;
width: auto !important;
object-fit: contain !important;
margin-top: -12px !important;
margin-bottom: -12px !important;
position: relative;
z-index: 2;
}

/* =========================================
BARRA INFERIOR GLOBAL (BLINDADA)
========================================= */

#barra-navegacion-inferior {
position: fixed !important;
bottom: 15px !important;
left: 2% !important;
width: 96% !important;
z-index: 999999 !important;
background-color: var(--bg-superficie) !important;
border: 1px solid var(--borde-panel) !important;
border-radius: 12px !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 6px !important;
margin: 0 !important;
}
#nav-home-pilares {
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
z-index: 3 !important;
}
#nav-home-pilares svg {
fill: #ffffff !important;
}

body {
padding-bottom: 80px !important;
}

/* =========================================
CORRECCIÓN DE CAPAS: MENÚS AL FRENTE
========================================= */

#barra-navegacion-inferior {
z-index: 9999990 !important;
pointer-events: auto !important;
}

#modal-tienda,
#modal-billetera,
#modal-asamblea,
#modal-atlastv-archivo,
#modal-video-goles,
#modal-publicidad {
z-index: 9999999 !important;
}
#modal-rifa {
z-index: 10000050 !important;
}

#modal-video-goles {
z-index: 23000000 !important;
justify-content: flex-start !important;
align-items: center !important;
padding: 12px 12px calc(20px + env(safe-area-inset-bottom)) 12px !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
box-sizing: border-box;
}
#modal-video-goles .modal {
width: 100%;
max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
overflow-y: auto;
-webkit-overflow-scrolling: touch;
gap: 10px;
padding: 14px 14px 12px;
}
#modal-video-goles #img-video-sponsor {
height: 72px !important;
max-height: 18vh;
}
#modal-video-goles #img-video-sponsor.sponsor-fortius {
height: 100px !important;
max-height: 24vh;
}
#modal-video-goles #reproductor-mp4-oficial {
height: min(220px, 34vh) !important;
}
#modal-video-goles .btn-cerrar-video {
position: sticky;
bottom: 0;
margin-top: 8px;
z-index: 3;
}

/* =========================================
ESTILOS: SISTEMA DE SOBRES Y ÁLBUM
========================================= */
#pantalla-apertura-sobres {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
background-color: rgba(18, 9, 4, 0.98);
z-index: 9999999;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.paquete-header {
text-align: center;
margin-bottom: 20px;
color: var(--dorado);
}

.grilla-figuritas {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
margin-bottom: 30px;
}

.slot-figu {
width: 90px;
height: 114px;
background-color: rgba(255, 255, 255, 0.05);
border: 2px dashed var(--primary-light);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
}

.dorso-figu {
color: var(--dorado);
font-weight: bold;
font-size: 1.5rem;
}

.slot-figu.revelada {
border: 2px solid var(--dorado);
background-color: var(--bg-profundo);
cursor: default;
position: relative;
}

.etiqueta-repetida {
position: absolute;
bottom: 5px;
left: 50%;
transform: translateX(-50%);
background-color: var(--rojo-derrota);
color: var(--texto-blanco);
font-size: 8px;
padding: 2px 4px;
border-radius: 4px;
font-weight: bold;
letter-spacing: 0.5px;
}

body {
display: flex;
flex-direction: column;
height: 100dvh;
margin: 0;
overflow: hidden;
}

header, .barra-fixture, .banco-caja, .barra-apoyos, #barra-navegacion-inferior {
flex-shrink: 0;
position: relative;
z-index: 10;
}

#tablero-contenedor {
flex-grow: 1;
position: relative;
width: 100%;
overflow: hidden;
z-index: 5;
}

#barra-navegacion-inferior {
margin-top: auto;
padding-bottom: env(safe-area-inset-bottom);
}

/* =========================================
ANIMACIÓN DE PAPELITOS (CONFETTI)
========================================= */

.papelito {
position: fixed !important;
width: 8px;
height: 8px;
z-index: 99999999 !important;
pointer-events: none !important;
border-radius: 2px;
box-shadow: 0 0 4px rgba(255,255,255,0.8);
animation: explosionPapelitos 2.5s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}
.papelito.papelito-victoria {
animation-duration: 4.2s !important;
}

#pantalla-fin.victoria-sobre-tablero {
background: transparent !important;
pointer-events: none;
}
#pantalla-fin.victoria-sobre-tablero .modal {
pointer-events: auto;
background: linear-gradient(180deg, var(--bg-panel) 0%, var(--bg-superficie) 100%);
}

@keyframes explosionPapelitos {
0% {
transform: translate(-50%, -50%) rotate(0deg) scale(1);
opacity: 1;
}
50% {
transform: translate(calc(-50% + var(--tx-half)), var(--ty-peak)) rotate(var(--rot)) scale(1.2);
opacity: 1;
}
100% {
transform: translate(calc(-50% + var(--tx)), var(--ty-end)) rotate(calc(var(--rot) * 2)) scale(0);
opacity: 0;
}
}

#contenedor-notificaciones {
position: fixed;
top: 15px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
gap: 10px;
z-index: 9999999;
width: 92%;
max-width: 380px;
pointer-events: none;
}

.alarma-toast {
background: rgba(31, 17, 9, 0.96);
border: 1.5px solid var(--celeste-atlas);
border-radius: 10px;
padding: 12px;
display: flex;
align-items: center;
gap: 14px;
box-shadow: 0 6px 20px rgba(0,0,0,0.8);
color: var(--texto-blanco);
pointer-events: auto;
cursor: pointer;
animation: slideDownToast 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes slideDownToast {
0% { opacity: 0; transform: translateY(-30px); }
100% { opacity: 1; transform: translateY(0); }
}

/* =========================================
UTILIDADES HEADER Y RECURSOS
========================================= */
.recurso-caja {
display: flex;
flex-direction: row;
align-items: center;
gap: 3px;
padding: 4px 7px;
background: linear-gradient(135deg, var(--bg-panel), var(--bg-profundo));
border-radius: 14px;
margin-right: 5px;
cursor: pointer;
}
.recurso-caja.default { cursor: default; }

.recurso-caja.tema-celeste {
border: 1px solid var(--celeste-atlas);
box-shadow: 0 0 8px rgba(56, 189, 248, 0.25);
}

.recurso-caja.tema-dorado {
border: 1px solid var(--dorado);
box-shadow: 0 0 8px rgba(243, 198, 95, 0.25);
}

.txt-bold-11 { font-size: 11px; font-weight: 900; }
.color-celeste { color: var(--celeste-atlas); }
.color-dorado { color: var(--dorado); }

.badge-campanita-estilo {
position: absolute;
top: -4px;
right: -4px;
background: var(--rojo-derrota);
color: var(--texto-blanco);
font-size: 9px;
font-weight: 900;
border-radius: 50%;
width: 14px;
height: 14px;
align-items: center;
justify-content: center;
border: 1px solid #000;
}

/* =========================================
BARRA DE FIXTURE Y MARCADOR
========================================= */
.fixture-columna {
flex: 1;
display: flex;
gap: 3px;
}
.fixture-izq {
flex-direction: column;
align-items: flex-start;
}
.fixture-der {
flex-direction: column;
align-items: flex-end;
}
.fixture-centro {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
}
.fixture-logo {
height: 22px;
filter: drop-shadow(0 2px 2px rgba(0,0,0,0.5));
}
.fixture-vs-caja {
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
}
.txt-rival-estilo {
font-weight: 900;
font-size: 14px;
text-transform: uppercase;
color: var(--texto-blanco);
}

/* =========================================
MODAL TIENDA OFICIAL
========================================= */
.tienda-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.tienda-card {
background: var(--bg-profundo);
border: 1px solid var(--primary-light);
border-radius: 8px;
padding: 10px;
display: flex;
flex-direction: column;
align-items: center;
box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}
.tienda-img {
width: 100%;
height: 90px;
object-fit: contain;
margin-bottom: 8px;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.tienda-titulo {
color: var(--texto-blanco);
font-size: 11px;
text-align: center;
min-height: 26px;
font-weight: bold;
}
.tienda-precio {
color: var(--dorado);
font-weight: 900;
font-size: 14px;
margin: 4px 0;
}
.btn-comprar {
width: 100%;
background: linear-gradient(135deg, var(--primary-light), var(--primary));
color: var(--texto-blanco);
border: 1px solid var(--dorado);
border-radius: 6px;
padding: 6px;
font-size: 11px;
font-weight: bold;
cursor: pointer;
text-decoration: none;
}

/* =========================================
MODAL BILLETERA
========================================= */
.billetera-modal {
max-width: 380px;
border-color: var(--dorado);
background: linear-gradient(180deg, var(--bg-panel) 0%, var(--bg-superficie) 100%);
}
.billetera-header {
color: var(--dorado);
font-size: 17px;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.billetera-icon {
width: 20px;
height: 20px;
object-fit: contain;
}
.btn-tombola {
background: linear-gradient(135deg, var(--celeste-atlas), var(--celeste-oscuro));
border-color: var(--celeste-atlas);
width: 100%;
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
margin: 5px 0;
font-size: 15px;
box-shadow: 0 4px 15px rgba(56, 189, 248, 0.4);
}
.billetera-saldo-caja {
background: linear-gradient(135deg, var(--bg-panel), var(--bg-profundo));
border: 1.5px solid var(--dorado);
border-radius: 10px;
padding: 12px;
margin: 4px 0;
box-shadow: 0 0 12px rgba(243, 198, 95, 0.2);
}
.billetera-saldo-label {
font-size: 11px;
color: var(--texto-claro);
font-weight: bold;
letter-spacing: 0.5px;
}
.billetera-saldo-valor {
font-size: 24px;
font-weight: 900;
color: var(--dorado);
margin-top: 2px;
}
.billetera-historial-caja {
text-align: left;
margin-top: 4px;
}
.billetera-historial-titulo {
font-size: 11px;
font-weight: bold;
color: var(--celeste-atlas);
margin-bottom: 6px;
display: flex;
justify-content: space-between;
}

/* =========================================
MODAL COMPRAR GCOINS
========================================= */
.gcoins-modal {
max-width: 380px;
border-color: var(--dorado);
}
.gcoins-lista {
display: flex;
flex-direction: column;
gap: 8px;
margin: 10px 0;
}
.gcoins-pack {
background: var(--bg-profundo);
border-radius: 8px;
padding: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
.gcoins-pack.basico { border: 1px solid var(--primary-light); }
.gcoins-pack.medio { border: 1px solid var(--celeste-atlas); }
.gcoins-pack.premium { border: 1.5px solid var(--dorado); }

.gcoins-pack-info { text-align: left; }
.gcoins-pack-desc { font-size: 10px; color: var(--texto-secundario); }

.btn-comprar-pack {
padding: 6px 14px;
font-size: 11px;
margin: 0;
}
.btn-comprar-pack.medio {
background: linear-gradient(135deg, var(--celeste-atlas), var(--celeste-oscuro));
border-color: var(--celeste-atlas);
}
.btn-comprar-pack.premium {
background: linear-gradient(135deg, var(--dorado-oscuro), var(--dorado-intenso));
border-color: var(--dorado);
}

/* =========================================
PANTALLA DE FIN DE PARTIDO
========================================= */
.fin-modal {
border-color: var(--dorado);
background: linear-gradient(180deg, var(--bg-panel) 0%, var(--bg-superficie) 100%);
}
.fin-titulo {
font-size: 32px;
letter-spacing: 2px;
margin-bottom: 0;
}
.fin-desc {
font-size: 15px;
color: var(--texto-blanco);
font-weight: bold;
margin-top: 2px;
}
.fin-reward-box {
background: var(--bg-profundo);
padding: 8px 20px;
border-radius: 6px;
font-size: 14px;
font-weight: bold;
margin: 6px auto 10px auto;
width: max-content;
display: flex;
gap: 6px;
border: 1px solid var(--primary-light);
}
.fin-sponsor-box {
display: none;
flex-direction: column;
align-items: center;
gap: 2px;
margin: 10px 0 5px 0;
width: 100%;
background: transparent;
border: none;
padding: 0;
}
.fin-sponsor-box img {
height: 140px;
max-width: 100%;
object-fit: contain;
filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5));
}
.fin-btn-video {
background: linear-gradient(135deg, var(--celeste-atlas), var(--celeste-oscuro));
color: var(--texto-blanco);
border: none;
padding: 12px 40px;
border-radius: 6px;
font-weight: 900;
cursor: pointer;
font-size: 18px;
margin-top: 10px;
letter-spacing: 1px;
box-shadow: 0 6px 12px rgba(56,189,248,0.4);
}
.fin-btn-revancha {
background: linear-gradient(135deg, var(--rojo-derrota), var(--rojo-oscuro));
color: var(--texto-blanco);
border: none;
padding: 12px 40px;
border-radius: 6px;
font-weight: 900;
cursor: pointer;
font-size: 20px;
margin-top: 15px;
letter-spacing: 1px;
box-shadow: 0 6px 12px rgba(230,57,70,0.4);
}

/* =========================================
MODAL MINIJUEGO PENALES
========================================= */
.penales-overlay {
justify-content: flex-start;
padding: 30px 10px;
}
.penales-marcador-caja {
width: 100%;
max-width: 360px;
background: var(--bg-superficie);
border: 2px solid var(--celeste-atlas);
border-radius: 8px;
overflow: hidden;
margin-top: 10px;
box-shadow: 0 10px 20px rgba(0,0,0,0.8);
}
.penales-marcador-header {
background: linear-gradient(90deg, var(--primary), var(--primary-light));
padding: 6px;
font-weight: bold;
font-size: 13px;
letter-spacing: 1px;
color: var(--texto-blanco);
}
.penales-fila-equipo {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 15px;
}
.penales-fila-equipo.borde-abajo {
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.penales-equipo-info {
display: flex;
align-items: center;
gap: 8px;
}
.penales-escudo {
width: 26px;
height: 26px;
filter: drop-shadow(0 2px 2px rgba(0,0,0,0.8));
}
.penales-nombre {
font-weight: 900;
font-size: 15px;
}
.penales-instruccion-titulo {
margin-top: 25px;
font-size: 26px;
font-weight: 900;
letter-spacing: 1px;
text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}
.penales-instruccion-desc {
font-size: 13px;
color: var(--texto-secundario);
margin-bottom: 15px;
font-weight: bold;
}
.penales-barra-fondo {
width: 100%;
max-width: 280px;
height: 12px;
background: var(--bg-superficie);
border: 1.5px solid var(--primary-light);
border-radius: 6px;
overflow: hidden;
margin-bottom: 25px;
}
.penales-barra-progreso {
width: 100%;
height: 100%;
background: linear-gradient(90deg, var(--celeste-atlas), var(--dorado));
transition: width 0.05s linear;
}
.penales-tablero {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
justify-items: center;
max-width: 320px;
}

/* =========================================
MODALES DE PREMIOS (CUPÓN E INGÖT)
========================================= */
.cupon-modal {
border-color: var(--dorado);
max-width: 380px;
}
.tarjeta-cupon {
position: relative;
overflow: hidden;
width: 100%;
border-radius: 16px;
background: linear-gradient(135deg, #3a2114 0%, #1a0d06 55%, #0c0603 100%);
border: 1px solid #c9a227;
box-shadow: 0 10px 22px rgba(0,0,0,0.45);
text-align: left;
color: #fff;
margin: 8px 0 4px 0;
}
.tarjeta-cupon-franja {
position: absolute;
left: 0; top: 0; bottom: 0;
width: 8px;
background: var(--celeste-atlas);
}
.tarjeta-cupon-top {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 14px 8px 20px;
gap: 8px;
}
.tarjeta-cupon-club {
display: block;
font-size: 11px;
font-weight: 900;
letter-spacing: 0.8px;
color: #f3e6d0;
}
.tarjeta-cupon-tipo {
display: block;
font-size: 9px;
letter-spacing: 1.4px;
color: #38bdf8;
margin-top: 2px;
font-weight: 700;
}
.tarjeta-cupon-top img {
width: 42px;
height: 42px;
object-fit: contain;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}
.tarjeta-cupon-cuerpo {
display: flex;
align-items: center;
gap: 10px;
padding: 4px 14px 8px 20px;
}
.tarjeta-cupon-cuerpo img {
width: 78px;
height: 78px;
object-fit: contain;
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));
}
.tarjeta-cupon-datos {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.tarjeta-cupon-off {
font-size: 28px;
font-weight: 900;
letter-spacing: 1px;
line-height: 1;
color: #e9c46a;
}
.tarjeta-cupon-item {
font-size: 11px;
font-weight: 700;
color: #d6c3b0;
letter-spacing: 1px;
}
.tarjeta-cupon-codigo {
font-size: 16px;
font-weight: 900;
letter-spacing: 2px;
color: #38bdf8;
user-select: text;
margin-top: 4px;
}
.tarjeta-cupon-titular {
font-size: 10px;
color: #cbb79f;
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 210px;
}
.tarjeta-cupon-pie {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 14px 10px 20px;
border-top: 1px dashed rgba(233,196,106,0.45);
font-size: 9px;
color: #d6c3b0;
letter-spacing: 0.3px;
font-weight: 700;
}
body.tema-claypole .tarjeta-cupon {
background: linear-gradient(135deg, #2a2a2a 0%, #0a0a0a 55%, #000 100%);
border-color: rgba(255,255,255,0.55);
}
body.tema-claypole .tarjeta-cupon-franja { background: #d0d0d0; }
body.tema-claypole .tarjeta-cupon-tipo,
body.tema-claypole .tarjeta-cupon-codigo { color: #f2f2f2; }
body.tema-claypole .tarjeta-cupon-off { color: #fff; }
body.tema-claypole .tarjeta-cupon-club,
body.tema-claypole .tarjeta-cupon-item,
body.tema-claypole .tarjeta-cupon-pie { color: #e8e8e8; }
body.tema-claypole .tarjeta-cupon-titular { color: #bdbdbd; }
body.tema-claypole .tarjeta-cupon-pie { border-top-color: rgba(255,255,255,0.28); }

.premio-ingot-modal {
border-color: var(--dorado);
background: radial-gradient(circle, var(--marron-oscuro) 0%, var(--bg-superficie) 100%);
}
.premio-ingot-titulo {
color: var(--dorado);
font-size: 24px;
text-transform: uppercase;
letter-spacing: 2px;
animation: pulsoNotif 1s infinite;
}
.premio-ingot-cheque {
background: var(--fondo-ficha);
border: 3px solid var(--dorado);
border-radius: 10px;
padding: 20px;
margin: 15px 0;
color: #000;
position: relative;
box-shadow: 0 10px 20px rgba(243, 198, 95, 0.4);
}
.btn-cobrar-ingot {
background: linear-gradient(135deg, var(--dorado-oscuro), var(--dorado-intenso));
border-color: var(--dorado);
}

/* =========================================
MODALES DE VIDEO Y PUBLICIDAD
========================================= */
.video-modal {
max-width: 400px;
border-color: var(--celeste-atlas);
background: linear-gradient(180deg, var(--bg-panel) 0%, var(--bg-superficie) 100%);
}
.video-sponsor-caja {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
margin-bottom: 12px;
}
.video-sponsor-img {
height: 110px;
object-fit: contain;
filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5));
}
.video-contenedor {
background: #000;
border: 1px solid var(--primary-light);
border-radius: 8px;
margin: 10px 0;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.publi-contenedor {
background: #000;
border: 2px solid var(--dorado);
border-radius: 12px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}

/* =========================================
MODAL TÓMBOLA
========================================= */
.tombola-modal {
border-color: var(--celeste-atlas);
max-width: 350px;
}
.tombola-caja-premio {
background: var(--bg-profundo);
border: 2px dashed var(--primary-light);
border-radius: 10px;
padding: 20px;
font-size: 24px;
font-weight: 900;
color: var(--dorado);
min-height: 80px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 15px;
text-transform: uppercase;
text-align: center;
}
.btn-mp-tombola {
background: linear-gradient(135deg, var(--celeste-atlas), var(--celeste-oscuro));
border-color: var(--celeste-atlas);
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.btn-girar-tombola {
display: none;
background: linear-gradient(135deg, var(--dorado-oscuro), var(--dorado-intenso));
border-color: var(--dorado);
width: 100%;
font-size: 16px;
}
.barra-carga-caja {
width: 230px;
height: 6px;
background: rgba(255, 255, 255, 0.08);
border-radius: 4px;
overflow: hidden;
border: 1px solid var(--primary-light);
margin: 20px auto 0 auto;
}

.barra-carga-progreso {
width: 0%;
height: 100%;
background: linear-gradient(90deg, var(--celeste-atlas), var(--dorado));
animation: none;
}

.intro-pantalla.activa .barra-carga-progreso {
animation: barraCarga 3.6s forwards ease-in-out;
}

@keyframes barraCarga {
0% { width: 0%; }
100% { width: 100%; }
}

#tut-img-container {
background: radial-gradient(circle, var(--bg-panel) 0%, var(--bg-profundo) 100%);
border: 1.5px solid rgba(56, 189, 248, 0.35);
border-radius: 16px;
box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.7), 0 4px 15px rgba(0, 0, 0, 0.4);
padding: 12px;
margin: 10px 0 !important;
position: relative;
overflow: hidden;
}

#tut-img-container img {
max-height: 100%;
max-width: 100%;
object-fit: contain;
filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.7));
animation: flotarIcono 2.5s ease-in-out infinite alternate;
}

@keyframes flotarIcono {
0% { transform: translateY(0px) scale(1); }
100% { transform: translateY(-5px) scale(1.03); }
}

#tut-dots span, #tut-dots .dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
}

#tut-dots span.active, #tut-dots .dot.active {
width: 22px;
border-radius: 4px;
background: var(--celeste-atlas);
box-shadow: 0 0 8px rgba(56, 189, 248, 0.6);
}

.ficha {
width: 60px !important;
height: 76px !important;
font-size: 16px !important;
margin: 0 !important;
box-sizing: border-box;
}

#tablero-contenedor .ficha:hover,
#tablero-contenedor .ficha.seleccionada {
outline: 2px solid var(--celeste-atlas);
outline-offset: -2px;
}

#tablero-contenedor .ficha:active {
transform: none;
filter: none;
}

/* --- DISEÑO FINAL DEL MODAL TUTORIAL --- */
#modal-tutorial .modal {
max-width: 400px !important;
width: 90% !important;
padding: 24px 22px !important;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px !important;
background: linear-gradient(180deg, var(--bg-panel) 0%, var(--bg-superficie) 100%) !important;
border: 2px solid var(--celeste-atlas);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.85), 0 0 25px rgba(56, 189, 248, 0.25);
border-radius: 24px;
box-sizing: border-box;
}

#tut-title {
font-size: 22px !important;
font-weight: 800;
letter-spacing: 0.5px;
margin: 0 !important;
text-align: center;
text-transform: uppercase;
color: var(--celeste-atlas) !important;
line-height: 1.2;
}

#tut-img-container {
width: 100%;
min-height: 100px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 2px 0 !important;
}

#tut-img-container img {
max-height: 95px;
max-width: 100%;
object-fit: contain;
filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6));
}

#tut-desc {
font-size: 13px !important;
line-height: 1.45;
color: var(--texto-claro) !important;
text-align: center;
margin: 0 !important;
padding: 0 4px;
}

#tut-dots {
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 8px !important;
margin: 4px 0 8px 0 !important;
}

#tut-dots span, #tut-dots .dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: rgba(196, 169, 139, 0.35);
transition: all 0.3s ease;
}

#tut-dots span.active, #tut-dots .dot.active {
width: 12px;
height: 12px;
background: var(--celeste-atlas);
box-shadow: 0 0 10px rgba(56, 189, 248, 0.7);
}

#modal-tutorial .modal > div:last-child {
width: 100%;
display: flex !important;
justify-content: space-between !important;
gap: 12px !important;
margin-top: 4px !important;
}

#modal-tutorial .modal button {
flex: 1;
padding: 11px 16px !important;
font-size: 14px !important;
font-weight: 600;
border-radius: 12px;
cursor: pointer;
transition: all 0.2s ease;
}

/* --- 1. UBICACIÓN CORRECTA DE LOS 3 PILARES (ARQUITECTURA) --- */
.arquitectura-wrapper, .hub-container, #club-screen {
    display: flex;
    flex-direction: column;
    justify-content: flex-start !important;
    padding-top: 10px !important;
    gap: 12px !important;
}

/* Espaciado interno específico para que los 3 pilares queden centrados y a buena altura */
.pillars-container, .secciones-pilares {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
}

/* --- 2. FONDO MARRÓN INSTITUCIONAL PARA LOS PILARES (Chau verde) --- */
.pillar-card, .card-pilar, .seccion-pilar, [class*="pilar"] {
    background: var(--fondo-caja-dinamica) !important;
    border: 1px solid var(--borde-caja-dinamica) !important;
}

.btn-primera-c, #btn-primera-c {
    background: var(--boton-gradiente) !important;
    border: 1px solid var(--celeste-atlas) !important;
    color: #ffffff !important;
}

.hub-container, #club-screen, .main-hub, .arquitectura-wrapper, [id*="hub"] {
    justify-content: flex-start !important;
    padding-top: 10px !important;
    margin-top: 0 !important;
    gap: 12px !important;
}
/* Fondos dinámicos (el color lo define --bg-profundo según el club) */
body, html, 
#home, #pantalla-home, #menu-principal,
#pantalla-juego, #tablero-contenedor, 
#intro-secuencia, #match-intro, #pantalla-intro, .pantalla,
header, footer, #header, #footer, .top-bar, .bottom-bar {
    background: var(--bg-profundo) !important;
}

/* Identidad visual por club */
.club-identity-stripes {
    display: flex;
    width: 100%;
    max-width: 220px;
    height: 7px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}
.club-identity-stripes span { flex: 1; display: block; }
body.tema-atlas .club-identity-stripes span:nth-child(1) { background: #6b3b1e; }
body.tema-atlas .club-identity-stripes span:nth-child(2) { background: #38bdf8; }
body.tema-atlas .club-identity-stripes span:nth-child(3) { background: #ffffff; }
body.tema-claypole .club-identity-stripes span:nth-child(1) { background: #000000; }
body.tema-claypole .club-identity-stripes span:nth-child(2) { background: #d8d8d8; }
body.tema-claypole .club-identity-stripes span:nth-child(3) { background: #000000; }

.club-apodo-chip {
    display: inline-block;
    margin-top: 4px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #fff;
    border: 1px solid var(--celeste-atlas);
    background: rgba(0,0,0,0.35);
}

#vs-text { color: var(--celeste-atlas) !important; }
.reloj-caja { border-color: var(--celeste-atlas) !important; color: #fff !important; }

body.tema-atlas .ficha.seleccionada,
body.tema-atlas .ficha:not(.bloqueada-maHJong):active {
    box-shadow: 0 0 0 2px #38bdf8;
}

body.tema-claypole {
    background: radial-gradient(circle at 50% 0%, #2a2a2a 0%, #0a0a0a 42%, #000000 100%) !important;
}
body.tema-claypole header,
body.tema-claypole #barra-navegacion-inferior {
    background: #000000 !important;
    border-color: rgba(255,255,255,0.35) !important;
}
body.tema-claypole .nav-btn.activo {
    background: #111111 !important;
    border-color: #ffffff !important;
    box-shadow: 0 0 10px rgba(255,255,255,0.18), inset 0 -2px 0 #cfcfcf !important;
}
body.tema-claypole .nav-btn:not(.activo),
body.tema-claypole .btn-sonido {
    background: #000000 !important;
    border: 1px solid rgba(255,255,255,0.35) !important;
}
body.tema-claypole .barra-fixture,
body.tema-claypole .slot-apoyo,
body.tema-claypole .recurso-caja {
    background: linear-gradient(180deg, #161616 0%, #050505 100%) !important;
    border-color: rgba(255,255,255,0.35) !important;
}
body.tema-claypole .btn-accion {
    background: linear-gradient(135deg, #2a2a2a, #000000) !important;
    border-color: rgba(255,255,255,0.55) !important;
    color: #ffffff !important;
}
body.tema-claypole .slot-banco:not(.emparejando) {
    border-color: rgba(255,255,255,0.45) !important;
}
body.tema-claypole .ficha.misterio .cara-dorso {
    background: radial-gradient(circle, #222 0%, #000 100%) !important;
    border-color: #ffffff !important;
}
body.tema-claypole .club-apodo-chip {
    border-color: #ffffff;
    color: #ffffff;
}
body.tema-claypole .club-apodo-chip::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 8px;
    border-radius: 1px;
    background: #d8d8d8;
    vertical-align: middle;
}
body.tema-claypole .badge-jugar {
    background: #f2f2f2 !important;
    color: #111 !important;
}
body.tema-claypole #hub-pilares-overlay::before,
body.tema-claypole #modal-presentacion-club::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        -18deg,
        transparent 0 22px,
        rgba(255, 255, 255, 0.03) 22px 23px
    );
}
body.tema-claypole .pilar-card,
body.tema-claypole [class*="pilar"],
body.tema-claypole .btn-accion,
body.tema-claypole .pantalla-match-card,
body.tema-claypole .card-opcion-info,
body.tema-claypole #modal-presentacion-club > div {
    border-color: rgba(255,255,255,0.5) !important;
}
#modal-hub-informacion,
#modal-vista-informacion {
    background: var(--fondo-principal-dinamico) !important;
}
.card-opcion-info {
    background: var(--fondo-caja-dinamica) !important;
    border-color: var(--club-acento) !important;
}
#atlastv-lista-container > div {
    background: var(--fondo-caja-dinamica) !important;
    border-color: var(--club-acento) !important;
}
#atlastv-lista-container .btn-accion {
    background: var(--boton-gradiente) !important;
}
body.tema-claypole .modal,
body.tema-claypole #modal-tutorial .modal {
    border-color: rgba(255,255,255,0.45) !important;
    box-shadow: 0 0 22px rgba(255, 255, 255, 0.08) !important;
}
#hub-pilares-overlay,
#modal-presentacion-club { position: relative; overflow: hidden; }

body.tema-atlas .pilar-card,
body.tema-atlas [class*="pilar"] {
    border-color: var(--celeste-atlas) !important;
}
body.tema-atlas .modal,
body.tema-atlas .pantalla-match-card,
body.tema-atlas #modal-tutorial .modal {
    border-color: var(--celeste-atlas) !important;
}
body.tema-atlas .nav-btn.activo {
    background: linear-gradient(135deg, #6b3b1e, #3b2010) !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.45) !important;
}

/* Claypole: gris / blanco / negro. El rojo queda fuera de la UI. */
body.tema-claypole {
    --clay-rojo: rgba(255, 255, 255, 0.55);
    --clay-gris: rgba(255, 255, 255, 0.38);
}
body.tema-claypole header,
body.tema-claypole #barra-navegacion-inferior,
body.tema-claypole .header-club-bloque,
body.tema-claypole .barra-fixture,
body.tema-claypole .slot-apoyo,
body.tema-claypole .recurso-caja,
body.tema-claypole .reloj-caja,
body.tema-claypole .slot-banco,
body.tema-claypole .nav-btn,
body.tema-claypole .btn-sonido,
body.tema-claypole input,
body.tema-claypole .mision-card,
body.tema-claypole .tienda-card,
body.tema-claypole .gcoins-pack,
body.tema-claypole .billetera-saldo-caja,
body.tema-claypole .billetera-modal,
body.tema-claypole #atlastv-lista-container,
body.tema-claypole #atlastv-lista-container > div,
body.tema-claypole #lista-ranking-jugadores,
body.tema-claypole #lista-ranking-clubes,
body.tema-claypole #modal-tienda .modal > div,
body.tema-claypole #modal-tienda .modal [style*="border"]:not(button),
body.tema-claypole #modal-informacion .modal > div,
body.tema-claypole #billetera-historial-lista > div,
body.tema-claypole #reward-box,
body.tema-claypole .vs-circulo {
    border-color: var(--clay-gris) !important;
    box-shadow: none !important;
}
body.tema-claypole .nav-btn.activo {
    border-color: #ffffff !important;
    box-shadow: inset 0 -2px 0 #cfcfcf !important;
}
body.tema-claypole .modal,
body.tema-claypole #modal-tutorial .modal,
body.tema-claypole .pilar-card,
body.tema-claypole [class*="pilar"],
body.tema-claypole .card-opcion-info,
body.tema-claypole .pantalla-match-card,
body.tema-claypole #modal-presentacion-club > div,
body.tema-claypole .btn-accion,
body.tema-claypole .modal button,
body.tema-claypole #btn-tut-next,
body.tema-claypole #btn-sponsor-derrota,
body.tema-claypole .mascara-ig-contenedor,
body.tema-claypole .cabezal-camuflaje-club {
    border-color: var(--clay-rojo) !important;
}
body.tema-claypole .modal button[style*="border:none"],
body.tema-claypole .modal button[style*="border: none"] {
    border: none !important;
}
body.tema-claypole #modal-tienda button[onclick*="abrirModalComprarGCoins"],
body.tema-claypole #btn-girar-tombola,
body.tema-claypole .gcoins-modal .btn-accion {
    background: linear-gradient(135deg, #2a2a2a, #000000) !important;
    border-color: var(--clay-rojo) !important;
    color: #ffffff !important;
}
body.tema-claypole .punto-penal.gol {
    border-color: var(--verde-brillo) !important;
}
body.tema-claypole .header-club-bloque {
    background: linear-gradient(180deg, #161616 0%, #050505 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.38) !important;
    box-shadow: none !important;
}
body.tema-claypole #modal-tienda button,
body.tema-claypole #modal-tienda .btn-accion {
    background: linear-gradient(135deg, #2a2a2a, #000000) !important;
    border: 1px solid rgba(255,255,255,0.5) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

body.tema-lamadrid {
    background: radial-gradient(circle at 50% 0%, #1a3a6b 0%, #0a1628 48%, #030712 100%) !important;
}
body.tema-lamadrid .club-identity-stripes span:nth-child(1) { background: #0a1628; }
body.tema-lamadrid .club-identity-stripes span:nth-child(2) { background: #ffffff; }
body.tema-lamadrid .club-identity-stripes span:nth-child(3) { background: #0a1628; }
body.tema-lamadrid header,
body.tema-lamadrid #barra-navegacion-inferior {
    background: #07111f !important;
    border-color: rgba(255,255,255,0.4) !important;
}
body.tema-lamadrid .nav-btn.activo {
    background: #123056 !important;
    border-color: #ffffff !important;
    box-shadow: 0 0 10px rgba(255,255,255,0.22) !important;
}
body.tema-lamadrid .nav-btn:not(.activo),
body.tema-lamadrid .btn-sonido {
    background: #07111f !important;
    border: 1px solid rgba(255,255,255,0.4) !important;
}
body.tema-lamadrid .barra-fixture,
body.tema-lamadrid .slot-apoyo,
body.tema-lamadrid .recurso-caja {
    background: linear-gradient(180deg, #123056 0%, #07111f 100%) !important;
    border-color: rgba(255,255,255,0.4) !important;
}
body.tema-lamadrid .btn-accion {
    background: linear-gradient(135deg, #1e3a5f, #0a1628) !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
}
body.tema-lamadrid .slot-banco:not(.emparejando) {
    border-color: rgba(255,255,255,0.5) !important;
}
body.tema-lamadrid .ficha.misterio .cara-dorso {
    background: radial-gradient(circle, #1a3a6b 0%, #07111f 100%) !important;
    border-color: #ffffff !important;
}
body.tema-lamadrid .club-apodo-chip {
    border-color: #ffffff;
    color: #ffffff;
}
body.tema-lamadrid .badge-jugar {
    background: #ffffff !important;
    color: #0a1628 !important;
}
body.tema-lamadrid .pilar-card,
body.tema-lamadrid [class*="pilar"],
body.tema-lamadrid .btn-accion,
body.tema-lamadrid .pantalla-match-card,
body.tema-lamadrid .card-opcion-info,
body.tema-lamadrid #modal-presentacion-club > div,
body.tema-lamadrid .modal,
body.tema-lamadrid #modal-tutorial .modal,
body.tema-lamadrid .modal button,
body.tema-lamadrid #btn-tut-next,
body.tema-lamadrid #btn-sponsor-derrota {
    border-color: #ffffff !important;
}
body.tema-lamadrid header,
body.tema-lamadrid #barra-navegacion-inferior,
body.tema-lamadrid .header-club-bloque,
body.tema-lamadrid .barra-fixture,
body.tema-lamadrid .slot-apoyo,
body.tema-lamadrid .recurso-caja,
body.tema-lamadrid .reloj-caja,
body.tema-lamadrid .slot-banco,
body.tema-lamadrid .nav-btn,
body.tema-lamadrid .btn-sonido,
body.tema-lamadrid input,
body.tema-lamadrid .mision-card,
body.tema-lamadrid .tienda-card,
body.tema-lamadrid .gcoins-pack,
body.tema-lamadrid .billetera-saldo-caja,
body.tema-lamadrid .vs-circulo {
    border-color: rgba(255,255,255,0.4) !important;
    box-shadow: none !important;
}
body.tema-lamadrid .header-club-bloque {
    background: linear-gradient(180deg, #123056 0%, #07111f 100%) !important;
    border: 1px solid rgba(255,255,255,0.45) !important;
}
body.tema-lamadrid #modal-tienda button,
body.tema-lamadrid #modal-tienda .btn-accion {
    background: linear-gradient(135deg, #1e3a5f, #0a1628) !important;
    border: 1px solid #ffffff !important;
    color: #ffffff !important;
    box-shadow: none !important;
}
body.tema-lamadrid .ficha.seleccionada,
body.tema-lamadrid .ficha:not(.bloqueada-maHJong):active {
    box-shadow: 0 0 0 2px #ffffff;
}
body.tema-lamadrid .tarjeta-cupon {
    background: linear-gradient(135deg, #1a3a6b 0%, #0a1628 55%, #030712 100%);
    border-color: #ffffff;
}
body.tema-lamadrid .tarjeta-cupon-franja { background: #ffffff; }
body.tema-lamadrid .tarjeta-cupon-tipo,
body.tema-lamadrid .tarjeta-cupon-codigo { color: #ffffff; }
body.tema-lamadrid .tarjeta-cupon-off { color: #ffffff; }
body.tema-lamadrid .tarjeta-cupon-club,
body.tema-lamadrid .tarjeta-cupon-item,
body.tema-lamadrid .tarjeta-cupon-pie { color: #e8eef8; }
body.tema-lamadrid .tarjeta-cupon-pie { border-top-color: rgba(255,255,255,0.45); }

/* =========================================
TOQUE GLAMOUR (TODA LA APP)
========================================= */
@keyframes brilloBarrido {
  0% { transform: translateX(-140%) skewX(-16deg); opacity: 0; }
  18% { opacity: 0.55; }
  100% { transform: translateX(240%) skewX(-16deg); opacity: 0; }
}
@keyframes flotarEscudoSuave {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
@keyframes entrarModalGlam {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
@keyframes pulsoAcento {
  0%, 100% { filter: drop-shadow(0 0 4px transparent); }
  50% { filter: drop-shadow(0 0 8px var(--club-glow)); }
}

header {
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}
header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--club-acento), transparent);
  opacity: 0.7;
  pointer-events: none;
}
header { position: relative; }
.header-escudo-atlas {
  animation: flotarEscudoSuave 3.4s ease-in-out infinite;
}
.btn-accion, .card-opcion-info, .voz-aviso-card {
  position: relative;
  overflow: hidden;
}
.btn-accion::after, .card-opcion-info::after, .voz-aviso-card::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 38%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  animation: brilloBarrido 5.2s ease-in-out infinite;
  pointer-events: none;
}
.nav-btn.activo {
  animation: pulsoAcento 2.6s ease-in-out infinite;
}
.overlay .modal {
  animation: entrarModalGlam 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}
.voz-aviso-card {
  background: var(--fondo-caja-dinamica);
  border: 1px solid var(--club-acento);
  border-radius: 12px;
  padding: 11px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  cursor: pointer;
}
.barra-fixture {
  position: relative;
  overflow: hidden;
}
.barra-fixture::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 30%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  animation: brilloBarrido 7s ease-in-out infinite;
  pointer-events: none;
}

.modal-rifa { gap: 8px; overflow: hidden; }
.rifa-premios { display: flex; flex-direction: column; gap: 4px; text-align: left; }
.rifa-premio { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--texto-claro); background: var(--bg-profundo); border: 1px solid var(--primary-light); border-radius: 6px; padding: 6px 8px; }
.rifa-premio b { font-weight: 800; }
.rifa-ganadores { background: rgba(233,196,106,0.12); border: 1px solid var(--dorado); border-radius: 8px; padding: 8px; font-size: 11px; font-weight: 800; color: var(--dorado); text-align: left; display: flex; flex-direction: column; gap: 4px; }
.rifa-grilla { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; max-height: 42vh; overflow-y: auto; padding: 2px; }
.rifa-nro { appearance: none; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.06); color: #fff; border-radius: 4px; font-size: 9px; font-weight: 800; padding: 6px 0; cursor: pointer; }
.rifa-nro:not(:disabled):hover { border-color: var(--dorado); color: var(--dorado); }
.rifa-nro.vendido { background: #2a2a32; color: #888; cursor: default; }
.rifa-nro.mio { background: linear-gradient(135deg, var(--dorado-oscuro), var(--dorado)); color: #111; border-color: var(--dorado); }

#hub-plantel-overlay {
  position: fixed; inset: 0; z-index: 67000;
  background: var(--fondo-principal-dinamico, var(--bg-profundo));
  display: flex; flex-direction: column; align-items: center;
  padding: 16px 14px 28px; box-sizing: border-box; overflow-y: auto; color: #fff;
}
.plantel-wrap { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 12px; }
.plantel-hero {
  display: flex; gap: 12px; align-items: center;
  background: var(--fondo-caja-dinamica, var(--bg-panel));
  border: 1.5px solid var(--dorado); border-radius: 16px; padding: 12px;
}
.plantel-hero img { width: 72px; height: 90px; object-fit: cover; border-radius: 10px; background: #000; }
.plantel-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.plantel-stat {
  background: var(--fondo-caja-dinamica, var(--bg-panel));
  border: 1px solid var(--borde-caja-dinamica, var(--primary-light));
  border-radius: 12px; padding: 10px 6px; text-align: center;
}
.plantel-stat b { display: block; color: var(--dorado); font-size: 16px; }
.plantel-stat span { font-size: 9px; color: var(--texto-secundario); font-weight: 700; letter-spacing: 0.3px; }
.plantel-msg {
  background: rgba(0,0,0,0.35); border: 1px solid var(--borde-caja-dinamica, var(--primary-light));
  border-radius: 10px; padding: 10px; text-align: left; cursor: pointer;
}
.plantel-msg.nuevo { border-color: var(--dorado); }
.plantel-grid-jug { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.plantel-chip-jug {
  background: var(--bg-profundo); border: 1px solid var(--primary-light); border-radius: 10px;
  padding: 8px 4px; text-align: center; cursor: pointer; color: #fff;
}
.plantel-chip-jug img { width: 100%; height: 64px; object-fit: cover; border-radius: 8px; margin-bottom: 4px; background: #000; }
.plantel-chip-jug.sel { border-color: var(--dorado); box-shadow: 0 0 10px rgba(243,198,95,0.35); }
.plantel-chip-jug.en-linea {
  border-color: #22c55e !important;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.35);
}
.plantel-badge-activo {
  position: absolute; top: 6px; left: 6px; right: 6px;
  background: #16a34a; color: #fff; font-size: 8px; font-weight: 900;
  letter-spacing: 0.6px; border-radius: 8px; padding: 2px 4px;
  z-index: 2; pointer-events: none;
}

#hub-club-overlay, #hub-admin-overlay {
  position: fixed; inset: 0; z-index: 67100;
  background: var(--fondo-principal-dinamico, var(--bg-profundo));
  display: flex; flex-direction: column; align-items: center;
  padding: 16px 14px 28px; box-sizing: border-box; overflow-y: auto; color: #fff;
}
.ops-card {
  background: var(--fondo-caja-dinamica, var(--bg-panel));
  border: 1.5px solid var(--celeste-atlas); border-radius: 14px; padding: 12px;
}
.ops-card h3 { margin: 0 0 8px; font-size: 14px; color: var(--celeste-atlas); }
.ops-row { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
.ops-row:last-child { border-bottom: none; }

@media (prefers-reduced-motion: reduce) {
  .header-escudo-atlas,
  .btn-accion::after,
  .card-opcion-info::after,
  .voz-aviso-card::after,
  .nav-btn.activo,
  .overlay .modal,
  .barra-fixture::after {
    animation: none !important;
  }
}