/* Lobos Jr: marcador de cancha. Paleta tomada del logo.
   Letra grande para leer de lejos: nada bajo 18 px, nombres de equipos de 22 a 30 px
   y números clave de 32 px o más. Cada vista muestra poco para que todo quepa. */
:root {
  --noche: #001b38;   /* fondo del logo */
  --hondo: #00112a;   /* tablero */
  --celda: #000a1c;   /* celda de dígito */
  --pelaje: #1d3b70;  /* azul del lobo */
  --acero: #a9b9d3;   /* gris del pelaje, aclarado para contraste */
  --tiza: #f5f7fb;    /* blanco del logotipo */
  --oro: #f2b132;     /* contorno del logo */
  --pasto: #3fa46a;
  --tarjeta: #e2574c;
  --linea: rgba(169, 185, 211, 0.22);
  --lobo-fondo: rgba(34, 65, 122, 0.6);

  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --texto: "Atkinson Hyperlegible", system-ui, sans-serif;
  --pad: 16px;
  --t-min: 18px;      /* el tamaño más chico de la app */
  --t-nombre: 22px;   /* nombres de equipos */
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; height: 100%; }
body {
  margin: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);
  background: var(--noche);
  color: var(--tiza);
  font: 400 var(--t-min)/1.3 var(--texto);
  -webkit-tap-highlight-color: transparent;
}
body > * { width: 100%; max-width: 560px; margin-inline: auto; }
/* Filas fijas: si el aviso está oculto, el resto no se corre de fila. */
.top { grid-row: 1; }
.aviso { grid-row: 2; }
main { grid-row: 3; }
.tabs { grid-row: 4; }

h1, h2, h3, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 3px solid var(--oro); outline-offset: 2px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lobo { color: var(--oro); }
.colegio { font-weight: 400; font-size: var(--t-min); color: var(--acero); white-space: nowrap; }

/* Insignia de cancha: la palabra completa, siempre legible. */
.cancha {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--pelaje);
  font: 700 var(--t-min)/1.2 var(--texto);
  color: var(--tiza);
  white-space: nowrap;
}

/* ---------- encabezado ---------- */
.top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(env(safe-area-inset-top) + 8px) var(--pad) 6px;
}
.top__logo { width: 40px; height: 40px; border-radius: 10px; flex: none; }
.top__title { flex: 1; min-width: 0; }
.top__title h1 { font: 800 26px/1 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top__title p { color: var(--acero); font-size: var(--t-min); line-height: 1.2; margin-top: 3px; }

.aviso {
  margin: 0 var(--pad) 6px;
  width: auto;
  padding: 8px 12px;
  border-left: 4px solid var(--tarjeta);
  background: rgba(226, 87, 76, 0.16);
  border-radius: 3px 8px 8px 3px;
  font-size: var(--t-min);
}
@media (min-width: 592px) { .aviso { margin-inline: auto; } }

main { min-height: 0; overflow: hidden; }
.vista { height: 100%; padding: 4px var(--pad) 8px; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }
.vista[hidden] { display: none; }

/* ---------- vista Lobos (un equipo a la vez) ---------- */
.vista--inicio { gap: clamp(8px, 1.6dvh, 16px); touch-action: pan-y; }
.selector { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 5px; border-radius: 14px; background: var(--hondo); flex: none; }
.selector button { position: relative; min-height: 56px; border-radius: 10px; font: 900 30px/1 var(--display); color: var(--acero); }
.selector button[aria-selected="true"] { background: var(--oro); color: var(--noche); }
.selector__nuevo { position: absolute; top: 8px; right: 10px; width: 12px; height: 12px; border-radius: 50%; background: var(--pasto); box-shadow: 0 0 0 2px var(--hondo); }

.ficha { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: space-evenly; gap: clamp(8px, 1.6dvh, 16px); }
.ficha__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; }
.ficha__estado { color: var(--tiza); font-size: 20px; font-weight: 700; }
.resultado {
  flex: none;
  padding: 4px 12px;
  border-radius: 8px;
  font: 800 26px/1.1 var(--display);
  color: var(--noche);
}
.resultado--G { background: var(--pasto); }
.resultado--E { background: var(--acero); }
.resultado--P { background: var(--tarjeta); }

/* El marcador grande: nombres arriba y dígitos de tablero de paletas. */
.marcador {
  --dig: clamp(64px, min(15dvh, 28vw), 132px);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(29, 59, 112, 0.55), transparent 70%),
    var(--hondo);
  border: 3px solid var(--oro);
  border-radius: 22px;
  padding: clamp(12px, 2dvh, 22px) 14px;
  box-shadow: 0 0 0 4px var(--noche), 0 0 0 5px rgba(242, 177, 50, 0.35);
  margin: 0 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.6dvh, 16px);
}
.marcador--E, .marcador--P { border-color: var(--acero); box-shadow: 0 0 0 4px var(--noche), 0 0 0 5px var(--linea); }
.marcador--vacio { border-color: var(--linea); box-shadow: none; padding-block: 24px; }
.marcador__nombres { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; text-align: center; }
.mnombre { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.mnombre b { font: 700 var(--t-nombre)/1.1 var(--texto); }
.mnombre--lobo b { color: var(--oro); }
.mnombre--slot { color: var(--acero); font-size: var(--t-nombre); }
.marcador__digitos { display: flex; align-items: center; justify-content: center; gap: calc(var(--dig) * 0.14); perspective: 700px; }
.marcador__gol { display: flex; gap: 4px; }
.digito {
  position: relative;
  display: grid;
  place-items: center;
  min-width: calc(var(--dig) * 0.86);
  height: calc(var(--dig) * 1.14);
  padding: 0 4px;
  border-radius: calc(var(--dig) * 0.12);
  background: var(--celda);
  font: 900 var(--dig)/1 var(--display);
  color: var(--oro);
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.04), inset 0 2px 8px rgba(0, 0, 0, 0.6);
}
.digito::after { content: ""; position: absolute; inset: 50% 0 auto; height: 3px; background: var(--hondo); }
.marcador__sep { font: 900 calc(var(--dig) * 0.6)/1 var(--display); color: var(--acero); }
.marcador__digitos--hora { --dig: clamp(48px, min(10.5dvh, 17vw), 92px); gap: 5px; }
.marcador__digitos--hora .digito { min-width: calc(var(--dig) * 0.74); padding: 0 2px; }
.marcador__digitos--hora .marcador__sep { color: var(--oro); }
.marcador__pie { color: var(--acero); font-size: var(--t-min); text-align: center; }
.marcador__pie strong { color: var(--oro); font: 800 24px/1.1 var(--display); }
.marcador--vivo { animation: pulso 2s ease-in-out infinite; }
@keyframes pulso { 50% { box-shadow: 0 0 0 4px var(--noche), 0 0 0 10px rgba(242, 177, 50, 0.5); } }
.marcador--nuevo .digito { animation: paleta 0.75s cubic-bezier(0.2, 0.7, 0.2, 1.15) both; }
.marcador--nuevo .marcador__gol + .marcador__sep + .marcador__gol .digito { animation-delay: 0.12s; }
@keyframes paleta { from { transform: rotateX(-95deg); opacity: 0.2; } to { transform: rotateX(0); opacity: 1; } }

/* Fila de equipo, compartida por el marcador y las tarjetas del fixture. */
.equipo { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.equipo__nombre { font: 700 var(--t-nombre)/1.15 var(--texto); overflow-wrap: anywhere; }
.equipo--lobo .equipo__nombre { color: var(--oro); }
.equipo--slot .equipo__nombre { color: var(--acero); font-weight: 400; }
.equipo__nota { display: block; font: 400 var(--t-min)/1.2 var(--texto); color: var(--acero); }
.gol {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 50px;
  height: clamp(38px, 5.6dvh, 50px);
  padding: 0 6px;
  border-radius: 8px;
  background: var(--celda);
  font: 900 clamp(34px, 5.2dvh, 44px)/1 var(--display);
  color: var(--oro);
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6);
}
.gol::after { content: ""; position: absolute; inset: 50% 0 auto; height: 2px; background: var(--hondo); }
.gol--vacio { color: var(--acero); font-size: 28px; background: rgba(0, 10, 28, 0.55); }
.gol--vacio::after { display: none; }


.siguiente {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 5px 12px 6px;
  border-radius: 12px;
  background: rgba(29, 59, 112, 0.5);
}
.siguiente__pre { color: var(--acero); font-size: var(--t-min); line-height: 1.15; }
.siguiente__fila { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.siguiente__hora { font: 900 30px/1 var(--display); color: var(--oro); }
.siguiente__txt { font: 700 var(--t-nombre)/1.1 var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.siguiente--vivo { background: var(--oro); color: var(--noche); }
.siguiente--vivo .siguiente__hora, .siguiente--vivo .siguiente__pre { color: var(--noche); }
.siguiente--vivo .cancha { background: var(--noche); color: var(--oro); }
.siguiente--fin { display: block; color: var(--acero); text-align: center; background: none; min-height: 0; padding: 4px; }

/* ---------- vista Fixture ---------- */
.vista--fixture { gap: 10px; touch-action: pan-y; }
.horas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; flex: none; }
.horas__btn {
  position: relative;
  min-height: 54px;
  border-radius: 10px;
  background: var(--hondo);
  border: 1px solid var(--linea);
  font: 800 25px/1 var(--display);
  color: var(--tiza);
}
.horas__btn--lobo::after {
  content: "";
  position: absolute;
  left: 30%;
  right: 30%;
  bottom: 7px;
  height: 4px;
  border-radius: 2px;
  background: var(--oro);
}
.horas__btn[aria-selected="true"] { background: var(--oro); border-color: var(--oro); color: var(--noche); }
.horas__btn[aria-selected="true"]::after { background: var(--noche); }
.horas__estado { font-weight: 700; font-size: 20px; color: var(--acero); flex: none; }
.horas__estado--vivo { color: var(--oro); }

.tarjetas { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.tarjeta {
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.8dvh, 8px);
  padding: clamp(8px, 1.3dvh, 12px) 14px;
  border-radius: 14px;
  background: rgba(29, 59, 112, 0.35);
  border: 1px solid var(--linea);
}
.tarjeta--lobo { background: var(--lobo-fondo); border: 2px solid var(--oro); }
.tarjeta--lobo .cancha { background: var(--oro); color: var(--noche); }
.tarjeta__head { display: flex; align-items: center; gap: 10px; }
.tarjeta__tag { margin-left: auto; color: var(--acero); font-size: var(--t-min); }
.tarjeta__vivo { background: var(--oro); color: var(--noche); font-weight: 700; border-radius: 6px; padding: 2px 8px; }
.tarjeta__nota { color: var(--oro); font-weight: 700; }
.tarjeta .gol { height: clamp(36px, 5.2dvh, 44px); font-size: clamp(30px, 4.6dvh, 38px); }
.tarjeta .gol--vacio { font-size: 26px; }
.libre { color: var(--acero); font-style: italic; padding: 6px 2px; }
.libre .lobo { font-style: normal; font-weight: 700; }

/* ---------- vista Tabla ---------- */
.vista--tabla { gap: 10px; }
.grupos { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 5px; padding: 5px; border-radius: 14px; background: var(--hondo); flex: none; }
.grupos button { min-height: 58px; border-radius: 10px; font: 800 26px/1 var(--display); color: var(--acero); }
.grupos button span { display: block; font: 700 var(--t-min)/1.2 var(--texto); color: var(--oro); margin-top: 3px; }
.grupos button[aria-selected="true"] { background: var(--pelaje); color: var(--tiza); }

.tabla { width: 100%; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; }
.tabla thead th { font-size: var(--t-min); font-weight: 700; color: var(--acero); padding: 4px 0 6px; text-align: center; }
.tabla thead th:first-child { width: 30px; }
.tabla thead th:nth-child(n + 3) { width: 33px; }
.tabla thead th:nth-child(7) { width: 42px; }
.tabla thead th:last-child { width: 46px; }
.tabla thead .tabla__eq { text-align: left; padding-left: 8px; }
.tabla td { text-align: center; font-size: 21px; }
.fila { border-top: 1px solid var(--linea); }
.fila > * { padding-block: clamp(5px, 1.1dvh, 13px); }
.fila__lugar { font: 800 28px/1 var(--display); color: var(--acero); }
.fila--final .fila__lugar { box-shadow: inset 5px 0 0 var(--oro); }
.fila--honor .fila__lugar { box-shadow: inset 5px 0 0 var(--acero); }
.fila__equipo { text-align: left; padding-left: 6px; }
.fila__equipo b { display: block; font: 700 21px/1.1 var(--texto); }
.fila__equipo .colegio { display: block; margin-top: 2px; }
.fila__pts { font: 900 32px/1 var(--display); }
.fila--lobo { background: var(--lobo-fondo); }
.fila--lobo .fila__equipo b, .fila--lobo .fila__pts { color: var(--oro); }
.sorteo { display: block; color: var(--oro); font-weight: 700; }

.tabla-pie { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: none; }
.leyenda { display: flex; gap: 16px; color: var(--acero); }
.leyenda span::before { content: ""; display: inline-block; width: 5px; height: 18px; margin-right: 8px; vertical-align: -3px; border-radius: 2px; }
.leyenda__final::before { background: var(--oro); }
.leyenda__honor::before { background: var(--acero); }
.boton-info { min-height: 48px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--linea); color: var(--tiza); font-weight: 700; }

/* ---------- panel de información ---------- */
.info {
  width: min(540px, calc(100% - 20px));
  max-height: 86dvh;
  padding: 0;
  border: 2px solid var(--oro);
  border-radius: 18px;
  background: var(--hondo);
  color: var(--tiza);
}
.info::backdrop { background: rgba(0, 10, 28, 0.78); }
.info__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--linea); position: sticky; top: 0; background: var(--hondo); }
.info__head h2 { font: 900 28px/1 var(--display); }
.info__cerrar { min-height: 48px; padding: 0 18px; border-radius: 10px; background: var(--oro); color: var(--noche); font-weight: 700; }
.info__cuerpo { padding: 12px 16px 20px; }
.info__cuerpo h3 { font: 800 24px/1.1 var(--display); margin: 14px 0 6px; }
.info__cuerpo p { color: var(--acero); margin-bottom: 10px; line-height: 1.45; }
.equipos li { padding: 8px 0; border-top: 1px solid var(--linea); }
.equipos li span { display: block; font-weight: 700; }
.equipos li small { color: var(--acero); font-size: var(--t-min); }

/* Botón de actualizar: solo el ícono, arriba a la derecha. */
.sync {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 13px;
  background: var(--oro);
  color: var(--noche);
}
.sync svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.sync[data-estado="cargando"] svg { animation: girar 0.9s linear infinite; }
.sync[data-estado="error"] { background: var(--tiza); }
.sync:disabled { cursor: progress; }

/* ---------- aviso breve al actualizar ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(84px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--tiza);
  color: var(--noche);
  font-weight: 700;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
  z-index: 20;
}

/* ---------- barra inferior ---------- */
.tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: calc(68px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--hondo);
  border-top: 1px solid var(--linea);
}
.tabs__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--acero);
  text-decoration: none;
  font-size: var(--t-min);
  font-weight: 700;
  line-height: 1.1;
}
.tabs__item svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tabs__item[aria-current="page"] { color: var(--oro); }
.tabs__item[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 25%;
  right: 25%;
  height: 4px;
  border-radius: 0 0 3px 3px;
  background: var(--oro);
}
.tabs__item:focus-visible { outline-offset: -4px; }
@keyframes girar { to { transform: rotate(360deg); } }

/* Pantallas bajas: se compactan márgenes, nunca la letra. */
@media (max-height: 640px) {
  .selector button { min-height: 48px; }
  .grupos button { min-height: 50px; }
  .fila > * { padding-block: 4px; }
  .tabla thead th { padding-block: 2px 4px; }
  .siguiente { padding-block: 3px; }
  .siguiente__hora { font-size: 27px; }
  .horas__btn { min-height: 46px; }
  .tarjeta { padding-block: 6px; gap: 3px; }
}

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