/* Competición (txedep/modulos/competicion.py). Solo variables de :root de txedep.css; todo con el prefijo com- porque esta
   hoja se carga en todas las páginas. Sin JavaScript: el campo del prepartido y la pizarra son rejillas, y el calendario del
   mes pasa a lista en el teléfono. */

.com-filtros { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: flex-end; }
.com-filtros .campo { min-width: 140px; }
.com-desliza { overflow-x: auto; max-width: 100%; }
.com-ajusta, .com-hoja { min-width: 0; }
.com-mini { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--e-3); align-items: end; }
.com-mini select { max-width: 100%; }  /* que una lista ancha no ensanche la página: dentro se desplaza o se parte */
.com-desliza > .tabla { min-width: 560px; }
.com-cifras { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--e-3); }
.com-cifra { background: var(--bandeja); border-radius: var(--r-campo); padding: var(--e-3) var(--e-4); display: grid; gap: 2px; }
.com-cifra strong { font-size: var(--t-20); font-weight: var(--p-cifra); font-variant-numeric: tabular-nums; }
.com-paso { display: flex; gap: var(--e-2); align-items: center; flex-wrap: wrap; }
.com-paso strong { min-width: 0; }
.com-acciones { display: flex; gap: var(--e-2); flex-wrap: wrap; align-items: center; }

/* resultado y lado */
.com-marcador { font-size: var(--t-28); font-weight: var(--p-cifra); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.com-res { font-weight: var(--p-cifra); font-variant-numeric: tabular-nums; white-space: nowrap; }
.com-lado { display: inline-flex; align-items: center; height: 22px; padding: 0 var(--e-2); border-radius: var(--r-control); font-size: var(--t-12); font-weight: var(--p-rotulo); white-space: nowrap; }
.com-lado--casa { color: var(--v-fichar); background: color-mix(in srgb, var(--v-fichar) 12%, transparent); }
.com-lado--fuera { color: var(--v-descartar); background: color-mix(in srgb, var(--v-descartar) 12%, transparent); }
.com-propio td { font-weight: var(--p-rotulo); background: var(--bandeja); }
.com-aviso { color: var(--aviso-texto); background: var(--aviso-fondo); border-radius: var(--r-campo); padding: var(--e-2) var(--e-3); font-size: var(--t-13); }

/* alineación: una tabla en el ordenador; en el teléfono, una tarjeta por jugador con sus rótulos */
.com-alineacion input:not([type="checkbox"]), .com-alineacion select, .com-alineacion textarea { min-height: 32px; padding: 0 var(--e-2); border: 0; border-radius: var(--r-chip); background-color: var(--bandeja); color: var(--texto); font: var(--p-texto) var(--t-13)/1.3 var(--letra); width: 100%; }
.com-alineacion input:focus, .com-alineacion select:focus, .com-alineacion textarea:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--foco); background-color: var(--fondo); }
.com-alineacion .com-n { width: 52px; }
.com-alineacion td { padding: var(--e-1) var(--e-2); }
.com-alineacion td input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accion); }
.com-otro { color: var(--v-interesante); }
@media (max-width: 900px) {
  .com-alineacion thead { display: none; }
  .com-alineacion, .com-alineacion tbody { display: block; }
  .com-alineacion tr { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: var(--e-2); padding: var(--e-3) 0; box-shadow: inset 0 1px 0 var(--linea); }
  .com-alineacion td { display: grid; gap: 2px; padding: 0; box-shadow: none; }
  .com-alineacion td::before { content: attr(data-e); font-size: var(--t-12); color: var(--texto-2); font-weight: var(--p-rotulo); }
  .com-alineacion td:first-child { grid-column: 1 / -1; }
  .com-alineacion td:first-child::before { content: none; }
  .com-alineacion .com-n { width: 100%; }
  .com-alineacion td.com-ancha { grid-column: 1 / -1; }
}

/* histórico de convocatorias: los colores de Gesdep */
.com-hc { display: inline-grid; place-items: center; min-width: 30px; height: 26px; padding: 0 4px; border-radius: 6px; font-size: var(--t-12); font-weight: var(--p-cifra); font-variant-numeric: tabular-nums; background: color-mix(in srgb, var(--c, var(--texto-4)) 26%, transparent); box-shadow: inset 0 0 0 1.5px var(--c, var(--linea)); }
.com-hc--titular { --c: var(--v-fichar); }
.com-hc--suplente { --c: var(--v-seguimiento); }
.com-hc--sin-jugar { --c: var(--v-descartar); }
.com-hc--no { --c: var(--v-interesante); }
.com-hc--vacio { background: transparent; box-shadow: inset 0 0 0 1px var(--linea); }
.com-historico th.com-vertical { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font-size: var(--t-11); padding: var(--e-2) 2px; text-align: left; max-height: 140px; }
.com-historico { width: auto; }
.com-historico td { text-align: center; padding: 3px var(--e-2); }
.com-historico td:first-child, .com-historico td:nth-child(2) { text-align: left; }
.com-leyenda { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); font-size: var(--t-13); color: var(--texto-2); align-items: center; }
.com-leyenda .com-hc { min-width: 22px; height: 18px; }

/* el campo (prepartido) y la pizarra (análisis de plantilla) */
.com-cancha { position: relative; display: grid; gap: var(--e-3); padding: var(--e-5) var(--e-3); border-radius: var(--r-tarjeta); background: var(--bandeja); box-shadow: inset 0 0 0 2px var(--borde-fuerte); max-width: 560px; width: 100%; margin: 0 auto; min-height: 420px; align-content: space-between; overflow: hidden; }
.com-cancha::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px solid var(--borde); }
.com-cancha::after { content: ""; position: absolute; left: 50%; top: 50%; width: 90px; height: 90px; margin: -45px 0 0 -45px; border-radius: 50%; border: 2px solid var(--borde); }
.com-linea { position: relative; z-index: 1; display: flex; justify-content: space-around; gap: var(--e-2); }
.com-ficha { display: grid; justify-items: center; gap: 4px; min-width: 0; flex: 1; max-width: 110px; text-align: center; }
.com-ficha__dorsal { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--accion); color: var(--sobre-accion); font-weight: var(--p-cifra); font-variant-numeric: tabular-nums; }
.com-ficha__dorsal--vacio { background: var(--bandeja-fuerte); color: var(--texto-2); }
.com-ficha__nombre { font-size: var(--t-12); font-weight: var(--p-rotulo); overflow-wrap: anywhere; line-height: 1.2; }
.com-puestos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--e-3); }

.com-pizarra { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: ". pun ." "ei mp ed" "ii med id" "li mc ld" ". por ."; gap: var(--e-2); padding: var(--e-4) var(--e-3); border-radius: var(--r-tarjeta); background: var(--bandeja); box-shadow: inset 0 0 0 2px var(--borde-fuerte); }
.com-zona { background: var(--superficie); border-radius: var(--r-campo); padding: var(--e-2); min-height: 64px; display: grid; gap: 4px; align-content: start; box-shadow: 0 0 0 1px var(--linea); min-width: 0; }
.com-zona .rotulo { display: flex; justify-content: space-between; gap: var(--e-1); }
.com-zona ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: var(--t-13); }
.com-zona li { overflow-wrap: anywhere; }
.com-zona--pun { grid-area: pun; } .com-zona--ei { grid-area: ei; } .com-zona--mp { grid-area: mp; } .com-zona--ed { grid-area: ed; }
.com-zona--ii { grid-area: ii; } .com-zona--med { grid-area: med; } .com-zona--id { grid-area: id; } .com-zona--li { grid-area: li; }
.com-zona--mc { grid-area: mc; } .com-zona--ld { grid-area: ld; } .com-zona--por { grid-area: por; }
.com-zona--vacia { box-shadow: 0 0 0 1.5px var(--aviso-texto); }
.com-marca { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; font-size: var(--t-11); font-weight: var(--p-cifra); background: var(--bandeja-hover); color: var(--texto-2); margin-right: 4px; flex: none; }
.com-marca--j { background: var(--accion); color: var(--sobre-accion); }

/* clasificación */
.com-clasificacion td:first-child { width: 40px; }
.com-zona-tabla { box-shadow: inset 3px 0 0 var(--c); }
.com-zona-tabla--asciende { --c: var(--v-fichar); }
.com-zona-tabla--promo-ascenso { --c: var(--v-interesante); }
.com-zona-tabla--promo-descenso { --c: var(--v-seguimiento); }
.com-zona-tabla--desciende { --c: var(--v-descartar); }
.com-racha { display: inline-flex; gap: 2px; }
.com-racha span { width: 18px; height: 18px; border-radius: 4px; display: inline-grid; place-items: center; font-size: var(--t-11); font-weight: var(--p-cifra); color: var(--sobre-accion); background: var(--c); }
.com-racha .com-r-g { --c: var(--v-fichar); } .com-racha .com-r-e { --c: var(--v-sin); } .com-racha .com-r-p { --c: var(--v-descartar); }
.com-cruce td, .com-cruce th { text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.com-cruce th:first-child, .com-cruce td:first-child { text-align: left; }
.com-cruce .com-diagonal { background: var(--bandeja); }
.com-goles { display: inline-flex; align-items: center; gap: 4px; }
.com-goles input { width: 52px; min-height: 32px; text-align: center; border: 0; border-radius: var(--r-chip); background-color: var(--bandeja); color: var(--texto); font: var(--p-cifra) var(--t-14)/1 var(--letra); }
.com-goles input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--foco); background-color: var(--fondo); }
.com-jornadas { display: flex; gap: var(--e-1); flex-wrap: wrap; }
.com-jornadas a { min-width: 36px; height: 32px; display: inline-grid; place-items: center; border-radius: var(--r-control); text-decoration: none; background: var(--bandeja); font-weight: var(--p-rotulo); font-size: var(--t-13); color: var(--texto-2); padding: 0 var(--e-2); }
.com-jornadas a[aria-current] { background: var(--accion); color: var(--sobre-accion); }

/* el mes (calendario de actividades) */
.com-mes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--linea); border-radius: var(--r-campo); overflow: hidden; box-shadow: 0 0 0 1px var(--linea); }
.com-mes__cab { background: var(--fondo); padding: var(--e-2); font-size: var(--t-12); color: var(--texto-2); font-weight: var(--p-rotulo); }
.com-dia { background: var(--superficie); min-height: 96px; padding: var(--e-1) var(--e-2) var(--e-2); display: grid; gap: 4px; align-content: start; min-width: 0; }
.com-dia--fuera { background: var(--fondo); color: var(--texto-4); }
.com-dia__num { font-size: var(--t-12); font-weight: var(--p-cifra); font-variant-numeric: tabular-nums; }
.com-dia--hoy .com-dia__num { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accion); color: var(--sobre-accion); }
.com-dia__nombre { display: none; }
.com-evento { font-size: var(--t-12); line-height: 1.25; padding: 2px 6px; border-radius: 6px; background: var(--bandeja); overflow-wrap: anywhere; text-decoration: none; display: block; }
.com-evento--partido { box-shadow: inset 3px 0 0 var(--v-fichar); }
.com-evento--fuera { box-shadow: inset 3px 0 0 var(--v-descartar); }
.com-evento--descanso { color: var(--texto-2); }
@media (max-width: 700px) {
  .com-mes { display: block; background: transparent; box-shadow: none; }
  .com-mes__cab, .com-dia--fuera, .com-dia--libre { display: none; }
  .com-dia { min-height: 0; padding: var(--e-3) 0; box-shadow: inset 0 -1px 0 var(--linea); background: transparent; grid-template-columns: 64px minmax(0, 1fr); }
  .com-dia__cab { grid-row: span 9; display: grid; align-content: start; }
  .com-dia__nombre { display: block; font-size: var(--t-12); color: var(--texto-2); }
}

/* cuadrante y reservas */
.com-semana td input, .com-semana td select { min-height: 36px; }
.com-tipo { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--p-rotulo); }
.com-tipo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--texto-4)); }
.com-tipo--entreno { --c: var(--v-interesante); } .com-tipo--partido { --c: var(--v-fichar); } .com-tipo--descanso { --c: var(--texto-4); } .com-tipo--otro { --c: var(--v-seguimiento); }
@media (max-width: 900px) {
  .com-semana thead { display: none; }
  .com-semana, .com-semana tbody { display: block; }
  .com-semana tr { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-2); padding: var(--e-3) 0; box-shadow: inset 0 1px 0 var(--linea); }
  .com-semana td { display: grid; gap: 2px; padding: 0; box-shadow: none; }
  .com-semana td::before { content: attr(data-e); font-size: var(--t-12); color: var(--texto-2); font-weight: var(--p-rotulo); }
  .com-semana td:first-child, .com-semana td.com-ancha { grid-column: 1 / -1; }
  .com-semana td:first-child::before { content: none; }
}
.com-dias { display: grid; gap: var(--e-4); }
.com-dias h2 { display: flex; gap: var(--e-2); align-items: baseline; }

/* hojas para imprimir */
.com-hoja { display: grid; gap: var(--e-4); }
.com-hoja__salto { break-before: page; }
.com-anotar td { height: 30px; }
@media print {
  .com-no-imprimir, .aviso, .sub { display: none !important; }
  .com-cancha, .com-pizarra { break-inside: avoid; }
  .pagina { padding: 0; max-width: none; }
}

/* convocatoria: quien no puede jugar ese día (sanción o baja), en rojo como en Gesdep */
.com-no-disponible { color: var(--v-descartar); font-size: var(--t-12); font-weight: var(--p-rotulo); white-space: nowrap; }

/* el color de cada equipo: libre (#rrggbb), pintado con un <svg fill> (la CSP no deja style=) */
.com-muestra { display: inline-block; width: 12px; height: 12px; vertical-align: -1px; flex: none; }
.com-color { width: 52px; height: var(--alto-campo); padding: 2px; border: 0; border-radius: var(--r-campo); background: var(--bandeja); cursor: pointer; }
.com-foto { display: block; max-width: 100%; height: auto; max-height: 420px; border-radius: var(--r-campo); object-fit: cover; }
.com-tarjeta { display: inline-block; width: 10px; height: 14px; border-radius: 2px; background: var(--c); flex: none; }
.com-tarjeta--amarilla { --c: var(--v-seguimiento); } .com-tarjeta--roja { --c: var(--v-descartar); }
.com-avisar { display: grid; gap: var(--e-2); width: 100%; }
.com-rendimiento { resize: vertical; padding: 6px var(--e-2); min-width: 160px; }
.com-estadisticas input { min-height: 32px; padding: 0 var(--e-2); border: 0; border-radius: var(--r-chip); background-color: var(--bandeja); color: var(--texto); font: var(--p-texto) var(--t-13)/1.3 var(--letra); width: 100%; }
.com-estadisticas input.com-n { width: 72px; text-align: center; }
.com-estadisticas input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--foco); background-color: var(--fondo); }
.com-desliza > .com-estadisticas { min-width: 320px; }
.com-semana .com-segunda td { box-shadow: none; padding-top: 0; }
.com-todos td { vertical-align: top; }
.com-todos td .com-tipo, .com-todos td .secundario { display: flex; font-size: var(--t-12); white-space: nowrap; }
.com-desliza > .com-todos { min-width: 760px; }