/* Pizarra Criolla · css/app.css
   Piezas de la app que no son de una pantalla: hojas que suben desde abajo (Mi equipo, instalar, elegir jugador),
   la búsqueda, el aviso corto (toast) y el deslizar entre días. Colores y letra desde los tokens de styles.css. */

/* Mi equipo: la estrella de la lista del día usa --fav (styles.css: 3,2:1 contra la tarjeta en claro; el amarillo de
   la bandera de noche) */

/* ---------- aviso corto (PC.toast) ---------- */
/* Abajo, sobre la barra de secciones; sube un poco al llegar. La caja está siempre (role="status"): solo se ve con .in. */
.toast {
  position: fixed; z-index: 45; left: 50%; bottom: calc(var(--tabbar) + env(safe-area-inset-bottom, 0px) + var(--s3));
  width: max-content; max-width: calc(100% - 2 * var(--s4));
  pointer-events: none; opacity: 0; transform: translate(-50%, var(--s2));
  transition: transform var(--t-pantalla) var(--ease-out), opacity var(--t-micro) linear;
}
.toast.in { opacity: 1; transform: translate(-50%, 0); }
.toast > span {
  display: block; padding: 10px var(--s4); border-radius: var(--r-m); box-shadow: var(--shadow);
  background: var(--ink); color: var(--paper); font: 600 var(--fs-body)/1.3 var(--font-body); text-align: center; text-wrap: balance;
}
/* de noche, sobre el azul medio, como los avisos de conexión y de versión nueva (la tinta clara deslumbra) */
@media (prefers-color-scheme: dark) { .toast > span { background: var(--rule-2); color: var(--ink); } }
/* con el aviso de versión nueva a la vista, va encima de él; con una hoja abierta, abajo del todo */
body:has(> .update.in) .toast { bottom: calc(var(--tabbar) + env(safe-area-inset-bottom, 0px) + var(--s3) + 4.25rem); }
html.hoja-abierta .toast { bottom: calc(env(safe-area-inset-bottom, 0px) + var(--s4)); }

/* ---------- hoja que sube desde abajo (PC.sheet) ---------- */
/* Fondo oscuro y la hoja encima; se mueven con transform y opacity. La página de atrás no se desplaza mientras tanto. */
html.hoja-abierta { overflow: hidden; }
.hoja-fondo {
  position: fixed; inset: 0; z-index: 40; background: rgba(8, 16, 38, .5); touch-action: none;
  opacity: 0; transition: opacity var(--t-pantalla) linear;
}
.hoja-fondo.in { opacity: 1; }
.hoja {
  position: fixed; z-index: 41; left: 0; right: 0; bottom: 0; margin: 0 auto; width: 100%; max-width: 34rem;
  max-height: 88vh; max-height: 88dvh;
  display: flex; flex-direction: column; outline: none;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--card); color: var(--ink); border-radius: var(--r-l) var(--r-l) 0 0;
  box-shadow: 0 -6px 28px rgba(13, 21, 48, .2);
  transform: translateY(calc(100% + 24px));
  transition: transform var(--t-pantalla) var(--ease-out);
}
.hoja.in { transform: none; }
.hoja.arrastra { transition: none; }
/* la cabecera es el asa: se arrastra hacia abajo para cerrar */
.hoja-cab {
  position: relative; flex: none; display: flex; align-items: center; gap: var(--s2);
  min-height: 56px; padding: 14px 6px 4px var(--s4); touch-action: none;
}
.hoja-asa { position: absolute; top: 6px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--rule-2); }
.hoja-cab h2 { flex: 1; min-width: 0; font: 800 var(--fs-h2)/1.1 var(--font-display); text-transform: uppercase; letter-spacing: .03em; }
.hoja-x {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--muted); cursor: pointer; transition: transform var(--t-toque) var(--ease-out);
}
.hoja-x:active { transform: scale(.92); }
@media (hover: hover) { .hoja-x:hover { color: var(--ink); } }
.hoja-x svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.hoja-cuerpo {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: none; -webkit-overflow-scrolling: touch;
  padding: var(--s1) var(--s4) var(--s4);
}
/* con la lista corrida (con-sombra, core.js), una línea bajo la cabecera; en la de elegir jugador, bajo el campo, que es
   lo que queda arriba */
.con-sombra:not(.hoja-pk) .hoja-cab, .con-sombra .pk-cab { box-shadow: 0 1px 0 var(--rule); }
@media (prefers-color-scheme: dark) {
  .hoja-fondo { background: rgba(0, 0, 0, .6); }
  .hoja { box-shadow: 0 -8px 30px rgba(0, 0, 0, .5); }
}

/* ---------- Mi equipo: los 8 equipos (hoja y #/mi-equipo) ---------- */
.eq-txt { color: var(--ink-2); max-width: 62ch; }
.hoja-eq .eq-txt { margin-bottom: var(--s3); }
/* dos columnas; con la letra grande en un teléfono angosto, una */
.eq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); gap: var(--s2); }
.eq-op {
  display: flex; align-items: center; gap: var(--s2); min-height: 56px; min-width: 0; padding: var(--s2);
  border: 1px solid var(--rule-2); border-radius: var(--r-m); background: var(--card); color: var(--ink);
  font: inherit; text-align: left; cursor: pointer; transition: transform var(--t-toque) var(--ease-out);
  -webkit-user-select: none; user-select: none;
}
.eq-op:active { transform: scale(.97); }
@media (hover: hover) { .eq-op:hover { border-color: var(--accent); } }
/* insignia chica y nombre en letra de texto: los nombres largos (Cardenales, Magallanes) caben enteros en dos columnas a 360 px */
.eq-op .tchip { font-size: var(--fs-sm); }
.eq-nm { display: flex; flex-direction: column; min-width: 0; }
.eq-nm b { font: 700 var(--fs-body)/1.2 var(--font-body); overflow-wrap: break-word; }
.eq-op.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); }
/* sobre el fondo teñido, la ciudad en tinta secundaria (4,5:1 o más) */
.eq-op.on .eq-nm small { color: var(--ink-2); }
.eq-pie { display: flex; justify-content: center; margin-top: var(--s3); }
/* en la hoja, "Ahora no" queda siempre a la vista, abajo, aunque los equipos no quepan (letra grande). El relleno de
   abajo pasa de la hoja al pie: lo pegado se mide desde dentro del relleno, y por ahí se verían pasar los equipos. */
.hoja-eq .hoja-cuerpo { padding-bottom: 0; }
.hoja-eq .eq-pie {
  position: sticky; bottom: 0; z-index: 1; margin: var(--s3) calc(-1 * var(--s4)) 0; padding: var(--s3) var(--s4) var(--s4);
  background: var(--card); box-shadow: 0 -1px 0 var(--rule);
}
/* en la hoja de elegir jugador, el campo queda arriba mientras se recorren los resultados (ídem con el relleno de arriba) */
.hoja-pk .hoja-cuerpo { padding-top: 0; }
/* y su alto no depende de cuántos resultados hay: no salta con cada letra (con el teclado, core.js la acota con max-height) */
.hoja-pk { height: 88vh; height: 88dvh; }
.pk-cab { position: sticky; top: 0; z-index: 1; margin: 0 calc(-1 * var(--s4)); padding: var(--s1) var(--s4) var(--s2); background: var(--card); }
.eq-pagina { gap: var(--s4); }
/* compartir sin menú ni portapapeles: el enlace en un campo de solo lectura, ya marcado */
.hoja-enlace .enlace {
  display: block; width: 100%; min-height: 48px; margin-top: var(--s3); padding: 0 var(--s3);
  border: 1px solid var(--muted); border-radius: var(--r-m); background: var(--paper); color: var(--ink);
  font: 500 var(--fs-body)/1.2 var(--font-body);
}

/* ---------- la estrella de Mi equipo en la tarjeta de un juego ---------- */
/* antes del nombre: nunca la corta el "…" de un nombre largo */
.gc-fav { display: inline-block; width: .85em; height: .85em; margin-right: .3em; vertical-align: -.06em; fill: var(--fav); }
/* tarjeta muy angosta (sin insignia: 360 px con la letra al 150 % o más): el nombre ya no cabe con la estrella al lado.
   La estrella, del tamaño de la letra, va montada sobre el borde izquierdo de la tarjeta, a la altura de su fila (la
   tarjeta de Mi equipo, con-mio en juegos.js, deja ver lo que sale de su borde); los nombres quedan enteros y alineados. */
@container (max-width: 15rem) {
  .gcard.gc.con-mio { overflow: visible; }
  .gc-t.mio { position: relative; }
  .gc-t.mio .gc-fav { position: absolute; left: calc(-13px - .35em); top: 50%; width: .7em; height: .7em; margin: -.35em 0 0; }
}

/* ---------- Más: Mi equipo ---------- */
/* con la letra muy grande, el botón baja a su propia línea y el nombre no se parte letra por letra */
.ms-eq-fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); min-width: 0; }
.ms-eq-fila .tchip { font-size: var(--fs-lead); }
.ms-eq-nm { flex: 1 1 8em; min-width: 0; display: flex; flex-direction: column; }
.ms-eq-nm b { font: 700 var(--fs-lead)/1.2 var(--font-body); overflow-wrap: break-word; }
.ms-eq-fila .btn { flex: none; margin-left: auto; }
/* "Ver su ficha" va en el texto: 44 px de toque sin mover nada */
.ms-ficha { font-weight: 600; padding-block: max(0px, calc(22px - .5em)); }
.ms-otros summary { min-height: 44px; padding: 12px 0; cursor: pointer; color: var(--accent); font-weight: 600; }

/* ---------- búsqueda (#/buscar y la hoja de elegir jugador) ---------- */
.bq-back { display: inline-flex; align-items: center; gap: 2px; min-height: 48px; margin: -12px 0 -12px -12px; padding: 0 12px 0 6px; font-weight: 600; }
.bq-back:hover { text-decoration: none; }
.bq-back .ic { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.bq-campo {
  display: flex; align-items: center; gap: var(--s1); min-height: 48px; padding: 0 2px 0 14px;
  border: 1px solid var(--muted); border-radius: 999px; background: var(--card); color: var(--muted); /* borde a 3:1 o más */
}
.bq-campo:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.bq-campo > svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.bq-campo input {
  flex: 1; min-width: 0; height: 46px; margin: 0; padding: 0 var(--s1); border: 0; outline: none; background: none;
  color: var(--ink); font: 500 var(--fs-lead)/1.2 var(--font-body); -webkit-appearance: none; appearance: none;
}
.bq-campo input::placeholder { color: var(--muted); opacity: 1; }
.bq-campo input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.bq-x {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--muted); cursor: pointer;
}
.bq-x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.bq-res { display: flex; flex-direction: column; gap: var(--s4); }
.hoja .bq-res { margin-top: var(--s3); }
.bq-gr { display: flex; flex-direction: column; gap: 6px; }
.bq-h { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); min-height: 24px; }
.bq-h h2, .bq-h h3, .bq-hh { font: 700 var(--fs-cap)/1.2 var(--font-body); text-transform: uppercase; letter-spacing: .09em; color: var(--muted); }
/* "Borrar" de las recientes: texto chico con 44 px de toque, sin mover nada */
.bq-borra {
  position: relative; padding: 0; border: 0; background: none; color: var(--accent); cursor: pointer;
  font: 600 var(--fs-sm)/1.2 var(--font-body);
}
.bq-borra::after { content: ""; position: absolute; inset: -15px -12px; }
.bq-lista { list-style: none; margin: 0; padding: 0; background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-m); overflow: hidden; }
.hoja .bq-lista { border-color: var(--rule); }
.bq-lista > li + li { border-top: 1px solid var(--rule); }
.bq-it {
  display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 56px; margin: 0; padding: var(--s2) var(--s3);
  border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
  -webkit-user-select: none; user-select: none; transition: background-color var(--t-toque) linear;
}
.bq-it:hover { text-decoration: none; }
@media (hover: hover) { .bq-it:hover { background: var(--accent-soft); } }
.bq-it:active { background: var(--accent-soft); }
/* la opción activa con las flechas (el foco sigue en el campo) */
.bq-it.on { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.bq-it .tchip { flex: none; }
.bq-sin { flex: none; display: inline-grid; place-items: center; min-width: 2.75em; height: 1.65em; border-radius: var(--r-s); border: 1px dashed var(--rule-2); color: var(--muted); font: 700 var(--fs-cap)/1 var(--font-body); }
.bq-nm { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.bq-nm b { font: 600 var(--fs-lead)/1.2 var(--font-body); overflow-wrap: anywhere; }
.bq-nm small { font-variant-numeric: tabular-nums; }
.pk-nota { margin-top: 6px; }
.bq-nada { color: var(--ink-2); }
.bq-nada b { color: var(--ink); }
.bq-nota { color: var(--muted); font-size: var(--fs-sm); }
.bq-nota .nw { white-space: nowrap; }
/* el aviso de carga (o el error) bajo los equipos ya encontrados */
.bq-res + .bq-nota, .bq-res + .empty { margin-top: var(--s3); }

/* ---------- deslizar entre días (#/juegos) ---------- */
/* el gesto de lado es de la app (lo vertical y el zoom siguen siendo del navegador); mientras se desliza, lo que se sale
   de lado no hace la página más ancha */
#view.pc-dias { touch-action: pan-y pinch-zoom; }
/* y ocupa la pantalla entera, para que se pueda deslizar también debajo de la última tarjeta (sin hacer la página más
   alta: lo de arriba es la cabecera con su franja de 6 px en --top-h; lo de abajo, la barra y el relleno del body, 12 px) */
#view.pc-dias {
  min-height: calc(100vh - var(--top-h, 62px) - var(--tabbar) - env(safe-area-inset-bottom, 0px) - 6px);
  min-height: calc(100dvh - var(--top-h, 62px) - var(--tabbar) - env(safe-area-inset-bottom, 0px) - 6px);
}
html.pc-desliza { overflow-x: hidden; }
/* pasado el umbral, la flecha de ese lado se marca: al soltar, se va a ese día */
.datebar .db-btn.sw-listo { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent); }