/* grada.css — La grada: la pantalla de las familias (ui.js, «16 · La grada»).
   Diseño aprobado: maquetas/mesa-2026/familia.html. Una página para todos, sin cuenta y sin elegir nada antes:
   cabecera con el escudo de la jornada y a Elso saludando, tres pestañas (Partidos · Tabla · Equipos) y,
   al tocar un equipo, su plantilla en una ventana ancha. Tocar un partido abre `#vivo/<id>` (vivo.css).
   Todo con los tokens del sistema: sale igual de bien en claro y en oscuro. Sin píldoras (radio ≤ 10 px;
   solo es redondo lo que es un escudo o un avatar). Los prefijos son `gd-`: los `gr-` de marca.css son de la grada vieja. */

/* marca.css pone a `body.es-grada` los grises NEUTROS del tablero; el diseño aprobado de la grada es el azul marino de GRID (maqueta familia.html). Solo en oscuro. */
html:is(:not([data-tema="claro"]), .siempre-oscuro) body.es-grada { background: #0a1426; }   /* color fijo: el marino de la maqueta */
html:is(:not([data-tema="claro"]), .siempre-oscuro) #gradaBody {
  --fondo: #0a1426; --papel: #0f1c35; --hundido: #0c182d; --hundido-2: #13223f; --alzado: #1a2b4d;   /* color fijo: ídem */
  --linea: #24365a; --linea-fuerte: #2f4470; --tinta: #e8edf5; --tinta-2: #a9b4c8; --tinta-3: #7a87a0; }   /* color fijo: ídem */
#gradaBody { max-width: none; margin: 0; border: 0; min-height: 100dvh; background: var(--fondo); color: var(--tinta); }
#p-vivo { padding: 0; }
.gd-sp { flex: 1; min-width: 0; }
.gd-pag { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.gd-rot { font: 700 10px/1.3 var(--g-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); }
.gd-rot.am { color: var(--alerta-tx); white-space: nowrap; }
.gd-caja { border: 1px solid var(--linea); border-radius: 12px; background: var(--papel); }
.gd-nota { color: var(--tinta-3); font-size: .9rem; padding: 14px 16px; }
.gd-carga { padding: 64px 24px; text-align: center; color: var(--tinta-3); display: flex; flex-direction: column; align-items: center; gap: 14px; }

/* barra de arriba: el logo y, a la derecha, si lo que se ve está al día */
.gd-top { border-bottom: 1px solid var(--linea); }
.gd-top-in { display: flex; align-items: center; gap: 14px; height: 60px; }
.gd-top img { height: 22px; width: auto; }
.gd-volver { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border: 1px solid var(--linea-fuerte); border-radius: 8px;
  background: var(--papel); color: var(--tinta-2); font: 700 12px var(--g-sans); cursor: pointer; }
.gd-volver:hover { color: var(--tinta); background: var(--hundido-2); }
.gd-red { font: 700 10px var(--g-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); white-space: nowrap; }
.gd-red.flojo { color: var(--alerta-tx); }
.gd-red.mal { color: var(--g-rojo-tx); }

/* escudos: redondos, la foto si hay y si no las iniciales sobre el color del equipo */
.gd-esc { display: inline-grid; place-items: center; flex: none; border-radius: 50%; overflow: hidden; background: var(--c, #5b6070);
  color: #fff; font-family: var(--g-sans); font-weight: 800; line-height: 1; }   /* color fijo: letras blancas sobre el color del equipo */
.gd-esc.clara { color: #0b0c10; }
.gd-esc.foto { background: #fff; }   /* color fijo: el escudo subido se ve sobre blanco en los dos modos, como el logo de la maqueta */
.gd-esc img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* cabecera */
.gd-pag-c { padding-top: 26px; padding-bottom: 36px; }
.gd-cab { display: flex; align-items: center; gap: 22px; padding: 20px 26px; background: linear-gradient(110deg, var(--hundido-2), var(--papel) 60%); }
.gd-cab-tx { min-width: 0; }
.gd-tit { font: italic 900 40px/1.05 var(--g-firma); text-transform: uppercase; margin: 4px 0 8px; color: var(--fuerte); overflow-wrap: anywhere; }
.gd-chips { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.gd-cuenta { color: var(--tinta-2); }
.gd-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 8px; background: #b91c1c; color: #fff;   /* color fijo: «en vivo» es el mismo rojo en los dos modos */
  font: 800 10px var(--g-sans); letter-spacing: .08em; white-space: nowrap; }
.gd-pill i { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: gdLate 1.4s ease-in-out infinite; }
@keyframes gdLate { 50% { opacity: .3 } }
.gd-hola { display: flex; align-items: center; gap: 14px; }
.gd-hola > div { text-align: right; }
.gd-hola-t { font: italic 900 20px/1.1 var(--g-firma); text-transform: uppercase; color: var(--alerta-tx); }
.gd-hola-s { font-size: 12px; color: var(--tinta-2); max-width: 220px; margin-top: 2px; }
.gd-elso { width: 96px; height: 96px; border-radius: 50%; flex: none; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #24477f, #102044 70%); border: 3px solid #fbbf24; }   /* color fijo: el círculo de Elso es el mismo en los dos modos */
.gd-elso img { height: 92%; width: auto; display: block; }   /* las poses del kit 3D son más altas que anchas: manda el alto */
.gd-elso.chico { width: 54px; height: 54px; border-width: 2px; }

/* pestañas */
.gd-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--linea); margin-top: 18px; }
.gd-tabs button { padding: 12px 16px; font: 700 12px var(--g-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3);
  background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; margin-bottom: -1px; }
.gd-tabs button:hover { color: var(--tinta); }
.gd-tabs button.on { color: var(--fuerte); border-bottom-color: var(--alerta); }
.gd-cuerpo { padding-top: 18px; display: flex; flex-direction: column; gap: 14px; }

/* partidos */
.gd-dos { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 18px; align-items: start; }
.gd-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.gd-sec { margin-top: 2px; }
.gd-lado, .gd-lado-n { min-width: 0; }
.gd-lado { display: flex; align-items: center; gap: 10px; min-width: 0; }
.gd-lado.loc { flex-direction: row-reverse; justify-content: flex-start; text-align: right; }   /* el escudo queda junto al centro en los dos lados */
.gd-n { font: 700 15px/1.2 var(--g-sans); overflow-wrap: anywhere; min-width: 0; }
.gd-lista { overflow: hidden; }
.gd-fila { display: grid; grid-template-columns: minmax(0, 1fr) 130px minmax(0, 1fr); align-items: center; gap: 14px; width: 100%; padding: 14px 18px;
  background: none; border: 0; border-top: 1px solid var(--linea); color: var(--tinta); text-align: left; cursor: pointer; font: inherit; }
.gd-fila:first-child { border-top: 0; }
.gd-fila:hover { background: var(--hundido-2); }
.gd-ce { text-align: center; min-width: 0; }
.gd-ce small { display: block; font-size: 11px; color: var(--tinta-3); margin-top: 2px; }
.gd-sc { font: 700 18px var(--g-mono); }
.gd-sc.pre { color: var(--tinta-2); }
.gd-vivo { display: block; width: 100%; padding: 20px; border: 1px solid #7f1d1d; border-radius: 12px; cursor: pointer; text-align: left; color: var(--tinta); font: inherit;   /* color fijo: borde rojo oscuro de «en vivo» */
  background: linear-gradient(180deg, color-mix(in srgb, #b91c1c 22%, var(--papel)), var(--papel) 70%); }
.gd-vivo:hover { border-color: #b91c1c; }
.gd-vivo-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.gd-vivo-cu { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 18px; }
.gd-mar { text-align: center; }
.gd-led { display: block; font: 700 46px/1.1 var(--g-led); color: var(--fuerte); white-space: nowrap; }
.gd-led i { font-style: normal; color: var(--tinta-3); }
.gd-mar small { display: block; font: 700 11px var(--g-mono); color: var(--alerta-tx); margin-top: 4px; }

/* tablas */
.gd-tabla { overflow: hidden; }
.gd-tabla h3 { padding: 14px 16px 0; }
.gd-t { width: 100%; border-collapse: collapse; }
.gd-t th { background: none; text-align: center; padding: 10px 8px; font: 700 10px var(--g-mono); letter-spacing: .1em; color: var(--tinta-3); border-bottom: 1px solid var(--linea); }
.gd-t td { text-align: center; padding: 12px 8px; border-top: 1px solid var(--linea); font: 700 15px var(--g-mono); color: var(--tinta-2); }
.gd-t thead tr:first-child th { border-top: 0; }
.gd-t td:first-child, .gd-t th:first-child { width: 36px; color: var(--tinta-3); }
.gd-t td:first-child, .gd-t th:first-child { padding-left: 14px; }
.gd-t td:last-child, .gd-t th:last-child { padding-right: 14px; }
.gd-t th:nth-child(2), .gd-t td:nth-child(2) { text-align: left; }
.gd-t tr.uno { background: color-mix(in srgb, var(--alerta) 7%, transparent); }
.gd-t tr.uno td:first-child { color: var(--alerta-tx); }
.gd-t td.pts { color: var(--fuerte); }
.gd-t-eq { display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 0; color: var(--tinta); cursor: pointer; text-align: left; font: inherit; min-width: 0; }
.gd-t-eq b { font: 700 15px/1.2 var(--g-sans); overflow-wrap: anywhere; }
.gd-t-eq:hover b { text-decoration: underline; }
.gd-vacia { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 40px 20px; text-align: center; color: var(--tinta-3); }
.gd-vacia i { font-size: 2rem; }
.gd-vacia b { color: var(--tinta); }

/* equipos */
.gd-eqs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.gd-eq { display: flex; align-items: center; gap: 12px; padding: 16px; color: var(--tinta); cursor: pointer; text-align: left; font: inherit; width: 100%; min-width: 0; }
.gd-eq:hover { background: var(--hundido-2); }
.gd-eq b { display: block; font: 700 15px/1.2 var(--g-sans); overflow-wrap: anywhere; }
.gd-eq small { display: block; font-size: 12px; color: var(--tinta-3); margin-top: 2px; }
.gd-eq > span:nth-child(2) { min-width: 0; }
.gd-flecha { color: var(--tinta-3); }

/* la ventana de un equipo: ancha en el computador, casi a pantalla completa en el celular */
.gd-velo { position: fixed; inset: 0; z-index: 8000; display: flex; align-items: center; justify-content: center; padding: 24px; }   /* el velo y la caja son los de todas las ventanas (piezas.css «Ventanas 2026») */
.gd-velo[hidden] { display: none; }
@media (max-width: 620px) { .gd-velo { padding: 0; align-items: flex-end; } }   /* en el celular, la hoja desde abajo de todas (aquí el relleno de 24 la dejaba flotando al centro) */
body.gd-ven-abierta { overflow: hidden; }
.gd-ven.gd-caja { max-width: 760px; display: flex; flex-direction: column; overflow: hidden; padding: 0; border: 1px solid var(--linea-fuerte); border-radius: 14px; }
@media (max-width: 620px) { .gd-ven.gd-caja { border-radius: 14px 14px 0 0; border-bottom: 0; } }
.gd-ven-cab { display: flex; align-items: center; gap: 12px; padding: 18px var(--v-pad) 12px; flex: none; transition: box-shadow .15s; }
.corrido .gd-ven-cab { box-shadow: 0 1px 0 var(--linea); }
.gd-ven-cab .gd-tit { margin: 0; font: 700 17px/1.3 var(--g-sans); font-style: normal; text-transform: none; letter-spacing: 0; color: var(--tinta); }
.gd-ven-cu .gd-rot { font: 600 12px/1.3 var(--g-sans); letter-spacing: 0; text-transform: none; color: var(--tinta-3); }   /* el rótulo de sección de las ventanas */
.gd-ven-cab .gd-rot { margin-top: 2px; font: 500 13px/1.4 var(--g-sans); letter-spacing: 0; text-transform: none; color: var(--tinta-2); }
.gd-ven-cab > .v-x { align-self: flex-start; margin: -6px -8px 0 0; }
.gd-ven-cu { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 20px; padding: 4px var(--v-pad) 16px; overflow: auto; overscroll-behavior: contain; }
.gd-sec0 { margin-bottom: 10px; }
.gd-jugs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.gd-jug { padding: 6px 4px; text-align: center; min-width: 0; }   /* sin tarjeta (revisión 27-oct): la camiseta ya es la pieza; nada de cajas dentro de la ventana */
.gd-jug svg { display: block; margin: 0 auto 2px; }
.gd-jug b { display: block; font: 700 13px/1.25 var(--g-sans); overflow-wrap: anywhere; margin-top: 2px; }
.gd-jug small { display: block; font: 700 11px var(--g-mono); color: var(--tinta-3); margin-top: 2px; }
.gd-sp-lista { display: flex; flex-direction: column; }
.gd-sp-fila { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 0; background: none; border: 0; border-top: 1px solid var(--linea); color: var(--tinta); cursor: pointer; text-align: left; font: inherit; }
.gd-sp-fila > b { font: 700 13px/1.2 var(--g-sans); min-width: 0; overflow-wrap: anywhere; }
.gd-sp-fila:hover { background: var(--hundido-2); }
.gd-sp-d { text-align: right; flex: none; }
.gd-sp-d b { display: block; font: 700 14px var(--g-mono); }
.gd-sp-d small { display: block; font-size: 10px; color: var(--tinta-3); }
.gd-sp-d small.vivo { color: var(--g-rojo-tx); }
.gd-top-j { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 12px; border-radius: 10px; background: var(--alzado); font-size: 12px; color: var(--tinta-2); }
.gd-top-j b { color: var(--fuerte); }

/* celular */
@media (max-width: 700px) {
  .gd-pag { padding: 0 16px; }
  .gd-top-in { height: 52px; }
  .gd-pag-c { padding-top: 16px; padding-bottom: 28px; }
  .gd-cab { padding: 14px; gap: 12px; }
  .gd-cab .gd-esc { width: 52px !important; height: 52px !important; font-size: 18px !important; }
  .gd-hola { display: none; }
  .gd-tit { font-size: 22px; margin: 4px 0 8px; }
  .gd-tabs { margin-top: 12px; }
  .gd-tabs button { flex: 1; padding: 12px 8px; text-align: center; }
  .gd-dos { grid-template-columns: minmax(0, 1fr); }
  .gd-lado-tab { display: none; }
  .gd-fila { grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr); gap: 8px; padding: 12px; }
  /* en el celular cada equipo es el escudo ARRIBA del nombre */
  .gd-lado, .gd-lado.loc { flex-direction: column; justify-content: flex-start; text-align: center; gap: 5px; }
  .gd-n { font-size: 12px; }
  .gd-sc { font-size: 15px; }
  .gd-vivo { padding: 14px; }
  .gd-cat { display: none; }
  .gd-vivo-cu { gap: 8px; }
  .gd-vivo .gd-esc { width: 34px !important; height: 34px !important; font-size: 12px !important; }
  .gd-led { font-size: 30px; }
  .gd-t th, .gd-t td { padding: 11px 6px; }
  .gd-t .nc { display: none; }
  .gd-eqs { grid-template-columns: minmax(0, 1fr); }
  .gd-ven-cu { grid-template-columns: minmax(0, 1fr); }
  .gd-jugs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) and (min-width: 701px) {
  .gd-dos { grid-template-columns: minmax(0, 1fr); }
  .gd-eqs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gd-ven-cu { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .gd-pill i { animation: none; } }

/* ═══ Ola 3 ═══ Compartir, «Mi equipo», la pista de instalar y la leyenda de siglas. Acción = --marca (rojo); nada amarillo nuevo. */
#gradaBody .ic { width: 18px; height: 18px; flex: none; }
.gd-vacia .ic { width: 32px; height: 32px; }
.gd-volver .ic { width: 14px; height: 14px; }
.gd-comp { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 1px solid var(--linea-fuerte); border-radius: 10px;
  background: var(--papel); color: var(--marca-osc); font: 700 13px var(--g-sans); cursor: pointer; }
.gd-comp:hover { background: var(--hundido-2); }
.gd-x { display: grid; place-items: center; width: 44px; height: 44px; margin: -8px -10px -8px 0; border: 0; border-radius: 10px; background: none; color: var(--tinta-3); cursor: pointer; flex: none; }
.gd-x:hover { color: var(--tinta); }
/* «Mi equipo» */
#gdMio:not(:empty), #gdPista:not(:empty) { margin-top: 12px; }
.gd-mio { display: flex; align-items: center; gap: 4px; padding: 4px 8px 4px 4px; }
.gd-mio.vivo { border-color: #b91c1c; }   /* color fijo: el rojo de «en vivo», igual al de la píldora */
.gd-mio-cu { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; min-height: 64px; padding: 8px 10px; border: 0; border-radius: 10px;
  background: none; color: var(--tinta); text-align: left; font: inherit; cursor: pointer; }
div.gd-mio-cu { cursor: default; }
@media (hover: hover) { button.gd-mio-cu:hover .gd-mio-n { text-decoration: underline; } }
.gd-mio-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.gd-mio-n { font: 800 16px/1.2 var(--g-sans); overflow-wrap: anywhere; }
.gd-mio-s { font-size: 13px; line-height: 1.35; color: var(--tinta-2); }
.gd-mio-s .gd-pill { margin-right: 4px; vertical-align: 1px; }
.gd-mio-sc { font: 700 14px var(--g-mono); color: var(--fuerte); }
.gd-mio-cambiar { min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: var(--tinta-3); font: 700 12px var(--g-sans); cursor: pointer; flex: none; }
.gd-mio-cambiar:hover { color: var(--tinta); background: var(--hundido-2); }
.gd-mio-pedir { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 14px; border: 1px dashed var(--linea-fuerte); border-radius: 12px;
  background: none; color: var(--tinta); text-align: left; font: inherit; cursor: pointer; }
.gd-mio-pedir:hover { background: var(--hundido-2); }
.gd-mio-pedir > span:not(.gd-flecha) { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.gd-mio-pedir b { font-size: 14px; } .gd-mio-pedir small { color: var(--tinta-2); font-size: 12.5px; }
.gd-mio-pedir .ic { color: var(--marca-osc); }
.gd-mio-el { padding: 10px 14px 12px; }
.gd-mio-cab { display: flex; align-items: center; gap: 8px; min-height: 36px; }
.gd-mio-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; margin-top: 6px; }
.gd-mio-op { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 10px; border: 1px solid var(--linea); border-radius: 10px;
  background: var(--hundido); color: var(--tinta); text-align: left; font: inherit; cursor: pointer; }
.gd-mio-op:hover { border-color: var(--marca); }
.gd-mio-op > span:not(.gd-esc) { display: flex; flex-direction: column; min-width: 0; } .gd-mio-op b { font-size: 14px; overflow-wrap: anywhere; } .gd-mio-op small { color: var(--tinta-3); font-size: 11.5px; }
/* la pista de instalar: una línea, sin caja */
.gd-pista { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 0 0 0 4px; color: var(--tinta-2); font-size: 13px; line-height: 1.35; }
.gd-pista > .ic { color: var(--tinta-3); }
.gd-pista span { flex: 1; min-width: 0; } .gd-pista span .ic { width: 14px; height: 14px; vertical-align: -2px; color: var(--marca-osc); }
.gd-pista-b { min-height: 44px; margin-left: 0; padding: 0 12px; border: 0; border-radius: 8px; background: var(--marca); color: #fff; font: 700 12.5px var(--g-sans); cursor: pointer; }   /* color fijo: letra blanca sobre el rojo de acción */
.gd-pista-si { background: var(--alzado); color: var(--tinta); }
/* la ventana «Ten GRID como una app»: tres beneficios y el paso a paso del dispositivo */
.gd-ins { display: flex; flex-direction: column; gap: 14px; padding: 4px 2px 6px; }
.gd-ins-ben { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.gd-ins-ben li { display: flex; flex-direction: column; gap: 2px; } .gd-ins-ben b { font-size: 14.5px; } .gd-ins-ben span { color: var(--tinta-2); font-size: 13px; line-height: 1.4; }
.gd-ins-rot { font: 700 11px var(--g-mono, monospace); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); }
.gd-ins-pasos { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.4; }
.gd-ins-pasos .ic { width: 16px; height: 16px; vertical-align: -3px; color: var(--marca-osc); }
/* leyenda de siglas (también la de la tabla de la jornada: .tabla-ley, piezas.css) */
.gd-ley { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 10px 16px 12px; border-top: 1px solid var(--linea); font-size: 11.5px; color: var(--tinta-3); }
.gd-ley b { font: 700 11px var(--g-mono); color: var(--tinta-2); }
@media (max-width: 700px) {
  .gd-comp { padding: 0 11px; }
  .gd-ley .nc { display: none; }
  .gd-mio-n { font-size: 15px; }
}