/* =====================================================================
   GOLDEN CUP — Hoja de estilos
   Tema claro de alto contraste: la captura se hace en cancha, con sol.
   Objetivos táctiles de 44px mínimo para uso en tablet y celular.
   ===================================================================== */

:root{
  /* -------------------------------------------------------------------
     Paleta tomada del logo oficial: el azul rey del contorno de la copa
     y el dorado del cuerpo. Todo lo demas cuelga de estos dos.
     ------------------------------------------------------------------- */
  --azul:#1f63b8;
  --azul-noche:#0c3468;
  --azul-hondo:#164a8f;
  --azul-claro:#5b96e0;
  --azul-sv:#e9f1fc;

  --oro:#d99a12;
  --oro-claro:#f7ce55;
  --oro-hondo:#a3720a;
  --oro-sv:#fdf3d9;

  --fondo:#f4f6fa;
  --panel:#ffffff;
  --borde:#dce4ef;
  --texto:#132238;
  --tenue:#5a6b83;

  --verde:#1c7c4a;
  --verde-sv:#e6f4ec;
  --rojo:#b3261e;
  --rojo-sv:#fbeae9;
  --ambar:#a86a00;
  --ambar-sv:#fdf3e0;

  --radio:10px;
  --sombra:0 1px 3px rgba(12,52,104,.10), 0 6px 18px rgba(12,52,104,.07);
  --fuente:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--fuente);
  background:var(--fondo);
  color:var(--texto);
  font-size:15px;
  line-height:1.45;
  -webkit-text-size-adjust:100%;
}

/* ---------- Barra superior ---------- */
.barra{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:12px;
  padding:10px 14px;
  background:var(--azul-noche); color:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.18);
}
.menu-btn{
  display:none;
  background:transparent; border:0; color:#fff;
  font-size:22px; line-height:1; padding:8px 10px; cursor:pointer; border-radius:8px;
}
.menu-btn:hover{background:rgba(255,255,255,.12)}
.marca{display:flex; align-items:center; gap:10px; flex:1; min-width:0}
.marca .copa{font-size:22px}
.marca strong{display:block; letter-spacing:.09em; font-size:15px; color:var(--oro-claro)}
.marca small{display:block; color:#9fb0c7; font-size:11.5px; letter-spacing:.04em}

.estado-conexion{
  display:flex; align-items:center; gap:7px;
  font-size:12px; color:#c6d3e4;
  background:rgba(255,255,255,.08);
  padding:6px 11px; border-radius:999px; white-space:nowrap;
}
.estado-conexion .punto{width:8px;height:8px;border-radius:50%;background:#7d8fa6}
.estado-conexion.ok    .punto{background:#37c07a}
.estado-conexion.local .punto{background:var(--oro)}
.estado-conexion.error .punto{background:#e5534b}

/* ---------- Estructura ---------- */
.cuerpo{display:flex; align-items:flex-start; min-height:calc(100vh - 56px)}

.lateral{
  width:232px; flex:none;
  background:var(--panel);
  border-right:1px solid var(--borde);
  padding:14px 10px 40px;
  position:sticky; top:56px;
  height:calc(100vh - 56px);
  overflow-y:auto;
}
.nav-grupo{margin-bottom:18px}
.nav-titulo{
  display:block; font-size:10.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.1em;
  color:var(--tenue); padding:0 10px 6px;
}
.lateral a{
  display:block; padding:9px 12px; margin-bottom:2px;
  color:var(--texto); text-decoration:none;
  border-radius:8px; font-size:14px;
}
.lateral a:hover{background:#eef2f7}
.lateral a.activo{background:var(--azul-noche); color:#fff; font-weight:600}

.vista{flex:1; min-width:0; padding:20px 22px 60px; max-width:1400px}
.cargando{padding:40px; color:var(--tenue); text-align:center}

/* ---------- Encabezados ---------- */
.encabezado{
  display:flex; flex-wrap:wrap; gap:12px;
  align-items:flex-end; justify-content:space-between;
  margin-bottom:18px;
}
.encabezado h1{font-size:23px; margin:0 0 3px; letter-spacing:-.01em}
.encabezado p{margin:0; color:var(--tenue); font-size:13.5px}
.acciones{display:flex; gap:8px; flex-wrap:wrap}

/* ---------- Tarjetas ---------- */
.panel{
  background:var(--panel); border:1px solid var(--borde);
  border-radius:var(--radio); box-shadow:var(--sombra);
  margin-bottom:18px; overflow:hidden;
}
.panel > h2{
  margin:0; padding:13px 16px;
  font-size:14px; letter-spacing:.02em;
  border-bottom:1px solid var(--borde); background:#fafbfd;
}
.panel .contenido{padding:16px}

.rejilla{display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}

.metrica{
  background:var(--panel); border:1px solid var(--borde);
  border-radius:var(--radio); padding:15px 16px; box-shadow:var(--sombra);
}
.metrica .valor{font-size:29px; font-weight:700; line-height:1.1; letter-spacing:-.02em}
.metrica .rotulo{font-size:12px; color:var(--tenue); margin-top:3px}
.metrica .barra-progreso{height:5px; background:#e8edf4; border-radius:99px; margin-top:10px; overflow:hidden}
.metrica .barra-progreso span{display:block; height:100%; background:var(--oro)}

/* ---------- Tablas ---------- */
.tabla-envoltura{overflow-x:auto; -webkit-overflow-scrolling:touch}
table.datos{width:100%; border-collapse:collapse; font-size:13.5px; min-width:520px}
table.datos th, table.datos td{
  padding:9px 11px; text-align:left; border-bottom:1px solid var(--borde);
  white-space:nowrap;
}
table.datos th{
  background:#fafbfd; font-size:11px; text-transform:uppercase;
  letter-spacing:.06em; color:var(--tenue); font-weight:700;
  position:sticky; top:0;
}
table.datos td.num, table.datos th.num{text-align:right; font-variant-numeric:tabular-nums}
table.datos tbody tr:hover{background:#f7f9fc}
table.datos td.nombre{white-space:normal; min-width:170px; font-weight:500}
table.datos .destacado{font-weight:700}
tr.clasifica{background:var(--verde-sv)}
tr.clasifica td:first-child{box-shadow:inset 3px 0 0 var(--verde)}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height:40px; padding:9px 15px;
  border:1px solid var(--borde); border-radius:8px;
  background:var(--panel); color:var(--texto);
  font-size:14px; font-weight:600; font-family:inherit;
  cursor:pointer; text-decoration:none; white-space:nowrap;
}
.btn:hover{background:#f2f5f9}
.btn.principal{background:var(--azul-noche); border-color:var(--azul-noche); color:#fff}
.btn.principal:hover{background:var(--azul-hondo)}
.btn.oro{background:var(--oro); border-color:var(--oro); color:#26200a}
.btn.oro:hover{background:var(--oro-claro)}
.btn.peligro{background:var(--rojo); border-color:var(--rojo); color:#fff}
.btn.peligro:hover{filter:brightness(1.1)}
.btn.chico{min-height:32px; padding:5px 10px; font-size:12.5px; font-weight:600}
.btn:disabled{opacity:.45; cursor:not-allowed}

/* ---------- Formularios ---------- */
.campo{margin-bottom:13px}
.campo label{display:block; font-size:12.5px; font-weight:600; margin-bottom:5px; color:#33465e}
.campo .ayuda{font-size:11.5px; color:var(--tenue); margin-top:4px}
input[type=text],input[type=number],input[type=date],input[type=time],
input[type=datetime-local],input[type=email],input[type=search],select,textarea{
  width:100%; padding:9px 11px; min-height:40px;
  border:1px solid #c8d2e0; border-radius:8px;
  font-size:15px; font-family:inherit; background:#fff; color:var(--texto);
}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--azul-noche); box-shadow:0 0 0 3px rgba(15,27,45,.10);
}
textarea{min-height:88px; resize:vertical; line-height:1.5}
.fila{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(165px,1fr))}
.filtros{
  display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end;
  margin-bottom:16px; padding:13px 15px;
  background:var(--panel); border:1px solid var(--borde); border-radius:var(--radio);
}
.filtros .campo{margin:0; min-width:180px}

/* ---------- Etiquetas ---------- */
.eti{
  display:inline-block; padding:2px 8px; border-radius:99px;
  font-size:11px; font-weight:700; letter-spacing:.03em; white-space:nowrap;
}
.eti.verde{background:var(--verde-sv); color:var(--verde)}
.eti.rojo{background:var(--rojo-sv); color:var(--rojo)}
.eti.ambar{background:var(--ambar-sv); color:var(--ambar)}
.eti.azul{background:var(--azul-sv); color:var(--azul)}
.eti.gris{background:#eef1f5; color:var(--tenue)}

.tarjeta-am,.tarjeta-ro{
  display:inline-block; width:11px; height:15px;
  border-radius:2px; vertical-align:-2px; margin-right:3px;
}
.tarjeta-am{background:#f2c313; border:1px solid #c79f06}
.tarjeta-ro{background:#d5322a; border:1px solid #a8231c}

/* ---------- Avisos ---------- */
.avisos{position:fixed; right:16px; bottom:16px; z-index:90; display:flex; flex-direction:column; gap:9px; max-width:min(400px,calc(100vw - 32px))}
.aviso{
  background:var(--azul-noche); color:#fff; padding:12px 15px;
  border-radius:9px; box-shadow:0 8px 26px rgba(0,0,0,.28);
  font-size:13.5px; animation:entra .18s ease-out;
}
.aviso.exito{background:var(--verde)}
.aviso.error{background:var(--rojo)}
.aviso.alerta{background:var(--ambar)}
@keyframes entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.nota{
  padding:11px 14px; border-radius:8px; font-size:13px;
  border-left:3px solid; margin-bottom:14px;
}
.nota.info{background:var(--azul-sv); border-color:var(--azul); color:#0e4675}
.nota.alerta{background:var(--ambar-sv); border-color:var(--ambar); color:#7a4e00}
.nota.error{background:var(--rojo-sv); border-color:var(--rojo); color:#8f1e18}
.nota.exito{background:var(--verde-sv); border-color:var(--verde); color:#125c35}

.vacio{padding:38px 20px; text-align:center; color:var(--tenue)}
.vacio .icono{font-size:34px; display:block; margin-bottom:10px; opacity:.5}

/* ---------- Modal ---------- */
.velo{
  display:none; position:fixed; inset:0; z-index:50;
  background:rgba(15,27,45,.55);
}
.velo.abierto{display:block}
.modal{
  position:fixed; z-index:60; inset:0;
  display:flex; align-items:center; justify-content:center; padding:16px;
  pointer-events:none;
}
.modal .caja{
  pointer-events:auto;
  background:var(--panel); border-radius:12px;
  width:100%; max-width:620px; max-height:88vh;
  display:flex; flex-direction:column;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.modal .caja.ancho{max-width:960px}
.modal .cab{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; border-bottom:1px solid var(--borde);
}
.modal .cab h3{margin:0; font-size:16px}
.modal .cuerpo-modal{padding:18px; overflow-y:auto; flex:1}
.modal .pie{
  display:flex; gap:9px; justify-content:flex-end;
  padding:13px 18px; border-top:1px solid var(--borde); background:#fafbfd;
}
.cerrar{background:none; border:0; font-size:23px; cursor:pointer; color:var(--tenue); line-height:1; padding:3px 7px}

/* ---------- Cédula ---------- */
.marcador{
  display:grid; grid-template-columns:1fr auto 1fr; gap:14px;
  align-items:center; padding:18px 16px;
  background:var(--azul-noche); color:#fff; border-radius:var(--radio);
  margin-bottom:16px;
}
.marcador .equipo{text-align:center}
.marcador .equipo .nom{font-weight:700; font-size:16px; margin-bottom:3px}
.marcador .equipo .sub{font-size:11.5px; color:#a9bad0}
.marcador .cifras{
  font-size:38px; font-weight:800; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; text-align:center; min-width:110px;
}
.marcador .cifras small{display:block; font-size:11px; font-weight:500; color:var(--oro-claro); letter-spacing:.08em}

/* La rejilla lleva ocho columnas por equipo: lado a lado no cabrían.
   Se apilan, que además es como se transcribe la hoja: un equipo y
   luego el otro. */
.cedula-cols{display:flex; flex-direction:column; gap:16px}

.plantilla{max-height:none}
.jugador-fila{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-bottom:1px solid var(--borde);
}
.jugador-fila:last-child{border-bottom:0}
.jugador-fila.titular{background:var(--verde-sv)}
.jugador-fila.suspendido{background:var(--rojo-sv); opacity:.75}
.jugador-fila .dorsal{
  flex:none; width:31px; height:31px; border-radius:7px;
  background:var(--azul-noche); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:13px;
}
.jugador-fila .datos{flex:1; min-width:0}
.jugador-fila .datos .nom{font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.jugador-fila .datos .met{font-size:11px; color:var(--tenue)}
.jugador-fila .marcas{display:flex; gap:4px; align-items:center; flex:none}

/* Convocar y titular son los controles que más se tocan en todo el
   sistema: 22 por equipo, en una tablet, de pie junto a la cancha.
   Se les da 44px de alto, el mínimo recomendado para uso táctil. */
.selector-titular{
  display:flex; align-items:center; justify-content:center; gap:6px;
  min-height:44px; padding:6px 11px;
  font-size:12px; font-weight:700; cursor:pointer;
  border-radius:8px; border:1px solid var(--borde); background:#fff;
  user-select:none; flex:none;
}
.selector-titular:hover{background:#f2f5f9}
.selector-titular input{width:20px; height:20px; margin:0}
.jugador-fila .btn.chico{min-height:44px; min-width:44px; font-size:17px}

.linea-evento{
  display:flex; align-items:center; gap:10px;
  padding:9px 11px; border-bottom:1px solid var(--borde); font-size:13px;
}
.linea-evento:last-child{border-bottom:0}
.linea-evento .min{
  flex:none; min-width:38px; font-weight:700;
  font-variant-numeric:tabular-nums; color:var(--tenue); font-size:12px;
}
.linea-evento .desc{flex:1; min-width:0}
.linea-evento .icono-ev{font-size:15px; flex:none; width:20px; text-align:center}

.firma-lienzo{
  border:1px dashed #b9c5d6; border-radius:8px; background:#fff;
  width:100%; height:130px; touch-action:none; display:block;
}

/* ---------- Utilidades ---------- */
.der{text-align:right}
.cen{text-align:center}
.tenue{color:var(--tenue)}
.chico{font-size:12px}
.negrita{font-weight:700}
.mt{margin-top:14px}
.mb{margin-bottom:14px}
.entre{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.pila{display:flex; flex-direction:column; gap:9px}
.nowrap{white-space:nowrap}

/* ---------- Responsivo ---------- */

/* En celular el renglón de jugador no cabe en una línea: los controles
   bajan a un segundo piso en vez de encogerse hasta ser intocables. */
@media (max-width: 620px){
  .jugador-fila{flex-wrap:wrap; padding:10px}
  .jugador-fila .datos{flex:1 1 60%; min-width:0}
  .jugador-fila .marcas{order:3}
  .jugador-fila .selector-titular,
  .jugador-fila .btn.chico{flex:1 1 auto; margin-top:6px}
  .jugador-fila .selector-titular{min-width:104px}
}
@media (max-width: 780px){
  .menu-btn{display:block}
  .lateral{
    position:fixed; top:56px; left:0; z-index:45;
    height:calc(100vh - 56px); width:264px;
    transform:translateX(-100%); transition:transform .2s ease;
    box-shadow:6px 0 24px rgba(0,0,0,.18);
  }
  .lateral.abierto{transform:none}
  .vista{padding:15px 13px 60px}
  .encabezado h1{font-size:20px}
  .marcador .cifras{font-size:31px; min-width:88px}
  .metrica .valor{font-size:25px}
}

@media print{
  .barra,.lateral,.acciones,.filtros,.avisos{display:none !important}
  .vista{padding:0}
  .panel{box-shadow:none; break-inside:avoid}
  body{background:#fff; font-size:11.5pt}
}

/* ---------- Calendario editable ----------
   Los controles van dentro de la tabla porque son 322 partidos: abrir
   un formulario por cada uno haría la programación interminable. */
.tabla-calendario td{padding:6px 8px; vertical-align:middle}
/* El VS de la vista publica: los nombres se aprietan contra el, para
   que el enfrentamiento se lea de un golpe. */
.tabla-calendario td.versus{
  text-align:center; font-weight:700; font-size:11.5px; letter-spacing:.06em;
  color:var(--oro); padding:6px 2px;
}
.tabla-calendario td.der, .tabla-calendario th.der{text-align:right}
.tabla-calendario select,
.tabla-calendario input[type=date],
.tabla-calendario input[type=time]{
  min-height:36px; padding:6px 8px; font-size:13.5px;
  border-color:#dbe2ec; background:#fff;
}
.tabla-calendario select:hover,
.tabla-calendario input:hover{border-color:#b9c5d6}
.tabla-calendario select:disabled,
.tabla-calendario input:disabled{background:#f4f6f9; color:var(--tenue); cursor:not-allowed}

/* Un equipo todavía sin definir se ve distinto para poder localizarlo
   de un vistazo entre los que ya están puestos. */
.tabla-calendario select.pendiente{
  border-style:dashed; border-color:var(--oro);
  background:#fffdf5; color:var(--ambar); font-style:italic;
}

/* El nombre de la jornada se escribe directo: en las categorias con
   menos equipos hay que renombrarlas. */
.tabla-calendario input.jornada{
  min-height:34px; padding:5px 7px; font-size:13.5px; width:100%; min-width:112px;
  border-color:#dbe2ec; background:#fff; font-weight:500;
}
.tabla-calendario td.cen{text-align:center}
.tabla-calendario input[type=checkbox]{width:19px; height:19px; margin:0; cursor:pointer}

/* Partido apagado: no se juega. Se sigue viendo para poder encenderlo,
   pero se nota de un vistazo que esta fuera. */
.tabla-calendario tr.apagado{opacity:.45; background:#f7f8fa}
.tabla-calendario tr.apagado input.jornada{text-decoration:line-through}
.tabla-calendario tr.apagado:hover{opacity:.85}

/* Confirmación de guardado: un destello breve en el renglón. */
@keyframes destello{
  from{background:var(--verde-sv)}
  to{background:transparent}
}
@media (prefers-reduced-motion: no-preference){
  .tabla-calendario tr.guardado td{animation:destello 1.1s ease-out}
}
@media (prefers-reduced-motion: reduce){
  .tabla-calendario tr.guardado td{background:var(--verde-sv)}
}

/* ---------- Rejilla de la cédula ----------
   Se captura transcribiendo la hoja de papel: el recorrido natural es
   con el tabulador, renglón por renglón, así que los controles son
   compactos y todos alcanzables desde el teclado. */
.rejilla-cedula td{padding:5px 8px; vertical-align:middle}
.rejilla-cedula td.nombre{font-weight:500; white-space:normal; min-width:150px}
.rejilla-cedula th.cen, .rejilla-cedula td.cen{text-align:center}
.rejilla-cedula input[type=number]{
  width:100%; min-height:34px; padding:5px 6px;
  text-align:center; font-variant-numeric:tabular-nums; font-size:14px;
}
.rejilla-cedula input[type=checkbox]{width:20px; height:20px; margin:0}
.rejilla-cedula input:disabled{background:#f4f6f9; color:var(--tenue)}

/* El jugador que sí aparece en la cédula se distingue del que no. */
.rejilla-cedula tr.participa{background:var(--verde-sv)}
.rejilla-cedula tr.participa td.nombre{box-shadow:inset 3px 0 0 var(--verde)}
.rejilla-cedula tr.fila-suspendido{background:var(--rojo-sv)}
.rejilla-cedula tr.fila-suspendido td.nombre{box-shadow:inset 3px 0 0 var(--rojo)}

/* Control de tres estados: no jugó / titular / cambio */
.segmentado{display:inline-flex; border:1px solid #c8d2e0; border-radius:8px; overflow:hidden}
.segmentado button{
  min-height:34px; padding:5px 11px; border:0; border-right:1px solid #c8d2e0;
  background:#fff; color:var(--tenue);
  font-family:inherit; font-size:12.5px; font-weight:600; cursor:pointer;
}
.segmentado button:last-child{border-right:0}
.segmentado button:hover:not(:disabled){background:#eef2f7}
.segmentado button.activo{background:var(--azul-noche); color:#fff}
.segmentado button:disabled{opacity:.4; cursor:not-allowed}
.segmentado button:focus-visible{outline:2px solid var(--oro); outline-offset:-2px}

@media (prefers-reduced-motion: no-preference){
  .rejilla-cedula tr.guardado td{animation:destello 1s ease-out}
}

/* ---------- Medios tiempos ----------
   El torneo exige un mínimo de participación y solo permite cambios en
   el descanso, así que cada partido reparte 0, 1 o 2 medios tiempos. */
.mt-celda{
  display:inline-block; min-width:26px; padding:2px 7px;
  border-radius:6px; font-weight:700; font-size:13px;
  background:var(--verde-sv); color:var(--verde);
  font-variant-numeric:tabular-nums;
}
.mt-celda.cero{background:#eef1f5; color:var(--tenue)}

.rejilla-cedula select{min-height:34px; padding:5px 7px; font-size:13px}
.rejilla-cedula select.pendiente{
  border-style:dashed; border-color:var(--oro);
  background:#fffdf5; color:var(--ambar);
}

/* Quien no cumple la participación mínima se ve de inmediato. */
tr.incumple{background:var(--rojo-sv)}
tr.incumple td:first-child{box-shadow:inset 3px 0 0 var(--rojo)}
.barra-mt{
  display:inline-flex; gap:2px; vertical-align:-2px; margin-right:6px;
}
.barra-mt i{
  width:7px; height:14px; border-radius:2px; background:#d7dde6;
}
.barra-mt i.lleno{background:var(--verde)}
.barra-mt i.falta{background:var(--rojo); opacity:.35}

/* ---------- Desplegable ----------
   La tabla completa de goleo va escondida detrás de un resumen: se ven
   los primeros y quien quiera el resto lo abre. */
.desplegable{border-top:1px solid var(--borde)}
.desplegable > summary{
  padding:12px 16px; cursor:pointer;
  font-size:13px; font-weight:600; color:var(--azul);
  background:#fafbfd; list-style:none;
  display:flex; align-items:center; gap:8px;
}
.desplegable > summary::-webkit-details-marker{display:none}
.desplegable > summary::before{content:'▸'; font-size:11px}
.desplegable[open] > summary::before{content:'▾'}
.desplegable > summary:hover{background:#eef2f7}
.desplegable > summary:focus-visible{outline:2px solid var(--oro); outline-offset:-2px}

/* La casilla de expulsión es de 20px, imposible de atinarle con el dedo.
   La etiqueta la envuelve y vuelve tocable todo el ancho de la celda. */
.casilla-celda{
  display:flex; align-items:center; justify-content:center;
  min-height:44px; margin:-5px -8px; cursor:pointer;
}
.casilla-celda:hover{background:#eef2f7}
.casilla-celda input{width:22px; height:22px}
.casilla-celda:has(input:disabled){cursor:not-allowed}
.casilla-celda:has(input:disabled):hover{background:transparent}

/* ---------- Incidencias del partido ----------
   Resumen de lo que pasó, para cotejarlo contra la hoja de papel sin
   recorrer los cuarenta renglones de la rejilla. */
.incidencias{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.grupo-incidencia h3{
  margin:0 0 8px; font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.07em; color:var(--tenue);
  display:flex; align-items:center; gap:7px;
}
.grupo-incidencia .icono-inc{font-size:15px}
.grupo-incidencia ul{margin:0; padding:0; list-style:none;
  display:flex; flex-direction:column; gap:6px}
.grupo-incidencia li{font-size:13.5px; line-height:1.4}

/* ---------- Vista pública ----------
   El organizador entra aquí para ver el torneo como lo ve la gente, así
   que conviene que se note de inmediato que cambió de contexto. */

.tarjeta-seccion{
  display:flex; flex-direction:column; gap:5px;
  padding:20px; text-decoration:none; color:inherit;
  background:var(--panel); border:1px solid var(--borde);
  border-radius:var(--radio); box-shadow:var(--sombra);
}
.tarjeta-seccion:hover{border-color:var(--oro); background:#fffdf7}
.tarjeta-seccion .icono{font-size:26px}
.tarjeta-seccion strong{font-size:16px}
.tarjeta-seccion span:last-child{font-size:13px; color:var(--tenue)}

/* Alineaciones de la cédula pública */
.grupo-alineacion + .grupo-alineacion{margin-top:18px}
.grupo-alineacion h3{
  margin:0 0 8px; font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.07em; color:var(--tenue);
}
.lista-jugadores{margin:0; padding:0; list-style:none;
  display:flex; flex-direction:column; gap:1px}
.lista-jugadores li{
  display:flex; align-items:center; gap:9px;
  padding:8px 10px; background:var(--panel);
  border-bottom:1px solid var(--borde); font-size:14px;
}
.lista-jugadores li:last-child{border-bottom:0}
.lista-jugadores li > span:first-child{flex:1; min-width:0}

/* ---------------------------------------------------------------------
   Escudo de equipo
   Sale junto al nombre en la tabla de posiciones, en los roles y en la
   ficha del equipo. Cuando no hay logo se dibuja un circulo con las
   iniciales, para que las columnas no bailen.
   --------------------------------------------------------------------- */
.escudo-eq{
  display:inline-block; vertical-align:middle; flex:0 0 auto;
  border-radius:5px; object-fit:contain; background:#fff;
  border:1px solid var(--borde);
}
.escudo-eq.sin{
  display:inline-grid; place-items:center; border-radius:50%;
  background:var(--azul-hondo); color:var(--oro-claro);
  font-weight:700; letter-spacing:.02em; border-color:transparent;
}
.con-escudo{display:inline-flex; align-items:center; gap:8px}
.con-escudo > span:last-child{min-width:0}
.tabla-calendario .con-escudo{gap:7px}
.tabla-calendario td.der .con-escudo{flex-direction:row-reverse}
.titulo-equipo{display:flex; align-items:center; gap:14px}
.titulo-equipo .escudo-eq{border-radius:9px}
.titulo-equipo h1{margin:0}

/* =====================================================================
   PARTE PÚBLICA
   Pensada para el celular: es donde la va a abrir casi todo el mundo.
   ===================================================================== */
.publica-cab{margin-bottom:20px}

.publica-cab .aviso-modo{
  background:var(--azul-sv); border:1px solid #c3d9f3; border-radius:var(--radio);
  padding:9px 12px; font-size:12.5px; color:var(--azul-noche); margin-bottom:14px;
}

/* --- Marca: logo, nombre y banner --- */
.portada-marca{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  background:linear-gradient(135deg, var(--azul-noche) 0%, var(--azul) 62%, var(--azul-hondo) 100%);
  border-radius:16px; padding:16px 20px;
  box-shadow:0 6px 20px rgba(12,52,104,.22);
  border:2px solid var(--oro);
}
.marca-copa{display:block; flex:0 0 auto; line-height:0}
.marca-copa img{height:78px; width:auto; display:block}
.copa-falta{font-size:52px; line-height:1}

.marca-texto{flex:1 1 auto; min-width:0; color:#fff}
.marca-texto strong{
  display:block; font-size:clamp(20px, 5.4vw, 31px); font-weight:800;
  letter-spacing:.055em; line-height:1.05;
  color:var(--oro-claro);
  text-shadow:0 2px 0 rgba(0,0,0,.28);
}
.marca-texto span{
  display:block; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase;
  color:#cfe0f7; margin-top:5px;
}

/* El banner lo sube el organizador. Proporción fija 4:1 para que
   cualquier imagen que suba encaje sin deformarse. */
.banner-publico{
  flex:0 0 auto; width:min(400px, 100%); aspect-ratio:4 / 1;
  border-radius:10px; overflow:hidden; background:rgba(255,255,255,.10);
}
.banner-publico img{width:100%; height:100%; object-fit:cover; display:block}

/* --- Navegación --- */
.nav-publica{
  display:flex; gap:8px; margin-top:14px; overflow-x:auto;
  padding-bottom:4px; -webkit-overflow-scrolling:touch;
}
.nav-publica::-webkit-scrollbar{height:0}
.nav-publica a{
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  padding:10px 15px; min-height:44px; border-radius:999px;
  background:var(--panel); border:1px solid var(--borde);
  color:var(--texto); text-decoration:none; font-weight:600; font-size:14px;
}
.nav-publica a .emo{font-size:16px; line-height:1}
.nav-publica a:hover{border-color:var(--azul-claro); background:var(--azul-sv)}
.nav-publica a.activo{
  background:var(--azul); border-color:var(--azul); color:#fff;
  box-shadow:0 2px 8px rgba(31,99,184,.35);
}

@media (max-width:700px){
  .portada-marca{gap:12px; padding:13px 15px}
  .marca-copa img{height:60px}
  /* El logo es muy vertical: los dos juntos en 375px quedan ilegibles,
     así que el banner se va abajo a todo lo ancho. */
  .banner-publico{width:100%; flex:1 0 100%; order:3}
}
@media print{
  .nav-publica, .publica-cab .aviso-modo{display:none}
  .portada-marca{background:none; border-color:var(--azul); box-shadow:none}
  .marca-texto strong{color:var(--azul-noche)}
  .marca-texto span{color:var(--tenue)}
}

/* Vista previa del banner en Datos y respaldo */
.banner-previo{
  aspect-ratio:4 / 1; border-radius:10px; overflow:hidden;
  border:1px solid var(--borde); background:var(--fondo); margin:12px 0;
  max-width:520px;
}
.banner-previo img{width:100%; height:100%; object-fit:cover; display:block}
.banner-previo.vacio-banner{
  display:grid; place-items:center; color:var(--tenue); font-size:13px;
  border-style:dashed;
}

/* =====================================================================
   PANEL DE REVISIÓN DE REGISTROS
   Lo que mandan los entrenadores desde su enlace. Se revisa mirando
   fotos y documentos, así que aquí manda la imagen y no la tabla.
   ===================================================================== */

.metrica .valor .emo{font-size:20px; vertical-align:2px; margin-right:2px}
.metrica .valor.val-oro{color:var(--oro-hondo)}
.metrica .valor.val-verde{color:var(--verde)}
.metrica .valor.val-rojo{color:var(--rojo)}

/* ---------- Tablero ---------- */
.celda-equipo{display:flex; flex-direction:column; gap:1px; min-width:0}
.celda-equipo .chico{line-height:1.4}
.acciones-fila{display:flex; gap:6px; align-items:center}

table.datos tr.fila-revisar td:first-child{box-shadow:inset 3px 0 0 var(--oro)}
table.datos tr.fila-aprobada td:first-child{box-shadow:inset 3px 0 0 var(--verde)}

/* Cuántos jugadores lleva. La marca vertical es el mínimo para poder
   jugar: de un vistazo se ve quién ya lo pasó y quién no. */
.plantilla-avance{display:flex; align-items:center; gap:9px}
.plantilla-avance .riel{
  position:relative; flex:1; min-width:64px; height:7px;
  background:#e8edf4; border-radius:99px; overflow:hidden;
}
.plantilla-avance .riel span{display:block; height:100%; border-radius:99px}
.plantilla-avance .riel i{
  position:absolute; top:-2px; width:2px; height:11px;
  background:var(--azul-noche); opacity:.45;
}
.tenue-rojo{color:var(--rojo); font-weight:700}

/* ---------- Tarjetas de personas ---------- */
.rejilla-personas{
  display:grid; gap:13px;
  grid-template-columns:repeat(auto-fill,minmax(158px,1fr));
}
.tarjeta-persona{
  margin:0; border:1px solid var(--borde); border-radius:var(--radio);
  overflow:hidden; background:var(--panel); display:flex; flex-direction:column;
}
.tarjeta-persona.incompleta{border-color:#f0bdb9; background:var(--rojo-sv)}
.tarjeta-persona img,
.tarjeta-persona .sin-foto{
  width:100%; aspect-ratio:4 / 5; object-fit:cover; display:block;
  background:var(--fondo); border-bottom:1px solid var(--borde);
}
.tarjeta-persona .sin-foto{
  display:grid; place-items:center; font-size:30px; opacity:.35;
}
.tarjeta-persona figcaption{
  padding:9px 11px 11px; display:flex; flex-direction:column; gap:5px;
}
.tarjeta-persona figcaption strong{font-size:13px; line-height:1.3}
.marcas-persona{display:flex; flex-wrap:wrap; gap:4px}
.docs-persona{display:flex; flex-wrap:wrap; gap:5px; margin-top:2px}
.docs-persona .btn.chico{padding:4px 9px; font-size:11px; min-height:0}

/* ---------- Visor de documentos ---------- */
.visor-doc{
  background:var(--fondo); border:1px solid var(--borde); border-radius:9px;
  overflow:auto; max-height:66vh; display:grid; place-items:center;
}
.visor-doc img{max-width:100%; display:block}
.visor-doc iframe{width:100%; height:66vh; border:0; display:block}

/* ---------- Contacto ---------- */
.datos-par{
  display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  margin-bottom:14px;
}
.datos-par .rotulo{display:block; font-size:11px; color:var(--tenue); margin-bottom:2px}

/* ---------- SQL para copiar ---------- */
.bloque-sql{
  background:var(--azul-noche); color:#e8f0fb; padding:13px 15px;
  border-radius:9px; font-size:12px; line-height:1.6; overflow-x:auto;
  white-space:pre-wrap; word-break:break-word; margin:12px 0;
}

@media (max-width:620px){
  .rejilla-personas{grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:10px}
  .acciones-fila{flex-direction:column; align-items:stretch}
}

/* =====================================================================
   SITIO PÚBLICO
   El mismo programa sin el armazón del panel: sin barra arriba y sin
   menú a la izquierda, la página empieza directo en el encabezado con
   el logo. Se le da más aire porque aquí no se captura nada, se lee.
   ===================================================================== */
body.sitio-publico .cuerpo{display:block}
body.sitio-publico .vista{
  max-width:1080px; margin:0 auto; padding:18px 16px 60px;
}
body.sitio-publico .velo{display:none}

/* Cuándo se actualizó por última vez. Va discreto, pero tiene que estar:
   es la diferencia entre "no han subido el resultado" y "la página está
   descompuesta". */
.sello-actualizado{
  margin:10px 2px 0; font-size:12px; color:var(--tenue); text-align:right;
}

/* Antes de que arranque el torneo, o si el servidor no contesta. */
.portada-vacia{
  max-width:460px; margin:8vh auto; padding:34px 26px; text-align:center;
  background:var(--panel); border:1px solid var(--borde);
  border-radius:16px; box-shadow:var(--sombra);
}
.portada-vacia img{width:96px; height:auto; margin-bottom:16px}
.portada-vacia .copa-falta{font-size:56px; display:block; margin-bottom:12px}
.portada-vacia h1{
  margin:0 0 10px; font-size:23px; letter-spacing:.04em; color:var(--azul-noche);
}
.portada-vacia p{margin:0 0 20px; color:var(--tenue); line-height:1.6}

@media (max-width:700px){
  body.sitio-publico .vista{padding:12px 11px 46px}
  .sello-actualizado{text-align:left}
}

/* =====================================================================
   PUERTA DEL PANEL
   Lo único que se ve mientras no haya sesión.
   ===================================================================== */
body.pantalla-entrada{
  background:
    radial-gradient(1100px 520px at 50% -8%, rgba(31,99,184,.16), transparent 62%),
    var(--fondo);
  min-height:100vh;
}
body.pantalla-entrada .cuerpo{display:block}
body.pantalla-entrada .vista{display:grid; place-items:center; min-height:100vh; padding:24px 18px}

.entrada{
  width:100%; max-width:370px; text-align:center;
  background:var(--panel); border:1px solid var(--borde);
  border-radius:16px; padding:34px 26px 26px; box-shadow:var(--sombra);
}
.entrada-logo{width:78px; height:auto; margin-bottom:14px}
.entrada-copa{font-size:50px; display:block; margin-bottom:10px}
.entrada h1{
  margin:0 0 4px; font-size:21px; letter-spacing:.05em; color:var(--azul-noche);
}
.entrada-sub{margin:0 0 24px; font-size:13.5px; color:var(--tenue)}
.entrada .campo{text-align:left; margin-bottom:15px}
.entrada .btn{width:100%; justify-content:center; margin-top:5px}
.entrada-error{
  background:var(--rojo-sv); color:var(--rojo); border-radius:8px;
  padding:10px 13px; font-size:13.5px; text-align:left; margin-bottom:14px;
}
.entrada-pie{
  margin:20px 0 0; font-size:12px; color:var(--tenue); line-height:1.6;
  border-top:1px solid var(--borde); padding-top:15px;
}

/* Quién entró y cómo salir, al final del menú */
.nav-sesion{
  margin-top:auto; padding:14px 16px 18px;
  border-top:1px solid rgba(255,255,255,.12);
}
.nav-sesion .quien{
  display:block; font-size:11.5px; color:rgba(255,255,255,.55);
  margin-bottom:8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.nav-salir{
  width:100%; text-align:left; background:transparent; cursor:pointer;
  border:1px solid rgba(255,255,255,.22); border-radius:8px;
  color:rgba(255,255,255,.82); font:inherit; font-size:13px;
  padding:9px 12px; min-height:38px;
}
.nav-salir:hover{background:rgba(255,255,255,.09); color:#fff}
.lateral{display:flex; flex-direction:column}