:root{
  --stage:#0a0c11;
  --stage2:#12151d;
  --panel-dark:#161a24;
  --gold:#ffc93c;
  --gold-dim:#c99a1e;
  --crimson:#e6483a;
  --teal:#12b8a3;
  --clay:#a9642a;
  --clay-dark:#7c4a1e;
  --grass:#173d2c;
  --grass-light:#245c40;
  --chalk:#f7f4ec;
  --ink:#17150f;
  --line:#ddd5c1;
  --white:#ffffff;
  --green-ok:#2f7a4f;
  /* Bug real corregido (2026-07-31): --green-ok como TEXTO directo sobre un
     fondo oscuro (ej. tarjetas del Anotador, --stage2) da 3.49:1 de
     contraste -- por debajo del mínimo de accesibilidad (4.5:1). --green-ok
     sigue siendo correcto como FONDO sólido (ej. badges con texto blanco
     encima) -- esta variante es solo para texto verde legible sobre fondo
     oscuro (10.5:1 de contraste contra #12151d). */
  --green-ok-bright:#4ade80;
  --muted:#8a8471;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{background:var(--chalk);color:var(--ink);font-family:'Oswald',sans-serif;font-weight:400;-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{font-family:'Anton',sans-serif;font-weight:400;letter-spacing:.02em;margin:0;text-transform:uppercase;}
.mono{font-family:'JetBrains Mono',monospace;}
button,input,select,textarea{font-family:'Oswald',sans-serif;}
a{color:inherit;}
::selection{background:var(--gold);color:var(--ink);}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}
@keyframes marquee{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}
@keyframes glow{0%,100%{box-shadow:0 0 0 rgba(255,201,60,0);}50%{box-shadow:0 0 22px rgba(255,201,60,.35);}}
@keyframes sloganIn{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
.fade-in{animation:fadeUp .5s ease both;}
.fade-in:nth-child(2){animation-delay:.05s;}
.fade-in:nth-child(3){animation-delay:.1s;}
.fade-in:nth-child(4){animation-delay:.15s;}
.fade-in:nth-child(5){animation-delay:.2s;}
.fade-in:nth-child(6){animation-delay:.25s;}

#app{min-height:100vh;display:flex;flex-direction:column;}
.ticker-wrap{background:var(--stage);overflow:hidden;border-bottom:1px solid #232838;white-space:nowrap;}
.ticker{display:inline-flex;animation:marquee 32s linear infinite;padding:6px 0;}
.ticker span.item{color:#c8d0da;font-family:'JetBrains Mono',monospace;font-size:11px;padding:0 26px;letter-spacing:.03em;}
.ticker span.item b{color:var(--gold);}
.ticker span.item .live-tag{color:var(--crimson);font-weight:700;}

/* Header institucional (Claude Design "Opción 2a", 2026-08-09) — el header
   adopta el fondo CLARO del mockup aprobado (decisión explícita: SOLO el
   header cambia de tema por ahora; pestañas/fondo general se quedan en el
   oscuro/dorado de siempre, y se rediseñan en rondas separadas). */
.dp-ribbon{display:flex;height:4px;}
.dp-ribbon span:nth-child(1){width:180px;flex:none;background:#2A7048;}
.dp-ribbon span:nth-child(2){flex:1;background:#0F2C47;}
.dp-ribbon span:nth-child(3){width:64px;flex:none;background:#2A7048;}

.dp-header{height:100px;background:linear-gradient(90deg,#fff 0%,#fff 55%,#F6F8F6 100%);color:#0F2C47;padding:0 32px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid #EBEDED;position:sticky;top:0;z-index:50;overflow:hidden;}
.dp-deco{position:absolute;transform:rotate(45deg);pointer-events:none;}
.dp-deco-1{right:212px;top:-30px;width:150px;height:150px;border:1.5px solid #0F2C47;opacity:.06;border-radius:8px;}
.dp-deco-2{right:262px;top:14px;width:80px;height:80px;border:1.5px solid #2A7048;opacity:.10;border-radius:5px;}
.dp-brand{display:flex;align-items:center;gap:20px;min-width:0;position:relative;z-index:1;}
.dp-brand-icon{height:92px;width:auto;flex:none;display:block;}
.dp-brand-text{display:flex;flex-direction:column;gap:6px;min-width:0;}
.dp-wordmark{font-family:'Oswald',sans-serif;font-weight:700;font-size:24px;letter-spacing:.06em;text-transform:uppercase;color:#0F2C47;line-height:1;white-space:nowrap;}
.dp-wordmark em{font-style:normal;color:#2A7048;}
.dp-tagline{display:flex;align-items:center;gap:9px;font-family:'Barlow',sans-serif;font-weight:500;font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:#7A858E;line-height:1;white-space:nowrap;}
.dp-tagline-dash{width:16px;height:2px;background:#2A7048;border-radius:1px;flex:none;}
.dp-actions{display:flex;align-items:center;gap:16px;position:relative;z-index:1;}
.dp-role{display:inline-flex;align-items:center;gap:9px;height:34px;padding:0 15px;border-radius:17px;background:#EAF3ED;box-shadow:inset 0 0 0 1px rgba(42,112,72,.22);font-family:'Oswald',sans-serif;font-weight:600;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:#1E5334;white-space:nowrap;}
.dp-role-dot{width:7px;height:7px;border-radius:50%;background:#2A7048;box-shadow:0 0 0 3px rgba(42,112,72,.16);flex:none;}
.dp-logout{height:38px;padding:0 20px;border:none;border-radius:6px;background:#0F2C47;font-family:'Oswald',sans-serif;font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#fff;cursor:pointer;box-shadow:0 1px 2px rgba(15,44,71,.28);transition:background .15s,box-shadow .15s;}
.dp-logout:hover{background:#2A7048;box-shadow:0 3px 10px rgba(42,112,72,.32);}

.dp-nav{height:56px;background:#FCFDFC;display:flex;align-items:stretch;overflow-x:auto;padding:0 24px;border-bottom:1px solid #E4E7E5;box-shadow:0 1px 0 rgba(15,44,71,.04);}
.dp-nav-btn{background:transparent;border:none;display:flex;align-items:center;padding:0 16px;cursor:pointer;font-family:'Oswald',sans-serif;font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;white-space:nowrap;color:#4A5560;box-shadow:inset 0 -3px 0 transparent;transition:color .15s,box-shadow .15s,background .15s;}
.dp-nav-btn:hover{color:#0F2C47;background:rgba(15,44,71,.04);box-shadow:inset 0 -3px 0 #C9D2CC;}
.dp-nav-btn.active{font-weight:600;color:#1E5334;background:linear-gradient(180deg,rgba(42,112,72,0) 40%,rgba(42,112,72,.09) 100%);box-shadow:inset 0 -3px 0 #2A7048;}
.dp-nav-btn.locked{color:#A9B0B4;}
.dp-nav-btn.locked:hover{color:#7A858E;background:rgba(15,44,71,.04);box-shadow:inset 0 -3px 0 #C9D2CC;}
.dp-nav-btn.locked.active{color:#6f9c82;background:linear-gradient(180deg,rgba(42,112,72,0) 40%,rgba(42,112,72,.05) 100%);box-shadow:inset 0 -3px 0 #9dc4ac;}

.tab-dropdown{position:relative;}
.tab-dropdown-panel{display:none;flex-direction:column;position:absolute;top:100%;left:0;background:#fff;border:1px solid #E4E7E5;border-top:none;border-radius:0 0 8px 8px;min-width:190px;z-index:60;box-shadow:0 12px 30px rgba(15,44,71,.18);}
.tab-dropdown.open .tab-dropdown-panel{display:flex;}
.tab-dropdown-item{background:transparent;border:none;color:#4A5560;padding:11px 15px;text-align:left;cursor:pointer;font-family:'Oswald',sans-serif;font-size:12px;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;transition:background .15s,color .15s;}
.tab-dropdown-item:hover{background:#EAF3ED;color:#0F2C47;}
.tab-dropdown-item.active{color:#1E5334;font-weight:600;}

@media(max-width:900px){
  .dp-deco{display:none;}
}

main{flex:1;max-width:1220px;width:100%;margin:0 auto;padding:26px 20px 60px;}

.card{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:20px;}
.card.dark{background:var(--panel-dark);color:#e7e9ee;border-color:#262c3a;}
.card.dark .eyebrow{color:var(--gold);}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap;}
.section-head h2{font-size:27px;color:var(--grass);}
.eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--clay);margin-bottom:4px;display:block;}
.grid{display:grid;gap:16px;}
.grid.cols-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.grid.cols-3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.grid.cols-4{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
.btn{background:var(--clay);color:#fff;border:none;padding:10px 18px;border-radius:7px;cursor:pointer;font-size:13px;text-transform:uppercase;letter-spacing:.04em;font-weight:600;transition:transform .12s, background .15s;}
.btn:hover{background:var(--clay-dark);transform:translateY(-1px);}
.btn.gold{background:var(--gold);color:var(--ink);}
.btn.gold:hover{background:var(--gold-dim);}
.btn.secondary{background:transparent;border:1px solid var(--grass);color:var(--grass);}
.btn.secondary:hover{background:var(--grass);color:#fff;}
.btn.small{padding:6px 11px;font-size:11px;}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none;}
input[type=text],input[type=password],input[type=number],input[type=date],input[type=time],input[type=url],input[type=email],input[type=file],select,textarea{
  width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:6px;font-size:14px;background:#fff;color:var(--ink);}
label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#6b6558;display:block;margin-bottom:4px;font-family:'JetBrains Mono',monospace;}
.field{margin-bottom:12px;}
.pill{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-family:'JetBrains Mono',monospace;background:#eee;color:#555;}
.pill.cat{background:var(--grass);color:#fff;cursor:pointer;}
.pill.next{background:var(--gold);color:var(--ink);font-weight:700;}
.pill.league{font-weight:700;border:1px solid rgba(0,0,0,.1);}
.empty{border:2px dashed var(--line);border-radius:10px;padding:30px;text-align:center;color:var(--muted);}

.league-switch{display:flex;align-items:center;gap:8px;margin-bottom:16px;flex-wrap:wrap;}
.league-switch label{margin:0;}
.league-switch select{max-width:280px;}

.feed-item{padding:10px 0;border-bottom:1px solid var(--line);}
.feed-item:last-child{border-bottom:none;padding-bottom:0;}

/* Login (2026-07-26, "DISEÑO DEFINITIVO · APROBADO" importado de Claude
   Design): panel marino único (foto de campo de fondo -- ver nota sobre
   reemplazo por degradado, archivo real no se pudo traer por el límite de
   256KB de la herramienta de importación) con la marca a la izquierda y la
   tarjeta de acceso a la derecha en pantallas anchas; se apila en angostas.
   Tipografía Barlow/Barlow Condensed (deliberadamente distinta de
   Oswald/Anton del resto de la app -- decisión explícita de este diseño,
   solo para esta pantalla). Paleta exacta: marino #1a3a5c, verde #2a7048
   (mismo verde ya usado en el resto de la app), acento verde claro
   #7fc49a. */
:root{
  --login-green:#2a7048;
  --login-green-hover:#235c3c;
  --login-navy:#1a3a5c;
  --login-accent:#7fc49a;
  --login-border:#d5dbd7;
  --login-muted:#5b6670;
}
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#f2f3f1;padding:32px 20px;}
.login-panel{
  width:min(1200px,96vw);border-radius:16px;overflow:hidden;position:relative;
  background:linear-gradient(105deg,#132a42 0%,var(--login-navy) 55%,rgba(26,58,92,.85) 100%);
  box-shadow:0 24px 60px rgba(18,24,27,.2);
  display:grid;grid-template-columns:1fr 440px;gap:56px;align-items:center;padding:40px 52px;
}
.login-hero{display:flex;flex-direction:column;gap:18px;font-family:'Barlow',sans-serif;}
.login-logo-badge{align-self:flex-start;display:flex;background:#fff;border-radius:14px;padding:14px 20px 10px;box-shadow:0 10px 28px rgba(9,20,32,.28);}
.login-logo{height:52px;width:auto;display:block;}
.login-headline{margin:0;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:clamp(34px,4vw,58px);line-height:1.04;letter-spacing:-.01em;color:#fff;}
.login-headline .accent{color:var(--login-accent);}
.login-hero-slogan{margin:0;max-width:420px;font-size:16px;line-height:1.55;color:#c6d3e0;}
.login-privacy-note{margin:2px 0 0;max-width:420px;font-size:12px;line-height:1.5;text-align:justify;color:#a9bdd1;}
.login-card{background:#fff;border-radius:18px;padding:28px 32px;box-shadow:0 26px 60px rgba(9,20,32,.34);display:flex;flex-direction:column;font-family:'Barlow',sans-serif;}
.login-footer-location{text-align:center;margin-top:14px;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
@media(max-width:860px){
  .login-panel{grid-template-columns:1fr;gap:0;padding:0;border-radius:22px;}
  .login-hero{padding:34px 26px 26px;align-items:center;text-align:center;}
  .login-logo-badge{align-self:center;}
  .login-hero-slogan,.login-privacy-note{max-width:100%;}
  .login-card{border-radius:22px 22px 0 0;margin-top:-18px;box-shadow:none;}
}
/* Red de seguridad para Clerk (2026-07-26): además del objeto `appearance`
   en JS (auth.js), Clerk documenta que cada elemento de su `elements.<key>`
   se traduce en una clase CSS real y estable `.cl-<key>` en el DOM
   renderizado -- reforzar acá con CSS directo asegura que "cardBox" (la
   segunda tarjeta/sombra superpuesta reportada) y "footer" (la caja negra
   con "Secured by Clerk"/"Development mode") queden SIEMPRE sin fondo,
   sombra ni borde propios, sin depender de que el objeto en JS tenga
   exactamente el nombre de propiedad correcto para la versión de Clerk
   cargada en el navegador.  */
#clerk-sign-in .cl-rootBox,
#clerk-sign-in .cl-cardBox,
#clerk-sign-in .cl-card,
#clerk-sign-in .cl-main,
#clerk-sign-in .cl-footer,
#clerk-sign-in .cl-footerAction{
  background:transparent!important;
  box-shadow:none!important;
  border:none!important;
}
#clerk-sign-in .cl-rootBox,
#clerk-sign-in .cl-cardBox,
#clerk-sign-in .cl-card{
  width:100%!important;
}
/* Etiquetas "CORREO ELECTRÓNICO"/"CONTRASEÑA" recortadas arriba (2026-07-26,
   tercera vuelta -- confirmado contra el HTML real inspeccionado en el
   navegador, no contra el bundle esta vez):
   1) Clerk agrega clases compuestas por campo ("cl-formFieldLabel__
      identifier-field"/"...__password-field") -- se apunta a ellas
      directamente (2 clases = más especificidad que su propia
      "cl-internal-h54r" de una sola clase, gana el empate de !important
      pase lo que pase el orden de carga).
   2) Contenedor NUNCA cubierto hasta ahora: entre .cl-formField y
      .cl-formFieldLabelRow hay un div interno sin nombre semántico
      ("cl-internal-17uj465" en la versión actual de Clerk) que envuelve
      la fila de la etiqueta JUNTO con el input -- si ESE recorta,
      overflow:visible en la etiqueta misma no alcanza (un hijo no puede
      cancelar el overflow:hidden de un padre). Se apunta por selector
      de posición (":first-child" de formField) para no depender de que
      el hash exacto no cambie entre versiones de Clerk.
   3) line-height en PÍXELES fijos, no "normal" -- ya no se confía en las
      métricas propias del font (Barlow Condensed, vía Google Fonts,
      puede tener métricas verticales mal calibradas). */
#clerk-sign-in .cl-formField > *{
  overflow:visible!important;
}
#clerk-sign-in .cl-formFieldLabelRow,
#clerk-sign-in .cl-formField{
  overflow:visible!important;
}
#clerk-sign-in .cl-formFieldLabel,
#clerk-sign-in .cl-formFieldLabel.cl-formFieldLabel__identifier-field,
#clerk-sign-in .cl-formFieldLabel.cl-formFieldLabel__password-field{
  height:auto!important;
  min-height:26px!important;
  line-height:26px!important;
  padding-top:0!important;
  padding-bottom:0!important;
  overflow:visible!important;
  /* Causa raíz (2026-07-26, cuarta vuelta): el texto ya viene en
     mayúsculas desde Localization -- sin text-transform, el navegador no
     tiene que re-pintar el texto transformado en cada inserción dinámica. */
  text-transform:none!important;
}
/* Enlace duplicado "olvidaste tu contraseña" (2026-07-26): Clerk lo
   muestra dos veces en el paso de contraseña -- junto al campo
   (formFieldAction__forgotPassword, sin traducir) y como acción del paso
   completo (signIn.password.actionLink, ya traducida). Se oculta el que
   va junto al campo; se conserva el otro. */
#clerk-sign-in .cl-formFieldAction{
  display:none!important;
}
.role-select{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:18px;}
.role-opt{border:1px solid var(--line);border-radius:8px;padding:10px;text-align:center;cursor:pointer;font-size:12px;text-transform:uppercase;letter-spacing:.03em;background:#fff;transition:.15s;}
.role-opt.active{border-color:var(--clay);background:#fbeee0;color:var(--clay-dark);font-weight:600;}
.hint-box{background:#fff;border:1px dashed var(--line);border-radius:8px;padding:10px 12px;font-size:11px;font-family:'JetBrains Mono',monospace;color:#75705f;margin-top:16px;line-height:1.6;}
.err{color:var(--crimson);font-size:12px;margin-top:8px;font-family:'JetBrains Mono',monospace;}
.guest-link{display:block;text-align:center;margin-top:12px;font-size:13px;color:var(--login-muted);cursor:pointer;}

.scoreboard{background:radial-gradient(circle at 15% 0%, #1c2e46 0%, var(--stage) 60%);color:var(--chalk);border-radius:14px;padding:28px 28px;
  display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between;margin-bottom:22px;border:1px solid #232838;position:relative;overflow:hidden;}
.scoreboard::after{content:'';position:absolute;top:-60px;right:-60px;width:200px;height:200px;background:radial-gradient(circle,rgba(255,201,60,.18),transparent 70%);}
.scoreboard .sb-title span.eyebrow{color:var(--gold);font-size:14px;}
.scoreboard .sb-title h2{color:#fff;font-size:32px;}
.sb-stats{display:flex;gap:24px;flex-wrap:wrap;}
.sb-stat{text-align:center;}
.sb-stat .num{font-family:'JetBrains Mono',monospace;font-size:30px;color:var(--gold);font-weight:700;}
.sb-stat .lbl{font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:#8fa0b3;}

.league-banner{border-radius:14px;padding:30px 28px;margin-bottom:22px;color:#fff;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.15);}
.league-banner .lb-eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;opacity:.85;}
.league-banner h2{font-size:32px;margin-top:4px;}
.league-banner .lb-sede{font-size:13px;opacity:.9;margin-top:4px;}
.league-swatches{display:flex;gap:6px;margin-top:14px;}
.league-swatches .sw{width:22px;height:22px;border-radius:5px;border:2px solid rgba(255,255,255,.6);}

.league-card{border-radius:14px;padding:22px;color:#fff;cursor:pointer;position:relative;overflow:hidden;transition:transform .15s;border:1px solid rgba(255,255,255,.15);}
.league-card:hover{transform:translateY(-4px);}
.league-card h3{font-size:19px;margin-bottom:4px;}
.league-card .lc-sede{font-size:11px;opacity:.9;font-family:'JetBrains Mono',monospace;}
.league-card .lc-count{margin-top:14px;font-family:'JetBrains Mono',monospace;font-size:11px;opacity:.9;}
.league-card .lc-swatches{position:absolute;bottom:0;left:0;right:0;height:8px;display:flex;}
.league-card .lc-swatches span{flex:1;}

.player-card{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;cursor:pointer;transition:transform .15s, box-shadow .15s;}
.player-card:hover{transform:translateY(-3px);box-shadow:0 12px 24px rgba(0,0,0,.1);}
.player-card .stripe{height:6px;background:linear-gradient(90deg, var(--clay), var(--gold));}
.player-card .pc-body{padding:14px;display:flex;gap:12px;align-items:center;}
.player-card img{width:52px;height:52px;border-radius:50%;object-fit:cover;border:2px solid var(--line);}
.player-card .pc-name{font-family:'Anton',sans-serif;font-size:15px;color:var(--grass);text-transform:uppercase;}
.player-card .pc-meta{font-size:11px;color:var(--muted);font-family:'JetBrains Mono',monospace;}
.player-card .pc-avg{margin-left:auto;text-align:right;}
.player-card .pc-avg .v{font-family:'JetBrains Mono',monospace;font-weight:700;color:var(--clay);font-size:18px;}
.player-card .pc-avg .l{font-size:9px;color:#999;text-transform:uppercase;}

table.stats{width:100%;border-collapse:collapse;font-family:'JetBrains Mono',monospace;font-size:12px;}
table.stats th{background:var(--grass);color:#fff;padding:8px 5px;text-transform:uppercase;font-size:9.5px;letter-spacing:.04em;text-align:center;}
table.stats td{padding:7px 5px;text-align:center;border-bottom:1px solid var(--line);}
table.stats tr:nth-child(even){background:#faf8f2;}
table.stats td.name{text-align:left;font-family:'Oswald',sans-serif;font-weight:500;}
table.stats tr.leader-1 td.rank{color:var(--gold-dim);font-weight:700;}
table.stats tr.leader-1{background:#fff8e6;}

.tabgroup{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap;}
.tabgroup button{background:#fff;border:1px solid var(--line);padding:7px 14px;border-radius:20px;font-size:12px;cursor:pointer;text-transform:uppercase;letter-spacing:.03em;transition:.15s;}
.tabgroup button.active{background:var(--grass);color:#fff;border-color:var(--grass);}

.modal-bg{position:fixed;inset:0;background:rgba(10,12,17,.7);display:flex;align-items:flex-start;justify-content:center;padding:30px 16px;z-index:100;overflow-y:auto;}
.modal{background:#fff;border-radius:14px;max-width:760px;width:100%;padding:28px;position:relative;animation:fadeUp .25s ease both;}
.modal .close{position:absolute;top:14px;right:16px;background:none;border:none;font-size:22px;cursor:pointer;color:#999;}
.media-slot{border:2px dashed var(--line);border-radius:8px;padding:12px;text-align:center;font-size:12px;color:var(--muted);}
.media-slot.has-media{border-style:solid;border-color:var(--grass);}
.gallery-thumb{width:100%;height:90px;object-fit:cover;border-radius:6px;display:block;cursor:pointer;}

.chat-window{background:#0f1420;border-radius:10px;padding:14px;height:340px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;}
.bubble{max-width:78%;padding:9px 12px;border-radius:12px;font-size:13px;line-height:1.4;}
.bubble .meta{font-size:9.5px;font-family:'JetBrains Mono',monospace;opacity:.7;margin-bottom:3px;text-transform:uppercase;letter-spacing:.05em;}
.bubble.mine{align-self:flex-end;background:var(--gold);color:var(--ink);border-bottom-right-radius:3px;}
.bubble.theirs{align-self:flex-start;background:#232a3a;color:#e7e9ee;border-bottom-left-radius:3px;}

.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--crimson);margin-right:6px;animation:pulse 1.3s infinite;}
.game-row{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--line);border-radius:8px;margin-bottom:10px;background:#fff;flex-wrap:wrap;transition:.15s;}
.game-row:hover{border-color:var(--gold-dim);}
.game-row .teams{flex:1;min-width:180px;font-family:'Anton',sans-serif;font-size:14px;color:var(--grass);}
.game-row .score{font-family:'JetBrains Mono',monospace;font-size:19px;font-weight:700;color:var(--clay);}
.status-tag{font-size:10px;padding:3px 9px;border-radius:20px;text-transform:uppercase;font-family:'JetBrains Mono',monospace;}
.status-tag.live{background:#3a1512;color:#ff8a7a;animation:glow 1.6s infinite;}
/* Bug real corregido (2026-07-31): var(--green-ok) sobre este fondo claro
   daba 4.457:1 de contraste -- justo por debajo del mínimo de
   accesibilidad (4.5:1), "difícil de distinguir" según reporte real.
   #256b41 mide 5.5:1 contra el mismo fondo. */
.status-tag.final{background:#e6efe9;color:#256b41;}
.status-tag.prog{background:#fff3da;color:#8a6116;}
.standings{width:100%;border-collapse:collapse;font-size:13px;}
.standings th{text-align:left;font-family:'JetBrains Mono',monospace;font-size:10px;text-transform:uppercase;color:var(--muted);padding:6px 8px;border-bottom:2px solid var(--line);}
.standings td{padding:8px;border-bottom:1px solid var(--line);}
.standings tr.rank1 td.pos{color:var(--gold-dim);font-weight:700;}
/* Alineación: fila mientras se arrastra (2026-07-24, ver attendance.js) */
.standings tr.dragging-row{opacity:.5;background:var(--line);}
/* Alineación: el <select> de posición heredaba el tamaño de un campo de
   formulario normal (14px + padding 9-10px) -- se veía desproporcionado
   dentro de la fila compacta de esta tabla (2026-07-24). Bug real corregido
   (mismo día, segunda vuelta): min-width:150px quedó de ANTES de acortar
   las posiciones a su código (2B, SS...) en vez del nombre completo -- con
   la columna de la tabla fijada a 70px (ver colgroup en attendance.js), ese
   min-width forzaba al <select> a desbordarse fuera de su celda. Ahora
   respeta el ancho real de la columna. */
.standings select[data-lineup-position]{font-size:12px;padding:4px 2px;width:100%;max-width:100%;box-sizing:border-box;}

/* Generador de Calendario: líneas divisorias claras entre día/hora
   (2026-07-24) -- .standings normalmente solo tiene borde inferior (fila);
   esta grilla específica también necesita bordes verticales para separar
   columnas de día/hora con claridad. */
.calendar-grid{border:1px solid var(--line);}
.calendar-grid th,.calendar-grid td{border:1px solid var(--line);}
/* Casillas de tamaño uniforme (2026-07-24): altura FIJA sin importar
   cuántos juegos tenga cada día -- los que no caben (ver
   MAX_VISIBLE_SLOTS_IN_CELL en createMenu.js) se ven con "+N más", que abre
   la vista detallada de ese día (openDayDetailModal) en vez de romper la
   uniformidad del calendario completo. overflow:hidden es solo un resguardo
   defensivo (el tope ya lo pone el propio JS al armar el HTML). */
.calendar-month td.calendar-day-cell{vertical-align:top;padding:6px;min-width:130px;height:132px;max-height:132px;overflow:hidden;}
.calendar-month td.calendar-empty-cell{background:rgba(0,0,0,.03);}
.calendar-month .calendar-slot{border-top:1px solid var(--line);margin-top:6px;padding-top:6px;font-size:12px;}
.calendar-month .calendar-slot:first-of-type{border-top:none;margin-top:4px;padding-top:0;}
footer.app-footer{text-align:center;padding:20px;color:#9a9686;font-size:11px;font-family:'JetBrains Mono',monospace;}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--grass);color:#fff;padding:11px 22px;border-radius:8px;font-size:13px;z-index:200;box-shadow:0 10px 26px rgba(0,0,0,.25);animation:fadeUp .25s ease both;}
.small-note{font-size:11px;color:var(--muted);margin-top:4px;}

.scorer-live-badge{display:inline-flex;align-items:center;gap:6px;background:#3a1512;color:#ff8a7a;padding:5px 12px;border-radius:20px;font-size:11px;font-family:'JetBrains Mono',monospace;text-transform:uppercase;}

/* Diamante de béisbol (2026-07-26) -- anotador (chico, interactivo) y
   Proyección Pública (grande, data-diamond-root sin atributos interactivos). */
.diamond-box{position:relative;width:172px;height:172px;flex:0 0 auto;touch-action:none;}
.diamond-box-lg{width:min(38vw,260px);height:min(38vw,260px);}
.diamond-turf{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 50% 55%,var(--grass-light) 0%,var(--grass) 62%,transparent 63%);}
.diamond-shape{position:absolute;top:20%;left:20%;width:65%;height:65%;background:var(--clay);border:2px solid #d8b27a;transform:rotate(45deg);box-shadow:inset 0 0 0 13% var(--grass);}
.diamond-base{position:absolute;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;font-family:'JetBrains Mono',monospace;background:var(--stage2);border:2px solid #4b5568;color:#7c8a9c;user-select:none;}
.diamond-box-lg .diamond-base{width:13%;height:13%;font-size:clamp(10px,1.4vw,16px);}
.diamond-base.occupied{background:var(--gold);border-color:var(--gold);color:var(--ink);}
.diamond-base.home{bottom:8%;left:50%;transform:translate(-50%,50%);width:22px;height:22px;background:var(--chalk);border-color:var(--chalk);}
.diamond-box-lg .diamond-base.home{width:10%;height:10%;}
.diamond-base.first{right:8%;top:50%;transform:translate(50%,-50%);}
.diamond-base.second{top:8%;left:50%;transform:translate(-50%,-50%);}
.diamond-base.third{left:8%;top:50%;transform:translate(-50%,-50%);}
.diamond-tag{position:absolute;font-size:10px;white-space:nowrap;color:var(--chalk);background:rgba(10,12,17,.85);padding:2px 7px;border-radius:6px;font-weight:700;border:1px solid var(--gold-dim);pointer-events:none;}
.diamond-box-lg .diamond-tag{font-size:clamp(10px,1.1vw,14px);}
.diamond-tag.tag-first{right:-6px;top:50%;transform:translate(100%,6px);}
.diamond-tag.tag-second{top:-4px;left:50%;transform:translate(-50%,-100%);}
.diamond-tag.tag-third{left:-6px;top:50%;transform:translate(-100%,6px);}
.diamond-confirm-bubble{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;background:rgba(10,12,17,.95);border:1px solid var(--gold-dim);border-radius:10px;padding:8px 10px;font-size:12px;color:var(--chalk);max-width:220px;z-index:5;}
.play-btn-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin-top:10px;}
.play-btn{background:var(--stage2);color:#e7e9ee;border:1px solid #2a3140;border-radius:8px;padding:12px 8px;cursor:pointer;font-size:12.5px;text-transform:uppercase;letter-spacing:.03em;text-align:center;transition:.12s;overflow-wrap:break-word;word-break:break-word;}
.play-btn:hover{background:var(--gold);color:var(--ink);border-color:var(--gold);transform:translateY(-2px);}
.play-log{max-height:260px;overflow-y:auto;display:flex;flex-direction:column;gap:6px;}
.play-log .entry{background:#f4f1e7;border-left:3px solid var(--clay);padding:7px 10px;border-radius:0 6px 6px 0;font-size:12.5px;}
.play-log .entry .t{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted);margin-right:6px;}

/* Legibilidad de cancha (2026-07-26) -- el anotador y Sustituciones
   Defensivas se usan con luz solar directa, a distancia, y a veces con
   guantes/sosteniendo otra cosa -- estas clases son compartidas con el
   resto de la app (login, comunidad, stats), así que el aumento de
   tamaño se limita a estos dos contextos vía selector de ancestro, en
   vez de agrandar las clases base para toda la app. */
[data-scorer-panel] .eyebrow,
#defensive-section .eyebrow{font-size:15px;}
[data-scorer-panel] .play-btn{font-size:16px;}
[data-scorer-panel] .small-note,
#defensive-section .small-note{font-size:14px;}
[data-scorer-panel] .play-log .entry{font-size:15px;}
[data-scorer-panel] .play-log .entry .t{font-size:13px;}
[data-scorer-panel] .diamond-base{font-size:13px;}
[data-scorer-panel] .diamond-tag{font-size:13px;}
[data-scorer-panel] .diamond-confirm-bubble{font-size:15px;}
[data-scorer-panel] .btn.small,
#defensive-section .btn.small{font-size:13px;}
.big-score{display:flex;align-items:center;justify-content:center;gap:18px;background:var(--stage);border-radius:12px;padding:20px;color:#fff;margin-bottom:14px;}
.big-score .side{text-align:center;}
.big-score .side .tname{font-family:'Anton',sans-serif;font-size:14px;color:#c8d0da;}
.big-score .side .tscore{font-family:'JetBrains Mono',monospace;font-size:42px;color:var(--gold);font-weight:700;}
.big-score .vs{font-family:'JetBrains Mono',monospace;color:#556;font-size:12px;}

.highlight-card{border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#fff;transition:.15s;}
.highlight-card:hover{transform:translateY(-3px);box-shadow:0 12px 24px rgba(0,0,0,.1);}
.highlight-card .hh{background:linear-gradient(135deg,var(--grass),var(--grass-light));color:#fff;padding:14px 16px;}
.highlight-card .hb{padding:14px 16px;}
.event-item{display:flex;gap:14px;padding:14px;border:1px solid var(--line);border-radius:10px;margin-bottom:10px;background:#fff;align-items:center;}
.event-date{background:var(--stage);color:var(--gold);border-radius:8px;padding:8px 12px;text-align:center;font-family:'JetBrains Mono',monospace;min-width:64px;}
.event-date .d{font-size:20px;font-weight:700;line-height:1;}
.event-date .m{font-size:9px;text-transform:uppercase;letter-spacing:.1em;}

/* ---------- paywall / guest ---------- */
.guest-banner{background:linear-gradient(120deg,#1c2e46,var(--stage));border:1px solid #2a3a55;border-radius:12px;padding:16px 20px;margin-bottom:20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;color:#fff;}
.guest-banner .gb-text{flex:1;min-width:220px;}
.guest-banner .gb-text b{color:var(--gold);}
.guest-banner p{margin:2px 0 0;font-size:12.5px;color:#c8d0da;}
.pc-lock{margin-left:auto;text-align:right;color:var(--muted);font-size:18px;}
.lock-panel{position:relative;border-radius:10px;overflow:hidden;border:1px solid var(--line);}
.lock-panel .blurred{filter:blur(5px);opacity:.55;pointer-events:none;user-select:none;}
.lock-panel .lock-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:rgba(10,12,17,.55);text-align:center;padding:20px;}
.lock-panel .lock-overlay .li{font-size:30px;}
.lock-panel .lock-overlay p{color:#fff;font-size:13px;max-width:320px;margin:0;}
.plan-card{background:linear-gradient(135deg,var(--stage),#17203a);color:#fff;border-radius:16px;padding:30px;border:1px solid #2a3a55;}
.plan-card h2{font-size:26px;color:#fff;}
.plan-benefits{list-style:none;padding:0;margin:16px 0;display:grid;gap:10px;}
.plan-benefits li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:#dbe2ea;}
.plan-benefits li .ck{color:var(--gold);font-weight:700;}

/* Asistente de configuración inicial de liga (Fase 6) */
.wizard-modal{max-width:640px;}
/* Paso "juegos" del Generador de Calendario (2026-07-23): la grilla de
   semana/mes necesita mucho más ancho que el resto del asistente (llegar a
   ver 7 días de calendario sin scroll horizontal) -- se aplica SOLO a este
   paso (ver refreshChampionshipWizard), el resto del asistente sigue con
   el ancho angosto de siempre. */
.wizard-modal-wide{max-width:min(1400px,96vw);}
.wizard-header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px;}
.wizard-header h2{font-size:19px;color:var(--grass);margin:0;}
.wizard-progress{display:flex;gap:4px;margin-bottom:18px;flex-wrap:wrap;}
.wp-step{flex:1;min-width:90px;text-align:center;font-size:10.5px;letter-spacing:.03em;text-transform:uppercase;padding:7px 4px;border-radius:6px;background:#f1ede3;color:#a39d8a;font-family:'JetBrains Mono',monospace;}
.wp-step.active{background:var(--grass);color:#fff;font-weight:600;}
.wp-step.done{background:#dcece0;color:var(--grass);}
.wizard-list{max-height:180px;overflow-y:auto;margin:10px 0;border:1px solid var(--line);border-radius:8px;}
.wizard-list-item{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-bottom:1px solid var(--line);font-size:13px;}
.wizard-list-item:last-child{border-bottom:none;}
.wizard-list-item.active{background:rgba(255,201,60,.18);}
.wizard-nav{display:flex;justify-content:space-between;margin-top:18px;gap:8px;flex-wrap:wrap;}
.poll-card{border:1px solid var(--line);border-radius:12px;padding:18px;background:#fff;}
.poll-opt{margin-bottom:8px;}
.poll-opt-btn{width:100%;text-align:left;background:#faf8f2;border:1px solid var(--line);border-radius:8px;padding:10px 12px;cursor:pointer;font-size:13px;transition:.12s;}
.poll-opt-btn:hover{border-color:var(--gold-dim);background:#fff8e6;}
.poll-bar-wrap{width:100%;background:#eee;border-radius:8px;overflow:hidden;height:30px;position:relative;}
.poll-bar{height:100%;background:linear-gradient(90deg,var(--clay),var(--gold));display:flex;align-items:center;padding:0 10px;color:#fff;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;white-space:nowrap;}
.poll-bar-label{display:flex;justify-content:space-between;font-size:12px;margin-bottom:4px;}
.poll-bar-label.mine{color:var(--clay-dark);font-weight:700;}

.upload-slot{display:flex;flex-direction:column;gap:6px;margin-top:6px;}
.upload-slot .upload-status{font-size:11px;font-family:'JetBrains Mono',monospace;color:var(--muted);}

@media(max-width:640px){
  .dp-brand-icon{height:54px;}
  .dp-tagline{display:none;}
  .scoreboard{padding:20px;}
  .sb-stat .num{font-size:21px;}
  .big-score .side .tscore{font-size:30px;}
  .login-logo{height:40px;}
  .login-headline{font-size:28px;}
  .login-hero-slogan{font-size:14px;}
}

/* ============================================================
   PESTAÑA DE LIGAS (2026-08-29, diseño aprobado)
   ------------------------------------------------------------
   Toma la ESTRUCTURA del diseño recibido (encabezado con regla de
   2px, tarjeta grande para tu liga, grilla de ligas bloqueadas,
   modal de acceso restringido) pero con la identidad de ESTA app:
   Anton para los nombres y las cifras, Oswald para los botones,
   JetBrains Mono para las etiquetas, y --chalk/--ink/--crimson.

   El diseño traía Archivo Narrow y un rojo propio (#ec3013). Los dos
   se descartaron a propósito: Archivo Narrow añade una familia a la
   petición de Google Fonts y choca con Anton, que es la voz de los
   títulos en toda la app; y --crimson (#e6483a) es prácticamente el
   mismo tono, así que no se agrega un rojo nuevo al sistema por una
   sola pestaña.

   Lo que SÍ se adopta del diseño, porque mejora: sistema plano (sin
   sombras, jerarquía por reglas y alineación), reglas de 2px, grilla
   auto-fill en vez de un número fijo de columnas, y anillo de foco
   visible.

   Los COLORES DE CADA LIGA no están acá: viajan en línea desde la
   base (primaryColor/secondaryColor/tertiaryColor), porque son la
   identidad de esa liga y no un estilo de la app.
   ============================================================ */

.dp-ligas{padding-bottom:8px;}
.dp-ligas__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.dp-ligas__head h2{font-size:34px;line-height:1;}
/* .dp-ligas__meta se eliminó (2026-08-31): mostraba "N de M ligas con
   acceso". Ese M era el total de ligas del sistema, o sea cuántas están
   usando Draft Pro -- un dato que no se publica mientras el producto
   arranca. Ver la nota larga en renderLigas (browse.js). */
.dp-ligas__intro{margin:0 0 10px;max-width:70ch;}
.dp-ligas__search{margin-bottom:14px;}
.dp-ligas__search input{width:100%;max-width:460px;box-sizing:border-box;padding:11px 13px;border:1px solid var(--line);border-radius:8px;background:var(--white);font-family:'Oswald',sans-serif;font-size:14px;color:var(--ink);}
.dp-ligas__search input:focus-visible{outline:2px solid var(--crimson);outline-offset:2px;border-color:var(--ink);}
.dp-ligas__rule{height:2px;background:var(--ink);margin:16px 0 22px;}
.dp-ligas__section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:30px 0 14px;padding-bottom:10px;border-bottom:2px solid rgba(23,21,15,.35);}
.dp-ligas__section-title{font-family:'Anton',sans-serif;font-size:19px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);}
.dp-ligas__section-note{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
.dp-ligas__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;}
.dp-ligas__foot{margin-top:36px;padding-top:14px;border-top:2px solid rgba(23,21,15,.35);font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}

/* ---- Tarjeta de una liga con acceso ---- */
.dp-liga-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--white);margin-bottom:16px;}
.dp-liga-card__banner{position:relative;min-height:205px;display:flex;align-items:flex-end;}
.dp-liga-card__banner-inner{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;padding:28px;width:100%;box-sizing:border-box;}
.dp-liga-card__logo{width:96px;height:96px;flex:none;object-fit:cover;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.5);}
.dp-liga-card__logo--empty{background:rgba(255,255,255,.16);}
.dp-liga-card__ident{display:flex;flex-direction:column;gap:11px;min-width:0;}
.dp-liga-card__tags{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.dp-liga-card__badge{font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;background:var(--white);color:var(--ink);padding:4px 8px;}
.dp-liga-card__loc{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.9;}
/* "Anton con más aire" (2026-08-29, decisión de la usuaria tras comparar en
   pantalla las tres opciones). El diseño recibido usaba Archivo Narrow y se
   veía más ligero, pero lo que de verdad lo hacía respirar no era la fuente:
   era el espacio. Estos tres valores —separación entre letras, altura de
   línea y tamaño— dan ese aire SIN agregar una cuarta familia tipográfica,
   sin tocar la voz de Anton en el resto de la app, y son reversibles en dos
   líneas. Cambiar a Archivo Narrow habría sido un movimiento grande: Anton
   vive en h1-h4 y en otros nueve sitios, así que habría cambiado TODAS las
   pantallas, y además choca con Oswald (las dos son condensadas).
   Ver el razonamiento completo en el commit de esta pestaña. */
.dp-liga-card__name{font-family:'Anton',sans-serif;font-size:28px;line-height:1.22;letter-spacing:.055em;text-transform:uppercase;text-wrap:balance;}
.dp-liga-card__director{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.06em;opacity:.92;}
.dp-liga-card__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:18px 22px;background:var(--white);border-top:4px solid var(--line);}
.dp-liga-card__stats{display:flex;gap:30px;align-items:flex-end;flex-wrap:wrap;}
.dp-liga-card__figure{font-family:'Anton',sans-serif;font-size:40px;line-height:.9;color:var(--ink);}
.dp-liga-card__figure-label{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:6px;}
.dp-liga-card__players{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.04em;color:rgba(23,21,15,.75);margin-top:6px;}
.dp-liga-card__substats{display:flex;flex-direction:column;gap:8px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(23,21,15,.75);padding-bottom:6px;}
.dp-liga-card__cta{font-family:'Oswald',sans-serif;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;border:none;padding:13px 20px;cursor:pointer;text-align:left;transition:filter .15s;}
.dp-liga-card__cta:hover{filter:brightness(1.12);}

/* ---- Tarjeta de una liga bloqueada ---- */
.dp-liga-locked{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--white);cursor:pointer;transition:border-color .15s;}
.dp-liga-locked:hover{border-color:rgba(23,21,15,.5);}
.dp-liga-locked__banner{position:relative;height:124px;overflow:hidden;}
.dp-liga-locked__veil{position:absolute;inset:0;background:rgba(23,21,15,.35);pointer-events:none;}
.dp-liga-locked__logo{position:absolute;left:16px;bottom:12px;width:76px;height:76px;object-fit:cover;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.45);filter:grayscale(1);opacity:.85;}
.dp-liga-locked__loc{position:absolute;left:104px;bottom:16px;right:52px;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.92);}
.dp-liga-locked__lock{position:absolute;right:12px;top:12px;width:30px;height:30px;display:grid;place-items:center;background:var(--ink);color:var(--chalk);}
.dp-liga-locked__body{padding:16px;}
/* Mismo aire que .dp-liga-card__name, a escala. Si uno respira y el otro
   queda apretado, la pestaña se ve rota, no variada. */
.dp-liga-locked__name{font-family:'Anton',sans-serif;font-size:18px;line-height:1.28;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);text-wrap:pretty;}
.dp-liga-locked__director{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.04em;color:rgba(23,21,15,.7);margin-top:7px;}
.dp-liga-locked__foot{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);}
.dp-liga-locked__figure{font-family:'Anton',sans-serif;font-size:23px;line-height:1;color:var(--ink);}
.dp-liga-locked__figure-label{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:5px;}
.dp-liga-locked__players{font-family:'JetBrains Mono',monospace;font-size:11px;color:rgba(23,21,15,.7);margin-top:5px;}

/* ---- Modal de acceso restringido ---- */
.dp-liga-modal__backdrop{position:fixed;inset:0;background:rgba(23,21,15,.55);display:grid;place-items:center;padding:24px;z-index:60;animation:dpLigaFade .12s ease-out;}
@keyframes dpLigaFade{from{opacity:0}to{opacity:1}}
.dp-liga-modal__box{width:min(460px,100%);background:var(--chalk);border:2px solid var(--ink);padding:26px;box-sizing:border-box;}
.dp-liga-modal__kicker{display:flex;align-items:center;gap:10px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--crimson);}
.dp-liga-modal__title{font-family:'Anton',sans-serif;font-size:23px;line-height:1.24;letter-spacing:.05em;text-transform:uppercase;margin:12px 0 10px;color:var(--ink);}
.dp-liga-modal__data{font-family:'JetBrains Mono',monospace;font-size:12px;line-height:1.7;color:rgba(23,21,15,.75);}
.dp-liga-modal__sep{height:1px;background:rgba(23,21,15,.2);margin:16px 0;}
.dp-liga-modal__text{font-size:14px;line-height:1.6;color:rgba(23,21,15,.85);margin:0 0 10px;}
.dp-liga-modal__hint{font-family:'JetBrains Mono',monospace;font-size:11px;line-height:1.7;color:var(--muted);margin:0;}
.dp-liga-modal__actions{display:flex;gap:10px;margin-top:20px;}
.dp-liga-modal__close{font-family:'Oswald',sans-serif;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;background:transparent;color:var(--ink);border:1px solid rgba(23,21,15,.4);padding:12px 18px;cursor:pointer;transition:background .15s;}
.dp-liga-modal__close:hover{background:rgba(23,21,15,.07);}

/* Anillo de foco visible -- se adopta del diseño recibido. No es
   decoración: sin esto, quien navega con teclado no sabe dónde está
   parado, y las tarjetas bloqueadas son role="button" con tabindex. */
.dp-liga-locked:focus-visible,.dp-liga-card__cta:focus-visible,.dp-liga-modal__close:focus-visible{outline:2px solid var(--crimson);outline-offset:2px;}

@media(max-width:640px){
  .dp-ligas__head h2{font-size:26px;}
  .dp-ligas__search input{max-width:none;}
  .dp-liga-card__banner{min-height:150px;}
  .dp-liga-card__name{font-size:22px;line-height:1.2;}
  .dp-liga-card__logo{width:72px;height:72px;}
  .dp-liga-card__figure{font-size:32px;}
  .dp-ligas__grid{grid-template-columns:1fr;}
}