/* Coruña Atlantics — Consola de gestión
   Pensada para el móvil de pie en el campo: objetivos táctiles grandes,
   contraste alto y nada de tablas que obliguen a hacer zoom. */

:root {
  --ink:    #040d12;
  --deep:   #071520;
  --surf:   #0d2030;
  --surf-2: #123044;
  --line:   #1d4056;
  --teal:   #4ECDC8;
  --teal-d: #2a9a96;
  --gold:   #D4A843;
  --goldf:  #F0C060;
  --text:   #EEF4F6;
  --muted:  #8aa6b4;
  --ok:     #48c78e;
  --warn:   #e8b339;
  --bad:    #f2555a;

  --r:      14px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  /* Arriba tambien hay zona prohibida: el reloj, la señal y, en los iPhone
     nuevos, la isla. Con viewport-fit=cover y la barra de estado en
     translucido, la app se dibuja por debajo de todo eso, asi que hay que
     apartarse a mano. Faltaba, y en el movil instalado la cabecera y el icono
     de la tienda quedaban debajo del reloj, sin poder tocarlos. */
  --safe-t: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  color: var(--text);
  font-family: 'Barlow', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Nada de tirar hacia abajo para recargar: la app no se recarga a mano, y ese
   gesto en mitad de una lista es siempre un accidente.
   Va SOLO en html. En el body no serviria de nada —solo afecta a contenedores
   de scroll— y ademas fue la mitad del fallo de mas abajo. */
html { overscroll-behavior-y: none; }

/* El campo, visto desde la banda: líneas de yarda, las de cada cinco más
   marcadas, y las marcas de hash en el centro.

   Va en una capa fija propia y NO en background-attachment: fixed, que Safari
   de iPhone ignora y dejaba la pantalla lisa. */
/* El color va tambien en html. En una app instalada, si solo lo lleva el body y
   el contenido no llega abajo del todo, iOS pinta de blanco la franja del
   indicador de inicio: se ve una banda clara bajo una pantalla oscura. */
html { background: var(--ink); }

/* El body va transparente y el degradado se pinta DENTRO de la capa de la
   filigrana, como su ultima franja.

   Por que: la capa va en body::before con z-index -1, y un hijo con z-index
   negativo se pinta por detras del fondo de su propio padre. Con un degradado
   opaco en el body, la filigrana quedaba tapada por el. Llevaba asi desde
   siempre —las lineas del campo no se han visto nunca— y solo salio a la luz al
   poner encima algo que si se tenia que notar: los tridentes del tablon.

   Subir el z-index a 0 no vale: entonces la capa taparia el contenido que no
   esta posicionado, como la pantalla de entrar. */
body { background: transparent; min-height: 100dvh; }

body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none;
  background:
    /* resplandor de los focos */
    radial-gradient(130% 62% at 50% -12%, rgba(78,205,200,.16), transparent 62%),
    /* marcas de hash */
    repeating-linear-gradient(to bottom,
      transparent 0 42px, rgba(238,244,246,.10) 42px 44px),
    /* línea de cada cinco yardas */
    repeating-linear-gradient(to bottom,
      transparent 0 219px, rgba(238,244,246,.11) 219px 221px),
    /* línea de yarda */
    repeating-linear-gradient(to bottom,
      transparent 0 43px, rgba(238,244,246,.055) 43px 44px),
    /* el fondo, la ultima franja: debajo de todo lo demas */
    linear-gradient(180deg, #061119 0%, var(--ink) 42%);
  background-size: auto, 26px 100%, auto, auto, auto;
  background-position: center, center, center, center, center;
  background-repeat: no-repeat, repeat-y, repeat, repeat, no-repeat;
}

h1, h2, h3 { font-family: 'Anton', sans-serif; letter-spacing: .03em; margin: 0; font-weight: 400; }

button, input, select, textarea { font-family: inherit; font-size: 1rem; color: inherit; }
button { cursor: pointer; }

[hidden] { display: none !important; }

/* --- Estructura ---------------------------------------------------------- */

#app { min-height: 100dvh; display: flex; flex-direction: column; }

/* Cinturón: por muy larga que sea una palabra o un importe, la página no se
   desplaza en horizontal. Un desborde asi es siempre un fallo, no un diseño.

   SOLO en html, y esto no es una manía de estilo. Cuando html lleva un overflow
   distinto de `visible`, el del body deja de propagarse al viewport y el body
   pasa a ser SU PROPIO contenedor de scroll. Como el body crece con lo que
   tiene dentro, ese contenedor nunca desborda: no tiene recorrido. La rueda y
   el dedo apuntan primero a el, no consiguen moverlo, y el gesto deberia
   encadenarse al de arriba… salvo que overscroll-behavior-y: none es
   exactamente lo que bloquea ese encadenamiento. Resultado: la pagina solo
   bajaba arrastrando la barra lateral, que mueve el viewport por otro camino.
   Con el overflow solo en html, el body vuelve a ser un bloque normal. */
html { overflow-x: hidden; }
.vista, .hoja-panel { overflow-wrap: anywhere; }

.topbar {
  position: sticky; top: 0; z-index: 20;
  isolation: isolate;
  display: flex; align-items: center; gap: .75rem;
  padding: calc(.9rem + var(--safe-t)) 1rem .9rem;
  background: linear-gradient(180deg, var(--deep), rgba(7,21,32,.92));
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(8px);
}
.topbar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, var(--gold), var(--teal) 45%, transparent 78%);
  height: 2px;
}
/* La cabeza de Poseidon, no el logotipo entero: el nombre del club ya esta en
   la app y repetirlo en cada pantalla no aporta nada. */
.cabeza-marca {
  width: 34px; height: 34px; flex: 0 0 34px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.5));
}
.topbar h1 { font-size: 1.25rem; }
.topbar .sub {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--teal);
}
.topbar .spacer { margin-left: auto; }

.vista {
  position: relative; z-index: 1;   /* por encima de la filigrana de fondo */
  flex: 1; padding: 1rem 1rem calc(5.5rem + var(--safe-b));
  max-width: 900px; width: 100%; margin: 0 auto;
}

.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: rgba(7,21,32,.97);
  border-top: 1px solid var(--line);
  padding-bottom: var(--safe-b);
  backdrop-filter: blur(10px);
}
.tabbar a {
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  padding: .6rem .2rem .7rem;
  text-decoration: none; color: var(--muted);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
}
.tabbar a svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.tabbar a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* En pantallas estrechas cinco pestañas con etiquetas largas se cortan. */
@media (max-width: 360px) {
  .tabbar a { font-size: .64rem; letter-spacing: .04em; padding-inline: .1rem; }
}
.tabbar a { position: relative; }
.tabbar a[aria-current="page"] { color: var(--teal); }
.tabbar a[aria-current="page"]::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 30px; height: 2px; background: var(--teal); border-radius: 0 0 2px 2px;
}

/* --- Tipografía de apoyo -------------------------------------------------- */

.eyebrow {
  display: flex; align-items: center; gap: .6rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin: 1.5rem 0 .6rem;
}
.eyebrow .cuenta {
  margin-left: auto;
  font-family: 'Anton', sans-serif; font-size: .95rem; letter-spacing: 0;
  color: var(--teal); font-variant-numeric: tabular-nums;
}
.eyebrow::before {
  content: ''; flex: 0 0 26px; height: 3px;
  background: var(--gold); border-radius: 2px;
}
.eyebrow:first-child { margin-top: 0; }
.muted { color: var(--muted); }
.vacio {
  color: var(--muted); text-align: center; line-height: 1.6;
  padding: 2.8rem 1rem 3rem;
  border: 1px dashed var(--line); border-radius: var(--r);
  background: rgba(13,32,48,.45);
}

/* --- Tarjetas ------------------------------------------------------------ */

/* La tarjeta lleva un filo de luz arriba; la fila, no. Esa diferencia es la
   que separa "bloque destacado" de "elemento de lista". */
.card {
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}
.card + .card { margin-top: .7rem; }

.cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.cifras > * { min-width: 0; }
.cifra {
  background: var(--surf); border: 1px solid var(--line);
  border-radius: var(--r); padding: .9rem .7rem; text-align: center;
}
.cifra { min-width: 0; }
.cifra .n {
  font-family: 'Anton', sans-serif;
  font-size: clamp(1.15rem, 5.2vw, 1.7rem);   /* "1.234,56 €" cabe igual */
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.cifra .l {
  font-family: 'Barlow Condensed', sans-serif; font-size: .72rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: .35rem;
  overflow-wrap: anywhere; hyphens: auto;
}
.cifra.ok  .n { color: var(--ok); }
.cifra.gold .n { color: var(--goldf); }
.cifra.bad .n { color: var(--bad); }

/* --- Listas -------------------------------------------------------------- */

.lista { display: flex; flex-direction: column; gap: .45rem; }

.fila {
  display: flex; align-items: center; gap: .8rem;
  width: 100%; text-align: left;
  background: var(--surf); border: 1px solid var(--line);
  border-radius: 11px; padding: .75rem .85rem;
  transition: border-color .15s, background .15s;
}
button.fila:hover { border-color: var(--teal-d); background: var(--surf-2); }
button.fila:active { transform: scale(.995); }

/* --- Roster: la plantilla con cara de plantilla -------------------------- */
/* Un solo color para todo el equipo. Estuvo repartido por unidades —teal el
   ataque, oro la defensa— y sobraba: en flag la misma gente juega en los dos
   lados, asi que la division pintaba una frontera que en el campo no existe. */
.muro { --unidad: var(--teal); }

/* Cabecera: el tamaño del equipo de un vistazo. */
.tira-plantilla {
  display: flex; gap: 1.2rem; flex-wrap: wrap;
  padding: .1rem 0 .9rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}
.tira-plantilla strong {
  font-family: 'Anton', sans-serif; font-size: 1.15rem; color: var(--text);
  letter-spacing: 0; margin-right: .25rem;
}

/* El muro de camisetas.
   El dorsal no acompaña al nombre: es el fondo de la camiseta, como en la
   espalda. Ocupa la tarjeta entera en degradado y el nombre va montado encima.
   Dos por fila en un movil: con cuatro el numero deja de ser grande. */
.muro {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: .7rem;
}

.camiseta {
  container-type: inline-size;
  position: relative;
  display: flex; flex-direction: column;
  aspect-ratio: 5 / 6;
  padding: .85rem .7rem .75rem;
  border: 1px solid var(--line); border-radius: var(--r);
  background: linear-gradient(180deg, var(--surf-2), var(--surf));
  color: var(--text); text-align: center; overflow: hidden;
  transition: border-color .15s, transform .12s;
}
.camiseta:hover { border-color: var(--unidad); }
.camiseta:active { transform: scale(.985); }

/* El cuello, del color de su unidad. */
.camiseta::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--unidad);
}

/* Un velo hacia abajo: sin el, la posicion y la chapa caen justo encima de la
   panza del numero y no hay sombra de texto que las salve. */
.camiseta::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(4,13,18,.72) 0%, transparent 26%),
    linear-gradient(180deg, transparent 54%, rgba(4,13,18,.82) 84%);
  z-index: 0; pointer-events: none;
}

/* El numero, de fondo. Va en degradado recortado sobre el propio texto: fuerte
   en el centro y desvanecido arriba y abajo, para que el nombre se lea encima
   y el pie no compita con el.
   
   La caja se ajusta al texto en vez de ocupar la tarjeta: con background-clip
   el degradado solo pinta dentro de la caja del elemento, asi que lo que se
   saliera de ella no se veria — desaparecia media cifra.
   
   El tamaño sale de la fuente medida, no a ojo: en Anton un digito mide 0.86em
   de alto, asi que 1/0.86 del ancho de la tarjeta lo lleva de borde a borde. */
.camiseta .num {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-family: 'Anton', sans-serif;
  font-size: 9rem;                   /* respaldo si no hay unidades de contenedor */
  font-size: 165cqw;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--unidad) 22%, transparent) 0%,
    var(--unidad) 42%,
    color-mix(in srgb, var(--unidad) 55%, transparent) 78%,
    transparent 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  z-index: 0; pointer-events: none;
}

/* Dos cifras a esa altura miden 0.99em de ancho, mas que la tarjeta entera. Se
   condensan para que quepan enteras: en una camiseta los dorsales anchos van
   estrechados igual, no recortados. */
.camiseta .num.d2 { transform: translate(-50%, -50%) scaleX(.68); }
.camiseta .num.sin { font-size: 3.2rem; background: none; color: var(--line); }

/* El nombre, montado sobre el numero. La sombra es lo que lo despega. */
.camiseta .quien {
  position: relative; z-index: 1;
  min-width: 0; max-width: 100%;
  text-shadow: 0 2px 10px rgba(4,13,18,.85), 0 0 3px rgba(4,13,18,.9);
}
.camiseta .pila {
  display: block; font-size: .74rem; letter-spacing: .06em; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  /* Guarda su hueco aunque este vacia: quien lleva nombre de camiseta no tiene
     linea de arriba, y sin esto su nombre quedaba mas alto que el de al lado. */
  min-height: 1.15em;
}
.camiseta .ape {
  display: block;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: 1.12rem; line-height: 1.1; letter-spacing: .05em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.camiseta .pie {
  position: relative; z-index: 1; margin-top: auto;
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
}
.camiseta .pos {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  text-shadow: 0 1px 6px rgba(4,13,18,.9);
}
.camiseta .galon { top: 8px; left: 8px; border-color: var(--surf-2); z-index: 2; }

/* Una fila que se enciende y se apaga: las llaves de cada seccion. */
.fila[aria-pressed="true"] { border-color: var(--teal-d); background: rgba(78,205,200,.08); }

.dorsal {
  flex: 0 0 52px; height: 52px;
  display: grid; place-items: center;
  background: linear-gradient(160deg, var(--surf-2), #0a1a26);
  border: 1px solid var(--line); border-radius: 10px;
  font-family: 'Anton', sans-serif; font-size: 1.5rem; color: var(--teal);
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.dorsal.sin { color: var(--muted); font-size: 1.1rem; }

/* El galon del capitan, en la esquina del dorsal y en oro: en la camiseta la C
   va cosida al lado del numero, no en una etiqueta aparte. */
.dorsal { position: relative; }
.galon {
  position: absolute; top: -7px; left: -7px;
  width: 21px; height: 21px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gold); color: var(--ink);
  font-family: 'Anton', sans-serif; font-size: .82rem; line-height: 1;
  border: 2px solid var(--surf);
}

.fila .info { min-width: 0; flex: 1; }
.fila .nom {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600;
  font-size: 1.08rem; letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fila .meta {
  font-size: .82rem; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fila .dcha { margin-left: auto; text-align: right; flex-shrink: 0; max-width: 45%; }
.fila .importe { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; }

/* Contacto rápido: lo primero de la ficha, porque es lo que más se usa. */
.contacto { display: flex; gap: .6rem; margin-bottom: .7rem; }
.contacto .btn { flex: 1; }

/* La celda de fecha del calendario reutiliza el dorsal, en oro si es partido. */
.dorsal.partido { color: var(--goldf); border-color: rgba(212,168,67,.5); }

/* --- Etiquetas de estado ------------------------------------------------- */

.tag {
  display: inline-block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .72rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  padding: .18rem .5rem; border-radius: 999px;
  border: 1px solid currentColor;
}
.tag.ok   { color: var(--ok); }
.tag.warn { color: var(--warn); }
.tag.bad  { color: var(--bad); }
.tag.n    { color: var(--muted); }
.tag.teal { color: var(--teal); }

.puntos { display: flex; gap: .3rem; }
.punto { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.punto.ok { background: var(--ok); }
.punto.warn { background: var(--warn); }
.punto.bad { background: var(--bad); }

/* --- Controles ----------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  padding: .8rem 1.1rem; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surf-2); color: var(--text);
  min-height: 46px;
}
.btn:hover { border-color: var(--teal-d); }
.btn.primario { background: var(--teal); border-color: var(--teal); color: var(--ink); }
.btn.primario:hover { background: var(--goldf); border-color: var(--goldf); }
.btn.oro { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.btn.fantasma { background: transparent; }
.btn.peligro { color: var(--bad); border-color: var(--bad); background: transparent; }
.btn.ancho { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-icono {
  background: transparent; border: 1px solid var(--line); border-radius: 10px;
  width: 40px; height: 40px; display: grid; place-items: center; color: var(--text);
}
.btn-icono svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.9; }

.campo { margin-bottom: .85rem; }
.campo label {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .3rem;
}
.campo input, .campo select, .campo textarea {
  width: 100%; padding: .7rem .8rem;
  background: var(--deep); border: 1px solid var(--line); border-radius: 10px;
  color: var(--text); min-height: 46px;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--teal);
}
.campo textarea { min-height: 80px; resize: vertical; }
.campo .ayuda { font-size: .8rem; color: var(--muted); margin-top: .3rem; }

/* Dos columnas cuando quepan, una cuando no.
   Los campos de fecha y hora de iOS tienen anchura mínima propia y no se dejan
   encoger: en dos columnas fijas se desbordaban de su celda y se montaban
   encima de la de al lado. El min-width:0 es lo que se lo impide, y el auto-fit
   evita que queden apretados en pantallas estrechas. */
.dos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: .7rem;
}
.dos > * { min-width: 0; }
.campo input, .campo select, .campo textarea { min-width: 0; max-width: 100%; }

/* Safari en iOS trata los campos de fecha y hora como un control nativo con
   anchura propia: ignora el width que se les da y el recuadro se sale de su
   columna, metiendose debajo del campo de al lado. Se nota tambien en que el
   texto sale centrado en vez de a la izquierda.
   Quitarles la apariencia nativa hace que se comporten como un input normal. */
.campo input[type="date"],
.campo input[type="time"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  text-align: left;
}

/* Y por si acaso: fila propia. Aunque un navegador vuelva a inventarse el
   ancho, no tendra vecino al que pisar. */
.dos .campo:has(input[type="date"]),
.dos .campo:has(input[type="time"]) { grid-column: 1 / -1; }

.check { display: flex; align-items: center; gap: .6rem; padding: .55rem 0; }
.check input { width: 22px; height: 22px; accent-color: var(--teal); }

.buscador { position: relative; margin-bottom: .7rem; }
.buscador input { width: 100%; padding: .75rem .9rem; background: var(--surf); border: 1px solid var(--line); border-radius: 10px; color: var(--text); min-height: 46px; }

.filtros { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .5rem; margin-bottom: .6rem; scrollbar-width: none; }
.filtros::-webkit-scrollbar { display: none; }
.filtros button {
  flex-shrink: 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .82rem; letter-spacing: .08em; text-transform: uppercase;
  padding: .45rem .8rem; border-radius: 999px;
  background: transparent; border: 1px solid var(--line); color: var(--muted);
}
.filtros button[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: var(--ink); font-weight: 600; }

/* --- Hoja modal ---------------------------------------------------------- */

.hoja {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(2,8,12,.72);
  animation: fundido .18s ease;
}
.hoja-panel {
  width: 100%; max-width: 640px;
  max-height: 92dvh; overflow-y: auto;
  background: var(--deep);
  border: 1px solid var(--line); border-bottom: none;
  border-radius: 20px 20px 0 0;
  padding: 1.1rem 1.1rem calc(1.5rem + var(--safe-b));
  animation: subir .22s cubic-bezier(.2,.8,.3,1);
}
.hoja-cab { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.hoja-cab h2 { font-size: 1.3rem; }
.hoja-cab .spacer { margin-left: auto; }

@keyframes fundido { from { opacity: 0; } }
@keyframes subir { from { transform: translateY(18px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .hoja, .hoja-panel { animation: none; }
}

/* --- Avisos flotantes ---------------------------------------------------- */

#avisos {
  position: fixed; left: 50%; bottom: calc(5.5rem + var(--safe-b)); z-index: 90;
  transform: translateX(-50%);
  display: flex; flex-direction: column; gap: .5rem; align-items: center;
  width: min(92vw, 480px); pointer-events: none;
}
.aviso {
  background: var(--surf-2); border: 1px solid var(--teal-d);
  border-radius: 10px; padding: .7rem 1rem; font-size: .95rem;
  box-shadow: 0 8px 28px rgba(0,0,0,.45);
  animation: subir .2s ease;
}
.aviso.error { border-color: var(--bad); color: #ffd9da; }

/* --- Login --------------------------------------------------------------- */

.login {
  min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(2rem + var(--safe-t)) 1.5rem calc(2rem + var(--safe-b));
  text-align: center; gap: .5rem;
}
.login .login-marca { width: min(66vw, 260px); margin-bottom: 1rem; }
.login h1 { font-size: 2rem; }
.login p { color: var(--muted); max-width: 34ch; line-height: 1.55; margin: .2rem 0 1.2rem; }
.login form { width: 100%; max-width: 340px; text-align: left; }
.aviso-cerrojo {
  color: var(--goldf); font-size: .92rem; line-height: 1.5;
  max-width: 32ch; margin: 0 0 1rem;
}

/* --- Avisos ---------------------------------------------------------------- */

.aviso-fila.urgente { border-left: 3px solid var(--bad); }
.aviso-fila .chincha { font-size: .9em; }

/* Sin leer: el borde de color y el punto hacen el trabajo, no un fondo distinto
   que ensuciaría la lista entera. */
.aviso-fila.sinleer { border-color: var(--teal-d); }
.aviso-fila.sinleer .nom { font-weight: 700; }

.punto-nuevo {
  flex: 0 0 9px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--teal); margin-top: .45rem;
}

/* El cuerpo del aviso solo se despliega al tocarlo: la lista tiene que poder
   leerse de un vistazo. */
.aviso-cuerpo {
  margin: .5rem 0 0; line-height: 1.55; white-space: pre-wrap;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; color: var(--muted); font-size: .92rem;
}
.aviso-fila.abierto .aviso-cuerpo { -webkit-line-clamp: unset; color: var(--text); }

/* --- Código QR -------------------------------------------------------------- */

.qr {
  display: grid; place-items: center;
  width: min(72vw, 260px); margin: 0 auto;
  padding: .8rem; border-radius: 14px;
  background: #fff;                      /* un QR necesita fondo claro para leerse */
}
.qr svg { width: 100%; height: auto; display: block; }

.enlace-app {
  margin: .8rem 0 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .95rem; letter-spacing: .06em;
  color: var(--teal); word-break: break-all;
}

/* --- Competiciones y estadisticas ------------------------------------------ */

.tres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
  gap: .6rem;
}
.tres > * { min-width: 0; }

/* La clasificacion es una tabla, pero sin table: en un movil una tabla de
   verdad obliga a hacer zoom. */
.tabla-clas { display: flex; flex-direction: column; gap: .3rem; }

.fila-clas {
  display: grid;
  grid-template-columns: 2rem 1fr 2rem 2rem 2rem 2.5rem;
  align-items: center; gap: .4rem;
  padding: .6rem .7rem; text-align: left;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surf); color: var(--text);
  font-size: .92rem;
}
.fila-clas.nuestro { border-color: var(--teal); background: rgba(78,205,200,.10); }

/* En la lista de partidos de la liga, los nuestros. */
.fila.destacada { border-color: rgba(78,205,200,.45); background: rgba(78,205,200,.07); }
.fila.destacada .nom { color: var(--teal); }
.fila-clas .pos {
  font-family: 'Anton', sans-serif; color: var(--muted);
  font-variant-numeric: tabular-nums; text-align: center;
}
.fila-clas.nuestro .pos { color: var(--teal); }
.fila-clas .equipo {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 1.02rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.fila-clas .dato {
  text-align: center; color: var(--muted); font-variant-numeric: tabular-nums;
}
.fila-clas .dato.fuerte { color: var(--text); font-weight: 600; }

.leyenda-clas {
  display: grid;
  grid-template-columns: 2rem 1fr 2rem 2rem 2rem 2.5rem;
  gap: .4rem; padding: 0 .7rem; margin: .4rem 0 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.leyenda-clas span { text-align: center; }
.leyenda-clas span:nth-child(2) { text-align: left; }

.marcador {
  font-family: 'Anton', sans-serif; font-size: 1.15rem;
  font-variant-numeric: tabular-nums; color: var(--muted);
}
.marcador.gana { color: var(--ok); }
.marcador.pierde { color: var(--bad); }

/* Marcador editable en la pantalla del partido */
.marcador-form { display: flex; align-items: flex-end; gap: .6rem; }
.marcador-form .campo { flex: 1; }
.marcador-form .campo input {
  text-align: center; font-family: 'Anton', sans-serif; font-size: 1.4rem;
}
.marcador-form .guion { font-family: 'Anton', sans-serif; color: var(--muted); padding-bottom: .8rem; }

.rejilla-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: .6rem;
}
.rejilla-stats > * { min-width: 0; }

.puesto {
  flex: 0 0 1.6rem;
  font-family: 'Anton', sans-serif; color: var(--muted);
  font-variant-numeric: tabular-nums; text-align: center;
}
.cifra-stat {
  font-family: 'Anton', sans-serif; font-size: 1.5rem; line-height: 1;
  color: var(--teal); font-variant-numeric: tabular-nums;
}
.et-stat {
  font-family: 'Barlow Condensed', sans-serif; font-size: .68rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}

/* --- Equipacion ------------------------------------------------------------ */

.miniatura {
  flex: 0 0 52px; width: 52px; height: 52px;
  border-radius: 10px; object-fit: cover;
  background: var(--surf-2); border: 1px solid var(--line);
}
.miniatura.sin { background: linear-gradient(160deg, var(--surf-2), var(--deep)); }

.fila.producto { align-items: flex-start; }
.fila.producto.inactivo { opacity: .55; }

.foto-producto {
  display: block; width: 100%; max-height: 42vh;
  object-fit: cover; border-radius: 14px;
  margin-bottom: 1rem; background: var(--surf-2);
}

.precio-grande {
  font-family: 'Anton', sans-serif; font-size: 1.9rem; line-height: 1;
  color: var(--goldf); margin: .6rem 0 0;
}

/* Cuantas encargar de cada talla: la unica cifra que hace falta para llamar al
   proveedor. */
.tallas-resumen { display: flex; flex-wrap: wrap; gap: .5rem; }
.talla-cuenta {
  display: flex; align-items: baseline; gap: .4rem;
  padding: .4rem .7rem; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surf);
}
.talla-cuenta .t {
  font-family: 'Barlow Condensed', sans-serif; font-size: .82rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.talla-cuenta .n {
  font-family: 'Anton', sans-serif; font-size: 1.15rem; color: var(--teal);
  font-variant-numeric: tabular-nums;
}

/* El catalogo del jugador: la foto manda, porque es lo que se compra. */
.catalogo {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: .7rem;
}
.tarjeta-producto {
  display: flex; flex-direction: column; text-align: left;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surf); overflow: hidden; padding: 0;
  color: var(--text); min-width: 0;
}
.tarjeta-producto img,
.tarjeta-producto .sin-foto {
  width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
  background: linear-gradient(160deg, var(--surf-2), var(--deep));
}
.tarjeta-producto .cuerpo { padding: .7rem .8rem .85rem; }
.tarjeta-producto .nom {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600;
  font-size: 1.02rem; line-height: 1.2;
}
.tarjeta-producto .precio {
  font-family: 'Anton', sans-serif; color: var(--goldf);
  font-size: 1.1rem; margin-top: .3rem;
}

.subir-foto {
  display: grid; place-items: center;
  min-height: 150px; border-radius: 12px;
  border: 1px dashed var(--line);
  background: rgba(13,32,48,.5);
  overflow: hidden; cursor: pointer;
}
.subir-foto img { width: 100%; height: 100%; max-height: 240px; object-fit: cover; }
.subir-foto .pista {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .9rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); text-align: center; padding: 1rem;
}

/* --- Elegir dorsal --------------------------------------------------------- */
/* Una casilla y a correr. Antes habia una rejilla de cien numeros que ocupaba
   la pantalla entera de Mi ficha, para algo que se elige una vez. */

.dorsal-elegir { display: flex; align-items: flex-end; gap: .8rem; }
.dorsal-elegir .dorsal.grande { flex: 0 0 62px; height: 62px; font-size: 2rem; }
.dorsal-elegir .btn { flex: 0 0 auto; }

@media (max-width: 400px) {
  .dorsal-elegir { flex-wrap: wrap; }
  .dorsal-elegir .btn { width: 100%; }
}

/* --- Alta de un jugador nuevo --------------------------------------------- */

.alta { max-width: 480px; margin: 0 auto; padding: 1.5rem 0 2rem; }
.alta-marca { display: block; width: min(52vw, 200px); margin: 0 auto .8rem; }
.alta h1 { font-size: clamp(1.9rem, 8vw, 2.4rem); text-align: center; }
.alta-intro {
  text-align: center; color: var(--muted); line-height: 1.6;
  max-width: 34ch; margin: .6rem auto 1.6rem;
}

/* --- Cargando ------------------------------------------------------------ */

.cargando { display: grid; place-items: center; padding: 3rem 1rem; }
.spinner {
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--teal);
  animation: girar .8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* --- Menú -----------------------------------------------------------------
   El logotipo principal preside la pantalla. El halo de detrás lo despega del
   fondo oscuro sin recuadrarlo. */

.menu { position: relative; }

.menu-portada {
  position: relative;
  display: grid; place-items: center;
  padding: 1.5rem 1rem 1.6rem;
}
.menu-portada {
  border-radius: 18px;
  border-top: 2px solid var(--gold);
  background:
    radial-gradient(62% 62% at 50% 42%, rgba(78,205,200,.20), transparent 72%),
    repeating-linear-gradient(to bottom,
      transparent 0 43px, rgba(238,244,246,.075) 43px 44px),
    linear-gradient(180deg, rgba(18,48,68,.55), rgba(7,21,32,.15));
  overflow: hidden;
}
.menu-portada::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(70% 60% at 50% 120%, rgba(4,13,18,.75), transparent 70%);
  pointer-events: none;
}
.menu-portada img {
  position: relative;
  width: min(74vw, 330px); height: auto;
  filter: drop-shadow(0 10px 26px rgba(0,0,0,.55));
}

.menu-saludo { text-align: center; margin-bottom: 1.5rem; }
.menu-saludo .frase {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.15rem; letter-spacing: .02em;
  color: var(--text); margin: .35rem 0 0;
}

.rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }

.baldosa {
  position: relative;
  display: flex; flex-direction: column; gap: .15rem;
  min-height: 122px;
  padding: 1rem .9rem 1.05rem;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(78,205,200,.10), transparent 62%),
    var(--surf);
  text-decoration: none; color: var(--text);
  overflow: hidden;
  transition: border-color .15s, transform .12s, background .15s;
}
.baldosa::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--teal);
}
.baldosa:hover { border-color: var(--teal-d); }
.baldosa:active { transform: scale(.985); }

.baldosa svg { width: 26px; height: 26px; stroke: var(--teal); fill: none; stroke-width: 1.7; margin-bottom: .55rem; }

/* Oro para lo que es dinero, teal para lo que son personas y papeles. El color
   deja de ser decoración y dice de qué va cada baldosa antes de leerla. */
.baldosa[data-area="dinero"] {
  background:
    radial-gradient(125% 95% at 100% 0%, rgba(212,168,67,.22), transparent 64%),
    var(--surf);
}
.baldosa[data-area="dinero"]::before { background: var(--gold); }
.baldosa[data-area="ajuste"]::before { background: var(--line); }
.baldosa[data-area="dinero"] svg { stroke: var(--goldf); }
.baldosa[data-area="dinero"]:hover { border-color: var(--gold); }

.baldosa[data-area="ajuste"] { background: var(--surf); }
.baldosa[data-area="ajuste"] svg { stroke: var(--muted); }
.baldosa .t {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 1.18rem; letter-spacing: .04em; text-transform: uppercase;
}
.baldosa .b { font-size: .82rem; color: var(--muted); line-height: 1.35; }

/* Lo urgente, encima de las baldosas: una linea por cosa, sin euros. */
.pendiente {
  display: flex; flex-direction: column; gap: .35rem;
  margin-bottom: 1.1rem;
}
.pendiente-fila {
  display: flex; align-items: center; gap: .7rem;
  padding: .65rem .85rem;
  border-left: 3px solid var(--gold);
  background: rgba(212,168,67,.10);
  border-radius: 0 10px 10px 0;
  text-decoration: none; color: var(--text);
  font-size: .95rem; line-height: 1.35;
}
.pendiente-fila .flecha { margin-left: auto; color: var(--goldf); }

/* Contador dentro de una pastilla de filtro */
.cuenta-chip {
  display: inline-grid; place-items: center;
  min-width: 1.15rem; height: 1.15rem; padding: 0 .25rem;
  border-radius: 999px; background: var(--gold); color: var(--ink);
  font-size: .72rem; font-weight: 700;
}

/* Aviso numérico, nunca una cifra de dinero. */
.chincheta {
  position: absolute; top: .8rem; right: .85rem;
  min-width: 22px; height: 22px; padding: 0 .35rem;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--gold); color: var(--ink);
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .82rem;
}

.menu-pie {
  text-align: center; margin-top: 1.8rem;
  font-family: 'Barlow Condensed', sans-serif;
  letter-spacing: .22em; text-transform: uppercase; color: var(--teal);
  opacity: .55;
}

/* Entrada escalonada. Solo al abrir la pantalla, y solo si el sistema no pide
   lo contrario: el contenido está visible de por sí, la animación no lo revela. */
@media (prefers-reduced-motion: no-preference) {
  .rejilla > *, .lista > *, .cifras > * {
    animation: entrar .34s cubic-bezier(.2,.7,.3,1) backwards;
  }
  .rejilla > :nth-child(1), .lista > :nth-child(1), .cifras > :nth-child(1) { animation-delay: .02s; }
  .rejilla > :nth-child(2), .lista > :nth-child(2), .cifras > :nth-child(2) { animation-delay: .05s; }
  .rejilla > :nth-child(3), .lista > :nth-child(3), .cifras > :nth-child(3) { animation-delay: .08s; }
  .rejilla > :nth-child(4), .lista > :nth-child(4) { animation-delay: .11s; }
  .rejilla > :nth-child(5), .lista > :nth-child(5) { animation-delay: .14s; }
  .rejilla > :nth-child(6), .lista > :nth-child(6) { animation-delay: .17s; }
  .lista > :nth-child(n+7) { animation-delay: .2s; }
}

@keyframes entrar {
  from { opacity: 0; transform: translateY(9px); }
}

/* Filigrana común al resto de pantallas: presencia de marca sin estorbar. */
body:not(.jugador)::after {
  content: '';
  position: fixed; right: -3rem; bottom: calc(4.5rem + var(--safe-b));
  width: 190px; height: 300px;
  background: url('../img/tridente.webp') no-repeat center / contain;
  opacity: .045;
  pointer-events: none; z-index: 0;
}

/* --- La app del jugador ---------------------------------------------------- */

/* El dorsal del jugador ocupando el fondo de sus pantallas, como el número de
   una camiseta: relleno con un degradado tenue y contorno marcado.

   Antes casi no se veía, y no era solo cuestión de opacidad: las tarjetas son
   opacas y lo tapaban, así que solo asomaba por los huecos. Por eso en las
   pantallas del jugador las superficies pasan a ser translúcidas y el número se
   transparenta a través de ellas.

   Si no tiene dorsal asignado, --dorsal está vacío y no se pinta nada. */
body.jugador::after {
  content: var(--dorsal, "");
  position: fixed; z-index: 0;
  /* Ocupa la pantalla entera, centrado y desbordando por los lados: es el fondo
     de la app, no una marca en una esquina. Al ser tan grande el relleno baja y
     el peso lo lleva el contorno; si no, el texto de encima deja de leerse. */
  inset: 0;
  display: grid; place-items: center;
  font-family: 'Anton', sans-serif;
  /* Se ajusta al ancho, no al alto. Un dorsal de dos cifras mide de ancho casi
     lo mismo que un movil, asi que forzarlo a llenar tambien el alto lo recorta
     por los dos lados y deja de leerse como un numero. */
  font-size: min(112vw, 92vh); line-height: .78;
  letter-spacing: -.05em;
  color: transparent;
  background: linear-gradient(165deg, rgba(78,205,200,.20), rgba(212,168,67,.09) 72%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 4px rgba(78,205,200,.30);
  overflow: hidden;
  pointer-events: none; user-select: none;
}

/* Las superficies del jugador dejan pasar el número que tienen detrás. */
body.jugador .card,
body.jugador .fila,
body.jugador .cifra {
  background-color: rgba(9,26,38,.80);
}
body.jugador .card.proximo {
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(78,205,200,.16), transparent 62%),
    rgba(9,26,38,.80);
}
body.jugador .opcion { background: rgba(6,17,25,.82); }

@media (min-width: 720px) {
  body.jugador::after { font-size: min(70vh, 40rem); }
}

/* Su dorsal gigante es la marca de "esta es tu app". En una seccion del club
   que lleva esa misma persona no pinta nada: ahi no es el 22, es quien lleva la
   tesoreria, y encima estorba para leer cifras. */
body.jugador.club::after { content: none; }

/* --- Identidad del jugador ------------------------------------------------ */

.identidad { margin-bottom: 1.1rem; }
.identidad .saludo {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .95rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); margin: 0;
}
.identidad h2 {
  font-size: clamp(2rem, 8.5vw, 2.6rem);
  line-height: 1; margin: .1rem 0 .6rem;
}

/* La chapa: dorsal, posiciones y unidad, como el reverso de una camiseta. */
.chapa {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .88rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin: 0;
}
.chapa-dorsal {
  font-family: 'Anton', sans-serif;
  font-size: 1.1rem; letter-spacing: 0; color: var(--teal);
  font-variant-numeric: tabular-nums;
}
.chapa-unidad {
  padding: .16rem .5rem; border-radius: 999px;
  border: 1px solid var(--line); color: var(--teal);
  font-size: .74rem;
}

/* Franja de avisos sin leer: por encima de la entrada, porque si el club ha
   dicho algo, eso va antes que cualquier otra cosa. */
.banda-avisos {
  display: flex; align-items: center; gap: .7rem;
  margin-bottom: .8rem; padding: .7rem .9rem;
  border-radius: 12px;
  border: 1px solid var(--teal-d);
  background: rgba(78,205,200,.12);
  text-decoration: none; color: var(--text);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1rem; letter-spacing: .04em; text-transform: uppercase;
}
.banda-avisos.urgente { border-color: var(--bad); background: rgba(242,85,90,.13); }
.banda-avisos .n {
  font-family: 'Anton', sans-serif; font-size: 1.4rem; line-height: 1;
  color: var(--teal); font-variant-numeric: tabular-nums;
}
.banda-avisos.urgente .n { color: var(--bad); }
.banda-avisos .ir { margin-left: auto; color: var(--muted); font-size: .85rem; }

/* --- La entrada al campo -------------------------------------------------- */
/* El próximo evento como una entrada: raíl con la fecha arriba, línea de corte
   y la respuesta abajo. Es la única pantalla donde el jugador decide algo, así
   que se lleva toda la jerarquía. */

.entrada {
  position: relative;
  border: 1px solid var(--line);
  border-top: 3px solid var(--teal);
  border-radius: 16px;
  background: rgba(9,26,38,.82);
  overflow: hidden;
}
.entrada.partido { border-top-color: var(--gold); }

.entrada-cuerpo { display: flex; gap: 1rem; padding: 1.1rem 1.1rem .9rem; }

.entrada-fecha {
  flex: 0 0 68px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: .6rem .3rem;
  border-radius: 12px;
  background: linear-gradient(165deg, rgba(18,48,68,.9), rgba(6,17,25,.9));
  border: 1px solid var(--line);
}
.entrada-fecha .dia, .entrada-fecha .mes {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.entrada-fecha .num {
  font-family: 'Anton', sans-serif; font-size: 2.1rem; line-height: 1.05;
  color: var(--teal); font-variant-numeric: tabular-nums;
}
.entrada.partido .entrada-fecha .num { color: var(--goldf); }

.entrada-datos { min-width: 0; }
.entrada-datos .tipo {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .76rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 .1rem;
}
.entrada-datos h3 { font-size: 1.45rem; line-height: 1.05; }
.entrada-datos .detalle { margin: .35rem 0 0; font-size: .92rem; color: var(--muted); }
.entrada-datos .detalle.fuerte { color: var(--text); font-weight: 500; }

.entrada-nota {
  margin: 0 1.1rem .3rem; padding: .6rem .8rem;
  background: rgba(255,255,255,.035); border-radius: 10px;
  font-size: .9rem; line-height: 1.5;
}

/* La línea de corte, con sus dos muescas: es lo que hace que se lea como una
   entrada y no como otra tarjeta más. */
.entrada-corte {
  position: relative; height: 1px; margin: 1rem 1.1rem .2rem;
  border-top: 1px dashed var(--line);
}
.entrada-corte::before, .entrada-corte::after {
  content: ''; position: absolute; top: -9px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--ink);
  border: 1px solid var(--line);
}
.entrada-corte::before { left: -1.85rem; }
.entrada-corte::after  { right: -1.85rem; }

.entrada-respuesta { padding: .8rem 1.1rem 1.1rem; }
.entrada-respuesta .pregunta {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 .7rem; text-align: center;
}
.entrada-respuesta .recuento {
  margin: .7rem 0 0; text-align: center;
  font-size: .86rem; color: var(--muted);
}

.respuesta { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.respuesta > * { min-width: 0; }
.opcion span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

.opcion {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: .8rem .3rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(6,17,25,.82);
  color: var(--muted);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .98rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  min-height: 68px;
  transition: background .15s, color .15s, border-color .15s, transform .12s;
}
.opcion svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; }
.opcion:active { transform: scale(.96); }
.opcion.ok[aria-pressed="true"]   { background: var(--ok);   border-color: var(--ok);   color: var(--ink); }
.opcion.warn[aria-pressed="true"] { background: var(--warn); border-color: var(--warn); color: var(--ink); }
.opcion.bad[aria-pressed="true"]  { background: var(--bad);  border-color: var(--bad);  color: #fff; }

/* --- Lo secundario -------------------------------------------------------- */

.siguiente {
  display: flex; align-items: baseline; gap: .7rem;
  margin-top: .7rem; padding: .75rem .95rem;
  border-radius: 12px; border: 1px solid var(--line);
  background: rgba(9,26,38,.6);
  text-decoration: none; color: var(--text);
}
.siguiente .et {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.siguiente .que { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 1.02rem; }
.siguiente .cuando { margin-left: auto; font-size: .86rem; color: var(--muted); }

/* Tiras horizontales en vez de tarjetas: menos peso que la entrada, y así la
   jerarquía de la pantalla no se aplana. */
.tiras { display: flex; flex-direction: column; gap: .5rem; margin-top: 1.2rem; }
.tira {
  display: grid; grid-template-columns: auto 1fr; grid-auto-rows: auto;
  align-items: center; column-gap: .9rem;
  padding: .75rem .95rem;
  border-left: 3px solid var(--line);
  background: rgba(9,26,38,.55);
  border-radius: 0 12px 12px 0;
  text-decoration: none; color: var(--text);
}
.tira.aviso { border-left-color: var(--gold); }
.tira .cifra-grande {
  grid-row: 1 / 3;
  font-family: 'Anton', sans-serif; font-size: 1.7rem; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tira .et {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.tira .pie { font-size: .88rem; color: var(--text); opacity: .85; min-width: 0; overflow-wrap: anywhere; }
.tira .cifra-grande { overflow-wrap: anywhere; }

.otra-unidad {
  margin: 0 1.1rem; padding: .6rem .8rem;
  border-left: 3px solid var(--gold);
  background: rgba(212,168,67,.10);
  border-radius: 0 8px 8px 0;
  font-size: .92rem; line-height: 1.5; color: var(--goldf);
}

.evento-jug { display: flex; flex-direction: column; gap: .8rem; }
.evento-jug .opcion { min-height: 52px; font-size: .88rem; padding: .5rem .3rem; }
.evento-jug .opcion svg { width: 17px; height: 17px; }
.evento-jug + .evento-jug { margin-top: 0; }

.ficha-cabecera { display: flex; align-items: center; gap: 1rem; }
.ficha-cabecera h2 { font-size: 1.45rem; }
.dorsal.grande { flex: 0 0 84px; height: 84px; font-size: 2.6rem; border-radius: 14px; }

/* --- Escritorio ---------------------------------------------------------- */

@media (min-width: 720px) {
  .vista { padding: 1.5rem 1.5rem 3rem; }
  .rejilla { grid-template-columns: repeat(3, 1fr); }
  .lista .card.evento-jug { max-width: 100%; }
  .menu-portada img { width: 300px; }
  body::after { right: max(1rem, calc(50vw - 520px)); bottom: 2rem; }
  .tabbar {
    position: sticky; top: 0; bottom: auto;
    grid-auto-flow: column; border-top: none; border-bottom: 1px solid var(--line);
    max-width: 900px; margin: 0 auto; background: transparent; backdrop-filter: none;
  }
  .hoja { align-items: center; }
  .hoja-panel { border-radius: 20px; border-bottom: 1px solid var(--line); }
  #avisos { bottom: 1.5rem; }
}


/* ===========================================================================
   EL TABLÓN — solo la pantalla Hoy del jugador
   ===========================================================================
   Aquí la app deja de ser una lista sobre el campo y pasa a ser un tablón de
   anuncios: pared turquesa con la trama del club, y encima notas de papel
   clavadas con chincheta.

   Por qué solo en Hoy: es la pantalla que se abre veinte veces por semana para
   mirar una cosa, y el papel claro sobre la pared la hace legible de un
   vistazo. En Agenda, Equipo o Mi ficha se lee y se toca mucho más, y ahí el
   campo con el dorsal gigante sigue siendo lo suyo. La clase la pone app.js al
   navegar.

   Todo lo de aquí es apariencia: ni una sola regla cambia qué se enseña. */

/* La pared va dentro de la capa, igual que el campo: si se queda en el body,
   tapa la trama que tiene que dejar ver. */
body.jugador.tablon { background: transparent; }

/* La pared. Dos rejillas de tridentes, balones y rayos a distinto tamaño y
   paso —148 y 83 px, que no son múltiplos— así que la repetición no se ve
   aunque las piezas sí. Van en blanco a muy baja opacidad: heredan el turquesa
   de debajo, y cambiar el tono de la pared no obliga a retocar la trama. */
body.jugador.tablon::before {
  background-image:
    radial-gradient(120% 70% at 50% -10%, rgba(160,255,250,.13), transparent 60%),
    radial-gradient(140% 100% at 50% 50%, transparent 58%, rgba(0,12,15,.34) 100%),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22148%22%20height%3D%22148%22%20viewBox%3D%220%200%20148%20148%22%3E%3Cg%20transform%3D%22translate%2816%2C10%29%20rotate%28-14%29%20scale%281%29%22%3E%3Cg%20stroke%3D%22rgba%28255%2C255%2C255%2C0.155%29%22%20stroke-width%3D%221.7%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M11%2034%20V14%22%2F%3E%3Cpath%20d%3D%22M11%2014%20V3%22%2F%3E%3Cpath%20d%3D%22M3%2014%20V6%22%2F%3E%3Cpath%20d%3D%22M19%2014%20V6%22%2F%3E%3Cpath%20d%3D%22M3%2014%20H19%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2892%2C30%29%20rotate%2818%29%20scale%281%29%22%3E%3Cg%20stroke%3D%22rgba%28255%2C255%2C255%2C0.155%29%22%20stroke-width%3D%221.6%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%3E%3Cellipse%20cx%3D%2213%22%20cy%3D%229%22%20rx%3D%2212%22%20ry%3D%227.5%22%2F%3E%3Cpath%20d%3D%22M6%209%20H20%22%2F%3E%3Cpath%20d%3D%22M10%206.5%20V11.5%22%2F%3E%3Cpath%20d%3D%22M13%206.5%20V11.5%22%2F%3E%3Cpath%20d%3D%22M16%206.5%20V11.5%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2840%2C86%29%20rotate%289%29%20scale%281%29%22%3E%3Cpath%20d%3D%22M14%201%20L4%2015%20H10%20L8%2025%20L18%2011%20H12%20Z%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.155%29%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28108%2C92%29%20rotate%2824%29%20scale%280.8%29%22%3E%3Cg%20stroke%3D%22rgba%28255%2C255%2C255%2C0.155%29%22%20stroke-width%3D%221.7%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M11%2034%20V14%22%2F%3E%3Cpath%20d%3D%22M11%2014%20V3%22%2F%3E%3Cpath%20d%3D%22M3%2014%20V6%22%2F%3E%3Cpath%20d%3D%22M19%2014%20V6%22%2F%3E%3Cpath%20d%3D%22M3%2014%20H19%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%286%2C118%29%20rotate%28-9%29%20scale%280.75%29%22%3E%3Cg%20stroke%3D%22rgba%28255%2C255%2C255%2C0.155%29%22%20stroke-width%3D%221.6%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%3E%3Cellipse%20cx%3D%2213%22%20cy%3D%229%22%20rx%3D%2212%22%20ry%3D%227.5%22%2F%3E%3Cpath%20d%3D%22M6%209%20H20%22%2F%3E%3Cpath%20d%3D%22M10%206.5%20V11.5%22%2F%3E%3Cpath%20d%3D%22M13%206.5%20V11.5%22%2F%3E%3Cpath%20d%3D%22M16%206.5%20V11.5%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2283%22%20height%3D%2283%22%20viewBox%3D%220%200%2083%2083%22%3E%3Cg%20transform%3D%22translate%2810%2C8%29%20rotate%28-18%29%20scale%280.58%29%22%3E%3Cpath%20d%3D%22M14%201%20L4%2015%20H10%20L8%2025%20L18%2011%20H12%20Z%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.10%29%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2846%2C44%29%20rotate%2812%29%20scale%280.5%29%22%3E%3Cg%20stroke%3D%22rgba%28255%2C255%2C255%2C0.10%29%22%20stroke-width%3D%221.6%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%3E%3Cellipse%20cx%3D%2213%22%20cy%3D%229%22%20rx%3D%2212%22%20ry%3D%227.5%22%2F%3E%3Cpath%20d%3D%22M6%209%20H20%22%2F%3E%3Cpath%20d%3D%22M10%206.5%20V11.5%22%2F%3E%3Cpath%20d%3D%22M13%206.5%20V11.5%22%2F%3E%3Cpath%20d%3D%22M16%206.5%20V11.5%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2862%2C12%29%20rotate%2826%29%20scale%280.45%29%22%3E%3Cpath%20d%3D%22M14%201%20L4%2015%20H10%20L8%2025%20L18%2011%20H12%20Z%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.10%29%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
    /* la pared, debajo de la trama */
    linear-gradient(168deg, #0b3138 0%, #072429 100%);
  background-size: auto, auto, 148px 148px, 83px 83px, auto;
  background-position: center, center, 0 0, 31px 19px, center;
  background-repeat: no-repeat, no-repeat, repeat, repeat, no-repeat;
}

/* El marco del tablón. Reutiliza el pseudoelemento del dorsal gigante, que
   aquí no se pinta: con el contenido vacío el número desaparece y queda el
   borde. Va por debajo de la cabecera (20) y de la barra de abajo (30), así
   que solo asoma por los lados, que es donde un tablón tiene marco. */
body.jugador.tablon::after {
  content: '';
  position: fixed; inset: 0; z-index: 5;
  background: none;
  border: 7px solid #06181d;
  border-top-width: calc(7px + var(--safe-t));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.55), inset 0 0 22px rgba(0,0,0,.5);
  -webkit-text-stroke: 0;
  pointer-events: none;
}

/* --- el dorsal, pintado en la pared ------------------------------------- */
/* Sin cartón detrás y sin etiqueta: un número así de grande en la esquina de
   la pantalla de alguien no necesita que le pongan "dorsal" debajo. */
body.jugador.tablon .identidad { position: relative; }
body.jugador.tablon .identidad .saludo,
body.jugador.tablon .identidad h2 { padding-right: 92px; }

.dorsal-pared {
  position: absolute; top: -2px; right: 2px;
  font-family: 'Anton', sans-serif; font-size: 3.9rem; line-height: .84;
  font-variant-numeric: tabular-nums;
  transform: rotate(7deg);
  background: linear-gradient(158deg, #ffe0a0 0%, #e8ad46 34%, #a9691f 63%, #f2c469 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.6)) drop-shadow(0 1px 0 rgba(0,0,0,.35));
  pointer-events: none; user-select: none;
}

/* --- el papel ------------------------------------------------------------ */
/* Una nota es papel: esquinas casi rectas, color claro con el texto oscuro, y
   sombra propia para despegarse de la pared. Sobre turquesa, una tarjeta azul
   oscura no parece una nota: parece una pantalla pegada al tablón. */
body.jugador.tablon .card,
body.jugador.tablon .entrada,
body.jugador.tablon .siguiente,
body.jugador.tablon .banda-avisos,
body.jugador.tablon .tira,
body.jugador.tablon .lista .fila {
  position: relative;
  background: linear-gradient(178deg, #f5efe3, #e2d8c6);
  color: #1d2a30;
  border: 0;
  border-radius: 2px;
  box-shadow: 0 13px 20px -7px rgba(0,0,0,.7), 0 2px 4px rgba(0,0,0,.35);
}

/* La chincheta. Es el detalle que hace que se lea como tablón y no como una
   pila de tarjetas claras. */
body.jugador.tablon .card::before,
body.jugador.tablon .entrada::before,
body.jugador.tablon .siguiente::before,
body.jugador.tablon .banda-avisos::before,
body.jugador.tablon .tira::before,
body.jugador.tablon .lista .fila::before {
  content: ''; position: absolute; z-index: 2;
  top: -7px; left: 50%; margin-left: -7.5px;
  width: 15px; height: 15px; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #ffe9b0, var(--gold) 45%, #6d4e10 100%);
  box-shadow: 0 3px 7px rgba(0,0,0,.75), inset 0 -1px 2px rgba(0,0,0,.4);
}
body.jugador.tablon .entrada::before,
body.jugador.tablon .tira:nth-child(odd)::before {
  background: radial-gradient(circle at 34% 28%, #d8fffd, var(--teal) 45%, #0d4644 100%);
}
body.jugador.tablon .banda-avisos.urgente::before {
  background: radial-gradient(circle at 34% 28%, #ffd2d3, var(--bad) 45%, #6d1a1d 100%);
}

/* Cada nota cuelga un poco distinta. Muy poco: pasado un grado el texto se lee
   peor y deja de parecer una nota para parecer un adorno. */
body.jugador.tablon .banda-avisos { transform: rotate(-.9deg); }
body.jugador.tablon .entrada      { transform: rotate(.6deg); }
body.jugador.tablon .siguiente    { transform: rotate(-.5deg); }
body.jugador.tablon .card         { transform: rotate(.45deg); }
body.jugador.tablon .lista .fila:nth-child(odd)  { transform: rotate(.7deg); }
body.jugador.tablon .lista .fila:nth-child(even) { transform: rotate(-.6deg); }

/* Aire entre notas: en un tablón las cosas no se tocan. */
body.jugador.tablon #vista > *            { margin-top: 1.5rem; }
body.jugador.tablon #vista > :first-child { margin-top: 0; }
body.jugador.tablon #vista > .eyebrow     { margin-top: 1.9rem; margin-bottom: .85rem; }
body.jugador.tablon #vista > .lista       { margin-top: 0; }
body.jugador.tablon .lista { gap: 1.3rem; }

/* --- el texto, que ahora va sobre papel ---------------------------------- */
body.jugador.tablon .entrada-datos h3,
body.jugador.tablon .siguiente .que,
body.jugador.tablon .lista .fila .nom,
body.jugador.tablon .tira .cifra-grande { color: #12333f; }

body.jugador.tablon .entrada-datos .tipo,
body.jugador.tablon .entrada-datos .detalle,
body.jugador.tablon .siguiente .et,
body.jugador.tablon .siguiente .cuando,
body.jugador.tablon .lista .fila .meta,
body.jugador.tablon .tira .et,
body.jugador.tablon .banda-avisos .ir { color: #7c8a90; }

body.jugador.tablon .entrada-datos .detalle.fuerte { color: #12333f; font-weight: 600; }
body.jugador.tablon .tira .pie { color: #2b3a41; opacity: 1; }
body.jugador.tablon .entrada-nota { background: rgba(18,51,63,.07); color: #2b3a41; }
body.jugador.tablon .otra-unidad  { background: rgba(154,106,18,.14); color: #7a5310; }

/* La casilla de la fecha se queda oscura: es la única mancha de tinta de la
   nota y es lo que se busca al mirarla de lejos. */
body.jugador.tablon .entrada-fecha { background: #12333f; border-color: rgba(0,0,0,.25); }

/* Sin las muescas de la entrada: un papel clavado no es un ticket. */
body.jugador.tablon .entrada-corte { border-top-color: rgba(29,42,48,.28); }
body.jugador.tablon .entrada-corte::before,
body.jugador.tablon .entrada-corte::after { display: none; }

body.jugador.tablon .entrada-respuesta .pregunta,
body.jugador.tablon .entrada-respuesta .recuento { color: #7c8a90; }
body.jugador.tablon .opcion {
  background: rgba(18,51,63,.06); border-color: rgba(29,42,48,.25); color: #5d6b70;
}
body.jugador.tablon .opcion[aria-pressed="true"] {
  border-color: #1f7a52; color: #12603f; background: rgba(31,122,82,.14);
}

/* La banda de avisos, ahora un papel más. */
body.jugador.tablon .banda-avisos { padding: .8rem .95rem; }
body.jugador.tablon .banda-avisos .n { color: #12603f; }
body.jugador.tablon .banda-avisos.urgente { background: linear-gradient(178deg, #ffe9a8, #f4d478); }
body.jugador.tablon .banda-avisos.urgente .n { color: #8f2a2d; }

/* Las secciones delegadas van en papel verde: es otro asunto, no algo suyo. */
body.jugador.tablon .lista .fila { background: linear-gradient(178deg, #d8ece2, #bcd9cb); }
body.jugador.tablon .lista .fila .tag {
  background: transparent; color: #1f5c44; border: 1px solid rgba(31,92,68,.4);
}

/* --- las notas pequeñas, de dos en dos ----------------------------------- */
body.jugador.tablon .tiras {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.35rem .85rem; margin-top: 1.7rem;
}
body.jugador.tablon .tira { display: block; padding: .85rem .8rem .8rem; }

/* Las cifras de las tiras llevan su color en el atributo style —lo decide el
   dato: verde si la asistencia va bien, ámbar si debe algo— y un estilo en
   linea gana a cualquier regla de aqui. Asi que en vez de pelearse con el, se
   redefinen las variables en la propia cifra: el color sigue saliendo del dato,
   pero en tonos que se lean sobre papel en vez de sobre fondo oscuro.

   Van en la cifra y no en la tira entera a proposito: la chincheta de al lado
   se pinta con var(--teal) y si se redefine mas arriba sale verde. */
body.jugador.tablon .tira .cifra-grande {
  --ok:    #12603f;
  --warn:  #9a6a12;
  --bad:   #8f2a2d;
  --goldf: #9a6a12;
  --teal:  #12603f;
}
body.jugador.tablon .tira .cifra-grande { display: block; font-size: 1.8rem; }
body.jugador.tablon .tira .et  { display: block; margin: .28rem 0 .08rem; }
body.jugador.tablon .tira .pie { display: block; font-size: .82rem; }
body.jugador.tablon .tira:nth-child(odd)  { transform: rotate(1deg); }
body.jugador.tablon .tira:nth-child(even) { transform: rotate(-.9deg); }

/* --- el escudo, clavado abajo -------------------------------------------- */
.escudo-clavado {
  /* Mas ancho que cuando llevaba solo la cabeza: el logotipo completo tiene
     letras, y a 78 px no se leerian. */
  position: relative; width: 136px; margin: 2.6rem auto .5rem;
  padding: .6rem .6rem .45rem;
  background: linear-gradient(178deg, rgba(243,236,224,.94), rgba(214,203,184,.94));
  border-radius: 2px; transform: rotate(-5.5deg);
  box-shadow: 0 11px 16px -6px rgba(0,0,0,.75), 0 2px 4px rgba(0,0,0,.45);
}
.escudo-clavado::before {
  content: ''; position: absolute; top: -7px; left: 50%; margin-left: -7.5px;
  width: 15px; height: 15px; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #ffe9b0, var(--gold) 45%, #6d4e10 100%);
  box-shadow: 0 3px 7px rgba(0,0,0,.75), inset 0 -1px 2px rgba(0,0,0,.4);
}
.escudo-clavado img { display: block; width: 100%; }
body.jugador.tablon .menu-pie { color: rgba(212,168,67,.6); transform: rotate(-1deg); }

/* Quien no tolera el movimiento tampoco quiere notas torcidas. */
@media (prefers-reduced-motion: reduce) {
  body.jugador.tablon .banda-avisos,
  body.jugador.tablon .entrada,
  body.jugador.tablon .siguiente,
  body.jugador.tablon .card,
  body.jugador.tablon .lista .fila,
  body.jugador.tablon .tira,
  body.jugador.tablon .menu-pie,
  .dorsal-pared, .escudo-clavado { transform: none; }
}

/* --- Volver a la consola ---------------------------------------------------
   El aviso de que estás en la previa y la salida son la misma cosa: si fueran
   dos, el aviso acabaría siendo un adorno que se deja de leer. Va flotando
   sobre la barra de abajo, a la altura de los avisos emergentes, y se ve en
   todas las pantallas. */
.volver-consola {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(5.2rem + var(--safe-b)); z-index: 50;
  max-width: calc(100vw - 2rem);
  padding: .6rem 1.1rem;
  border: 1px solid rgba(212,168,67,.55);
  border-radius: 999px;
  background: rgba(24,20,10,.94);
  backdrop-filter: blur(8px);
  color: var(--goldf);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  box-shadow: 0 8px 22px rgba(0,0,0,.6);
  cursor: pointer;
}
.volver-consola:active { transform: translateX(-50%) scale(.97); }
.volver-consola:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* --- La marca de qué clase de cita es --------------------------------------
   Va clavada en la esquina de la casilla de la fecha, en el mismo sitio que el
   galón del capitán: ahí ya sabes mirar. Cada clase tiene su color, así que en
   una lista larga se distingue un entreno de un partido sin leer una palabra. */
.marca-evento {
  position: absolute; top: -8px; left: -8px; z-index: 2;
  width: 25px; height: 25px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surf-2);
  border: 2px solid var(--ink);
  color: var(--teal);
}
.marca-evento svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 1.9;
}
.marca-evento.amistoso    { color: var(--goldf); }
.marca-evento.competicion { color: var(--goldf); background: #3a2c10; }
.marca-evento.video       { color: #b48ce8; }
.marca-evento.otro        { color: var(--muted); }

/* En la nota del jugador la casilla de la fecha es clara por fuera y oscura por
   dentro, así que la marca se apoya en el papel y no en el fondo de la app. */
.entrada-fecha { position: relative; }
body.jugador.tablon .marca-evento { border-color: #eee6d8; }

/* Al lado de un título, en línea, la marca no lleva ni fondo ni borde: ahí no
   está clavada en nada, solo acompaña a la palabra. */
.nom .marca-evento {
  position: static; width: 17px; height: 17px;
  background: none; border: 0; flex: 0 0 auto;
}
.nom .marca-evento svg { width: 17px; height: 17px; }

/* --- El dibujo en relieve --------------------------------------------------
   Grande, girado y saliéndose por la esquina de la tarjeta, que lo recorta. No
   se lee por contraste —es casi del color del papel— sino por el filo claro
   justo debajo del trazo: el ojo lo interpreta como algo prensado, igual que un
   sello en seco. Por eso puede ocupar media tarjeta sin estorbar al texto. */
.relieve-evento {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  border-radius: inherit;
  pointer-events: none; user-select: none;
  color: rgba(238,244,246,.055);
  filter: drop-shadow(0 1.5px 0 rgba(0,0,0,.45));
}
.relieve-evento svg {
  position: absolute; right: -18px; bottom: -22px;
  display: block; width: 156px; height: 156px;
  transform: rotate(-9deg);
  fill: none; stroke: currentColor; stroke-width: 1;
  stroke-linecap: round; stroke-linejoin: round;
}

/* En el papel del tablón se invierte: la tinta se hunde y la luz asoma debajo. */
body.jugador.tablon .relieve-evento {
  color: rgba(29,42,48,.13);
  filter: drop-shadow(0 1.5px 0 rgba(255,255,255,.9));
}

/* Quien recorta el relieve es el relieve, no la tarjeta.
   Antes el recorte iba en la tarjeta y de paso cortaba la chincheta por la
   mitad: la chincheta es un ::before que asoma 7 px POR ENCIMA del borde, y un
   overflow:hidden en la tarjeta se lo come. Ahora el relieve es una caja que
   cubre la tarjeta entera y se recorta a si misma, y la tarjeta puede dejar
   asomar lo que le sobresalga. */
.entrada, .siguiente, .card.evento-jug { position: relative; overflow: visible; }
/* El :not() no es cosmetico: sin el, esta misma regla le quita el absolute al
   relieve —es un span hijo directo— y el dibujo se cuela en la fila como un
   elemento mas, empujando el texto. */
.entrada-cuerpo, .entrada-nota, .entrada-corte, .entrada-respuesta, .otra-unidad,
.card.evento-jug > :not(.relieve-evento),
.siguiente > span:not(.relieve-evento) { position: relative; z-index: 1; }

/* En la tira de "y después" no cabe uno grande: va a la mitad y más al borde. */
.siguiente .relieve-evento svg { right: -14px; bottom: -30px; width: 92px; height: 92px; }


/* --- La marca de fondo de cada pantalla del jugador ------------------------
   En Avisos, Agenda y Equipo el logo SUSTITUYE al dorsal gigante: ocupa el
   fondo entero, centrado, igual que hacia el numero. Cada pantalla lleva
   siempre el mismo, asi que al segundo dia sabes donde estas sin leer la barra.

   Hoy no lleva ninguno, que ya tiene la pared del tablon. Y Mi ficha se queda
   con el dorsal a proposito: es la pantalla del jugador, y su numero es lo que
   la distingue de las demas.

   Se apoya en que las superficies del jugador son translucidas: si fueran
   opacas, el logo solo asomaria por los huecos, que es justo lo que le pasaba
   al dorsal antes de hacerlas transparentes.

   Al 12% no hace falta que sean nitidos, por eso los ficheros van a 440 px y
   con calidad baja: los tres juntos pesan menos que el logotipo principal. */
.marca-pantalla {
  display: none;
  position: fixed; inset: 11vh 7vw calc(9vh + var(--safe-b)); z-index: 0;
  background: no-repeat center / contain;
  opacity: .12;
  pointer-events: none; user-select: none;
}

body.jugador[data-ruta="/avisos"] .marca-pantalla,
body.jugador[data-ruta="/agenda"] .marca-pantalla,
body.jugador[data-ruta="/equipo"] .marca-pantalla { display: block; }

body.jugador[data-ruta="/avisos"] .marca-pantalla { background-image: url('../img/football.webp'); }
body.jugador[data-ruta="/agenda"] .marca-pantalla { background-image: url('../img/circular.webp'); }
body.jugador[data-ruta="/equipo"] .marca-pantalla { background-image: url('../img/balon.webp'); }

/* Y donde hay logo no hay dorsal: dos marcas de agua superpuestas no son dos
   marcas, son una mancha. */
body.jugador[data-ruta="/avisos"]::after,
body.jugador[data-ruta="/agenda"]::after,
body.jugador[data-ruta="/equipo"]::after { content: none; }

/* En una seccion del club que lleve un delegado no pinta nada: alli esta
   gestionando, igual que se apaga el dorsal. */
body.club .marca-pantalla { display: none; }