/* =====================================================================
   GL SPORTS · ESTILOS DE LA INTRANET (se suman a estilos.css)
   ===================================================================== */

.adm-body { padding-top: var(--alto-cabecera); }
.adm-body .cabecera__in { gap: 16px; }
/* Barra blanca (igual que el sitio): textos y botones en azul para que contrasten. */
.adm-body .cabecera__logo span {
  font-family: var(--f-titulo); font-style: italic; font-weight: 800; font-size: 1.3rem;
  text-transform: uppercase; color: var(--rojo); letter-spacing: .02em;
}
.adm-modo {
  padding: 4px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: #e3f5ea; color: #17663a;
}
.adm-modo--demo { background: #fdf1d3; color: #8a5a00; }
.adm-sesion { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: .88rem; color: var(--azul); }
.adm-sesion .btn-mini { text-decoration: none; color: var(--azul); background: transparent; border-color: rgba(24, 34, 61, .45); }
.adm-sesion .btn-mini:hover { color: var(--blanco); background: var(--azul); border-color: var(--azul); }
.adm-sesion .adm-pastilla { background: rgba(24, 34, 61, .1); color: var(--azul); }

.adm { max-width: 1200px; margin: 0 auto; padding: 24px var(--margen) 64px; }

.adm-login { max-width: 420px; margin: 8vh auto 0; text-align: center; }
.adm-login h1 { font-size: 2.4rem; }
.adm-login p { color: var(--texto-suave); }
.adm-login .adm-form { text-align: left; margin-top: 24px; }

.adm-demo {
  margin: 0 0 18px; padding: 12px 16px; border-radius: var(--radio);
  background: rgba(242, 193, 78, .12); border: 1px solid rgba(242, 193, 78, .45); color: #f6dc9b; font-size: .92rem;
}

.adm-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; border-bottom: 1px solid var(--borde); }
.adm-tabs [role="tab"] {
  padding: 10px 18px; border: 0; background: none; cursor: pointer;
  font-family: var(--f-titulo); font-style: italic; font-weight: 800; font-size: 1.15rem; text-transform: uppercase;
  color: var(--texto-tenue); border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.adm-tabs [role="tab"][aria-selected="true"] { color: var(--blanco); border-color: var(--rojo); }

.adm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
#datos { display: grid; gap: 16px; }
.adm-caja {
  display: grid; gap: 14px; padding: 20px; border-radius: var(--radio);
  background: var(--superficie); border: 1px solid var(--borde);
}
.adm-caja h2 { font-size: 1.5rem; }
.adm-caja h3 { font-size: 1.1rem; color: var(--texto-suave); }
.adm-caja__cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.adm-caja .tabla-caja { margin: 0; }
.adm-caja .tabla small { color: var(--texto-tenue); font-weight: 500; }

.adm-form { display: grid; gap: 12px; }
.adm-form label, .adm-inline { display: grid; gap: 6px; font-size: .88rem; font-weight: 600; color: var(--texto-suave); }
.adm-form input:not([type="checkbox"]), .adm-form select, .adm-form textarea, .adm-inline input {
  width: 100%; padding: 10px 12px; border-radius: 8px;
  background: var(--fondo); color: var(--blanco); border: 1px solid rgba(255, 255, 255, .2);
  font: inherit; font-weight: 500;
}
.adm-form input:focus-visible, .adm-form select:focus-visible, .adm-form textarea:focus-visible, .adm-inline input:focus-visible {
  outline: 2px solid var(--blanco); outline-offset: 1px;
}
.adm-dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.adm-fila { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.adm-inline { grid-auto-flow: column; align-items: center; }
.adm-inline input { width: 90px; }
.adm-nota { margin: 0; color: var(--texto-tenue); font-size: .86rem; }
.adm-error { margin: 0; color: #ff8a86; font-size: .9rem; min-height: 1.2em; }
.adm-checks { display: flex; flex-wrap: wrap; gap: 12px 18px; margin: 0; padding: 0; border: 0; }
.adm-checks legend { font-size: .88rem; font-weight: 600; color: var(--texto-suave); margin-bottom: 6px; }
.adm-checks label { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--blanco); }

.adm-switch { display: flex !important; grid-auto-flow: column; align-items: center; gap: 10px !important; cursor: pointer; color: var(--blanco) !important; }
.adm-switch input { width: 20px; height: 20px; accent-color: var(--rojo); flex-shrink: 0; }

/* Marcador */
.adm-marcador { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.adm-goles {
  display: grid; justify-items: center; gap: 10px; padding: 16px 10px; border-radius: 12px;
  background: var(--fondo); border: 1px solid var(--borde); text-align: center;
}
.adm-goles__equipo {
  font-family: var(--f-titulo); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: 1.1rem; line-height: 1.1;
}
.adm-goles__ctrl { display: flex; align-items: center; gap: 14px; }
.adm-goles output {
  min-width: 2ch; font-family: var(--f-titulo); font-style: italic; font-weight: 800; font-size: 3.4rem; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.adm-redondo {
  width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
  background: var(--superficie-2); border: 1px solid rgba(255, 255, 255, .25);
  font-size: 1.6rem; font-weight: 700; line-height: 1;
}
.adm-redondo--mas { background: var(--rojo); border-color: var(--rojo); }
.adm-redondo:active { transform: scale(.95); }

.adm-periodos { display: flex; flex-wrap: wrap; gap: 8px; }
.adm-periodos button {
  padding: 10px 14px; border-radius: 8px; cursor: pointer;
  background: var(--superficie-2); border: 1px solid var(--borde); font-weight: 600;
}
.adm-periodos button[aria-pressed="true"] { background: var(--blanco); color: var(--azul); border-color: var(--blanco); }

.adm-publicado { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--borde); }
.adm-vista { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* Listas */
.adm-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.adm-lista li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border-radius: 8px; background: var(--fondo); border: 1px solid var(--borde);
}
.adm-lista li div { display: grid; }
.adm-lista small { color: var(--texto-tenue); }
.adm-agenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .92rem; }
.adm-agenda li { padding: 8px 0; border-bottom: 1px solid var(--borde); }
.adm-agenda--marcar label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.adm-agenda--marcar input { margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--rojo); }
.adm-agenda--marcar small { display: block; color: var(--texto-tenue); }

/* Mensajes del sitio */
.adm-contador {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 4px;
  border-radius: 999px; background: var(--rojo); color: var(--blanco); font-size: .75rem; font-weight: 700;
}
.adm-mensajes li { display: grid; align-items: start; gap: 6px; }
.adm-mensajes li.adm-mensaje--nuevo { border-color: var(--rojo); }
.adm-mensajes p { margin: 0; white-space: pre-wrap; }
.adm-mensajes .adm-acciones { display: flex; flex-wrap: wrap; gap: 8px; }

.adm-pastilla {
  display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  background: rgba(255, 255, 255, .08); color: var(--texto-suave);
}
.adm-pastilla:empty { display: none; }
.adm-pastilla--si { background: rgba(31, 138, 76, .25); color: #8ee0b0; }
.adm-pastilla--ojo { background: rgba(242, 193, 78, .18); color: #f2c14e; }

.cifras--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Rol y modo demostración */
.adm-ver-como { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--azul); }
.adm-ver-como select {
  padding: 6px 8px; border-radius: 8px; background: var(--blanco); color: var(--azul);
  border: 1px solid rgba(24, 34, 61, .45); font: inherit;
}
.adm-grid--separado { margin-top: 16px; }
.adm-acciones { display: inline-flex; gap: 6px; flex-shrink: 0; }
.adm-lista li.adm-editando { border-color: var(--rojo); }

/* Datos: barra de división y vistas */
.adm-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-bottom: 12px; }
.adm-barra .adm-inline select {
  padding: 9px 10px; border-radius: 8px; background: var(--fondo); color: var(--blanco);
  border: 1px solid rgba(255, 255, 255, .2); font: inherit; font-weight: 600;
}
.adm-segmento { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 10px; background: var(--superficie); border: 1px solid var(--borde); }
.adm-segmento button {
  min-height: 40px; padding: 8px 14px; border: 0; border-radius: 8px; cursor: pointer;
  background: none; font-weight: 600; color: var(--texto-suave);
}
.adm-segmento button[aria-pressed="true"] { background: var(--blanco); color: var(--azul); }
.adm-privado { margin: 0 0 14px; }
.adm-privado::before { content: "🔒 "; }
[data-vista-panel] { display: grid; gap: 16px; }
[data-vista-panel][hidden] { display: none; }

.adm-cuatro { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.adm-dos--corto { max-width: 420px; }

/* Planilla y plantel */
.adm-planilla input[type="number"] { width: 64px; padding: 7px 6px; text-align: center; }
.adm-planilla input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--rojo); }
.adm-planilla .tabla__club input { min-width: 180px; }
.adm-planilla select { padding: 7px 8px; border-radius: 8px; background: var(--fondo); color: var(--blanco); border: 1px solid rgba(255, 255, 255, .2); font: inherit; }
.adm-planilla td, .adm-planilla th { padding: 6px 8px; }

/* Tabla de estadísticas ordenable */
.adm-stats th { padding: 0; }
.adm-ordenar {
  width: 100%; min-height: 40px; padding: 8px 10px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: .75rem; font-weight: 700; letter-spacing: .04em; color: var(--texto-tenue); white-space: nowrap;
}
.adm-stats th.tabla__club .adm-ordenar { text-align: left; }
.adm-stats th[aria-sort] .adm-ordenar { color: var(--blanco); }
.adm-stats tbody th { padding: 9px 10px; }
.adm-stats small { color: var(--texto-tenue); font-weight: 500; }
.adm-inactivo { opacity: .55; }
.cifras--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Gráficos · paleta validada (dataviz) para el fondo #111829:
   serie 1 azul #3987e5, serie 2 naranja #d95926 · CVD ΔE 26.8, visión normal ΔE 31.8, contraste ≥ 3:1 */
.graf { width: 100%; height: auto; display: block; overflow: visible; }
.graf--columnas { width: auto; max-width: none; }
.graf__desplazable { overflow-x: auto; }
.graf__serie-1 { fill: #3987e5; }
.graf__serie-2 { fill: #d95926; }
.graf__etiqueta { fill: var(--texto-suave); font-size: 12px; font-family: var(--f-texto); }
.graf__valor { fill: var(--blanco); font-size: 11px; font-weight: 700; font-family: var(--f-texto); }
.graf__eje { fill: var(--texto-tenue); font-size: 10.5px; font-family: var(--f-texto); }
.graf__grilla { stroke: rgba(255, 255, 255, .08); stroke-width: 1; }
.graf__base { stroke: rgba(255, 255, 255, .35); stroke-width: 1; }
.graf__zona { fill: transparent; }
.graf__zona:hover { fill: rgba(255, 255, 255, .04); }
.graf__leyenda { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .85rem; color: var(--texto-suave); }
.graf__leyenda li { display: inline-flex; align-items: center; gap: 8px; }
.graf__muestra { width: 12px; height: 12px; border-radius: 3px; }
.graf__muestra--1 { background: #3987e5; }
.graf__muestra--2 { background: #d95926; }
.graf__globo {
  position: fixed; z-index: 300; pointer-events: none; max-width: 280px;
  padding: 8px 10px; border-radius: 8px; background: var(--blanco); color: var(--azul);
  font-size: .85rem; font-weight: 600; box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}

/* Redactar con IA (OmniRoute) */
.adm-columna { display: grid; gap: 16px; align-content: start; }
.adm-ajustes { border-top: 1px solid var(--borde); padding-top: 12px; display: grid; gap: 10px; }
.adm-ajustes[open] { gap: 12px; }
.adm-ajustes summary { cursor: pointer; font-weight: 600; color: var(--texto-suave); }
.adm-crece { flex: 1 1 220px; }
.adm-pastilla--error { background: rgba(205, 39, 35, .25); color: #ff8a86; }

@media (max-width: 900px) {
  .adm-grid, .adm-dos { grid-template-columns: minmax(0, 1fr); }
  /* En el celular, el marcador (lo que más se usa durante el partido) va primero */
  .adm-caja--marcador { order: -1; }
  .cifras--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm-sesion #adm-usuario { display: none; }
  .adm-cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cifras--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm-body .menu-btn { display: none; }
}

/* Celular: la cabecera solo deja los botones (Respaldo, Ver sitio, Salir);
   el estado y el rol se ocultan para que todo quepa en una línea. */
@media (max-width: 560px) {
  .adm-body .cabecera__in { gap: 8px; }
  .adm-modo, .adm-sesion #adm-rol, .adm-body .cabecera__logo span { display: none; }
  .adm-sesion { gap: 6px; }
  .adm-sesion .btn-mini { white-space: nowrap; padding-left: 10px; padding-right: 10px; }
}

@media (max-width: 560px) {
  .adm-marcador { grid-template-columns: minmax(0, 1fr); }
  .adm-goles { grid-template-columns: minmax(0, 1fr) auto; justify-items: start; align-items: center; text-align: left; }
  .adm-redondo { width: 52px; height: 52px; }
}

/* Cargar plantel desde .txt: el input de archivo va oculto dentro del botón */
.adm-archivo { position: relative; cursor: pointer; }
.adm-archivo input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.adm-archivo:focus-within { outline: 3px solid var(--blanco); outline-offset: 2px; }

/* Tráfico */
.graf__linea { fill: none; stroke: #f2c14e; stroke-width: 2; stroke-linejoin: round; }
.graf__muestra--linea { height: 3px; border-radius: 2px; background: #f2c14e; }
.cifras--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cifras small { font-size: .78rem; }
.adm-subida { color: #8ee0b0; }
.adm-bajada { color: #ff9b97; }
.adm-tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: thin; }
.adm-tabs [role="tab"] { white-space: nowrap; }

/* Highlights: detector de jugadas (js/highlights.js) */
.adm-subir {
  position: relative;
  display: grid; place-items: center; gap: 4px; padding: 26px 16px; text-align: center; cursor: pointer;
  border: 2px dashed var(--borde); border-radius: var(--radio); color: var(--texto-suave);
  transition: border-color .15s, background-color .15s;
}
.adm-subir:hover, .adm-subir.hl-encima { border-color: var(--rojo); background: rgba(205, 39, 35, .08); }
.adm-subir:focus-within { outline: 3px solid var(--blanco); outline-offset: 2px; }
.adm-subir input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.adm-subir strong { color: var(--blanco); }
.hl-area { grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr); }
.hl-columna { display: grid; gap: 16px; align-content: start; }
.hl-video { width: 100%; max-height: 70vh; border-radius: 8px; background: #000; display: block; }
.hl-control { display: block; font-size: .88rem; font-weight: 600; color: var(--texto-suave); }
.hl-control strong { color: var(--blanco); }
.hl-control input[type="range"] { display: block; width: 100%; margin-top: 8px; accent-color: var(--rojo); }
.hl-progreso { width: 100%; height: 8px; border: 0; border-radius: 999px; overflow: hidden; appearance: none; background: rgba(255, 255, 255, .08); }
.hl-progreso::-webkit-progress-bar { background: rgba(255, 255, 255, .08); border-radius: 999px; }
.hl-progreso::-webkit-progress-value { background: var(--rojo); border-radius: 999px; }
.hl-progreso::-moz-progress-bar { background: var(--rojo); border-radius: 999px; }
.hl-linea { width: 100%; height: 100px; display: block; border-radius: 8px; background: var(--fondo); }
.hl-clips li { flex-wrap: wrap; }
.hl-clips .hl-puntaje { min-width: 52px; text-align: center; font-weight: 800; font-size: .8rem; padding: 3px 0; border-radius: 6px; background: rgba(242, 193, 78, .18); color: #f2c14e; }
.hl-clips .hl-tiempo { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 120px; }
.hl-clips select { padding: 6px 8px; border-radius: 8px; background: var(--superficie-2); border: 1px solid var(--borde); color: var(--blanco); font: inherit; font-size: .85rem; }
.hl-clips .hl-incluir { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--texto-suave); }
.hl-clips .hl-incluir input { width: 18px; height: 18px; accent-color: var(--rojo); }
@media (max-width: 900px) { .hl-area { grid-template-columns: minmax(0, 1fr); } }