/* =====================================================================
   Fantasy Fútbol Argentino — estilos base
   Fuente de verdad: Manual de Estilo v1.0. No agregar tokens nuevos sin
   pasar por el manual. Dark-first: no hay tema claro.
   ===================================================================== */

:root {
  /* Color (§2) */
  --bg: #090B0D;
  --s1: #11151A;
  --s2: #171C22;
  --borde: #29313A;
  --t1: #F4F6F8;
  --t2: #A9B1BA;
  --t3: #6F7882;
  --amarillo: #FFD400;
  --amarillo-osc: #C9A900;
  --ok: #36D27A;
  --peligro: #FF4D5D;
  --info: #5EA7FF;
  --cancha: #0F1A14;              /* verde muy oscuro y desaturado (§7 Cancha) */
  --cancha-linea: rgba(244, 246, 248, .18);
  --overlay: rgba(0, 0, 0, .7);

  /* Tipografía (§3) */
  --fuente: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Espaciado (§4): 4 / 8 / 12 / 16 / 20 / 24 / 32 */
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 20px; --e6: 24px; --e8: 32px;

  /* Radios (§4) */
  --r-chico: 6px;
  --r: 10px;
  --r-grande: 14px;
  --r-pill: 999px;

  /* Movimiento (§15) */
  --t-tap: 120ms;
  --t-pantalla: 220ms;
  --t-modal: 250ms;
  --t-puntos: 320ms;
  --curva: cubic-bezier(.2, .7, .2, 1);

  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { background: var(--bg); color: var(--t1); }
body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 14px;
  line-height: 19px;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- Tipografía ---------- */
.display { font-size: 32px; line-height: 36px; font-weight: 800; letter-spacing: -.01em; }
.h1 { font-size: 22px; line-height: 26px; font-weight: 700; margin: 0; }
.h2 { font-size: 17px; line-height: 21px; font-weight: 700; margin: 0; }
.h3 { font-size: 14px; line-height: 18px; font-weight: 600; margin: 0; }
.cuerpo { font-size: 14px; line-height: 19px; font-weight: 400; }
.chico { font-size: 12px; line-height: 16px; color: var(--t2); }
.caption { font-size: 11px; line-height: 14px; font-weight: 500; color: var(--t3); }
.label {
  font-size: 11px; line-height: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--t2);
}
.label--acento { color: var(--amarillo); }
.num { font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.num--m { font-size: 20px; }
.num--l { font-size: 24px; }
.num--xl { font-size: 28px; }
.secundario { color: var(--t2); }
.terciario { color: var(--t3); }
.acento { color: var(--amarillo); }
.sube { color: var(--ok); }
.baja { color: var(--peligro); }

/* ---------- Layout ---------- */
.pantalla { padding-inline: var(--e4); padding-block: var(--e4) var(--e6); display: flex; flex-direction: column; gap: var(--e6); }
.pila { display: flex; flex-direction: column; gap: var(--e3); }
.pila--4 { gap: var(--e4); }
.fila { display: flex; align-items: center; gap: var(--e3); min-width: 0; }
.fila--entre { justify-content: space-between; }
.crece { flex: 1; min-width: 0; }
.trunca { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Cards (§6.1) ---------- */
.card {
  background: var(--s1);
  border: 1px solid var(--borde);
  border-radius: var(--r);
  padding: var(--e4);
}
.card--seleccionada, .card--enfasis { background: var(--s2); border-color: var(--amarillo); }
.card--peligro { border-color: var(--peligro); }
.card--sin-padding { padding: 0; overflow: hidden; }

/* ---------- Botones (§6.2) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  min-height: 48px; padding: 0 var(--e5);
  border-radius: var(--r); border: 1px solid transparent;
  font: 700 14px/1 var(--fuente);
  cursor: pointer; user-select: none;
  transition: background-color var(--t-tap) var(--curva), transform var(--t-tap) var(--curva);
}
.btn:active { transform: scale(.98); }
.btn:focus-visible { outline: 2px solid var(--t1); outline-offset: 2px; }
.btn--bloque { width: 100%; }
.btn--primario { background: var(--amarillo); color: var(--bg); }
.btn--primario:active { background: var(--amarillo-osc); }
.btn--secundario { background: var(--s2); color: var(--t1); border-color: var(--borde); }
.btn--terciario { background: transparent; color: var(--t2); }
.btn--peligro { background: var(--peligro); color: #FFFFFF; }
.btn--chico { min-height: 36px; padding: 0 var(--e3); font-size: 13px; }
.btn[disabled] { opacity: .4; pointer-events: none; }
.btn svg { width: 18px; height: 18px; }

/* ---------- Chips (§6.3) ---------- */
.chips { display: flex; gap: var(--e2); overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--e4) * -1); padding-inline: var(--e4); }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; height: 32px; padding: 0 var(--e3);
  display: inline-flex; align-items: center;
  border-radius: var(--r-pill); border: 1px solid var(--borde);
  background: var(--s2); color: var(--t2);
  font: 500 11px/1 var(--fuente); letter-spacing: .02em;
  cursor: pointer;
}
.chip[aria-pressed="true"], .chip--activo { background: var(--amarillo); border-color: var(--amarillo); color: var(--bg); font-weight: 700; }
.chip--estatico { cursor: default; }

/* ---------- Divisores (§6.4) ---------- */
.divisor { height: 1px; background: var(--borde); border: 0; margin: 0; }

/* ---------- Input (§4: 48px) ---------- */
.campo { position: relative; }
.campo input {
  width: 100%; height: 48px; padding: 0 var(--e4) 0 44px;
  background: var(--s1); color: var(--t1);
  border: 1px solid var(--borde); border-radius: var(--r);
  font: 400 16px var(--fuente); /* 16 px: con menos, el iPhone hace zoom al escribir y la pantalla se corre */
}
.campo input::placeholder { color: var(--t3); }
.campo input:focus { outline: none; border-color: var(--amarillo); }
.campo svg { position: absolute; left: 14px; top: 15px; width: 18px; height: 18px; color: var(--t3); }
.campo--sin-icono input { padding-left: var(--e4); }

/* ---------- Iconos (§14) ---------- */
.ico { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round; }
.ico--14 { width: 14px; height: 14px; }
.ico--22 { width: 22px; height: 22px; }

/* ---------- Posiciones (§7) ---------- */
.pos {
  display: inline-flex; align-items: center; justify-content: center;
  height: 18px; min-width: 32px; padding: 0 var(--e1);
  border-radius: var(--r-chico); border: 1px solid currentColor;
  font: 700 10px/1 var(--fuente); letter-spacing: .04em;
}
.pos--ARQ { color: var(--info); }
.pos--DEF { color: var(--peligro); }
.pos--MED { color: var(--amarillo); }
.pos--DEL { color: var(--ok); }

/* ---------- Escudos y fotos (§7) ---------- */
.escudo { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--s2); color: var(--t2); font: 700 9px/1 var(--fuente); letter-spacing: .02em; }
.escudo img { width: 100%; height: 100%; object-fit: contain; }
.escudo--40 { width: 40px; height: 40px; font-size: 12px; }
.escudo--56 { width: 56px; height: 56px; font-size: 15px; }
.foto {
  flex: none; position: relative; width: 44px; height: 44px; border-radius: 50%;
  background: var(--s2); border: 1px solid var(--borde);
  display: grid; place-items: center; overflow: hidden;
  color: var(--t3); font: 600 13px/1 var(--fuente);
}
.foto img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Estados de jugador (§10) ---------- */
.estado-jug { display: inline-flex; align-items: center; gap: var(--e1); font: 600 11px/1 var(--fuente); }
.estado-jug--lesion, .estado-jug--suspendido { color: var(--peligro); }
.estado-jug--duda { color: var(--amarillo); }

/* ---------- Fila de jugador (Draft, Mercado, listas) ---------- */
.jugador { display: flex; align-items: center; gap: var(--e3); min-height: 64px; padding: var(--e3) var(--e4); }
.jugador + .jugador { border-top: 1px solid var(--borde); }
.jugador__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--e1); }
.jugador__nombre { font-size: 14px; line-height: 18px; font-weight: 600; }
.jugador__meta { display: flex; align-items: center; gap: var(--e2); min-width: 0; overflow: hidden; font-size: 12px; line-height: 16px; color: var(--t2); }
.jugador__meta > .pos, .jugador__meta > .escudo { flex: none; }
.jugador__puntos { flex: none; text-align: right; }
.jugador__puntos .num { font-size: 20px; }
.jugador--elegido { opacity: .55; }
.elegido { display: inline-flex; align-items: center; gap: var(--e1); height: 36px; padding: 0 var(--e3); border-radius: var(--r); background: var(--s2); border: 1px solid var(--borde); color: var(--t2); font: 600 12px/1 var(--fuente); }

/* ---------- Draft (§9) ---------- */
.draft-cab { display: flex; flex-direction: column; gap: var(--e3); }
.reloj { font-size: 34px; line-height: 1; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--t1); transition: color var(--t-puntos) var(--curva); }
.reloj--poco { color: var(--amarillo); }
.turno { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); }

/* ---------- Tabla de posiciones (§8, §11) ---------- */
.tabla { width: 100%; border-collapse: collapse; }
.tabla th { text-align: left; padding: 0 var(--e2) var(--e2); font: 700 10px/12px var(--fuente); letter-spacing: .06em; text-transform: uppercase; color: var(--t3); }
.tabla td { padding: var(--e3) var(--e2); border-top: 1px solid var(--borde); vertical-align: middle; }
.tabla th:first-child, .tabla td:first-child { padding-left: var(--e3); width: 40px; }
.tabla th:last-child, .tabla td:last-child { padding-right: 0; text-align: right; }
.tabla tr.yo td { background: var(--s2); }
.tabla tr.yo td:first-child { box-shadow: inset 2px 0 0 var(--amarillo); }
.tabla .corte td { border-top: 1px dashed var(--t3); }
.tend { display: inline-flex; align-items: center; gap: 2px; font: 600 11px/1 var(--fuente); }

/* ---------- Enfrentamiento ---------- */
.duelo { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--e3); }
.duelo__lado { display: flex; flex-direction: column; gap: var(--e1); min-width: 0; }
.duelo__lado--rival { text-align: right; align-items: flex-end; }
.duelo__vs { font: 700 11px/1 var(--fuente); color: var(--t3); }

/* ---------- Cancha (§7) ---------- */
.cancha {
  position: relative; aspect-ratio: 68 / 80; max-width: 100%;
  background: var(--cancha); border-radius: var(--r); overflow: hidden;
}
.cancha::before { /* perímetro */
  content: ""; position: absolute; inset: 10px; border: 1px solid var(--cancha-linea); border-radius: 4px;
}
.cancha__medio { position: absolute; left: 10px; right: 10px; top: 50%; height: 1px; background: var(--cancha-linea); }
.cancha::after { /* círculo central y áreas */
  content: ""; position: absolute; left: 50%; top: 50%; width: 22%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border: 1px solid var(--cancha-linea); border-radius: 50%;
}
.cancha__area { position: absolute; left: 30%; width: 40%; height: 13%; border: 1px solid var(--cancha-linea); }
.cancha__area--abajo { bottom: 10px; border-bottom: 0; }
.cancha__area--arriba { top: 10px; border-top: 0; }
.cancha__linea { position: absolute; left: 0; right: 0; display: flex; justify-content: space-evenly; transform: translateY(-50%); z-index: 1; }
.ficha { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 64px; background: none; border: 0; padding: 0; color: inherit; cursor: pointer; }
.ficha .foto { width: 40px; height: 40px; border-width: 2px; }
.ficha__nombre { max-width: 64px; font: 600 11px/13px var(--fuente); color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ficha__pts { font: 700 11px/1 var(--fuente); font-variant-numeric: tabular-nums; padding: 2px 6px; border-radius: var(--r-pill); background: var(--s2); color: var(--t1); }
.ficha__pts--pos { color: var(--amarillo); }
.ficha--seleccionada .foto { border-color: var(--amarillo); }
.ficha__estado { position: absolute; right: -2px; top: -2px; width: 14px; height: 14px; border-radius: 50%; background: var(--peligro); display: grid; place-items: center; }
.ficha__estado svg { width: 10px; height: 10px; stroke: #fff; }

/* ---------- Navegación inferior (§5) ---------- */
.nav {
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--s1); border-top: 1px solid var(--borde);
  padding: var(--e1) var(--e2) calc(var(--e1) + env(safe-area-inset-bottom, 0px));
}
.nav__item { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 44px; justify-content: center; background: none; border: 0; color: var(--t3); font: 500 10px/12px var(--fuente); cursor: pointer; }
.nav__item .ico { width: 22px; height: 22px; }
.nav__item[aria-current="page"] { color: var(--t1); }
.nav__item[aria-current="page"] .ico { color: var(--amarillo); }

/* ---------- Modal (§13) ---------- */
.overlay { position: fixed; inset: 0; background: var(--overlay); display: grid; place-items: center; padding: var(--e4); z-index: 50; animation: aparecer var(--t-modal) var(--curva); }
.modal { width: min(92vw, 420px); background: var(--s1); border: 1px solid var(--borde); border-radius: var(--r-grande); padding: var(--e5); display: flex; flex-direction: column; gap: var(--e4); }
.modal__cab { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); }
.modal__cerrar { width: 44px; height: 44px; margin: -12px -12px -12px 0; display: grid; place-items: center; background: none; border: 0; color: var(--t2); cursor: pointer; }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Estados (§22.9) ---------- */
.vacio { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--e3); padding: var(--e8) var(--e4); }
.vacio .ico { width: 32px; height: 32px; color: var(--t3); }
.aviso { display: flex; align-items: flex-start; gap: var(--e3); padding: var(--e3) var(--e4); border-radius: var(--r); background: var(--s1); border: 1px solid var(--borde); }
.aviso--error { border-color: var(--peligro); }
.aviso--error .ico { color: var(--peligro); }
.esqueleto { background: var(--s2); border-radius: var(--r-chico); animation: latido 1.4s var(--curva) infinite; }
@keyframes latido { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

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

[hidden] { display: none !important; }