/* Estilos de la interfaz web. La paleta y las variables son las mismas de
   siempre: las pestanas nuevas tienen que parecer la misma aplicacion.
   Regla de oro del celular: la pagina no se mueve para el costado nunca; lo
   que es ancho (tablas, matrices) se desplaza solo, dentro de su caja. */
:root{
  --fondo:#11151c; --panel:#181e28; --panel2:#1f2733; --borde:#2b3543;
  --texto:#e8edf4; --suave:#93a1b5; --acento:#4aa3ff; --ok:#3ecf8e;
  --error:#ff6b6b; --aviso:#ffc857;
  --mono:ui-monospace,"Cascadia Mono","Consolas",monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--fondo);color:var(--texto);
     font:15px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif}
.envoltorio{max-width:1100px;margin:0 auto;padding:14px}

/* ---------- pestanas ---------- */
.pestanas{position:sticky;top:0;z-index:5;display:flex;gap:6px;
          background:var(--fondo);padding:4px 0 10px;
          box-shadow:0 6px 10px -8px #000}
.pestana{flex:1;background:var(--panel);border:1px solid var(--borde);
         color:var(--suave);border-radius:10px;padding:10px 8px;font-size:14px;
         font-weight:600;cursor:pointer;display:flex;justify-content:center;
         align-items:center;gap:6px}
.pestana:hover{color:var(--texto)}
.pestana.activa{background:var(--panel2);border-color:var(--acento);color:#fff}
/* el contador avisa que hay un partido a medio cargar aunque estes mirando
   otra pestana: es lo unico que se puede perder */
.chip{background:var(--acento);color:#08121f;font-size:11px;font-weight:700;
      border-radius:999px;padding:1px 7px;min-width:20px;
      font-variant-numeric:tabular-nums}
.vista[hidden]{display:none}

/* ---------- candado de la pantalla de carga ----------
   Con el candado puesto la pantalla de la cancha no se dibuja: se esconde
   todo lo que cuelga de la vista menos el formulario de la contraseña. Las
   pestanas quedan afuera de la vista, asi que se sigue pudiendo navegar. */
#candado{display:none}
#vista-cargar.bloqueada > *:not(#candado){display:none}
#vista-cargar.bloqueada > #candado{display:block}
.candado{background:var(--panel);border:1px solid var(--borde);border-radius:14px;
         padding:22px 20px;max-width:440px;margin:10vh auto 0}
.candado h2{margin:0;font-size:19px}
.candado .nota{margin-bottom:12px}
.candado .fila{margin-top:0}
#clave{flex:1;min-width:0;background:var(--panel2);border:1px solid var(--borde);
       border-radius:10px;color:var(--texto);padding:13px 15px;font:16px/1.2 var(--mono)}
#clave:focus{outline:none;border-color:var(--acento);box-shadow:0 0 0 3px #4aa3ff33}
.candado .mensaje{margin-top:12px;min-height:0}

/* ---------- marcador ---------- */
.marcador{background:var(--panel);border:1px solid var(--borde);border-radius:14px;
          padding:14px 18px;display:grid;grid-template-columns:1fr auto 1fr;
          align-items:center;gap:10px}
.equipo{text-align:center;min-width:0}
.equipo .nombre{font-size:15px;color:var(--suave);white-space:nowrap;
                overflow:hidden;text-overflow:ellipsis}
.equipo .puntos{font-size:clamp(40px,11vw,68px);font-weight:700;line-height:1;
                font-variant-numeric:tabular-nums}
.equipo.saca .nombre{color:var(--acento);font-weight:600}
.equipo.saca .puntos{color:var(--acento)}
.centro{text-align:center;color:var(--suave);font-size:13px;white-space:nowrap}
.centro .set{font-size:20px;font-weight:700;color:var(--texto)}

/* ---------- turno ---------- */
.turno{margin-top:12px;background:linear-gradient(90deg,#1b2a3d,#181e28);
       border:1px solid var(--borde);border-left:4px solid var(--acento);
       border-radius:10px;padding:12px 16px;font-size:clamp(16px,3.4vw,21px);
       font-weight:600}
.turno .sacador{color:var(--acento)}

/* ---------- carga ---------- */
.carga{margin-top:12px;display:flex;gap:8px}
#linea{flex:1;min-width:0;background:var(--panel2);border:1px solid var(--borde);
       border-radius:10px;color:var(--texto);padding:14px 16px;
       font:18px/1.2 var(--mono)}
#linea:focus{outline:none;border-color:var(--acento);box-shadow:0 0 0 3px #4aa3ff33}
button{background:var(--panel2);border:1px solid var(--borde);color:var(--texto);
       border-radius:10px;padding:11px 15px;font-size:14px;cursor:pointer}
button:hover{border-color:var(--acento);color:#fff}
button.primario{background:var(--acento);border-color:var(--acento);color:#08121f;
                font-weight:700;padding-left:22px;padding-right:22px}
/* Reiniciar y Borrar: lo unico que no se puede deshacer. Se distinguen en
   reposo, no solo al pasar por encima, porque en el celular no hay hover y
   ademas quedan al lado de los botones de descargar. */
button.peligro{border-color:#7a3030;color:#ff9d9d}
button.peligro:hover{border-color:var(--error);color:var(--error)}
button.tenue{color:var(--suave)}
button[disabled]{opacity:.4;cursor:default}
button[disabled]:hover{border-color:var(--borde);color:var(--suave)}

.mensaje{margin-top:10px;padding:11px 14px;border-radius:10px;font-size:14px;
         font-family:var(--mono);white-space:pre-wrap;word-break:break-word;
         border:1px solid var(--borde);background:var(--panel);min-height:20px}
.mensaje.ok{border-color:#2f6b52;background:#14251e;color:#bff0da}
.mensaje.error{border-color:#7a3030;background:#2a1618;color:#ffc9c9}

/* El aviso de que el servidor no esta guardando en ningun lado. Usa el
   amarillo de aviso y no el rojo de error: la aplicacion funciona, lo que no
   hay es garantia de que el partido siga estando manana. */
.avisoServidor{margin:0 0 10px;padding:10px 13px;border-radius:10px;
               font-size:13px;border:1px solid var(--aviso);
               background:#2a2415;color:var(--aviso)}

.atajos{margin-top:10px;display:flex;flex-wrap:wrap;gap:7px}
.atajos button{padding:8px 12px;font-size:13px}
.atajos .etiqueta,.eleccion .etiqueta{color:var(--suave);font-size:12px;
                  align-self:center;margin-right:2px;text-transform:uppercase;
                  letter-spacing:.06em}
.eleccion{margin-top:8px;display:flex;flex-wrap:wrap;gap:7px;
          background:var(--panel);border:1px solid var(--acento);
          border-radius:10px;padding:8px 10px}
.eleccion[hidden]{display:none}
.eleccion button{padding:8px 12px;font-size:13px}

/* ---------- paneles ---------- */
.columnas{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:820px){.columnas{grid-template-columns:1fr}}
.panel{background:var(--panel);border:1px solid var(--borde);border-radius:12px;
       overflow:hidden;min-width:0}
.panel > summary{padding:11px 15px;cursor:pointer;font-weight:600;font-size:14px;
                 list-style:none;display:flex;justify-content:space-between;
                 align-items:center;gap:8px}
.panel > summary::-webkit-details-marker{display:none}
.panel > summary::after{content:"▾";color:var(--suave);font-size:12px}
.panel[open] > summary{border-bottom:1px solid var(--borde)}
.panel[open] > summary::after{content:"▴"}
.panel.suelto{margin-top:12px}
.cuerpo{padding:12px 15px;max-height:340px;overflow:auto}
.cuerpo.alto{max-height:min(52vh,460px)}
.cuerpo.libre{max-height:none}
.cuerpo pre{margin:0;font:12px/1.5 var(--mono);white-space:pre-wrap;color:#cfd9e6}

.jugada{padding:7px 0;border-bottom:1px solid var(--borde);font-size:12.5px}
.jugada:last-child{border-bottom:none}
.jugada .quien{font-weight:700;color:var(--ok)}
.jugada .det{color:var(--suave);font-family:var(--mono);font-size:11.5px;
             display:block;margin-top:3px;word-break:break-word}

table{width:100%;border-collapse:collapse;font-size:13px}
td,th{padding:5px 7px;border-bottom:1px solid var(--borde);text-align:left}
th{color:var(--suave);font-weight:600;font-size:11px;text-transform:uppercase;
   letter-spacing:.05em}
.zona{font-family:var(--mono)}
.armador{color:var(--aviso);font-weight:700}
.saque{background:#4aa3ff22;box-shadow:inset 3px 0 0 var(--acento)}
.num{text-align:right;font-variant-numeric:tabular-nums}
th.num{text-align:right}
tbody tr.total td{background:#ffffff12;font-weight:700}

/* Toda tabla ancha vive dentro de una de estas: el que se mueve para el
   costado es el envoltorio, nunca la pagina. */
.tabla{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 4px}
.tabla table{min-width:max-content}
.tabla + .nota{margin-top:2px}

.ayuda code{background:var(--panel2);border:1px solid var(--borde);border-radius:5px;
            padding:1px 5px;font:12px var(--mono);color:#9ecbff}
.ayuda dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 12px;
          align-items:baseline}
.ayuda dt{margin:0}
.ayuda dd{margin:0;color:var(--suave);font-size:12.5px}

textarea{width:100%;height:130px;background:var(--panel2);color:var(--texto);
         border:1px solid var(--borde);border-radius:8px;padding:10px;
         font:12px var(--mono);resize:vertical}
.fila{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.fila[hidden]{display:none}
.nota{color:var(--suave);font-size:12px;margin:8px 0 0}
.enlace{background:var(--panel2);border:1px solid var(--borde);color:var(--texto);
        border-radius:10px;padding:11px 15px;font-size:14px;text-decoration:none;
        display:inline-block}
.enlace:hover{border-color:var(--acento);color:#fff}

/* ---------- pestana Partidos ---------- */
.buscador{margin-top:2px}
#busca{width:100%;background:var(--panel2);border:1px solid var(--borde);
       border-radius:10px;color:var(--texto);padding:13px 15px;font-size:16px}
#busca:focus{outline:none;border-color:var(--acento);box-shadow:0 0 0 3px #4aa3ff33}
.filtros{margin-top:8px;display:flex;flex-wrap:wrap;gap:8px;align-items:end}
.filtros label{color:var(--suave);font-size:11px;text-transform:uppercase;
               letter-spacing:.05em;display:flex;flex-direction:column;gap:4px}
.filtros select,.filtros input[type=date]{background:var(--panel2);
       border:1px solid var(--borde);border-radius:8px;color:var(--texto);
       padding:8px 10px;font-size:14px;text-transform:none;letter-spacing:0}
.filtros .interruptor{flex-direction:row;align-items:center;gap:6px;
       background:var(--panel2);border:1px solid var(--borde);border-radius:8px;
       padding:9px 11px}
.filtros button{padding:9px 12px;font-size:13px}

.partido{width:100%;text-align:left;background:transparent;border:none;
         border-bottom:1px solid var(--borde);border-radius:0;padding:10px 4px;
         display:grid;grid-template-columns:auto 1fr auto;gap:4px 12px;
         align-items:center;color:var(--texto)}
.partido:hover{background:#ffffff08;border-color:var(--borde)}
.partido.elegido{background:#4aa3ff1a;box-shadow:inset 3px 0 0 var(--acento)}
.partido .fecha{font-family:var(--mono);font-size:12.5px;color:var(--suave);
                white-space:nowrap}
.partido .equipos{font-weight:600;min-width:0}
.partido .equipos .rival{color:var(--suave);font-weight:400}
.partido .tanteo{font-variant-numeric:tabular-nums;font-weight:700;
                 white-space:nowrap}
.partido .detalles{grid-column:2/4;color:var(--suave);font-size:12px;
                   display:flex;flex-wrap:wrap;gap:8px}
@media(max-width:520px){
  .partido{grid-template-columns:1fr auto}
  .partido .fecha{grid-column:1/3}
  .partido .detalles{grid-column:1/3}
}
.marca{border:1px solid var(--borde);border-radius:6px;padding:0 5px;
       font-size:11px;font-family:var(--mono)}
.marca.si{border-color:#2f6b52;color:#8fe0bb}
.marca.no{color:#5d6b7d}

.detalle{margin-top:14px}
.cabeza{background:var(--panel);border:1px solid var(--borde);border-radius:12px;
        padding:14px 16px}
.cabeza h2{margin:0;font-size:18px}
.cabeza .sub{color:var(--suave);font-size:13px;margin-top:4px}
.cabeza .parciales{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px}
.parcial{background:var(--panel2);border:1px solid var(--borde);border-radius:8px;
         padding:3px 9px;font-variant-numeric:tabular-nums;font-size:13px}
.selector{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0}
.selector button.activa{background:var(--acento);border-color:var(--acento);
                        color:#08121f;font-weight:700}
.selector button{padding:8px 12px;font-size:13px}

/* ---------- el .xlsx, que es el plato principal del partido ---------- */
.titulo-informe{margin:14px 0 8px;font-size:15px;font-weight:700}
.titulo-informe .aclara{color:var(--suave);font-weight:400;font-size:12.5px;
                        font-family:var(--mono);word-break:break-all}
/* las pestanas de hoja quedan a la vista aunque se baje por la planilla,
   igual que en Excel; 52px es lo que ocupa la barra de pestanas de arriba */
.selector.hojas{position:sticky;top:52px;z-index:4;background:var(--fondo);
                padding:6px 0;margin:0}
.panel.visor{margin-top:0}
/* alto: que se vea una planilla, no una ventanita. Un unico marco que se
   mueve para abajo y para el costado, con las dos barras siempre al alcance */
.visor .cuerpo{padding:0;max-height:min(74vh,720px);overflow:auto;
               -webkit-overflow-scrolling:touch}

.hoja table{font-size:12.5px;min-width:max-content}
.hoja td{white-space:nowrap;border-bottom:1px solid #ffffff10}
.hoja tr.titulo td{background:#1F3864;color:#fff;font-weight:700;
                   text-transform:uppercase;letter-spacing:.04em}
.hoja tr.subtitulo td{background:#2E5C9A;color:#fff;font-weight:700}
.hoja tr.encabezado td{background:#24303f;color:var(--suave);font-size:11px;
                       text-transform:uppercase;letter-spacing:.04em;
                       white-space:normal;min-width:70px}
.hoja tr.total td{background:#242c38;font-weight:700}
.hoja tr.nota td{color:var(--suave);font-size:11.5px;font-style:italic;
                 white-space:normal}
.hoja tr.vacia td{height:8px;border:none}
.hoja td:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}
.hoja tr.titulo td,.hoja tr.subtitulo td,.hoja tr.nota td{text-align:left}

/* La primera columna es la que dice de que es cada fila (el jugador, la
   zona): se queda anclada al desplazar de costado, que es lo unico que hace
   navegable una hoja como Datos_Base. Va con fondo opaco para que las
   columnas no se le transparenten por debajo. */
.hoja td:first-child{position:sticky;left:0;z-index:1;background:var(--panel)}
.hoja tr.encabezado td:first-child{background:#24303f}
.hoja tr.total td:first-child{background:#242c38}
.hoja tr.combinada td{position:static}

/* ---------- pestana Jugadores (maqueta) ---------- */
.aviso{margin:2px 0 12px;background:#2a2416;border:1px solid #6b5a2a;
       color:var(--aviso);border-radius:10px;padding:10px 14px;font-size:13px}
.ficha{background:var(--panel);border:1px solid var(--borde);border-radius:12px;
       padding:14px 16px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.ficha .dorsal{font-size:38px;font-weight:700;line-height:1;
               font-variant-numeric:tabular-nums}
.ficha .datos{color:var(--suave);font-size:13px}
.ficha .rol{color:var(--aviso);font-weight:700;font-size:13px}
.indicadores{margin-top:12px;display:grid;gap:10px;
             grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.indicador{background:var(--panel);border:1px solid var(--borde);
           border-radius:12px;padding:12px 14px}
.indicador .valor{font-size:26px;font-weight:700;line-height:1.1;
                  font-variant-numeric:tabular-nums}
.indicador .titulo{color:var(--suave);font-size:11px;text-transform:uppercase;
                   letter-spacing:.05em;margin-top:4px}
.indicador .base{color:var(--suave);font-size:11.5px;margin-top:2px}
.grafico{background:var(--panel);border:1px solid var(--borde);border-radius:12px;
         padding:12px}
.grafico svg{width:100%;height:auto;display:block}
.leyenda{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px;color:var(--suave);
         font-size:12px}
.leyenda i{display:inline-block;width:10px;height:10px;border-radius:2px;
           margin-right:5px;vertical-align:middle}
.pie{margin-top:14px;background:var(--panel);border:1px solid var(--borde);
     border-radius:12px;padding:12px 16px;color:var(--suave);font-size:12.5px}
.pie h3{margin:0 0 6px;font-size:12px;text-transform:uppercase;
        letter-spacing:.05em;color:var(--texto)}
.pie ul{margin:0 0 10px;padding-left:18px}
.pie li{margin:2px 0}
.pie .falta{color:var(--aviso)}
.sub-titulo{margin:16px 0 6px;font-size:14px;font-weight:600}
.sub-titulo .aclara{color:var(--suave);font-weight:400;font-size:12px}


/* ======================================================================
   LA CANCHA: el modo visual de carga
   ======================================================================
   Se usa con una mano, parado al costado de la cancha, asi que todo lo que
   se toca mide 44px o mas y no hay ningun menu ni dialogo en el camino.
   Los dos equipos se dibujan siempre en el mismo lugar (A arriba, B abajo):
   una cancha que se da vuelta segun quien tiene la pelota se lee mal justo
   cuando no hay tiempo de leerla. De quien es la pelota se marca encendiendo
   su mitad, no moviendola. */
.modos{margin-top:12px;display:flex;gap:6px}
.modos button{flex:1;padding:10px 8px;font-size:14px;font-weight:600}
.modos button.activa{background:var(--panel2);border-color:var(--acento);color:#fff}

.visual{margin-top:10px}
.visual[hidden]{display:none}

.secuencia{background:var(--panel);border:1px solid var(--borde);
           border-left:4px solid var(--suave);border-radius:10px;
           padding:9px 13px;margin-bottom:10px;font-size:12px;
           font-family:var(--mono);color:var(--suave);
           max-height:64px;overflow:auto}
.secuencia[hidden]{display:none}

/* Las dos mitades pegadas; la linea punteada del medio es la red. */
.cancha{background:var(--panel);border:1px solid var(--borde);
        border-radius:12px;padding:8px}
.cancha[hidden]{display:none}
.mitad{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;
       transition:opacity .12s}
.mitad.dormida{opacity:.42}
.red{border-top:2px dashed var(--borde);margin:8px 2px}
.etiquetaMitad{font-size:11px;color:var(--suave);text-transform:uppercase;
               letter-spacing:.06em;padding:2px 2px 5px;
               display:flex;justify-content:space-between;gap:8px}
.etiquetaMitad.encendida{color:var(--acento)}
.etiquetaMitad .sinRotacion{text-transform:none;letter-spacing:0;color:var(--aviso)}

/* Una celda es una zona. Sirve para dos cosas segun el paso: mostrar al
   jugador que esta parado ahi, o ser el destino que se toca. */
.celda{position:relative;min-height:52px;border-radius:8px;
       border:1px solid transparent;background:#141a23;
       display:flex;align-items:center;justify-content:center}
.celda .numeroZona{position:absolute;top:3px;left:5px;font-size:10px;
                   color:#48566a;font-variant-numeric:tabular-nums}
.celda.zonaViva{border-color:var(--acento);background:#16283c;cursor:pointer}
.celda.zonaViva:hover{background:#1c334c}
.celda.zonaViva .numeroZona{color:var(--acento)}

/* El jugador: un circulo con el dorsal. 44px es el minimo para el pulgar. */
.jugador{width:44px;height:44px;border-radius:50%;display:flex;
         align-items:center;justify-content:center;font-weight:700;
         font-size:15px;font-variant-numeric:tabular-nums;
         background:var(--panel2);border:2px solid var(--borde);
         color:var(--suave);padding:0;line-height:1}
.jugador.viva{border-color:var(--acento);color:#fff;background:#1b2f47;
              cursor:pointer}
.jugador.viva:hover{background:#24405e}
.jugador[disabled]{opacity:.45;cursor:default}
.jugador[disabled]:hover{background:var(--panel2);border-color:var(--borde)}
/* el armador lleva el mismo amarillo que el _S de la tabla de rotacion */
.jugador.armador{box-shadow:0 0 0 2px var(--aviso)}
.jugador.saca{background:var(--acento);border-color:var(--acento);color:#08121f}

/* ---------- lo que se pregunta en cada paso ---------- */
.pedido{margin-top:10px}
.quePide{font-size:13px;color:var(--suave);text-transform:uppercase;
         letter-spacing:.06em;margin-bottom:7px}
.opciones{display:flex;flex-wrap:wrap;gap:7px}
.opciones button{min-height:44px;padding:10px 16px;font-size:15px;font-weight:600}
.opciones button.bien{border-color:#2f6b52;color:#bff0da}
.opciones button.mal{border-color:#7a3030;color:#ff9d9d}
.opciones button.secundaria{font-weight:400;font-size:13px;color:var(--suave);
                            min-height:38px;padding:8px 12px}

/* El teclado del dorsal. Hace falta mas seguido de lo que parece: en los
   partidos guardados el 15% de los dorsales no esta entre los 6 en cancha,
   porque los liberos no rotan. Tambien es la unica entrada de un equipo sin
   rotacion cargada. */
.teclado{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;max-width:280px}
.teclado button{min-height:48px;font-size:18px;font-weight:600;
                font-family:var(--mono)}
.teclado .ancho{grid-column:span 2}
.tecleado{grid-column:span 3;background:var(--panel2);
          border:1px solid var(--acento);border-radius:10px;padding:10px 14px;
          font:20px/1.2 var(--mono);text-align:center;min-height:44px;
          color:var(--texto)}
.tecleado .vacio{color:var(--suave)}

/* ---------- la linea que se esta armando ---------- */
.enCurso{margin-top:12px;background:var(--panel);border:1px solid var(--borde);
         border-radius:10px;padding:10px 13px}
.enCurso[hidden]{display:none}
.enCurso pre{margin:0 0 8px;font:15px/1.35 var(--mono);white-space:pre;
             overflow-x:auto;color:var(--texto)}
.enCurso pre .falta{color:var(--acento)}
.enCurso .fila{margin:0;display:flex;gap:7px;flex-wrap:wrap}
.enCurso .fila button{min-height:42px}

/* ---------- preparacion (nombres, rotacion, quien saca) ---------- */
.preparacion{display:flex;flex-direction:column;gap:9px}
.preparacion input{background:var(--panel2);border:1px solid var(--borde);
                   border-radius:10px;color:var(--texto);padding:14px 16px;
                   font:17px/1.2 system-ui,sans-serif}
.preparacion input:focus{outline:none;border-color:var(--acento);
                         box-shadow:0 0 0 3px #4aa3ff33}
.preparacion .grande{min-height:52px;font-size:16px;font-weight:600}
.preparacion .fila{margin:0;display:flex;gap:7px;flex-wrap:wrap}

/* Cuando el paso pide una zona, el circulo del jugador no puede comerse el
   toque: la zona es la que se esta eligiendo. */
.celda.zonaViva .jugador{pointer-events:none}
.teclado .todo{grid-column:1/-1}
.enCurso .falta{font:12px/1.3 var(--mono);color:var(--acento);
                margin-top:-4px;word-break:break-word}

/* El libero se distingue del resto: no rota y entra solo por el que cubre. */
.jugador.libero{border-style:dashed;border-color:var(--ok)}
.jugador.libero.viva{border-color:var(--ok);background:#14251e}

/* ---------- corregir a mano el resumen de un partido ---------- */
.correccion{margin-top:10px;background:var(--panel2);border:1px solid var(--borde);
            border-radius:10px;padding:12px 14px}
.camposCorreccion{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
                  gap:9px;margin-bottom:10px}
.campoCorreccion{display:flex;flex-direction:column;gap:4px;min-width:0}
.campoCorreccion > span{font-size:11px;color:var(--suave);text-transform:uppercase;
                        letter-spacing:.06em}
.campoCorreccion input,.campoCorreccion select{background:var(--fondo);
        border:1px solid var(--borde);border-radius:8px;color:var(--texto);
        padding:9px 11px;font:14px/1.2 var(--mono);min-width:0}
.campoCorreccion input:focus,.campoCorreccion select:focus{outline:none;
        border-color:var(--acento);box-shadow:0 0 0 3px #4aa3ff33}
.correccion .fila{margin:0;display:flex;gap:7px;flex-wrap:wrap}

/* ---------- nombres y buscador de la pestana Jugadores ---------- */
.buscadorJugadores{display:flex;gap:7px;margin:10px 0}
#buscarJugador{flex:1;min-width:0;background:var(--panel2);
               border:1px solid var(--borde);border-radius:10px;color:var(--texto);
               padding:10px 13px;font:14px/1.2 system-ui,sans-serif}
#buscarJugador:focus{outline:none;border-color:var(--acento);
                     box-shadow:0 0 0 3px #4aa3ff33}
/* el dorsal manda y el nombre acompaña: se busca por "el 13", no por el nombre */
#selectorDorsal button{display:inline-flex;align-items:baseline;gap:6px}
#selectorDorsal button[hidden]{display:none}
.nombreJugador{font-size:11.5px;color:var(--suave);font-weight:400}
#selectorDorsal button.activa .nombreJugador{color:#cfe4ff}
.nombreFicha{font-size:17px;font-weight:700;margin-bottom:2px}