/* ==========================================================================
   Sistema visual comun (Bloque 18). Oscuro, sobrio, mobile-first.
   TODO lo ajustable vive en :root. Los colores de rareza son solo ACENTO
   (bordes, etiquetas, brillos discretos), nunca fondos completos.
   ========================================================================== */
:root {
  /* superficies */
  --bg: #0d0f15;
  --bg-elev: #131722;
  --surf: #181d2a;
  --surf-2: #212839;
  --borde: #2b3347;
  --borde-fuerte: #3b4560;
  /* texto */
  --texto: #eceff7;
  --texto-2: #a6aec4;
  --texto-3: #7e879f;
  /* acento de marca (frio, no dorado) */
  --acento: #7d95ff;
  --acento-fuerte: #5b76f5;
  --acento-tinte: rgba(125, 149, 255, .14);
  /* semanticos */
  --ok: #3fcf8e;      --ok-tinte: rgba(63, 207, 142, .12);
  --error: #ff6b6b;   --error-tinte: rgba(255, 107, 107, .12);
  --aviso: #f2b84b;   --aviso-tinte: rgba(242, 184, 75, .12);
  --info: #5ab0ff;    --info-tinte: rgba(90, 176, 255, .12);
  /* rareza (acentos) */
  --r-comun: #a3abbd;
  --r-rara: #4da3ff;
  --r-epica: #a878ff;
  --r-legendaria: #e6b34d;
  /* forma */
  --radio-s: 8px; --radio: 12px; --radio-l: 18px;
  --sombra: 0 6px 22px rgba(0, 0, 0, .35);
  --sombra-s: 0 2px 8px rgba(0, 0, 0, .3);
  /* espaciado */
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px;
  /* tipografia (fuentes del sistema: cero descargas) */
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --t-s: .8125rem; --t-m: 1rem; --t-l: 1.25rem; --t-xl: 1.6rem;
  /* controles */
  --alto-control: 48px;
  --alto-nav: 64px;
  --ancho-max: 720px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--texto); font-family: var(--fuente);
  font-size: var(--t-m); line-height: 1.45; -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
img { max-width: 100%; }
a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 var(--e3); font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: var(--t-xl); } h2 { font-size: var(--t-l); margin-top: var(--e5); } h3 { font-size: var(--t-m); }
p { margin: 0 0 var(--e3); }
small, .peq { font-size: var(--t-s); color: var(--texto-2); }
.suave { color: var(--texto-2); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 4px; }

/* ---------- estructura ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: var(--e3);
  min-height: 52px; padding: 0 var(--e4); padding-top: env(safe-area-inset-top);
  background: rgba(13, 15, 21, .92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--borde);
}
.marca { font-weight: 700; color: var(--texto); letter-spacing: .02em; }
.marca:hover { text-decoration: none; }
.marca span { color: var(--acento); }
.cab-liga { color: var(--texto-2); font-size: var(--t-s); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cab-espacio { flex: 1; }
.cab-coins { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; font-size: var(--t-s);
  font-variant-numeric: tabular-nums; color: var(--r-legendaria); white-space: nowrap; }
.cab-coins svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.pagina { max-width: var(--ancho-max); margin: 0 auto; padding: var(--e4) var(--e4) calc(var(--e6) + var(--alto-nav)); }
.pagina.centrada { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; }
.pagina-cabecera { margin-bottom: var(--e4); }
.pagina-cabecera p { color: var(--texto-2); margin: 0; }
.volver { display: inline-flex; align-items: center; gap: var(--e1); min-height: 40px; color: var(--texto-2); font-size: var(--t-s); }

/* ---------- navegacion principal ---------- */
.navbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; justify-content: space-around;
  height: calc(var(--alto-nav) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: rgba(19, 23, 34, .97); border-top: 1px solid var(--borde);
}
.nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--texto-3); font-size: .72rem; font-weight: 600; letter-spacing: .02em; min-width: 0;
}
.nav-item:hover { text-decoration: none; color: var(--texto-2); }
.nav-item svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-item.activo { color: var(--acento); }
.nav-item.activo::before { content: ""; position: absolute; margin-top: calc(-1 * var(--alto-nav) + 1px); width: 28px; height: 3px; border-radius: 0 0 3px 3px; background: var(--acento); }
.nav-item { position: relative; }

@media (min-width: 900px) {
  body.con-nav { padding-left: 208px; }
  .navbar {
    top: 0; bottom: 0; right: auto; width: 208px; height: auto; flex-direction: column; justify-content: flex-start;
    padding: 76px var(--e3) var(--e4); gap: var(--e1); border-top: 0; border-right: 1px solid var(--borde);
  }
  .nav-item { flex: none; flex-direction: row; justify-content: flex-start; gap: var(--e3); min-height: 46px; padding: 0 var(--e3);
    border-radius: var(--radio-s); font-size: var(--t-m); }
  .nav-item.activo { background: var(--acento-tinte); }
  .nav-item.activo::before { display: none; }
  .cabecera { padding-left: calc(208px + var(--e4)); position: fixed; left: 0; right: 0; }
  body.con-nav .cabecera { padding-left: var(--e4); left: 208px; }
  .cabecera { top: 0; }
  body.con-nav .pagina, body.sin-nav .pagina { padding-top: 76px; }
  .pagina { padding-bottom: var(--e6); }
}

/* ---------- tarjetas y superficies ---------- */
.card { background: var(--surf); border: 1px solid var(--borde); border-radius: var(--radio); padding: var(--e4); margin-bottom: var(--e3); }
.card.elev { box-shadow: var(--sombra-s); }
.card h2, .card h3 { margin-top: 0; }
.card-titulo { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); margin-bottom: var(--e3); }
.card-titulo h2 { margin: 0; font-size: 1.05rem; }
a.card, a.card:hover { color: inherit; text-decoration: none; display: block; }
a.card:hover { border-color: var(--borde-fuerte); background: var(--surf-2); }
.fila { display: flex; align-items: center; gap: var(--e3); }
.fila.entre { justify-content: space-between; }
.fila.envolver { flex-wrap: wrap; }
.pila > * + * { margin-top: var(--e3); }
.rejilla-acciones { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e3); }
.dato { font-size: var(--t-l); font-weight: 700; font-variant-numeric: tabular-nums; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--e3); }
.stat { background: var(--surf-2); border-radius: var(--radio-s); padding: var(--e3); }
.stat small { display: block; }

/* ---------- botones ---------- */
.btn, button {
  font-family: inherit; font-size: var(--t-m); font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  min-height: var(--alto-control); padding: 0 var(--e5); border-radius: var(--radio); border: 1px solid var(--borde-fuerte);
  background: var(--surf-2); color: var(--texto); text-decoration: none; transition: background .15s, border-color .15s;
}
.btn:hover, button:hover { background: #2a3248; text-decoration: none; }
.btn.primario, button.primario { background: var(--acento-fuerte); border-color: var(--acento-fuerte); color: #fff; }
.btn.primario:hover, button.primario:hover { background: var(--acento); border-color: var(--acento); }
.btn.peligro, button.peligro { background: transparent; border-color: var(--error); color: var(--error); }
.btn.peligro:hover, button.peligro:hover { background: var(--error-tinte); }
.btn.suave, button.suave { background: transparent; border-color: var(--borde); color: var(--texto-2); }
.btn.bloque, button.bloque { display: flex; width: 100%; }
.btn.s, button.s { min-height: 40px; padding: 0 var(--e4); font-size: var(--t-s); }
.btn[disabled], button[disabled], .btn.deshabilitado { opacity: .45; cursor: not-allowed; pointer-events: none; }
button.cargando { opacity: .7; cursor: progress; }
form.en-linea { display: inline; }

/* ---------- formularios ---------- */
.campo { display: block; margin-bottom: var(--e4); }
.campo > span, .campo > label { display: block; margin-bottom: var(--e1); font-size: var(--t-s); font-weight: 600; color: var(--texto-2); }
input[type=text], input[type=password], input[type=number], input[type=email], select, textarea {
  width: 100%; min-height: var(--alto-control); padding: 10px var(--e3); font: inherit; color: var(--texto);
  background: var(--bg-elev); border: 1px solid var(--borde-fuerte); border-radius: var(--radio); appearance: none; -webkit-appearance: none;
}
select { background-image: linear-gradient(45deg, transparent 50%, var(--texto-2) 50%), linear-gradient(135deg, var(--texto-2) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 36px; }
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--acento); outline: none; box-shadow: 0 0 0 3px var(--acento-tinte); }
input[type=file] { width: 100%; padding: var(--e3); background: var(--bg-elev); border: 1px dashed var(--borde-fuerte); border-radius: var(--radio); color: var(--texto-2); }
input[type=file]::file-selector-button { margin-right: var(--e3); min-height: 40px; padding: 0 var(--e4); border-radius: var(--radio-s); border: 1px solid var(--borde-fuerte); background: var(--surf-2); color: var(--texto); font: inherit; }
input[type=checkbox], input[type=radio] { width: 22px; height: 22px; accent-color: var(--acento); vertical-align: middle; }
.opcion { display: inline-flex; align-items: center; gap: var(--e2); min-height: 44px; padding-right: var(--e3); }
.aviso-campo { font-size: var(--t-s); color: var(--texto-2); margin-top: var(--e1); }

/* ---------- mensajes ---------- */
.alert { border-radius: var(--radio); padding: var(--e3) var(--e4); margin-bottom: var(--e4); border: 1px solid; font-size: .95rem; overflow-wrap: anywhere; }
.alert.ok { background: var(--ok-tinte); border-color: var(--ok); }
.alert.error { background: var(--error-tinte); border-color: var(--error); }
.alert.aviso { background: var(--aviso-tinte); border-color: var(--aviso); }
.alert.info { background: var(--info-tinte); border-color: var(--info); }
.alert strong:first-child { margin-right: var(--e1); }

/* ---------- etiquetas ---------- */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: .72rem; font-weight: 700;
  letter-spacing: .03em; background: var(--surf-2); color: var(--texto-2); border: 1px solid var(--borde); white-space: nowrap; }
.badge.ok { color: var(--ok); border-color: var(--ok); background: var(--ok-tinte); }
.badge.error { color: var(--error); border-color: var(--error); background: var(--error-tinte); }
.badge.aviso { color: var(--aviso); border-color: var(--aviso); background: var(--aviso-tinte); }
.badge.acento { color: var(--acento); border-color: var(--acento); background: var(--acento-tinte); }
.badge.r-comun { color: var(--r-comun); border-color: var(--r-comun); }
.badge.r-rara { color: var(--r-rara); border-color: var(--r-rara); }
.badge.r-epica { color: var(--r-epica); border-color: var(--r-epica); }
.badge.r-legendaria { color: var(--r-legendaria); border-color: var(--r-legendaria); }
.punto-rareza { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* ---------- filtros / chips ---------- */
.chips { display: flex; gap: var(--e2); overflow-x: auto; padding: 2px 0 var(--e2); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--e4); border-radius: 999px; border: 1px solid var(--borde);
  background: var(--surf); color: var(--texto-2); font-size: .9rem; font-weight: 600; }
.chip:hover { text-decoration: none; border-color: var(--borde-fuerte); }
.chip.activo { background: var(--acento-tinte); color: var(--acento); border-color: var(--acento); }

/* ---------- progreso ---------- */
.barra { height: 8px; border-radius: 999px; background: var(--surf-2); overflow: hidden; }
.barra > i { display: block; height: 100%; border-radius: inherit; background: var(--acento); }
.desglose { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e2) var(--e4); margin-top: var(--e3); font-size: var(--t-s); }

/* ---------- ranking ---------- */
.rank { list-style: none; margin: 0; padding: 0; }
.rank li { display: flex; align-items: center; gap: var(--e3); padding: var(--e3); border-radius: var(--radio); background: var(--surf-2); margin-bottom: var(--e2); }
.rank .pos { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; font-weight: 800; background: var(--bg-elev); border: 1px solid var(--borde-fuerte); font-variant-numeric: tabular-nums; }
.rank li.p1 .pos { color: var(--r-legendaria); border-color: var(--r-legendaria); }
.rank li.p2 .pos { color: #cfd6e6; border-color: #cfd6e6; }
.rank li.p3 .pos { color: #d29a6a; border-color: #d29a6a; }
.rank .nombre { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank .puntos { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.rank .puntos small { display: block; font-weight: 400; }
.rank li.yo { outline: 2px solid var(--acento); background: var(--acento-tinte); }
.flecha { font-size: .8rem; font-weight: 800; margin-left: 2px; }
.flecha.subida { color: var(--ok); } .flecha.bajada { color: var(--error); }

/* ---------- grid de cartas ---------- */
.grid-cartas { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
@media (min-width: 600px) { .grid-cartas { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 14px; } }
/* la carta de las rejillas es el componente comun de carta.css (B27) */

/* ---------- estados vacios ---------- */
.vacio { text-align: center; padding: var(--e6) var(--e4); border: 1px dashed var(--borde-fuerte); border-radius: var(--radio); color: var(--texto-2); }
.vacio strong { display: block; color: var(--texto); font-size: 1.05rem; margin-bottom: var(--e1); }
.vacio .btn { margin-top: var(--e3); }

/* ---------- listas ---------- */
.lista { list-style: none; margin: 0; padding: 0; }
.lista > li { display: flex; align-items: center; gap: var(--e3); padding: var(--e3) 0; border-bottom: 1px solid var(--borde); }
.lista > li:last-child { border-bottom: 0; }
.lista .crece { flex: 1; min-width: 0; }
details.desplegable { background: var(--surf); border: 1px solid var(--borde); border-radius: var(--radio); margin-bottom: var(--e3); }
details.desplegable > summary { list-style: none; cursor: pointer; padding: var(--e3) var(--e4); min-height: 48px; display: flex; align-items: center; justify-content: space-between; font-weight: 600; }
details.desplegable > summary::-webkit-details-marker { display: none; }
details.desplegable > summary::after { content: "▾"; color: var(--texto-2); }
details.desplegable[open] > summary::after { content: "▴"; }
details.desplegable > .cuerpo { padding: 0 var(--e4) var(--e4); }

/* cuenta de pruebas (solo desarrollo) */
.cuenta-pruebas { font-size: .62rem; letter-spacing: .08em; white-space: nowrap; }

/* ---------- creador de cartas (B27) ---------- */
.creador { display: grid; gap: var(--e4); }
.creador[hidden] { display: none; }   /* el selector FOTO/VIDEO oculta el formulario con [hidden] */
.creador-preview { width: min(64vw, 260px); margin: 0 auto var(--e2); }
.creador-nota { margin: calc(var(--e2) * -1) 0 var(--e3); }
@media (min-width: 720px) {
  .creador { grid-template-columns: 260px 1fr; align-items: start; }
  .creador-preview { width: 100%; margin: 0; position: sticky; top: 72px; }
}
.paleta { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 8px; margin: 0; padding: 0; border: 0; }
.paleta label { position: relative; display: block; cursor: pointer; }
.paleta input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.paleta .muestra { display: block; aspect-ratio: 1; border-radius: 50%; border: 2px solid transparent;
  box-shadow: inset 0 2px 3px rgba(255,255,255,.55), inset 0 -3px 5px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.4); }
.paleta input:checked + .muestra { border-color: var(--texto); outline: 2px solid var(--acento); outline-offset: 2px; }
.paleta input:focus-visible + .muestra { outline: 2px solid var(--texto); outline-offset: 2px; }
.paleta input:disabled + .muestra { opacity: .45; cursor: not-allowed; }
.sobre-preview { width: 150px; aspect-ratio: 5 / 8; border-radius: 10px; position: relative; overflow: hidden; margin: 0 auto;
  background: linear-gradient(145deg, var(--s-claro) 0%, var(--s-base) 38%, var(--s-claro) 55%, var(--s-oscuro) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 0 8px 22px rgba(0,0,0,.45); }
.sobre-preview img { position: absolute; inset: 14% 10% 22%; width: 80%; height: 64%; object-fit: cover; border-radius: 6px;
  box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
.sobre-preview span { position: absolute; left: 8%; right: 8%; bottom: 7%; text-align: center; font-weight: 800; font-size: .78rem;
  color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.selector-cartas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); }
.selector-cartas label { display: flex; align-items: center; gap: var(--e3); min-height: 52px; padding: var(--e2) var(--e3); background: var(--surf-2); border: 1px solid var(--borde); border-radius: var(--radio-s); cursor: pointer; }
.selector-cartas label:has(input:checked) { border-color: var(--acento); background: var(--acento-tinte); }

/* ---------- tablas responsive (participantes, etc.) ---------- */
.tabla { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabla th { text-align: left; color: var(--texto-2); font-size: var(--t-s); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--borde); }
.tabla td { padding: 10px 8px; border-bottom: 1px solid var(--borde); }
.tabla-scroll { overflow-x: auto; }

/* ---------- varios ---------- */
.saldo-grande { display: flex; align-items: baseline; gap: var(--e2); }
.saldo-grande .n { font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.pip { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--acento); margin-right: 4px; }
.pip.lleno { background: var(--acento); }
.hr { height: 1px; background: var(--borde); margin: var(--e4) 0; border: 0; }
.rejilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.grupo-botones { display: flex; flex-wrap: wrap; gap: var(--e2); }

/* ---------- Coleccion: foto y tiempo (B25) ---------- */
.foto-coleccion { display: block; width: 96px; height: 96px; object-fit: cover; border-radius: var(--radio);
                  border: 1px solid var(--borde-fuerte); margin-bottom: var(--e3); }
.foto-coleccion.grande { width: 100%; height: auto; max-height: 280px; }
.cuenta-atras .cuenta-valor { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   B29: navegacion en dos niveles, Mis Ligas, perfiles, home de Liga
   (carrusel), clasificacion, chat y ofertas. Mismos tokens de :root.
   ========================================================================== */
.ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.eyebrow { margin: 0 0 2px; font-size: var(--t-s); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--acento); }
.enlace-fuerte { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t-s); font-weight: 800; letter-spacing: .06em; }

/* ---------- cabecera dentro de una Liga ---------- */
.cab-volver { flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin-left: -8px; border-radius: 50%; color: var(--texto-2); }
.cab-volver:hover { background: var(--surf-2); color: var(--texto); }
.cab-volver svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cab-liga-enlace { display: flex; align-items: center; gap: var(--e2); min-width: 0; color: var(--texto); }
.cab-liga-enlace:hover { text-decoration: none; }
.cab-liga-enlace .cab-liga { color: var(--texto); font-size: .95rem; font-weight: 700; }

/* ---------- avatares y escudos ---------- */
.avatar { --av-h: 220; flex: none; display: inline-grid; place-items: center; overflow: hidden; border-radius: 50%;
  width: 36px; height: 36px; font-weight: 800; font-size: .95rem; color: #fff;
  background: linear-gradient(140deg, hsl(var(--av-h) 52% 46%), hsl(calc(var(--av-h) + 35) 48% 30%));
  box-shadow: 0 0 0 2px var(--bg); user-select: none; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.avatar--xs { width: 26px; height: 26px; font-size: .7rem; }
.avatar--s { width: 36px; height: 36px; }
.avatar--l { width: 88px; height: 88px; font-size: 2.2rem; box-shadow: 0 0 0 3px var(--surf-2), var(--sombra-s); }
.avatar--resto { background: var(--surf-2); color: var(--texto-2); font-size: .62rem; }
.avatares { display: inline-flex; align-items: center; }
.avatares .avatar + .avatar { margin-left: -8px; }
.liga-escudo { --av-h: 220; flex: none; display: inline-grid; place-items: center; overflow: hidden; font-weight: 800; color: #fff;
  border-radius: 10px; background: linear-gradient(150deg, hsl(var(--av-h) 45% 38%), hsl(calc(var(--av-h) + 50) 50% 18%)); }
.liga-escudo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.liga-escudo.s { width: 30px; height: 30px; border-radius: 8px; font-size: .85rem; }
.liga-escudo.m { width: 56px; height: 56px; font-size: 1.4rem; }
.liga-escudo.l { width: 96px; height: 96px; border-radius: 20px; font-size: 2.6rem; box-shadow: var(--sombra); }

/* ---------- navegacion de Liga: 5 pestanas, INICIO central destacado ---------- */
.navbar--liga .nav-item { font-size: .66rem; letter-spacing: 0; }
.nav-icono { position: relative; display: grid; place-items: center; }
.nav-insignia { position: absolute; top: -6px; right: -10px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  display: grid; place-items: center; font-size: .66rem; font-weight: 800; color: #fff; background: var(--error);
  box-shadow: 0 0 0 2px var(--bg-elev); animation: insignia-pop .35s ease-out; }
@keyframes insignia-pop { from { transform: scale(.4); } 70% { transform: scale(1.15); } to { transform: scale(1); } }
@media (max-width: 899px) {
  .navbar--liga .nav-item--inicio { flex: 1.15; }
  .navbar--liga .nav-item--inicio .nav-icono { width: 58px; height: 58px; margin-top: -26px; border-radius: 50%; color: #fff;
    background: radial-gradient(circle at 35% 30%, var(--acento), var(--acento-fuerte) 70%);
    box-shadow: 0 0 0 5px var(--bg), 0 8px 22px rgba(91, 118, 245, .45); transition: transform .18s ease; }
  .navbar--liga .nav-item--inicio svg { width: 28px; height: 28px; }
  .navbar--liga .nav-item--inicio:active .nav-icono { transform: scale(.93); }
  .navbar--liga .nav-item--inicio.activo::before { display: none; }
  .navbar--liga .nav-item--inicio.activo .nav-icono { box-shadow: 0 0 0 5px var(--bg), 0 0 0 7px var(--acento-tinte), 0 8px 22px rgba(91, 118, 245, .55); }
}
.nav-item:active svg { transform: scale(.92); }

/* ---------- Mis Ligas ---------- */
.ligas-lista { display: grid; gap: var(--e4); }
@media (min-width: 640px) { .ligas-lista { grid-template-columns: 1fr 1fr; } }
.liga-tarjeta { display: block; overflow: hidden; border-radius: var(--radio-l); background: var(--surf); border: 1px solid var(--borde);
  color: inherit; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.liga-tarjeta:hover { text-decoration: none; border-color: var(--borde-fuerte); box-shadow: var(--sombra); transform: translateY(-2px); }
.liga-tarjeta:active { transform: scale(.985); }
.liga-tarjeta__portada { --av-h: 220; position: relative; aspect-ratio: 16 / 7; overflow: hidden;
  background:
    radial-gradient(120% 90% at 85% 10%, hsl(calc(var(--av-h) + 40) 60% 40% / .55), transparent 60%),
    linear-gradient(150deg, hsl(var(--av-h) 42% 28%), hsl(calc(var(--av-h) + 50) 46% 12%)); }
.liga-tarjeta__portada img { width: 100%; height: 100%; object-fit: cover; display: block; }
.liga-tarjeta__portada::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(13, 15, 21, .55)); }
.liga-tarjeta__inicial { position: absolute; right: 18px; bottom: -22px; font-size: 7.5rem; font-weight: 900; line-height: 1; color: rgba(255, 255, 255, .14); letter-spacing: -.04em; }
.liga-tarjeta__chat { position: absolute; z-index: 1; top: 10px; right: 10px; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px;
  display: grid; place-items: center; font-size: .75rem; font-weight: 800; color: #fff; background: var(--error); box-shadow: var(--sombra-s); }
.liga-tarjeta__cuerpo { display: grid; gap: var(--e2); padding: var(--e3) var(--e4) var(--e4); }
.liga-tarjeta__cuerpo h2 { margin: 0; font-size: 1.15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liga-tarjeta__pos { flex: none; font-weight: 900; font-size: 1.15rem; color: var(--r-legendaria); font-variant-numeric: tabular-nums; }
.liga-tarjeta__pos small { color: var(--texto-3); font-weight: 600; }
.liga-tarjeta__estado { margin: 0; color: var(--texto-2); font-size: .9rem; display: flex; align-items: center; gap: 6px; }
.punto-vivo { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-tinte); }
.acciones-ligas { display: grid; gap: var(--e3); margin-top: var(--e5); }
@media (min-width: 640px) { .acciones-ligas { grid-template-columns: 1fr 1fr; } }
.acciones-ligas .btn { min-height: 54px; letter-spacing: .06em; font-weight: 800; }

/* ---------- perfiles ---------- */
.perfil-cabecera { display: flex; align-items: center; gap: var(--e4); margin: var(--e2) 0 var(--e4); }
.perfil-cabecera h1 { margin: 0 0 2px; overflow-wrap: anywhere; }
.perfil-cabecera p { margin: 0; }
.palmares { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); }
.palmares__fila { display: flex; align-items: center; gap: var(--e3); padding: var(--e3); border-radius: var(--radio); background: var(--surf); border: 1px solid var(--borde); }
.palmares__medalla { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; font-weight: 900; border: 2px solid var(--borde-fuerte); font-variant-numeric: tabular-nums; }
.palmares__fila.oro .palmares__medalla { color: var(--r-legendaria); border-color: var(--r-legendaria); background: rgba(230, 179, 77, .12); }
.palmares__fila.p2 .palmares__medalla { color: #cfd6e6; border-color: #cfd6e6; }
.palmares__fila.p3 .palmares__medalla { color: #d29a6a; border-color: #d29a6a; }
.liga-perfil { display: flex; align-items: center; gap: var(--e4); margin: var(--e2) 0 var(--e4); }
.liga-perfil__texto { min-width: 0; }
.liga-perfil h1 { margin: 0 0 var(--e1); overflow-wrap: anywhere; }
.liga-perfil__desc { margin: 0 0 var(--e1); color: var(--texto); white-space: pre-line; overflow-wrap: anywhere; }
.codigo-invitacion { display: grid; gap: var(--e1); }
.codigo-invitacion .codigo { font-size: 1.6rem; letter-spacing: .14em; font-variant-numeric: tabular-nums; user-select: all; }
.jugadores { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); }
.jugadores a { display: flex; align-items: center; gap: var(--e3); min-height: 52px; padding: var(--e2) var(--e3); border-radius: var(--radio); background: var(--surf); border: 1px solid var(--borde); color: inherit; }
.jugadores a:hover { text-decoration: none; border-color: var(--borde-fuerte); }
.jugadores .crece { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- home de Liga: carrusel de sobres ---------- */
.carrusel { --ancho-item: min(52vw, 230px); margin: var(--e3) calc(-1 * var(--e4)) 0; }
.carrusel__pista { display: flex; align-items: center; gap: 0; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  padding: var(--e3) calc(50% - var(--ancho-item) / 2) var(--e2); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.carrusel__pista::-webkit-scrollbar { display: none; }
.carrusel__pista:focus-visible { outline-offset: -2px; }
.carrusel__item { flex: none; width: var(--ancho-item); scroll-snap-align: center; display: block; color: inherit;
  transform: scale(.74); opacity: .55; filter: saturate(.75); transition: transform .32s cubic-bezier(.2, .8, .2, 1), opacity .32s, filter .32s; }
.carrusel__item.activo { transform: scale(1); opacity: 1; filter: none; }
.carrusel__item:hover { text-decoration: none; }
.carrusel__item .sobre3d { pointer-events: none; }
.carrusel__puntos { display: flex; justify-content: center; gap: 6px; padding: var(--e1) 0 var(--e3); }
.carrusel__puntos span { width: 7px; height: 7px; border-radius: 999px; background: var(--borde-fuerte); transition: width .25s, background .25s; }
.carrusel__puntos span.activo { width: 20px; background: var(--acento); }
.panel-coleccion { animation: panel-entra .28s ease-out; }
.panel-coleccion[hidden] { display: none; }
@keyframes panel-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.panel-coleccion .barra { margin-top: 6px; }

/* ranking con avatar */
.rank li .avatar { margin-left: -4px; }
.rank__jugador { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--e2); color: inherit; }
.rank__jugador:hover { text-decoration: none; }
.rank__jugador .nombre { flex: 1; }

/* ---------- Cartas: accion "crear carta" (dos cartas apiladas + "+") ---------- */
.crear-carta { display: inline-flex; align-items: center; gap: var(--e2); min-height: 44px; padding: 0 var(--e3) 0 var(--e2); border-radius: 999px;
  border: 1px solid var(--acento); background: var(--acento-tinte); color: var(--acento); font-weight: 800; font-size: var(--t-s); letter-spacing: .04em; }
.crear-carta:hover { text-decoration: none; background: rgba(125, 149, 255, .22); }
.crear-carta__pila { position: relative; width: 26px; height: 30px; }
.crear-carta__pila i { position: absolute; width: 18px; height: 25px; border-radius: 4px; border: 2px solid currentColor; background: var(--surf); }
.crear-carta__pila i:first-child { left: 0; top: 0; transform: rotate(-10deg); opacity: .6; }
.crear-carta__pila i + i { left: 7px; top: 4px; transform: rotate(6deg); }
.crear-carta__pila b { position: absolute; right: -4px; bottom: -3px; width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center;
  font-size: .8rem; line-height: 1; color: #fff; background: var(--acento-fuerte); }

/* ---------- Sobres: estado previo a la apertura ---------- */
.previa-apertura { margin-top: var(--e5); }
.requisitos { list-style: none; margin: 0 0 var(--e4); padding: 0; display: grid; gap: var(--e2); }
.requisitos li { display: flex; align-items: center; gap: var(--e2); color: var(--texto-2); }
.requisitos li::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--borde-fuerte); }
.requisitos li.ok { color: var(--texto); }
.requisitos li.ok::before { border-color: var(--ok); background: var(--ok) radial-gradient(circle, #fff 0 2.5px, transparent 3px); }

/* ---------- chat ---------- */
.pagina-chat { padding-bottom: calc(var(--alto-nav) + 96px + env(safe-area-inset-bottom)); }
.chat__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e3); }
.msg { display: flex; align-items: flex-end; gap: var(--e2); max-width: 88%; }
.msg--mio { align-self: flex-end; flex-direction: row-reverse; }
.msg--oferta { max-width: 100%; width: 100%; }
.msg__avatar { flex: none; }
.msg__avatar:hover { text-decoration: none; }
.msg__burbuja { min-width: 0; padding: var(--e2) var(--e3); border-radius: 16px 16px 16px 4px; background: var(--surf-2); border: 1px solid var(--borde); }
.msg--mio .msg__burbuja { border-radius: 16px 16px 4px 16px; background: var(--acento-tinte); border-color: rgba(125, 149, 255, .35); }
.msg__burbuja--oferta { flex: 1; padding: var(--e3); }
.msg__autor { display: block; font-size: .75rem; font-weight: 800; color: var(--acento); margin-bottom: 2px; }
.msg__texto { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg__hora { display: block; margin-top: 2px; text-align: right; font-size: .68rem; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.msg--sistema { align-self: center; max-width: 100%; text-align: center; font-size: var(--t-s); color: var(--texto-2);
  padding: var(--e2) var(--e3); border-radius: 999px; background: var(--ok-tinte); border: 1px solid rgba(63, 207, 142, .35); }
.msg--sistema strong { color: var(--ok); letter-spacing: .04em; }
.chat-aviso { position: fixed; left: 50%; transform: translateX(-50%); z-index: 35; bottom: calc(var(--alto-nav) + 84px + env(safe-area-inset-bottom)); }
.chat-aviso a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--e4); border-radius: 999px; background: var(--acento-fuerte); color: #fff; font-weight: 700; font-size: var(--t-s); box-shadow: var(--sombra); }
.chat-aviso[hidden] { display: none; }
.chat-escribir { position: fixed; z-index: 35; left: 0; right: 0; bottom: calc(var(--alto-nav) + env(safe-area-inset-bottom));
  display: flex; align-items: flex-end; gap: var(--e2); padding: var(--e2) var(--e3); background: rgba(19, 23, 34, .97); border-top: 1px solid var(--borde); }
.chat-escribir textarea { flex: 1; min-height: 44px; max-height: 140px; padding: 10px var(--e3); resize: none; border-radius: 22px; }
.chat-escribir button { flex: none; min-height: 44px; padding: 0 var(--e4); border-radius: 22px; }
.chat-escribir__oferta { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--borde-fuerte); background: var(--surf-2); color: var(--acento); }
.chat-escribir__oferta svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 900px) {
  .chat-escribir { left: 208px; bottom: 0; padding-left: max(var(--e4), calc((100vw - 208px - var(--ancho-max)) / 2 + var(--e4)));
    padding-right: max(var(--e4), calc((100vw - 208px - var(--ancho-max)) / 2 + var(--e4))); }
  .chat-aviso { bottom: 84px; left: calc(50% + 104px); }
  .pagina-chat { padding-bottom: 110px; }
}

/* ---------- ofertas de intercambio (en el chat) ---------- */
.oferta { display: grid; gap: var(--e2); }
.oferta__cabecera { display: flex; align-items: center; flex-wrap: wrap; gap: var(--e2); }
.oferta__titulo { font-size: .72rem; font-weight: 900; letter-spacing: .1em; color: var(--texto-2); }
.oferta__tiempo { color: var(--texto-2); }
.oferta__coleccion { margin: 0; }
.oferta__lados { display: grid; grid-template-columns: auto auto 1fr; align-items: start; gap: var(--e3); }
.oferta__lado { display: grid; gap: var(--e1); min-width: 0; }
.oferta__etiqueta { font-size: .7rem; font-weight: 900; letter-spacing: .1em; color: var(--ok); }
.oferta__lado--ofrezco .oferta__etiqueta { color: var(--acento); }
.oferta__etiqueta small { color: var(--texto-3); letter-spacing: 0; font-weight: 600; }
.oferta__cartas { display: flex; flex-wrap: wrap; gap: var(--e2); }
.oferta__carta { width: 64px; display: grid; gap: 2px; justify-items: center; }
.oferta__carta .carta { width: 100%; }
.oferta__num { font-size: .72rem; font-weight: 800; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.oferta__flecha { width: 22px; height: 22px; margin-top: 44px; fill: none; stroke: var(--texto-3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.oferta__motivo { margin: 0; color: var(--texto-2); }
.oferta__aceptar fieldset { border: 0; margin: 0 0 var(--e2); padding: 0; }
.oferta__aceptar legend { margin-bottom: var(--e1); }
.oferta__eleccion { display: flex; flex-wrap: wrap; gap: var(--e2); }
.opcion-radio { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 var(--e3); border-radius: 999px; border: 1px solid var(--borde-fuerte); background: var(--surf); cursor: pointer; font-weight: 800; }
.opcion-radio:has(input:checked) { border-color: var(--acento); background: var(--acento-tinte); color: var(--acento); }
.oferta__aceptar button { width: 100%; letter-spacing: .06em; font-weight: 800; }
.oferta--completada, .oferta--caducada, .oferta--cancelada { opacity: .8; }
.oferta--caducada .oferta__cartas, .oferta--cancelada .oferta__cartas { filter: grayscale(.7); }

/* ---------- nueva oferta ---------- */
.pasos { list-style: none; display: flex; gap: var(--e2); margin: 0 0 var(--e4); padding: 0; counter-reset: paso; }
.pasos li { flex: 1; counter-increment: paso; padding: var(--e2) 0 0; border-top: 3px solid var(--borde); font-size: var(--t-s); font-weight: 700; color: var(--texto-3); }
.pasos li::before { content: counter(paso) ". "; }
.pasos li.activo { border-color: var(--acento); color: var(--texto); }
.pasos li.hecho { border-color: var(--ok); color: var(--texto-2); }
.carta-celda--elegible { color: inherit; border-radius: var(--radio-s); transition: transform .15s; }
.carta-celda--elegible:hover { text-decoration: none; transform: translateY(-2px); }
.carta-elegible { position: relative; display: block; cursor: pointer; border-radius: var(--radio-s); }
.carta-elegible input { position: absolute; z-index: 3; top: 6px; left: 6px; }
.carta-elegible:has(input:checked) { outline: 2px solid var(--acento); outline-offset: 3px; }
.carta-elegible:has(input:disabled) { opacity: .5; cursor: not-allowed; }

/* ---------- escritorio: barra lateral ---------- */
@media (min-width: 900px) {
  .navbar--liga .nav-item, .navbar--global .nav-item { font-size: var(--t-m); }
  .nav-insignia { top: -6px; right: -8px; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }