/* =====================================================================
   SKIN: Serie del Rey 2026
   Look de postemporada — swap del amarillo canario y morados por
   dorado metálico antique (highlight/mid/sombra) tomado del logo
   oficial de la Serie del Rey 2026.
   Navy y rojo se conservan del skin LMB Oficial.
   ===================================================================== */
:root{
  /* Azules unificados al hue LMB (H≈234° indigo-navy).
     --bg (deep bg) · --surface (azul marino lmb) · --surface2 (azul 2). */
  --bg:#0F1229; --surface:#171a35; --surface2:#2E3455; --line:rgba(150,160,195,.16);
  --accent:#EB0029; --accent-ink:#FFFFFF; --red:#EB0029;
  --green:#2FA64C; --text:#F5F7FA; --muted:#8E99BB;

  /* Dorado metálico Serie del Rey (highlight → mid → sombra) */
  --gold-hi:#F0D48A;         /* highlight cálido, corona superior del logo */
  --gold:#C9A25C;            /* mid antique gold — text/border principal */
  --gold-dk:#8F7233;         /* sombra profunda, base inferior del gradiente */
  --pts:#E5C77A;             /* números y puntos (contraste alto sobre navy) */

  /* Gradiente metálico premium para fondos de badges/medallas/hero */
  --gold-grad:linear-gradient(180deg,#F0D48A 0%,#C9A25C 55%,#8F7233 100%);

  /* Slots antes ocupados por lavender: repurpose como tonos cálidos claros */
  --red-cherry:#E63946;      /* rojo cereza LMB (sin cambio) */
  --lavender-soft:#E8D08A;   /* filas discretas (ex-morado claro) */
  --lavender:#D4B674;        /* tags destacados (ex-morado medio) */

  /* Amarillo warning para .field-err. Rojo #EB0029 (default --accent) se
     pierde contra el bg azul/verde saturado del skin — el amarillo canary
     lee con contraste natural sobre navy y verde. */
  --warn:#F2B33D;

  --font:'Proxima Nova','Sofia Sans','Montserrat',system-ui,-apple-system,sans-serif;
}
body{background:#00101B radial-gradient(1200px 600px at 50% -10%, #003A62, #00101B);}
/* Bg del skin con overlay 25% negro para amortiguar la saturación y darle
   respiración al contenido (inputs blancos, texto blanco, alertas amarillas). */
.phone::before{
  background:
    linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.25)) center/cover no-repeat,
    image-set(
      url('../../img/skins/serie-del-rey/bg.webp') type('image/webp'),
      url('../../img/skins/serie-del-rey/bg.jpg') type('image/jpeg')
    ) center/cover no-repeat,
    var(--bg);
}

/* Partner=caliente: shift completo del hue LMB (H≈234° indigo-navy) al hue
   Caliente (H≈4° rojo). Los 3 tokens core del skin quedan reemplazados,
   propagando el cambio a todos los 37+ usos de --bg/--surface/--surface2 en el CSS
   (cards, sheets, avatar, minibtn, sr-team base, etc.).
   Selector body[data-partner="caliente"] para que las custom properties cascadeen
   a #sheet-root y #toast-root (que viven fuera de #app.phone). La variante
   default sigue con azules LMB.
   Nombres acuñados: "rojo profundo caliente", "negro caliente", "negro elevated". */
/* body bg en modo Caliente: negro profundo para llenar el letterbox de los
   lados en viewports más anchos que 390px (iPhones Plus/Pro Max ~430px).
   Sin esto se veía la franja azul del skin base a los lados del .phone. */
body[data-partner="caliente"]{
  background:#0d0000;
  --bg:       #1A0605;   /* rojo profundo caliente — deep bg, analog de azul profundo lmb */
  --surface:  #0C0303;   /* NEGRO caliente — cards/sercard/sheet/bnav/hdr (hint rojo imperceptible) */
  --surface2: #2A2A2A;   /* negro elevated — avatar/minibtn/sr-team/pk-team/pk-game/statcell (+16pp lightness sobre surface para leerse sin bordes) */
  --muted:    #ffffff;   /* muted a blanco (default #8E99BB gris azul no leía sobre negro rojizo) */
  /* Amarillo mostaza-naranja saturado tipo caliente.mx (highlights de momios
     ganadores). Reemplaza el dorado antique cremoso del skin Serie del Rey
     por una palette con más pop, consistente con el look sports-book. */
  --gold-hi:  #FFC04D;   /* highlight brillante (badges hero, corona) */
  --gold:     #F5A623;   /* mostaza saturado — text/borders principales */
  --gold-dk:  #B47810;   /* mostaza sombra profunda */
  --pts:      #F5A623;   /* números/puntos y momios destacados */
  --warn:     #F5A623;   /* warnings/toasts */
  /* Gradient mostaza reemplaza el gradient dorado antique del skin base.
     Propaga a .badge-gold, .lbrow .rk.g (ranking #1), .sponsor border-box
     y a los welcome CTAs que usan var(--gold-grad). */
  --gold-grad:linear-gradient(180deg, #F0AB35 0%, #C87F0F 100%);
}
/* Pass D: sin bordes de color (transparent) para look 100% clean-flat. */
body[data-partner="caliente"] .card,
body[data-partner="caliente"] .sercard,
body[data-partner="caliente"] .sheet,
body[data-partner="caliente"] .pf-stat,
body[data-partner="caliente"] .gcard,
body[data-partner="caliente"] .mktrow,
body[data-partner="caliente"] .breakdown,
body[data-partner="caliente"] .statcell,
body[data-partner="caliente"] .toast,
body[data-partner="caliente"] .bet-widget{
  border-color:transparent;
}
/* Pass C flat total: neutralizar drop-shadows en surfaces principales.
   Preservados: .cobrand-strip (glow rojo intencional), .chip-crest ring
   (identidad del equipo), livePulse keyframe (indicador EN VIVO),
   focus states (accessibility). */
body[data-partner="caliente"] .sheet,
body[data-partner="caliente"] .toast,
body[data-partner="caliente"] .card,
body[data-partner="caliente"] .sercard,
body[data-partner="caliente"] .pf-stat,
body[data-partner="caliente"] .breakdown,
body[data-partner="caliente"] .bet-widget,
body[data-partner="caliente"] .pf-avatar{
  box-shadow:none;
}
/* Reforzar border-top del sheet (originalmente team-color); mantener team-color
   pero con el rojo como fallback si no hay team-color set. */
body[data-partner="caliente"] .sheet{
  border-top-color: var(--team-color, #DA291C);
}
/* Bet-widget en modo Caliente: rojo granate/vino tinto (~#A32121) inspirado en
   los headers de sección de caliente.mx (MIS FAVORITOS, EN VIVO, LIGA MX). Más
   apagado que PANTONE 485 C — vibe "casino sports book" en vez de brand pop.
   Sin border-left accent (redundante), border oscuro sutil, hover deeper.
   Contraste texto: blanco puro + gold-hi para <b> favorito + blanco alfa meta. */
body[data-partner="caliente"] .bet-widget{
  background:#A32121;
  border-color:color-mix(in srgb, #000 25%, #A32121);
  border-left:none;
  padding-left:14px;
}
body[data-partner="caliente"] .bet-widget:hover,
body[data-partner="caliente"] .bet-widget:active{
  background:#7A1818;
  border-color:color-mix(in srgb, #000 30%, #7A1818);
}
body[data-partner="caliente"] .bet-widget-line{color:#fff;}
body[data-partner="caliente"] .bet-widget-line b{color:#F5A623;}
body[data-partner="caliente"] .bet-widget-meta{color:rgba(255,255,255,.78);}

/* Bnav + hdr con gradient sutil top→bottom (textura chunky sin salirse del negro).
   Inspirado en el "brushed metal" de los headers de caliente.mx — aquí en versión
   oscura porque nuestro fondo halftone es rojo/negro, no plateado. */
body[data-partner="caliente"] .bnav,
body[data-partner="caliente"] .hdr{
  background:linear-gradient(180deg, #1A1A1A 0%, #0C0303 100%);
}

/* Pass B+D look Caliente: 100% rectangular (border-radius: 0) como caliente.mx.
   Se preservan pills (.handle drag-indicator del sheet, avatares circulares,
   badges tipo .badge-final/.chip-crest/.badge-gold) porque son UI elements
   designed para ser redondos. */
body[data-partner="caliente"] .sheet,
body[data-partner="caliente"] .card,
body[data-partner="caliente"] .sercard,
body[data-partner="caliente"] .breakdown,
body[data-partner="caliente"] .pf-stat,
body[data-partner="caliente"] .gcard,
body[data-partner="caliente"] .mktrow,
body[data-partner="caliente"] .code,
body[data-partner="caliente"] .segmented,
body[data-partner="caliente"] .age-gate,
body[data-partner="caliente"] .cobrand-strip,
body[data-partner="caliente"] .sponsor-strip,
body[data-partner="caliente"] .bet-widget,
body[data-partner="caliente"] .bet-widget-plate,
body[data-partner="caliente"] .statcell,
body[data-partner="caliente"] .pk-team,
body[data-partner="caliente"] .pk-game,
body[data-partner="caliente"] .addbtn,
body[data-partner="caliente"] .toast,
body[data-partner="caliente"] .slot,
body[data-partner="caliente"] .chip,
body[data-partner="caliente"] .pf-pass[open] summary{border-radius:0;}

/* .sr-team con gradient plateado brushed-metal tipo rows de partido de caliente.mx.
   Texto negro para contraste. .won ligeramente más brillante para distinguir.
   Radius chico (4px) — caliente.mx sí tiene radius sutil en rows plateadas. */
body[data-partner="caliente"] .sr-team{
  background:linear-gradient(180deg, #EAEAEA 0%, #B0B0B0 100%);
  color:#000;
  border-radius:4px;
}
body[data-partner="caliente"] .sr-team.won{
  background:linear-gradient(180deg, #F5F5F5 0%, #C8C8C8 100%);
}
body[data-partner="caliente"] .sr-team .sr-nm,
body[data-partner="caliente"] .sr-team .sr-w{color:#000;}

/* Botón "Predecir esta serie" (.sr-pickbtn) con look de momio destacado
   caliente.mx: gradient mostaza + texto negro bold uppercase, rectangular. */
body[data-partner="caliente"] .sr-pickbtn{
  background:linear-gradient(180deg, #F0AB35 0%, #C87F0F 100%);
  color:#000;
  border:none;
  border-radius:0;
  padding:11px 12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
body[data-partner="caliente"] .sr-pickbtn:hover,
body[data-partner="caliente"] .sr-pickbtn:active{
  background:linear-gradient(180deg, #FFC04D 0%, #D68A15 100%);
}

/* --- Look estándar mostaza para todos los CTAs de la app -------------- */
/* Kingcard "Camino al Rey": subir el hint mostaza del gradient existente. */
body[data-partner="caliente"] .kingcard{
  background:linear-gradient(135deg,
    color-mix(in srgb, #F5A623 22%, #0C0303) 0%,
    #0C0303 70%);
}
/* Minibtns "Mi serie" / "Bracket" dentro del kingcard + cualquier .minibtn.
   Look momio destacado igual que .sr-pickbtn. */
body[data-partner="caliente"] .minibtn{
  background:linear-gradient(180deg, #F0AB35 0%, #C87F0F 100%);
  color:#000;
  border:none;
  border-radius:0;
  padding:8px 13px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}
body[data-partner="caliente"] .minibtn:hover,
body[data-partner="caliente"] .minibtn:active{
  background:linear-gradient(180deg, #FFC04D 0%, #D68A15 100%);
}

/* Btn-solid (CTAs principales: welcome onboard/login, pickem "Guardar",
   roster "Guardar alineación"). Especificidad extra para vencer overrides
   por [data-go="X"] en .welcome/.onb. */
body[data-partner="caliente"] .btn-solid,
body[data-partner="caliente"] .welcome .btn-solid[data-go="onboard"],
body[data-partner="caliente"] .welcome .btn-solid[data-go="login"],
body[data-partner="caliente"] .onb .btn-solid{
  background:linear-gradient(180deg, #F0AB35 0%, #C87F0F 100%);
  color:#000;
  border-radius:0;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}
body[data-partner="caliente"] .btn-solid:hover,
body[data-partner="caliente"] .btn-solid:active{
  background:linear-gradient(180deg, #FFC04D 0%, #D68A15 100%);
}

/* .mktrow (marketplace de jugadores) con gradient plateado tipo .sr-team. */
body[data-partner="caliente"] .mktrow{
  background:linear-gradient(180deg, #EAEAEA 0%, #B0B0B0 100%);
  border-radius:4px;
}
body[data-partner="caliente"] .mktrow .nm,
body[data-partner="caliente"] .mktrow .sub,
body[data-partner="caliente"] .mktrow .fppg,
body[data-partner="caliente"] .mktrow .price{color:#000;}
body[data-partner="caliente"] .mktrow.in-roster{
  background:linear-gradient(180deg, #F5F5F5 0%, #C8C8C8 100%);
}
body[data-partner="caliente"] .mktrow.dim{opacity:.4;filter:grayscale(.5);}

/* .segmented (tabs toggle) con brushed metal + active tab mostaza. */
body[data-partner="caliente"] .segmented{
  background:linear-gradient(180deg, #EAEAEA 0%, #B0B0B0 100%);
  border-radius:4px;
  padding:0;
}
body[data-partner="caliente"] .segmented button{
  color:#333;
  font-weight:800;
  text-transform:uppercase;
  padding:8px 10px;
  border-radius:0;
}
body[data-partner="caliente"] .segmented button.on{
  background:linear-gradient(180deg, #F0AB35 0%, #C87F0F 100%);
  color:#000;
}

/* .leaderrow (Líderes de la Semana / Líderes de la Serie) con gradient
   plateado. Match del look de rows de partidos/equipos de caliente.mx. */
body[data-partner="caliente"] .leaderrow{
  background:linear-gradient(180deg, #EAEAEA 0%, #B0B0B0 100%);
  border-radius:4px;
  border-bottom:none;
  padding:10px 12px;
  margin-bottom:2px;
}
body[data-partner="caliente"] .leaderrow:last-child{margin-bottom:0;}
body[data-partner="caliente"] .leaderrow .nm,
body[data-partner="caliente"] .leaderrow .sub,
body[data-partner="caliente"] .leaderrow .p{color:#000;}

/* .pk-mvp select ("— Ninguno —") en el sheet Pick 'Em: default nativo tenía
   fondo blanco que chocaba con el design system negro. Alineado a surface2 +
   texto blanco + arrow visible. */
body[data-partner="caliente"] #pk-mvp{
  background:#2A2A2A;
  color:#fff;
  border:1px solid #444;
  padding:10px 12px;
  font-size:13px;
  appearance:none;
  -webkit-appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, #F5A623 50%),
                   linear-gradient(135deg, #F5A623 50%, transparent 50%);
  background-position:calc(100% - 18px) center, calc(100% - 13px) center;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
}

/* Fondo rojo/negro halftone (override del bg del skin base). */
body[data-partner="caliente"] .phone::before{
  background:
    linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.25)) center/cover no-repeat,
    image-set(
      url('../../img/partners/caliente/bg.webp') type('image/webp'),
      url('../../img/partners/caliente/bg.jpg') type('image/jpeg')
    ) center/cover no-repeat,
    #0d0000;
}

/* ---- Toques metálicos con --gold-grad (elementos hero) ---- */

/* Badge pill dorado (Welcome + tags premium): fondo gradient + texto oscuro */
.badge-gold{
  background:var(--gold-grad);
  color:#1E2A3A;
  border-color:var(--gold-hi);
}

/* Ranking #1 leaderboard: número con relleno metálico (background-clip:text) */
.lbrow .rk.g{
  background:var(--gold-grad);
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color:transparent;
          color:transparent;
}

/* Tarjeta sponsor: borde metálico gradient + hairline highlight arriba */
.sponsor{
  border-color:transparent;
  background:
    linear-gradient(145deg,color-mix(in srgb,var(--gold) 12%,var(--surface)),var(--surface)) padding-box,
    var(--gold-grad) border-box;
  border:1.5px solid transparent;
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--gold-hi) 45%,transparent);
}

/* Botón "Ya tengo cuenta" en Welcome: de lavanda eléctrico a dorado metálico */
.welcome .btn-solid[data-go="login"]{
  background:var(--gold-grad);
  color:#1E2A3A;
}

/* Hero de Welcome:
   - Playoffs 2026 (hero-skin-logo) queda como season badge chico arriba
   - Beisbol Fantasy (hero) es el logo protagonista abajo
   - h1 "FANTASY LMB" se oculta (redundante con el logo BEISBOL FANTASY) */
.welcome .badge-lav{display:none;}
.welcome .hero-skin-logo{
  display:block;
  width:156px;
  height:auto;
  margin:0 auto -8px;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.45));
}
.welcome img.hero{
  width:286px;
  margin:18px 0 4px;
  filter:drop-shadow(0 10px 28px rgba(0,0,0,.55));
}
.welcome .brand-h1{display:none;}

/* Header crest: swap del logo LMB-Banorte por el logo Beisbol Fantasy */
.hdr img.crest{display:none;}
.hdr img.crest-skin{
  display:block;
  width:44px;
  height:44px;
  object-fit:contain;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.4));
}
/* Avatar de perfil en el header: fondo rojo LMB, letra blanca */
.hdr .avatar{background:var(--red);color:#fff;border-color:transparent;}

/* Logo Playoffs 2026 arriba del "¡Hola, X!" en la home del modo playoff.
   Margen negativo bottom cierra el gap contra el saludo. */
.round-logo{
  display:block;
  margin:0 auto -18px;
  width:120px;
  height:auto;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.45));
}

/* Bottom nav + header: flat (sin la transparencia por defecto que hace mix con --bg
   y con backdrop-filter). Ambos usan --surface = azul marino lmb ya. */
.bnav,.hdr{background:var(--surface);}
/* .card, .sercard, .sheet, .avatar, .minibtn, .sr-team ya heredan del hue LMB
   por el override de --surface/--surface2 en :root. Sin overrides puntuales. */