/* =========================================================
   CRACKS VISUAL ASSETS FINAL
   assets/img/* based UI system
========================================================= */
body{
  background:
    linear-gradient(180deg, rgba(2,6,10,.72), rgba(2,6,10,.94)),
    url("../img/backgrounds/bg-stadium-night.svg") center top/cover fixed no-repeat;
}
.top .brand{
  width:155px;
  height:44px;
  text-indent:-999px;
  overflow:hidden;
  background:url("../img/brand/logo-cracks-white.svg") left center/contain no-repeat;
}
.top .brand:before{display:none}
.hero.football-hero{
  min-height:220px;
  background:
    linear-gradient(180deg, rgba(2,8,13,.25), rgba(2,8,13,.90)),
    url("../img/backgrounds/bg-stadium-night.svg") center/cover no-repeat;
}
.football-splash{
  background:
    linear-gradient(180deg,rgba(0,0,0,.20),rgba(0,0,0,.95)),
    url("../img/backgrounds/bg-login.svg") center/cover no-repeat !important;
}
.splash-logo{
  width:260px;
  height:86px;
  text-indent:-999px;
  overflow:hidden;
  background:url("../img/brand/logo-cracks.svg") left center/contain no-repeat;
}
.asset-logo-small{
  width:148px;height:44px;display:block;background:url("../img/brand/logo-cracks-white.svg") left center/contain no-repeat;
}
.icon-img{width:22px;height:22px;vertical-align:-5px;margin-right:6px}
.nav-icon{display:block;width:23px;height:23px;margin:0 auto 4px;background:center/contain no-repeat}
.bottom a[href*="championships"]::before{content:"🏆";display:block;font-size:20px}
.bottom a[href*="ranking"]::before{content:"📊";display:block;font-size:20px}
.bottom a[href*="profile"]::before{content:"👤";display:block;font-size:20px}
.bottom a[href="index.php"]::before{content:"⌂";display:block;font-size:21px}
.card.card-ranking{
  background:
    linear-gradient(180deg, rgba(10,20,31,.92), rgba(5,12,20,.94)),
    url("../img/backgrounds/bg-ranking.svg") center/cover no-repeat;
}
.shirt-choice-img{width:64px;height:64px;display:block;margin:0 auto 7px}
.pitch-card{background:url("../img/ui/pitch-mini.svg") center/cover no-repeat;min-height:180px;border-radius:20px;border:1px solid rgba(255,255,255,.14)}
.badge-img{width:22px;height:22px;vertical-align:-5px;margin-right:4px}
.football-section-title{
  font-family:Impact,Arial Black,sans-serif;
  font-style:italic;
  text-transform:uppercase;
  color:#fff;
}
.brand-watermark{
  position:absolute;right:-35px;bottom:-35px;width:180px;height:180px;
  background:url("../img/brand/icon-cracks-ball.svg") center/contain no-repeat;
  opacity:.08;pointer-events:none;
}
.card.has-watermark{position:relative;overflow:hidden}
.card.has-watermark>*{position:relative;z-index:2}
.match-status-open{color:#B8FF00;font-weight:900}
.team-shirt-grid .shirt-tile{
  min-height:116px;display:flex;flex-direction:column;justify-content:center;align-items:center;
}
.rank-card:nth-child(1){border-color:rgba(255,193,7,.55)}
.rank-card:nth-child(2){border-color:rgba(199,206,216,.50)}
.rank-card:nth-child(3){border-color:rgba(200,121,50,.55)}
@media(min-width:800px){
  .app:not(.admin){max-width:520px}
}


/* =========================================================
   CRACKS UI V4 - Pulido real según capturas móviles
   Objetivo: corregir header, bottom nav, espacios y rankings.
========================================================= */

/* Header más limpio: logo único, sin sensación de logo duplicado */
.top .bar{
  min-height:76px;
  padding:14px 20px;
  justify-content:flex-start;
}
.top .brand{
  width:230px;
  max-width:72vw;
  height:52px;
  background-size:contain;
  background-position:left center;
}

/* App container: menos aire muerto, mejor lectura móvil */
.app{
  max-width:520px;
  padding:18px 16px 118px;
}
.hero{
  padding:26px 22px;
  border-radius:28px;
  margin:14px 0;
}
.hero.football-hero{
  min-height:190px;
}
.card{
  border-radius:26px;
  padding:22px;
  margin:16px 0;
}
.stat{
  border-radius:22px;
  padding:18px;
}

/* Tipografías más controladas para que no se desborden */
.h1{
  font-size:clamp(34px, 9vw, 54px);
  line-height:.95;
}
.card h1,
.card h2,
.card h3{
  line-height:1.05;
}

/* Login / registro */
.auth-card{
  padding:28px 22px;
}
.auth-card h1{
  font-size:clamp(38px, 10vw, 56px);
}
input,select,textarea{
  min-height:54px;
  border-radius:18px;
  font-size:16px;
}
.btn{
  min-height:54px;
  border-radius:16px;
  font-size:15px;
  letter-spacing:.5px;
}

/* Bottom nav corregido a 5 ítems. Antes estaba en 4 columnas y Perfil bajaba. */
.bottom{
  display:grid;
  grid-template-columns:repeat(5, 1fr) !important;
  align-items:center;
  min-height:92px;
  padding:14px 8px 12px;
  border-radius:32px 32px 0 0;
}
.bottom a{
  min-width:0;
  font-size:11px;
  line-height:1.1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  overflow:hidden;
  white-space:nowrap;
}
.bottom a:nth-child(3){
  width:62px;
  height:62px;
  margin-top:-32px;
}
.bottom a:nth-child(3)::before{
  font-size:29px;
}

/* Quitar emojis gigantes inconsistentes del nav y hacerlos más sobrios */
.bottom a[href="index.php"]::before,
.bottom a[href*="championships"]::before,
.bottom a[href*="ranking"]::before,
.bottom a[href*="profile"]::before{
  display:block;
  font-size:20px;
  line-height:1;
  margin-bottom:2px;
}

/* Acciones/tabs: que no se transformen en botones gigantes */
.actions{
  display:flex;
  flex-wrap:nowrap;
  gap:8px;
  overflow-x:auto;
  padding:3px 0 8px;
  -webkit-overflow-scrolling:touch;
}
.actions .btn,
.actions a.btn{
  flex:0 0 auto;
  min-height:42px;
  padding:9px 14px;
  font-size:12px;
  border-radius:14px;
}

/* Rankings más parecidos a app deportiva compacta */
.card.card-ranking{
  padding:14px;
}
.rank-card{
  grid-template-columns:52px 1fr;
  gap:12px;
  padding:12px;
  border-radius:18px;
  margin:10px 0;
}
.rank-card > .player-photo,
.rank-card > .avatar{
  width:48px !important;
  height:48px !important;
}
.rank-card b{
  font-size:18px;
}
.rank-metrics{
  grid-template-columns:repeat(5, minmax(48px,1fr));
  gap:6px;
  margin-top:8px;
}
.rank-metrics span{
  padding:7px 5px;
  border-radius:12px;
  font-size:10px;
}
.rank-metrics b{
  font-size:16px;
  line-height:1.05;
}
.rank-metrics .golesr-main,
.rank-metrics .crack-main{
  grid-column:span 2;
}
.rank-metrics .golesr-main b,
.rank-metrics .crack-main b{
  font-size:22px;
}

/* Campeonatos/pichangas: cards más funcionales y menos enormes */
.fixture-card{
  grid-template-columns:1fr;
}
.fixture-card .btn{
  width:100%;
}

/* Evitar espacios vacíos muy grandes cuando no hay datos */
.app:has(.hero + .grid:last-child){
  min-height:100vh;
}

/* Ajustes para pantallas muy angostas */
@media(max-width:420px){
  .top .brand{width:190px;height:46px}
  .top .bar{min-height:68px;padding:12px 16px}
  .app{padding-left:14px;padding-right:14px}
  .hero{padding:22px 18px}
  .card{padding:18px}
  .rank-metrics{grid-template-columns:repeat(3, 1fr)}
  .rank-metrics .golesr-main,
  .rank-metrics .crack-main{grid-column:span 1}
  .bottom a{font-size:10px}
}


/* =========================================================
   CRACKS UI V5 - Pulido real
   Header compacto, nav SVG, ranking compacto, home útil
========================================================= */

/* Header compacto y logo más integrado */
.top .bar{
  min-height:66px !important;
  padding:10px 18px !important;
}
.top .brand{
  width:210px !important;
  height:48px !important;
  max-width:76vw;
  background-image:url("../img/brand/logo-cracks-white.svg") !important;
}

/* Layout con menos aire superior y suficiente espacio inferior */
.app{
  padding-top:14px !important;
  padding-bottom:132px !important;
}

/* Hero más compacto en móvil */
.hero{
  margin:12px 0 !important;
  padding:22px 20px !important;
}
.hero.football-hero{
  min-height:170px !important;
}
.hero .h1{
  font-size:clamp(34px, 8.8vw, 48px) !important;
}
.hero p{
  font-size:clamp(17px, 4.3vw, 22px);
}

/* Home: tarjetas rápidas más útiles y compactas */
.quick-home-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  margin:14px 0;
}
.quick-home-grid .stat{
  min-height:104px;
}
.empty-state-actions{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

/* Bottom nav con SVG/estilo profesional */
.bottom{
  min-height:86px !important;
  padding:12px 8px 10px !important;
  box-shadow:0 -18px 50px rgba(0,0,0,.7), 0 0 30px rgba(156,255,0,.08);
}
.bottom a{
  font-size:10px !important;
  font-weight:900 !important;
  letter-spacing:.1px;
  color:#dce7df !important;
}
.bottom a::before{
  content:"" !important;
  width:24px;
  height:24px;
  display:block !important;
  background:center/contain no-repeat;
  margin:0 auto 5px;
  filter:drop-shadow(0 0 4px rgba(156,255,0,.12));
}
.bottom a[href="index.php"]::before{background-image:url("../img/icons/icon-home.svg")}
.bottom a[href*="championships"]::before{background-image:url("../img/icons/icon-championships.svg")}
.bottom a[href*="ranking"]::before{background-image:url("../img/icons/icon-ranking.svg")}
.bottom a[href*="profile"]::before{background-image:url("../img/icons/icon-user.svg")}

.bottom a:nth-child(3){
  width:56px !important;
  height:56px !important;
  margin-top:-26px !important;
  background:linear-gradient(180deg,#c9ff00,#7dff00) !important;
}
.bottom a:nth-child(3)::before{
  content:"" !important;
  width:34px !important;
  height:34px !important;
  margin:0 !important;
  background:url("../img/brand/icon-cracks-ball.svg") center/contain no-repeat !important;
  filter:none !important;
}

/* Tabs Ranking: no cortados y con activo claro */
.actions{
  margin:8px 0 10px !important;
  scrollbar-width:thin;
  scrollbar-color:rgba(156,255,0,.45) rgba(255,255,255,.09);
}
.actions::-webkit-scrollbar{height:5px}
.actions::-webkit-scrollbar-thumb{background:rgba(156,255,0,.45);border-radius:999px}
.actions::-webkit-scrollbar-track{background:rgba(255,255,255,.08);border-radius:999px}
.actions .btn{
  border-radius:16px !important;
  min-width:max-content;
}
.actions .btn.active-tab{
  background:linear-gradient(180deg,#c9ff00,#8dff00) !important;
  color:#071018 !important;
  border-color:transparent !important;
}

/* Ranking compacto */
.card.card-ranking{
  padding:12px !important;
  border-radius:24px !important;
}
.rank-card{
  grid-template-columns:46px 1fr !important;
  gap:10px !important;
  padding:10px !important;
  margin:8px 0 !important;
  border-radius:16px !important;
}
.rank-card > .player-photo,
.rank-card > .avatar{
  width:42px !important;
  height:42px !important;
  font-size:18px !important;
}
.rank-card b{
  font-size:16px !important;
}
.rank-metrics{
  grid-template-columns:repeat(5, minmax(44px,1fr)) !important;
  gap:5px !important;
}
.rank-metrics span{
  padding:6px 4px !important;
  border-radius:10px !important;
  font-size:9.5px !important;
}
.rank-metrics b{
  font-size:15px !important;
}
.rank-metrics .golesr-main b,
.rank-metrics .crack-main b{
  font-size:19px !important;
}

/* Perfil */
.detail-hero{
  grid-template-columns:74px 1fr !important;
}
.detail-hero .player-photo,
.detail-hero .avatar{
  width:72px !important;
  height:72px !important;
}
form button.btn.full{
  margin-bottom:22px;
}
input[type="file"]{
  font-size:14px;
}

/* CTA cards */
.cta-card{
  border:1px solid rgba(156,255,0,.25);
  background:
    linear-gradient(180deg,rgba(14,25,34,.94),rgba(4,11,17,.96)),
    radial-gradient(circle at 90% 20%,rgba(156,255,0,.12),transparent 28%);
}

/* Pantallas pequeñas */
@media(max-width:420px){
  .top .brand{width:180px !important;height:42px !important}
  .bottom{min-height:82px !important}
  .bottom a{font-size:9.5px !important}
  .bottom a:nth-child(3){width:52px !important;height:52px !important}
  .rank-metrics{grid-template-columns:repeat(3,1fr) !important}
  .rank-metrics span{font-size:9px !important}
}


/* =========================================================
   CRACKS UI V4 - Pantallas aprobadas
   Basado en: jugadores, pichangas, campeonatos y retos.
   Importante: no existen equipos fijos.
========================================================= */

:root{
  --cr-lime:#a8ff00;
  --cr-lime-2:#ccff00;
  --cr-cyan:#00d6ff;
  --cr-red:#ff3939;
  --cr-bg:#05090d;
  --cr-panel:#0b1117;
  --cr-panel-2:#101820;
  --cr-line:rgba(168,255,0,.34);
  --cr-line-soft:rgba(255,255,255,.12);
  --cr-text:#ffffff;
  --cr-muted:rgba(235,245,239,.68);
}

body{
  background:
    linear-gradient(180deg, rgba(2,6,10,.55), rgba(2,6,10,.96)),
    url("../img/backgrounds/bg-stadium-night.svg") center top/cover fixed no-repeat !important;
  color:var(--cr-text);
}

.app{
  width:min(100%, 480px);
  max-width:480px !important;
  padding:18px 16px 116px !important;
}

.top{
  border-bottom:0 !important;
  background:linear-gradient(180deg, rgba(4,9,15,.92), rgba(4,9,15,.48)) !important;
}
.top .bar{
  width:min(100%,480px);
  margin:auto;
  min-height:76px !important;
  padding:14px 16px !important;
  justify-content:space-between !important;
}
.top .brand{
  width:176px !important;
  height:44px !important;
  max-width:58vw;
  background:url("../img/brand/logo-cracks-white.svg") left center/contain no-repeat !important;
  text-indent:-9999px;
}
.top .brand:before{display:none !important}
.top .nav{
  gap:8px !important;
}
.top .nav a{
  width:38px;
  height:38px;
  border-radius:999px;
  padding:0 !important;
  font-size:0 !important;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.04);
}
.top .nav a[href*="profile"]::before{content:"";width:22px;height:22px;background:url("../img/icons/icon-user.svg") center/contain no-repeat}
.top .nav a[href*="ranking"]::before{content:"";width:22px;height:22px;background:url("../img/icons/icon-ranking.svg") center/contain no-repeat}
.top .nav a[href*="admin"]::before{content:"A";font-size:13px;color:var(--cr-lime);font-weight:900}
.top .nav a[href="index.php"]::before{content:"";width:22px;height:22px;background:url("../img/icons/icon-home.svg") center/contain no-repeat}
.top .nav a[href*="logout"]::before{content:"×";font-size:24px;color:#fff}

.v4-screen{
  min-height:calc(100vh - 106px);
}

.v4-hero{
  position:relative;
  overflow:hidden;
  border:1px solid var(--cr-line);
  border-radius:26px;
  padding:24px;
  background:
    linear-gradient(180deg, rgba(5,12,18,.22), rgba(5,12,18,.88)),
    url("../img/backgrounds/bg-stadium-night.svg") center/cover no-repeat;
  box-shadow:0 24px 65px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.05);
}
.v4-hero:after{
  content:"";
  position:absolute;
  right:-40px;
  bottom:-50px;
  width:190px;
  height:190px;
  background:url("../img/brand/icon-cracks-ball.svg") center/contain no-repeat;
  opacity:.20;
  filter:drop-shadow(0 0 22px rgba(168,255,0,.35));
}
.v4-hero > *{position:relative;z-index:2}
.v4-title{
  font-family:Impact,Arial Black,sans-serif;
  font-style:italic;
  text-transform:uppercase;
  letter-spacing:.3px;
  font-size:clamp(38px,11vw,64px);
  line-height:.92;
  margin:0 0 12px;
  text-shadow:0 5px 18px rgba(0,0,0,.72);
}
.v4-title .lime{color:var(--cr-lime)}
.v4-subtitle{
  color:var(--cr-muted);
  font-size:19px;
  line-height:1.35;
  margin:0;
}
.v4-section-title{
  color:var(--cr-lime);
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.7px;
  font-size:20px;
  margin:24px 0 12px;
}
.v4-card{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  border-radius:24px;
  padding:20px;
  margin:16px 0;
  background:
    linear-gradient(180deg,rgba(13,22,30,.94),rgba(4,9,14,.96));
  box-shadow:0 18px 55px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.04);
}
.v4-card.lime{
  border-color:var(--cr-line);
  box-shadow:0 18px 55px rgba(0,0,0,.38),0 0 32px rgba(168,255,0,.05);
}
.v4-card.bg-field{
  background:
    linear-gradient(180deg,rgba(3,8,12,.54),rgba(3,8,12,.94)),
    url("../img/backgrounds/bg-stadium-night.svg") center/cover no-repeat;
}
.v4-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.v4-icon-circle{
  width:56px;
  height:56px;
  border-radius:999px;
  display:grid;
  place-items:center;
  border:1px solid rgba(168,255,0,.55);
  background:radial-gradient(circle at center,rgba(168,255,0,.18),rgba(10,20,12,.78));
  box-shadow:0 0 24px rgba(168,255,0,.18);
}
.v4-icon-circle img{width:30px;height:30px}
.v4-selector{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:15px 18px;
  border:1px solid var(--cr-line);
  border-radius:18px;
  background:rgba(4,10,14,.76);
  margin:12px 0 22px;
}
.v4-selector strong{font-size:18px}
.v4-selector span{color:var(--cr-muted);font-size:12px}
.v4-selector .cup{width:24px;height:24px;background:url("../img/icons/icon-championships.svg") center/contain no-repeat;flex:0 0 auto}
.v4-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 11px;
  border-radius:999px;
  border:1px solid rgba(168,255,0,.45);
  background:rgba(168,255,0,.10);
  color:var(--cr-lime);
  font-weight:900;
  font-size:12px;
}
.v4-pill.blue{border-color:rgba(0,170,255,.45);background:rgba(0,170,255,.12);color:#61cfff}
.v4-pill.gold{border-color:rgba(255,193,7,.55);background:rgba(255,193,7,.11);color:#ffc107}
.v4-pill.red{border-color:rgba(255,57,57,.55);background:rgba(255,57,57,.10);color:#ff5252}
.v4-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:56px;
  width:100%;
  border-radius:14px;
  text-decoration:none;
  border:0;
  cursor:pointer;
  background:linear-gradient(180deg,#c7ff00,#83f500);
  color:#081014;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.7px;
  box-shadow:0 10px 32px rgba(168,255,0,.20);
}
.v4-btn.secondary{
  background:rgba(5,12,18,.78);
  color:#fff;
  border:1px solid rgba(168,255,0,.45);
  box-shadow:none;
}
.v4-btn.danger{
  background:rgba(0,0,0,.28);
  color:var(--cr-red);
  border:1px solid var(--cr-red);
  box-shadow:none;
}
.v4-btn.cyan{
  background:linear-gradient(180deg,#16e6ff,#0aa1c2);
  color:#041015;
}
.v4-btn-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.v4-metric-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  border-top:1px solid rgba(255,255,255,.14);
  border-bottom:1px solid rgba(255,255,255,.14);
  padding:16px 0;
}
.v4-metric{
  text-align:center;
  border-right:1px solid rgba(255,255,255,.12);
}
.v4-metric:last-child{border-right:0}
.v4-metric img{width:30px;height:30px;margin-bottom:6px}
.v4-metric small{display:block;color:var(--cr-muted);text-transform:uppercase;font-size:11px;letter-spacing:.5px}
.v4-metric b{display:block;font-size:26px;line-height:1.1;margin-top:5px}
.v4-mini-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.v4-mini-stat{
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:12px;
  background:rgba(0,0,0,.22);
}
.v4-mini-stat small{display:block;color:var(--cr-muted);text-transform:uppercase;font-size:10px}
.v4-mini-stat b{font-size:18px}
.v4-countdown{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  margin:16px 0;
}
.v4-countbox{
  border:1px solid rgba(255,255,255,.16);
  border-radius:14px;
  text-align:center;
  padding:12px 6px;
  background:rgba(0,0,0,.28);
}
.v4-countbox b{display:block;font-size:28px;color:var(--cr-lime)}
.v4-countbox small{font-size:10px;color:var(--cr-muted);text-transform:uppercase}
.v4-live-list{
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  overflow:hidden;
  background:rgba(0,0,0,.25);
}
.v4-live-row{
  display:grid;
  grid-template-columns:42px 1fr auto;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.v4-live-row:last-child{border-bottom:0}
.v4-num{
  width:28px;height:28px;border-radius:9px;
  display:grid;place-items:center;
  color:var(--cr-lime);
  background:rgba(168,255,0,.12);
  border:1px solid rgba(168,255,0,.38);
  font-weight:900;
}
.v4-player{
  display:flex;
  align-items:center;
  gap:10px;
}
.v4-player .player-photo,.v4-player .avatar{width:34px!important;height:34px!important}
.v4-time{
  color:#e8eee9;
  font-variant-numeric:tabular-nums;
  font-size:13px;
}
.v4-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  padding:5px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  background:rgba(0,0,0,.25);
  margin:14px 0;
}
.v4-tabs a{
  text-align:center;
  padding:12px 8px;
  border-radius:12px;
  color:var(--cr-muted);
  text-decoration:none;
  font-weight:900;
}
.v4-tabs a.active{
  color:var(--cr-lime);
  background:rgba(168,255,0,.12);
  border:1px solid rgba(168,255,0,.45);
}
.v4-tabs.four{display:flex;overflow-x:auto}
.v4-tabs.four a{flex:0 0 auto;min-width:120px}
.v4-rank-card{
  display:grid;
  grid-template-columns:48px 1fr;
  gap:12px;
  align-items:center;
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  padding:12px;
  margin:10px 0;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));
}
.v4-rank-card.top{
  border-color:rgba(168,255,0,.55);
  box-shadow:inset 4px 0 0 rgba(168,255,0,.7);
}
.v4-rank-card .avatar,.v4-rank-card .player-photo{
  width:44px!important;height:44px!important;
}
.v4-rank-name{font-weight:900;font-size:18px}
.v4-rank-metrics{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:6px;
  margin-top:8px;
}
.v4-rank-metrics span{
  text-align:center;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  padding:7px 3px;
  background:rgba(0,0,0,.25);
  color:var(--cr-muted);
  font-size:10px;
}
.v4-rank-metrics b{
  display:block;
  color:#fff;
  font-size:15px;
}
.v4-rank-metrics .hi b{color:var(--cr-lime)}
.v4-duel-card{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:12px;
  align-items:center;
  text-align:center;
  border:1px solid rgba(168,255,0,.30);
  border-radius:18px;
  padding:14px;
  margin:12px 0;
  background:rgba(0,0,0,.28);
}
.v4-duel-vs{
  color:var(--cr-lime);
  font-weight:1000;
  font-size:18px;
}
.v4-form label{
  display:block;
  color:var(--cr-lime);
  text-transform:uppercase;
  font-weight:900;
  letter-spacing:.5px;
  font-size:12px;
  margin:14px 0 7px;
}
.v4-form input,.v4-form select,.v4-form textarea{
  width:100%;
  min-height:48px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.20);
  background:rgba(0,0,0,.28);
  color:#fff;
  padding:12px 14px;
}
.v4-position-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
}
.v4-position-card{
  border:1px solid rgba(168,255,0,.42);
  border-radius:14px;
  padding:13px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:rgba(0,0,0,.25);
  color:#fff;
  font-weight:800;
}
.v4-position-card input{width:auto;min-height:auto}
.v4-auth-screen{
  min-height:calc(100vh - 36px);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding-bottom:24px;
}
.v4-auth-logo{
  width:240px;
  height:142px;
  margin:40px auto 20px;
  background:url("../img/brand/logo-cracks.svg") center/contain no-repeat;
  filter:drop-shadow(0 0 24px rgba(168,255,0,.22));
}
.v4-auth-tagline{
  font-size:28px;
  font-weight:900;
  line-height:1.35;
  margin:40px 0 80px;
}
.v4-auth-card{
  border:1px solid rgba(255,255,255,.18);
  border-radius:28px;
  padding:22px;
  background:linear-gradient(180deg,rgba(10,19,27,.92),rgba(4,9,14,.96));
}
.v4-social{
  display:flex;
  justify-content:center;
  gap:22px;
  align-items:center;
  margin:22px 0;
}
.v4-social span{
  width:54px;height:54px;border-radius:999px;
  background:#fff;color:#111;
  display:grid;place-items:center;
  font-weight:900;
  font-size:22px;
  border:2px solid rgba(168,255,0,.65);
}
.v4-bottom-note{text-align:center;color:var(--cr-muted);font-size:15px}
.v4-bottom-note strong{color:var(--cr-lime)}
.v4-bottom{
  width:min(100%,480px);
  left:50%!important;
  transform:translateX(-50%);
  display:grid!important;
  grid-template-columns:repeat(5,1fr)!important;
  align-items:end;
  padding:11px 8px 10px!important;
  min-height:84px!important;
  background:rgba(4,8,12,.92)!important;
  border:1px solid rgba(255,255,255,.14)!important;
  border-bottom:0!important;
  border-radius:30px 30px 0 0!important;
  backdrop-filter:blur(16px);
}
.bottom.v4-bottom a{
  color:rgba(255,255,255,.62)!important;
  text-decoration:none;
  font-size:10px!important;
  font-weight:800!important;
}
.bottom.v4-bottom a.active{
  color:var(--cr-lime)!important;
}
.bottom.v4-bottom a:nth-child(3){
  width:58px!important;height:58px!important;margin-top:-24px!important;
  box-shadow:0 0 0 8px rgba(168,255,0,.10),0 0 34px rgba(168,255,0,.34);
}
.bottom.v4-bottom a::before{
  filter:none!important;
}
@media(max-width:420px){
  .app{padding-left:12px!important;padding-right:12px!important}
  .v4-title{font-size:clamp(34px,10vw,50px)}
  .v4-metric-grid{grid-template-columns:repeat(2,1fr);row-gap:14px}
  .v4-metric:nth-child(2){border-right:0}
  .v4-rank-metrics{grid-template-columns:repeat(3,1fr)}
  .v4-countdown{gap:6px}
  .v4-countbox b{font-size:23px}
}


/* =========================================================
   FIX HEADER NAV MOBILE
   div.bar div.nav: visible en móvil + iconos Notificaciones/Perfil
========================================================= */

.top .bar{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
}

.top .bar .nav.header-actions,
.top .bar div.nav.header-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:8px !important;
  flex:0 0 auto !important;
  opacity:1 !important;
  visibility:visible !important;
}

.top .bar .nav.header-actions .nav-icon-btn{
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  border-radius:999px !important;
  border:1px solid rgba(168,255,0,.32) !important;
  background:rgba(6,14,20,.72) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  margin:0 !important;
  font-size:0 !important;
  line-height:1 !important;
  text-decoration:none !important;
  box-shadow:0 0 18px rgba(168,255,0,.06), inset 0 0 0 1px rgba(255,255,255,.04);
}

.top .bar .nav.header-actions .nav-icon-btn span{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
  white-space:nowrap !important;
}

.top .bar .nav.header-actions .nav-icon-btn::before{
  content:"" !important;
  display:block !important;
  width:23px !important;
  height:23px !important;
  background:center/contain no-repeat !important;
  filter:drop-shadow(0 0 5px rgba(168,255,0,.22)) !important;
}

.top .bar .nav.header-actions .nav-notifications::before{
  background-image:url("../img/icons/icon-notifications.svg") !important;
}

.top .bar .nav.header-actions .nav-profile::before{
  background-image:url("../img/icons/icon-user.svg") !important;
}

.top .bar .nav.header-actions .nav-admin::before{
  content:"A" !important;
  width:auto !important;
  height:auto !important;
  color:var(--cr-lime) !important;
  font-size:13px !important;
  font-weight:1000 !important;
  background:none !important;
}

@media(max-width:760px){
  .top .bar .nav.header-actions,
  .top .bar div.nav.header-actions{
    display:flex !important;
  }
}

@media(max-width:420px){
  .top .bar{
    padding-left:12px !important;
    padding-right:12px !important;
  }
  .top .brand{
    width:155px !important;
    max-width:52vw !important;
  }
  .top .bar .nav.header-actions .nav-icon-btn{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
  }
  .top .bar .nav.header-actions .nav-icon-btn::before{
    width:21px !important;
    height:21px !important;
  }
}


/* Header salir */
.top .bar .nav.header-actions .nav-logout{
  border-color:rgba(255,82,82,.38) !important;
  background:rgba(255,82,82,.08) !important;
}
.top .bar .nav.header-actions .nav-logout::before{
  background-image:url("../img/icons/icon-logout.svg") !important;
  filter:drop-shadow(0 0 5px rgba(255,82,82,.22)) !important;
}

@media(max-width:420px){
  .top .bar .nav.header-actions{
    gap:6px !important;
  }
  .top .bar .nav.header-actions .nav-icon-btn{
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
  }
  .top .bar .nav.header-actions .nav-icon-btn::before{
    width:20px !important;
    height:20px !important;
  }
}


/* =========================================================
   INDEX.PHP = SPLASH
   index.php público debe ser pantalla splash, login separado.
========================================================= */
body.public-splash .top{
  display:none !important;
}
body.public-splash .app{
  padding:0 !important;
  max-width:none !important;
  width:100% !important;
}
.cracks-splash-screen{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  background:#02070d;
}
.cracks-splash-bg{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.88)),
    radial-gradient(circle at 50% 55%,rgba(168,255,0,.32),transparent 20%),
    url("../img/backgrounds/bg-login.svg") center/cover no-repeat;
  transform:scale(1.02);
}
.cracks-splash-bg:after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 80% 12%,rgba(168,255,0,.18),transparent 20%),
    linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.72));
}
.cracks-splash-content{
  position:relative;
  z-index:2;
  min-height:100vh;
  width:min(100%,480px);
  margin:auto;
  padding:42px 22px 34px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.cracks-splash-logo{
  width:260px;
  height:120px;
  margin:0 auto;
  background:url("../img/brand/logo-cracks.svg") center/contain no-repeat;
  filter:drop-shadow(0 0 30px rgba(168,255,0,.24));
}
.cracks-splash-copy{
  margin-top:auto;
  margin-bottom:28px;
}
.cracks-splash-copy h1{
  font-family:Impact,Arial Black,sans-serif;
  text-transform:uppercase;
  font-style:italic;
  font-size:clamp(58px,18vw,92px);
  line-height:.88;
  margin:0 0 18px;
  letter-spacing:-1px;
  color:#fff;
  text-shadow:0 12px 35px rgba(0,0,0,.68),0 0 20px rgba(168,255,0,.10);
}
.cracks-splash-copy p{
  color:rgba(255,255,255,.78);
  font-size:20px;
  line-height:1.35;
  max-width:360px;
}
.cracks-splash-actions{
  display:grid;
  gap:12px;
}
.cracks-splash-features{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:20px;
  flex-wrap:wrap;
}
.cracks-splash-features span{
  padding:7px 11px;
  border-radius:999px;
  border:1px solid rgba(168,255,0,.36);
  background:rgba(168,255,0,.10);
  color:var(--cr-lime);
  font-weight:900;
  font-size:12px;
}
@media(max-width:420px){
  .cracks-splash-content{
    padding:34px 18px 26px;
  }
  .cracks-splash-logo{
    width:220px;
    height:100px;
  }
}


/* Splash sin chips inferiores */
.cracks-splash-features{
  display:none !important;
}


/* =========================================================
   SPLASH FINAL: logo y fondo separados en imágenes
   Logo: assets/img/brand/cracks-splash-logo.webp
   Fondo: assets/img/backgrounds/cracks-splash-bg.webp
========================================================= */
body.public-splash .top{
  display:none !important;
}
body.public-splash .app{
  padding:0 !important;
  max-width:none !important;
  width:100% !important;
}
.cracks-splash-screen{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  background:#02070d;
}
.cracks-splash-bg{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,0,0,.76)),
    url("../img/backgrounds/cracks-splash-bg.webp") center center/cover no-repeat !important;
  transform:none !important;
}
.cracks-splash-bg:after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 38%, rgba(168,255,0,.10), transparent 28%),
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.82));
}
.cracks-splash-content{
  position:relative;
  z-index:2;
  min-height:100vh;
  width:min(100%,480px);
  margin:auto;
  padding:42px 22px 34px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.cracks-splash-logo{
  width:min(82vw, 360px) !important;
  height:210px !important;
  margin:12px auto 0 !important;
  background:url("../img/brand/cracks-splash-logo.png") center center/contain no-repeat !important;
  filter:drop-shadow(0 0 30px rgba(168,255,0,.28));
}
.cracks-splash-copy{
  margin-top:auto;
  margin-bottom:28px;
}
.cracks-splash-copy h1{
  font-family:Impact,Arial Black,sans-serif;
  text-transform:uppercase;
  font-style:italic;
  font-weight: 300;
  font-size:clamp(48px,14vw,62px);
  line-height:1.02;
  margin:0 0 16px;
  color:#fff;
  text-shadow:0 12px 35px rgba(0,0,0,.74);
}
.cracks-splash-copy p{
  color:rgba(255,255,255,.82);
  font-size:19px;
  line-height:1.35;
  max-width:360px;
}
.cracks-splash-actions{
  display:grid;
  gap:12px;
}
.cracks-splash-features{
  display:none !important;
}
@media(max-width:420px){
  .cracks-splash-content{
    padding:30px 18px 26px;
  }
  .cracks-splash-logo{
    width:min(86vw, 310px) !important;
    height:178px !important;
  }
  .cracks-splash-copy h1{
    font-size:clamp(42px,13vw,62px);
  }
}


/* =========================================================
   LOGOS OFICIALES USUARIO
   Splash: logo-splash.png
   Header interno: logo-header.png
========================================================= */

.cracks-splash-logo{
  width:min(82vw, 330px) !important;
  height:190px !important;
  margin:12px auto 0 !important;
  background:url("../img/brand/logo-splash.png") center center/contain no-repeat !important;
  filter:drop-shadow(0 0 22px rgba(168,255,0,.22));
}

.top .brand{
  width:240px !important;
  height:58px !important;
  max-width:62vw !important;
  background:url("../img/brand/logo-header.png") left center/contain no-repeat !important;
}

.asset-logo-small{
  background:url("../img/brand/logo-header.png") left center/contain no-repeat !important;
}

@media(max-width:420px){
  .cracks-splash-logo{
    width:min(86vw, 300px) !important;
    height:170px !important;
  }
  .top .brand{
    width:190px !important;
    height:50px !important;
    max-width:54vw !important;
  }
}

@media(max-width:360px){
  .top .brand{
    width:165px !important;
    max-width:50vw !important;
  }
}


/* =========================================================
   AJUSTE FINO logo-header.png
   Forzar uso correcto del logo horizontal en header y secciones internas
========================================================= */

.top .brand,
.asset-logo-small{
  text-indent:-9999px !important;
  overflow:hidden !important;
  display:block !important;
  background-image:url("../img/brand/logo-header.png") !important;
  background-repeat:no-repeat !important;
  background-position:left center !important;
  background-size:100% auto !important;
}

/* Header superior interno */
.top .brand{
  width:226px !important;
  height:55px !important;
  max-width:58vw !important;
  min-width:226px !important;
  flex:0 0 226px !important;
}

/* Logo secundario en login / registro / pantallas de acceso */
/* Variante compacta si existe */
.asset-logo-small{
  width:220px !important;
  height:54px !important;
}

@media(max-width:420px){
  .top .brand{
    width:198px !important;
    min-width:198px !important;
    height:48px !important;
    max-width:52vw !important;
    flex:0 0 198px !important;
  }
  .asset-logo-small{
    width:198px !important;
    height:48px !important;
  }
}

@media(max-width:360px){
  .top .brand{
    width:184px !important;
    min-width:184px !important;
    height:44px !important;
    max-width:50vw !important;
    flex:0 0 184px !important;
  }
  }




/* =========================================================
   LOGO ÚNICO EN HEADER
   Se eliminó el logo interno duplicado. El logo interno vive solo en:
   <a class="brand" href="index.php" aria-label="Cracks">Cracks</a>
========================================================= */
.top .brand{
  text-indent:-9999px !important;
  overflow:hidden !important;
  display:block !important;
  width:226px !important;
  height:55px !important;
  min-width:226px !important;
  flex:0 0 226px !important;
  max-width:58vw !important;
  background:url("../img/brand/logo-header.png") left center/contain no-repeat !important;
}

@media(max-width:420px){
  .top .brand{
    width:198px !important;
    min-width:198px !important;
    height:48px !important;
    flex:0 0 198px !important;
    max-width:52vw !important;
  }
}

@media(max-width:360px){
  .top .brand{
    width:184px !important;
    min-width:184px !important;
    height:44px !important;
    flex:0 0 184px !important;
    max-width:50vw !important;
  }
}


/* =========================================================
   LOGIN / REGISTRO / RECUPERAR CON FONDO TIPO SPLASH
========================================================= */

body.auth-bg{
  background:#02070d !important;
}

body.auth-bg .top{
  display:none !important;
}

body.auth-bg::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(180deg,rgba(0,0,0,.16),rgba(0,0,0,.84)),
    url("../img/backgrounds/cracks-splash-bg.webp") center center/cover no-repeat;
}

body.auth-bg::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(circle at 50% 30%,rgba(168,255,0,.12),transparent 28%),
    linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,0,0,.58));
  pointer-events:none;
}

.auth-panel-page{
  width:min(100%,480px);
  min-height:100vh;
  margin:auto;
  padding:34px 18px 34px;
}

.auth-panel-logo-wrap{
  display:flex;
  justify-content:center;
  margin:4px 0 24px;
}

.auth-page-brand{
  text-indent:-9999px !important;
  overflow:hidden !important;
  display:block !important;
  width:260px !important;
  height:64px !important;
  background:url("../img/brand/logo-header.png") center center/contain no-repeat !important;
}

.auth-panel-page .v4-hero{
  margin-bottom:16px;
  background:
    linear-gradient(180deg,rgba(5,12,18,.56),rgba(5,12,18,.86)),
    url("../img/backgrounds/cracks-splash-bg.webp") center center/cover no-repeat !important;
}

.auth-panel-card{
  backdrop-filter:blur(12px);
  background:
    linear-gradient(180deg,rgba(9,17,24,.84),rgba(4,9,14,.94)) !important;
}

@media(max-width:420px){
  .auth-panel-page{
    padding:26px 14px 30px;
  }
  .auth-page-brand{
    width:220px !important;
    height:56px !important;
  }
}


/* =========================================================
   AUTH CON HEADER VISIBLE
   Login / Registro / Recuperación mantienen header superior
   y conservan fondo similar al splash.
========================================================= */

/* Anular reglas anteriores que ocultaban header en auth */
body.auth-bg .top{
  display:block !important;
}

/* Fondo tipo splash para pantallas públicas de acceso sin ocultar header */
body:has(.auth-panel-page){
  background:
    linear-gradient(180deg,rgba(0,0,0,.16),rgba(0,0,0,.84)),
    url("../img/backgrounds/cracks-splash-bg.webp") center center/cover fixed no-repeat !important;
}

/* Mantener ancho app normal bajo header */
/* Header visible en login / registro / recuperación */
body:has(.auth-panel-page) .top{
  display:block !important;
  background:linear-gradient(180deg, rgba(4,9,15,.92), rgba(4,9,15,.55)) !important;
}

/* Paneles auth con altura de app, no fullscreen tapando header */
.auth-panel-page{
  min-height:calc(100vh - 96px) !important;
  padding:18px 0 34px !important;
}

.auth-panel-logo-wrap{
  display:none !important;
}

.auth-panel-page .v4-hero{
  margin-top:0 !important;
}


/* =========================================================
   FIX BACKGROUND LOGIN / REGISTER / FORGOT
   Fondo splash visible con header superior activo.
========================================================= */

body.auth-bg{
  background:
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.82)),
    url("../img/backgrounds/cracks-splash-bg.webp") center center/cover fixed no-repeat !important;
}

body.auth-bg .auth-panel-page{
  position:relative;
  min-height:calc(100vh - 96px) !important;
  padding:18px 0 34px !important;
  background:
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.38)),
    url("../img/backgrounds/cracks-splash-bg.webp") center center/cover no-repeat !important;
  border-radius:28px;
  overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}

body.auth-bg .auth-panel-page::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 32%, rgba(168,255,0,.16), transparent 28%),
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.60));
  pointer-events:none;
  z-index:0;
}

body.auth-bg .auth-panel-page > *{
  position:relative;
  z-index:1;
}

body.auth-bg .auth-panel-logo-wrap{
  display:none !important;
}

body.auth-bg .auth-panel-card,
body.auth-bg .v4-card{
  backdrop-filter:blur(12px);
}

body.auth-bg .v4-hero{
  background:
    linear-gradient(180deg,rgba(5,12,18,.50),rgba(5,12,18,.82)),
    url("../img/backgrounds/cracks-splash-bg.webp") center center/cover no-repeat !important;
}


/* =========================================================
   AUTH / SPLASH BUTTONS + LINKS UNIFICADOS
   Aplica a:
   - index.php
   - index.php?p=login
   - index.php?p=register
   - index.php?p=forgot_password
========================================================= */

.public-splash .auth-btn,
.auth-bg .auth-btn,
.cracks-splash-screen .v4-btn,
.auth-panel-page .v4-btn{
  position:relative;
  overflow:hidden;
  min-height:56px !important;
  width:100%;
  border-radius:16px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px;
  padding:0 20px !important;
  text-decoration:none !important;
  text-transform:uppercase;
  letter-spacing:.75px;
  font-size:14px !important;
  font-weight:1000 !important;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease,
    color .18s ease,
    opacity .18s ease;
}

.public-splash .auth-btn-primary,
.auth-bg .auth-btn-primary,
.cracks-splash-screen .v4-btn:not(.secondary),
.auth-panel-page .v4-btn:not(.secondary){
  color:#071018 !important;
  border:1px solid rgba(205,255,46,.85) !important;
  background:
    linear-gradient(180deg,#d8ff39 0%,#a8ff00 50%,#79e900 100%) !important;
  box-shadow:
    0 14px 36px rgba(168,255,0,.24),
    inset 0 1px 0 rgba(255,255,255,.55) !important;
}

.public-splash .auth-btn-secondary,
.auth-bg .auth-btn-secondary,
.cracks-splash-screen .v4-btn.secondary,
.auth-panel-page .v4-btn.secondary{
  color:#ffffff !important;
  border:1px solid rgba(168,255,0,.48) !important;
  background:
    linear-gradient(180deg,rgba(14,24,33,.84),rgba(4,10,16,.92)) !important;
  box-shadow:
    0 12px 30px rgba(0,0,0,.28),
    inset 0 0 0 1px rgba(255,255,255,.04) !important;
}

.public-splash .auth-btn::before,
.auth-bg .auth-btn::before,
.cracks-splash-screen .v4-btn::before,
.auth-panel-page .v4-btn::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.24) 42%,transparent 66%);
  transform:translateX(-120%);
  transition:transform .45s ease;
  pointer-events:none;
}

.public-splash .auth-btn:hover,
.auth-bg .auth-btn:hover,
.cracks-splash-screen .v4-btn:hover,
.auth-panel-page .v4-btn:hover{
  transform:translateY(-2px);
}

.public-splash .auth-btn:hover::before,
.auth-bg .auth-btn:hover::before,
.cracks-splash-screen .v4-btn:hover::before,
.auth-panel-page .v4-btn:hover::before{
  transform:translateX(120%);
}

.public-splash .auth-btn-primary:hover,
.auth-bg .auth-btn-primary:hover,
.cracks-splash-screen .v4-btn:not(.secondary):hover,
.auth-panel-page .v4-btn:not(.secondary):hover{
  background:
    linear-gradient(180deg,#ecff6a 0%,#baff13 48%,#8eff00 100%) !important;
  box-shadow:
    0 18px 42px rgba(168,255,0,.34),
    0 0 0 4px rgba(168,255,0,.08),
    inset 0 1px 0 rgba(255,255,255,.60) !important;
}

.public-splash .auth-btn-secondary:hover,
.auth-bg .auth-btn-secondary:hover,
.cracks-splash-screen .v4-btn.secondary:hover,
.auth-panel-page .v4-btn.secondary:hover{
  color:var(--cr-lime) !important;
  border-color:rgba(205,255,46,.82) !important;
  background:
    linear-gradient(180deg,rgba(22,38,49,.94),rgba(8,17,25,.98)) !important;
  box-shadow:
    0 14px 34px rgba(0,0,0,.38),
    0 0 0 4px rgba(168,255,0,.07),
    inset 0 0 0 1px rgba(168,255,0,.10) !important;
}

.public-splash .auth-btn:active,
.auth-bg .auth-btn:active,
.cracks-splash-screen .v4-btn:active,
.auth-panel-page .v4-btn:active{
  transform:translateY(0) scale(.985);
}

.public-splash .auth-btn:focus-visible,
.auth-bg .auth-btn:focus-visible,
.cracks-splash-screen .v4-btn:focus-visible,
.auth-panel-page .v4-btn:focus-visible,
.auth-link:focus-visible{
  outline:3px solid rgba(168,255,0,.48);
  outline-offset:3px;
}

/* Links públicos */
.public-splash a:not(.v4-btn):not(.brand),
.auth-bg a:not(.v4-btn):not(.brand),
.auth-panel-page a:not(.v4-btn):not(.brand),
.auth-link{
  color:var(--cr-lime) !important;
  text-decoration:none !important;
  font-weight:900;
  transition:color .18s ease, text-shadow .18s ease, opacity .18s ease;
}

.public-splash a:not(.v4-btn):not(.brand):hover,
.auth-bg a:not(.v4-btn):not(.brand):hover,
.auth-panel-page a:not(.v4-btn):not(.brand):hover,
.auth-link:hover{
  color:#dcff51 !important;
  text-shadow:0 0 18px rgba(168,255,0,.32);
  text-decoration:underline !important;
  text-underline-offset:4px;
}

.public-splash a:not(.v4-btn):not(.brand):active,
.auth-bg a:not(.v4-btn):not(.brand):active,
.auth-panel-page a:not(.v4-btn):not(.brand):active,
.auth-link:active{
  opacity:.78;
}

/* Separación consistente de botones en formularios públicos */
.cracks-splash-actions,
.auth-panel-page form + .v4-btn,
.auth-panel-page .v4-card > .v4-btn{
  margin-top:12px;
}


/* =========================================================
   AUTH VIEWS UNIFICADAS
   login / register / forgot_password
========================================================= */

body.auth-bg{
  background:
    linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.82)),
    url("../img/backgrounds/cracks-splash-bg.webp") center center/cover fixed no-repeat !important;
}

.auth-unified-page{
  position:relative;
  min-height:calc(100vh - 116px);
  display:flex;
  align-items:stretch;
}

.auth-unified-shell{
  width:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:16px;
}

.auth-unified-hero{
  position:relative;
  overflow:hidden;
  min-height:210px;
  border:1px solid rgba(168,255,0,.34);
  border-radius:28px;
  padding:24px 22px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  background:
    linear-gradient(180deg,rgba(5,12,18,.22),rgba(5,12,18,.86)),
    url("../img/backgrounds/cracks-splash-bg.webp") center center/cover no-repeat;
  box-shadow:0 20px 60px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.06);
}

.auth-unified-hero::after{
  content:"";
  position:absolute;
  right:-44px;
  bottom:-54px;
  width:178px;
  height:178px;
  background:url("../img/brand/icon-cracks-ball.svg") center/contain no-repeat;
  opacity:.20;
  filter:drop-shadow(0 0 22px rgba(168,255,0,.28));
}

.auth-unified-hero > *{
  position:relative;
  z-index:2;
}

.auth-kicker{
  display:inline-flex;
  width:max-content;
  padding:7px 11px;
  border-radius:999px;
  border:1px solid rgba(168,255,0,.46);
  background:rgba(168,255,0,.10);
  color:var(--cr-lime);
  text-transform:uppercase;
  font-size:11px;
  letter-spacing:.7px;
  font-weight:1000;
  margin-bottom:12px;
}

.auth-unified-hero h1{
  font-family:Impact,Arial Black,sans-serif;
  text-transform:uppercase;
  font-style:italic;
  letter-spacing:.1px;
  font-size:clamp(38px,10.5vw,58px);
  line-height:.92;
  margin:0 0 12px;
  color:#fff;
  text-shadow:0 10px 28px rgba(0,0,0,.65);
}

.auth-unified-hero p{
  margin:0;
  max-width:350px;
  color:rgba(255,255,255,.78);
  font-size:18px;
  line-height:1.35;
}

.auth-unified-card{
  border:1px solid rgba(255,255,255,.16);
  border-radius:28px;
  padding:22px;
  background:
    linear-gradient(180deg,rgba(9,17,24,.86),rgba(4,9,14,.96));
  box-shadow:0 20px 60px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.04);
  backdrop-filter:blur(12px);
}

.auth-unified-card label{
  color:var(--cr-lime);
}

.auth-unified-card input,
.auth-unified-card select,
.auth-unified-card textarea{
  min-height:52px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.32);
}

.auth-options-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:12px 0 18px;
}

.auth-check{
  display:flex !important;
  align-items:center;
  gap:8px;
  margin:0 !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  color:#fff !important;
  font-size:14px !important;
}

.auth-check input{
  width:auto;
  min-height:auto;
}

.auth-two-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.auth-choice-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin:8px 0 14px;
}

.auth-choice-grid.two{
  grid-template-columns:repeat(2,1fr);
}

.auth-choice{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:48px;
  padding:10px;
  border-radius:14px;
  border:1px solid rgba(168,255,0,.38);
  background:rgba(0,0,0,.24);
  color:#fff !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  font-weight:800 !important;
}

.auth-choice input{
  width:auto;
  min-height:auto;
}

.auth-divider{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:18px 0;
  color:rgba(255,255,255,.56);
  font-weight:900;
}

.auth-divider::before,
.auth-divider::after{
  content:"";
  height:1px;
  background:rgba(255,255,255,.18);
  flex:1;
}

.auth-divider span{
  padding:0 12px;
}

.auth-demo-box{
  margin-top:16px;
  padding:13px;
  border-radius:16px;
  border:1px solid rgba(168,255,0,.18);
  background:rgba(168,255,0,.06);
  color:rgba(255,255,255,.70);
  font-size:12px;
  line-height:1.55;
}

.auth-demo-box b{
  color:#fff;
}

.auth-link,
.auth-secondary-link{
  color:var(--cr-lime) !important;
  text-decoration:none !important;
  font-weight:900;
  transition:color .18s ease, text-shadow .18s ease, opacity .18s ease;
}

.auth-secondary-link{
  display:block;
  text-align:center;
  margin-top:16px;
}

.auth-link:hover,
.auth-secondary-link:hover{
  color:#dcff51 !important;
  text-shadow:0 0 18px rgba(168,255,0,.32);
  text-decoration:underline !important;
  text-underline-offset:4px;
}

@media(max-width:420px){
  .auth-unified-hero{
    min-height:190px;
    padding:22px 18px;
  }
  .auth-unified-card{
    padding:18px;
  }
  .auth-two-grid{
    grid-template-columns:1fr;
    gap:0;
  }
  .auth-choice-grid{
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  .auth-unified-hero h1{
    font-size:clamp(35px,10vw,48px);
  }
  .auth-unified-hero p{
    font-size:16px;
  }
}


/* =========================================================
   AUTH SIN FONDO ADICIONAL
   El fondo splash queda solo en el body.
   Se elimina el segundo fondo dentro de las cajas/hero.
========================================================= */

body.auth-bg{
  background:
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.82)),
    url("../img/backgrounds/cracks-splash-bg.webp") center center/cover fixed no-repeat !important;
}

/* Evita segundo fondo en el contenedor de registro/login/recuperación */
body.auth-bg .auth-panel-page,
body.auth-bg .auth-unified-page,
body.auth-bg .auth-unified-shell{
  background:transparent !important;
  box-shadow:none !important;
}

/* Evita segundo fondo visual en el hero interno */
body.auth-bg .auth-unified-hero,
body.auth-bg .auth-panel-page .v4-hero{
  background:
    linear-gradient(180deg, rgba(5,12,18,.62), rgba(5,12,18,.88)) !important;
  backdrop-filter:blur(10px);
}

/* La card queda tipo vidrio oscuro, sin imagen */
body.auth-bg .auth-unified-card,
body.auth-bg .auth-panel-card,
body.auth-bg .v4-card{
  background:
    linear-gradient(180deg, rgba(9,17,24,.84), rgba(4,9,14,.94)) !important;
  backdrop-filter:blur(14px);
}

/* Refuerzo para register específicamente */
body.auth-bg .auth-register .auth-unified-hero,
body.auth-bg .auth-register .auth-unified-card{
  background-image:none !important;
}


/* =========================================================
   AUTH LAYOUT CONSOLIDADO
   Regla única para login / register / forgot_password.
========================================================= */

body.auth-bg .top{
  display:block !important;
  background:linear-gradient(180deg, rgba(4,9,15,.94), rgba(4,9,15,.54)) !important;
}



/* =========================================================
   AUTH LAYOUT CONSOLIDADO FINAL
   Única regla para el contenedor app en login / registro / recuperación.
========================================================= */
body.auth-bg .app{
  width:min(100%, 480px) !important;
  max-width:480px !important;
  padding:18px 16px 116px !important;
  background:transparent !important;
}


/* =========================================================
   REGISTER SIN ESPACIO INFERIOR EXCESIVO
   Ajuste para index.php?p=register
========================================================= */

/* En auth no existe bottom nav, por lo tanto no necesita 116px de padding inferior */
body.auth-bg .app{
  width:min(100%, 480px) !important;
  max-width:480px !important;
  padding:18px 16px 28px !important;
  background:transparent !important;
}

/* La página auth debe ajustarse al contenido real */
.auth-unified-page{
  min-height:auto !important;
  display:block !important;
}

/* Registro: reducir aire inferior después del formulario */
.auth-register .auth-unified-shell{
  gap:14px !important;
}

.auth-register .auth-unified-card{
  margin-bottom:0 !important;
}

.auth-register .auth-unified-card .auth-btn:last-child,
.auth-register .auth-unified-card > a:last-child{
  margin-bottom:0 !important;
}

/* Evita que el contenedor cree alto artificial */
body.auth-bg .auth-register{
  padding-bottom:0 !important;
}

@media(max-width:420px){
  body.auth-bg .app{
    padding-bottom:22px !important;
  }
}


/* =========================================================
   REGISTRO: ICONOGRAFÍA COMPACTA PARA POSICIÓN Y PIERNA
========================================================= */

.auth-icon-grid.positions{
  grid-template-columns:repeat(4, 1fr) !important;
  gap:8px !important;
}

.auth-icon-grid.feet{
  grid-template-columns:repeat(2, 1fr) !important;
  gap:8px !important;
}

.icon-choice{
  position:relative;
  min-height:78px !important;
  padding:9px 6px !important;
  flex-direction:column !important;
  gap:5px !important;
  font-size:11px !important;
  line-height:1.05 !important;
  text-align:center;
}

.icon-choice input{
  position:absolute;
  top:7px;
  left:7px;
  width:15px !important;
  height:15px !important;
  min-height:15px !important;
  accent-color:var(--cr-lime);
}

.choice-icon{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  margin-top:4px;
}

.choice-icon img{
  width:30px;
  height:30px;
  display:block;
}

.icon-choice:has(input:checked){
  background:rgba(168,255,0,.13) !important;
  border-color:rgba(168,255,0,.82) !important;
  box-shadow:0 0 0 3px rgba(168,255,0,.07), inset 0 0 18px rgba(168,255,0,.08);
  color:#fff !important;
}

.icon-choice:has(input:checked) .choice-icon{
  filter:drop-shadow(0 0 8px rgba(168,255,0,.36));
}

.auth-helper{
  margin:-4px 0 10px;
  color:rgba(255,255,255,.58);
  font-size:12px;
}

@media(max-width:420px){
  .auth-icon-grid.positions{
    grid-template-columns:repeat(4, 1fr) !important;
  }
  .icon-choice{
    min-height:72px !important;
    font-size:10px !important;
    padding:8px 4px !important;
  }
  .choice-icon,
  .choice-icon img{
    width:27px;
    height:27px;
  }
}


/* =========================================================
   REGISTER STYLE LIKE REFERENCE
========================================================= */

.auth-register .auth-unified-shell{
  gap:10px !important;
}

.auth-register .auth-unified-hero{
  min-height:120px !important;
  padding:18px 20px !important;
  justify-content:center !important;
}

.auth-register .auth-kicker{
  display:none !important;
}

.auth-register .auth-unified-hero h1{
  margin:0 !important;
  font-size:clamp(34px,9vw,52px) !important;
}

.auth-register .auth-unified-hero p{
  display:none !important;
}

.auth-register .auth-unified-card{
  padding:18px 18px 16px !important;
}

.auth-register .auth-unified-card label{
  display:block;
  margin:0 0 8px !important;
  font-size:12px !important;
  font-weight:1000 !important;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--cr-lime) !important;
}

.auth-input-icon{
  position:relative;
  margin-bottom:14px;
}

.auth-input-icon input{
  width:100%;
  min-height:58px !important;
  padding:0 54px 0 54px !important;
  border-radius:17px !important;
  border:1px solid rgba(255,255,255,.24) !important;
  background:rgba(0,0,0,.32) !important;
  color:#fff !important;
  font-size:16px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

.auth-input-icon input::placeholder{
  color:rgba(255,255,255,.45) !important;
}

.field-icon{
  position:absolute;
  left:16px;
  top:50%;
  transform:translateY(-50%);
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  opacity:.92;
  pointer-events:none;
}

.field-icon img{
  width:24px;
  height:24px;
  display:block;
}

.field-icon-right{
  left:auto;
  right:16px;
  opacity:.8;
}

.auth-ref-grid{
  gap:10px !important;
  margin:6px 0 14px !important;
}

.auth-ref-grid-positions{
  grid-template-columns:repeat(2, minmax(0,1fr)) !important;
}

.auth-ref-grid-feet{
  grid-template-columns:repeat(2, minmax(0,1fr)) !important;
}

.ref-choice{
  position:relative;
  min-height:68px !important;
  padding:10px 12px 10px 42px !important;
  border-radius:16px !important;
  justify-content:flex-start !important;
  flex-direction:row !important;
  gap:10px !important;
  font-size:14px !important;
  line-height:1.1 !important;
  text-align:left !important;
  color:#fff !important;
  background:rgba(0,0,0,.24) !important;
  border:1px solid rgba(168,255,0,.52) !important;
}

.ref-choice input{
  position:absolute;
  width:1px !important;
  height:1px !important;
  min-height:1px !important;
  opacity:0;
  pointer-events:none;
}

.ref-choice .choice-icon{
  width:28px;
  height:28px;
  margin:0 !important;
  flex:0 0 28px;
}

.ref-choice .choice-icon img{
  width:28px;
  height:28px;
}

.ref-choice span:last-child{
  font-size:15px;
  font-weight:900;
  color:#fff;
}

.ref-choice:has(input:checked){
  background:rgba(168,255,0,.10) !important;
  border-color:rgba(190,255,60,.92) !important;
  box-shadow:0 0 0 3px rgba(168,255,0,.06), inset 0 0 20px rgba(168,255,0,.06);
}

.ref-choice:has(input:checked) .choice-icon{
  filter:drop-shadow(0 0 8px rgba(168,255,0,.32));
}

.auth-register .auth-divider{
  margin:14px 0 !important;
}

.auth-register .auth-btn{
  min-height:56px !important;
}

.auth-register .auth-input-password{
  margin-bottom:14px;
}

@media(max-width:420px){
  .auth-register .auth-unified-card{
    padding:16px 14px 14px !important;
  }
  .auth-input-icon input{
    min-height:56px !important;
    padding-left:50px !important;
    padding-right:50px !important;
  }
  .auth-ref-grid{
    gap:8px !important;
  }
  .ref-choice{
    min-height:64px !important;
    padding:10px 10px 10px 40px !important;
  }
  .ref-choice .choice-icon,
  .ref-choice .choice-icon img{
    width:24px;
    height:24px;
  }
  .ref-choice span:last-child{
    font-size:14px;
  }
}


/* =========================================================
   REGISTER FIX: AUTOFILL + ALINEACIÓN TARJETAS
   - Evita fondo claro del navegador al autocompletar.
   - Centra icono + texto en Posición y Pierna hábil.
========================================================= */

/* Chrome / Edge / Safari autofill */
.auth-register input:-webkit-autofill,
.auth-register input:-webkit-autofill:hover,
.auth-register input:-webkit-autofill:focus,
.auth-register input:-webkit-autofill:active,
.auth-unified-card input:-webkit-autofill,
.auth-unified-card input:-webkit-autofill:hover,
.auth-unified-card input:-webkit-autofill:focus,
.auth-unified-card input:-webkit-autofill:active{
  -webkit-box-shadow:0 0 0 1000px rgba(0,0,0,.32) inset !important;
  -webkit-text-fill-color:#ffffff !important;
  caret-color:#ffffff !important;
  border:1px solid rgba(255,255,255,.24) !important;
  transition:background-color 9999s ease-in-out 0s !important;
}

/* Firefox autofill */
.auth-register input:autofill,
.auth-unified-card input:autofill{
  box-shadow:0 0 0 1000px rgba(0,0,0,.32) inset !important;
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.24) !important;
}

/* Mantener color oscuro en cualquier input con foco/autofill */
.auth-register .auth-input-icon input,
.auth-unified-card .auth-input-icon input{
  background-color:rgba(0,0,0,.32) !important;
  color:#ffffff !important;
}

/* Tarjetas de selección: icono + texto completamente centrados */
.auth-ref-grid .ref-choice,
.auth-icon-grid .icon-choice{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-direction:column !important;
  text-align:center !important;
  gap:8px !important;
  padding:12px 10px !important;
}

.auth-ref-grid .ref-choice .choice-icon,
.auth-icon-grid .icon-choice .choice-icon{
  margin:0 auto !important;
  flex:0 0 auto !important;
}

.auth-ref-grid .ref-choice span:last-child,
.auth-icon-grid .icon-choice span:last-child{
  display:block !important;
  width:100% !important;
  text-align:center !important;
  line-height:1.05 !important;
}

/* Checkbox invisible, sin afectar alineación */
.auth-ref-grid .ref-choice input,
.auth-icon-grid .icon-choice input{
  position:absolute !important;
  opacity:0 !important;
  pointer-events:none !important;
  width:1px !important;
  height:1px !important;
  min-height:1px !important;
  margin:0 !important;
}

/* Altura más compacta y consistente */
.auth-ref-grid-positions .ref-choice{
  min-height:92px !important;
}

.auth-ref-grid-feet .ref-choice{
  min-height:86px !important;
}

/* Imagen más equilibrada */
.auth-ref-grid .choice-icon,
.auth-icon-grid .choice-icon{
  width:32px !important;
  height:32px !important;
}

.auth-ref-grid .choice-icon img,
.auth-icon-grid .choice-icon img{
  width:32px !important;
  height:32px !important;
}

/* Estado seleccionado */
.auth-ref-grid .ref-choice:has(input:checked),
.auth-icon-grid .icon-choice:has(input:checked){
  background:rgba(168,255,0,.12) !important;
  border-color:rgba(190,255,60,.95) !important;
  box-shadow:0 0 0 3px rgba(168,255,0,.07), inset 0 0 22px rgba(168,255,0,.08);
}

@media(max-width:420px){
  .auth-ref-grid-positions .ref-choice{
    min-height:86px !important;
  }
  .auth-ref-grid-feet .ref-choice{
    min-height:80px !important;
  }
  .auth-ref-grid .choice-icon,
  .auth-icon-grid .choice-icon,
  .auth-ref-grid .choice-icon img,
  .auth-icon-grid .choice-icon img{
    width:29px !important;
    height:29px !important;
  }
}


/* =========================================================
   REGISTER VISUAL FIX DEFINITIVO
   - Oculta checkbox/radio nativo.
   - Centra icono y texto.
   - Reincorpora iconos dentro de inputs.
========================================================= */

.auth-register .auth-input-icon,
.auth-panel-page .auth-input-icon{
  position:relative !important;
  margin-bottom:14px !important;
}

.auth-register .auth-input-icon input,
.auth-panel-page .auth-input-icon input{
  width:100% !important;
  min-height:56px !important;
  padding:0 54px !important;
  border-radius:16px !important;
  border:1px solid rgba(255,255,255,.24) !important;
  background:rgba(0,0,0,.34) !important;
  color:#fff !important;
  font-size:16px !important;
}

.auth-register .auth-input-icon input::placeholder,
.auth-panel-page .auth-input-icon input::placeholder{
  color:rgba(255,255,255,.46) !important;
}

.auth-register .field-icon,
.auth-panel-page .field-icon{
  position:absolute !important;
  left:16px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:24px !important;
  height:24px !important;
  display:grid !important;
  place-items:center !important;
  opacity:.9 !important;
  pointer-events:none !important;
}

.auth-register .field-icon img,
.auth-panel-page .field-icon img{
  width:24px !important;
  height:24px !important;
  display:block !important;
}

.auth-register .field-icon-right,
.auth-panel-page .field-icon-right{
  left:auto !important;
  right:16px !important;
}

/* Autofill oscuro */
.auth-register input:-webkit-autofill,
.auth-register input:-webkit-autofill:hover,
.auth-register input:-webkit-autofill:focus,
.auth-panel-page input:-webkit-autofill,
.auth-panel-page input:-webkit-autofill:hover,
.auth-panel-page input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px rgba(0,0,0,.34) inset !important;
  -webkit-text-fill-color:#fff !important;
  caret-color:#fff !important;
  transition:background-color 9999s ease-in-out 0s !important;
}

/* Cards de posición y pierna */
.auth-icon-grid.positions,
.auth-ref-grid-positions{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0,1fr)) !important;
  gap:8px !important;
  margin:8px 0 14px !important;
}

.auth-icon-grid.feet,
.auth-ref-grid-feet{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  gap:10px !important;
  margin:8px 0 12px !important;
}

.auth-icon-grid .icon-choice,
.auth-ref-grid .ref-choice,
.auth-ref-grid .icon-choice{
  position:relative !important;
  min-height:82px !important;
  padding:12px 8px !important;
  border-radius:16px !important;
  border:1px solid rgba(168,255,0,.50) !important;
  background:rgba(0,0,0,.24) !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  text-align:center !important;
  line-height:1.05 !important;
}

/* Ocultar checkbox/radio nativo real, no visual */
.auth-icon-grid .icon-choice > input,
.auth-ref-grid .ref-choice > input,
.auth-ref-grid .icon-choice > input{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  opacity:0 !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  cursor:pointer !important;
  z-index:3 !important;
}

.auth-icon-grid .choice-icon,
.auth-ref-grid .choice-icon{
  width:32px !important;
  height:32px !important;
  flex:0 0 auto !important;
  margin:0 auto !important;
  display:grid !important;
  place-items:center !important;
}

.auth-icon-grid .choice-icon img,
.auth-ref-grid .choice-icon img{
  width:32px !important;
  height:32px !important;
  display:block !important;
  object-fit:contain !important;
}

.auth-icon-grid .icon-choice span:last-child,
.auth-ref-grid .ref-choice span:last-child,
.auth-ref-grid .icon-choice span:last-child{
  width:100% !important;
  display:block !important;
  text-align:center !important;
  color:#fff !important;
  font-size:13px !important;
  font-weight:900 !important;
  line-height:1.05 !important;
}

/* Indicador propio seleccionado */
.auth-icon-grid .icon-choice::after,
.auth-ref-grid .ref-choice::after,
.auth-ref-grid .icon-choice::after{
  content:"" !important;
  position:absolute !important;
  top:8px !important;
  right:8px !important;
  width:11px !important;
  height:11px !important;
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.30) !important;
  background:rgba(255,255,255,.05) !important;
  opacity:.7;
}

.auth-icon-grid .icon-choice:has(input:checked),
.auth-ref-grid .ref-choice:has(input:checked),
.auth-ref-grid .icon-choice:has(input:checked){
  background:rgba(168,255,0,.13) !important;
  border-color:rgba(190,255,60,.95) !important;
  box-shadow:0 0 0 3px rgba(168,255,0,.07), inset 0 0 22px rgba(168,255,0,.08) !important;
}

.auth-icon-grid .icon-choice:has(input:checked)::after,
.auth-ref-grid .ref-choice:has(input:checked)::after,
.auth-ref-grid .icon-choice:has(input:checked)::after{
  background:var(--cr-lime) !important;
  border-color:var(--cr-lime) !important;
  box-shadow:0 0 10px rgba(168,255,0,.55);
}

.auth-helper{
  margin:-2px 0 12px !important;
  color:rgba(255,255,255,.62) !important;
  font-size:12px !important;
}

@media(max-width:420px){
  .auth-icon-grid.positions,
  .auth-ref-grid-positions{
    grid-template-columns:repeat(4, minmax(0,1fr)) !important;
    gap:7px !important;
  }
  .auth-icon-grid .icon-choice,
  .auth-ref-grid .ref-choice,
  .auth-ref-grid .icon-choice{
    min-height:76px !important;
    padding:10px 5px !important;
  }
  .auth-icon-grid .choice-icon,
  .auth-ref-grid .choice-icon,
  .auth-icon-grid .choice-icon img,
  .auth-ref-grid .choice-icon img{
    width:28px !important;
    height:28px !important;
  }
  .auth-icon-grid .icon-choice span:last-child,
  .auth-ref-grid .ref-choice span:last-child,
  .auth-ref-grid .icon-choice span:last-child{
    font-size:11px !important;
  }
}


/* =========================================================
   REGISTER: FECHA DE NACIMIENTO
========================================================= */

.auth-register input[type="date"]{
  color:#ffffff !important;
  color-scheme:dark;
}

.auth-register input[type="date"]::-webkit-calendar-picker-indicator{
  filter:invert(1) brightness(1.4);
  opacity:.75;
  cursor:pointer;
}

.auth-register input[type="date"]::-webkit-datetime-edit{
  color:#ffffff;
}

.auth-register input[type="date"]:invalid::-webkit-datetime-edit{
  color:rgba(255,255,255,.46);
}


/* =========================================================
   PASSWORD TOGGLE
   Permite mostrar/ocultar contraseña desde el icono.
========================================================= */

.auth-input-password .password-toggle{
  border:0 !important;
  background:transparent !important;
  padding:0 !important;
  cursor:pointer !important;
  pointer-events:auto !important;
  z-index:4 !important;
  opacity:.85 !important;
  transition:opacity .18s ease, transform .18s ease, filter .18s ease;
}

.auth-input-password .password-toggle:hover{
  opacity:1 !important;
  transform:translateY(-50%) scale(1.06) !important;
  filter:drop-shadow(0 0 8px rgba(168,255,0,.28));
}

.auth-input-password .password-toggle img{
  pointer-events:none;
}


/* =========================================================
   AUTH CARD TRANSPARENCIA AJUSTADA
========================================================= */

body.auth-bg .auth-unified-card,
body.auth-bg .auth-panel-card,
body.auth-bg .v4-card{
  background:linear-gradient(180deg, rgba(9, 17, 24, .44), rgba(4, 9, 14, .54)) !important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}


/* =========================================================
   REGISTRO: SLIDER NIVEL DE JUGADOR
========================================================= */

.player-level-slider{
  position:relative;
  padding:16px 14px 14px;
  margin:8px 0 16px;
  border:1px solid rgba(168,255,0,.48);
  border-radius:18px;
  background:rgba(0,0,0,.24);
}

.player-level-slider input[type="range"]{
  width:100%;
  height:8px;
  min-height:8px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:999px;
  background:linear-gradient(90deg, var(--cr-lime) 0%, var(--cr-lime) 25%, rgba(255,255,255,.18) 25%, rgba(255,255,255,.18) 100%);
  outline:none;
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
}

.player-level-slider input[type="range"]::-webkit-slider-thumb{
  appearance:none;
  -webkit-appearance:none;
  width:26px;
  height:26px;
  border-radius:50%;
  background:linear-gradient(180deg,#d8ff39,#8dff00);
  border:3px solid #071018;
  box-shadow:0 0 0 4px rgba(168,255,0,.18), 0 0 18px rgba(168,255,0,.42);
}

.player-level-slider input[type="range"]::-moz-range-thumb{
  width:26px;
  height:26px;
  border-radius:50%;
  background:linear-gradient(180deg,#d8ff39,#8dff00);
  border:3px solid #071018;
  box-shadow:0 0 0 4px rgba(168,255,0,.18), 0 0 18px rgba(168,255,0,.42);
}

.level-current{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:14px 0 8px;
}

.level-number{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:999px;
  color:#071018;
  background:var(--cr-lime);
  font-weight:1000;
  box-shadow:0 0 18px rgba(168,255,0,.32);
}

.level-current strong{
  color:#fff;
  font-size:18px;
  text-transform:uppercase;
  letter-spacing:.5px;
}

.level-scale{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:4px;
  color:rgba(255,255,255,.58);
  font-size:9.5px;
  font-weight:800;
  text-align:center;
}

.level-scale span{
  overflow:hidden;
  text-overflow:ellipsis;
}

@media(max-width:420px){
  .player-level-slider{
    padding:14px 10px 12px;
  }
  .level-scale{
    font-size:8.5px;
  }
  .level-current strong{
    font-size:16px;
  }
}


/* =========================================================
   SLIDER NIVEL SIN NÚMERO
========================================================= */

.level-number,
[data-level-number]{
  display:none !important;
}

.level-current{
  justify-content:center !important;
  gap:0 !important;
  margin:14px 0 8px !important;
}

.level-current strong{
  text-align:center !important;
}


/* =========================================================
   LOGIN / FORGOT CON DISEÑO APROBADO DE REGISTER
   Referencia visual: index.php?p=register
========================================================= */

.auth-approved{
  min-height:auto !important;
  display:block !important;
  padding-bottom:0 !important;
}

.auth-approved-card{
  padding:18px 18px 16px !important;
  margin-bottom:0 !important;
  background:linear-gradient(180deg, rgba(9, 17, 24, .44), rgba(4, 9, 14, .54)) !important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.auth-approved-card .v4-title{
  font-size:clamp(34px,9vw,52px) !important;
  margin:0 0 8px !important;
}

.auth-approved-subtitle{
  color:rgba(255,255,255,.74);
  line-height:1.35;
  margin:0 0 18px;
  font-size:15px;
}

.auth-approved-card label{
  display:block;
  margin:0 0 8px !important;
  font-size:12px !important;
  font-weight:1000 !important;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--cr-lime) !important;
}

.auth-approved .auth-input-icon{
  position:relative !important;
  margin-bottom:14px !important;
}

.auth-approved .auth-input-icon input{
  width:100% !important;
  min-height:56px !important;
  padding:0 54px !important;
  border-radius:16px !important;
  border:1px solid rgba(255,255,255,.24) !important;
  background:rgba(0,0,0,.34) !important;
  color:#fff !important;
  font-size:16px !important;
}

.auth-approved .auth-input-icon input::placeholder{
  color:rgba(255,255,255,.46) !important;
}

.auth-approved .field-icon{
  position:absolute !important;
  left:16px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:24px !important;
  height:24px !important;
  display:grid !important;
  place-items:center !important;
  opacity:.9 !important;
  pointer-events:none !important;
}

.auth-approved .field-icon img{
  width:24px !important;
  height:24px !important;
  display:block !important;
}

.auth-approved .field-icon-right{
  left:auto !important;
  right:16px !important;
}

.auth-approved .password-toggle{
  border:0 !important;
  background:transparent !important;
  padding:0 !important;
  cursor:pointer !important;
  pointer-events:auto !important;
  z-index:4 !important;
  opacity:.85 !important;
}

.auth-approved .password-toggle:hover{
  opacity:1 !important;
  filter:drop-shadow(0 0 8px rgba(168,255,0,.28));
}

.approved-options{
  margin:4px 0 18px !important;
}

.auth-approved .auth-check{
  display:flex !important;
  align-items:center;
  gap:8px;
  color:#fff !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  font-size:14px !important;
  font-weight:800 !important;
}

.auth-approved .auth-check input{
  width:16px !important;
  height:16px !important;
  min-height:16px !important;
  accent-color:var(--cr-lime);
}

.auth-approved input:-webkit-autofill,
.auth-approved input:-webkit-autofill:hover,
.auth-approved input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px rgba(0,0,0,.34) inset !important;
  -webkit-text-fill-color:#fff !important;
  caret-color:#fff !important;
  transition:background-color 9999s ease-in-out 0s !important;
}

.auth-approved .auth-divider{
  margin:14px 0 !important;
}

@media(max-width:420px){
  .auth-approved-card{
    padding:16px 14px 14px !important;
  }
  .auth-approved-subtitle{
    font-size:14px;
    margin-bottom:16px;
  }
}


/* =========================================================
   SPLASH ÚNICO INDEX.PHP - BACKGROUND CON JUGADOR
   Se aplica solo al splash público.
========================================================= */

body.public-splash .cracks-splash-screen{
  background:#02070d !important;
}

body.public-splash .cracks-splash-bg{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.72)),
    url("../img/backgrounds/cracks-splash-player-bg.png") center center/cover no-repeat !important;
  transform:none !important;
}

body.public-splash .cracks-splash-bg:after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 48%, rgba(168,255,0,.10), transparent 32%),
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.78));
}

/* Mejor legibilidad del copy sobre el nuevo fondo */
body.public-splash .cracks-splash-copy{
  padding:18px 16px;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(4,9,14,.16), rgba(4,9,14,.42));
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}

body.public-splash .cracks-splash-copy h1{
  text-shadow:0 12px 34px rgba(0,0,0,.78);
}

body.public-splash .cracks-splash-copy p{
  text-shadow:0 8px 22px rgba(0,0,0,.70);
}


/* =========================================================
   REGISTER TITLE = LOGIN TITLE
   Mismo tamaño y fuente para:
   login:    <h1 class="v4-title">Iniciar sesión</h1>
   register: <h1 class="v4-title">Crear cuenta</h1>
========================================================= */

.auth-register .v4-title{
  font-family:Impact, Arial Black, sans-serif !important;
  font-style:italic !important;
  text-transform:uppercase !important;
  letter-spacing:.1px !important;
  font-size:clamp(34px, 9vw, 42px) !important;
  line-height:.92 !important;
  margin:0 0 8px !important;
  color:#fff !important;
  text-shadow:0 10px 28px rgba(0,0,0,.65) !important;
}


/* =========================================================
   AUTH TITLES UNIFICADOS
   Referencia visual: login
   Aplica a:
   - index.php?p=login
   - index.php?p=register
   - index.php?p=forgot_password
========================================================= */

body.auth-bg .auth-login .v4-title,
body.auth-bg .auth-register .v4-title,
body.auth-bg .auth-forgot .v4-title,
body.auth-bg .auth-approved-card .v4-title,
body.auth-bg .v4-card .v4-title{
  font-family:Impact, Arial Black, sans-serif !important;
  font-style:italic !important;
  text-transform:uppercase !important;
  font-weight:300 !important;
  letter-spacing:.1px !important;
  font-size:clamp(34px, 9vw, 42px) !important;
  line-height:.92 !important;
  margin:0 0 8px !important;
  color:#fff !important;
  text-shadow:0 10px 28px rgba(0,0,0,.65) !important;
}


/* =========================================================
   HOME / DASHBOARD DEL JUGADOR - BACKGROUND FUTBOLERO
========================================================= */
body.home-dashboard-bg{
  background:
    linear-gradient(180deg, rgba(2,7,11,.28) 0%, rgba(2,7,11,.66) 38%, rgba(2,7,11,.94) 100%),
    url("../img/backgrounds/bg-home-dashboard.png") center top / cover fixed no-repeat;
}
body.home-dashboard-bg .top{
  background:linear-gradient(180deg, rgba(2,8,13,.78), rgba(2,8,13,.18));
  backdrop-filter:blur(4px);
}
body.home-dashboard-bg .app{
  background:transparent;
}
body.home-dashboard-bg .v4-home-dashboard{
  position:relative;
}
body.home-dashboard-bg .v4-home-dashboard .v4-card,
body.home-dashboard-bg .v4-home-dashboard .v4-hero{
  box-shadow:0 18px 36px rgba(0,0,0,.28);
}


/* =========================================================
   FIX HOME DASHBOARD BACKGROUND
   Debe mostrar assets/img/backgrounds/bg-home-dashboard.png
   y no bg-stadium-night.svg
========================================================= */

html:has(body.home-dashboard-bg),
body.home-dashboard-bg{
  background:#02070d !important;
  background-image:none !important;
}

/* Background real del dashboard, independiente del background global */
body.home-dashboard-bg::before,
.v4-home-dashboard::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-3;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(2,7,11,.20) 0%, rgba(2,7,11,.62) 40%, rgba(2,7,11,.95) 100%),
    url("../img/backgrounds/bg-home-dashboard.png") center top / cover fixed no-repeat !important;
}

/* Capa de contraste para que cards/textos sigan legibles */
body.home-dashboard-bg::after,
.v4-home-dashboard::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 38%, rgba(168,255,0,.10), transparent 30%),
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.38));
}

body.home-dashboard-bg .app,
body.home-dashboard-bg .v4-screen,
body.home-dashboard-bg .v4-home-dashboard{
  background:transparent !important;
}

body.home-dashboard-bg .top{
  background:linear-gradient(180deg, rgba(2,8,13,.86), rgba(2,8,13,.20)) !important;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}


/* =========================================================
   HOME DASHBOARD BACKGROUND - FIX DEFINITIVO
   La ruta logueada debe usar SOLO:
   assets/img/backgrounds/bg-home-dashboard.png
========================================================= */

/* Fondo de página del dashboard */
body.home-dashboard-bg{
  background:#02070d !important;
  background-image:
    linear-gradient(180deg, rgba(2,7,11,.18) 0%, rgba(2,7,11,.64) 44%, rgba(2,7,11,.96) 100%),
    url("../img/backgrounds/bg-home-dashboard.png") !important;
  background-position:center top !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  background-attachment:fixed !important;
}

/* Si alguna regla global pinta bg-stadium-night.svg en body, se anula por especificidad */
html body.home-dashboard-bg{
  background:#02070d !important;
  background-image:
    linear-gradient(180deg, rgba(2,7,11,.18) 0%, rgba(2,7,11,.64) 44%, rgba(2,7,11,.96) 100%),
    url("../img/backgrounds/bg-home-dashboard.png") !important;
}

/* El dashboard y sus contenedores deben ser transparentes */
body.home-dashboard-bg .app,
body.home-dashboard-bg main,
body.home-dashboard-bg .v4-screen,
body.home-dashboard-bg .v4-home-dashboard{
  background:transparent !important;
  background-image:none !important;
}

/* Evita que cards/hero del home muestren otra imagen de fondo como bg-field o stadium */
body.home-dashboard-bg .v4-home-dashboard .v4-card,
body.home-dashboard-bg .v4-home-dashboard .v4-card.lime,
body.home-dashboard-bg .v4-home-dashboard .v4-card.bg-field,
body.home-dashboard-bg .v4-home-dashboard .v4-hero,
body.home-dashboard-bg .v4-home-dashboard .bg-field{
  background:
    linear-gradient(180deg, rgba(9,17,24,.50), rgba(4,9,14,.66)) !important;
  background-image:
    linear-gradient(180deg, rgba(9,17,24,.50), rgba(4,9,14,.66)) !important;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

/* Capa suave de contraste sin imagen adicional */
body.home-dashboard-bg::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 35%, rgba(168,255,0,.10), transparent 30%),
    linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.22));
}

/* El header no debe traer bg-stadium */
body.home-dashboard-bg .top{
  background:linear-gradient(180deg, rgba(2,8,13,.86), rgba(2,8,13,.20)) !important;
  background-image:linear-gradient(180deg, rgba(2,8,13,.86), rgba(2,8,13,.20)) !important;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}


/* =========================================================
   HOME / DASHBOARD JUGADOR - VISUAL APROBADO AUTH
   Sigue estilo visual login / register / forgot_password
========================================================= */

body.home-dashboard-bg{
  background:#02070d !important;
  background-image:
    linear-gradient(180deg, rgba(2,7,11,.16) 0%, rgba(2,7,11,.66) 44%, rgba(2,7,11,.96) 100%),
    url("../img/backgrounds/bg-home-dashboard.png") !important;
  background-position:center top !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  background-attachment:fixed !important;
}

body.home-dashboard-bg .app,
body.home-dashboard-bg main,
body.home-dashboard-bg .v4-screen,
body.home-dashboard-bg .v4-home-dashboard{
  background:transparent !important;
  background-image:none !important;
}

.home-approved{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.home-approved .auth-kicker{
  display:inline-flex;
  width:max-content;
  padding:7px 11px;
  border-radius:999px;
  border:1px solid rgba(168,255,0,.46);
  background:rgba(168,255,0,.10);
  color:var(--cr-lime);
  text-transform:uppercase;
  font-size:11px;
  letter-spacing:.7px;
  font-weight:1000;
  margin-bottom:10px;
}

.home-welcome-card,
.home-match-card,
.home-summary-card,
.home-section-block{
  border:1px solid rgba(168,255,0,.34);
  border-radius:28px;
  padding:18px;
  background:linear-gradient(180deg, rgba(9, 17, 24, .44), rgba(4, 9, 14, .54)) !important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 20px 60px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.04);
}

.home-welcome-card{
  display:flex;
  flex-direction:column;
  gap:14px;
  overflow:hidden;
  position:relative;
}

.home-welcome-card::after{
  content:"";
  position:absolute;
  right:-42px;
  bottom:-62px;
  width:180px;
  height:180px;
  background:url("../img/brand/icon-cracks-ball.svg") center/contain no-repeat;
  opacity:.10;
  pointer-events:none;
}

.home-welcome-card > *{
  position:relative;
  z-index:2;
}

.home-approved .v4-title{
  font-family:Impact, Arial Black, sans-serif !important;
  font-style:italic !important;
  text-transform:uppercase !important;
  font-weight:900 !important;
  letter-spacing:.1px !important;
  font-size:clamp(34px, 9vw, 52px) !important;
  line-height:.92 !important;
  margin:0 0 8px !important;
  color:#fff !important;
  text-shadow:0 10px 28px rgba(0,0,0,.65) !important;
}

.home-subtitle{
  margin:0;
  color:rgba(255,255,255,.74);
  line-height:1.35;
  font-size:15px;
}

.home-player-chip{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  border-radius:18px;
  background:rgba(0,0,0,.24);
  border:1px solid rgba(255,255,255,.12);
}

.home-player-chip small,
.home-date-box small,
.home-mini-stats small,
.home-metric small{
  display:block;
  color:rgba(255,255,255,.58);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.55px;
  font-weight:900;
}

.home-player-chip b,
.home-date-box b,
.home-mini-stats b{
  color:#fff;
  font-size:15px;
}

.home-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
}

.home-card-head.compact{
  align-items:center;
}

.home-card-head h2{
  font-family:Impact, Arial Black, sans-serif;
  font-style:italic;
  text-transform:uppercase;
  color:#fff;
  font-size:clamp(28px, 7vw, 42px);
  line-height:.95;
  margin:0;
}

.home-status{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:0 11px;
  border-radius:999px;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.5px;
  font-weight:1000;
  color:#071018;
  background:var(--cr-lime);
}

.home-status.danger,
.home-alert,
.home-mini-stats b.danger{
  color:#ff6b6b !important;
}

.home-status.danger{
  color:#fff !important;
  background:rgba(255,82,82,.20);
  border:1px solid rgba(255,82,82,.45);
}

.home-status.open{
  color:#fff;
  background:rgba(168,255,0,.10);
  border:1px solid rgba(168,255,0,.46);
}

.home-date-box,
.home-mini-stats{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
  margin-bottom:14px;
}

.home-date-box > div,
.home-mini-stats > div{
  min-height:70px;
  padding:12px 9px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.24);
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:center;
}

.home-row-info{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 0;
  border-top:1px solid rgba(255,255,255,.10);
}

.home-row-info span{
  display:flex;
  align-items:center;
  gap:7px;
  color:rgba(255,255,255,.62);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.45px;
  font-weight:900;
}

.home-row-info img{
  width:18px;
  height:18px;
}

.home-row-info b{
  text-align:right;
  color:#fff;
  font-size:13px;
}

.home-count-label{
  margin:16px 0 10px;
  color:rgba(255,255,255,.62);
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.6px;
  font-size:11px;
  font-weight:1000;
}

.home-main-action{
  margin-top:16px;
}

.home-main-action form{
  margin:0;
}

.home-alert{
  margin:0;
  padding:12px;
  border-radius:16px;
  background:rgba(255,82,82,.09);
  border:1px solid rgba(255,82,82,.28);
  text-align:center;
  font-weight:900;
}

.home-metric-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
}

.home-metric{
  min-height:86px;
  padding:10px 8px;
  border-radius:16px;
  border:1px solid rgba(168,255,0,.34);
  background:rgba(0,0,0,.24);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  text-align:center;
}

.home-metric img{
  width:24px;
  height:24px;
  filter:drop-shadow(0 0 8px rgba(168,255,0,.18));
}

.home-metric b{
  color:#fff;
  font-size:22px;
  line-height:1;
}

.home-small-link{
  color:var(--cr-lime);
  text-decoration:none;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.5px;
  font-weight:1000;
}

.home-shortcuts{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:8px;
}

.home-shortcuts a{
  min-height:74px;
  padding:10px 6px;
  border-radius:18px;
  border:1px solid rgba(168,255,0,.32);
  background:linear-gradient(180deg, rgba(9,17,24,.48), rgba(4,9,14,.60));
  color:#fff;
  text-decoration:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  font-size:10.5px;
  font-weight:900;
  text-align:center;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.home-shortcuts a:hover{
  border-color:rgba(168,255,0,.78);
  color:var(--cr-lime);
  transform:translateY(-1px);
}

.home-shortcuts img{
  width:24px;
  height:24px;
}

/* Evita fondos internos antiguos dentro del dashboard */
body.home-dashboard-bg .v4-home-dashboard .v4-card,
body.home-dashboard-bg .v4-home-dashboard .v4-card.lime,
body.home-dashboard-bg .v4-home-dashboard .v4-card.bg-field,
body.home-dashboard-bg .v4-home-dashboard .v4-hero,
body.home-dashboard-bg .v4-home-dashboard .bg-field{
  background-image:none !important;
}

@media(max-width:420px){
  .home-welcome-card,
  .home-match-card,
  .home-summary-card,
  .home-section-block{
    padding:16px 14px;
  }

  .home-date-box,
  .home-mini-stats{
    gap:7px;
  }

  .home-date-box > div,
  .home-mini-stats > div{
    padding:10px 6px;
  }

  .home-date-box b,
  .home-mini-stats b{
    font-size:13px;
  }

  .home-metric-grid{
    grid-template-columns:repeat(3, 1fr);
    gap:7px;
  }

  .home-metric{
    min-height:80px;
  }

  .home-shortcuts{
    gap:7px;
  }

  .home-shortcuts a{
    min-height:68px;
    font-size:9.5px;
  }
}


/* =========================================================
   HOME / DASHBOARD SIMPLIFICADO
========================================================= */

body.home-dashboard-bg{
  background-color:#02070d !important;
  background-image:
    linear-gradient(180deg, rgba(2,7,11,.20) 0%, rgba(2,7,11,.68) 42%, rgba(2,7,11,.96) 100%),
    url("../img/backgrounds/bg-home-dashboard.png") !important;
  background-position:center center !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  background-attachment:scroll !important;
  min-height:100dvh;
}

html, body.home-dashboard-bg{
  min-height:100dvh;
}

body.home-dashboard-bg .app,
body.home-dashboard-bg main,
body.home-dashboard-bg .v4-screen,
body.home-dashboard-bg .v4-home-dashboard{
  background:transparent !important;
  background-image:none !important;
}

.home-simple{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.home-simple-hero,
.home-simple-selector,
.home-simple-match,
.home-simple-stats{
  border:1px solid rgba(168,255,0,.34);
  border-radius:26px;
  padding:16px 14px;
  background:linear-gradient(180deg, rgba(9,17,24,.44), rgba(4,9,14,.56)) !important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 18px 42px rgba(0,0,0,.34);
}

.home-simple .auth-kicker{
  display:inline-flex;
  width:max-content;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(168,255,0,.46);
  background:rgba(168,255,0,.10);
  color:var(--cr-lime);
  text-transform:uppercase;
  font-size:10px;
  letter-spacing:.7px;
  font-weight:1000;
  margin-bottom:10px;
}

.home-simple .v4-title{
  font-family:Impact, Arial Black, sans-serif !important;
  font-style:italic !important;
  text-transform:uppercase !important;
  font-weight:900 !important;
  letter-spacing:.1px !important;
  font-size:clamp(34px, 9vw, 52px) !important;
  line-height:.92 !important;
  margin:0 0 8px !important;
  color:#fff !important;
  text-shadow:0 10px 28px rgba(0,0,0,.65) !important;
}

.home-simple-subtitle{
  margin:0;
  color:rgba(255,255,255,.74);
  line-height:1.35;
  font-size:14px;
}

.home-simple-champ{
  margin-top:14px;
  padding:12px;
  border-radius:16px;
  background:rgba(0,0,0,.24);
  border:1px solid rgba(255,255,255,.10);
}

.home-simple-champ small,
.home-simple-grid small,
.home-simple-metrics small{
  display:block;
  color:rgba(255,255,255,.58);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.55px;
  font-weight:900;
}

.home-simple-champ b,
.home-simple-grid b,
.home-simple-metrics b{
  color:#fff;
}

.home-simple-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:14px;
}

.home-simple-head.compact{
  align-items:center;
}

.home-simple-head h2{
  font-family:Impact, Arial Black, sans-serif;
  font-style:italic;
  text-transform:uppercase;
  color:#fff;
  font-size:clamp(28px, 7vw, 42px);
  line-height:.95;
  margin:0;
}

.home-simple-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  padding:0 10px;
  border-radius:999px;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.5px;
  font-weight:1000;
}

.home-simple-status.ok{
  background:var(--cr-lime);
  color:#071018;
}

.home-simple-status.open{
  color:#fff;
  background:rgba(168,255,0,.10);
  border:1px solid rgba(168,255,0,.44);
}

.home-simple-status.danger{
  color:#fff;
  background:rgba(255,82,82,.20);
  border:1px solid rgba(255,82,82,.45);
}

.home-simple-grid,
.home-simple-metrics{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:8px;
}

.home-simple-grid > div,
.home-simple-metrics > div{
  min-height:70px;
  padding:10px 8px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.24);
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:center;
}

.home-simple-grid b,
.home-simple-metrics b{
  font-size:18px;
  line-height:1.1;
}

.home-simple-count-label{
  margin:14px 0 10px;
  text-align:center;
  color:rgba(255,255,255,.62);
  text-transform:uppercase;
  letter-spacing:.55px;
  font-size:10px;
  font-weight:1000;
}

.home-simple-action{
  margin-top:14px;
}

.home-simple-action form{
  margin:0;
}

.home-simple-alert{
  margin:0;
  padding:12px;
  border-radius:16px;
  background:rgba(255,82,82,.09);
  border:1px solid rgba(255,82,82,.28);
  text-align:center;
  color:#ff8d8d;
  font-weight:900;
}

.home-simple-link{
  color:var(--cr-lime);
  text-decoration:none;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.5px;
  font-weight:1000;
}

.home-simple-links{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:8px;
}

.home-simple-links a{
  min-height:54px;
  border-radius:16px;
  border:1px solid rgba(168,255,0,.32);
  background:linear-gradient(180deg, rgba(9,17,24,.48), rgba(4,9,14,.60));
  color:#fff;
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 12px;
  text-align:center;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.4px;
  font-weight:1000;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.home-simple-links a:hover{
  border-color:rgba(168,255,0,.72);
  color:var(--cr-lime);
  transform:translateY(-1px);
}

/* Elimina fondos viejos en tarjetas internas del home */
body.home-dashboard-bg .v4-home-dashboard .v4-card,
body.home-dashboard-bg .v4-home-dashboard .v4-card.lime,
body.home-dashboard-bg .v4-home-dashboard .v4-card.bg-field,
body.home-dashboard-bg .v4-home-dashboard .v4-hero,
body.home-dashboard-bg .v4-home-dashboard .bg-field{
  background-image:none !important;
}

@media(max-width:420px){
  .home-simple-hero,
  .home-simple-selector,
  .home-simple-match,
  .home-simple-stats{
    padding:14px 12px;
  }
}


/* =========================================================
   HOME: CAMPEONATO ACTIVO UNIFICADO
   Campeonato activo + modalidad/fecha en el mismo bloque.
========================================================= */

.home-simple-selector{
  display:none !important;
}

.home-champ-unified{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
}

.home-champ-unified > div{
  min-width:0;
}

.home-champ-unified b{
  display:block;
  line-height:1.1;
}

.home-champ-unified span{
  display:block;
  margin-top:4px;
  color:rgba(255,255,255,.68);
  font-size:12px;
  font-weight:800;
}

.home-champ-unified a{
  flex:0 0 auto;
  min-height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(168,255,0,.42);
  background:rgba(168,255,0,.08);
  color:var(--cr-lime);
  text-decoration:none;
  font-size:11px;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.45px;
}

.home-champ-unified a:hover{
  border-color:rgba(168,255,0,.78);
  background:rgba(168,255,0,.14);
}

@media(max-width:380px){
  .home-champ-unified{
    align-items:flex-start !important;
    flex-direction:column;
  }
  .home-champ-unified a{
    width:100%;
  }
}


/* =========================================================
   HOME DASHBOARD: SIN LINKS INFERIORES + COUNTDOWN DESTACADO
========================================================= */

.home-simple-links{
  display:none !important;
}

/* Countdown en una sola columna, centrado y más protagonista */
body.home-dashboard-bg .home-simple .v4-countdown{
  width:100% !important;
  display:grid !important;
  grid-template-columns:1fr !important;
  place-items:center !important;
  min-height:86px !important;
  margin:10px auto 16px !important;
  padding:16px 18px !important;
  border-radius:22px !important;
  border:1px solid rgba(190,255,60,.72) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(168,255,0,.18), transparent 48%),
    linear-gradient(180deg, rgba(168,255,0,.12), rgba(0,0,0,.34)) !important;
  color:#ffffff !important;
  font-family:Impact, Arial Black, sans-serif !important;
  font-size:clamp(38px, 12vw, 58px) !important;
  font-style:italic !important;
  font-weight:900 !important;
  letter-spacing:1px !important;
  line-height:1 !important;
  text-align:center !important;
  text-shadow:
    0 10px 28px rgba(0,0,0,.70),
    0 0 24px rgba(168,255,0,.22) !important;
  box-shadow:
    0 18px 42px rgba(0,0,0,.34),
    0 0 0 4px rgba(168,255,0,.05),
    inset 0 0 28px rgba(168,255,0,.08) !important;
}

/* Si la función imprime varias cajas internas, forzar una sola columna */
body.home-dashboard-bg .home-simple .v4-countdown > *{
  grid-column:1 / -1 !important;
  text-align:center !important;
}

/* Texto de apertura más cercano al contador */
body.home-dashboard-bg .home-simple-count-label{
  margin:16px 0 6px !important;
  color:rgba(255,255,255,.74) !important;
}

/* Reducir aire final al quitar accesos inferiores */
body.home-dashboard-bg .home-simple{
  padding-bottom:0 !important;
}

@media(max-width:420px){
  body.home-dashboard-bg .home-simple .v4-countdown{
    min-height:78px !important;
    padding:14px 12px !important;
    font-size:clamp(34px, 11vw, 48px) !important;
    border-radius:20px !important;
  }
}


/* =========================================================
   HOME DASHBOARD - GRÁFICO EVOLUTIVO
========================================================= */
.home-progress-card{
  margin-top:12px;
  padding:12px;
  border-radius:18px;
  border:1px solid rgba(168,255,0,.32);
  background:rgba(0,0,0,.22);
}

.home-progress-head{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:10px;
}

.home-progress-head span{
  color:var(--cr-lime);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.6px;
  font-weight:1000;
}

.home-progress-head b{
  color:rgba(255,255,255,.78);
  font-size:12px;
  line-height:1.35;
}

.home-progress-chart-wrap{
  width:100%;
  overflow:hidden;
}

.home-progress-svg{
  width:100%;
  height:auto;
  display:block;
}

.home-progress-svg .grid{
  stroke:rgba(255,255,255,.10);
  stroke-width:1;
}

.home-progress-svg .line{
  fill:none;
  stroke:var(--cr-lime);
  stroke-width:3.2;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 0 8px rgba(168,255,0,.22));
}

.home-progress-svg .dot{
  stroke:#071018;
  stroke-width:2;
}
.home-progress-svg .dot.played{
  fill:var(--cr-lime);
}
.home-progress-svg .dot.idle{
  fill:rgba(255,255,255,.45);
}

.home-progress-svg .xlabel{
  fill:rgba(255,255,255,.58);
  font-size:10px;
  font-weight:800;
}

.home-progress-footer{
  margin-top:8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.home-progress-footer small{
  color:rgba(255,255,255,.58);
  font-size:11px;
  font-weight:800;
}

.home-progress-footer strong{
  color:#fff;
  font-size:13px;
}

.home-progress-empty{
  margin:0;
  color:rgba(255,255,255,.70);
  font-size:13px;
  line-height:1.4;
}

@media(max-width:420px){
  .home-progress-card{
    padding:10px;
  }
  .home-progress-footer{
    flex-direction:column;
    align-items:flex-start;
  }
}


/* =========================================================
   COUNTDOWN SINCRONIZADO CON SERVIDOR
========================================================= */
.v4-countdown[data-synced="server"]{
  font-variant-numeric:tabular-nums;
}

.v4-countdown .v4-countbox b{
  font-variant-numeric:tabular-nums;
}


/* =========================================================
   COUNTDOWN MÁXIMA SEGURIDAD
========================================================= */
.v4-countdown[data-synced="server"]{
  font-variant-numeric:tabular-nums;
}

.v4-countdown .v4-countbox b{
  font-variant-numeric:tabular-nums;
}

.v4-countdown.is-open{
  border-color:rgba(168,255,0,.95) !important;
  box-shadow:
    0 18px 42px rgba(0,0,0,.34),
    0 0 0 4px rgba(168,255,0,.08),
    inset 0 0 34px rgba(168,255,0,.14) !important;
}


/* =========================================================
   COUNTDOWN FIX FUNCIONANDO
========================================================= */
.v4-countdown[data-synced="server"],
.v4-countdown .v4-countbox b{
  font-variant-numeric:tabular-nums;
}

.v4-countdown.is-open{
  border-color:rgba(168,255,0,.95) !important;
}


/* =========================================================
   COUNTDOWN HORIZONTAL
   El timer debe mostrarse horizontal, no vertical.
========================================================= */

body.home-dashboard-bg .home-simple .v4-countdown,
.v4-countdown{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:8px !important;
  align-items:stretch !important;
  justify-items:stretch !important;
  width:100% !important;
  margin:10px auto 16px !important;
  padding:10px !important;
  border-radius:22px !important;
  border:1px solid rgba(190,255,60,.72) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(168,255,0,.16), transparent 48%),
    linear-gradient(180deg, rgba(168,255,0,.10), rgba(0,0,0,.30)) !important;
  box-shadow:
    0 18px 42px rgba(0,0,0,.34),
    0 0 0 4px rgba(168,255,0,.05),
    inset 0 0 28px rgba(168,255,0,.08) !important;
}

body.home-dashboard-bg .home-simple .v4-countdown .v4-countbox,
.v4-countdown .v4-countbox{
  min-width:0 !important;
  min-height:68px !important;
  padding:10px 4px !important;
  border-radius:16px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  background:rgba(0,0,0,.26) !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}

body.home-dashboard-bg .home-simple .v4-countdown .v4-countbox b,
.v4-countdown .v4-countbox b{
  display:block !important;
  color:#fff !important;
  font-family:Impact, Arial Black, sans-serif !important;
  font-size:clamp(25px, 7vw, 38px) !important;
  font-style:italic !important;
  font-weight:900 !important;
  line-height:.9 !important;
  letter-spacing:.4px !important;
  text-shadow:
    0 8px 22px rgba(0,0,0,.70),
    0 0 18px rgba(168,255,0,.22) !important;
  font-variant-numeric:tabular-nums;
}

body.home-dashboard-bg .home-simple .v4-countdown .v4-countbox small,
.v4-countdown .v4-countbox small{
  display:block !important;
  margin-top:6px !important;
  color:rgba(255,255,255,.68) !important;
  font-size:9px !important;
  font-weight:1000 !important;
  line-height:1 !important;
  text-transform:uppercase !important;
  letter-spacing:.5px !important;
}

@media(max-width:380px){
  body.home-dashboard-bg .home-simple .v4-countdown,
  .v4-countdown{
    gap:6px !important;
    padding:8px !important;
  }

  body.home-dashboard-bg .home-simple .v4-countdown .v4-countbox,
  .v4-countdown .v4-countbox{
    min-height:62px !important;
    padding:9px 3px !important;
    border-radius:14px !important;
  }

  body.home-dashboard-bg .home-simple .v4-countdown .v4-countbox b,
  .v4-countdown .v4-countbox b{
    font-size:clamp(22px, 6.5vw, 32px) !important;
  }

  body.home-dashboard-bg .home-simple .v4-countdown .v4-countbox small,
  .v4-countdown .v4-countbox small{
    font-size:8px !important;
  }
}


/* =========================================================
   FIX FINAL COUNTDOWN HORIZONTAL HOME
   Fuerza Días | Horas | Min | Seg en una sola fila.
========================================================= */

html body.home-dashboard-bg .v4-home-dashboard.home-simple .home-simple-match .v4-countdown,
html body.home-dashboard-bg .home-simple .home-simple-match .v4-countdown,
html body.home-dashboard-bg .home-simple .v4-countdown{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  grid-auto-flow:column !important;
  grid-auto-columns:minmax(0, 1fr) !important;
  column-gap:8px !important;
  row-gap:0 !important;
  align-items:stretch !important;
  justify-items:stretch !important;
  place-items:stretch !important;
  width:100% !important;
  min-height:auto !important;
  padding:10px !important;
  margin:10px auto 16px !important;
  box-sizing:border-box !important;
}

html body.home-dashboard-bg .v4-home-dashboard.home-simple .home-simple-match .v4-countdown .v4-countbox,
html body.home-dashboard-bg .home-simple .home-simple-match .v4-countdown .v4-countbox,
html body.home-dashboard-bg .home-simple .v4-countdown .v4-countbox{
  width:auto !important;
  max-width:none !important;
  min-width:0 !important;
  min-height:68px !important;
  grid-column:auto !important;
  grid-row:auto !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  padding:10px 4px !important;
  margin:0 !important;
  border-radius:16px !important;
  text-align:center !important;
  box-sizing:border-box !important;
}

/* Anula explícitamente cualquier regla previa que mandaba cada hijo a 1 / -1 */
html body.home-dashboard-bg .v4-home-dashboard.home-simple .home-simple-match .v4-countdown > *,
html body.home-dashboard-bg .home-simple .home-simple-match .v4-countdown > *,
html body.home-dashboard-bg .home-simple .v4-countdown > *{
  grid-column:auto !important;
  grid-row:auto !important;
}

/* Tipografía compacta para que no fuerce salto vertical */
html body.home-dashboard-bg .home-simple .v4-countdown .v4-countbox b{
  font-size:clamp(22px, 6.4vw, 34px) !important;
  line-height:.9 !important;
  white-space:nowrap !important;
}

html body.home-dashboard-bg .home-simple .v4-countdown .v4-countbox small{
  font-size:8px !important;
  line-height:1 !important;
  white-space:nowrap !important;
  margin-top:6px !important;
}

@media(max-width:360px){
  html body.home-dashboard-bg .home-simple .v4-countdown{
    column-gap:5px !important;
    padding:7px !important;
  }

  html body.home-dashboard-bg .home-simple .v4-countdown .v4-countbox{
    min-height:58px !important;
    padding:8px 2px !important;
    border-radius:13px !important;
  }

  html body.home-dashboard-bg .home-simple .v4-countdown .v4-countbox b{
    font-size:clamp(19px, 6vw, 28px) !important;
  }

  html body.home-dashboard-bg .home-simple .v4-countdown .v4-countbox small{
    font-size:7px !important;
  }
}


/* =========================================================
   BOTTOM NAV - BOTÓN PICHANGAS MEJORADO
   Link central: <a href="index.php?p=pichangas">Pichangas</a>
========================================================= */

.bottom.v4-bottom{
  position:fixed !important;
  left:50% !important;
  bottom:0 !important;
  transform:translateX(-50%) !important;
  width:min(100%, 520px) !important;
  min-height:86px !important;
  padding:12px 10px 10px !important;
  display:grid !important;
  grid-template-columns:repeat(5, minmax(0, 1fr)) !important;
  align-items:end !important;
  gap:4px !important;
  border-radius:30px 30px 0 0 !important;
  border:1px solid rgba(168,255,0,.32) !important;
  border-bottom:0 !important;
  background:linear-gradient(180deg, rgba(5,12,18,.92), rgba(1,5,8,.98)) !important;
  backdrop-filter:blur(16px) !important;
  -webkit-backdrop-filter:blur(16px) !important;
  box-shadow:0 -18px 44px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05) !important;
  z-index:50 !important;
}

.bottom.v4-bottom a{
  position:relative !important;
  min-width:0 !important;
  min-height:56px !important;
  padding:8px 3px 6px !important;
  border-radius:18px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
  color:rgba(255,255,255,.76) !important;
  text-decoration:none !important;
  font-size:10.5px !important;
  font-weight:1000 !important;
  line-height:1 !important;
  letter-spacing:-.15px !important;
  text-align:center !important;
  transition:transform .18s ease, color .18s ease, background .18s ease, border-color .18s ease, filter .18s ease;
}

.bottom.v4-bottom a:hover,
.bottom.v4-bottom a.active{
  color:#fff !important;
  background:rgba(168,255,0,.07) !important;
}

/* Íconos base del nav */
.bottom.v4-bottom a::before{
  content:"" !important;
  display:block !important;
  width:22px !important;
  height:22px !important;
  margin:0 auto 2px !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  background-size:contain !important;
  opacity:.92 !important;
  filter:drop-shadow(0 0 6px rgba(168,255,0,.10));
}

.bottom.v4-bottom a[href="index.php"]::before{ background-image:url("../img/icons/icon-home.svg") !important; }
.bottom.v4-bottom a[href*="championships"]::before{ background-image:url("../img/icons/icon-championships.svg") !important; }
.bottom.v4-bottom a[href*="ranking"]::before{ background-image:url("../img/icons/icon-ranking.svg") !important; }
.bottom.v4-bottom a[href*="profile"]::before{ background-image:url("../img/icons/icon-user.svg") !important; }

/* PICHANGAS: botón central protagonista */
.bottom.v4-bottom a[href*="pichangas"]{
  width:72px !important;
  height:72px !important;
  min-height:72px !important;
  padding:0 !important;
  margin:-34px auto 0 !important;
  border-radius:999px !important;
  color:#071018 !important;
  background:
    radial-gradient(circle at 50% 35%, #ecff6a 0%, #baff13 34%, #8eff00 68%, #66cb00 100%) !important;
  border:3px solid rgba(225,255,112,.95) !important;
  box-shadow:
    0 0 0 9px rgba(168,255,0,.13),
    0 0 28px rgba(168,255,0,.38),
    0 18px 38px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.68) !important;
  transform:translateY(-2px) !important;
  overflow:visible !important;
  font-size:0 !important;
}

.bottom.v4-bottom a[href*="pichangas"]::before{
  width:36px !important;
  height:36px !important;
  margin:0 !important;
  opacity:1 !important;
  background-image:url("../img/icons/icon-pichangas.svg") !important;
  filter:
    drop-shadow(0 2px 0 rgba(255,255,255,.20))
    drop-shadow(0 6px 10px rgba(0,0,0,.30)) !important;
}

/* Etiqueta flotante bajo el botón central */
.bottom.v4-bottom a[href*="pichangas"]::after{
  content:"Pichangas" !important;
  position:absolute !important;
  left:50% !important;
  top:78px !important;
  transform:translateX(-50%) !important;
  color:#fff !important;
  font-size:10.5px !important;
  font-weight:1000 !important;
  line-height:1 !important;
  letter-spacing:-.15px !important;
  text-shadow:0 3px 12px rgba(0,0,0,.70) !important;
  white-space:nowrap !important;
}

.bottom.v4-bottom a[href*="pichangas"]:hover,
.bottom.v4-bottom a[href*="pichangas"].active{
  color:#071018 !important;
  transform:translateY(-6px) scale(1.04) !important;
  background:
    radial-gradient(circle at 50% 35%, #f5ff8d 0%, #caff23 34%, #9dff00 68%, #73dd00 100%) !important;
  box-shadow:
    0 0 0 11px rgba(168,255,0,.16),
    0 0 36px rgba(168,255,0,.48),
    0 20px 42px rgba(0,0,0,.58),
    inset 0 1px 0 rgba(255,255,255,.72) !important;
}

.bottom.v4-bottom a[href*="pichangas"].active::after{
  color:var(--cr-lime) !important;
}

/* Indicador activo para links normales */
.bottom.v4-bottom a:not([href*="pichangas"]).active::after{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  bottom:0 !important;
  transform:translateX(-50%) !important;
  width:22px !important;
  height:3px !important;
  border-radius:999px !important;
  background:var(--cr-lime) !important;
  box-shadow:0 0 12px rgba(168,255,0,.45) !important;
}

@media(max-width:380px){
  .bottom.v4-bottom{
    min-height:82px !important;
    padding-left:6px !important;
    padding-right:6px !important;
    gap:2px !important;
  }

  .bottom.v4-bottom a{
    font-size:9.5px !important;
  }

  .bottom.v4-bottom a[href*="pichangas"]{
    width:66px !important;
    height:66px !important;
    min-height:66px !important;
    margin-top:-31px !important;
  }

  .bottom.v4-bottom a[href*="pichangas"]::before{
    width:32px !important;
    height:32px !important;
  }

  .bottom.v4-bottom a[href*="pichangas"]::after{
    top:72px !important;
    font-size:9.5px !important;
  }
}


/* =========================================================
   BOTTOM NAV PICHANGAS - ICONO + BLANCO
========================================================= */

.bottom.v4-bottom a[href*="pichangas"]::before{
  content:"+" !important;
  background-image:none !important;
  width:42px !important;
  height:42px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:#ffffff !important;
  font-family:Arial Black, Impact, sans-serif !important;
  font-size:42px !important;
  font-weight:1000 !important;
  line-height:1 !important;
  text-shadow:
    0 3px 10px rgba(0,0,0,.45),
    0 0 16px rgba(255,255,255,.25) !important;
  filter:none !important;
}

.bottom.v4-bottom a[href*="pichangas"]:hover::before,
.bottom.v4-bottom a[href*="pichangas"].active::before{
  color:#ffffff !important;
  text-shadow:
    0 3px 10px rgba(0,0,0,.50),
    0 0 22px rgba(255,255,255,.35) !important;
}

@media(max-width:380px){
  .bottom.v4-bottom a[href*="pichangas"]::before{
    width:38px !important;
    height:38px !important;
    font-size:38px !important;
  }
}


/* =========================================================
   BOTTOM NAV PICHANGAS - SOLO + SIN TEXTO
========================================================= */

/* Oculta completamente la etiqueta "Pichangas" del botón central */
.bottom.v4-bottom a[href*="pichangas"]{
  font-size:0 !important;
  color:transparent !important;
  text-indent:0 !important;
}

/* Anula el label flotante que decía Pichangas */
.bottom.v4-bottom a[href*="pichangas"]::after{
  content:"" !important;
  display:none !important;
}

/* Mantiene solo el + blanco visible */
.bottom.v4-bottom a[href*="pichangas"]::before{
  content:"+" !important;
  background-image:none !important;
  width:42px !important;
  height:42px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:#ffffff !important;
  font-family:Arial Black, Impact, sans-serif !important;
  font-size:42px !important;
  font-weight:1000 !important;
  line-height:1 !important;
  text-indent:0 !important;
  text-shadow:
    0 3px 10px rgba(0,0,0,.45),
    0 0 16px rgba(255,255,255,.25) !important;
  filter:none !important;
}

@media(max-width:380px){
  .bottom.v4-bottom a[href*="pichangas"]::before{
    width:38px !important;
    height:38px !important;
    font-size:38px !important;
  }
}


/* =========================================================
   BOTTOM NAV MOBILE FIT
   Evita que el nav inferior se salga de la resolución móvil.
========================================================= */

html,
body{
  overflow-x:hidden !important;
}

body{
  padding-bottom:calc(92px + env(safe-area-inset-bottom, 0px)) !important;
}

.bottom.v4-bottom{
  box-sizing:border-box !important;
  position:fixed !important;
  left:50% !important;
  right:auto !important;
  bottom:0 !important;
  transform:translateX(-50%) !important;
  width:calc(100vw - 16px) !important;
  max-width:520px !important;
  min-width:0 !important;
  min-height:82px !important;
  padding:10px 8px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  display:grid !important;
  grid-template-columns:repeat(5, minmax(0, 1fr)) !important;
  align-items:end !important;
  gap:2px !important;
  overflow:visible !important;
  border-radius:26px 26px 0 0 !important;
}

.bottom.v4-bottom a{
  box-sizing:border-box !important;
  min-width:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
  white-space:nowrap !important;
  text-overflow:ellipsis !important;
  min-height:52px !important;
  padding:7px 2px 6px !important;
  font-size:9.5px !important;
  letter-spacing:-.35px !important;
}

.bottom.v4-bottom a::before{
  width:21px !important;
  height:21px !important;
  flex:0 0 auto !important;
}

/* Botón central + dentro del viewport */
.bottom.v4-bottom a[href*="pichangas"]{
  width:62px !important;
  height:62px !important;
  min-width:62px !important;
  min-height:62px !important;
  max-width:62px !important;
  max-height:62px !important;
  margin:-26px auto 0 !important;
  flex:0 0 62px !important;
  overflow:visible !important;
  transform:none !important;
}

.bottom.v4-bottom a[href*="pichangas"]::before{
  width:34px !important;
  height:34px !important;
  font-size:34px !important;
  line-height:34px !important;
}

/* No mostrar texto ni pseudo label del botón central */
.bottom.v4-bottom a[href*="pichangas"]::after{
  content:"" !important;
  display:none !important;
}

.bottom.v4-bottom a[href*="pichangas"]:hover,
.bottom.v4-bottom a[href*="pichangas"].active{
  transform:translateY(-2px) scale(1.02) !important;
}

/* Ajuste específico en pantallas angostas */
@media(max-width:390px){
  .bottom.v4-bottom{
    width:calc(100vw - 10px) !important;
    min-height:78px !important;
    padding-left:5px !important;
    padding-right:5px !important;
    gap:1px !important;
    border-radius:22px 22px 0 0 !important;
  }

  .bottom.v4-bottom a{
    min-height:48px !important;
    font-size:8.7px !important;
    padding-left:1px !important;
    padding-right:1px !important;
  }

  .bottom.v4-bottom a::before{
    width:19px !important;
    height:19px !important;
  }

  .bottom.v4-bottom a[href*="pichangas"]{
    width:56px !important;
    height:56px !important;
    min-width:56px !important;
    min-height:56px !important;
    max-width:56px !important;
    max-height:56px !important;
    margin-top:-22px !important;
  }

  .bottom.v4-bottom a[href*="pichangas"]::before{
    width:31px !important;
    height:31px !important;
    font-size:31px !important;
    line-height:31px !important;
  }
}

@media(max-width:340px){
  .bottom.v4-bottom{
    width:100vw !important;
    border-radius:18px 18px 0 0 !important;
  }

  .bottom.v4-bottom a{
    font-size:8px !important;
  }

  .bottom.v4-bottom a[href*="pichangas"]{
    width:52px !important;
    height:52px !important;
    min-width:52px !important;
    min-height:52px !important;
    max-width:52px !important;
    max-height:52px !important;
  }

  .bottom.v4-bottom a[href*="pichangas"]::before{
    width:28px !important;
    height:28px !important;
    font-size:28px !important;
    line-height:28px !important;
  }
}


/* =========================================================
   BOTTOM NAV SOLO ICONOS
   Oculta etiquetas: Inicio, Campeonatos, Pichangas, Ranking, Perfil.
========================================================= */

.bottom.v4-bottom{
  min-height:74px !important;
  padding-top:10px !important;
  padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px)) !important;
}

.bottom.v4-bottom a{
  font-size:0 !important;
  color:transparent !important;
  letter-spacing:0 !important;
  text-indent:0 !important;
  overflow:visible !important;
  min-height:46px !important;
  padding:6px 2px !important;
}

.bottom.v4-bottom a::before{
  width:25px !important;
  height:25px !important;
  margin:0 auto !important;
}

/* Botón central: solo + */
.bottom.v4-bottom a[href*="pichangas"]{
  font-size:0 !important;
  color:transparent !important;
  width:58px !important;
  height:58px !important;
  min-width:58px !important;
  min-height:58px !important;
  max-width:58px !important;
  max-height:58px !important;
  margin:-22px auto 0 !important;
}

.bottom.v4-bottom a[href*="pichangas"]::before{
  content:"+" !important;
  width:34px !important;
  height:34px !important;
  font-size:34px !important;
  line-height:34px !important;
  color:#fff !important;
  background-image:none !important;
}

/* Anula cualquier texto flotante */
.bottom.v4-bottom a::after,
.bottom.v4-bottom a[href*="pichangas"]::after,
.bottom.v4-bottom a:not([href*="pichangas"]).active::after{
  content:"" !important;
  display:none !important;
}

/* Estado activo solo con glow en icono/fondo */
.bottom.v4-bottom a.active{
  background:rgba(168,255,0,.10) !important;
  border:1px solid rgba(168,255,0,.22) !important;
}

.bottom.v4-bottom a[href*="pichangas"].active{
  border:3px solid rgba(225,255,112,.95) !important;
}

@media(max-width:390px){
  .bottom.v4-bottom{
    min-height:70px !important;
  }

  .bottom.v4-bottom a{
    min-height:42px !important;
  }

  .bottom.v4-bottom a::before{
    width:23px !important;
    height:23px !important;
  }

  .bottom.v4-bottom a[href*="pichangas"]{
    width:54px !important;
    height:54px !important;
    min-width:54px !important;
    min-height:54px !important;
    max-width:54px !important;
    max-height:54px !important;
    margin-top:-20px !important;
  }

  .bottom.v4-bottom a[href*="pichangas"]::before{
    width:31px !important;
    height:31px !important;
    font-size:31px !important;
    line-height:31px !important;
  }
}

/* RANKING TABS ICONOS - ESTÉTICA DASHBOARD */
.ranking-tabs-icons,.v4-tabs.four.ranking-tabs-icons{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important;padding:8px!important;margin:12px 0 16px!important;border:1px solid rgba(168,255,0,.30)!important;border-radius:22px!important;background:linear-gradient(180deg,rgba(9,17,24,.44),rgba(4,9,14,.56))!important;backdrop-filter:blur(14px)!important;-webkit-backdrop-filter:blur(14px)!important;box-shadow:0 18px 42px rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.04)!important}
.ranking-tabs-icons a{min-width:0!important;min-height:58px!important;padding:8px 4px!important;border-radius:17px!important;border:1px solid rgba(255,255,255,.10)!important;background:rgba(0,0,0,.22)!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:5px!important;color:rgba(255,255,255,.72)!important;text-decoration:none!important;text-align:center!important;font-size:9px!important;line-height:1!important;font-weight:1000!important;text-transform:uppercase!important;letter-spacing:.25px!important;transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease,color .18s ease!important}
.ranking-tabs-icons a img{width:25px!important;height:25px!important;display:block!important;object-fit:contain!important;opacity:.86!important;filter:drop-shadow(0 0 8px rgba(168,255,0,.12))!important}
.ranking-tabs-icons a span{display:block!important;max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
.ranking-tabs-icons a:hover{transform:translateY(-1px)!important;border-color:rgba(168,255,0,.54)!important;color:#fff!important;background:rgba(168,255,0,.08)!important}
.ranking-tabs-icons a.active{color:#071018!important;border-color:rgba(205,255,46,.88)!important;background:linear-gradient(180deg,#d8ff39 0%,#a8ff00 52%,#79e900 100%)!important;box-shadow:0 12px 28px rgba(168,255,0,.22),inset 0 1px 0 rgba(255,255,255,.55)!important}
.ranking-tabs-icons a.active img{filter:brightness(0) drop-shadow(0 2px 0 rgba(255,255,255,.18))!important;opacity:1!important}
@media(max-width:390px){.ranking-tabs-icons{gap:6px!important;padding:7px!important;border-radius:20px!important}.ranking-tabs-icons a{min-height:54px!important;padding:7px 3px!important;font-size:8px!important;border-radius:15px!important}.ranking-tabs-icons a img{width:23px!important;height:23px!important}}
@media(max-width:340px){.ranking-tabs-icons a span{display:none!important}.ranking-tabs-icons a{min-height:48px!important}}


/* =========================================================
   RANKING BADGES - JOYA / LUCHADOR / MEDIOCRE
   General y Goles:
   - Joya rank 1-5
   - Luchador rank 6-10
   - Mediocre rank 11+
   Cracks y Arqueros:
   - Joya rank 1-2
   - Luchador rank 3-4
   - Mediocre rank 5+
========================================================= */

.v4-rank-card.ranking-card-with-badge{
  position:relative !important;
  padding-left:86px !important;
  min-height:104px !important;
  overflow:hidden !important;
  background:linear-gradient(180deg, rgba(9,17,24,.46), rgba(4,9,14,.62)) !important;
  border:1px solid rgba(168,255,0,.26) !important;
  backdrop-filter:blur(14px) !important;
  -webkit-backdrop-filter:blur(14px) !important;
}

.ranking-badge{
  position:absolute !important;
  left:12px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:58px !important;
  height:76px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:3px !important;
  z-index:2 !important;
  pointer-events:none !important;
}

.ranking-badge img{
  width:52px !important;
  height:52px !important;
  display:block !important;
  object-fit:contain !important;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.38)) !important;
}

.ranking-badge small{
  display:block !important;
  max-width:70px !important;
  padding:3px 6px !important;
  border-radius:999px !important;
  color:#071018 !important;
  background:var(--cr-lime) !important;
  font-size:7.5px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  text-transform:uppercase !important;
  letter-spacing:.3px !important;
  box-shadow:0 0 12px rgba(168,255,0,.18) !important;
}

.ranking-badge-joya img{
  filter:
    drop-shadow(0 0 12px rgba(0,210,255,.22))
    drop-shadow(0 8px 14px rgba(0,0,0,.38)) !important;
}

.ranking-badge-luchador img{
  filter:
    drop-shadow(0 0 12px rgba(255,193,7,.22))
    drop-shadow(0 8px 14px rgba(0,0,0,.38)) !important;
}

.ranking-badge-mediocre img{
  opacity:.95 !important;
  filter:
    drop-shadow(0 0 10px rgba(168,255,0,.13))
    drop-shadow(0 8px 14px rgba(0,0,0,.38)) !important;
}

.ranking-badge-mediocre small{
  background:rgba(168,255,0,.82) !important;
}

@media(max-width:390px){
  .v4-rank-card.ranking-card-with-badge{
    padding-left:76px !important;
    min-height:96px !important;
  }

  .ranking-badge{
    left:9px !important;
    width:52px !important;
    height:70px !important;
  }

  .ranking-badge img{
    width:46px !important;
    height:46px !important;
  }

  .ranking-badge small{
    font-size:7px !important;
    padding:3px 5px !important;
  }
}


/* =========================================================
   RANKING BADGES FIT FINAL
========================================================= */
.v4-rank-card.ranking-card-with-badge{
  position:relative !important;
  padding-left:82px !important;
  min-height:96px !important;
}

.v4-rank-card.ranking-card-with-badge > .avatar,
.v4-rank-card.ranking-card-with-badge > img:not(.ranking-badge img){
  flex:0 0 auto !important;
}

.v4-rank-card.ranking-card-with-badge .ranking-badge{
  position:absolute !important;
  left:10px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
}

.v4-rank-card.ranking-card-with-badge .ranking-badge + .avatar,
.v4-rank-card.ranking-card-with-badge .ranking-badge + img{
  margin-left:0 !important;
}

@media(max-width:390px){
  .v4-rank-card.ranking-card-with-badge{
    padding-left:74px !important;
  }
}


/* =========================================================
   RANKING BADGES 4 NIVELES - PNG TRANSPARENTES
   Joya / Luchador / Mediocre / Basura
========================================================= */

.v4-rank-card.ranking-card-with-badge{
  position:relative !important;
  padding-left:84px !important;
  min-height:98px !important;
  overflow:hidden !important;
}

.ranking-badge{
  position:absolute !important;
  left:10px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:60px !important;
  height:78px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:3px !important;
  pointer-events:none !important;
  z-index:3 !important;
}

.ranking-badge img{
  width:54px !important;
  height:54px !important;
  object-fit:contain !important;
  display:block !important;
  background:transparent !important;
}

.ranking-badge small{
  display:block !important;
  max-width:74px !important;
  padding:3px 6px !important;
  border-radius:999px !important;
  color:#071018 !important;
  background:var(--cr-lime) !important;
  font-size:7.2px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  text-transform:uppercase !important;
  letter-spacing:.25px !important;
  box-shadow:0 0 12px rgba(168,255,0,.18) !important;
}

/* efectos por tipo */
.ranking-badge-joya img{
  filter:
    drop-shadow(0 0 13px rgba(0,210,255,.35))
    drop-shadow(0 8px 14px rgba(0,0,0,.38)) !important;
}

.ranking-badge-luchador img{
  filter:
    drop-shadow(0 0 13px rgba(255,193,7,.30))
    drop-shadow(0 8px 14px rgba(0,0,0,.38)) !important;
}

.ranking-badge-mediocre img{
  filter:
    drop-shadow(0 0 10px rgba(168,255,0,.18))
    drop-shadow(0 8px 14px rgba(0,0,0,.38)) !important;
}

.ranking-badge-basura img{
  filter:
    drop-shadow(0 0 10px rgba(139,83,32,.28))
    drop-shadow(0 8px 14px rgba(0,0,0,.40)) !important;
}

.ranking-badge-basura small{
  color:#fff !important;
  background:linear-gradient(180deg,#8b5320,#5d3515) !important;
  box-shadow:0 0 12px rgba(139,83,32,.22) !important;
}

@media(max-width:390px){
  .v4-rank-card.ranking-card-with-badge{
    padding-left:76px !important;
    min-height:94px !important;
  }

  .ranking-badge{
    left:8px !important;
    width:54px !important;
    height:72px !important;
  }

  .ranking-badge img{
    width:48px !important;
    height:48px !important;
  }

  .ranking-badge small{
    font-size:6.8px !important;
    padding:3px 5px !important;
  }
}


/* =========================================================
   RANKING GENERAL - TABLA POR GRUPOS
   Datos: ASIST / REND / DLS / GC / PGP / PTS
========================================================= */

.ranking-general-board{
  display:flex;
  flex-direction:column;
  gap:18px;
  margin:14px 0 28px;
}

.ranking-general-note{
  padding:11px 12px;
  border:1px solid rgba(168,255,0,.24);
  border-radius:16px;
  background:rgba(0,0,0,.22);
  color:rgba(255,255,255,.68);
  font-size:10.5px;
  line-height:1.35;
  font-weight:800;
}

.ranking-group{
  border:1px solid rgba(168,255,0,.30);
  border-radius:24px;
  overflow:hidden;
  background:linear-gradient(180deg,rgba(9,17,24,.44),rgba(4,9,14,.56));
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 18px 42px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.04);
}

.ranking-group-title{
  min-height:74px;
  padding:12px 14px;
  display:flex;
  align-items:center;
  gap:12px;
  border-bottom:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.18);
}

.ranking-group-title .ranking-badge{
  position:static !important;
  transform:none !important;
  width:54px !important;
  height:58px !important;
  flex:0 0 54px !important;
}

.ranking-group-title .ranking-badge img{
  width:48px !important;
  height:48px !important;
}

.ranking-group-title .ranking-badge small{
  display:none !important;
}

.ranking-group-title strong{
  color:#fff;
  font-family:Impact, Arial Black, sans-serif;
  font-size:clamp(26px,7vw,38px);
  line-height:.95;
  font-style:italic;
  letter-spacing:.4px;
  text-transform:uppercase;
  text-shadow:0 10px 24px rgba(0,0,0,.55);
}

.ranking-table{
  display:grid;
  grid-template-columns:32px minmax(118px,1.4fr) repeat(5, minmax(42px,.55fr)) minmax(44px,.65fr);
  align-items:center;
  gap:0;
}

.ranking-table-head{
  min-height:36px;
  padding:0 8px;
  background:rgba(0,0,0,.34);
  color:#fff;
  font-size:9.5px;
  line-height:1;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.35px;
  border-bottom:1px solid rgba(255,255,255,.10);
}

.ranking-table-row{
  min-height:50px;
  padding:0 8px;
  color:#fff;
  text-decoration:none;
  border-bottom:1px solid rgba(0,0,0,.38);
  background:rgba(255,255,255,.035);
  transition:background .18s ease, transform .18s ease;
}

.ranking-table-row:hover{
  background:rgba(168,255,0,.08);
}

.ranking-table-row > span,
.ranking-table-head > span{
  min-width:0;
  text-align:center;
}

.ranking-table-row .rank-num{
  color:#0057b8;
  background:rgba(255,255,255,.90);
  min-height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-left:-8px;
  font-size:18px;
  font-weight:1000;
}

.ranking-table-row .rank-player{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  text-align:left;
  padding-left:10px;
  font-size:15px;
  font-weight:1000;
  overflow:hidden;
}

.ranking-table-row .rank-player b{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.ranking-table-row .rank-player .avatar{
  flex:0 0 auto;
}

.ranking-table-row span:not(.rank-player):not(.rank-num){
  color:#0057b8;
  font-size:13px;
  font-weight:1000;
}

.ranking-table-row .rank-points{
  min-height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-right:-8px;
  color:#fff !important;
  font-size:22px !important;
  font-weight:1000 !important;
}

/* Colores por grupo */
.ranking-group-joya .ranking-table-row .rank-player,
.ranking-group-joya .ranking-table-row .rank-points{
  background:rgba(0,164,174,.84);
}
.ranking-group-luchador .ranking-table-row .rank-player,
.ranking-group-luchador .ranking-table-row .rank-points{
  background:rgba(54,142,10,.86);
}
.ranking-group-mediocre .ranking-table-row .rank-player,
.ranking-group-mediocre .ranking-table-row .rank-points{
  background:rgba(157,139,0,.86);
}
.ranking-group-basura .ranking-table-row .rank-player,
.ranking-group-basura .ranking-table-row .rank-points{
  background:rgba(158,80,14,.88);
}

.ranking-group-joya{
  border-color:rgba(0,220,255,.38);
}
.ranking-group-luchador{
  border-color:rgba(168,255,0,.36);
}
.ranking-group-mediocre{
  border-color:rgba(255,220,40,.34);
}
.ranking-group-basura{
  border-color:rgba(198,96,20,.42);
}

/* Mobile compacto */
@media(max-width:430px){
  .ranking-table{
    grid-template-columns:28px minmax(92px,1.2fr) repeat(5, minmax(31px,.45fr)) minmax(36px,.52fr);
  }

  .ranking-table-head{
    font-size:8px;
    padding:0 5px;
  }

  .ranking-table-row{
    min-height:46px;
    padding:0 5px;
  }

  .ranking-table-row .rank-num{
    min-height:46px;
    margin-left:-5px;
    font-size:15px;
  }

  .ranking-table-row .rank-player{
    gap:5px;
    padding-left:6px;
    font-size:12px;
  }

  .ranking-table-row .rank-player .avatar{
    width:24px !important;
    height:24px !important;
  }

  .ranking-table-row span:not(.rank-player):not(.rank-num){
    font-size:10.5px;
  }

  .ranking-table-row .rank-points{
    min-height:46px;
    margin-right:-5px;
    font-size:17px !important;
  }

  .ranking-group-title{
    min-height:66px;
    padding:10px 12px;
  }

  .ranking-group-title .ranking-badge{
    width:48px !important;
    height:50px !important;
    flex-basis:48px !important;
  }

  .ranking-group-title .ranking-badge img{
    width:43px !important;
    height:43px !important;
  }
}

@media(max-width:360px){
  .ranking-table{
    grid-template-columns:26px minmax(78px,1.1fr) repeat(5, minmax(27px,.4fr)) minmax(32px,.48fr);
  }

  .ranking-table-head{
    font-size:7px;
  }

  .ranking-table-row .rank-player{
    font-size:11px;
  }

  .ranking-table-row .rank-player .avatar{
    display:none !important;
  }

  .ranking-table-row span:not(.rank-player):not(.rank-num){
    font-size:9px;
  }
}


/* =========================================================
   RANKING GENERAL - NUEVA GRÁFICA CRACKS
   Implementa look tipo dashboard oscuro/neón con tabla limpia.
========================================================= */

body.home-dashboard-bg .ranking-general-board,
.ranking-general-board{
  gap:22px !important;
  margin:16px 0 34px !important;
}

/* Nota compacta superior */
.ranking-general-note{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:6px 10px !important;
  padding:14px 16px !important;
  border:1px solid rgba(168,255,0,.34) !important;
  border-radius:22px !important;
  background:linear-gradient(180deg,rgba(9,17,24,.48),rgba(4,9,14,.62)) !important;
  color:rgba(255,255,255,.78) !important;
  font-size:12px !important;
  line-height:1.35 !important;
  font-weight:900 !important;
  box-shadow:0 14px 32px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.04) !important;
}

.ranking-general-note span{
  display:inline-flex !important;
  align-items:center !important;
  white-space:nowrap !important;
}

.ranking-general-note span:not(:last-child)::after{
  content:"•";
  margin-left:10px;
  color:rgba(168,255,0,.82);
}

/* Grupo general */
.ranking-group{
  position:relative !important;
  overflow:hidden !important;
  border-radius:24px !important;
  background:
    radial-gradient(circle at 82% 16%, rgba(168,255,0,.08), transparent 30%),
    linear-gradient(180deg,rgba(5,13,18,.72),rgba(2,6,9,.88)) !important;
  backdrop-filter:blur(15px) !important;
  -webkit-backdrop-filter:blur(15px) !important;
  box-shadow:
    0 22px 50px rgba(0,0,0,.42),
    inset 0 0 0 1px rgba(255,255,255,.045) !important;
}

.ranking-group::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.24;
  background:
    linear-gradient(110deg, transparent 0%, rgba(255,255,255,.10) 44%, transparent 64%);
  transform:translateX(-70%);
}

.ranking-group:hover::before{
  animation:rankingSweep 1.2s ease;
}

@keyframes rankingSweep{
  from{transform:translateX(-75%)}
  to{transform:translateX(85%)}
}

/* Colores de grupo */
.ranking-group-joya{
  border-color:rgba(0,220,255,.70) !important;
  box-shadow:0 22px 50px rgba(0,0,0,.42), 0 0 0 1px rgba(0,220,255,.16), inset 0 0 24px rgba(0,210,255,.06) !important;
}
.ranking-group-luchador{
  border-color:rgba(168,255,0,.58) !important;
  box-shadow:0 22px 50px rgba(0,0,0,.42), 0 0 0 1px rgba(168,255,0,.14), inset 0 0 24px rgba(168,255,0,.05) !important;
}
.ranking-group-mediocre{
  border-color:rgba(255,220,40,.52) !important;
  box-shadow:0 22px 50px rgba(0,0,0,.42), 0 0 0 1px rgba(255,220,40,.12), inset 0 0 24px rgba(255,220,40,.04) !important;
}
.ranking-group-basura{
  border-color:rgba(255,132,26,.56) !important;
  box-shadow:0 22px 50px rgba(0,0,0,.42), 0 0 0 1px rgba(255,132,26,.14), inset 0 0 24px rgba(255,132,26,.05) !important;
}

/* Título de grupo */
.ranking-group-title{
  position:relative !important;
  min-height:92px !important;
  padding:18px 20px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  border-bottom:1px solid rgba(255,255,255,.12) !important;
  background:
    radial-gradient(circle at 15% 50%, rgba(255,255,255,.08), transparent 34%),
    linear-gradient(180deg,rgba(0,0,0,.26),rgba(0,0,0,.34)) !important;
}

.ranking-group-title-main{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:16px;
}

.ranking-group-title .ranking-badge{
  position:static !important;
  transform:none !important;
  width:64px !important;
  height:64px !important;
  flex:0 0 64px !important;
}

.ranking-group-title .ranking-badge img{
  width:62px !important;
  height:62px !important;
}

.ranking-group-title .ranking-badge small{
  display:none !important;
}

.ranking-group-title strong{
  color:#fff !important;
  font-family:Impact, Arial Black, sans-serif !important;
  font-size:clamp(32px,7.8vw,54px) !important;
  line-height:.9 !important;
  font-style:italic !important;
  letter-spacing:.2px !important;
  text-transform:uppercase !important;
  text-shadow:0 12px 26px rgba(0,0,0,.70), 0 0 18px rgba(255,255,255,.12) !important;
}

.ranking-group-watermark{
  position:absolute !important;
  right:18px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  opacity:.10 !important;
  width:86px !important;
  height:86px !important;
  pointer-events:none !important;
}

.ranking-group-watermark .ranking-badge,
.ranking-group-watermark .ranking-badge img{
  width:86px !important;
  height:86px !important;
}

.ranking-group-watermark .ranking-badge small{
  display:none !important;
}

/* Tabla */
.ranking-table{
  grid-template-columns:48px minmax(170px,1.35fr) minmax(72px,.62fr) minmax(72px,.62fr) minmax(48px,.45fr) minmax(48px,.45fr) minmax(60px,.52fr) minmax(64px,.58fr) !important;
}

.ranking-table-head{
  min-height:42px !important;
  padding:0 10px !important;
  background:rgba(0,0,0,.42) !important;
  color:#fff !important;
  font-size:12px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  letter-spacing:.45px !important;
}

.ranking-table-head > span{
  text-align:center !important;
}

.ranking-table-head > span:nth-child(2){
  text-align:left !important;
  padding-left:14px !important;
}

.ranking-table-row{
  min-height:54px !important;
  padding:0 10px !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
  background:rgba(0,0,0,.18) !important;
}

.ranking-table-row:last-child{
  border-bottom:0 !important;
}

.ranking-table-row .rank-num{
  min-height:54px !important;
  margin-left:-10px !important;
  color:#0057b8 !important;
  background:linear-gradient(180deg,#f4f7fb,#dfe4ea) !important;
  font-size:24px !important;
  font-weight:1000 !important;
  box-shadow:inset -1px 0 0 rgba(0,0,0,.18) !important;
}

.ranking-table-row .rank-player{
  min-height:54px !important;
  padding-left:12px !important;
  gap:9px !important;
  font-size:18px !important;
  font-weight:1000 !important;
  color:#fff !important;
  text-shadow:0 3px 10px rgba(0,0,0,.36) !important;
}

.ranking-table-row .rank-player .avatar{
  width:34px !important;
  height:34px !important;
  border:2px solid var(--cr-lime) !important;
  box-shadow:0 0 0 3px rgba(168,255,0,.14), 0 6px 14px rgba(0,0,0,.28) !important;
}

.ranking-table-row .rank-player b{
  max-width:130px !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

.ranking-table-row span:not(.rank-player):not(.rank-num){
  color:#0084ff !important;
  font-size:16px !important;
  font-weight:1000 !important;
  text-shadow:0 0 12px rgba(0,132,255,.10) !important;
}

.ranking-table-row .rank-points{
  min-height:54px !important;
  margin-right:-10px !important;
  color:#fff !important;
  font-family:Impact, Arial Black, sans-serif !important;
  font-size:32px !important;
  line-height:1 !important;
  font-style:italic !important;
  text-shadow:0 7px 16px rgba(0,0,0,.38) !important;
  box-shadow:inset 1px 0 0 rgba(255,255,255,.16) !important;
}

/* Colores de celdas fuertes */
.ranking-group-joya .ranking-table-row .rank-player,
.ranking-group-joya .ranking-table-row .rank-points{
  background:linear-gradient(90deg,rgba(0,156,165,.96),rgba(0,126,142,.90)) !important;
}
.ranking-group-luchador .ranking-table-row .rank-player,
.ranking-group-luchador .ranking-table-row .rank-points{
  background:linear-gradient(90deg,rgba(45,137,7,.96),rgba(36,112,7,.92)) !important;
}
.ranking-group-mediocre .ranking-table-row .rank-player,
.ranking-group-mediocre .ranking-table-row .rank-points{
  background:linear-gradient(90deg,rgba(151,135,0,.96),rgba(125,111,0,.92)) !important;
}
.ranking-group-basura .ranking-table-row .rank-player,
.ranking-group-basura .ranking-table-row .rank-points{
  background:linear-gradient(90deg,rgba(165,82,12,.96),rgba(132,63,8,.92)) !important;
}

/* Ajustes móviles */
@media(max-width:760px){
  .ranking-group{
    border-radius:22px !important;
  }

  .ranking-table{
    grid-template-columns:42px minmax(140px,1.25fr) minmax(58px,.55fr) minmax(58px,.55fr) minmax(40px,.42fr) minmax(40px,.42fr) minmax(48px,.48fr) minmax(54px,.55fr) !important;
  }

  .ranking-table-head{
    font-size:10px !important;
    padding:0 7px !important;
  }

  .ranking-table-row{
    padding:0 7px !important;
  }

  .ranking-table-row .rank-num{
    margin-left:-7px !important;
    font-size:20px !important;
  }

  .ranking-table-row .rank-player{
    padding-left:8px !important;
    font-size:15px !important;
  }

  .ranking-table-row .rank-player b{
    max-width:92px !important;
  }

  .ranking-table-row span:not(.rank-player):not(.rank-num){
    font-size:13px !important;
  }

  .ranking-table-row .rank-points{
    margin-right:-7px !important;
    font-size:27px !important;
  }
}

@media(max-width:430px){
  .ranking-general-board{
    gap:18px !important;
  }

  .ranking-general-note{
    font-size:10px !important;
    padding:12px !important;
  }

  .ranking-group-title{
    min-height:76px !important;
    padding:14px !important;
  }

  .ranking-group-title .ranking-badge,
  .ranking-group-title .ranking-badge img{
    width:50px !important;
    height:50px !important;
    flex-basis:50px !important;
  }

  .ranking-group-title strong{
    font-size:clamp(28px,8vw,38px) !important;
  }

  .ranking-group-watermark{
    display:none !important;
  }

  .ranking-table{
    grid-template-columns:34px minmax(98px,1.15fr) minmax(42px,.46fr) minmax(42px,.46fr) minmax(30px,.35fr) minmax(30px,.35fr) minmax(38px,.4fr) minmax(42px,.45fr) !important;
  }

  .ranking-table-head{
    min-height:36px !important;
    font-size:8px !important;
    padding:0 4px !important;
    letter-spacing:.1px !important;
  }

  .ranking-table-head > span:nth-child(2){
    padding-left:6px !important;
  }

  .ranking-table-row{
    min-height:48px !important;
    padding:0 4px !important;
  }

  .ranking-table-row .rank-num{
    min-height:48px !important;
    margin-left:-4px !important;
    font-size:17px !important;
  }

  .ranking-table-row .rank-player{
    min-height:48px !important;
    padding-left:5px !important;
    gap:5px !important;
    font-size:12px !important;
  }

  .ranking-table-row .rank-player .avatar{
    width:25px !important;
    height:25px !important;
    border-width:1.5px !important;
  }

  .ranking-table-row .rank-player b{
    max-width:62px !important;
  }

  .ranking-table-row span:not(.rank-player):not(.rank-num){
    font-size:10px !important;
  }

  .ranking-table-row .rank-points{
    min-height:48px !important;
    margin-right:-4px !important;
    font-size:22px !important;
  }
}

@media(max-width:360px){
  .ranking-table{
    grid-template-columns:30px minmax(82px,1.05fr) minmax(36px,.42fr) minmax(36px,.42fr) minmax(26px,.32fr) minmax(26px,.32fr) minmax(34px,.38fr) minmax(38px,.42fr) !important;
  }

  .ranking-table-row .rank-player .avatar{
    display:none !important;
  }

  .ranking-table-row .rank-player b{
    max-width:74px !important;
  }

  .ranking-table-row span:not(.rank-player):not(.rank-num){
    font-size:9px !important;
  }
}


/* =========================================================
   RANKING GENERAL - MOBILE APP FIT
   Objetivo:
   - Que se vean todos los datos en móvil.
   - Estética más cercana a la app Cracks.
========================================================= */

body:has(.ranking-general-board) .app{
  padding-left:10px !important;
  padding-right:10px !important;
}

/* Tabs más compactos tipo app */
body:has(.ranking-general-board) .ranking-tabs-icons,
body:has(.ranking-general-board) .v4-tabs.four.ranking-tabs-icons{
  margin:10px 0 12px !important;
  padding:7px !important;
  border-radius:22px !important;
  gap:6px !important;
}

body:has(.ranking-general-board) .ranking-tabs-icons a{
  min-height:54px !important;
  border-radius:16px !important;
  font-size:8px !important;
  gap:4px !important;
}

body:has(.ranking-general-board) .ranking-tabs-icons a img{
  width:23px !important;
  height:23px !important;
}

/* Nota como píldoras */
.ranking-general-note{
  gap:6px !important;
  padding:10px !important;
  border-radius:18px !important;
}

.ranking-general-note span{
  padding:6px 8px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.055) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  font-size:10px !important;
}

.ranking-general-note span::after{
  display:none !important;
}

.ranking-general-note b{
  color:var(--cr-lime);
  margin-right:4px;
}

/* Grupos más tipo card de app */
.ranking-group{
  border-radius:24px !important;
  overflow:hidden !important;
  margin-bottom:18px !important;
}

.ranking-group-title{
  min-height:74px !important;
  padding:13px 14px !important;
}

.ranking-group-title-main{
  gap:12px !important;
}

.ranking-group-title .ranking-badge,
.ranking-group-title .ranking-badge img{
  width:50px !important;
  height:50px !important;
  flex-basis:50px !important;
}

.ranking-group-title strong{
  font-size:clamp(30px, 9vw, 42px) !important;
}

/* Tabla base: reducir para que quepa */
.ranking-table{
  grid-template-columns:
    30px
    minmax(88px, 1.15fr)
    minmax(39px, .47fr)
    minmax(39px, .47fr)
    minmax(29px, .36fr)
    minmax(29px, .36fr)
    minmax(38px, .43fr)
    minmax(40px, .46fr) !important;
}

.ranking-table-head{
  min-height:34px !important;
  padding:0 4px !important;
  font-size:7.5px !important;
  letter-spacing:.08px !important;
}

.ranking-table-head span:nth-child(3)::before{content:"ASIST"; font-size:0;}
.ranking-table-head span:nth-child(4)::before{content:"REND"; font-size:0;}
.ranking-table-head span:nth-child(5)::before{content:"DLS"; font-size:0;}
.ranking-table-head span:nth-child(6)::before{content:"GC"; font-size:0;}
.ranking-table-head span:nth-child(7)::before{content:"PGP"; font-size:0;}
.ranking-table-head span:nth-child(8)::before{content:"PTS"; font-size:0;}

.ranking-table-row{
  min-height:46px !important;
  padding:0 4px !important;
}

.ranking-table-row .rank-num{
  min-height:46px !important;
  margin-left:-4px !important;
  font-size:17px !important;
}

.ranking-table-row .rank-player{
  min-height:46px !important;
  padding-left:5px !important;
  gap:5px !important;
  font-size:12px !important;
}

.ranking-table-row .rank-player .avatar{
  width:24px !important;
  height:24px !important;
  border-width:1.5px !important;
}

.ranking-table-row .rank-player b{
  max-width:58px !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

.ranking-table-row .rank-stat,
.ranking-table-row span:not(.rank-player):not(.rank-num):not(.rank-points){
  font-size:10px !important;
  letter-spacing:-.25px !important;
  font-weight:1000 !important;
  color:#0a8cff !important;
  text-align:center !important;
}

.ranking-table-row .rank-points{
  min-height:46px !important;
  margin-right:-4px !important;
  font-size:22px !important;
}

/* Mejor contraste de filas */
.ranking-table-row:nth-child(even){
  background:rgba(255,255,255,.045) !important;
}

.ranking-table-row:nth-child(odd){
  background:rgba(0,0,0,.13) !important;
}

/* Responsive extremo: conservar todos los datos usando iniciales y ocultar avatar */
@media(max-width:380px){
  body:has(.ranking-general-board) .app{
    padding-left:6px !important;
    padding-right:6px !important;
  }

  .ranking-general-board{
    gap:14px !important;
  }

  .ranking-general-note{
    padding:8px !important;
    gap:5px !important;
  }

  .ranking-general-note span{
    font-size:8.5px !important;
    padding:5px 6px !important;
  }

  .ranking-group{
    border-radius:20px !important;
  }

  .ranking-group-title{
    min-height:64px !important;
    padding:10px 11px !important;
  }

  .ranking-group-title .ranking-badge,
  .ranking-group-title .ranking-badge img{
    width:42px !important;
    height:42px !important;
    flex-basis:42px !important;
  }

  .ranking-group-title strong{
    font-size:clamp(26px, 8.5vw, 34px) !important;
  }

  .ranking-table{
    grid-template-columns:
      26px
      minmax(70px, 1.04fr)
      minmax(32px, .39fr)
      minmax(32px, .39fr)
      minmax(24px, .31fr)
      minmax(24px, .31fr)
      minmax(31px, .35fr)
      minmax(35px, .39fr) !important;
  }

  .ranking-table-head{
    min-height:31px !important;
    padding:0 2px !important;
    font-size:6.6px !important;
    letter-spacing:0 !important;
  }

  .ranking-table-row{
    min-height:43px !important;
    padding:0 2px !important;
  }

  .ranking-table-row .rank-num{
    min-height:43px !important;
    margin-left:-2px !important;
    font-size:15px !important;
  }

  .ranking-table-row .rank-player{
    min-height:43px !important;
    padding-left:4px !important;
    gap:4px !important;
    font-size:11px !important;
  }

  .ranking-table-row .rank-player .avatar{
    display:none !important;
  }

  .ranking-table-row .rank-player b{
    max-width:66px !important;
  }

  .ranking-table-row .rank-stat,
  .ranking-table-row span:not(.rank-player):not(.rank-num):not(.rank-points){
    font-size:8.8px !important;
    letter-spacing:-.45px !important;
  }

  .ranking-table-row .rank-points{
    min-height:43px !important;
    margin-right:-2px !important;
    font-size:19px !important;
  }
}

/* Ultra pequeño: formato aún visible */
@media(max-width:330px){
  .ranking-table{
    grid-template-columns:
      24px
      minmax(62px, 1fr)
      minmax(29px, .36fr)
      minmax(29px, .36fr)
      minmax(22px, .29fr)
      minmax(22px, .29fr)
      minmax(28px, .33fr)
      minmax(31px, .36fr) !important;
  }

  .ranking-table-head{
    font-size:6px !important;
  }

  .ranking-table-row .rank-player{
    font-size:10px !important;
  }

  .ranking-table-row .rank-player b{
    max-width:58px !important;
  }

  .ranking-table-row .rank-stat,
  .ranking-table-row span:not(.rank-player):not(.rank-num):not(.rank-points){
    font-size:8px !important;
  }

  .ranking-table-row .rank-points{
    font-size:17px !important;
  }
}

/* En pantallas medianas, que respire sin perder look app */
@media(min-width:431px){
  .ranking-table-row .rank-player b{
    max-width:150px !important;
  }
}


/* =========================================================
   RANKING GENERAL - NEON BOARD APP STYLE
   Implementación tipo gráfica premium, 100% HTML/CSS.
========================================================= */

.ranking-neon-board{
  --rank-bg: rgba(1,6,9,.84);
  --rank-line: rgba(255,255,255,.10);
  --rank-text: #f7fbff;
  display:flex !important;
  flex-direction:column !important;
  gap:18px !important;
  margin:12px 0 36px !important;
}

/* Nota superior más app, menos pesada */
.ranking-neon-board .ranking-general-note{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:7px !important;
  padding:10px !important;
  border-radius:20px !important;
  border:1px solid rgba(168,255,0,.34) !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(168,255,0,.10), transparent 32%),
    linear-gradient(180deg, rgba(9,17,24,.56), rgba(4,9,14,.70)) !important;
  box-shadow:0 16px 38px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.04) !important;
}

.ranking-neon-board .ranking-general-note span{
  justify-content:flex-start !important;
  padding:7px 8px !important;
  border-radius:14px !important;
  background:rgba(0,0,0,.22) !important;
  color:rgba(255,255,255,.74) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  font-size:9.5px !important;
  line-height:1.1 !important;
  font-weight:900 !important;
}

.ranking-neon-board .ranking-general-note b{
  color:var(--cr-lime) !important;
  margin-right:4px !important;
}

/* Bloques principales */
.ranking-neon-board .ranking-group{
  position:relative !important;
  overflow:hidden !important;
  border-radius:28px !important;
  border-width:1.5px !important;
  background:
    radial-gradient(circle at 86% 12%, rgba(255,255,255,.08), transparent 25%),
    linear-gradient(180deg, rgba(6,14,20,.84), rgba(1,6,9,.94)) !important;
  box-shadow:
    0 24px 58px rgba(0,0,0,.46),
    inset 0 0 0 1px rgba(255,255,255,.045) !important;
}

/* Fondo estadio abstracto sutil */
.ranking-neon-board .ranking-group::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.14;
  background:
    radial-gradient(circle at 72% 18%, rgba(255,255,255,.22), transparent 9%),
    radial-gradient(circle at 82% 20%, rgba(255,255,255,.16), transparent 7%),
    linear-gradient(115deg, transparent 0 54%, rgba(255,255,255,.06) 55%, transparent 70%);
}

/* Header del grupo */
.ranking-neon-board .ranking-group-title{
  position:relative !important;
  z-index:2 !important;
  min-height:86px !important;
  padding:16px 16px !important;
  border-bottom:1px solid rgba(255,255,255,.12) !important;
  background:
    radial-gradient(circle at 18% 45%, rgba(255,255,255,.08), transparent 22%),
    linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.42)) !important;
}

.ranking-neon-board .ranking-group-title-main{
  display:flex !important;
  align-items:center !important;
  gap:13px !important;
}

.ranking-neon-board .ranking-group-title .ranking-badge{
  position:relative !important;
  width:58px !important;
  height:58px !important;
  flex:0 0 58px !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04) !important;
}

.ranking-neon-board .ranking-group-title .ranking-badge img{
  width:50px !important;
  height:50px !important;
}

.ranking-neon-board .ranking-group-title strong{
  font-family:Impact, Arial Black, sans-serif !important;
  font-style:italic !important;
  text-transform:uppercase !important;
  color:#fff !important;
  font-size:clamp(30px, 8vw, 48px) !important;
  line-height:.9 !important;
  letter-spacing:.15px !important;
  text-shadow:
    0 12px 26px rgba(0,0,0,.72),
    0 0 20px rgba(255,255,255,.14) !important;
}

.ranking-neon-board .ranking-group-watermark{
  right:16px !important;
  opacity:.08 !important;
}

/* Tabla: limpia, compacta y sin overflow */
.ranking-neon-board .ranking-table{
  position:relative !important;
  z-index:2 !important;
  display:grid !important;
  grid-template-columns:
    34px
    minmax(112px, 1.18fr)
    minmax(46px, .48fr)
    minmax(46px, .48fr)
    minmax(32px, .34fr)
    minmax(32px, .34fr)
    minmax(40px, .42fr)
    minmax(46px, .48fr) !important;
  width:100% !important;
}

.ranking-neon-board .ranking-table-head{
  min-height:38px !important;
  padding:0 5px !important;
  background:rgba(0,0,0,.48) !important;
  border-bottom:1px solid rgba(255,255,255,.13) !important;
  color:rgba(255,255,255,.92) !important;
  font-size:8.3px !important;
  font-weight:1000 !important;
  letter-spacing:.18px !important;
}

.ranking-neon-board .ranking-table-head > span:nth-child(2){
  text-align:left !important;
  padding-left:8px !important;
}

.ranking-neon-board .ranking-table-row{
  min-height:48px !important;
  padding:0 5px !important;
  background:rgba(0,0,0,.22) !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
}

.ranking-neon-board .ranking-table-row:last-child{
  border-bottom:0 !important;
}

.ranking-neon-board .ranking-table-row:hover{
  background:rgba(255,255,255,.055) !important;
}

/* Rank */
.ranking-neon-board .ranking-table-row .rank-num{
  min-height:48px !important;
  margin-left:-5px !important;
  color:#0057b8 !important;
  background:linear-gradient(180deg, #f8fbff, #dde5ee) !important;
  font-size:19px !important;
  font-family:Impact, Arial Black, sans-serif !important;
  font-style:italic !important;
  font-weight:900 !important;
}

/* Jugador */
.ranking-neon-board .ranking-table-row .rank-player{
  min-height:48px !important;
  padding-left:7px !important;
  gap:6px !important;
  font-size:13px !important;
  color:#fff !important;
  text-shadow:0 3px 10px rgba(0,0,0,.40) !important;
}

.ranking-neon-board .ranking-table-row .rank-player .avatar{
  width:27px !important;
  height:27px !important;
  border:2px solid var(--cr-lime) !important;
  box-shadow:0 0 0 3px rgba(168,255,0,.11), 0 5px 12px rgba(0,0,0,.28) !important;
}

.ranking-neon-board .ranking-table-row .rank-player b{
  display:block !important;
  max-width:68px !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

/* Datos */
.ranking-neon-board .ranking-table-row .rank-stat,
.ranking-neon-board .ranking-table-row span:not(.rank-player):not(.rank-num):not(.rank-points){
  color:#ffffff !important;
  font-size:10.5px !important;
  font-weight:1000 !important;
  letter-spacing:-.35px !important;
  text-shadow:0 0 10px rgba(255,255,255,.12) !important;
}

/* Puntos destacado */
.ranking-neon-board .ranking-table-row .rank-points{
  min-height:48px !important;
  margin-right:-5px !important;
  color:#fff !important;
  font-family:Impact, Arial Black, sans-serif !important;
  font-style:italic !important;
  font-size:24px !important;
  font-weight:900 !important;
  line-height:1 !important;
  text-shadow:0 7px 16px rgba(0,0,0,.45), 0 0 15px rgba(255,255,255,.14) !important;
  box-shadow:inset 1px 0 0 rgba(255,255,255,.16) !important;
}

/* Colores por categoría */
.ranking-neon-board .ranking-group-joya{
  border-color:rgba(0,225,255,.80) !important;
  box-shadow:0 24px 58px rgba(0,0,0,.46), 0 0 20px rgba(0,225,255,.12), inset 0 0 24px rgba(0,225,255,.05) !important;
}
.ranking-neon-board .ranking-group-luchador{
  border-color:rgba(168,255,0,.72) !important;
  box-shadow:0 24px 58px rgba(0,0,0,.46), 0 0 20px rgba(168,255,0,.10), inset 0 0 24px rgba(168,255,0,.05) !important;
}
.ranking-neon-board .ranking-group-mediocre{
  border-color:rgba(255,218,40,.68) !important;
  box-shadow:0 24px 58px rgba(0,0,0,.46), 0 0 20px rgba(255,218,40,.10), inset 0 0 24px rgba(255,218,40,.045) !important;
}
.ranking-neon-board .ranking-group-basura{
  border-color:rgba(255,130,28,.72) !important;
  box-shadow:0 24px 58px rgba(0,0,0,.46), 0 0 20px rgba(255,130,28,.10), inset 0 0 24px rgba(255,130,28,.045) !important;
}

.ranking-neon-board .ranking-group-joya .rank-player,
.ranking-neon-board .ranking-group-joya .rank-points{
  background:linear-gradient(90deg, rgba(0,160,174,.98), rgba(0,120,140,.92)) !important;
}
.ranking-neon-board .ranking-group-luchador .rank-player,
.ranking-neon-board .ranking-group-luchador .rank-points{
  background:linear-gradient(90deg, rgba(49,145,8,.98), rgba(32,108,5,.92)) !important;
}
.ranking-neon-board .ranking-group-mediocre .rank-player,
.ranking-neon-board .ranking-group-mediocre .rank-points{
  background:linear-gradient(90deg, rgba(158,141,0,.98), rgba(125,111,0,.92)) !important;
}
.ranking-neon-board .ranking-group-basura .rank-player,
.ranking-neon-board .ranking-group-basura .rank-points{
  background:linear-gradient(90deg, rgba(168,82,12,.98), rgba(125,59,8,.92)) !important;
}

/* Mobile: todos los datos visibles */
@media(max-width:430px){
  .ranking-neon-board{
    gap:16px !important;
  }

  .ranking-neon-board .ranking-group{
    border-radius:22px !important;
  }

  .ranking-neon-board .ranking-group-title{
    min-height:70px !important;
    padding:12px !important;
  }

  .ranking-neon-board .ranking-group-title .ranking-badge,
  .ranking-neon-board .ranking-group-title .ranking-badge img{
    width:44px !important;
    height:44px !important;
    flex-basis:44px !important;
  }

  .ranking-neon-board .ranking-group-title strong{
    font-size:clamp(27px,8vw,36px) !important;
  }

  .ranking-neon-board .ranking-group-watermark{
    display:none !important;
  }

  .ranking-neon-board .ranking-table{
    grid-template-columns:
      29px
      minmax(82px, 1.06fr)
      minmax(35px, .39fr)
      minmax(35px, .39fr)
      minmax(25px, .30fr)
      minmax(25px, .30fr)
      minmax(32px, .34fr)
      minmax(37px, .38fr) !important;
  }

  .ranking-neon-board .ranking-table-head{
    min-height:33px !important;
    padding:0 3px !important;
    font-size:6.8px !important;
  }

  .ranking-neon-board .ranking-table-row{
    min-height:43px !important;
    padding:0 3px !important;
  }

  .ranking-neon-board .ranking-table-row .rank-num{
    min-height:43px !important;
    margin-left:-3px !important;
    font-size:16px !important;
  }

  .ranking-neon-board .ranking-table-row .rank-player{
    min-height:43px !important;
    padding-left:5px !important;
    gap:4px !important;
    font-size:11px !important;
  }

  .ranking-neon-board .ranking-table-row .rank-player .avatar{
    width:22px !important;
    height:22px !important;
    border-width:1.5px !important;
  }

  .ranking-neon-board .ranking-table-row .rank-player b{
    max-width:48px !important;
  }

  .ranking-neon-board .ranking-table-row .rank-stat,
  .ranking-neon-board .ranking-table-row span:not(.rank-player):not(.rank-num):not(.rank-points){
    font-size:8.4px !important;
    letter-spacing:-.50px !important;
  }

  .ranking-neon-board .ranking-table-row .rank-points{
    min-height:43px !important;
    margin-right:-3px !important;
    font-size:18px !important;
  }
}

@media(max-width:360px){
  .ranking-neon-board .ranking-table{
    grid-template-columns:
      26px
      minmax(72px, 1fr)
      minmax(31px, .36fr)
      minmax(31px, .36fr)
      minmax(23px, .28fr)
      minmax(23px, .28fr)
      minmax(29px, .32fr)
      minmax(34px, .36fr) !important;
  }

  .ranking-neon-board .ranking-table-head{
    font-size:6.2px !important;
  }

  .ranking-neon-board .ranking-table-row .rank-player{
    font-size:10px !important;
  }

  .ranking-neon-board .ranking-table-row .rank-player .avatar{
    display:none !important;
  }

  .ranking-neon-board .ranking-table-row .rank-player b{
    max-width:64px !important;
  }

  .ranking-neon-board .ranking-table-row .rank-stat,
  .ranking-neon-board .ranking-table-row span:not(.rank-player):not(.rank-num):not(.rank-points){
    font-size:7.8px !important;
  }

  .ranking-neon-board .ranking-table-row .rank-points{
    font-size:16px !important;
  }
}


/* =========================================================
   RANKING GENERAL - DATOS EN BLANCO
   Corrección solicitada para columnas ASIST / REND / DLS / GC / PGP / PTS.
========================================================= */

.ranking-table-row span:not(.rank-player):not(.rank-num){
  color:#ffffff !important;
  font-size:16px !important;
  font-weight:1000 !important;
  text-shadow:0 0 12px rgba(0,132,255,.10) !important;
}

/* Mantener PTS como columna protagonista */
.ranking-table-row .rank-points{
  color:#ffffff !important;
}

/* Ajuste responsive para que no se rompa en móvil */
@media(max-width:430px){
  .ranking-table-row span:not(.rank-player):not(.rank-num){
    font-size:10px !important;
    letter-spacing:-.45px !important;
  }

  .ranking-table-row .rank-points{
    font-size:18px !important;
  }
}

@media(max-width:360px){
  .ranking-table-row span:not(.rank-player):not(.rank-num){
    font-size:8px !important;
    letter-spacing:-.55px !important;
  }

  .ranking-table-row .rank-points{
    font-size:16px !important;
  }
}


/* =========================================================
   RANKING GROUP TITLE - BACKGROUND IMAGE
   Agrega foto de fondo al encabezado de cada grupo.
========================================================= */

.ranking-neon-board .ranking-group-title,
.ranking-group-title{
  position:relative !important;
  overflow:hidden !important;
  background:
    linear-gradient(90deg, rgba(2,7,11,.92) 0%, rgba(2,7,11,.68) 46%, rgba(2,7,11,.92) 100%),
    url("../img/backgrounds/bg-home-dashboard.png") center center / cover no-repeat !important;
}

/* Capa de profundidad sobre la foto */
.ranking-neon-board .ranking-group-title::before,
.ranking-group-title::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  z-index:0 !important;
  background:
    radial-gradient(circle at 18% 46%, rgba(168,255,0,.18), transparent 28%),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.46)) !important;
}

/* Que contenido quede sobre la imagen */
.ranking-neon-board .ranking-group-title-main,
.ranking-group-title-main,
.ranking-neon-board .ranking-group-title > *,
.ranking-group-title > *{
  position:relative !important;
  z-index:2 !important;
}

/* Overlay por categoría para mantener lectura y color */
.ranking-group-joya .ranking-group-title{
  background:
    linear-gradient(90deg, rgba(0,48,58,.94) 0%, rgba(0,122,144,.58) 48%, rgba(0,22,28,.94) 100%),
    url("../img/backgrounds/bg-home-dashboard.png") center center / cover no-repeat !important;
}

.ranking-group-luchador .ranking-group-title{
  background:
    linear-gradient(90deg, rgba(8,46,3,.94) 0%, rgba(64,150,10,.54) 48%, rgba(4,20,2,.94) 100%),
    url("../img/backgrounds/bg-home-dashboard.png") center center / cover no-repeat !important;
}

.ranking-group-mediocre .ranking-group-title{
  background:
    linear-gradient(90deg, rgba(60,51,0,.94) 0%, rgba(158,140,0,.54) 48%, rgba(26,22,0,.94) 100%),
    url("../img/backgrounds/bg-home-dashboard.png") center center / cover no-repeat !important;
}

.ranking-group-basura .ranking-group-title{
  background:
    linear-gradient(90deg, rgba(62,28,5,.94) 0%, rgba(166,79,12,.56) 48%, rgba(28,12,2,.94) 100%),
    url("../img/backgrounds/bg-home-dashboard.png") center center / cover no-repeat !important;
}

/* Sombra del título e icono para que destaquen sobre la foto */
.ranking-neon-board .ranking-group-title strong,
.ranking-group-title strong{
  text-shadow:
    0 12px 28px rgba(0,0,0,.82),
    0 0 24px rgba(255,255,255,.16) !important;
}

.ranking-neon-board .ranking-group-title .ranking-badge,
.ranking-group-title .ranking-badge{
  background:rgba(0,0,0,.22) !important;
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
  box-shadow:
    0 12px 28px rgba(0,0,0,.40),
    inset 0 0 0 1px rgba(255,255,255,.12) !important;
}


/* =========================================================
   RANKING GROUP TITLE - BACKGROUNDS POR CATEGORÍA
   Imagen independiente para Joyas, Luchadores, Mediocres y Basuras.
========================================================= */

/* Base del header */
.ranking-neon-board .ranking-group-title,
.ranking-group-title{
  position:relative !important;
  overflow:hidden !important;
  background-position:center center !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
}

/* Joyas */
.ranking-neon-board .ranking-group-joya .ranking-group-title,
.ranking-group-joya .ranking-group-title{
  background-image:
    linear-gradient(90deg, rgba(0,14,22,.96) 0%, rgba(0,70,92,.70) 48%, rgba(0,8,14,.96) 100%),
    url("../img/ranking/backgrounds/bg-ranking-joyas.png") !important;
  border-bottom-color:rgba(0,225,255,.34) !important;
}

/* Luchadores */
.ranking-neon-board .ranking-group-luchador .ranking-group-title,
.ranking-group-luchador .ranking-group-title{
  background-image:
    linear-gradient(90deg, rgba(5,20,3,.96) 0%, rgba(36,128,10,.66) 48%, rgba(2,10,2,.96) 100%),
    url("../img/ranking/backgrounds/bg-ranking-luchadores.png") !important;
  border-bottom-color:rgba(168,255,0,.34) !important;
}

/* Mediocres */
.ranking-neon-board .ranking-group-mediocre .ranking-group-title,
.ranking-group-mediocre .ranking-group-title{
  background-image:
    linear-gradient(90deg, rgba(28,25,3,.96) 0%, rgba(130,112,0,.62) 48%, rgba(12,10,1,.96) 100%),
    url("../img/ranking/backgrounds/bg-ranking-mediocres.png") !important;
  border-bottom-color:rgba(255,220,40,.30) !important;
}

/* Basuras */
.ranking-neon-board .ranking-group-basura .ranking-group-title,
.ranking-group-basura .ranking-group-title{
  background-image:
    linear-gradient(90deg, rgba(30,12,2,.96) 0%, rgba(150,66,8,.66) 48%, rgba(12,5,1,.96) 100%),
    url("../img/ranking/backgrounds/bg-ranking-basuras.png") !important;
  border-bottom-color:rgba(255,130,28,.34) !important;
}

/* Overlay superior para legibilidad */
.ranking-neon-board .ranking-group-title::before,
.ranking-group-title::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none !important;
  background:
    radial-gradient(circle at 18% 50%, rgba(255,255,255,.11), transparent 28%),
    linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.52)) !important;
}

/* Contenido sobre la imagen */
.ranking-neon-board .ranking-group-title-main,
.ranking-group-title-main,
.ranking-neon-board .ranking-group-watermark,
.ranking-group-watermark{
  position:relative !important;
  z-index:2 !important;
}

/* Ícono con glass sobre la foto */
.ranking-neon-board .ranking-group-title .ranking-badge,
.ranking-group-title .ranking-badge{
  background:rgba(0,0,0,.26) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
  box-shadow:
    0 14px 30px rgba(0,0,0,.46),
    inset 0 0 0 1px rgba(255,255,255,.08) !important;
}

/* Título más legible */
.ranking-neon-board .ranking-group-title strong,
.ranking-group-title strong{
  text-shadow:
    0 12px 30px rgba(0,0,0,.92),
    0 0 24px rgba(255,255,255,.18) !important;
}

/* Posición de imagen optimizada por categoría */
.ranking-group-joya .ranking-group-title{
  background-position:center center !important;
}

.ranking-group-luchador .ranking-group-title{
  background-position:center center !important;
}

.ranking-group-mediocre .ranking-group-title{
  background-position:center center !important;
}

.ranking-group-basura .ranking-group-title{
  background-position:center center !important;
}

/* Mobile: mantener composición más estable */
@media(max-width:430px){
  .ranking-neon-board .ranking-group-title,
  .ranking-group-title{
    min-height:74px !important;
    background-size:cover !important;
  }

  .ranking-group-joya .ranking-group-title,
  .ranking-group-luchador .ranking-group-title,
  .ranking-group-mediocre .ranking-group-title,
  .ranking-group-basura .ranking-group-title{
    background-position:center center !important;
  }
}


/* =========================================================
   RANKING GENERAL - PREMIUM BOARD LIMPIO
   Nueva estructura independiente:
   ranking-premium-board / group / header / table / row
========================================================= */

.ranking-premium-board{
  display:flex !important;
  flex-direction:column !important;
  gap:22px !important;
  margin:16px 0 38px !important;
}

/* Nota superior */
.ranking-premium-note{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:8px !important;
  padding:12px !important;
  border-radius:22px !important;
  border:1px solid rgba(168,255,0,.34) !important;
  background:
    radial-gradient(circle at 0 0, rgba(168,255,0,.10), transparent 34%),
    linear-gradient(180deg, rgba(9,17,24,.62), rgba(4,9,14,.76)) !important;
  box-shadow:0 18px 42px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.04) !important;
}

.ranking-premium-note span{
  display:flex !important;
  align-items:center !important;
  min-height:32px !important;
  padding:7px 10px !important;
  border-radius:999px !important;
  background:rgba(0,0,0,.24) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  color:rgba(255,255,255,.74) !important;
  font-size:10px !important;
  line-height:1 !important;
  font-weight:900 !important;
}

.ranking-premium-note b{
  color:var(--cr-lime) !important;
  margin-right:5px !important;
  font-weight:1000 !important;
}

/* Contenedor por categoría */
.ranking-premium-group{
  position:relative !important;
  overflow:hidden !important;
  border-radius:28px !important;
  background:
    radial-gradient(circle at 86% 12%, rgba(255,255,255,.07), transparent 25%),
    linear-gradient(180deg, rgba(6,14,20,.86), rgba(1,6,9,.96)) !important;
  border:1.5px solid rgba(168,255,0,.35) !important;
  box-shadow:0 26px 62px rgba(0,0,0,.48), inset 0 0 0 1px rgba(255,255,255,.045) !important;
}

/* Header visual */
.ranking-premium-header{
  position:relative !important;
  min-height:96px !important;
  padding:18px 20px !important;
  display:flex !important;
  align-items:center !important;
  gap:18px !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  border-bottom:1px solid rgba(255,255,255,.14) !important;
}

.ranking-premium-header::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  z-index:0 !important;
  background:
    radial-gradient(circle at 18% 50%, rgba(255,255,255,.12), transparent 28%),
    linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.56)) !important;
}

.ranking-premium-icon,
.ranking-premium-header h2{
  position:relative !important;
  z-index:2 !important;
}

.ranking-premium-icon{
  width:68px !important;
  height:68px !important;
  flex:0 0 68px !important;
  border-radius:20px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:rgba(0,0,0,.30) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
  box-shadow:0 16px 34px rgba(0,0,0,.46), inset 0 0 0 1px rgba(255,255,255,.08) !important;
}

.ranking-premium-icon .ranking-badge{
  position:static !important;
  transform:none !important;
  width:60px !important;
  height:60px !important;
  display:flex !important;
}

.ranking-premium-icon .ranking-badge img{
  width:58px !important;
  height:58px !important;
}

.ranking-premium-icon .ranking-badge small{
  display:none !important;
}

.ranking-premium-header h2{
  margin:0 !important;
  color:#fff !important;
  font-family:Impact, Arial Black, sans-serif !important;
  font-size:clamp(34px, 9vw, 58px) !important;
  line-height:.9 !important;
  font-style:italic !important;
  text-transform:uppercase !important;
  letter-spacing:.1px !important;
  text-shadow:0 12px 30px rgba(0,0,0,.92), 0 0 24px rgba(255,255,255,.18) !important;
}

/* Fondos y colores por categoría */
.ranking-premium-joya{
  border-color:rgba(0,225,255,.84) !important;
  box-shadow:0 26px 62px rgba(0,0,0,.48), 0 0 24px rgba(0,225,255,.13), inset 0 0 26px rgba(0,225,255,.045) !important;
}
.ranking-premium-joya .ranking-premium-header{
  background-image:
    linear-gradient(90deg, rgba(0,14,22,.96), rgba(0,70,92,.64), rgba(0,8,14,.96)),
    url("../img/ranking/backgrounds/bg-ranking-joyas.png") !important;
}

.ranking-premium-luchador{
  border-color:rgba(168,255,0,.76) !important;
  box-shadow:0 26px 62px rgba(0,0,0,.48), 0 0 24px rgba(168,255,0,.11), inset 0 0 26px rgba(168,255,0,.045) !important;
}
.ranking-premium-luchador .ranking-premium-header{
  background-image:
    linear-gradient(90deg, rgba(5,20,3,.96), rgba(36,128,10,.62), rgba(2,10,2,.96)),
    url("../img/ranking/backgrounds/bg-ranking-luchadores.png") !important;
}

.ranking-premium-mediocre{
  border-color:rgba(255,218,40,.70) !important;
  box-shadow:0 26px 62px rgba(0,0,0,.48), 0 0 24px rgba(255,218,40,.11), inset 0 0 26px rgba(255,218,40,.04) !important;
}
.ranking-premium-mediocre .ranking-premium-header{
  background-image:
    linear-gradient(90deg, rgba(28,25,3,.96), rgba(130,112,0,.60), rgba(12,10,1,.96)),
    url("../img/ranking/backgrounds/bg-ranking-mediocres.png") !important;
}

.ranking-premium-basura{
  border-color:rgba(255,130,28,.76) !important;
  box-shadow:0 26px 62px rgba(0,0,0,.48), 0 0 24px rgba(255,130,28,.11), inset 0 0 26px rgba(255,130,28,.04) !important;
}
.ranking-premium-basura .ranking-premium-header{
  background-image:
    linear-gradient(90deg, rgba(30,12,2,.96), rgba(150,66,8,.62), rgba(12,5,1,.96)),
    url("../img/ranking/backgrounds/bg-ranking-basuras.png") !important;
}

/* Tabla */
.ranking-premium-table{
  width:100% !important;
  position:relative !important;
  z-index:2 !important;
}

.ranking-premium-head,
.ranking-premium-row{
  display:grid !important;
  grid-template-columns:42px minmax(118px,1.25fr) 54px 54px 34px 34px 44px 52px !important;
  align-items:center !important;
}

.ranking-premium-head{
  min-height:40px !important;
  padding:0 6px !important;
  background:rgba(0,0,0,.54) !important;
  color:#fff !important;
  border-bottom:1px solid rgba(255,255,255,.12) !important;
  font-size:9px !important;
  font-weight:1000 !important;
  text-transform:uppercase !important;
  letter-spacing:.25px !important;
}

.ranking-premium-head span{
  text-align:center !important;
}

.ranking-premium-head span:nth-child(2){
  text-align:left !important;
  padding-left:9px !important;
}

.ranking-premium-row{
  min-height:52px !important;
  padding:0 6px !important;
  color:#fff !important;
  text-decoration:none !important;
  background:rgba(0,0,0,.22) !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
  transition:background .18s ease, transform .18s ease !important;
}

.ranking-premium-row:last-child{
  border-bottom:0 !important;
}

.ranking-premium-row:hover{
  background:rgba(255,255,255,.055) !important;
}

.ranking-premium-row span{
  text-align:center !important;
  color:#fff !important;
  font-size:12px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  text-shadow:0 0 12px rgba(255,255,255,.10) !important;
}

.ranking-premium-row .rank-number{
  min-height:52px !important;
  margin-left:-6px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:linear-gradient(180deg,#f8fbff,#dde5ee) !important;
  color:#0057b8 !important;
  font-family:Impact, Arial Black, sans-serif !important;
  font-size:22px !important;
  font-style:italic !important;
  box-shadow:inset -1px 0 0 rgba(0,0,0,.18) !important;
}

.ranking-premium-row .rank-player{
  min-height:52px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:7px !important;
  padding-left:8px !important;
  text-align:left !important;
}

.ranking-premium-row .rank-player .avatar{
  width:28px !important;
  height:28px !important;
  flex:0 0 28px !important;
  border:2px solid var(--cr-lime) !important;
  box-shadow:0 0 0 3px rgba(168,255,0,.14), 0 6px 14px rgba(0,0,0,.30) !important;
}

.ranking-premium-row .rank-player strong{
  display:block !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  max-width:72px !important;
  color:#fff !important;
  font-size:13px !important;
  font-weight:1000 !important;
}

.ranking-premium-row .rank-points{
  min-height:52px !important;
  margin-right:-6px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:#fff !important;
  font-family:Impact, Arial Black, sans-serif !important;
  font-size:26px !important;
  font-style:italic !important;
  line-height:1 !important;
  text-shadow:0 7px 16px rgba(0,0,0,.45), 0 0 15px rgba(255,255,255,.14) !important;
  box-shadow:inset 1px 0 0 rgba(255,255,255,.16) !important;
}

.ranking-premium-joya .rank-player,
.ranking-premium-joya .rank-points{
  background:linear-gradient(90deg,rgba(0,160,174,.98),rgba(0,120,140,.94)) !important;
}
.ranking-premium-luchador .rank-player,
.ranking-premium-luchador .rank-points{
  background:linear-gradient(90deg,rgba(49,145,8,.98),rgba(32,108,5,.94)) !important;
}
.ranking-premium-mediocre .rank-player,
.ranking-premium-mediocre .rank-points{
  background:linear-gradient(90deg,rgba(158,141,0,.98),rgba(125,111,0,.94)) !important;
}
.ranking-premium-basura .rank-player,
.ranking-premium-basura .rank-points{
  background:linear-gradient(90deg,rgba(168,82,12,.98),rgba(125,59,8,.94)) !important;
}

/* Mobile: mantener todos los datos visibles */
@media(max-width:430px){
  .ranking-premium-board{
    gap:18px !important;
  }

  .ranking-premium-note{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:6px !important;
    padding:9px !important;
  }

  .ranking-premium-note span{
    min-height:28px !important;
    padding:6px 7px !important;
    font-size:8.5px !important;
  }

  .ranking-premium-group{
    border-radius:22px !important;
  }

  .ranking-premium-header{
    min-height:74px !important;
    padding:12px !important;
    gap:12px !important;
  }

  .ranking-premium-icon{
    width:48px !important;
    height:48px !important;
    flex-basis:48px !important;
    border-radius:15px !important;
  }

  .ranking-premium-icon .ranking-badge,
  .ranking-premium-icon .ranking-badge img{
    width:42px !important;
    height:42px !important;
  }

  .ranking-premium-header h2{
    font-size:clamp(28px,8vw,38px) !important;
  }

  .ranking-premium-head,
  .ranking-premium-row{
    grid-template-columns:30px minmax(86px,1fr) 36px 36px 26px 26px 32px 38px !important;
  }

  .ranking-premium-head{
    min-height:34px !important;
    padding:0 3px !important;
    font-size:6.8px !important;
    letter-spacing:0 !important;
  }

  .ranking-premium-head span:nth-child(2){
    padding-left:5px !important;
  }

  .ranking-premium-row{
    min-height:44px !important;
    padding:0 3px !important;
  }

  .ranking-premium-row .rank-number{
    min-height:44px !important;
    margin-left:-3px !important;
    font-size:16px !important;
  }

  .ranking-premium-row .rank-player{
    min-height:44px !important;
    padding-left:5px !important;
    gap:5px !important;
  }

  .ranking-premium-row .rank-player .avatar{
    width:22px !important;
    height:22px !important;
    flex-basis:22px !important;
  }

  .ranking-premium-row .rank-player strong{
    max-width:48px !important;
    font-size:11px !important;
  }

  .ranking-premium-row span{
    font-size:8.5px !important;
    letter-spacing:-.4px !important;
  }

  .ranking-premium-row .rank-points{
    min-height:44px !important;
    margin-right:-3px !important;
    font-size:18px !important;
  }
}

@media(max-width:360px){
  .ranking-premium-head,
  .ranking-premium-row{
    grid-template-columns:26px minmax(72px,1fr) 31px 31px 23px 23px 29px 34px !important;
  }

  .ranking-premium-head{
    font-size:6.2px !important;
  }

  .ranking-premium-row .rank-player .avatar{
    display:none !important;
  }

  .ranking-premium-row .rank-player strong{
    max-width:64px !important;
    font-size:10px !important;
  }

  .ranking-premium-row span{
    font-size:7.8px !important;
  }

  .ranking-premium-row .rank-points{
    font-size:16px !important;
  }
}


/* =========================================================
   RANKING PAGE BACKGROUNDS
   Fondo full screen por tipo de ranking:
   general / goleadores / cracks / arqueros
========================================================= */

body.ranking-page-bg{
  background-color:#02070b !important;
  background-position:center top !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  background-attachment:fixed !important;
}

body.ranking-page-bg::before{
  content:"" !important;
  position:fixed !important;
  inset:0 !important;
  z-index:-2 !important;
  pointer-events:none !important;
  background:inherit !important;
  background-position:center top !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
}

body.ranking-page-bg::after{
  content:"" !important;
  position:fixed !important;
  inset:0 !important;
  z-index:-1 !important;
  pointer-events:none !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(168,255,0,.08), transparent 34%),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.42) 54%, rgba(0,0,0,.76)) !important;
}

body.ranking-page-bg .app{
  background:transparent !important;
}

body.ranking-page-bg .v4-card,
body.ranking-page-bg .ranking-premium-group,
body.ranking-page-bg .ranking-tabs-icons,
body.ranking-page-bg .ranking-premium-note{
  backdrop-filter:blur(14px) !important;
  -webkit-backdrop-filter:blur(14px) !important;
}

/* Tipo: General */
body.ranking-page-bg-general{
  background-image:url("../img/ranking/page-backgrounds/bg-ranking-general-page.png") !important;
}

/* Tipo: Goleadores */
body.ranking-page-bg-goleadores{
  background-image:url("../img/ranking/page-backgrounds/bg-ranking-goleadores-page.png") !important;
}

/* Tipo: Cracks */
body.ranking-page-bg-cracks{
  background-image:url("../img/ranking/page-backgrounds/bg-ranking-cracks-page.png") !important;
}

/* Tipo: Arqueros */
body.ranking-page-bg-arqueros{
  background-image:url("../img/ranking/page-backgrounds/bg-ranking-arqueros-page.png") !important;
}

/* Fallback si type viene vacío */
body.ranking-page-bg-{
  background-image:url("../img/ranking/page-backgrounds/bg-ranking-general-page.png") !important;
}

@media(max-width:768px){
  body.ranking-page-bg{
    background-attachment:scroll !important;
    background-position:center top !important;
  }

  body.ranking-page-bg::before{
    background-attachment:scroll !important;
    background-position:center top !important;
  }
}


/* =========================================================
   RANKING PREMIUM HEADER - PIXEL FIX
   Corrige el pixel/borde no cubierto del background en
   <header class="ranking-premium-header">.
========================================================= */

/* El grupo completo debe recortar perfectamente el header y la tabla */
.ranking-premium-group{
  position:relative !important;
  overflow:hidden !important;
  background:#02080c !important;
  background-clip:padding-box !important;
  isolation:isolate !important;
}

/* El header recorta su propia imagen y evita líneas de 1px */
.ranking-premium-header{
  position:relative !important;
  overflow:hidden !important;
  border-radius:inherit !important;
  border-bottom-left-radius:0 !important;
  border-bottom-right-radius:0 !important;
  background:#02080c !important;
  background-image:none !important;
  background-clip:padding-box !important;
  isolation:isolate !important;
}

/* La imagen ahora va en ::after, cubriendo 2px extra para evitar el pixel visible */
.ranking-premium-header::after{
  content:"" !important;
  position:absolute !important;
  top:-2px !important;
  left:-2px !important;
  right:-2px !important;
  bottom:-2px !important;
  z-index:0 !important;
  pointer-events:none !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  transform:scale(1.015) !important;
  transform-origin:center center !important;
}

/* Overlay superior: mantiene legibilidad sobre la foto */
.ranking-premium-header::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  pointer-events:none !important;
  background:
    radial-gradient(circle at 18% 50%, rgba(255,255,255,.10), transparent 28%),
    linear-gradient(90deg, rgba(0,0,0,.42), rgba(0,0,0,.12), rgba(0,0,0,.56)),
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.58)) !important;
}

/* El contenido queda sobre la imagen y overlay */
.ranking-premium-icon,
.ranking-premium-header h2{
  position:relative !important;
  z-index:2 !important;
}

/* Fondos por categoría aplicados en la capa ::after */
.ranking-premium-joya .ranking-premium-header::after{
  background-image:url("../img/ranking/backgrounds/bg-ranking-joyas.png") !important;
}

.ranking-premium-luchador .ranking-premium-header::after{
  background-image:url("../img/ranking/backgrounds/bg-ranking-luchadores.png") !important;
}

.ranking-premium-mediocre .ranking-premium-header::after{
  background-image:url("../img/ranking/backgrounds/bg-ranking-mediocres.png") !important;
}

.ranking-premium-basura .ranking-premium-header::after{
  background-image:url("../img/ranking/backgrounds/bg-ranking-basuras.png") !important;
}

/* Tinte por categoría sobre la imagen */
.ranking-premium-joya .ranking-premium-header::before{
  background:
    linear-gradient(90deg, rgba(0,14,22,.94), rgba(0,70,92,.45), rgba(0,8,14,.94)),
    linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.58)) !important;
}

.ranking-premium-luchador .ranking-premium-header::before{
  background:
    linear-gradient(90deg, rgba(5,20,3,.94), rgba(36,128,10,.42), rgba(2,10,2,.94)),
    linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.58)) !important;
}

.ranking-premium-mediocre .ranking-premium-header::before{
  background:
    linear-gradient(90deg, rgba(28,25,3,.94), rgba(130,112,0,.40), rgba(12,10,1,.94)),
    linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.58)) !important;
}

.ranking-premium-basura .ranking-premium-header::before{
  background:
    linear-gradient(90deg, rgba(30,12,2,.94), rgba(150,66,8,.42), rgba(12,5,1,.94)),
    linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.58)) !important;
}

/* Evita que reglas anteriores agreguen backgrounds directos al header */
.ranking-premium-joya .ranking-premium-header,
.ranking-premium-luchador .ranking-premium-header,
.ranking-premium-mediocre .ranking-premium-header,
.ranking-premium-basura .ranking-premium-header{
  background-image:none !important;
}

/* Asegura que la tabla toque el header sin dejar línea visual incorrecta */
.ranking-premium-table{
  position:relative !important;
  z-index:2 !important;
  margin-top:0 !important;
  background:#02080c !important;
}

.ranking-premium-head{
  margin-top:0 !important;
}


/* =========================================================
   RANKING GOLEADORES - VISTA VISUAL
   Ruta: index.php?p=ranking&type=goleadores
   Inspirado en gráfica deportiva: top goleador + filas visuales.
========================================================= */

.ranking-scorers-board{
  display:flex !important;
  flex-direction:column !important;
  gap:16px !important;
  margin:14px 0 38px !important;
}

.ranking-scorers-hero{
  position:relative !important;
  min-height:154px !important;
  padding:24px 20px !important;
  border-radius:28px !important;
  overflow:hidden !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:center !important;
  text-align:center !important;
  border:1.5px solid rgba(168,255,0,.62) !important;
  background:
    linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.72)),
    url("../img/ranking/page-backgrounds/bg-ranking-goleadores-page.png") center top / cover no-repeat !important;
  box-shadow:0 24px 58px rgba(0,0,0,.46), 0 0 22px rgba(168,255,0,.10) !important;
}

.ranking-scorers-hero::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(168,255,0,.16), transparent 32%),
    linear-gradient(90deg, rgba(0,0,0,.48), transparent 48%, rgba(0,0,0,.54)) !important;
}

.ranking-scorers-hero > div{
  position:relative !important;
  z-index:2 !important;
}

.ranking-scorers-hero h1{
  margin:0 !important;
  color:#fff !important;
  font-family:Impact, Arial Black, sans-serif !important;
  font-size:clamp(42px, 12vw, 78px) !important;
  line-height:.88 !important;
  font-style:italic !important;
  text-transform:uppercase !important;
  letter-spacing:.3px !important;
  text-shadow:0 14px 32px rgba(0,0,0,.80), 0 0 22px rgba(255,255,255,.16) !important;
}

.ranking-scorers-hero p{
  margin:10px 0 0 !important;
  color:rgba(255,255,255,.92) !important;
  font-family:Impact, Arial Black, sans-serif !important;
  font-size:clamp(22px, 6.2vw, 36px) !important;
  line-height:1 !important;
  text-transform:uppercase !important;
  letter-spacing:.2px !important;
  text-shadow:0 10px 24px rgba(0,0,0,.78) !important;
}

.ranking-scorers-list{
  display:flex !important;
  flex-direction:column !important;
  gap:0 !important;
  border-radius:28px !important;
  overflow:hidden !important;
  border:1.5px solid rgba(255,218,40,.52) !important;
  background:
    radial-gradient(circle at 70% 8%, rgba(255,218,40,.10), transparent 30%),
    linear-gradient(180deg, rgba(7,12,16,.88), rgba(2,6,9,.96)) !important;
  box-shadow:0 24px 58px rgba(0,0,0,.46), 0 0 22px rgba(255,218,40,.10) !important;
}

.scorer-row{
  position:relative !important;
  min-height:86px !important;
  display:grid !important;
  grid-template-columns:50px minmax(0,1fr) 88px !important;
  align-items:center !important;
  color:#fff !important;
  text-decoration:none !important;
  border-bottom:1px solid rgba(255,255,255,.10) !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,.88), rgba(255,255,255,.62) 54%, rgba(255,218,40,.58)) !important;
  overflow:hidden !important;
}

.scorer-row:last-child{
  border-bottom:0 !important;
}

.scorer-row:hover{
  filter:brightness(1.06) !important;
}

.scorer-row::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  background:
    radial-gradient(circle at 46% 50%, rgba(255,255,255,.42), transparent 28%),
    linear-gradient(90deg, rgba(0,0,0,.02), rgba(255,255,255,.34), rgba(255,255,255,.05)) !important;
  opacity:.62 !important;
}

.scorer-row-top{
  min-height:118px !important;
  grid-template-columns:56px minmax(0,1fr) 104px !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,.94), rgba(255,255,255,.72) 54%, rgba(255,218,40,.82)) !important;
}

.scorer-rank{
  position:relative !important;
  z-index:2 !important;
  height:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:#071018 !important;
  background:linear-gradient(180deg,#ffe56c,#d8b629) !important;
  font-family:Impact, Arial Black, sans-serif !important;
  font-size:28px !important;
  font-style:italic !important;
  font-weight:900 !important;
  clip-path:polygon(0 0, 100% 0, 78% 50%, 100% 100%, 0 100%) !important;
  text-shadow:0 2px 0 rgba(255,255,255,.28) !important;
}

.scorer-row-top .scorer-rank{
  font-size:36px !important;
}

.scorer-player{
  position:relative !important;
  z-index:2 !important;
  min-height:86px !important;
  padding:10px 12px !important;
  display:grid !important;
  grid-template-columns:60px minmax(0,1fr) !important;
  grid-template-areas:
    "photo name"
    "photo meta" !important;
  align-items:center !important;
  column-gap:12px !important;
}

.scorer-row-top .scorer-player{
  min-height:118px !important;
  grid-template-columns:82px minmax(0,1fr) !important;
  column-gap:14px !important;
}

.scorer-player .avatar{
  grid-area:photo !important;
  width:56px !important;
  height:56px !important;
  border:3px solid rgba(168,255,0,.92) !important;
  box-shadow:0 0 0 5px rgba(168,255,0,.13), 0 8px 18px rgba(0,0,0,.28) !important;
}

.scorer-row-top .scorer-player .avatar{
  width:76px !important;
  height:76px !important;
}

.scorer-player strong{
  grid-area:name !important;
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  color:rgba(8,14,18,.52) !important;
  font-family:Impact, Arial Black, sans-serif !important;
  font-size:clamp(28px, 7.2vw, 46px) !important;
  line-height:1 !important;
  font-weight:900 !important;
  text-shadow:
    0 2px 0 rgba(255,255,255,.36),
    0 3px 8px rgba(0,0,0,.24) !important;
}

.scorer-row-top .scorer-player strong{
  font-size:clamp(38px, 10vw, 58px) !important;
}

.scorer-player small{
  grid-area:meta !important;
  margin-top:4px !important;
  color:rgba(7,16,24,.62) !important;
  font-size:10px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  text-transform:uppercase !important;
  letter-spacing:.2px !important;
}

.scorer-goals{
  position:relative !important;
  z-index:2 !important;
  height:100% !important;
  padding:8px 4px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  color:#071018 !important;
  background:
    linear-gradient(180deg, rgba(255,230,94,.92), rgba(214,175,38,.92)) !important;
  box-shadow:inset 1px 0 0 rgba(255,255,255,.34) !important;
  text-align:center !important;
}

.scorer-goals b{
  display:block !important;
  color:#000 !important;
  font-family:Impact, Arial Black, sans-serif !important;
  font-size:40px !important;
  line-height:.9 !important;
  font-weight:900 !important;
}

.scorer-row-top .scorer-goals b{
  font-size:52px !important;
}

.scorer-goals small{
  display:block !important;
  margin-top:6px !important;
  color:#004AAD !important;
  font-size:10px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  text-transform:uppercase !important;
}

.scorer-goals em{
  display:block !important;
  margin-top:4px !important;
  color:#000 !important;
  font-style:normal !important;
  font-size:18px !important;
  line-height:1 !important;
  font-weight:1000 !important;
}

.scorer-row-top .scorer-goals em{
  font-size:22px !important;
}

/* Mobile refinado */
@media(max-width:430px){
  .ranking-scorers-board{
    gap:14px !important;
  }

  .ranking-scorers-hero{
    min-height:132px !important;
    padding:20px 14px !important;
    border-radius:24px !important;
  }

  .ranking-scorers-list{
    border-radius:24px !important;
  }

  .scorer-row{
    min-height:76px !important;
    grid-template-columns:42px minmax(0,1fr) 72px !important;
  }

  .scorer-row-top{
    min-height:100px !important;
    grid-template-columns:46px minmax(0,1fr) 82px !important;
  }

  .scorer-rank{
    font-size:23px !important;
  }

  .scorer-row-top .scorer-rank{
    font-size:30px !important;
  }

  .scorer-player{
    min-height:76px !important;
    padding:8px 8px !important;
    grid-template-columns:48px minmax(0,1fr) !important;
    column-gap:8px !important;
  }

  .scorer-row-top .scorer-player{
    min-height:100px !important;
    grid-template-columns:64px minmax(0,1fr) !important;
  }

  .scorer-player .avatar{
    width:46px !important;
    height:46px !important;
  }

  .scorer-row-top .scorer-player .avatar{
    width:62px !important;
    height:62px !important;
  }

  .scorer-player strong{
    font-size:clamp(23px, 7vw, 34px) !important;
  }

  .scorer-row-top .scorer-player strong{
    font-size:clamp(31px, 9vw, 44px) !important;
  }

  .scorer-player small{
    font-size:8px !important;
  }

  .scorer-goals b{
    font-size:34px !important;
  }

  .scorer-row-top .scorer-goals b{
    font-size:42px !important;
  }

  .scorer-goals small{
    font-size:8px !important;
  }

  .scorer-goals em{
    font-size:15px !important;
  }

  .scorer-row-top .scorer-goals em{
    font-size:18px !important;
  }
}

@media(max-width:360px){
  .scorer-row{
    grid-template-columns:38px minmax(0,1fr) 66px !important;
  }

  .scorer-row-top{
    grid-template-columns:42px minmax(0,1fr) 76px !important;
  }

  .scorer-player{
    grid-template-columns:42px minmax(0,1fr) !important;
    column-gap:6px !important;
  }

  .scorer-row-top .scorer-player{
    grid-template-columns:54px minmax(0,1fr) !important;
  }

  .scorer-player .avatar{
    width:40px !important;
    height:40px !important;
  }

  .scorer-row-top .scorer-player .avatar{
    width:52px !important;
    height:52px !important;
  }
}


/* =========================================================
   RANKING GOLEADORES - MEJORA VISUAL APP
   Corrige vista demasiado grande/plana:
   - Header más compacto
   - Filas dark/neón en vez de bloque claro
   - Nombres legibles
   - Columna goles protagonista, pero más integrada
   - Mejor mobile fit
========================================================= */

.ranking-scorers-board{
  gap:14px !important;
  margin:10px 0 34px !important;
}

/* HERO: más app, menos afiche gigante */
.ranking-scorers-hero{
  min-height:112px !important;
  padding:18px 16px !important;
  border-radius:26px !important;
  align-items:center !important;
  justify-content:flex-start !important;
  text-align:left !important;
  border:1.5px solid rgba(168,255,0,.70) !important;
  background:
    linear-gradient(90deg, rgba(2,8,12,.94) 0%, rgba(2,8,12,.66) 48%, rgba(2,8,12,.94) 100%),
    url("../img/ranking/page-backgrounds/bg-ranking-goleadores-page.png") center top / cover no-repeat !important;
  box-shadow:
    0 20px 48px rgba(0,0,0,.42),
    0 0 0 1px rgba(168,255,0,.12),
    inset 0 0 26px rgba(168,255,0,.06) !important;
}

.ranking-scorers-hero::after{
  background:
    radial-gradient(circle at 12% 42%, rgba(168,255,0,.14), transparent 30%),
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.62)) !important;
}

.ranking-scorers-hero h1{
  max-width:360px !important;
  font-size:clamp(34px, 10vw, 56px) !important;
  line-height:.88 !important;
  letter-spacing:.1px !important;
}

.ranking-scorers-hero p{
  margin-top:8px !important;
  font-size:clamp(16px, 4.8vw, 24px) !important;
  color:var(--cr-lime) !important;
  letter-spacing:.2px !important;
}

/* LISTA: contenedor oscuro coherente con la app */
.ranking-scorers-list{
  gap:8px !important;
  padding:10px !important;
  border-radius:26px !important;
  border:1.5px solid rgba(168,255,0,.46) !important;
  background:
    radial-gradient(circle at 80% 0%, rgba(168,255,0,.10), transparent 30%),
    linear-gradient(180deg, rgba(6,14,20,.70), rgba(1,6,9,.92)) !important;
  box-shadow:
    0 22px 52px rgba(0,0,0,.44),
    inset 0 0 0 1px rgba(255,255,255,.04) !important;
  overflow:visible !important;
}

/* FILAS: dejar de parecer bloque claro; convertir a card dark deportiva */
.scorer-row{
  min-height:76px !important;
  grid-template-columns:44px minmax(0,1fr) 74px !important;
  border-radius:20px !important;
  border:1px solid rgba(255,255,255,.09) !important;
  border-bottom:1px solid rgba(255,255,255,.09) !important;
  overflow:hidden !important;
  background:
    linear-gradient(90deg, rgba(5,14,19,.92) 0%, rgba(10,22,26,.86) 58%, rgba(168,255,0,.11) 100%) !important;
  box-shadow:0 12px 26px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.025) !important;
}

.scorer-row::before{
  opacity:.42 !important;
  background:
    radial-gradient(circle at 28% 50%, rgba(168,255,0,.10), transparent 28%),
    linear-gradient(90deg, transparent, rgba(255,255,255,.045), transparent) !important;
}

.scorer-row-top{
  min-height:94px !important;
  grid-template-columns:50px minmax(0,1fr) 86px !important;
  border-color:rgba(255,218,40,.58) !important;
  background:
    radial-gradient(circle at 78% 50%, rgba(255,218,40,.16), transparent 32%),
    linear-gradient(90deg, rgba(6,16,21,.96) 0%, rgba(15,29,31,.88) 58%, rgba(255,218,40,.14) 100%) !important;
}

/* Rank: menos agresivo, más badge lateral */
.scorer-rank{
  height:100% !important;
  clip-path:none !important;
  color:#061016 !important;
  background:linear-gradient(180deg, #d7ff31, #8eff00) !important;
  font-size:24px !important;
  box-shadow:inset -1px 0 0 rgba(255,255,255,.28) !important;
}

.scorer-row-top .scorer-rank{
  font-size:32px !important;
  background:linear-gradient(180deg, #ffe875, #d8b629) !important;
}

/* Jugador */
.scorer-player{
  min-height:76px !important;
  padding:8px 10px !important;
  grid-template-columns:50px minmax(0,1fr) !important;
  column-gap:10px !important;
}

.scorer-row-top .scorer-player{
  min-height:94px !important;
  grid-template-columns:62px minmax(0,1fr) !important;
  column-gap:12px !important;
}

.scorer-photo{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.scorer-copy{
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  gap:4px !important;
  padding-left:6px !important;
}

.scorer-copy strong,
.scorer-copy small{
  display:block !important;
}

.scorer-player .avatar{
  width:48px !important;
  height:48px !important;
  border:2.5px solid var(--cr-lime) !important;
  background:#061016 !important;
  box-shadow:
    0 0 0 4px rgba(168,255,0,.13),
    0 10px 18px rgba(0,0,0,.34) !important;
}

.scorer-row-top .scorer-player .avatar{
  width:60px !important;
  height:60px !important;
  border-color:#ffe875 !important;
  box-shadow:
    0 0 0 5px rgba(255,218,40,.16),
    0 12px 22px rgba(0,0,0,.36) !important;
}

.scorer-player strong{
  color:#fff !important;
  font-family:Impact, Arial Black, sans-serif !important;
  font-size:clamp(24px, 7vw, 36px) !important;
  line-height:.95 !important;
  text-shadow:
    0 8px 18px rgba(0,0,0,.70),
    0 0 15px rgba(255,255,255,.10) !important;
}

.scorer-row-top .scorer-player strong{
  font-size:clamp(30px, 9vw, 44px) !important;
}

.scorer-player small{
  color:rgba(255,255,255,.62) !important;
  font-size:9px !important;
  letter-spacing:.25px !important;
  text-shadow:none !important;
}

/* Goles: columna fuerte pero no excesivamente amarilla */
.scorer-goals{
  background:
    linear-gradient(180deg, rgba(216,255,49,.96), rgba(142,255,0,.92)) !important;
  color:#061016 !important;
  box-shadow:
    inset 1px 0 0 rgba(255,255,255,.38),
    inset 0 0 18px rgba(255,255,255,.14) !important;
}

.scorer-row-top .scorer-goals{
  background:
    linear-gradient(180deg, rgba(255,232,117,.98), rgba(216,182,41,.96)) !important;
}

.scorer-goals b{
  color:#061016 !important;
  font-size:36px !important;
  text-shadow:0 2px 0 rgba(255,255,255,.22) !important;
}

.scorer-row-top .scorer-goals b{
  font-size:46px !important;
}

.scorer-goals small{
  color:#004AAD !important;
  font-size:8px !important;
  letter-spacing:.25px !important;
}

.scorer-goals em{
  color:#061016 !important;
  font-size:14px !important;
}

.scorer-row-top .scorer-goals em{
  font-size:17px !important;
}

/* Ajuste móvil específico según screenshot */
@media(max-width:430px){
  .ranking-scorers-hero{
    min-height:106px !important;
    padding:16px 14px !important;
    border-radius:24px !important;
  }

  .ranking-scorers-hero h1{
    max-width:300px !important;
    font-size:clamp(31px, 9.5vw, 46px) !important;
  }

  .ranking-scorers-hero p{
    font-size:clamp(14px, 4.5vw, 20px) !important;
  }

  .ranking-scorers-list{
    padding:8px !important;
    gap:7px !important;
    border-radius:24px !important;
  }

  .scorer-row{
    min-height:70px !important;
    grid-template-columns:39px minmax(0,1fr) 68px !important;
    border-radius:18px !important;
  }

  .scorer-row-top{
    min-height:86px !important;
    grid-template-columns:43px minmax(0,1fr) 78px !important;
  }

  .scorer-rank{
    font-size:21px !important;
  }

  .scorer-row-top .scorer-rank{
    font-size:28px !important;
  }

  .scorer-player{
    min-height:70px !important;
    padding:7px 8px !important;
    grid-template-columns:44px minmax(0,1fr) !important;
    column-gap:8px !important;
  }

  .scorer-row-top .scorer-player{
    min-height:86px !important;
    grid-template-columns:55px minmax(0,1fr) !important;
  }


  .scorer-copy{
    gap:3px !important;
    padding-left:7px !important;
  }

  .scorer-player .avatar{
    width:42px !important;
    height:42px !important;
  }

  .scorer-row-top .scorer-player .avatar{
    width:52px !important;
    height:52px !important;
  }

  .scorer-player strong{
    font-size:clamp(21px, 6.6vw, 30px) !important;
  }

  .scorer-row-top .scorer-player strong{
    font-size:clamp(26px, 8vw, 38px) !important;
  }

  .scorer-player small{
    font-size:7.5px !important;
  }

  .scorer-goals b{
    font-size:30px !important;
  }

  .scorer-row-top .scorer-goals b{
    font-size:38px !important;
  }

  .scorer-goals small{
    font-size:7px !important;
  }

  .scorer-goals em{
    font-size:12px !important;
  }

  .scorer-row-top .scorer-goals em{
    font-size:15px !important;
  }
}

@media(max-width:360px){
  .scorer-row{
    grid-template-columns:35px minmax(0,1fr) 62px !important;
  }

  .scorer-row-top{
    grid-template-columns:39px minmax(0,1fr) 70px !important;
  }

  .scorer-player{
    grid-template-columns:38px minmax(0,1fr) !important;
    column-gap:6px !important;
  }

  .scorer-row-top .scorer-player{
    grid-template-columns:46px minmax(0,1fr) !important;
  }

  .scorer-player .avatar{
    width:36px !important;
    height:36px !important;
  }

  .scorer-row-top .scorer-player .avatar{
    width:44px !important;
    height:44px !important;
  }

  .scorer-player strong{
    font-size:20px !important;
  }

  .scorer-goals b{
    font-size:27px !important;
  }
}


/* =========================================================
   RANKING GOLEADORES - APP STYLE FINAL
   Objetivo: que la vista se sienta parte de Cracks:
   - dark glass
   - verde neón principal
   - cards compactas
   - menos estilo afiche externo
   - más coherencia con dashboard/register/ranking general
========================================================= */

/* Contenedor general */
.ranking-scorers-board{
  gap:12px !important;
  margin:10px 0 34px !important;
}

/* Hero tipo card app, no póster gigante */
.ranking-scorers-hero{
  min-height:118px !important;
  padding:18px 18px !important;
  border-radius:28px !important;
  align-items:center !important;
  justify-content:flex-start !important;
  text-align:left !important;
  border:1px solid rgba(168,255,0,.48) !important;
  background:
    radial-gradient(circle at 82% 16%, rgba(168,255,0,.13), transparent 28%),
    linear-gradient(180deg, rgba(9,17,24,.54), rgba(4,9,14,.72)),
    url("../img/ranking/page-backgrounds/bg-ranking-goleadores-page.png") center top / cover no-repeat !important;
  backdrop-filter:blur(14px) !important;
  -webkit-backdrop-filter:blur(14px) !important;
  box-shadow:
    0 22px 48px rgba(0,0,0,.44),
    inset 0 0 0 1px rgba(255,255,255,.05),
    inset 0 0 34px rgba(168,255,0,.045) !important;
}

.ranking-scorers-hero::after{
  background:
    radial-gradient(circle at 16% 48%, rgba(168,255,0,.18), transparent 28%),
    linear-gradient(90deg, rgba(0,0,0,.54), rgba(0,0,0,.18), rgba(0,0,0,.62)),
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.66)) !important;
}

/* Insignia visual */
.ranking-scorers-hero > div::before{
  content:"⚽" !important;
  width:46px !important;
  height:46px !important;
  margin-bottom:10px !important;
  border-radius:16px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:#071018 !important;
  background:linear-gradient(180deg,#d8ff39,#8eff00) !important;
  box-shadow:
    0 0 0 6px rgba(168,255,0,.10),
    0 12px 26px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.55) !important;
  font-size:22px !important;
}

.ranking-scorers-hero h1{
  max-width:320px !important;
  margin:0 !important;
  color:#fff !important;
  font-family:Impact, Arial Black, sans-serif !important;
  font-size:clamp(34px, 10vw, 50px) !important;
  line-height:.88 !important;
  font-style:italic !important;
  text-transform:uppercase !important;
  letter-spacing:.2px !important;
  text-shadow:
    0 12px 28px rgba(0,0,0,.82),
    0 0 18px rgba(255,255,255,.12) !important;
}

.ranking-scorers-hero p{
  display:inline-flex !important;
  margin:10px 0 0 !important;
  padding:7px 10px !important;
  border-radius:999px !important;
  color:var(--cr-lime) !important;
  background:rgba(0,0,0,.30) !important;
  border:1px solid rgba(168,255,0,.25) !important;
  font-family:inherit !important;
  font-size:11px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  text-transform:uppercase !important;
  letter-spacing:.3px !important;
  text-shadow:none !important;
}

/* Lista como panel de app */
.ranking-scorers-list{
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
  padding:10px !important;
  border-radius:28px !important;
  overflow:visible !important;
  border:1px solid rgba(168,255,0,.34) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(168,255,0,.08), transparent 32%),
    linear-gradient(180deg, rgba(9,17,24,.46), rgba(4,9,14,.66)) !important;
  backdrop-filter:blur(14px) !important;
  -webkit-backdrop-filter:blur(14px) !important;
  box-shadow:
    0 22px 48px rgba(0,0,0,.40),
    inset 0 0 0 1px rgba(255,255,255,.04) !important;
}

/* Fila estilo card app */
.scorer-row{
  min-height:78px !important;
  grid-template-columns:44px minmax(0,1fr) 74px !important;
  border-radius:22px !important;
  border:1px solid rgba(255,255,255,.10) !important;
  border-bottom:1px solid rgba(255,255,255,.10) !important;
  background:
    linear-gradient(180deg, rgba(7,16,22,.82), rgba(3,9,13,.92)) !important;
  box-shadow:
    0 14px 28px rgba(0,0,0,.30),
    inset 0 0 0 1px rgba(255,255,255,.025) !important;
}

.scorer-row::before{
  opacity:1 !important;
  background:
    radial-gradient(circle at 14% 50%, rgba(168,255,0,.10), transparent 25%),
    linear-gradient(90deg, rgba(168,255,0,.05), transparent 44%, rgba(168,255,0,.04)) !important;
}

.scorer-row:hover{
  transform:translateY(-1px) !important;
  background:linear-gradient(180deg, rgba(9,20,27,.92), rgba(4,10,15,.96)) !important;
  border-color:rgba(168,255,0,.34) !important;
  filter:none !important;
}

/* Top 1 destacado, pero coherente */
.scorer-row-top{
  min-height:96px !important;
  grid-template-columns:48px minmax(0,1fr) 84px !important;
  border-color:rgba(168,255,0,.55) !important;
  background:
    radial-gradient(circle at 78% 50%, rgba(168,255,0,.13), transparent 32%),
    linear-gradient(180deg, rgba(9,20,27,.92), rgba(4,10,15,.98)) !important;
  box-shadow:
    0 18px 34px rgba(0,0,0,.36),
    0 0 0 1px rgba(168,255,0,.10),
    inset 0 0 28px rgba(168,255,0,.045) !important;
}

/* Número */
.scorer-rank{
  clip-path:none !important;
  height:100% !important;
  color:#071018 !important;
  background:linear-gradient(180deg,#d8ff39,#8eff00) !important;
  font-family:Impact, Arial Black, sans-serif !important;
  font-size:24px !important;
  font-style:italic !important;
  font-weight:900 !important;
  box-shadow:inset -1px 0 0 rgba(255,255,255,.34) !important;
}

.scorer-row-top .scorer-rank{
  color:#071018 !important;
  background:linear-gradient(180deg,#ecff6a,#a8ff00) !important;
  font-size:31px !important;
}

/* Jugador */
.scorer-player{
  min-height:78px !important;
  padding:9px 10px !important;
  grid-template-columns:50px minmax(0,1fr) !important;
  column-gap:10px !important;
}

.scorer-row-top .scorer-player{
  min-height:96px !important;
  grid-template-columns:62px minmax(0,1fr) !important;
}

.scorer-player .avatar{
  width:48px !important;
  height:48px !important;
  border:2.5px solid var(--cr-lime) !important;
  background:#071018 !important;
  color:#fff !important;
  box-shadow:
    0 0 0 4px rgba(168,255,0,.13),
    0 10px 18px rgba(0,0,0,.35) !important;
}

.scorer-row-top .scorer-player .avatar{
  width:60px !important;
  height:60px !important;
  border-color:#d8ff39 !important;
}

.scorer-player strong{
  color:#ffffff !important;
  font-family:inherit !important;
  font-size:19px !important;
  line-height:1.05 !important;
  font-weight:1000 !important;
  text-shadow:0 6px 16px rgba(0,0,0,.55) !important;
}

.scorer-row-top .scorer-player strong{
  color:#ffffff !important;
  font-size:23px !important;
}

.scorer-player small{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:4px !important;
  margin-top:5px !important;
  color:rgba(255,255,255,.58) !important;
  font-size:8.5px !important;
  line-height:1.15 !important;
  font-weight:900 !important;
  letter-spacing:.1px !important;
}

/* Caja goles estilo app */
.scorer-goals{
  height:calc(100% - 12px) !important;
  margin:6px 6px 6px 0 !important;
  border-radius:18px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.30), transparent 36%),
    linear-gradient(180deg,#d8ff39,#8eff00) !important;
  color:#071018 !important;
  box-shadow:
    0 0 0 4px rgba(168,255,0,.08),
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -12px 24px rgba(0,0,0,.10) !important;
}

.scorer-row-top .scorer-goals{
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.34), transparent 36%),
    linear-gradient(180deg,#ecff6a,#a8ff00) !important;
}

.scorer-goals b{
  color:#071018 !important;
  font-family:Impact, Arial Black, sans-serif !important;
  font-size:30px !important;
  line-height:.9 !important;
  font-style:italic !important;
  text-shadow:0 2px 0 rgba(255,255,255,.25) !important;
}

.scorer-row-top .scorer-goals b{
  font-size:38px !important;
}

.scorer-goals small{
  margin-top:5px !important;
  color:#071018 !important;
  opacity:.72 !important;
  font-size:7px !important;
  font-weight:1000 !important;
  letter-spacing:.25px !important;
}

.scorer-goals em{
  margin-top:4px !important;
  color:#071018 !important;
  font-size:11.5px !important;
  font-weight:1000 !important;
}

.scorer-row-top .scorer-goals em{
  font-size:14px !important;
}

/* Mini resumen superior opcional visual en lista */
.ranking-scorers-list::before{
  content:"TOP GOLEADORES" !important;
  display:block !important;
  padding:8px 10px 0 !important;
  color:rgba(255,255,255,.58) !important;
  font-size:10px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  text-transform:uppercase !important;
  letter-spacing:.8px !important;
}

/* Mobile */
@media(max-width:430px){
  .ranking-scorers-board{
    gap:12px !important;
  }

  .ranking-scorers-hero{
    min-height:104px !important;
    padding:15px 14px !important;
    border-radius:24px !important;
  }

  .ranking-scorers-hero > div::before{
    width:40px !important;
    height:40px !important;
    margin-bottom:8px !important;
    border-radius:14px !important;
    font-size:19px !important;
  }

  .ranking-scorers-hero h1{
    max-width:260px !important;
    font-size:clamp(29px, 9vw, 42px) !important;
  }

  .ranking-scorers-hero p{
    padding:6px 8px !important;
    font-size:9.5px !important;
  }

  .ranking-scorers-list{
    padding:8px !important;
    gap:8px !important;
    border-radius:24px !important;
  }

  .scorer-row{
    min-height:70px !important;
    grid-template-columns:38px minmax(0,1fr) 64px !important;
    border-radius:19px !important;
  }

  .scorer-row-top{
    min-height:84px !important;
    grid-template-columns:42px minmax(0,1fr) 72px !important;
  }

  .scorer-rank{
    font-size:21px !important;
  }

  .scorer-row-top .scorer-rank{
    font-size:27px !important;
  }

  .scorer-player{
    min-height:70px !important;
    padding:8px 8px !important;
    grid-template-columns:42px minmax(0,1fr) !important;
    column-gap:8px !important;
  }

  .scorer-row-top .scorer-player{
    min-height:84px !important;
    grid-template-columns:50px minmax(0,1fr) !important;
  }

  .scorer-player .avatar{
    width:40px !important;
    height:40px !important;
  }

  .scorer-row-top .scorer-player .avatar{
    width:48px !important;
    height:48px !important;
  }

  .scorer-player strong{
    font-size:16px !important;
  }

  .scorer-row-top .scorer-player strong{
    font-size:19px !important;
  }

  .scorer-player small{
    font-size:7.2px !important;
  }

  .scorer-goals{
    height:calc(100% - 10px) !important;
    margin:5px 5px 5px 0 !important;
    border-radius:16px !important;
  }

  .scorer-goals b{
    font-size:25px !important;
  }

  .scorer-row-top .scorer-goals b{
    font-size:31px !important;
  }

  .scorer-goals small{
    font-size:6.4px !important;
  }

  .scorer-goals em{
    font-size:9.5px !important;
  }

  .scorer-row-top .scorer-goals em{
    font-size:11.5px !important;
  }
}

@media(max-width:360px){
  .scorer-row{
    grid-template-columns:35px minmax(0,1fr) 59px !important;
  }

  .scorer-row-top{
    grid-template-columns:38px minmax(0,1fr) 66px !important;
  }

  .scorer-player{
    grid-template-columns:36px minmax(0,1fr) !important;
    column-gap:6px !important;
  }

  .scorer-row-top .scorer-player{
    grid-template-columns:42px minmax(0,1fr) !important;
  }

  .scorer-player .avatar{
    width:34px !important;
    height:34px !important;
  }

  .scorer-row-top .scorer-player .avatar{
    width:40px !important;
    height:40px !important;
  }

  .scorer-player strong{
    font-size:14.5px !important;
  }

  .scorer-row-top .scorer-player strong{
    font-size:17px !important;
  }
}


/* =========================================================
   RANKING GOLEADORES - PREMIUM SPACING FINAL
   - Quita icono decorativo del hero.
   - Más aire entre nombre y métricas.
   - Avatar más pequeño.
   - Nombre alineado al centro del avatar.
========================================================= */

/* Quitar icono del header */
.ranking-scorers-hero > div::before{
  content:none !important;
  display:none !important;
}

/* Hero sin espacio reservado para icono */
.ranking-scorers-hero > div{
  padding-top:0 !important;
}

/* Fila jugador: grilla más limpia */
.scorer-player{
  align-items:center !important;
  grid-template-columns:46px minmax(0,1fr) !important;
  column-gap:14px !important;
  padding-left:14px !important;
  padding-right:12px !important;
}

.scorer-row-top .scorer-player{
  grid-template-columns:54px minmax(0,1fr) !important;
  column-gap:16px !important;
}

/* Contenedor foto */
.scorer-photo{
  align-self:center !important;
  justify-self:center !important;
  width:46px !important;
  height:46px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.scorer-row-top .scorer-photo{
  width:54px !important;
  height:54px !important;
}

/* Avatar/foto un poco más pequeño */
.scorer-player .avatar,
.scorer-player .player-photo{
  width:42px !important;
  height:42px !important;
}

.scorer-row-top .scorer-player .avatar,
.scorer-row-top .scorer-player .player-photo{
  width:50px !important;
  height:50px !important;
}

/* Bloque texto: nombre centrado verticalmente respecto al avatar */
.scorer-copy{
  min-height:46px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  gap:8px !important;
  padding-left:4px !important;
}

.scorer-row-top .scorer-copy{
  min-height:54px !important;
  gap:9px !important;
}

/* Nombre más limpio y alineado */
.scorer-copy strong,
.scorer-player strong{
  display:block !important;
  margin:0 !important;
  line-height:1 !important;
  transform:translateY(1px) !important;
}

/* Métricas con más aire y mejor lectura */
.scorer-copy small,
.scorer-player small{
  display:block !important;
  margin:0 !important;
  padding-top:2px !important;
  line-height:1.2 !important;
  letter-spacing:.15px !important;
}

/* Ajustes mobile */
@media(max-width:430px){
  .scorer-player{
    grid-template-columns:40px minmax(0,1fr) !important;
    column-gap:12px !important;
    padding-left:12px !important;
    padding-right:8px !important;
  }

  .scorer-row-top .scorer-player{
    grid-template-columns:46px minmax(0,1fr) !important;
    column-gap:13px !important;
  }

  .scorer-photo{
    width:40px !important;
    height:40px !important;
  }

  .scorer-row-top .scorer-photo{
    width:46px !important;
    height:46px !important;
  }

  .scorer-player .avatar,
  .scorer-player .player-photo{
    width:36px !important;
    height:36px !important;
  }

  .scorer-row-top .scorer-player .avatar,
  .scorer-row-top .scorer-player .player-photo{
    width:42px !important;
    height:42px !important;
  }

  .scorer-copy{
    min-height:40px !important;
    gap:6px !important;
    padding-left:3px !important;
  }

  .scorer-row-top .scorer-copy{
    min-height:46px !important;
    gap:7px !important;
  }

  .scorer-copy small,
  .scorer-player small{
    line-height:1.18 !important;
  }
}

@media(max-width:360px){
  .scorer-player{
    grid-template-columns:34px minmax(0,1fr) !important;
    column-gap:10px !important;
    padding-left:10px !important;
  }

  .scorer-row-top .scorer-player{
    grid-template-columns:40px minmax(0,1fr) !important;
    column-gap:11px !important;
  }

  .scorer-photo{
    width:34px !important;
    height:34px !important;
  }

  .scorer-row-top .scorer-photo{
    width:40px !important;
    height:40px !important;
  }

  .scorer-player .avatar,
  .scorer-player .player-photo{
    width:32px !important;
    height:32px !important;
  }

  .scorer-row-top .scorer-player .avatar,
  .scorer-row-top .scorer-player .player-photo{
    width:38px !important;
    height:38px !important;
  }

  .scorer-copy{
    gap:5px !important;
  }
}


/* RANKING GOLEADORES - segunda línea meta: posición y pie hábil */
.scorer-copy .scorer-meta{
  display:block !important;
  margin-top:2px !important;
  font-size:12px !important;
  line-height:1.25 !important;
  color:rgba(255,255,255,.72) !important;
  font-weight:700 !important;
  letter-spacing:.1px !important;
  text-transform:none !important;
}

.scorer-row-top .scorer-copy .scorer-meta{
  font-size:12.5px !important;
  margin-top:3px !important;
}

@media(max-width:430px){
  .scorer-copy .scorer-meta{
    font-size:11px !important;
    line-height:1.22 !important;
  }
}


/* =========================================================
   RANKING GOLEADORES - ICONOS POSICIÓN Y PIE HÁBIL
   Usa los mismos SVG del registro.
========================================================= */

.scorer-meta-icons-row{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:5px !important;
  margin-top:2px !important;
}

.scorer-meta-icons-position{
  margin-top:2px !important;
}

.scorer-meta-icons-foot{
  margin-top:1px !important;
}

.scorer-meta-chip{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
  min-height:22px !important;
  padding:3px 7px !important;
  border-radius:999px !important;
  border:1px solid rgba(168,255,0,.26) !important;
  background:rgba(0,0,0,.24) !important;
  color:rgba(255,255,255,.78) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035) !important;
}

.scorer-meta-chip img{
  width:14px !important;
  height:14px !important;
  display:block !important;
  object-fit:contain !important;
  filter:drop-shadow(0 0 7px rgba(168,255,0,.20)) !important;
}

.scorer-meta-chip em{
  display:block !important;
  font-style:normal !important;
  color:rgba(255,255,255,.78) !important;
  font-size:8px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  text-transform:uppercase !important;
  letter-spacing:.15px !important;
}

/* Mantener aire visual en el bloque de texto */
.scorer-copy{
  gap:6px !important;
}

.scorer-row-top .scorer-copy{
  gap:7px !important;
}

@media(max-width:430px){
  .scorer-meta-icons-row{
    gap:4px !important;
  }

  .scorer-meta-chip{
    min-height:19px !important;
    padding:3px 5px !important;
    gap:3px !important;
  }

  .scorer-meta-chip img{
    width:12px !important;
    height:12px !important;
  }

  .scorer-meta-chip em{
    font-size:6.8px !important;
    letter-spacing:0 !important;
  }

  .scorer-copy{
    gap:5px !important;
  }
}

/* En móviles muy angostos, dejar solo iconos para evitar saturar */
@media(max-width:360px){
  .scorer-meta-chip{
    padding:4px !important;
    min-width:22px !important;
  }

  .scorer-meta-chip em{
    display:none !important;
  }

  .scorer-meta-chip img{
    width:13px !important;
    height:13px !important;
  }
}


/* =========================================================
   PROFILE - MISMA VISUAL QUE REGISTRO APROBADO
   Ruta: index.php?p=profile
========================================================= */

body:has(.profile-approved-page){
  background-color:#02070b !important;
  background-image:
    linear-gradient(180deg, rgba(2,7,11,.28), rgba(2,7,11,.72)),
    url("../img/backgrounds/bg-home-dashboard.png") !important;
  background-position:center top !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  background-attachment:fixed !important;
}

body:has(.profile-approved-page) .app{
  width:min(100%, 480px) !important;
  max-width:480px !important;
  padding:18px 16px 116px !important;
  background:transparent !important;
}

.profile-approved-page{
  min-height:calc(100vh - 120px);
  display:flex;
  align-items:flex-start;
  justify-content:center;
}

.profile-approved-card{
  width:100% !important;
  margin:10px auto 0 !important;
  padding:22px 18px !important;
  border-radius:28px !important;
  border:1px solid rgba(168,255,0,.34) !important;
  background:linear-gradient(180deg, rgba(9,17,24,.48), rgba(4,9,14,.62)) !important;
  backdrop-filter:blur(14px) !important;
  -webkit-backdrop-filter:blur(14px) !important;
  box-shadow:0 24px 58px rgba(0,0,0,.44), inset 0 0 0 1px rgba(255,255,255,.04) !important;
}

.profile-approved-hero{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  margin-bottom:18px !important;
}

.profile-photo-ring{
  flex:0 0 96px !important;
  width:96px !important;
  height:96px !important;
  border-radius:999px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid rgba(168,255,0,.50) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(168,255,0,.18), transparent 52%),
    rgba(0,0,0,.28) !important;
  box-shadow:0 0 0 6px rgba(168,255,0,.08), 0 18px 36px rgba(0,0,0,.35) !important;
}

.profile-photo-ring .avatar,
.profile-photo-ring .player-photo{
  width:86px !important;
  height:86px !important;
  border-radius:999px !important;
  object-fit:cover !important;
}

.profile-approved-head{
  min-width:0 !important;
}

.profile-approved-head .v4-title{
  margin:2px 0 5px !important;
  font-size:clamp(34px, 10vw, 48px) !important;
  line-height:.9 !important;
}

.profile-approved-form{
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
}

.profile-file-field{
  position:relative !important;
  min-height:54px !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:0 14px !important;
  overflow:hidden !important;
}

.profile-file-field .profile-file-label{
  color:rgba(255,255,255,.72) !important;
  font-size:14px !important;
  font-weight:900 !important;
}

.profile-file-field input[type="file"]{
  position:absolute !important;
  inset:0 !important;
  opacity:0 !important;
  cursor:pointer !important;
}

.profile-remove-photo{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  min-height:38px !important;
  padding:0 4px !important;
  color:rgba(255,255,255,.72) !important;
  font-size:12px !important;
  font-weight:800 !important;
}

.profile-remove-photo input{
  accent-color:var(--cr-lime);
}

.profile-approved-form .auth-ref-block{
  margin-top:2px !important;
}

.profile-approved-form .auth-ref-label{
  display:block !important;
  margin:0 0 8px !important;
  color:rgba(255,255,255,.72) !important;
  font-size:12px !important;
  font-weight:1000 !important;
  text-transform:uppercase !important;
  letter-spacing:.45px !important;
}

.profile-approved-form .auth-ref-grid{
  gap:8px !important;
}

.profile-approved-form .ref-choice{
  min-height:76px !important;
}

.profile-approved-form .foot-choice{
  min-height:74px !important;
}

.profile-approved-form .choice-icon img{
  display:block !important;
  width:27px !important;
  height:27px !important;
  object-fit:contain !important;
}

@media(max-width:390px){
  body:has(.profile-approved-page) .app{
    padding-left:14px !important;
    padding-right:14px !important;
  }

  .profile-approved-card{
    padding:20px 15px !important;
    border-radius:26px !important;
  }

  .profile-approved-hero{
    gap:12px !important;
  }

  .profile-photo-ring{
    flex-basis:82px !important;
    width:82px !important;
    height:82px !important;
  }

  .profile-photo-ring .avatar,
  .profile-photo-ring .player-photo{
    width:74px !important;
    height:74px !important;
  }

  .profile-approved-head .v4-title{
    font-size:clamp(31px, 9.5vw, 42px) !important;
  }

  .profile-approved-form .ref-choice{
    min-height:70px !important;
  }
}


/* =========================================================
   PROFILE - DATOS + INDICADORES + FOTO DEFAULT
========================================================= */

.player-photo-default{
  background:#071018 !important;
  object-fit:cover !important;
}

.profile-indicators-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:8px !important;
  margin:0 0 14px !important;
}

.profile-indicators-grid > div{
  min-height:64px !important;
  padding:10px 8px !important;
  border-radius:18px !important;
  border:1px solid rgba(168,255,0,.24) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(168,255,0,.10), transparent 38%),
    rgba(0,0,0,.24) !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035) !important;
}

.profile-indicators-grid small{
  display:block !important;
  color:rgba(255,255,255,.58) !important;
  font-size:9px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  text-transform:uppercase !important;
  letter-spacing:.35px !important;
}

.profile-indicators-grid b{
  display:block !important;
  margin-top:6px !important;
  color:#fff !important;
  font-family:Impact, Arial Black, sans-serif !important;
  font-size:23px !important;
  line-height:1 !important;
  font-style:italic !important;
  text-shadow:0 0 16px rgba(168,255,0,.12) !important;
}

.profile-current-data{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:8px !important;
  margin:0 0 16px !important;
}

.profile-current-data > div{
  min-width:0 !important;
  padding:10px 12px !important;
  border-radius:16px !important;
  border:1px solid rgba(255,255,255,.10) !important;
  background:rgba(0,0,0,.20) !important;
}

.profile-current-data small{
  display:block !important;
  margin-bottom:5px !important;
  color:rgba(255,255,255,.48) !important;
  font-size:9px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  text-transform:uppercase !important;
  letter-spacing:.35px !important;
}

.profile-current-data strong{
  display:block !important;
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  color:rgba(255,255,255,.78) !important;
  font-size:12px !important;
  line-height:1.15 !important;
  font-weight:900 !important;
}

.profile-approved-form .auth-input-icon input[type="date"]{
  color-scheme:dark !important;
}

@media(max-width:390px){
  .profile-indicators-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:7px !important;
  }

  .profile-indicators-grid > div{
    min-height:58px !important;
    padding:9px 5px !important;
    border-radius:16px !important;
  }

  .profile-indicators-grid small{
    font-size:8px !important;
  }

  .profile-indicators-grid b{
    font-size:20px !important;
  }

  .profile-current-data{
    grid-template-columns:1fr !important;
  }
}


/* =========================================================
   PROFILE FORM - MISMA VISUAL DEL REGISTRO APROBADO
   Ruta: index.php?p=profile
========================================================= */

.profile-approved-form{
  gap:14px !important;
}

.profile-form-section{
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
  margin:0 !important;
}

/* Inputs iguales a register: alto, radio, iconografía y contraste */
.profile-approved-form .auth-input-icon{
  min-height:54px !important;
  height:54px !important;
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:0 14px !important;
  border-radius:18px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  background:rgba(0,0,0,.24) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035) !important;
}

.profile-approved-form .auth-input-icon img{
  width:18px !important;
  height:18px !important;
  flex:0 0 18px !important;
  object-fit:contain !important;
  opacity:.9 !important;
  filter:drop-shadow(0 0 8px rgba(168,255,0,.12)) !important;
}

.profile-approved-form .auth-input-icon input{
  flex:1 !important;
  min-width:0 !important;
  height:100% !important;
  border:0 !important;
  outline:0 !important;
  background:transparent !important;
  color:#fff !important;
  font-size:14px !important;
  font-weight:850 !important;
  line-height:1 !important;
}

.profile-approved-form .auth-input-icon input::placeholder{
  color:rgba(255,255,255,.42) !important;
}

.profile-approved-form .auth-input-icon:focus-within{
  border-color:rgba(168,255,0,.58) !important;
  box-shadow:
    0 0 0 4px rgba(168,255,0,.08),
    inset 0 0 0 1px rgba(168,255,0,.18) !important;
}

/* Autofill dark */
.profile-approved-form input:-webkit-autofill,
.profile-approved-form input:-webkit-autofill:hover,
.profile-approved-form input:-webkit-autofill:focus{
  -webkit-text-fill-color:#fff !important;
  caret-color:#fff !important;
  transition:background-color 99999s ease-in-out 0s !important;
  box-shadow:0 0 0 1000px rgba(0,0,0,.24) inset !important;
}

/* Upload tipo card, no input plano */
.profile-upload-card{
  position:relative !important;
  min-height:74px !important;
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  padding:12px 14px !important;
  border-radius:20px !important;
  border:1px solid rgba(168,255,0,.26) !important;
  background:
    radial-gradient(circle at 15% 50%, rgba(168,255,0,.10), transparent 35%),
    rgba(0,0,0,.24) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035) !important;
  overflow:hidden !important;
  cursor:pointer !important;
}

.profile-upload-card input[type="file"]{
  position:absolute !important;
  inset:0 !important;
  opacity:0 !important;
  cursor:pointer !important;
}

.profile-upload-icon{
  width:42px !important;
  height:42px !important;
  flex:0 0 42px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:15px !important;
  background:linear-gradient(180deg,#d8ff39,#8eff00) !important;
  box-shadow:0 0 0 5px rgba(168,255,0,.08), inset 0 1px 0 rgba(255,255,255,.5) !important;
}

.profile-upload-icon img{
  width:19px !important;
  height:19px !important;
  display:block !important;
  filter:brightness(0) !important;
}

.profile-upload-copy{
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:4px !important;
}

.profile-upload-copy strong{
  color:#fff !important;
  font-size:14px !important;
  font-weight:1000 !important;
  line-height:1 !important;
}

.profile-upload-copy small{
  color:rgba(255,255,255,.54) !important;
  font-size:11px !important;
  line-height:1.25 !important;
  font-weight:750 !important;
}

/* Quitar foto como opción compacta */
.profile-remove-photo{
  min-height:38px !important;
  padding:0 4px !important;
  margin-top:-2px !important;
}

/* Choice cards iguales a register */
.profile-approved-form .auth-choice-grid{
  display:grid !important;
  gap:8px !important;
}

.profile-approved-form .auth-ref-grid-positions{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}

.profile-approved-form .auth-ref-grid-foot{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}

.profile-approved-form .ref-choice{
  position:relative !important;
  min-height:78px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  padding:10px 8px !important;
  border-radius:20px !important;
  border:1px solid rgba(255,255,255,.11) !important;
  background:rgba(0,0,0,.24) !important;
  color:rgba(255,255,255,.72) !important;
  text-align:center !important;
  overflow:hidden !important;
  cursor:pointer !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03) !important;
}

.profile-approved-form .ref-choice input{
  position:absolute !important;
  opacity:0 !important;
  pointer-events:none !important;
}

.profile-approved-form .ref-choice .choice-icon{
  width:38px !important;
  height:38px !important;
  border-radius:15px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:rgba(255,255,255,.055) !important;
  border:1px solid rgba(255,255,255,.08) !important;
}

.profile-approved-form .ref-choice .choice-icon img{
  width:25px !important;
  height:25px !important;
  object-fit:contain !important;
}

.profile-approved-form .ref-choice > span:last-child{
  font-size:11px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  text-transform:uppercase !important;
  letter-spacing:.15px !important;
}

.profile-approved-form .ref-choice:has(input:checked){
  color:#071018 !important;
  border-color:rgba(205,255,46,.92) !important;
  background:linear-gradient(180deg,#d8ff39 0%,#a8ff00 52%,#79e900 100%) !important;
  box-shadow:0 12px 28px rgba(168,255,0,.18), inset 0 1px 0 rgba(255,255,255,.55) !important;
}

.profile-approved-form .ref-choice:has(input:checked) .choice-icon{
  background:rgba(7,16,24,.12) !important;
  border-color:rgba(7,16,24,.14) !important;
}

.profile-approved-form .ref-choice:has(input:checked) .choice-icon img{
  filter:brightness(0) !important;
}

/* Slider igual register, limpio */
.profile-approved-form .player-level-wrap{
  padding:14px !important;
  border-radius:20px !important;
  border:1px solid rgba(255,255,255,.11) !important;
  background:rgba(0,0,0,.24) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03) !important;
}

.profile-approved-form .level-head{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  margin-bottom:10px !important;
}

.profile-approved-form .level-head .auth-ref-label{
  margin:0 !important;
}

.profile-approved-form .level-head strong{
  color:var(--cr-lime) !important;
  font-size:12px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  text-transform:uppercase !important;
  letter-spacing:.25px !important;
}

.profile-approved-form .player-level-wrap input[type="range"]{
  width:100% !important;
  accent-color:var(--cr-lime) !important;
}

.profile-approved-form .level-scale{
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:4px !important;
  margin-top:8px !important;
}

.profile-approved-form .level-scale span{
  color:rgba(255,255,255,.54) !important;
  font-size:8px !important;
  line-height:1.05 !important;
  font-weight:900 !important;
  text-align:center !important;
  text-transform:uppercase !important;
}

/* Botón ocupa el mismo lenguaje del registro */
.profile-approved-form .auth-btn-primary{
  min-height:54px !important;
  border-radius:18px !important;
  font-size:14px !important;
  font-weight:1000 !important;
}

@media(max-width:390px){
  .profile-approved-form .auth-input-icon{
    min-height:52px !important;
    height:52px !important;
    border-radius:17px !important;
  }

  .profile-upload-card{
    min-height:70px !important;
    border-radius:18px !important;
  }

  .profile-upload-icon{
    width:38px !important;
    height:38px !important;
    flex-basis:38px !important;
  }

  .profile-approved-form .ref-choice{
    min-height:72px !important;
    border-radius:18px !important;
  }

  .profile-approved-form .ref-choice .choice-icon{
    width:34px !important;
    height:34px !important;
    border-radius:13px !important;
  }

  .profile-approved-form .ref-choice .choice-icon img{
    width:23px !important;
    height:23px !important;
  }
}


/* =========================================================
   PROFILE - QUITAR FOTO ACTUAL MEJORADO
========================================================= */

.profile-remove-photo-card{
  position:relative !important;
  min-height:58px !important;
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  margin-top:0 !important;
  padding:11px 13px !important;
  border-radius:18px !important;
  border:1px solid rgba(255,255,255,.11) !important;
  background:
    radial-gradient(circle at 10% 50%, rgba(255,80,80,.10), transparent 38%),
    rgba(0,0,0,.22) !important;
  color:rgba(255,255,255,.78) !important;
  cursor:pointer !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03) !important;
  transition:border-color .18s ease, background .18s ease, transform .18s ease !important;
}

.profile-remove-photo-card:hover{
  border-color:rgba(255,255,255,.20) !important;
  background:
    radial-gradient(circle at 10% 50%, rgba(255,80,80,.14), transparent 38%),
    rgba(0,0,0,.28) !important;
}

.profile-remove-photo-card input{
  position:absolute !important;
  opacity:0 !important;
  pointer-events:none !important;
}

.remove-photo-check{
  width:34px !important;
  height:34px !important;
  flex:0 0 34px !important;
  border-radius:13px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid rgba(255,255,255,.16) !important;
  background:rgba(255,255,255,.06) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035) !important;
}

.remove-photo-check::before{
  content:"" !important;
  width:14px !important;
  height:14px !important;
  border-radius:5px !important;
  background:rgba(255,255,255,.16) !important;
  transition:all .18s ease !important;
}

.remove-photo-copy{
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:4px !important;
}

.remove-photo-copy strong{
  color:#fff !important;
  font-size:13px !important;
  line-height:1 !important;
  font-weight:1000 !important;
}

.remove-photo-copy small{
  color:rgba(255,255,255,.52) !important;
  font-size:11px !important;
  line-height:1.2 !important;
  font-weight:750 !important;
}

.profile-remove-photo-card:has(input:checked){
  border-color:rgba(255,82,82,.62) !important;
  background:
    radial-gradient(circle at 10% 50%, rgba(255,82,82,.24), transparent 42%),
    rgba(35,8,8,.36) !important;
  box-shadow:0 0 0 4px rgba(255,82,82,.08), inset 0 0 0 1px rgba(255,255,255,.04) !important;
}

.profile-remove-photo-card:has(input:checked) .remove-photo-check{
  border-color:rgba(255,82,82,.72) !important;
  background:linear-gradient(180deg,#ff6b6b,#e63946) !important;
  box-shadow:0 0 0 5px rgba(255,82,82,.10), inset 0 1px 0 rgba(255,255,255,.35) !important;
}

.profile-remove-photo-card:has(input:checked) .remove-photo-check::before{
  content:"×" !important;
  width:auto !important;
  height:auto !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#fff !important;
  font-size:22px !important;
  line-height:1 !important;
  font-weight:1000 !important;
}

.profile-remove-photo-card:has(input:checked) .remove-photo-copy strong{
  color:#ffb3b3 !important;
}

@media(max-width:390px){
  .profile-remove-photo-card{
    min-height:54px !important;
    padding:10px 12px !important;
    border-radius:17px !important;
  }

  .remove-photo-check{
    width:31px !important;
    height:31px !important;
    flex-basis:31px !important;
  }

  .remove-photo-copy strong{
    font-size:12px !important;
  }

  .remove-photo-copy small{
    font-size:10px !important;
  }
}


/* =========================================================
   PROFILE - FIX QUITAR FOTO COMPACTO
   Corrige checkbox gigante / texto desalineado.
========================================================= */

.profile-approved-form .profile-remove-photo-card{
  width:100% !important;
  min-height:50px !important;
  height:auto !important;
  display:grid !important;
  grid-template-columns:30px minmax(0,1fr) !important;
  align-items:center !important;
  justify-content:initial !important;
  column-gap:10px !important;
  margin:0 !important;
  padding:9px 11px !important;
  border-radius:16px !important;
  text-align:left !important;
}

/* Ocultar checkbox real completamente */
.profile-approved-form .profile-remove-photo-card input[type="checkbox"],
.profile-remove-photo-card input[type="checkbox"]{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  min-width:1px !important;
  min-height:1px !important;
  max-width:1px !important;
  max-height:1px !important;
  margin:0 !important;
  padding:0 !important;
  opacity:0 !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  pointer-events:none !important;
}

/* Indicador pequeño */
.profile-approved-form .profile-remove-photo-card .remove-photo-check,
.profile-remove-photo-card .remove-photo-check{
  grid-column:1 !important;
  width:28px !important;
  height:28px !important;
  flex:0 0 28px !important;
  border-radius:11px !important;
}

/* Texto compacto */
.profile-approved-form .profile-remove-photo-card .remove-photo-copy,
.profile-remove-photo-card .remove-photo-copy{
  grid-column:2 !important;
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:center !important;
  gap:3px !important;
  text-align:left !important;
}

.profile-approved-form .profile-remove-photo-card .remove-photo-copy strong,
.profile-remove-photo-card .remove-photo-copy strong{
  display:block !important;
  margin:0 !important;
  color:#fff !important;
  font-size:12px !important;
  line-height:1.05 !important;
  font-weight:1000 !important;
  letter-spacing:.2px !important;
  text-transform:none !important;
}

.profile-approved-form .profile-remove-photo-card .remove-photo-copy small,
.profile-remove-photo-card .remove-photo-copy small{
  display:block !important;
  margin:0 !important;
  color:rgba(255,255,255,.50) !important;
  font-size:10px !important;
  line-height:1.18 !important;
  font-weight:750 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}

.profile-approved-form .profile-remove-photo-card .remove-photo-check::before,
.profile-remove-photo-card .remove-photo-check::before{
  width:11px !important;
  height:11px !important;
  border-radius:4px !important;
}

.profile-approved-form .profile-remove-photo-card:has(input:checked) .remove-photo-check::before,
.profile-remove-photo-card:has(input:checked) .remove-photo-check::before{
  font-size:18px !important;
}

@media(max-width:390px){
  .profile-approved-form .profile-remove-photo-card{
    min-height:48px !important;
    grid-template-columns:28px minmax(0,1fr) !important;
    column-gap:9px !important;
    padding:9px 10px !important;
    border-radius:15px !important;
  }

  .profile-approved-form .profile-remove-photo-card .remove-photo-check{
    width:26px !important;
    height:26px !important;
    flex-basis:26px !important;
    border-radius:10px !important;
  }

  .profile-approved-form .profile-remove-photo-card .remove-photo-copy strong{
    font-size:11px !important;
  }

  .profile-approved-form .profile-remove-photo-card .remove-photo-copy small{
    font-size:9px !important;
  }
}


/* =========================================================
   PROFILE - ETIQUETAS EN DATOS PERSONALES
   Muestra claramente qué campo se está editando.
========================================================= */

.profile-approved-form .profile-input-floating{
  position:relative !important;
  min-height:64px !important;
  height:64px !important;
  align-items:center !important;
  padding-top:15px !important;
  padding-bottom:7px !important;
}

.profile-approved-form .profile-input-floating img{
  align-self:center !important;
  margin-top:8px !important;
}

.profile-field-label{
  position:absolute !important;
  top:9px !important;
  left:46px !important;
  right:14px !important;
  display:block !important;
  color:rgba(168,255,0,.92) !important;
  font-size:9px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  text-transform:uppercase !important;
  letter-spacing:.55px !important;
  pointer-events:none !important;
}

.profile-approved-form .profile-input-floating input{
  padding-top:10px !important;
  height:100% !important;
  line-height:1.1 !important;
}

.profile-approved-form .profile-input-floating input::placeholder{
  color:rgba(255,255,255,.28) !important;
}

/* Fecha con etiqueta y calendario alineado */
.profile-approved-form .profile-input-floating input[type="date"]{
  color:#fff !important;
}

.profile-approved-form .profile-input-floating input[type="date"]::-webkit-calendar-picker-indicator{
  filter:invert(1) brightness(1.8) !important;
  opacity:.92 !important;
  cursor:pointer !important;
}

@media(max-width:390px){
  .profile-approved-form .profile-input-floating{
    min-height:60px !important;
    height:60px !important;
    padding-top:14px !important;
  }

  .profile-field-label{
    top:8px !important;
    left:44px !important;
    font-size:8.5px !important;
  }
}


/* =========================================================
   PROFILE - ALINEACIÓN ETIQUETA + DATO
   Corrige que la etiqueta quede desplazada respecto al valor.
========================================================= */

.profile-approved-form .profile-input-floating{
  display:grid !important;
  grid-template-columns:34px minmax(0,1fr) !important;
  grid-template-rows:auto auto !important;
  column-gap:12px !important;
  row-gap:6px !important;
  align-items:center !important;
  min-height:66px !important;
  height:66px !important;
  padding:10px 14px !important;
}

/* Icono centrado verticalmente en toda la caja */
.profile-approved-form .profile-input-floating > img{
  grid-column:1 !important;
  grid-row:1 / 3 !important;
  align-self:center !important;
  justify-self:center !important;
  margin:0 !important;
}

/* Etiqueta y valor empiezan exactamente en la misma columna */
.profile-approved-form .profile-input-floating .profile-field-label{
  position:static !important;
  grid-column:2 !important;
  grid-row:1 !important;
  display:block !important;
  align-self:end !important;
  margin:0 !important;
  padding:0 !important;
  color:var(--cr-lime) !important;
  font-size:9px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  text-transform:uppercase !important;
  letter-spacing:.55px !important;
}

/* Input alineado bajo la etiqueta */
.profile-approved-form .profile-input-floating input{
  grid-column:2 !important;
  grid-row:2 !important;
  align-self:start !important;
  width:100% !important;
  height:auto !important;
  min-height:24px !important;
  margin:0 !important;
  padding:0 !important;
  line-height:1.1 !important;
  text-align:left !important;
}

/* Evita que reglas anteriores agreguen desplazamiento */
.profile-approved-form .profile-input-floating input,
.profile-approved-form .profile-input-floating input[type="date"]{
  padding-top:0 !important;
}

/* Calendario a la derecha sin mover el texto */
.profile-approved-form .profile-input-floating input[type="date"]{
  display:block !important;
  color:#fff !important;
}

.profile-approved-form .profile-input-floating input[type="date"]::-webkit-calendar-picker-indicator{
  margin-left:auto !important;
}

@media(max-width:390px){
  .profile-approved-form .profile-input-floating{
    grid-template-columns:32px minmax(0,1fr) !important;
    column-gap:10px !important;
    min-height:62px !important;
    height:62px !important;
    padding:9px 12px !important;
  }

  .profile-approved-form .profile-input-floating .profile-field-label{
    font-size:8.5px !important;
  }

  .profile-approved-form .profile-input-floating input{
    min-height:22px !important;
  }
}


/* =========================================================
   RANKING CRACKS - VISTA VISUAL APP
   Ruta: index.php?p=ranking&type=cracks
========================================================= */

.ranking-cracks-board{
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
  margin:10px 0 34px !important;
}

.ranking-cracks-hero{
  position:relative !important;
  min-height:118px !important;
  padding:18px 18px !important;
  border-radius:28px !important;
  overflow:hidden !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  text-align:left !important;
  border:1px solid rgba(168,255,0,.48) !important;
  background:
    radial-gradient(circle at 82% 16%, rgba(168,255,0,.13), transparent 28%),
    linear-gradient(180deg, rgba(9,17,24,.54), rgba(4,9,14,.72)),
    url("../img/ranking/page-backgrounds/bg-ranking-cracks-page.png") center top / cover no-repeat !important;
  backdrop-filter:blur(14px) !important;
  -webkit-backdrop-filter:blur(14px) !important;
  box-shadow:
    0 22px 48px rgba(0,0,0,.44),
    inset 0 0 0 1px rgba(255,255,255,.05),
    inset 0 0 34px rgba(168,255,0,.045) !important;
}

.ranking-cracks-hero::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  background:
    radial-gradient(circle at 16% 48%, rgba(168,255,0,.18), transparent 28%),
    linear-gradient(90deg, rgba(0,0,0,.54), rgba(0,0,0,.18), rgba(0,0,0,.62)),
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.66)) !important;
}

.ranking-cracks-hero > div{
  position:relative !important;
  z-index:2 !important;
}

.ranking-cracks-hero h1{
  max-width:320px !important;
  margin:0 !important;
  color:#fff !important;
  font-family:Impact, Arial Black, sans-serif !important;
  font-size:clamp(34px, 10vw, 50px) !important;
  line-height:.88 !important;
  font-style:italic !important;
  text-transform:uppercase !important;
  letter-spacing:.2px !important;
  text-shadow:0 12px 28px rgba(0,0,0,.82), 0 0 18px rgba(255,255,255,.12) !important;
}

.ranking-cracks-hero p{
  display:inline-flex !important;
  margin:10px 0 0 !important;
  padding:7px 10px !important;
  border-radius:999px !important;
  color:var(--cr-lime) !important;
  background:rgba(0,0,0,.30) !important;
  border:1px solid rgba(168,255,0,.25) !important;
  font-size:11px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  text-transform:uppercase !important;
  letter-spacing:.3px !important;
  text-shadow:none !important;
}

.ranking-cracks-list{
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
  padding:10px !important;
  border-radius:28px !important;
  overflow:visible !important;
  border:1px solid rgba(168,255,0,.34) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(168,255,0,.08), transparent 32%),
    linear-gradient(180deg, rgba(9,17,24,.46), rgba(4,9,14,.66)) !important;
  backdrop-filter:blur(14px) !important;
  -webkit-backdrop-filter:blur(14px) !important;
  box-shadow:0 22px 48px rgba(0,0,0,.40), inset 0 0 0 1px rgba(255,255,255,.04) !important;
}

.ranking-cracks-list::before{
  content:"TOP CRACKS" !important;
  display:block !important;
  padding:8px 10px 0 !important;
  color:rgba(255,255,255,.58) !important;
  font-size:10px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  text-transform:uppercase !important;
  letter-spacing:.8px !important;
}

.crack-row{
  position:relative !important;
  min-height:82px !important;
  display:grid !important;
  grid-template-columns:42px minmax(0,1fr) 74px !important;
  align-items:center !important;
  color:#fff !important;
  text-decoration:none !important;
  border-radius:22px !important;
  border:1px solid rgba(255,255,255,.10) !important;
  background:
    linear-gradient(180deg, rgba(7,16,22,.82), rgba(3,9,13,.92)) !important;
  box-shadow:0 14px 28px rgba(0,0,0,.30), inset 0 0 0 1px rgba(255,255,255,.025) !important;
  overflow:hidden !important;
}

.crack-row::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  background:
    radial-gradient(circle at 14% 50%, rgba(168,255,0,.10), transparent 25%),
    linear-gradient(90deg, rgba(168,255,0,.05), transparent 44%, rgba(0,225,255,.045)) !important;
}

.crack-row-top{
  min-height:100px !important;
  grid-template-columns:46px minmax(0,1fr) 84px !important;
  border-color:rgba(168,255,0,.55) !important;
  background:
    radial-gradient(circle at 78% 50%, rgba(0,225,255,.11), transparent 32%),
    linear-gradient(180deg, rgba(9,20,27,.92), rgba(4,10,15,.98)) !important;
  box-shadow:
    0 18px 34px rgba(0,0,0,.36),
    0 0 0 1px rgba(168,255,0,.10),
    inset 0 0 28px rgba(168,255,0,.045) !important;
}

.crack-rank{
  position:relative !important;
  z-index:2 !important;
  height:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:#071018 !important;
  background:linear-gradient(180deg,#d8ff39,#8eff00) !important;
  font-family:Impact, Arial Black, sans-serif !important;
  font-size:24px !important;
  font-style:italic !important;
  font-weight:900 !important;
  box-shadow:inset -1px 0 0 rgba(255,255,255,.34) !important;
}

.crack-row-top .crack-rank{
  font-size:31px !important;
}

.crack-player{
  position:relative !important;
  z-index:2 !important;
  min-height:82px !important;
  padding:9px 10px 9px 12px !important;
  display:grid !important;
  grid-template-columns:48px minmax(0,1fr) !important;
  column-gap:12px !important;
  align-items:center !important;
}

.crack-row-top .crack-player{
  min-height:100px !important;
  grid-template-columns:58px minmax(0,1fr) !important;
  column-gap:13px !important;
}

.crack-photo{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.crack-player .avatar,
.crack-player .player-photo{
  width:46px !important;
  height:46px !important;
  border:2.5px solid var(--cr-lime) !important;
  background:#071018 !important;
  color:#fff !important;
  box-shadow:0 0 0 4px rgba(168,255,0,.13), 0 10px 18px rgba(0,0,0,.35) !important;
  object-fit:cover !important;
}

.crack-row-top .crack-player .avatar,
.crack-row-top .crack-player .player-photo{
  width:56px !important;
  height:56px !important;
  border-color:#d8ff39 !important;
}

.crack-copy{
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  gap:6px !important;
}

.crack-copy strong{
  display:block !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  color:#fff !important;
  font-size:19px !important;
  line-height:1.05 !important;
  font-weight:1000 !important;
  text-shadow:0 6px 16px rgba(0,0,0,.55) !important;
}

.crack-row-top .crack-copy strong{
  font-size:23px !important;
}

.crack-copy small{
  display:block !important;
  color:rgba(255,255,255,.58) !important;
  font-size:8.5px !important;
  line-height:1.15 !important;
  font-weight:900 !important;
  letter-spacing:.1px !important;
}

.crack-score{
  position:relative !important;
  z-index:2 !important;
  height:calc(100% - 12px) !important;
  margin:6px 6px 6px 0 !important;
  border-radius:18px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.30), transparent 36%),
    linear-gradient(180deg,#d8ff39,#8eff00) !important;
  color:#071018 !important;
  box-shadow:0 0 0 4px rgba(168,255,0,.08), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -12px 24px rgba(0,0,0,.10) !important;
}

.crack-score b{
  color:#071018 !important;
  font-family:Impact, Arial Black, sans-serif !important;
  font-size:30px !important;
  line-height:.9 !important;
  font-style:italic !important;
  text-shadow:0 2px 0 rgba(255,255,255,.25) !important;
}

.crack-row-top .crack-score b{
  font-size:38px !important;
}

.crack-score small{
  margin-top:5px !important;
  color:#071018 !important;
  opacity:.72 !important;
  font-size:7px !important;
  font-weight:1000 !important;
  text-transform:uppercase !important;
  letter-spacing:.25px !important;
}

.crack-score em{
  margin-top:4px !important;
  color:#071018 !important;
  font-size:11.5px !important;
  line-height:1 !important;
  font-style:normal !important;
  font-weight:1000 !important;
}

.crack-row-top .crack-score em{
  font-size:14px !important;
}

/* Chips de posición y pie para rankings visuales */
.ranking-meta-icons{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:4px !important;
}

.ranking-meta-chip{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:3px !important;
  min-height:19px !important;
  padding:3px 6px !important;
  border-radius:999px !important;
  border:1px solid rgba(168,255,0,.22) !important;
  background:rgba(0,0,0,.22) !important;
  color:rgba(255,255,255,.76) !important;
}

.ranking-meta-chip img{
  width:12px !important;
  height:12px !important;
  display:block !important;
  object-fit:contain !important;
}

.ranking-meta-chip em{
  display:block !important;
  font-style:normal !important;
  color:rgba(255,255,255,.76) !important;
  font-size:6.8px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  text-transform:uppercase !important;
  letter-spacing:0 !important;
}

@media(max-width:430px){
  .ranking-cracks-hero{
    min-height:104px !important;
    padding:15px 14px !important;
    border-radius:24px !important;
  }

  .ranking-cracks-hero h1{
    max-width:260px !important;
    font-size:clamp(29px, 9vw, 42px) !important;
  }

  .ranking-cracks-hero p{
    padding:6px 8px !important;
    font-size:9.5px !important;
  }

  .ranking-cracks-list{
    padding:8px !important;
    gap:8px !important;
    border-radius:24px !important;
  }

  .crack-row{
    min-height:76px !important;
    grid-template-columns:38px minmax(0,1fr) 66px !important;
    border-radius:19px !important;
  }

  .crack-row-top{
    min-height:90px !important;
    grid-template-columns:42px minmax(0,1fr) 72px !important;
  }

  .crack-rank{
    font-size:21px !important;
  }

  .crack-row-top .crack-rank{
    font-size:27px !important;
  }

  .crack-player{
    min-height:76px !important;
    padding:8px 8px !important;
    grid-template-columns:40px minmax(0,1fr) !important;
    column-gap:10px !important;
  }

  .crack-row-top .crack-player{
    min-height:90px !important;
    grid-template-columns:48px minmax(0,1fr) !important;
  }

  .crack-player .avatar,
  .crack-player .player-photo{
    width:38px !important;
    height:38px !important;
  }

  .crack-row-top .crack-player .avatar,
  .crack-row-top .crack-player .player-photo{
    width:46px !important;
    height:46px !important;
  }

  .crack-copy strong{
    font-size:16px !important;
  }

  .crack-row-top .crack-copy strong{
    font-size:19px !important;
  }

  .crack-copy small{
    font-size:7.2px !important;
  }

  .crack-score{
    height:calc(100% - 10px) !important;
    margin:5px 5px 5px 0 !important;
    border-radius:16px !important;
  }

  .crack-score b{
    font-size:25px !important;
  }

  .crack-row-top .crack-score b{
    font-size:31px !important;
  }

  .crack-score small{
    font-size:6.4px !important;
  }

  .crack-score em{
    font-size:9.5px !important;
  }

  .crack-row-top .crack-score em{
    font-size:11.5px !important;
  }

  .ranking-meta-chip{
    min-height:18px !important;
    padding:3px 5px !important;
  }

  .ranking-meta-chip img{
    width:11px !important;
    height:11px !important;
  }

  .ranking-meta-chip em{
    font-size:6.2px !important;
  }
}

@media(max-width:360px){
  .crack-row{
    grid-template-columns:35px minmax(0,1fr) 60px !important;
  }

  .crack-row-top{
    grid-template-columns:38px minmax(0,1fr) 66px !important;
  }

  .crack-player{
    grid-template-columns:34px minmax(0,1fr) !important;
    column-gap:8px !important;
  }

  .crack-row-top .crack-player{
    grid-template-columns:40px minmax(0,1fr) !important;
  }

  .crack-player .avatar,
  .crack-player .player-photo{
    width:32px !important;
    height:32px !important;
  }

  .crack-row-top .crack-player .avatar,
  .crack-row-top .crack-player .player-photo{
    width:38px !important;
    height:38px !important;
  }

  .ranking-meta-chip em{
    display:none !important;
  }

  .ranking-meta-chip{
    min-width:22px !important;
    padding:4px !important;
  }
}


/* =========================================================
   RANKING ARQUEROS - VISTA VISUAL APP
   Ruta: index.php?p=ranking&type=arqueros
   Regla: solo ARQ >= 60%. Menor GRP es mejor.
========================================================= */

.ranking-keepers-board{
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
  margin:10px 0 34px !important;
}

.ranking-keepers-hero{
  position:relative !important;
  min-height:118px !important;
  padding:18px 18px !important;
  border-radius:28px !important;
  overflow:hidden !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  text-align:left !important;
  border:1px solid rgba(0,225,255,.48) !important;
  background:
    radial-gradient(circle at 82% 16%, rgba(0,225,255,.16), transparent 28%),
    linear-gradient(180deg, rgba(9,17,24,.54), rgba(4,9,14,.72)),
    url("../img/ranking/page-backgrounds/bg-ranking-arqueros-page.png") center top / cover no-repeat !important;
  backdrop-filter:blur(14px) !important;
  -webkit-backdrop-filter:blur(14px) !important;
  box-shadow:
    0 22px 48px rgba(0,0,0,.44),
    inset 0 0 0 1px rgba(255,255,255,.05),
    inset 0 0 34px rgba(0,225,255,.055) !important;
}

.ranking-keepers-hero::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  background:
    radial-gradient(circle at 16% 48%, rgba(0,225,255,.18), transparent 28%),
    linear-gradient(90deg, rgba(0,0,0,.58), rgba(0,0,0,.20), rgba(0,0,0,.66)),
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.66)) !important;
}

.ranking-keepers-hero > div{
  position:relative !important;
  z-index:2 !important;
}

.ranking-keepers-hero h1{
  max-width:340px !important;
  margin:0 !important;
  color:#fff !important;
  font-family:Impact, Arial Black, sans-serif !important;
  font-size:clamp(34px, 10vw, 50px) !important;
  line-height:.88 !important;
  font-style:italic !important;
  text-transform:uppercase !important;
  letter-spacing:.2px !important;
  text-shadow:0 12px 28px rgba(0,0,0,.82), 0 0 18px rgba(255,255,255,.12) !important;
}

.ranking-keepers-hero p{
  display:inline-flex !important;
  margin:10px 0 0 !important;
  padding:7px 10px !important;
  border-radius:999px !important;
  color:#7ef3ff !important;
  background:rgba(0,0,0,.30) !important;
  border:1px solid rgba(0,225,255,.25) !important;
  font-size:11px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  text-transform:uppercase !important;
  letter-spacing:.3px !important;
  text-shadow:none !important;
}

.ranking-keepers-note{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:8px !important;
}

.ranking-keepers-note span{
  display:flex !important;
  min-height:38px !important;
  align-items:center !important;
  justify-content:center !important;
  padding:8px 10px !important;
  border-radius:16px !important;
  border:1px solid rgba(0,225,255,.22) !important;
  background:rgba(0,0,0,.24) !important;
  color:rgba(255,255,255,.70) !important;
  font-size:10px !important;
  line-height:1.1 !important;
  font-weight:1000 !important;
  text-transform:uppercase !important;
  text-align:center !important;
}

.ranking-keepers-list{
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
  padding:10px !important;
  border-radius:28px !important;
  overflow:visible !important;
  border:1px solid rgba(0,225,255,.34) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(0,225,255,.08), transparent 32%),
    linear-gradient(180deg, rgba(9,17,24,.46), rgba(4,9,14,.66)) !important;
  backdrop-filter:blur(14px) !important;
  -webkit-backdrop-filter:blur(14px) !important;
  box-shadow:0 22px 48px rgba(0,0,0,.40), inset 0 0 0 1px rgba(255,255,255,.04) !important;
}

.ranking-keepers-list::before{
  content:"TOP ARQUEROS" !important;
  display:block !important;
  padding:8px 10px 0 !important;
  color:rgba(255,255,255,.58) !important;
  font-size:10px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  text-transform:uppercase !important;
  letter-spacing:.8px !important;
}

.keeper-row{
  position:relative !important;
  min-height:82px !important;
  display:grid !important;
  grid-template-columns:42px minmax(0,1fr) 74px !important;
  align-items:center !important;
  color:#fff !important;
  text-decoration:none !important;
  border-radius:22px !important;
  border:1px solid rgba(255,255,255,.10) !important;
  background:
    linear-gradient(180deg, rgba(7,16,22,.82), rgba(3,9,13,.92)) !important;
  box-shadow:0 14px 28px rgba(0,0,0,.30), inset 0 0 0 1px rgba(255,255,255,.025) !important;
  overflow:hidden !important;
}

.keeper-row::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  background:
    radial-gradient(circle at 14% 50%, rgba(0,225,255,.10), transparent 25%),
    linear-gradient(90deg, rgba(0,225,255,.05), transparent 44%, rgba(168,255,0,.045)) !important;
}

.keeper-row-top{
  min-height:100px !important;
  grid-template-columns:46px minmax(0,1fr) 84px !important;
  border-color:rgba(0,225,255,.55) !important;
  background:
    radial-gradient(circle at 78% 50%, rgba(0,225,255,.13), transparent 32%),
    linear-gradient(180deg, rgba(9,20,27,.92), rgba(4,10,15,.98)) !important;
  box-shadow:
    0 18px 34px rgba(0,0,0,.36),
    0 0 0 1px rgba(0,225,255,.10),
    inset 0 0 28px rgba(0,225,255,.045) !important;
}

.keeper-rank{
  position:relative !important;
  z-index:2 !important;
  height:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:#071018 !important;
  background:linear-gradient(180deg,#7ef3ff,#00d9ff) !important;
  font-family:Impact, Arial Black, sans-serif !important;
  font-size:24px !important;
  font-style:italic !important;
  font-weight:900 !important;
  box-shadow:inset -1px 0 0 rgba(255,255,255,.34) !important;
}

.keeper-row-top .keeper-rank{
  font-size:31px !important;
}

.keeper-player{
  position:relative !important;
  z-index:2 !important;
  min-height:82px !important;
  padding:9px 10px 9px 12px !important;
  display:grid !important;
  grid-template-columns:48px minmax(0,1fr) !important;
  column-gap:12px !important;
  align-items:center !important;
}

.keeper-row-top .keeper-player{
  min-height:100px !important;
  grid-template-columns:58px minmax(0,1fr) !important;
  column-gap:13px !important;
}

.keeper-photo{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.keeper-player .avatar,
.keeper-player .player-photo{
  width:46px !important;
  height:46px !important;
  border:2.5px solid #7ef3ff !important;
  background:#071018 !important;
  color:#fff !important;
  box-shadow:0 0 0 4px rgba(0,225,255,.13), 0 10px 18px rgba(0,0,0,.35) !important;
  object-fit:cover !important;
}

.keeper-row-top .keeper-player .avatar,
.keeper-row-top .keeper-player .player-photo{
  width:56px !important;
  height:56px !important;
}

.keeper-copy{
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  gap:6px !important;
}

.keeper-copy strong{
  display:block !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  color:#fff !important;
  font-size:19px !important;
  line-height:1.05 !important;
  font-weight:1000 !important;
  text-shadow:0 6px 16px rgba(0,0,0,.55) !important;
}

.keeper-row-top .keeper-copy strong{
  font-size:23px !important;
}

.keeper-copy small{
  display:block !important;
  color:rgba(255,255,255,.58) !important;
  font-size:8.5px !important;
  line-height:1.15 !important;
  font-weight:900 !important;
  letter-spacing:.1px !important;
}

.keeper-score{
  position:relative !important;
  z-index:2 !important;
  height:calc(100% - 12px) !important;
  margin:6px 6px 6px 0 !important;
  border-radius:18px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.34), transparent 36%),
    linear-gradient(180deg,#7ef3ff,#00d9ff) !important;
  color:#071018 !important;
  box-shadow:0 0 0 4px rgba(0,225,255,.08), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -12px 24px rgba(0,0,0,.10) !important;
}

.keeper-score b{
  color:#071018 !important;
  font-family:Impact, Arial Black, sans-serif !important;
  font-size:28px !important;
  line-height:.9 !important;
  font-style:italic !important;
  text-shadow:0 2px 0 rgba(255,255,255,.25) !important;
}

.keeper-row-top .keeper-score b{
  font-size:36px !important;
}

.keeper-score small{
  margin-top:5px !important;
  color:#071018 !important;
  opacity:.72 !important;
  font-size:7px !important;
  font-weight:1000 !important;
  text-transform:uppercase !important;
  letter-spacing:.25px !important;
}

.keeper-score em{
  margin-top:4px !important;
  color:#071018 !important;
  font-size:11.5px !important;
  line-height:1 !important;
  font-style:normal !important;
  font-weight:1000 !important;
}

.keeper-empty{
  padding:18px 14px !important;
  border-radius:20px !important;
  border:1px solid rgba(0,225,255,.25) !important;
  background:rgba(0,0,0,.24) !important;
  text-align:center !important;
}

.keeper-empty strong{
  display:block !important;
  color:#fff !important;
  font-size:15px !important;
  font-weight:1000 !important;
}

.keeper-empty small{
  display:block !important;
  margin-top:6px !important;
  color:rgba(255,255,255,.62) !important;
  font-size:11px !important;
  line-height:1.3 !important;
}

@media(max-width:430px){
  .ranking-keepers-hero{
    min-height:104px !important;
    padding:15px 14px !important;
    border-radius:24px !important;
  }

  .ranking-keepers-hero h1{
    max-width:270px !important;
    font-size:clamp(29px, 9vw, 42px) !important;
  }

  .ranking-keepers-hero p{
    padding:6px 8px !important;
    font-size:9.5px !important;
  }

  .ranking-keepers-note{
    gap:7px !important;
  }

  .ranking-keepers-note span{
    min-height:34px !important;
    padding:7px 8px !important;
    font-size:8px !important;
    border-radius:14px !important;
  }

  .ranking-keepers-list{
    padding:8px !important;
    gap:8px !important;
    border-radius:24px !important;
  }

  .keeper-row{
    min-height:76px !important;
    grid-template-columns:38px minmax(0,1fr) 66px !important;
    border-radius:19px !important;
  }

  .keeper-row-top{
    min-height:90px !important;
    grid-template-columns:42px minmax(0,1fr) 72px !important;
  }

  .keeper-rank{
    font-size:21px !important;
  }

  .keeper-row-top .keeper-rank{
    font-size:27px !important;
  }

  .keeper-player{
    min-height:76px !important;
    padding:8px 8px !important;
    grid-template-columns:40px minmax(0,1fr) !important;
    column-gap:10px !important;
  }

  .keeper-row-top .keeper-player{
    min-height:90px !important;
    grid-template-columns:48px minmax(0,1fr) !important;
  }

  .keeper-player .avatar,
  .keeper-player .player-photo{
    width:38px !important;
    height:38px !important;
  }

  .keeper-row-top .keeper-player .avatar,
  .keeper-row-top .keeper-player .player-photo{
    width:46px !important;
    height:46px !important;
  }

  .keeper-copy strong{
    font-size:16px !important;
  }

  .keeper-row-top .keeper-copy strong{
    font-size:19px !important;
  }

  .keeper-copy small{
    font-size:7.2px !important;
  }

  .keeper-score{
    height:calc(100% - 10px) !important;
    margin:5px 5px 5px 0 !important;
    border-radius:16px !important;
  }

  .keeper-score b{
    font-size:23px !important;
  }

  .keeper-row-top .keeper-score b{
    font-size:29px !important;
  }

  .keeper-score small{
    font-size:6.4px !important;
  }

  .keeper-score em{
    font-size:9.5px !important;
  }
}

@media(max-width:360px){
  .keeper-row{
    grid-template-columns:35px minmax(0,1fr) 60px !important;
  }

  .keeper-row-top{
    grid-template-columns:38px minmax(0,1fr) 66px !important;
  }

  .keeper-player{
    grid-template-columns:34px minmax(0,1fr) !important;
    column-gap:8px !important;
  }

  .keeper-row-top .keeper-player{
    grid-template-columns:40px minmax(0,1fr) !important;
  }

  .keeper-player .avatar,
  .keeper-player .player-photo{
    width:32px !important;
    height:32px !important;
  }

  .keeper-row-top .keeper-player .avatar,
  .keeper-row-top .keeper-player .player-photo{
    width:38px !important;
    height:38px !important;
  }
}


/* =========================================================
   RANKING DETAIL - FICHA COMPLETA JUGADOR
   Ruta: index.php?p=ranking&detail=ID
========================================================= */

.player-detail-page{
  display:flex !important;
  flex-direction:column !important;
  gap:14px !important;
  margin:8px 0 34px !important;
}

.player-detail-hero{
  display:grid !important;
  grid-template-columns:108px minmax(0,1fr) !important;
  gap:14px !important;
  align-items:center !important;
  padding:18px !important;
  border-radius:28px !important;
  border:1px solid rgba(168,255,0,.38) !important;
  background:
    radial-gradient(circle at 82% 12%, rgba(168,255,0,.13), transparent 32%),
    linear-gradient(180deg, rgba(9,17,24,.56), rgba(4,9,14,.72)) !important;
  backdrop-filter:blur(14px) !important;
  -webkit-backdrop-filter:blur(14px) !important;
  box-shadow:0 22px 48px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.045) !important;
}

.player-detail-photo{
  width:108px !important;
  height:108px !important;
  border-radius:999px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid rgba(168,255,0,.50) !important;
  background:rgba(0,0,0,.28) !important;
  box-shadow:0 0 0 6px rgba(168,255,0,.08), 0 18px 36px rgba(0,0,0,.35) !important;
}

.player-detail-photo .player-photo,
.player-detail-photo .avatar{
  width:96px !important;
  height:96px !important;
  border-radius:999px !important;
  object-fit:cover !important;
}

.player-detail-head{
  min-width:0 !important;
}

.player-detail-head .v4-title{
  margin:2px 0 6px !important;
  font-size:clamp(36px, 10vw, 54px) !important;
  line-height:.88 !important;
}

.player-detail-sub{
  margin:0 !important;
  color:rgba(255,255,255,.70) !important;
  font-size:12px !important;
  line-height:1.3 !important;
  font-weight:900 !important;
}

.player-detail-tags{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:6px !important;
  margin-top:10px !important;
}

.player-detail-tags > span:not(.ranking-meta-icons){
  display:inline-flex !important;
  align-items:center !important;
  min-height:24px !important;
  padding:5px 8px !important;
  border-radius:999px !important;
  color:rgba(255,255,255,.76) !important;
  background:rgba(0,0,0,.24) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  font-size:9px !important;
  font-weight:1000 !important;
  text-transform:uppercase !important;
}

.player-detail-metrics{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:8px !important;
}

.player-detail-metrics > div{
  min-height:68px !important;
  padding:10px 6px !important;
  border-radius:18px !important;
  border:1px solid rgba(168,255,0,.24) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(168,255,0,.10), transparent 38%),
    rgba(0,0,0,.24) !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035) !important;
}

.player-detail-metrics small,
.player-detail-summary small,
.match-stats small{
  display:block !important;
  color:rgba(255,255,255,.55) !important;
  font-size:8px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  text-transform:uppercase !important;
  letter-spacing:.35px !important;
}

.player-detail-metrics b{
  display:block !important;
  margin-top:6px !important;
  color:#fff !important;
  font-family:Impact, Arial Black, sans-serif !important;
  font-size:24px !important;
  line-height:1 !important;
  font-style:italic !important;
}

.player-detail-split{
  display:grid !important;
  grid-template-columns:1.15fr .85fr !important;
  gap:12px !important;
}

.player-detail-panel{
  padding:16px !important;
  border-radius:24px !important;
  border:1px solid rgba(255,255,255,.10) !important;
  background:
    radial-gradient(circle at 80% 0%, rgba(168,255,0,.08), transparent 34%),
    linear-gradient(180deg, rgba(9,17,24,.50), rgba(4,9,14,.68)) !important;
  backdrop-filter:blur(14px) !important;
  -webkit-backdrop-filter:blur(14px) !important;
  box-shadow:0 18px 38px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,255,255,.035) !important;
}

.player-detail-panel h2{
  margin:0 !important;
  color:#fff !important;
  font-size:17px !important;
  line-height:1.1 !important;
  font-weight:1000 !important;
  letter-spacing:-.2px !important;
}

.player-detail-panel p{
  margin:6px 0 0 !important;
  color:rgba(255,255,255,.58) !important;
  font-size:11px !important;
  line-height:1.35 !important;
  font-weight:750 !important;
}

.player-performance-chart{
  height:180px !important;
  display:flex !important;
  align-items:flex-end !important;
  gap:7px !important;
  padding:22px 2px 0 !important;
}

.perf-col{
  min-width:26px !important;
  flex:1 !important;
  height:100% !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-end !important;
  align-items:center !important;
  gap:6px !important;
}

.perf-bar{
  width:100% !important;
  min-height:8px !important;
  border-radius:10px 10px 5px 5px !important;
  background:linear-gradient(180deg,#d8ff39,#8eff00) !important;
  box-shadow:0 0 0 3px rgba(168,255,0,.08), inset 0 1px 0 rgba(255,255,255,.44) !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:center !important;
  padding-top:5px !important;
}

.perf-bar b{
  color:#071018 !important;
  font-size:9px !important;
  line-height:1 !important;
  font-weight:1000 !important;
}

.perf-col small{
  color:rgba(255,255,255,.58) !important;
  font-size:8px !important;
  line-height:1 !important;
  font-weight:1000 !important;
}

.player-detail-summary{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:8px !important;
  margin-top:14px !important;
}

.player-detail-summary > div{
  min-height:62px !important;
  padding:10px 6px !important;
  border-radius:16px !important;
  border:1px solid rgba(255,255,255,.10) !important;
  background:rgba(0,0,0,.24) !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}

.player-detail-summary b{
  margin-top:6px !important;
  color:#fff !important;
  font-family:Impact, Arial Black, sans-serif !important;
  font-size:24px !important;
  line-height:1 !important;
  font-style:italic !important;
}

.player-match-history{
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  margin-top:14px !important;
}

.player-match-row{
  display:grid !important;
  grid-template-columns:54px minmax(0,1fr) 122px !important;
  gap:10px !important;
  align-items:center !important;
  min-height:66px !important;
  padding:8px !important;
  border-radius:18px !important;
  border:1px solid rgba(255,255,255,.09) !important;
  background:rgba(0,0,0,.22) !important;
}

.match-date{
  min-height:50px !important;
  border-radius:14px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  background:linear-gradient(180deg,#d8ff39,#8eff00) !important;
  color:#071018 !important;
}

.match-date strong{
  font-family:Impact, Arial Black, sans-serif !important;
  font-size:20px !important;
  line-height:1 !important;
  font-style:italic !important;
}

.match-date small{
  margin-top:4px !important;
  color:rgba(7,16,24,.72) !important;
  font-size:8px !important;
  line-height:1 !important;
  font-weight:1000 !important;
}

.match-info{
  min-width:0 !important;
}

.match-info b{
  display:block !important;
  color:#fff !important;
  font-size:13px !important;
  line-height:1.1 !important;
  font-weight:1000 !important;
}

.match-info span{
  display:block !important;
  margin-top:5px !important;
  color:rgba(255,255,255,.56) !important;
  font-size:10px !important;
  line-height:1.25 !important;
  font-weight:750 !important;
}

.match-stats{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:5px !important;
}

.match-stats span{
  min-height:42px !important;
  border-radius:12px !important;
  background:rgba(255,255,255,.055) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
}

.match-stats b{
  margin-top:5px !important;
  color:#fff !important;
  font-size:14px !important;
  line-height:1 !important;
  font-weight:1000 !important;
}

.player-detail-empty{
  margin-top:14px !important;
  padding:14px !important;
  border-radius:18px !important;
  color:rgba(255,255,255,.64) !important;
  background:rgba(0,0,0,.22) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  font-size:12px !important;
  line-height:1.35 !important;
  text-align:center !important;
}

.player-detail-back{
  margin-top:4px !important;
}

@media(max-width:520px){
  .player-detail-hero{
    grid-template-columns:84px minmax(0,1fr) !important;
    gap:12px !important;
    padding:16px !important;
    border-radius:26px !important;
  }

  .player-detail-photo{
    width:84px !important;
    height:84px !important;
  }

  .player-detail-photo .player-photo,
  .player-detail-photo .avatar{
    width:74px !important;
    height:74px !important;
  }

  .player-detail-head .v4-title{
    font-size:clamp(32px, 9.5vw, 44px) !important;
  }

  .player-detail-sub{
    font-size:10.5px !important;
  }

  .player-detail-metrics{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:7px !important;
  }

  .player-detail-metrics > div{
    min-height:60px !important;
    border-radius:16px !important;
  }

  .player-detail-metrics b{
    font-size:20px !important;
  }

  .player-detail-split{
    grid-template-columns:1fr !important;
  }

  .player-performance-chart{
    height:150px !important;
    gap:5px !important;
  }

  .player-match-row{
    grid-template-columns:48px minmax(0,1fr) 96px !important;
    gap:8px !important;
    min-height:62px !important;
    padding:7px !important;
  }

  .match-stats{
    gap:4px !important;
  }

  .match-stats span{
    min-height:38px !important;
  }

  .match-stats small{
    font-size:7px !important;
  }

  .match-stats b{
    font-size:12px !important;
  }
}

@media(max-width:360px){
  .player-detail-metrics{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .player-match-row{
    grid-template-columns:44px minmax(0,1fr) !important;
  }

  .match-stats{
    grid-column:1 / -1 !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}


/* =========================================================
   RANKING DETAIL - USAR HOME PROGRESS CARD
   Integra el gráfico del dashboard en la ficha del jugador.
========================================================= */

.player-detail-progress-panel .home-progress-card{
  margin-top:14px !important;
  padding:12px !important;
  border-radius:18px !important;
  border:1px solid rgba(168,255,0,.32) !important;
  background:rgba(0,0,0,.22) !important;
}

.player-detail-progress-panel .home-progress-head{
  margin-bottom:10px !important;
}

.player-detail-progress-panel .home-progress-svg{
  min-height:150px !important;
}

.player-detail-progress-panel .home-progress-footer{
  border-top:1px solid rgba(255,255,255,.08) !important;
  padding-top:10px !important;
}

@media(max-width:520px){
  .player-detail-progress-panel .home-progress-card{
    margin-top:12px !important;
  }
}


/* =========================================================
   CHAMPIONSHIPS - VISTA APP
   Ruta: index.php?p=championships
========================================================= */

.championships-page{
  display:flex !important;
  flex-direction:column !important;
  gap:14px !important;
  margin:8px 0 34px !important;
}

.championships-hero{
  padding:20px 18px !important;
  border-radius:28px !important;
  border:1px solid rgba(168,255,0,.36) !important;
  background:
    radial-gradient(circle at 82% 10%, rgba(168,255,0,.14), transparent 32%),
    linear-gradient(180deg, rgba(9,17,24,.54), rgba(4,9,14,.72)) !important;
  backdrop-filter:blur(14px) !important;
  -webkit-backdrop-filter:blur(14px) !important;
  box-shadow:0 22px 48px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.045) !important;
}

.championships-hero .v4-title{
  margin:2px 0 8px !important;
  font-size:clamp(36px, 10vw, 54px) !important;
  line-height:.88 !important;
}

.championships-hero p:last-child{
  margin:0 !important;
  color:rgba(255,255,255,.66) !important;
  font-size:12px !important;
  line-height:1.35 !important;
  font-weight:800 !important;
}

.championship-list{
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
}

.championship-card{
  position:relative !important;
  overflow:hidden !important;
  padding:16px !important;
  border-radius:26px !important;
  border:1px solid rgba(255,255,255,.10) !important;
  background:
    radial-gradient(circle at 86% 0%, rgba(168,255,0,.08), transparent 32%),
    linear-gradient(180deg, rgba(9,17,24,.50), rgba(4,9,14,.70)) !important;
  backdrop-filter:blur(14px) !important;
  -webkit-backdrop-filter:blur(14px) !important;
  box-shadow:0 18px 38px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.035) !important;
}

.championship-card.active{
  border-color:rgba(168,255,0,.48) !important;
  box-shadow:0 22px 46px rgba(0,0,0,.40), 0 0 0 1px rgba(168,255,0,.10), inset 0 0 28px rgba(168,255,0,.045) !important;
}

.championship-card-top{
  display:flex !important;
  justify-content:space-between !important;
  gap:12px !important;
  align-items:flex-start !important;
}

.championship-status{
  display:inline-flex !important;
  min-height:24px !important;
  align-items:center !important;
  padding:5px 8px !important;
  border-radius:999px !important;
  border:1px solid rgba(168,255,0,.24) !important;
  background:rgba(0,0,0,.24) !important;
  color:var(--cr-lime) !important;
  font-size:9px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  text-transform:uppercase !important;
  letter-spacing:.35px !important;
}

.championship-status.status-finalizado,
.championship-status.status-cancelado{
  color:rgba(255,255,255,.58) !important;
  border-color:rgba(255,255,255,.12) !important;
}

.championship-card h2{
  margin:10px 0 5px !important;
  color:#fff !important;
  font-size:22px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  letter-spacing:-.4px !important;
}

.championship-card p{
  margin:0 !important;
  color:rgba(255,255,255,.58) !important;
  font-size:11px !important;
  line-height:1.25 !important;
  font-weight:800 !important;
}

.championship-active-badge{
  min-width:56px !important;
  min-height:28px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:6px 9px !important;
  border-radius:999px !important;
  color:#071018 !important;
  background:linear-gradient(180deg,#d8ff39,#8eff00) !important;
  font-size:9px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  text-transform:uppercase !important;
  box-shadow:0 0 0 5px rgba(168,255,0,.08), inset 0 1px 0 rgba(255,255,255,.45) !important;
}

.championship-active-badge:empty{
  display:none !important;
}

.championship-progress{
  margin:14px 0 12px !important;
}

.championship-progress > div{
  height:9px !important;
  border-radius:999px !important;
  overflow:hidden !important;
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.06) !important;
}

.championship-progress > div span{
  display:block !important;
  height:100% !important;
  border-radius:inherit !important;
  background:linear-gradient(90deg,#8eff00,#d8ff39) !important;
  box-shadow:0 0 16px rgba(168,255,0,.20) !important;
}

.championship-progress small{
  display:block !important;
  margin-top:7px !important;
  color:rgba(255,255,255,.54) !important;
  font-size:10px !important;
  line-height:1 !important;
  font-weight:900 !important;
}

.championship-metrics{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:7px !important;
}

.championship-metrics > div{
  min-height:58px !important;
  padding:8px 5px !important;
  border-radius:15px !important;
  border:1px solid rgba(255,255,255,.09) !important;
  background:rgba(0,0,0,.20) !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}

.championship-metrics small{
  color:rgba(255,255,255,.50) !important;
  font-size:7.5px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  text-transform:uppercase !important;
  letter-spacing:.2px !important;
}

.championship-metrics b{
  margin-top:6px !important;
  color:#fff !important;
  font-size:12px !important;
  line-height:1 !important;
  font-weight:1000 !important;
}

.championship-participation{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  margin-top:12px !important;
  padding:10px 11px !important;
  border-radius:16px !important;
  border:1px solid rgba(255,255,255,.09) !important;
  background:rgba(0,0,0,.20) !important;
}

.championship-participation .mine{
  color:rgba(255,255,255,.72) !important;
  font-size:10px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  text-transform:uppercase !important;
}

.championship-participation .mine.ok{
  color:var(--cr-lime) !important;
}

.championship-participation small{
  color:rgba(255,255,255,.46) !important;
  font-size:9px !important;
  line-height:1 !important;
  font-weight:800 !important;
}

.championship-actions{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:8px !important;
  margin-top:12px !important;
}

.championship-actions .v4-btn{
  min-height:46px !important;
  border-radius:16px !important;
  font-size:11px !important;
  padding:0 10px !important;
}

.championship-empty{
  padding:18px !important;
  border-radius:24px !important;
  border:1px solid rgba(255,255,255,.10) !important;
  background:rgba(0,0,0,.24) !important;
  text-align:center !important;
}

.championship-empty strong{
  display:block !important;
  color:#fff !important;
  font-size:16px !important;
  font-weight:1000 !important;
}

.championship-empty small{
  display:block !important;
  margin-top:6px !important;
  color:rgba(255,255,255,.58) !important;
  font-size:11px !important;
  line-height:1.3 !important;
}

@media(max-width:430px){
  .championships-hero{
    padding:18px 16px !important;
    border-radius:26px !important;
  }

  .championship-metrics{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .championship-metrics > div{
    min-height:54px !important;
  }

  .championship-actions{
    grid-template-columns:1fr !important;
  }

  .championship-participation{
    align-items:flex-start !important;
    flex-direction:column !important;
  }
}


/* =========================================================
   NOTIFICATIONS - VISTA APP
   Ruta: index.php?p=notifications
========================================================= */

.notifications-page{
  display:flex !important;
  flex-direction:column !important;
  gap:14px !important;
  margin:8px 0 34px !important;
}

.notifications-hero{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 86px !important;
  gap:14px !important;
  align-items:center !important;
  padding:20px 18px !important;
  border-radius:28px !important;
  border:1px solid rgba(168,255,0,.36) !important;
  background:
    radial-gradient(circle at 82% 10%, rgba(168,255,0,.14), transparent 32%),
    linear-gradient(180deg, rgba(9,17,24,.54), rgba(4,9,14,.72)) !important;
  backdrop-filter:blur(14px) !important;
  -webkit-backdrop-filter:blur(14px) !important;
  box-shadow:0 22px 48px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.045) !important;
}

.notifications-hero .v4-title{
  margin:2px 0 8px !important;
  font-size:clamp(34px, 9.6vw, 52px) !important;
  line-height:.88 !important;
}

.notifications-hero p:last-child{
  margin:0 !important;
  color:rgba(255,255,255,.66) !important;
  font-size:12px !important;
  line-height:1.35 !important;
  font-weight:800 !important;
}

.notifications-counter{
  min-height:86px !important;
  border-radius:22px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  background:linear-gradient(180deg,#d8ff39,#8eff00) !important;
  color:#071018 !important;
  box-shadow:0 0 0 6px rgba(168,255,0,.08), inset 0 1px 0 rgba(255,255,255,.48) !important;
}

.notifications-counter small{
  font-size:8px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  text-transform:uppercase !important;
  letter-spacing:.25px !important;
  opacity:.76 !important;
}

.notifications-counter b{
  margin-top:7px !important;
  font-family:Impact, Arial Black, sans-serif !important;
  font-size:38px !important;
  line-height:.9 !important;
  font-style:italic !important;
}

.notifications-toolbar{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
}

.notifications-tabs{
  flex:1 !important;
  min-width:0 !important;
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:8px !important;
}

.notifications-tabs a,
.notifications-mark-all{
  min-height:42px !important;
  border-radius:16px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  padding:0 11px !important;
  border:1px solid rgba(255,255,255,.10) !important;
  background:rgba(0,0,0,.24) !important;
  color:rgba(255,255,255,.72) !important;
  text-decoration:none !important;
  font-size:10px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  text-transform:uppercase !important;
  cursor:pointer !important;
}

.notifications-tabs a.active{
  color:#071018 !important;
  border-color:rgba(168,255,0,.88) !important;
  background:linear-gradient(180deg,#d8ff39,#8eff00) !important;
  box-shadow:0 0 0 5px rgba(168,255,0,.08), inset 0 1px 0 rgba(255,255,255,.45) !important;
}

.notifications-tabs b{
  font-size:9px !important;
  opacity:.82 !important;
}

.notifications-mark-all{
  white-space:nowrap !important;
  color:var(--cr-lime) !important;
  border-color:rgba(168,255,0,.22) !important;
}

.notifications-list{
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
}

.notification-card{
  position:relative !important;
  display:grid !important;
  grid-template-columns:46px minmax(0,1fr) 34px !important;
  gap:10px !important;
  align-items:center !important;
  min-height:86px !important;
  padding:12px !important;
  border-radius:22px !important;
  border:1px solid rgba(255,255,255,.10) !important;
  background:
    radial-gradient(circle at 10% 50%, rgba(168,255,0,.07), transparent 32%),
    linear-gradient(180deg, rgba(9,17,24,.48), rgba(4,9,14,.70)) !important;
  backdrop-filter:blur(14px) !important;
  -webkit-backdrop-filter:blur(14px) !important;
  box-shadow:0 16px 34px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,255,255,.035) !important;
}

.notification-card.read{
  opacity:.72 !important;
  background:linear-gradient(180deg, rgba(9,17,24,.34), rgba(4,9,14,.54)) !important;
}

.notification-card.unread{
  border-color:rgba(168,255,0,.34) !important;
}

.notification-icon{
  width:46px !important;
  height:46px !important;
  border-radius:17px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:rgba(0,0,0,.28) !important;
  border:1px solid rgba(168,255,0,.22) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035) !important;
}

.notification-icon span{
  width:32px !important;
  height:32px !important;
  border-radius:13px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:#071018 !important;
  background:linear-gradient(180deg,#d8ff39,#8eff00) !important;
  font-size:14px !important;
  font-weight:1000 !important;
}

.notification-copy{
  min-width:0 !important;
}

.notification-head{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:8px !important;
}

.notification-head h2{
  margin:0 !important;
  min-width:0 !important;
  color:#fff !important;
  font-size:14px !important;
  line-height:1.15 !important;
  font-weight:1000 !important;
}

.notification-head time{
  flex:0 0 auto !important;
  color:rgba(255,255,255,.42) !important;
  font-size:9px !important;
  line-height:1 !important;
  font-weight:900 !important;
}

.notification-copy p{
  margin:6px 0 0 !important;
  color:rgba(255,255,255,.62) !important;
  font-size:11px !important;
  line-height:1.35 !important;
  font-weight:750 !important;
}

.notification-meta{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:5px !important;
  margin-top:8px !important;
}

.notification-meta span{
  min-height:20px !important;
  display:inline-flex !important;
  align-items:center !important;
  padding:4px 7px !important;
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.09) !important;
  background:rgba(0,0,0,.20) !important;
  color:rgba(255,255,255,.54) !important;
  font-size:8px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  text-transform:uppercase !important;
  letter-spacing:.15px !important;
}

.notification-card.unread .notification-meta span:last-child{
  color:var(--cr-lime) !important;
  border-color:rgba(168,255,0,.22) !important;
}

.notification-action{
  align-self:stretch !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.notification-action button{
  width:34px !important;
  height:34px !important;
  border-radius:13px !important;
  border:1px solid rgba(168,255,0,.32) !important;
  background:rgba(0,0,0,.22) !important;
  color:var(--cr-lime) !important;
  font-size:16px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  cursor:pointer !important;
}

.notifications-empty{
  padding:22px 18px !important;
  border-radius:24px !important;
  border:1px solid rgba(255,255,255,.10) !important;
  background:rgba(0,0,0,.24) !important;
  text-align:center !important;
}

.notifications-empty strong{
  display:block !important;
  color:#fff !important;
  font-size:16px !important;
  font-weight:1000 !important;
}

.notifications-empty small{
  display:block !important;
  margin-top:6px !important;
  color:rgba(255,255,255,.58) !important;
  font-size:11px !important;
  line-height:1.35 !important;
}

@media(max-width:430px){
  .notifications-hero{
    grid-template-columns:minmax(0,1fr) 72px !important;
    gap:12px !important;
    padding:18px 16px !important;
    border-radius:26px !important;
  }

  .notifications-counter{
    min-height:72px !important;
    border-radius:19px !important;
  }

  .notifications-counter b{
    font-size:32px !important;
  }

  .notifications-toolbar{
    flex-direction:column !important;
    align-items:stretch !important;
  }

  .notifications-mark-all{
    width:100% !important;
  }

  .notification-card{
    grid-template-columns:40px minmax(0,1fr) 30px !important;
    gap:9px !important;
    padding:10px !important;
    border-radius:20px !important;
  }

  .notification-icon{
    width:40px !important;
    height:40px !important;
    border-radius:15px !important;
  }

  .notification-icon span{
    width:28px !important;
    height:28px !important;
    border-radius:11px !important;
  }

  .notification-head{
    flex-direction:column !important;
    gap:5px !important;
  }

  .notification-head h2{
    font-size:13px !important;
  }

  .notification-copy p{
    font-size:10.5px !important;
  }

  .notification-action button{
    width:30px !important;
    height:30px !important;
    border-radius:12px !important;
  }
}


/* =========================================================
   MI PICHANGA - GUIADO POR DISEÑO RANKING
   Ruta: index.php?p=my_match
   Más compacto, legible y coherente con Ranking.
========================================================= */

.my-match-page.ranking-like-page{
  max-width:760px !important;
  margin:0 auto 34px !important;
  padding:8px 0 96px !important;
  display:flex !important;
  flex-direction:column !important;
  gap:14px !important;
}

.my-match-page.ranking-like-page::before{
  opacity:.68 !important;
}

.ranking-style-hero{
  display:grid !important;
  grid-template-columns:86px minmax(0,1fr) auto !important;
  gap:14px !important;
  align-items:center !important;
  min-height:0 !important;
  padding:18px !important;
  margin:8px 0 0 !important;
  border-radius:28px !important;
  border:1px solid rgba(168,255,0,.38) !important;
  background:
    radial-gradient(circle at 82% 12%, rgba(168,255,0,.13), transparent 32%),
    linear-gradient(180deg, rgba(9,17,24,.64), rgba(4,9,14,.78)) !important;
  backdrop-filter:blur(14px) !important;
  -webkit-backdrop-filter:blur(14px) !important;
  box-shadow:0 22px 48px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.045) !important;
}

.my-match-hero-icon{
  width:86px !important;
  height:86px !important;
  border-radius:999px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid rgba(168,255,0,.50) !important;
  background:rgba(0,0,0,.28) !important;
  box-shadow:0 0 0 6px rgba(168,255,0,.08), 0 18px 36px rgba(0,0,0,.35) !important;
}

.my-match-hero-icon img{
  width:46px !important;
  height:46px !important;
  object-fit:contain !important;
  filter:drop-shadow(0 0 12px rgba(168,255,0,.28)) !important;
}

.my-match-hero-copy{
  min-width:0 !important;
}

.my-match-hero-copy .auth-approved-kicker{
  margin:0 0 7px !important;
  color:var(--cr-lime, var(--lime)) !important;
}

.my-match-hero-copy .v4-title{
  margin:0 0 7px !important;
  font-size:clamp(34px, 8vw, 50px) !important;
  line-height:.9 !important;
  letter-spacing:-.045em !important;
  text-transform:uppercase !important;
}

.my-match-sub,
.my-match-hero-copy small{
  display:block !important;
  margin:0 !important;
  color:rgba(255,255,255,.70) !important;
  font-size:12px !important;
  line-height:1.35 !important;
  font-weight:900 !important;
}

.my-match-hero-copy small{
  margin-top:5px !important;
  color:rgba(255,255,255,.54) !important;
}

.my-match-status{
  width:140px !important;
  min-width:140px !important;
  padding:13px !important;
  border-radius:22px !important;
  text-align:center !important;
  border:1px solid rgba(168,255,0,.30) !important;
  background:rgba(0,0,0,.26) !important;
}

.my-match-status small{
  display:block !important;
  margin:0 !important;
  color:rgba(255,255,255,.55) !important;
  font-size:9px !important;
  font-weight:1000 !important;
  text-transform:uppercase !important;
}

.my-match-status b{
  margin-top:5px !important;
  font-size:22px !important;
  line-height:1 !important;
  color:var(--cr-lime, var(--lime)) !important;
}

.my-match-status span{
  margin-top:5px !important;
  font-size:11px !important;
  color:rgba(255,255,255,.68) !important;
}

.my-match-actions.premium-actions{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:10px !important;
  margin:0 !important;
}

.my-match-back{
  min-height:54px !important;
  border-radius:18px !important;
  font-size:14px !important;
  letter-spacing:.04em !important;
}

.my-match-drop{
  min-height:52px !important;
  border-radius:18px !important;
  font-size:14px !important;
}

.my-match-summary{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:8px !important;
  margin:0 !important;
}

.my-match-summary div{
  min-height:74px !important;
  padding:10px !important;
  border-radius:18px !important;
  background:linear-gradient(180deg, rgba(9,17,24,.58), rgba(4,9,14,.74)) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:0 16px 34px rgba(0,0,0,.30), inset 0 0 0 1px rgba(255,255,255,.035) !important;
}

.my-match-summary small{
  font-size:9px !important;
  line-height:1.08 !important;
  color:rgba(255,255,255,.58) !important;
  font-weight:1000 !important;
}

.my-match-summary b{
  margin-top:6px !important;
  font-size:26px !important;
  line-height:1 !important;
}

.my-match-grid{
  display:flex !important;
  flex-direction:column !important;
  gap:14px !important;
}

.ranking-style-panel{
  position:relative !important;
  overflow:hidden !important;
  padding:0 !important;
  border-radius:28px !important;
  background:
    radial-gradient(circle at 86% 12%, rgba(255,255,255,.07), transparent 25%),
    linear-gradient(180deg, rgba(6,14,20,.86), rgba(1,6,9,.96)) !important;
  border:1.5px solid rgba(168,255,0,.35) !important;
  box-shadow:0 26px 62px rgba(0,0,0,.48), inset 0 0 0 1px rgba(255,255,255,.045) !important;
}

.my-match-card-head{
  min-height:72px !important;
  margin:0 !important;
  padding:15px 18px !important;
  border-bottom:1px solid rgba(255,255,255,.14) !important;
  background:
    radial-gradient(circle at 16% 50%, rgba(168,255,0,.14), transparent 34%),
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.34)) !important;
}

.my-match-card-head h2{
  margin:0 !important;
  font-size:20px !important;
  line-height:1.05 !important;
  color:#fff !important;
  letter-spacing:-.03em !important;
}

.my-match-card-head span{
  width:42px !important;
  min-width:42px !important;
  height:42px !important;
  color:#071018 !important;
  background:linear-gradient(180deg,#d8ff39 0%,#a8ff00 52%,#79e900 100%) !important;
  box-shadow:0 12px 28px rgba(168,255,0,.20), inset 0 1px 0 rgba(255,255,255,.55) !important;
}

.my-match-list{
  padding:12px !important;
  gap:8px !important;
}

.ranking-style-row{
  display:grid !important;
  grid-template-columns:54px minmax(0,1fr) auto !important;
  gap:12px !important;
  align-items:center !important;
  min-height:72px !important;
  padding:10px 12px !important;
  border-radius:18px !important;
  border:1px solid rgba(255,255,255,.10) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)) !important;
}

.ranking-style-row.is-me{
  border-color:rgba(168,255,0,.56) !important;
  box-shadow:inset 4px 0 0 rgba(168,255,0,.68) !important;
  background:linear-gradient(180deg, rgba(168,255,0,.11), rgba(168,255,0,.035)) !important;
}

.my-match-avatar,
.my-match-avatar .player-photo,
.my-match-avatar img,
.my-match-avatar .player-initials-avatar{
  width:54px !important;
  height:54px !important;
}

.my-match-avatar .player-photo,
.my-match-avatar img,
.my-match-avatar .player-initials-avatar{
  border-radius:999px !important;
  border:2px solid rgba(168,255,0,.55) !important;
  box-shadow:0 0 0 4px rgba(168,255,0,.10) !important;
}

.player-initials-avatar{
  font-size:18px !important;
}

.my-match-info b{
  font-size:17px !important;
  line-height:1.1 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.my-match-info b span{
  display:inline-flex !important;
  margin-left:6px !important;
  padding:3px 7px !important;
  border-radius:999px !important;
  background:rgba(168,255,0,.14) !important;
  color:var(--cr-lime, var(--lime)) !important;
  font-size:9px !important;
  font-weight:1000 !important;
}

.my-match-info small{
  margin-top:5px !important;
  font-size:11px !important;
  line-height:1.25 !important;
  color:rgba(255,255,255,.58) !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.my-match-player em{
  padding:7px 10px !important;
  border-radius:999px !important;
  font-size:10px !important;
  font-weight:1000 !important;
  letter-spacing:.03em !important;
  color:var(--cr-lime, var(--lime)) !important;
  border:1px solid rgba(168,255,0,.46) !important;
  background:rgba(168,255,0,.10) !important;
}

.my-match-player em.status-reserva{
  color:#ffd166 !important;
  border-color:rgba(255,209,102,.48) !important;
  background:rgba(255,209,102,.10) !important;
}

.my-match-card .muted{
  padding:18px !important;
  margin:0 !important;
  font-size:14px !important;
  color:rgba(255,255,255,.62) !important;
}

@media(max-width:640px){
  .ranking-style-hero{
    grid-template-columns:76px minmax(0,1fr) !important;
    align-items:center !important;
  }

  .my-match-status{
    grid-column:1 / -1 !important;
    width:100% !important;
    min-width:0 !important;
    text-align:left !important;
    display:grid !important;
    grid-template-columns:1fr auto !important;
    gap:4px 10px !important;
    align-items:center !important;
  }

  .my-match-status b{
    text-align:right !important;
    margin:0 !important;
  }

  .my-match-status span{
    grid-column:1 / -1 !important;
  }

  .my-match-hero-icon{
    width:76px !important;
    height:76px !important;
  }

  .my-match-hero-icon img{
    width:40px !important;
    height:40px !important;
  }

  .my-match-hero-copy .v4-title{
    font-size:clamp(30px, 11vw, 42px) !important;
  }

  .my-match-summary{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .ranking-style-row{
    grid-template-columns:48px minmax(0,1fr) !important;
  }

  .my-match-avatar,
  .my-match-avatar .player-photo,
  .my-match-avatar img,
  .my-match-avatar .player-initials-avatar{
    width:48px !important;
    height:48px !important;
  }

  .my-match-player em{
    grid-column:2 !important;
    justify-self:start !important;
    margin-top:2px !important;
  }
}


/* Mi pichanga - hero mejor organizado */
.ranking-style-hero.hero-organized{
  display:flex !important;
  flex-direction:column !important;
  gap:14px !important;
  padding:18px !important;
}

.hero-organized .my-match-hero-top{
  display:grid !important;
  grid-template-columns:76px minmax(0,1fr) 142px !important;
  gap:14px !important;
  align-items:center !important;
}

.hero-organized .my-match-hero-icon{
  width:76px !important;
  height:76px !important;
}

.hero-organized .my-match-hero-icon img{
  width:40px !important;
  height:40px !important;
}

.hero-organized .my-match-hero-copy .v4-title{
  font-size:clamp(30px, 7vw, 46px) !important;
  line-height:.9 !important;
  margin:0 0 6px !important;
}

.hero-organized .my-match-sub{
  font-size:12px !important;
  color:rgba(255,255,255,.66) !important;
}

.hero-organized .my-match-status{
  width:142px !important;
  min-width:142px !important;
  align-self:stretch !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
}

.my-match-hero-meta{
  display:grid !important;
  grid-template-columns:1fr 1fr 2fr !important;
  gap:8px !important;
}

.my-match-hero-meta > div{
  min-height:58px !important;
  padding:10px 12px !important;
  border-radius:16px !important;
  border:1px solid rgba(255,255,255,.09) !important;
  background:rgba(0,0,0,.22) !important;
}

.my-match-hero-meta small{
  display:block !important;
  margin:0 0 5px !important;
  color:rgba(255,255,255,.48) !important;
  font-size:9px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  text-transform:uppercase !important;
  letter-spacing:.04em !important;
}

.my-match-hero-meta b{
  display:block !important;
  color:rgba(255,255,255,.82) !important;
  font-size:12px !important;
  line-height:1.2 !important;
  font-weight:900 !important;
}

.my-match-hero-progress{
  display:grid !important;
  gap:7px !important;
}

.my-match-hero-progress > div{
  height:8px !important;
  overflow:hidden !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.07) !important;
}

.my-match-hero-progress > div span{
  display:block !important;
  height:100% !important;
  border-radius:999px !important;
  background:linear-gradient(90deg, #a8ff00, #d8ff39) !important;
  box-shadow:0 0 18px rgba(168,255,0,.30) !important;
}

.my-match-hero-progress small{
  margin:0 !important;
  color:rgba(255,255,255,.54) !important;
  font-size:10px !important;
  font-weight:850 !important;
}

@media(max-width:640px){
  .hero-organized .my-match-hero-top{
    grid-template-columns:62px minmax(0,1fr) !important;
  }

  .hero-organized .my-match-hero-icon{
    width:62px !important;
    height:62px !important;
  }

  .hero-organized .my-match-hero-icon img{
    width:34px !important;
    height:34px !important;
  }

  .hero-organized .my-match-status{
    grid-column:1 / -1 !important;
    width:100% !important;
    min-width:0 !important;
    min-height:70px !important;
    display:grid !important;
    grid-template-columns:1fr auto !important;
    align-items:center !important;
    text-align:left !important;
  }

  .hero-organized .my-match-status small{
    grid-column:1 !important;
  }

  .hero-organized .my-match-status b{
    grid-column:2 !important;
    grid-row:1 / 3 !important;
    align-self:center !important;
    text-align:right !important;
  }

  .hero-organized .my-match-status span{
    grid-column:1 !important;
  }

  .my-match-hero-meta{
    grid-template-columns:1fr 1fr !important;
  }

  .my-match-hero-meta .wide{
    grid-column:1 / -1 !important;
  }
}


/* Reinscripción en Mi pichanga */
.my-match-rejoin{
  width:100%;
  min-height:52px!important;
  border-radius:18px!important;
  border:1px solid rgba(168,255,0,.70)!important;
  background:linear-gradient(180deg,#d8ff39 0%,#a8ff00 52%,#79e900 100%)!important;
  color:#071018!important;
  font-size:14px!important;
  font-weight:1000!important;
  letter-spacing:.04em!important;
  text-transform:uppercase!important;
  box-shadow:0 12px 28px rgba(168,255,0,.22), inset 0 1px 0 rgba(255,255,255,.55)!important;
}


/* Hora exacta de inscripción en Mi pichanga */
.my-match-registered-time{
  display:block!important;
  margin-top:5px!important;
  color:rgba(168,255,0,.86)!important;
  font-size:10px!important;
  line-height:1.2!important;
  font-weight:950!important;
  letter-spacing:.02em!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
@media(max-width:640px){
  .my-match-registered-time{
    white-space:normal!important;
    font-size:10px!important;
  }
}


/* Mi pichanga - hero sin icono */
.hero-organized .my-match-hero-top,
.ranking-style-hero .my-match-hero-top{
  grid-template-columns:minmax(0,1fr) 142px !important;
}

@media(max-width:640px){
  .hero-organized .my-match-hero-top,
  .ranking-style-hero .my-match-hero-top{
    grid-template-columns:1fr !important;
  }
}


/* Mi pichanga - margen acciones */
.my-match-actions.premium-actions{
  margin:16px 0 18px !important;
}
@media(max-width:640px){
  .my-match-actions.premium-actions{
    margin:14px 0 16px !important;
  }
}


/* Mi pichanga - edad e iconos deportivos */
.my-match-age{
  display:block!important;
  margin-top:5px!important;
  color:rgba(255,255,255,.68)!important;
  font-size:11px!important;
  line-height:1.25!important;
  font-weight:900!important;
}

.my-match-player-icons{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:5px!important;
  margin-top:7px!important;
}

.my-match-player-icons .ranking-meta-icons{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:5px!important;
}

.my-match-player-icons .ranking-meta-chip{
  display:inline-flex!important;
  align-items:center!important;
  gap:4px!important;
  min-height:24px!important;
  padding:4px 7px!important;
  border-radius:999px!important;
  background:rgba(0,0,0,.24)!important;
  border:1px solid rgba(168,255,0,.20)!important;
  color:rgba(255,255,255,.74)!important;
  font-size:9px!important;
  font-weight:1000!important;
  line-height:1!important;
}

.my-match-player-icons .ranking-meta-chip img{
  width:15px!important;
  height:15px!important;
  border:0!important;
  box-shadow:none!important;
  border-radius:0!important;
  object-fit:contain!important;
  filter:drop-shadow(0 0 5px rgba(168,255,0,.18))!important;
}

.my-match-player-icons .ranking-meta-chip em{
  all:unset!important;
  display:inline!important;
  color:rgba(255,255,255,.78)!important;
  font-size:9px!important;
  font-weight:1000!important;
  line-height:1!important;
}

@media(max-width:640px){
  .my-match-player-icons .ranking-meta-chip em{
    display:none!important;
  }
  .my-match-player-icons .ranking-meta-chip{
    width:26px!important;
    height:26px!important;
    padding:0!important;
    justify-content:center!important;
  }
  .my-match-player-icons .ranking-meta-chip img{
    width:17px!important;
    height:17px!important;
  }
}


/* Mi pichanga - solo iconos de posición y pie hábil */
.my-match-player-icons{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  margin-top:7px!important;
}

.my-match-meta-icons-only{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:8px!important;
}

.my-match-meta-group{
  display:inline-flex!important;
  align-items:center!important;
  gap:5px!important;
  padding:4px!important;
  border-radius:999px!important;
  background:rgba(0,0,0,.22)!important;
  border:1px solid rgba(168,255,0,.18)!important;
}

.my-match-meta-group::before{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:22px!important;
  height:22px!important;
  padding:0 6px!important;
  border-radius:999px!important;
  background:rgba(168,255,0,.10)!important;
  color:rgba(168,255,0,.92)!important;
  font-size:9px!important;
  line-height:1!important;
  font-weight:1000!important;
  letter-spacing:.03em!important;
}

.my-match-meta-pos::before{
  content:"PO"!important;
}

.my-match-meta-foot::before{
  content:"PIE"!important;
}

.my-match-meta-icon{
  width:24px!important;
  height:24px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.055)!important;
  border:1px solid rgba(255,255,255,.08)!important;
}

.my-match-meta-icon img{
  width:17px!important;
  height:17px!important;
  display:block!important;
  object-fit:contain!important;
  border:0!important;
  box-shadow:none!important;
  border-radius:0!important;
  filter:drop-shadow(0 0 5px rgba(168,255,0,.18))!important;
}

.my-match-player-icons .ranking-meta-icons,
.my-match-player-icons .ranking-meta-chip,
.my-match-player-icons .ranking-meta-chip em{
  display:none!important;
}

@media(max-width:640px){
  .my-match-meta-group{
    gap:4px!important;
  }
  .my-match-meta-group::before{
    min-width:20px!important;
    height:20px!important;
    font-size:8px!important;
    padding:0 5px!important;
  }
  .my-match-meta-icon{
    width:24px!important;
    height:24px!important;
  }
  .my-match-meta-icon img{
    width:16px!important;
    height:16px!important;
  }
}


/* Mi pichanga - estado bajo la foto */
.ranking-style-row{
  grid-template-columns:64px minmax(0,1fr) !important;
}

.my-match-avatar{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:6px!important;
  width:64px!important;
  height:auto!important;
}

.my-match-avatar .player-photo,
.my-match-avatar img,
.my-match-avatar .player-initials-avatar{
  width:54px!important;
  height:54px!important;
  flex:0 0 54px!important;
}

.my-match-avatar em{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  max-width:64px!important;
  min-height:18px!important;
  padding:3px 7px!important;
  border-radius:999px!important;
  color:var(--cr-lime, var(--lime))!important;
  border:1px solid rgba(168,255,0,.46)!important;
  background:rgba(168,255,0,.10)!important;
  font-size:8px!important;
  line-height:1!important;
  font-weight:1000!important;
  letter-spacing:.03em!important;
  text-transform:uppercase!important;
  font-style:normal!important;
  white-space:nowrap!important;
}

.my-match-avatar em.status-reserva{
  color:#ffd166!important;
  border-color:rgba(255,209,102,.48)!important;
  background:rgba(255,209,102,.10)!important;
}

.my-match-avatar em.status-capitan{
  color:#8bd1ff!important;
  border-color:rgba(93,186,255,.48)!important;
  background:rgba(93,186,255,.10)!important;
}

.my-match-player > em{
  display:none!important;
}

@media(max-width:640px){
  .ranking-style-row{
    grid-template-columns:60px minmax(0,1fr)!important;
  }
  .my-match-avatar{
    width:60px!important;
  }
  .my-match-avatar .player-photo,
  .my-match-avatar img,
  .my-match-avatar .player-initials-avatar{
    width:48px!important;
    height:48px!important;
    flex-basis:48px!important;
  }
  .my-match-avatar em{
    max-width:60px!important;
    font-size:7px!important;
    padding:3px 6px!important;
  }
}


/* Mi pichanga - resumen al final */
.my-match-page .my-match-summary{
  margin-top:14px!important;
  margin-bottom:0!important;
}


/* Mi pichanga - hero con estilo visual del dashboard */
.my-match-page .my-match-dashboard-hero{
  border:1px solid rgba(168,255,0,.34)!important;
  border-radius:26px!important;
  padding:16px 14px!important;
  background:linear-gradient(180deg, rgba(9,17,24,.44), rgba(4,9,14,.56))!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;
  box-shadow:0 18px 42px rgba(0,0,0,.34)!important;
  gap:12px!important;
}

.my-match-dashboard-hero .my-match-hero-top{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:10px!important;
}

.my-match-dashboard-hero .my-match-hero-copy{
  min-width:0!important;
}

.my-match-dashboard-hero .auth-approved-kicker{
  display:inline-flex!important;
  width:max-content!important;
  padding:7px 10px!important;
  border-radius:999px!important;
  border:1px solid rgba(168,255,0,.46)!important;
  background:rgba(168,255,0,.10)!important;
  color:var(--cr-lime)!important;
  text-transform:uppercase!important;
  font-size:10px!important;
  line-height:1!important;
  letter-spacing:.7px!important;
  font-weight:1000!important;
  margin:0 0 10px!important;
}

.my-match-dashboard-hero .v4-title{
  font-family:Impact, Arial Black, sans-serif!important;
  font-style:italic!important;
  text-transform:uppercase!important;
  font-weight:900!important;
  letter-spacing:.1px!important;
  font-size:clamp(34px, 9vw, 52px)!important;
  line-height:.92!important;
  margin:0 0 8px!important;
  color:#fff!important;
  text-shadow:0 10px 28px rgba(0,0,0,.65)!important;
}

.my-match-dashboard-hero .my-match-sub{
  margin:0!important;
  color:rgba(255,255,255,.74)!important;
  line-height:1.35!important;
  font-size:14px!important;
  font-weight:700!important;
}

.my-match-dashboard-hero .my-match-status{
  display:inline-flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  min-width:92px!important;
  min-height:54px!important;
  padding:8px 10px!important;
  border-radius:16px!important;
  border:1px solid rgba(168,255,0,.44)!important;
  background:rgba(168,255,0,.10)!important;
  text-align:center!important;
}

.my-match-dashboard-hero .my-match-status small{
  display:block!important;
  color:rgba(255,255,255,.58)!important;
  font-size:9px!important;
  text-transform:uppercase!important;
  letter-spacing:.55px!important;
  font-weight:900!important;
  line-height:1!important;
  margin:0 0 5px!important;
}

.my-match-dashboard-hero .my-match-status b{
  color:var(--cr-lime)!important;
  font-size:14px!important;
  line-height:1!important;
  margin:0!important;
  text-transform:uppercase!important;
  letter-spacing:.35px!important;
}

.my-match-dashboard-hero .my-match-status span{
  display:block!important;
  margin-top:5px!important;
  color:rgba(255,255,255,.62)!important;
  font-size:10px!important;
  line-height:1.1!important;
  font-weight:900!important;
}

.my-match-dashboard-hero .my-match-hero-meta{
  display:grid!important;
  grid-template-columns:repeat(2, 1fr)!important;
  gap:8px!important;
  margin-top:2px!important;
}

.my-match-dashboard-hero .my-match-hero-meta .wide{
  grid-column:1 / -1!important;
}

.my-match-dashboard-hero .my-match-hero-meta > div{
  min-height:70px!important;
  padding:10px 8px!important;
  border-radius:16px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  background:rgba(0,0,0,.24)!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  text-align:center!important;
}

.my-match-dashboard-hero .my-match-hero-meta small{
  display:block!important;
  color:rgba(255,255,255,.58)!important;
  font-size:10px!important;
  text-transform:uppercase!important;
  letter-spacing:.55px!important;
  font-weight:900!important;
  margin:0 0 5px!important;
}

.my-match-dashboard-hero .my-match-hero-meta b{
  color:#fff!important;
  font-size:18px!important;
  line-height:1.1!important;
  font-weight:900!important;
}

.my-match-dashboard-hero .my-match-hero-progress{
  margin-top:2px!important;
}

.my-match-dashboard-hero .my-match-hero-progress > div{
  height:8px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.08)!important;
  border:1px solid rgba(255,255,255,.08)!important;
}

.my-match-dashboard-hero .my-match-hero-progress small{
  display:block!important;
  margin:7px 0 0!important;
  text-align:center!important;
  color:rgba(255,255,255,.62)!important;
  text-transform:uppercase!important;
  letter-spacing:.55px!important;
  font-size:10px!important;
  font-weight:1000!important;
}

@media(max-width:640px){
  .my-match-dashboard-hero .my-match-hero-top{
    flex-direction:column!important;
  }

  .my-match-dashboard-hero .my-match-status{
    width:100%!important;
    min-width:0!important;
    align-items:flex-start!important;
    text-align:left!important;
  }

  .my-match-dashboard-hero .my-match-hero-meta{
    grid-template-columns:repeat(2, 1fr)!important;
  }

  .my-match-dashboard-hero .my-match-hero-meta b{
    font-size:16px!important;
  }
}


/* Mi pichanga - badge muestra tipo de jugador: Titular / Galleta */
.my-match-avatar em.membership-titular{
  color:var(--cr-lime, #a8ff00)!important;
  border-color:rgba(168,255,0,.46)!important;
  background:rgba(168,255,0,.10)!important;
}

.my-match-avatar em.membership-galleta{
  color:#ffd166!important;
  border-color:rgba(255,209,102,.48)!important;
  background:rgba(255,209,102,.10)!important;
}


/* Mi pichanga - botón Retar */
.my-match-challenge-form{
  margin:8px 0 0!important;
}

.my-match-challenge-btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:30px!important;
  padding:0 12px!important;
  border-radius:999px!important;
  border:1px solid rgba(168,255,0,.42)!important;
  background:rgba(168,255,0,.10)!important;
  color:var(--cr-lime,#a8ff00)!important;
  font-size:10px!important;
  line-height:1!important;
  font-weight:1000!important;
  text-transform:uppercase!important;
  letter-spacing:.05em!important;
  cursor:pointer!important;
  box-shadow:0 10px 22px rgba(0,0,0,.22)!important;
}

.my-match-challenge-btn:hover{
  background:var(--cr-lime,#a8ff00)!important;
  color:#071018!important;
  border-color:var(--cr-lime,#a8ff00)!important;
}


/* Mi pichanga - estados de reto */
.my-match-challenge-btn.cancel{
  color:#ff8d8d!important;
  border-color:rgba(255,82,82,.42)!important;
  background:rgba(255,82,82,.10)!important;
}

.my-match-challenge-btn.cancel:hover{
  background:#ff5252!important;
  color:#fff!important;
  border-color:#ff5252!important;
}

.my-match-challenge-btn.accept{
  color:#8bd1ff!important;
  border-color:rgba(93,186,255,.48)!important;
  background:rgba(93,186,255,.10)!important;
}

.my-match-challenge-btn.accept:hover{
  background:#5dbaff!important;
  color:#071018!important;
  border-color:#5dbaff!important;
}


/* Mi pichanga - duelo aceptado bloquea acciones */
.my-match-challenge-state{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin-top:8px!important;
  min-height:30px!important;
  padding:0 12px!important;
  border-radius:999px!important;
  font-size:9px!important;
  line-height:1!important;
  font-weight:1000!important;
  text-transform:uppercase!important;
  letter-spacing:.05em!important;
}

.my-match-challenge-state.accepted{
  color:#071018!important;
  background:var(--cr-lime,#a8ff00)!important;
  border:1px solid var(--cr-lime,#a8ff00)!important;
}

.my-match-challenge-state.locked{
  color:rgba(255,255,255,.68)!important;
  background:rgba(255,255,255,.08)!important;
  border:1px solid rgba(255,255,255,.16)!important;
}


/* Mi pichanga - acceso a armar equipo tras aceptar duelo */
.my-match-draft-link{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin-top:7px!important;
  min-height:30px!important;
  padding:0 12px!important;
  border-radius:999px!important;
  text-decoration:none!important;
  background:var(--cr-lime,#a8ff00)!important;
  border:1px solid var(--cr-lime,#a8ff00)!important;
  color:#071018!important;
  font-size:9px!important;
  line-height:1!important;
  font-weight:1000!important;
  text-transform:uppercase!important;
  letter-spacing:.05em!important;
}

.my-match-draft-link.muted-link{
  background:rgba(168,255,0,.10)!important;
  border-color:rgba(168,255,0,.36)!important;
  color:var(--cr-lime,#a8ff00)!important;
}


/* Mi pichanga - acciones de duelo aceptado */
.my-match-challenge-state + .my-match-challenge-form,
.my-match-challenge-form + .my-match-draft-link{
  margin-top:7px!important;
}


/* Mi pichanga - revisión lógica duelos */
.my-match-challenge-state.locked{
  opacity:.9!important;
}


/* Mi pichanga - botón Armar equipo en acciones superiores */
.my-match-actions .my-match-draft-action{
  background:var(--cr-lime,#a8ff00)!important;
  color:#071018!important;
  border-color:var(--cr-lime,#a8ff00)!important;
  box-shadow:0 14px 30px rgba(168,255,0,.18)!important;
}

.my-match-actions .my-match-draft-action:hover{
  filter:brightness(1.06)!important;
}


/* Mi pichanga - actualización en vivo */
.my-match-live-status{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:34px!important;
  padding:0 12px!important;
  border-radius:999px!important;
  border:1px solid rgba(168,255,0,.32)!important;
  background:rgba(168,255,0,.08)!important;
  color:var(--cr-lime,#a8ff00)!important;
  font-size:10px!important;
  font-weight:1000!important;
  text-transform:uppercase!important;
  letter-spacing:.06em!important;
}

.my-match-live-status::before{
  content:""!important;
  width:7px!important;
  height:7px!important;
  border-radius:999px!important;
  margin-right:7px!important;
  background:currentColor!important;
  box-shadow:0 0 12px currentColor!important;
}

.my-match-live-status.is-checking{
  color:#8bd1ff!important;
  border-color:rgba(139,209,255,.35)!important;
  background:rgba(139,209,255,.08)!important;
}

.my-match-live-status.is-updating{
  color:#ffd166!important;
  border-color:rgba(255,209,102,.42)!important;
  background:rgba(255,209,102,.10)!important;
}

.my-match-live-status.is-error{
  color:#ff8d8d!important;
  border-color:rgba(255,141,141,.38)!important;
  background:rgba(255,141,141,.10)!important;
}


/* Mi pichanga - tablero vivo de duelos y draft */
.my-match-live-board{
  margin:16px 0 18px!important;
  border:1px solid rgba(168,255,0,.26)!important;
  background:linear-gradient(180deg,rgba(7,15,22,.74),rgba(3,8,12,.84))!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;
}

.my-match-live-head{
  display:flex!important;
  justify-content:space-between!important;
  align-items:flex-start!important;
  gap:14px!important;
  margin-bottom:14px!important;
}

.my-match-live-head small{
  display:block!important;
  color:var(--cr-lime,#a8ff00)!important;
  font-size:10px!important;
  font-weight:1000!important;
  text-transform:uppercase!important;
  letter-spacing:.08em!important;
}

.my-match-live-head h2{
  margin:2px 0 0!important;
  color:#fff!important;
  font-size:22px!important;
  line-height:1!important;
  font-weight:1000!important;
  text-transform:uppercase!important;
}

.my-match-live-head > span{
  display:inline-flex!important;
  min-height:30px!important;
  padding:0 10px!important;
  align-items:center!important;
  border-radius:999px!important;
  background:rgba(168,255,0,.10)!important;
  border:1px solid rgba(168,255,0,.28)!important;
  color:var(--cr-lime,#a8ff00)!important;
  font-size:10px!important;
  font-weight:1000!important;
  text-transform:uppercase!important;
}

.my-match-live-duels{
  display:grid!important;
  gap:8px!important;
}

.my-match-live-duels > div{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:8px!important;
  padding:10px 12px!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.055)!important;
  border:1px solid rgba(255,255,255,.08)!important;
}

.my-match-live-duels b{color:#fff!important;font-size:12px!important;}
.my-match-live-duels span{color:rgba(255,255,255,.56)!important;font-size:10px!important;text-transform:uppercase!important;font-weight:900!important;}

.my-match-draft-captains,
.my-match-live-teams{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:10px!important;
  margin:12px 0!important;
}

.my-match-draft-captains > div,
.my-match-live-teams > div{
  border-radius:18px!important;
  padding:12px!important;
  background:rgba(255,255,255,.055)!important;
  border:1px solid rgba(255,255,255,.09)!important;
}

.my-match-draft-captains > div.is-turn{
  border-color:rgba(168,255,0,.42)!important;
  box-shadow:0 0 0 1px rgba(168,255,0,.12) inset!important;
}

.my-match-draft-captains small{
  display:block!important;
  color:rgba(255,255,255,.56)!important;
  font-size:10px!important;
  text-transform:uppercase!important;
  font-weight:900!important;
}

.my-match-draft-captains b,
.my-match-live-teams h3{
  color:#fff!important;
  font-size:15px!important;
  margin:2px 0 0!important;
  font-weight:1000!important;
}

.my-match-turn-note{
  margin:10px 0!important;
  padding:10px 12px!important;
  border-radius:16px!important;
  background:rgba(168,255,0,.08)!important;
  border:1px solid rgba(168,255,0,.18)!important;
  color:rgba(255,255,255,.78)!important;
  font-size:12px!important;
}

.my-match-turn-note b{color:var(--cr-lime,#a8ff00)!important;}

.my-match-live-teams .captain{
  color:var(--cr-lime,#a8ff00)!important;
  font-size:11px!important;
  font-weight:900!important;
  margin:6px 0!important;
}

.my-match-live-teams p{
  color:rgba(255,255,255,.82)!important;
  font-size:12px!important;
  margin:7px 0!important;
}

.my-match-live-teams em{
  color:rgba(255,255,255,.45)!important;
  font-size:11px!important;
}

.my-match-live-available{
  margin-top:12px!important;
}

.my-match-live-available h3{
  color:#fff!important;
  font-size:15px!important;
  margin:0 0 10px!important;
}

.my-match-available-list{
  display:grid!important;
  gap:8px!important;
}

.my-match-available-list > div{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  padding:10px 12px!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.05)!important;
  border:1px solid rgba(255,255,255,.08)!important;
}

.my-match-available-list span{
  color:#fff!important;
  font-size:12px!important;
  font-weight:900!important;
}

.my-match-available-list form{
  margin:0!important;
}

@media(max-width:640px){
  .my-match-live-head,
  .my-match-live-duels > div,
  .my-match-available-list > div{
    align-items:stretch!important;
    flex-direction:column!important;
  }
  .my-match-draft-captains,
  .my-match-live-teams{
    grid-template-columns:1fr!important;
  }
}


/* Mi pichanga - estado SSE real */
.my-match-live-status.is-sse{
  color:var(--cr-lime,#a8ff00)!important;
  border-color:rgba(168,255,0,.38)!important;
  background:rgba(168,255,0,.10)!important;
}


/* Mi pichanga - sincronización reforzada */
.my-match-live-status.is-sse::after{
  content:""!important;
  width:4px!important;
  height:4px!important;
  border-radius:999px!important;
  margin-left:7px!important;
  background:currentColor!important;
  opacity:.85!important;
}


/* Mi pichanga - polling fuerte real */
.my-match-live-status.is-sse{
  animation:cr-live-pulse 1.2s ease-in-out infinite!important;
}
@keyframes cr-live-pulse{
  0%,100%{box-shadow:0 0 0 rgba(168,255,0,0)!important;}
  50%{box-shadow:0 0 18px rgba(168,255,0,.20)!important;}
}


/* Mi pichanga - indicador de revisión por segundo */
.my-match-live-status.is-checking{
  min-width:150px!important;
}
.my-match-live-status.is-sse{
  min-width:150px!important;
}


/* Mi pichanga - draft limpio y presencia de capitanes */
.my-match-captain-presence{
  display:inline-flex!important;
  align-items:center!important;
  width:max-content!important;
  margin-top:8px!important;
  min-height:24px!important;
  padding:0 9px!important;
  border-radius:999px!important;
  font-size:9px!important;
  line-height:1!important;
  font-weight:1000!important;
  text-transform:uppercase!important;
  letter-spacing:.06em!important;
}

.my-match-captain-presence::before{
  content:""!important;
  width:7px!important;
  height:7px!important;
  border-radius:999px!important;
  margin-right:6px!important;
  background:currentColor!important;
  box-shadow:0 0 12px currentColor!important;
}

.my-match-captain-presence.online{
  color:var(--cr-lime,#a8ff00)!important;
  background:rgba(168,255,0,.10)!important;
  border:1px solid rgba(168,255,0,.35)!important;
}

.my-match-captain-presence.offline{
  color:#ff8d8d!important;
  background:rgba(255,141,141,.10)!important;
  border:1px solid rgba(255,141,141,.28)!important;
}

.my-match-captain-dot{
  display:inline-block!important;
  width:7px!important;
  height:7px!important;
  border-radius:999px!important;
  margin-left:6px!important;
  vertical-align:middle!important;
}

.my-match-captain-dot.online{
  background:var(--cr-lime,#a8ff00)!important;
  box-shadow:0 0 10px rgba(168,255,0,.55)!important;
}

.my-match-captain-dot.offline{
  background:#ff8d8d!important;
  box-shadow:0 0 10px rgba(255,141,141,.42)!important;
}


/* Draft - sincronización en vivo */
.draft-live-page{
  padding-bottom:96px!important;
}

.draft-live-hero{
  display:flex!important;
  justify-content:space-between!important;
  align-items:flex-start!important;
  gap:14px!important;
}

.draft-live-status{
  margin-top:4px!important;
  min-width:150px!important;
}

[data-draft-panel]{
  transition:opacity .18s ease!important;
}

[data-draft-panel] .card,
[data-draft-panel] .v4-card{
  animation:cr-draft-soft-in .18s ease-out both!important;
}

@keyframes cr-draft-soft-in{
  from{opacity:.72; transform:translateY(2px);}
  to{opacity:1; transform:translateY(0);}
}

@media(max-width:640px){
  .draft-live-hero{
    flex-direction:column!important;
  }
}


/* Live hard reload - indicador claramente automático */
.my-match-live-status.is-checking,
.draft-live-status.is-checking{
  outline:1px solid rgba(139,209,255,.22)!important;
}

.my-match-live-status.is-updating,
.draft-live-status.is-updating{
  outline:1px solid rgba(255,209,102,.32)!important;
  transform:translateZ(0)!important;
}


/* Live - estado visible de sincronización automática */
.my-match-live-status,
.draft-live-status{
  transition:all .18s ease!important;
}

.my-match-live-status.is-updating,
.draft-live-status.is-updating{
  background:rgba(255,209,102,.16)!important;
  border-color:rgba(255,209,102,.58)!important;
  color:#ffd166!important;
  box-shadow:0 0 0 1px rgba(255,209,102,.14) inset, 0 0 22px rgba(255,209,102,.22)!important;
  animation:cr-live-updating-pulse .55s ease-in-out infinite alternate!important;
}

.my-match-live-status.is-checking,
.draft-live-status.is-checking{
  background:rgba(139,209,255,.10)!important;
  border-color:rgba(139,209,255,.36)!important;
  color:#8bd1ff!important;
}

.my-match-live-status.is-sse,
.draft-live-status.is-sse{
  background:rgba(168,255,0,.10)!important;
  border-color:rgba(168,255,0,.40)!important;
  color:var(--cr-lime,#a8ff00)!important;
}

@keyframes cr-live-updating-pulse{
  from{transform:scale(1); opacity:.86;}
  to{transform:scale(1.035); opacity:1;}
}


/* Draft - selección de poleras por capitán */
.draft-live-top-card h3{
  margin-bottom:10px!important;
}

.draft-shirt-grid{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:12px!important;
  margin-top:14px!important;
}

.draft-shirt-card,
.captain-shirt-box{
  border-radius:18px!important;
  padding:12px!important;
  background:rgba(255,255,255,.055)!important;
  border:1px solid rgba(255,255,255,.09)!important;
}

.draft-shirt-card small{
  display:block!important;
  color:rgba(255,255,255,.58)!important;
  font-size:10px!important;
  font-weight:900!important;
  text-transform:uppercase!important;
  letter-spacing:.06em!important;
}

.draft-shirt-card b{
  display:block!important;
  color:#fff!important;
  margin:3px 0 8px!important;
  font-size:14px!important;
  font-weight:1000!important;
}

.draft-shirt-card form{
  display:grid!important;
  grid-template-columns:1fr auto!important;
  gap:8px!important;
  align-items:center!important;
  margin-top:10px!important;
}

.draft-shirt-select{
  min-height:38px!important;
  border-radius:12px!important;
  border:1px solid rgba(255,255,255,.14)!important;
  background:rgba(0,0,0,.35)!important;
  color:#fff!important;
  padding:0 10px!important;
  max-width:100%!important;
}

.draft-shirt-save{
  min-height:38px!important;
  padding:0 12px!important;
}

.draft-shirt-card em{
  display:block!important;
  margin-top:8px!important;
  color:rgba(255,255,255,.48)!important;
  font-size:11px!important;
}

@media(max-width:640px){
  .draft-shirt-grid{
    grid-template-columns:1fr!important;
  }
  .draft-shirt-card form{
    grid-template-columns:1fr!important;
  }
}


/* My match draft captains - polera dentro de cada capitán */
.my-match-captain-shirt{
  margin-top:10px!important;
  padding-top:10px!important;
  border-top:1px solid rgba(255,255,255,.08)!important;
}

.my-match-shirt-selected{
  display:block!important;
  margin-bottom:8px!important;
}

.my-match-shirt-pending{
  display:inline-flex!important;
  min-height:26px!important;
  align-items:center!important;
  padding:0 9px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.06)!important;
  border:1px solid rgba(255,255,255,.10)!important;
  color:rgba(255,255,255,.60)!important;
  font-size:10px!important;
  font-weight:900!important;
  text-transform:uppercase!important;
}

.my-match-shirt-form{
  display:grid!important;
  grid-template-columns:1fr auto!important;
  gap:8px!important;
  margin-top:8px!important;
}

.my-match-shirt-select{
  min-height:36px!important;
  border-radius:12px!important;
  border:1px solid rgba(255,255,255,.14)!important;
  background:rgba(0,0,0,.38)!important;
  color:#fff!important;
  padding:0 10px!important;
  width:100%!important;
  min-width:0!important;
}

.my-match-shirt-form button{
  min-height:36px!important;
  border:0!important;
  border-radius:12px!important;
  padding:0 11px!important;
  background:var(--cr-lime,#a8ff00)!important;
  color:#071018!important;
  font-size:10px!important;
  font-weight:1000!important;
  text-transform:uppercase!important;
}

.my-match-captain-shirt em{
  display:block!important;
  margin-top:7px!important;
  color:rgba(255,255,255,.42)!important;
  font-size:10px!important;
  font-style:normal!important;
  font-weight:800!important;
}

@media(max-width:640px){
  .my-match-shirt-form{
    grid-template-columns:1fr!important;
  }
}


/* Poleras seleccionables como iconos en draft */
.my-match-shirt-icons-form{
  display:block!important;
  margin-top:10px!important;
}

.my-match-shirt-icons,
.draft-shirt-icons{
  display:grid!important;
  grid-template-columns:repeat(3, minmax(0, 1fr))!important;
  gap:8px!important;
}

.my-match-shirt-icon-option,
.draft-shirt-icon-option{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:82px!important;
  padding:8px 5px!important;
  border-radius:16px!important;
  border:1px solid rgba(255,255,255,.12)!important;
  background:rgba(255,255,255,.045)!important;
  color:#fff!important;
  cursor:pointer!important;
  transition:transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease!important;
}

.my-match-shirt-icon-option:hover,
.draft-shirt-icon-option:hover{
  transform:translateY(-2px)!important;
  border-color:rgba(168,255,0,.55)!important;
  background:rgba(168,255,0,.08)!important;
  box-shadow:0 0 20px rgba(168,255,0,.12)!important;
}

.my-match-shirt-icon-option img,
.draft-shirt-icon-option img{
  width:44px!important;
  height:44px!important;
  object-fit:contain!important;
  display:block!important;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.32))!important;
}

.my-match-shirt-icon-option span,
.draft-shirt-icon-option span{
  margin-top:5px!important;
  font-size:9px!important;
  line-height:1!important;
  font-weight:1000!important;
  text-transform:uppercase!important;
  letter-spacing:.04em!important;
}

.my-match-shirt-icon-option em,
.draft-shirt-icon-option em{
  position:absolute!important;
  top:5px!important;
  right:5px!important;
  min-height:17px!important;
  padding:0 5px!important;
  border-radius:999px!important;
  display:inline-flex!important;
  align-items:center!important;
  background:rgba(0,0,0,.56)!important;
  border:1px solid rgba(255,255,255,.14)!important;
  color:#fff!important;
  font-size:7px!important;
  font-style:normal!important;
  font-weight:1000!important;
  text-transform:uppercase!important;
}

.my-match-shirt-icon-option.is-selected,
.draft-shirt-icon-option.is-selected{
  border-color:rgba(168,255,0,.72)!important;
  background:linear-gradient(180deg, rgba(168,255,0,.16), rgba(168,255,0,.055))!important;
  box-shadow:0 0 0 1px rgba(168,255,0,.22) inset, 0 0 24px rgba(168,255,0,.14)!important;
}

.my-match-shirt-icon-option.is-disabled,
.draft-shirt-icon-option.is-disabled{
  opacity:.33!important;
  cursor:not-allowed!important;
  filter:grayscale(.2)!important;
}

.my-match-shirt-icon-option.is-disabled:hover,
.draft-shirt-icon-option.is-disabled:hover{
  transform:none!important;
  box-shadow:none!important;
  border-color:rgba(255,255,255,.12)!important;
  background:rgba(255,255,255,.045)!important;
}

@media(max-width:420px){
  .my-match-shirt-icons,
  .draft-shirt-icons{
    gap:6px!important;
  }
  .my-match-shirt-icon-option,
  .draft-shirt-icon-option{
    min-height:76px!important;
    padding:7px 4px!important;
  }
  .my-match-shirt-icon-option img,
  .draft-shirt-icon-option img{
    width:38px!important;
    height:38px!important;
  }
}


/* Ajuste icono polera dentro del badge */
.shirt-badge{
  display:inline-flex!important;
  align-items:center!important;
  gap:7px!important;
  line-height:1!important;
}

.shirt-badge-img{
  width:30px!important;
  max-width:30px!important;
  height:auto!important;
  object-fit:contain!important;
  display:inline-block!important;
  flex:0 0 30px!important;
  vertical-align:middle!important;
}


/* Capitán - selección de camiseta más amigable */
.my-match-captain-shirt{
  margin-top:12px!important;
  padding:12px!important;
  border-radius:20px!important;
  background:
    radial-gradient(circle at 15% 0%, rgba(168,255,0,.10), transparent 38%),
    rgba(255,255,255,.055)!important;
  border:1px solid rgba(255,255,255,.10)!important;
  box-shadow:0 12px 34px rgba(0,0,0,.18)!important;
}

.my-match-captain-shirt.has-shirt{
  border-color:rgba(168,255,0,.22)!important;
}

.shirt-picker-head{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:10px!important;
  margin-bottom:10px!important;
}

.shirt-picker-head span{
  color:#fff!important;
  font-size:12px!important;
  font-weight:1000!important;
  letter-spacing:.02em!important;
}

.shirt-picker-head small{
  color:rgba(255,255,255,.52)!important;
  font-size:9px!important;
  font-weight:800!important;
  text-align:right!important;
  line-height:1.25!important;
}

.shirt-current{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  min-height:54px!important;
  padding:9px!important;
  border-radius:17px!important;
  background:rgba(0,0,0,.25)!important;
  border:1px solid rgba(255,255,255,.08)!important;
}

.shirt-current img{
  width:42px!important;
  max-width:42px!important;
  height:42px!important;
  object-fit:contain!important;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.35))!important;
}

.shirt-current strong{
  display:block!important;
  color:#fff!important;
  font-size:13px!important;
  font-weight:1000!important;
  line-height:1.1!important;
}

.shirt-current em{
  display:inline-flex!important;
  margin-top:5px!important;
  min-height:18px!important;
  align-items:center!important;
  padding:0 7px!important;
  border-radius:999px!important;
  background:rgba(168,255,0,.12)!important;
  border:1px solid rgba(168,255,0,.24)!important;
  color:var(--cr-lime,#a8ff00)!important;
  font-size:8px!important;
  font-style:normal!important;
  font-weight:1000!important;
  text-transform:uppercase!important;
}

.shirt-current-empty{
  width:42px!important;
  height:42px!important;
  border-radius:14px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:rgba(255,255,255,.06)!important;
  border:1px dashed rgba(255,255,255,.20)!important;
  color:rgba(255,255,255,.55)!important;
  font-weight:1000!important;
}

.shirt-picker-help{
  margin:10px 0 9px!important;
  color:rgba(255,255,255,.56)!important;
  font-size:10px!important;
  line-height:1.35!important;
  font-weight:700!important;
}

.my-match-shirt-icons{
  grid-template-columns:repeat(3, minmax(68px, 1fr))!important;
}

.my-match-shirt-icon-option{
  min-height:92px!important;
  border-radius:18px!important;
}

.my-match-shirt-icon-option img{
  width:48px!important;
  height:48px!important;
}

.my-match-shirt-icon-option.is-selected::after{
  content:"✓"!important;
  position:absolute!important;
  top:7px!important;
  left:7px!important;
  width:18px!important;
  height:18px!important;
  border-radius:999px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:var(--cr-lime,#a8ff00)!important;
  color:#071018!important;
  font-size:11px!important;
  font-weight:1000!important;
}

@media(max-width:420px){
  .shirt-picker-head{
    flex-direction:column!important;
    gap:2px!important;
  }
  .shirt-picker-head small{
    text-align:left!important;
  }
  .my-match-shirt-icons{
    grid-template-columns:repeat(3, minmax(0, 1fr))!important;
  }
}


/* Fix responsive Equipo A / Equipo B en draft */
.my-match-draft-captains,
.my-match-live-teams{
  width:100%!important;
  max-width:100%!important;
  display:grid!important;
  grid-template-columns:repeat(2, minmax(0, 1fr))!important;
  gap:14px!important;
  align-items:stretch!important;
  overflow:visible!important;
}

.my-match-draft-captains > div,
.my-match-live-teams > div{
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
}

.my-match-draft-captains > div > b{
  display:block!important;
  max-width:100%!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

.my-match-captain-shirt{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}

.my-match-captain-shirt.has-shirt,
.my-match-captain-shirt.no-shirt{
  display:flex!important;
  flex-direction:column!important;
  gap:10px!important;
}

.shirt-picker-head,
.shirt-current,
.my-match-shirt-icons,
.my-match-shirt-icons-form{
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}

.shirt-picker-head{
  display:grid!important;
  grid-template-columns:minmax(0, 1fr) auto!important;
  align-items:start!important;
}

.shirt-picker-head span,
.shirt-picker-head small,
.shirt-current strong,
.shirt-current em{
  min-width:0!important;
  max-width:100%!important;
}

.shirt-current{
  display:grid!important;
  grid-template-columns:42px minmax(0,1fr)!important;
  align-items:center!important;
}

.shirt-current > div{
  min-width:0!important;
}

.shirt-current strong{
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

.my-match-shirt-icons{
  grid-template-columns:repeat(3, minmax(0, 1fr))!important;
  gap:8px!important;
}

.my-match-shirt-icon-option{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow:hidden!important;
}

.my-match-shirt-icon-option span{
  max-width:100%!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

.my-match-live-teams p,
.my-match-live-teams .captain{
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

@media(max-width:820px){
  .my-match-draft-captains,
  .my-match-live-teams{
    grid-template-columns:1fr!important;
    gap:12px!important;
  }

  .my-match-draft-captains > div,
  .my-match-live-teams > div{
    border-radius:20px!important;
  }

  .my-match-captain-shirt{
    padding:12px!important;
  }

  .shirt-picker-head{
    grid-template-columns:1fr!important;
    gap:2px!important;
  }

  .shirt-picker-head small{
    text-align:left!important;
  }
}

@media(max-width:390px){
  .my-match-shirt-icons{
    gap:6px!important;
  }

  .my-match-shirt-icon-option{
    min-height:78px!important;
    border-radius:15px!important;
    padding:6px 3px!important;
  }

  .my-match-shirt-icon-option img{
    width:34px!important;
    height:34px!important;
  }

  .my-match-shirt-icon-option span{
    font-size:8px!important;
  }

  .shirt-current{
    grid-template-columns:36px minmax(0,1fr)!important;
    padding:8px!important;
  }

  .shirt-current img,
  .shirt-current-empty{
    width:36px!important;
    height:36px!important;
  }
}


/* Modo compacto my-match-captain-shirt */
.my-match-draft-captains{
  gap:10px!important;
}

.my-match-draft-captains > div{
  padding:10px!important;
}

.my-match-captain-shirt{
  margin-top:8px!important;
  padding:9px!important;
  gap:7px!important;
  border-radius:16px!important;
}

.shirt-picker-head{
  margin-bottom:0!important;
  gap:6px!important;
}

.shirt-picker-head span{
  font-size:11px!important;
}

.shirt-picker-head small{
  font-size:8px!important;
}

.shirt-current{
  min-height:42px!important;
  padding:6px 7px!important;
  grid-template-columns:32px minmax(0,1fr)!important;
  border-radius:13px!important;
}

.shirt-current img,
.shirt-current-empty{
  width:32px!important;
  height:32px!important;
  max-width:32px!important;
}

.shirt-current strong{
  font-size:12px!important;
}

.shirt-current em{
  min-height:15px!important;
  margin-top:3px!important;
  padding:0 5px!important;
  font-size:7px!important;
}

.shirt-picker-help{
  margin:3px 0 4px!important;
  font-size:9px!important;
  line-height:1.15!important;
}

.my-match-shirt-icons{
  gap:6px!important;
}

.my-match-shirt-icon-option{
  min-height:64px!important;
  padding:5px 3px!important;
  border-radius:13px!important;
}

.my-match-shirt-icon-option img{
  width:30px!important;
  height:30px!important;
}

.my-match-shirt-icon-option span{
  margin-top:3px!important;
  font-size:7px!important;
}

.my-match-shirt-icon-option em{
  min-height:14px!important;
  top:3px!important;
  right:3px!important;
  padding:0 4px!important;
  font-size:6px!important;
}

.my-match-shirt-icon-option.is-selected::after{
  top:4px!important;
  left:4px!important;
  width:15px!important;
  height:15px!important;
  font-size:9px!important;
}

@media(max-width:420px){
  .my-match-captain-shirt{
    padding:8px!important;
  }

  .my-match-shirt-icon-option{
    min-height:58px!important;
  }

  .my-match-shirt-icon-option img{
    width:26px!important;
    height:26px!important;
  }
}


/* Draft equipos compacto con iconos posición/pie */
.compact-draft-teams{
  gap:8px!important;
  margin:8px 0!important;
}

.compact-team-card{
  padding:9px!important;
  border-radius:15px!important;
}

.compact-team-card h3{
  margin:0 0 6px!important;
  font-size:12px!important;
  line-height:1!important;
  letter-spacing:.02em!important;
}

.compact-team-row{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto auto!important;
  align-items:center!important;
  gap:5px!important;
  min-height:24px!important;
  padding:4px 0!important;
  border-top:1px solid rgba(255,255,255,.055)!important;
  color:rgba(255,255,255,.84)!important;
  font-size:11px!important;
  line-height:1.1!important;
}

.compact-team-row:first-of-type{
  border-top:0!important;
}

.compact-team-row.captain-row{
  color:#fff!important;
  font-weight:900!important;
}

.compact-team-name{
  display:block!important;
  min-width:0!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}

.compact-team-name b{
  color:var(--cr-lime,#a8ff00)!important;
  font-weight:1000!important;
}

.compact-team-row .my-match-meta-icons-only{
  display:inline-flex!important;
  align-items:center!important;
  gap:3px!important;
  flex-wrap:nowrap!important;
  white-space:nowrap!important;
}

.compact-team-row .my-match-meta-group{
  display:inline-flex!important;
  align-items:center!important;
  gap:2px!important;
}

.compact-team-row .my-match-meta-icon{
  width:16px!important;
  height:16px!important;
  min-width:16px!important;
  border-radius:6px!important;
}

.compact-team-row .my-match-meta-icon img{
  width:12px!important;
  height:12px!important;
}

.compact-team-row .my-match-captain-dot{
  width:7px!important;
  height:7px!important;
  min-width:7px!important;
  margin:0!important;
}

.compact-team-card em{
  font-size:10px!important;
  color:rgba(255,255,255,.42)!important;
}

@media(max-width:820px){
  .compact-draft-teams{
    grid-template-columns:1fr!important;
  }
}


.compact-team-main{
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  min-width:0!important;
}

.compact-team-avatar{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:24px!important;
  height:24px!important;
  min-width:24px!important;
  flex:0 0 24px!important;
}

.compact-team-avatar .player-photo{
  width:24px!important;
  height:24px!important;
  min-width:24px!important;
  border-radius:50%!important;
  object-fit:cover!important;
  display:block!important;
  border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:0 4px 10px rgba(0,0,0,.22)!important;
}

.compact-available-row{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:8px!important;
}

.compact-available-main{
  flex:1 1 auto!important;
  min-width:0!important;
}

.compact-available-main > span:last-child{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

@media(max-width:480px){
  .compact-team-avatar,
  .compact-team-avatar .player-photo{
    width:22px!important;
    height:22px!important;
    min-width:22px!important;
  }
}


/* Edad compacta en draft */
.compact-team-name small,
.compact-available-main small{
  color:rgba(255,255,255,.48)!important;
  font-size:9px!important;
  font-weight:800!important;
  margin-left:3px!important;
  white-space:nowrap!important;
}

.compact-team-name small::before,
.compact-available-main small::before{
  content:"- "!important;
}


/* Formación post draft */
.formation-page{
  padding-bottom:90px!important;
}

.formation-hero{
  display:flex!important;
  justify-content:space-between!important;
  align-items:flex-start!important;
  gap:12px!important;
}

.formation-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:14px!important;
}

.formation-team-card{
  min-width:0!important;
  overflow:hidden!important;
}

.formation-team-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  margin-bottom:10px!important;
}

.formation-team-head h2{
  margin:0!important;
  color:#fff!important;
  font-size:16px!important;
  font-weight:1000!important;
}

.formation-team-head span{
  display:inline-flex!important;
  align-items:center!important;
  min-height:22px!important;
  padding:0 8px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.06)!important;
  border:1px solid rgba(255,255,255,.10)!important;
  color:rgba(255,255,255,.62)!important;
  font-size:9px!important;
  font-weight:1000!important;
  text-transform:uppercase!important;
}

.formation-team-card.is-saved .formation-team-head span{
  background:rgba(168,255,0,.11)!important;
  border-color:rgba(168,255,0,.25)!important;
  color:var(--cr-lime,#a8ff00)!important;
}

.formation-board{
  display:grid!important;
  gap:8px!important;
  padding:10px!important;
  border-radius:22px!important;
  background:
    linear-gradient(180deg, rgba(12,80,34,.58), rgba(4,24,16,.92)),
    radial-gradient(circle at center, rgba(168,255,0,.10), transparent 55%)!important;
  border:1px solid rgba(168,255,0,.16)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)!important;
  min-height:430px!important;
}

.formation-zone{
  min-height:82px!important;
  border-radius:16px!important;
  padding:7px!important;
  background:rgba(0,0,0,.16)!important;
  border:1px dashed rgba(255,255,255,.16)!important;
}

.formation-zone.is-over{
  border-color:rgba(168,255,0,.65)!important;
  background:rgba(168,255,0,.08)!important;
}

.formation-zone > strong{
  display:block!important;
  margin-bottom:5px!important;
  color:rgba(255,255,255,.64)!important;
  font-size:9px!important;
  line-height:1!important;
  font-weight:1000!important;
  text-transform:uppercase!important;
  letter-spacing:.05em!important;
}

.formation-zone-players{
  display:grid!important;
  gap:5px!important;
}

.formation-player{
  display:grid!important;
  grid-template-columns:26px minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:6px!important;
  min-height:34px!important;
  padding:4px 6px!important;
  border-radius:13px!important;
  background:rgba(7,10,18,.74)!important;
  border:1px solid rgba(255,255,255,.08)!important;
  color:#fff!important;
  cursor:grab!important;
}

.formation-board.is-readonly .formation-player{
  cursor:default!important;
}

.formation-player.is-dragging{
  opacity:.55!important;
}

.formation-avatar{
  width:26px!important;
  height:26px!important;
  min-width:26px!important;
}

.formation-avatar .player-photo{
  width:26px!important;
  height:26px!important;
  border-radius:50%!important;
  object-fit:cover!important;
  display:block!important;
}

.formation-name{
  min-width:0!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
  font-size:10px!important;
  font-weight:900!important;
}

.formation-name b{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:16px!important;
  height:16px!important;
  border-radius:999px!important;
  background:var(--cr-lime,#a8ff00)!important;
  color:#061018!important;
  font-size:9px!important;
  margin-right:3px!important;
}

.formation-player .my-match-meta-icons-only{
  display:inline-flex!important;
  gap:2px!important;
  flex-wrap:nowrap!important;
}

.formation-player .my-match-meta-icon{
  width:15px!important;
  height:15px!important;
  min-width:15px!important;
  border-radius:5px!important;
}

.formation-player .my-match-meta-icon img{
  width:11px!important;
  height:11px!important;
}

.formation-save-form{
  margin-top:10px!important;
}

.formation-save-form .v4-btn{
  width:100%!important;
}

.formation-note{
  margin:9px 0 0!important;
  color:rgba(255,255,255,.50)!important;
  font-size:10px!important;
}

@media(max-width:900px){
  .formation-grid{
    grid-template-columns:1fr!important;
  }
  .formation-board{
    min-height:390px!important;
  }
}

@media(max-width:420px){
  .formation-board{
    min-height:360px!important;
    padding:8px!important;
  }
  .formation-zone{
    min-height:72px!important;
    padding:6px!important;
  }
  .formation-player{
    grid-template-columns:24px minmax(0,1fr) auto!important;
    min-height:32px!important;
  }
  .formation-avatar,
  .formation-avatar .player-photo{
    width:24px!important;
    height:24px!important;
  }
}


/* Formación tipo cancha centrada */
.formation-board{
  position:relative!important;
  display:grid!important;
  grid-template-rows:1fr 1fr 1fr 1fr!important;
  gap:10px!important;
  min-height:520px!important;
  padding:14px 10px!important;
  overflow:hidden!important;
}

.formation-board::before{
  content:""!important;
  position:absolute!important;
  inset:10px!important;
  border:1px solid rgba(255,255,255,.13)!important;
  border-radius:20px!important;
  pointer-events:none!important;
}

.formation-board::after{
  content:""!important;
  position:absolute!important;
  left:10px!important;
  right:10px!important;
  top:50%!important;
  height:1px!important;
  background:rgba(255,255,255,.12)!important;
  pointer-events:none!important;
}

.formation-zone{
  position:relative!important;
  z-index:1!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:center!important;
  min-height:0!important;
  padding:7px!important;
  border:0!important;
  background:transparent!important;
}

.formation-zone > strong{
  margin:0 0 6px!important;
  padding:3px 8px!important;
  border-radius:999px!important;
  background:rgba(0,0,0,.26)!important;
  border:1px solid rgba(255,255,255,.09)!important;
  color:rgba(255,255,255,.62)!important;
  font-size:8px!important;
  line-height:1!important;
  text-align:center!important;
}

.formation-zone-players{
  width:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  flex-wrap:wrap!important;
}

.formation-player{
  width:auto!important;
  max-width:104px!important;
  min-width:78px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:4px!important;
  min-height:64px!important;
  padding:6px 5px!important;
  text-align:center!important;
  border-radius:16px!important;
}

.formation-avatar,
.formation-avatar .player-photo{
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
}

.formation-name{
  width:100%!important;
  font-size:9px!important;
  line-height:1.05!important;
  text-align:center!important;
  white-space:nowrap!important;
}

.formation-player .my-match-meta-icons-only{
  justify-content:center!important;
}

.formation-zone[data-zone="Portero"] .formation-player{
  max-width:96px!important;
}

.formation-zone[data-zone="Defensa"] .formation-zone-players,
.formation-zone[data-zone="Medio"] .formation-zone-players,
.formation-zone[data-zone="Delantero"] .formation-zone-players{
  justify-content:center!important;
}

@media(max-width:900px){
  .formation-board{
    min-height:500px!important;
  }
}

@media(max-width:420px){
  .formation-board{
    min-height:460px!important;
    gap:7px!important;
    padding:12px 6px!important;
  }

  .formation-zone{
    padding:5px 3px!important;
  }

  .formation-zone-players{
    gap:5px!important;
  }

  .formation-player{
    min-width:68px!important;
    max-width:82px!important;
    min-height:58px!important;
    padding:5px 4px!important;
  }

  .formation-avatar,
  .formation-avatar .player-photo{
    width:26px!important;
    height:26px!important;
    min-width:26px!important;
  }

  .formation-name{
    font-size:8px!important;
  }

  .formation-player .my-match-meta-icon{
    width:13px!important;
    height:13px!important;
    min-width:13px!important;
  }

  .formation-player .my-match-meta-icon img{
    width:10px!important;
    height:10px!important;
  }
}


/* Resultado habilitado desde formación */
.formation-result-ready{
  margin-top:14px!important;
  text-align:center!important;
}

.formation-result-ready strong{
  display:block!important;
  color:#fff!important;
  font-size:16px!important;
  font-weight:1000!important;
}

.formation-result-ready p{
  margin:6px 0 12px!important;
  color:rgba(255,255,255,.62)!important;
  font-size:12px!important;
}

.result-card h3{
  margin:18px 0 10px!important;
  color:#fff!important;
  font-size:14px!important;
}

.result-score-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
}

.result-score-grid label,
.result-crack-grid label{
  display:grid!important;
  gap:6px!important;
}

.result-score-grid span,
.result-crack-grid span{
  color:rgba(255,255,255,.7)!important;
  font-size:11px!important;
  font-weight:900!important;
}

.result-score-grid input,
.result-crack-grid select,
.result-player-row input{
  width:100%!important;
  min-height:38px!important;
  border-radius:12px!important;
  border:1px solid rgba(255,255,255,.12)!important;
  background:rgba(255,255,255,.06)!important;
  color:#fff!important;
  padding:0 10px!important;
  box-sizing:border-box!important;
}

.result-player-list{
  display:grid!important;
  gap:7px!important;
}

.result-player-row{
  display:grid!important;
  grid-template-columns:minmax(130px,1fr) 62px 52px 72px 58px!important;
  gap:7px!important;
  align-items:center!important;
  padding:7px!important;
  border-radius:14px!important;
  background:rgba(255,255,255,.045)!important;
  border:1px solid rgba(255,255,255,.07)!important;
}

.result-player-id{
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  min-width:0!important;
}

.result-player-id .player-photo{
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  border-radius:50%!important;
  object-fit:cover!important;
}

.result-player-id span{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:#fff!important;
  font-size:11px!important;
  font-weight:900!important;
}

.result-player-id small,
.result-player-row label small{
  display:block!important;
  color:rgba(255,255,255,.45)!important;
  font-size:8px!important;
  font-weight:900!important;
}

.result-player-row label{
  display:grid!important;
  gap:3px!important;
  margin:0!important;
}

.result-player-row input[type="checkbox"]{
  min-height:18px!important;
  height:18px!important;
}

.result-crack-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
  margin-bottom:14px!important;
}

@media(max-width:760px){
  .result-score-grid,
  .result-crack-grid{
    grid-template-columns:1fr!important;
  }

  .result-player-row{
    grid-template-columns:minmax(0,1fr) 52px 44px 58px 48px!important;
    gap:5px!important;
    padding:6px!important;
  }

  .result-player-id .player-photo{
    width:26px!important;
    height:26px!important;
    min-width:26px!important;
  }

  .result-player-id span{
    font-size:10px!important;
  }

  .result-player-row input{
    min-height:32px!important;
    padding:0 5px!important;
    font-size:12px!important;
  }
}


/* Botón cargar resultado visible post formación */
.formation-result-ready{
  margin-top:14px!important;
  padding:16px!important;
  text-align:center!important;
}

.formation-result-ready strong{
  display:block!important;
  color:#fff!important;
  font-size:16px!important;
  font-weight:1000!important;
}

.formation-result-ready p{
  margin:6px auto 12px!important;
  max-width:460px!important;
  color:rgba(255,255,255,.64)!important;
  font-size:12px!important;
  line-height:1.35!important;
}

.formation-result-ready .v4-btn{
  display:inline-flex!important;
  justify-content:center!important;
  min-width:190px!important;
}


/* Pantalla resultado amigable */
.result-friendly-page{
  padding-bottom:110px!important;
}

.result-hero{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:14px!important;
}

.result-friendly-form{
  display:grid!important;
  gap:14px!important;
}

.result-score-card,
.result-team-card,
.result-crack-card{
  overflow:hidden!important;
}

.result-section-head{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:10px!important;
  margin-bottom:12px!important;
}

.result-section-head strong{
  color:#fff!important;
  font-size:16px!important;
  font-weight:1000!important;
}

.result-section-head small{
  color:rgba(255,255,255,.48)!important;
  font-size:10px!important;
  font-weight:800!important;
  text-align:right!important;
}

.result-scoreboard{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px!important;
}

.result-score-box{
  display:grid!important;
  place-items:center!important;
  gap:4px!important;
  min-height:120px!important;
  padding:14px!important;
  border-radius:20px!important;
  background:linear-gradient(180deg,rgba(168,255,0,.10),rgba(255,255,255,.045))!important;
  border:1px solid rgba(168,255,0,.18)!important;
}

.result-score-box span{
  color:#fff!important;
  font-size:15px!important;
  font-weight:1000!important;
}

.result-score-box em{
  color:rgba(255,255,255,.55)!important;
  font-size:10px!important;
  font-style:normal!important;
  font-weight:900!important;
}

.result-score-box input{
  width:82px!important;
  height:56px!important;
  border-radius:18px!important;
  text-align:center!important;
  font-size:28px!important;
  font-weight:1000!important;
  border:1px solid rgba(255,255,255,.14)!important;
  background:rgba(0,0,0,.34)!important;
  color:#fff!important;
}

.result-teams-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:14px!important;
}

.result-team-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:8px!important;
  margin-bottom:10px!important;
}

.result-team-head h2{
  margin:0!important;
  color:#fff!important;
  font-size:16px!important;
  font-weight:1000!important;
}

.result-team-head span{
  display:inline-flex!important;
  min-height:22px!important;
  align-items:center!important;
  padding:0 8px!important;
  border-radius:999px!important;
  background:rgba(168,255,0,.10)!important;
  color:var(--cr-lime,#a8ff00)!important;
  border:1px solid rgba(168,255,0,.18)!important;
  font-size:9px!important;
  font-weight:1000!important;
}

.result-player-cards{
  display:grid!important;
  gap:8px!important;
}

.result-player-card{
  display:grid!important;
  gap:8px!important;
  padding:10px!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.045)!important;
  border:1px solid rgba(255,255,255,.075)!important;
}

.result-player-top{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  min-width:0!important;
}

.result-player-top .player-photo{
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  border-radius:50%!important;
  object-fit:cover!important;
}

.result-player-top div{
  min-width:0!important;
}

.result-player-top strong{
  display:block!important;
  color:#fff!important;
  font-size:12px!important;
  font-weight:1000!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

.result-player-top small{
  color:rgba(255,255,255,.45)!important;
  font-size:9px!important;
  font-weight:900!important;
}

.result-player-fields{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:8px!important;
}

.result-player-fields label{
  display:grid!important;
  gap:4px!important;
}

.result-player-fields span{
  color:rgba(255,255,255,.52)!important;
  font-size:9px!important;
  font-weight:900!important;
}

.result-player-fields input{
  width:100%!important;
  min-height:38px!important;
  border-radius:13px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  background:rgba(0,0,0,.26)!important;
  color:#fff!important;
  font-size:15px!important;
  font-weight:1000!important;
  text-align:center!important;
}

.result-switches{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:8px!important;
}

.result-switch{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  min-height:34px!important;
  border-radius:12px!important;
  background:rgba(255,255,255,.055)!important;
  border:1px solid rgba(255,255,255,.08)!important;
  color:rgba(255,255,255,.72)!important;
  font-size:10px!important;
  font-weight:1000!important;
}

.result-switch.danger{
  color:#ffd0d0!important;
}

.result-switch input{
  width:16px!important;
  height:16px!important;
  accent-color:var(--cr-lime,#a8ff00)!important;
}

.result-crack-friendly{
  margin-bottom:0!important;
}

.result-submit-bar{
  position:sticky!important;
  bottom:74px!important;
  z-index:20!important;
  padding:10px!important;
  border-radius:20px!important;
  background:rgba(8,10,18,.82)!important;
  border:1px solid rgba(255,255,255,.10)!important;
  backdrop-filter:blur(14px)!important;
}

@media(max-width:900px){
  .result-teams-grid{
    grid-template-columns:1fr!important;
  }
}

@media(max-width:620px){
  .result-hero{
    flex-direction:column!important;
  }

  .result-scoreboard{
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
  }

  .result-score-box{
    min-height:100px!important;
    padding:10px!important;
  }

  .result-score-box input{
    width:68px!important;
    height:48px!important;
    font-size:24px!important;
  }

  .result-section-head{
    display:block!important;
  }

  .result-section-head small{
    display:block!important;
    text-align:left!important;
    margin-top:3px!important;
  }

  .result-submit-bar{
    bottom:70px!important;
  }
}

@media(max-width:390px){
  .result-player-fields,
  .result-switches{
    gap:6px!important;
  }

  .result-player-card{
    padding:8px!important;
  }
}


/* Fix lectura opciones select desplegado */
.result-crack-friendly select,
.result-crack-grid select,
.result-card select,
.result-page select{
  color:#ffffff!important;
  background:rgba(8,10,18,.92)!important;
}

.result-crack-friendly select option,
.result-crack-grid select option,
.result-card select option,
.result-page select option{
  color:#111827!important;
  background:#ffffff!important;
}

.result-crack-friendly select option:checked,
.result-crack-grid select option:checked,
.result-card select option:checked,
.result-page select option:checked{
  color:#ffffff!important;
  background:#1f2937!important;
}


/* Ranking por posición real */
.position-ranking-page{
  display:grid!important;
  gap:14px!important;
}

.position-ranking-card h2{
  margin:0 0 10px!important;
  color:#fff!important;
  font-size:16px!important;
  font-weight:1000!important;
}

.position-ranking-list{
  display:grid!important;
  gap:7px!important;
}

.position-ranking-row{
  display:grid!important;
  grid-template-columns:34px 32px minmax(0,1fr) auto auto!important;
  align-items:center!important;
  gap:8px!important;
  padding:8px!important;
  border-radius:14px!important;
  background:rgba(255,255,255,.045)!important;
  border:1px solid rgba(255,255,255,.07)!important;
}

.position-ranking-row b{
  color:var(--cr-lime,#a8ff00)!important;
  font-size:11px!important;
}

.position-ranking-row .player-photo{
  width:32px!important;
  height:32px!important;
  min-width:32px!important;
  border-radius:50%!important;
  object-fit:cover!important;
}

.position-ranking-row span{
  min-width:0!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
  color:#fff!important;
  font-size:12px!important;
  font-weight:900!important;
}

.position-ranking-row span small{
  display:block!important;
  color:rgba(255,255,255,.45)!important;
  font-size:9px!important;
}

.position-ranking-row em{
  color:#fff!important;
  font-style:normal!important;
  font-size:12px!important;
  font-weight:1000!important;
}

.position-ranking-row > small{
  color:rgba(255,255,255,.55)!important;
  font-size:10px!important;
  font-weight:900!important;
}


/* Resultado cerrado solo lectura */
.result-closed-page .result-score-card.is-closed .result-score-box b{
  display:block!important;
  color:#fff!important;
  font-size:42px!important;
  line-height:1!important;
  font-weight:1000!important;
}

.result-player-card.readonly{
  opacity:.96!important;
}

.result-readonly-stats{
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  flex-wrap:wrap!important;
}

.result-readonly-stats span{
  display:inline-flex!important;
  min-height:22px!important;
  align-items:center!important;
  padding:0 7px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.06)!important;
  border:1px solid rgba(255,255,255,.08)!important;
  color:rgba(255,255,255,.74)!important;
  font-size:9px!important;
  font-weight:900!important;
}


/* Ranking posiciones integrado */
.v4-tabs.five{
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
}

.position-ranking-unified{
  display:grid!important;
  gap:16px!important;
}

.position-premium-icon img{
  width:32px!important;
  height:32px!important;
  object-fit:contain!important;
  filter:drop-shadow(0 0 12px rgba(168,255,0,.35))!important;
}

.position-premium-header h2{
  text-transform:none!important;
}

.position-premium-table .ranking-premium-head,
.position-premium-row{
  grid-template-columns:34px minmax(0,1.35fr) minmax(84px,.8fr) 46px 62px 46px 54px!important;
}

.position-mini-chip{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:5px!important;
  min-width:0!important;
  color:rgba(255,255,255,.72)!important;
  font-size:10px!important;
  font-weight:900!important;
}

.position-mini-chip img{
  width:16px!important;
  height:16px!important;
  object-fit:contain!important;
}

.position-ranking-empty{
  padding:14px!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.045)!important;
  border:1px solid rgba(255,255,255,.07)!important;
  color:rgba(255,255,255,.6)!important;
  font-size:12px!important;
  font-weight:800!important;
}

@media(max-width:760px){
  .v4-tabs.five{
    gap:6px!important;
  }

  .v4-tabs.five a span{
    font-size:8px!important;
  }

  .position-premium-table .ranking-premium-head,
  .position-premium-row{
    grid-template-columns:28px minmax(0,1fr) 40px 44px 44px!important;
  }

  .position-premium-table .ranking-premium-head span:nth-child(3),
  .position-premium-row > span:nth-child(3),
  .position-premium-table .ranking-premium-head span:nth-child(4),
  .position-premium-row > span:nth-child(4){
    display:none!important;
  }
}


/* Reservas en carga de resultado */
.result-reserves-card{
  border-color:rgba(255,255,255,.10)!important;
}

.result-reserve-list{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
}

.result-reserve-row{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  min-width:0!important;
  padding:8px!important;
  border-radius:14px!important;
  background:rgba(255,255,255,.045)!important;
  border:1px solid rgba(255,255,255,.07)!important;
}

.result-reserve-row .player-photo{
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  border-radius:50%!important;
  object-fit:cover!important;
}

.result-reserve-row span{
  display:block!important;
  min-width:0!important;
  color:#fff!important;
  font-size:12px!important;
  font-weight:1000!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

.result-reserve-row small{
  display:block!important;
  color:rgba(255,255,255,.48)!important;
  font-size:9px!important;
  font-weight:900!important;
}

@media(max-width:620px){
  .result-reserve-list{
    grid-template-columns:1fr!important;
  }
}