/* =============================================
   EDP VIDEOS — style.css
   ============================================= */

:root {
  --bg: #0f0f1a;
  --card: rgba(255,255,255,0.04);
  --card-fuerte: rgba(255,255,255,0.07);
  --border: rgba(255,255,255,0.10);
  --text: #f0f0f0;
  --muted: rgba(240,240,240,0.45);
  --acento: #f5c842;
  --edp: #22c55e;
  --rival: #ef4444;
  --radio: 10px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  min-height: 100vh;
}

/* ---------- barra superior ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,0.25);
  position: sticky;
  top: 0;
  z-index: 50;
}
.marca {
  color: var(--text);
  text-decoration: none;
  font-weight: 800;
  letter-spacing: 0.06em;
  font-size: 16px;
}
.marca span { color: var(--acento); }
.topnav { display: flex; gap: 14px; }
.topnav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
}
.topnav a:hover { color: var(--text); }

main { padding: 14px 16px 40px; max-width: 1500px; margin: 0 auto; }
.vista[hidden] { display: none; }

/* ---------- filtros / lista de partidos ---------- */
.filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.filtros input[type="search"] {
  flex: 1 1 240px;
  min-width: 180px;
}
input[type="search"],
input[type="url"],
input[type="password"],
input[type="number"],
select {
  background: var(--card-fuerte);
  border: 1px solid var(--border);
  border-radius: var(--radio);
  color: var(--text);
  padding: 9px 12px;
  font-family: inherit;
  font-size: 14px;
  outline: none;
}
input:focus, select:focus { border-color: var(--acento); }
select option { background: #1a1a2e; }
.chk { color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 6px; cursor: pointer; }
.contador { color: var(--muted); font-size: 12px; margin-left: auto; }

.lista { display: flex; flex-direction: column; gap: 8px; }

.partido {
  display: grid;
  grid-template-columns: 96px 1fr auto 28px;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radio);
  cursor: pointer;
  text-decoration: none;
  color: var(--text);
  transition: background 0.15s, border-color 0.15s;
}
.partido:hover { background: var(--card-fuerte); border-color: rgba(245,200,66,0.35); }
.partido .fecha { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.partido .equipos { font-weight: 600; }
.partido .equipos small { display: block; color: var(--muted); font-weight: 400; font-size: 11px; margin-top: 2px; }
.partido .resultado {
  font-weight: 800;
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  font-size: 18px;
  letter-spacing: 0.04em;
}
.partido .marca-flag { font-size: 15px; }
.partido .marca-flag.sin { opacity: 0.25; }
.partido .anclas-mini { color: var(--muted); font-size: 11px; }

/* ---------- barra de la vista partido ---------- */
.barra {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.barra-titulo { flex: 1; min-width: 0; }
.barra-titulo h1 {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.barra-titulo .sub { color: var(--muted); font-size: 12px; margin-top: 2px; }

.btn {
  background: var(--card-fuerte);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radio);
  padding: 9px 14px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { background: rgba(255,255,255,0.12); }
.btn.chico { padding: 7px 11px; font-size: 12px; }
.btn.acento { background: linear-gradient(135deg, #f39c12, #e67e22); border-color: transparent; color: #fff; font-weight: 700; }
.btn.primario { background: linear-gradient(135deg, #27ae60, #1e8449); border-color: transparent; color: #fff; font-weight: 700; }
.btn.peligro { background: transparent; border-color: rgba(239,68,68,0.5); color: #ef7a7a; }
.btn.peligro:hover { background: rgba(239,68,68,0.12); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---------- layout de dos columnas ---------- */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.col-player, .col-lista { min-width: 0; }

/* ---------- reproductor ---------- */
.player-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid var(--border);
  border-radius: var(--radio);
  overflow: hidden;
}
.player-wrap iframe, #host-ver, #host-asignar {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.player-wrap #host-ver > div, .player-wrap #host-asignar > div { width: 100%; height: 100%; }
.player-vacio {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #12121f;
  color: var(--muted);
  text-align: center;
  padding: 20px;
}
.player-vacio[hidden] { display: none; }

/* ---------- controles ---------- */
.controles {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.controles button {
  background: var(--card-fuerte);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 50%;
  width: 42px;
  height: 42px;
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
}
.controles button:hover { background: rgba(255,255,255,0.14); }
.controles select { flex: 1; min-width: 130px; padding: 8px 10px; border-radius: var(--radio); }
.reloj {
  font-variant-numeric: tabular-nums;
  font-family: 'Barlow Condensed', monospace;
  font-size: 17px;
  font-weight: 700;
  color: var(--acento);
  min-width: 58px;
  text-align: right;
}

/* ---------- linea de tiempo ---------- */
.timeline-wrap { margin-top: 12px; }
.timeline {
  position: relative;
  height: 62px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radio);
  overflow: hidden;
  cursor: crosshair;
}
.tl-marca {
  position: absolute;
  bottom: 6px;
  width: 2px;
  border-radius: 1px;
  background: var(--muted);
  transition: height 0.15s;
}
.tl-marca.edp { background: var(--edp); }
.tl-marca.rival { background: var(--rival); }
.tl-marca.punto { height: 34px; }
.tl-marca.cambio { height: 16px; opacity: 0.7; }
.tl-marca.set { height: 46px; width: 3px; background: var(--acento); }
.tl-marca:hover { outline: 1px solid #fff; outline-offset: 1px; }
.tl-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #fff;
  box-shadow: 0 0 6px rgba(255,255,255,0.8);
  left: 0;
  pointer-events: none;
  display: none;
}
.tl-leyenda {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted);
}
.tl-leyenda .punto-edp { color: var(--edp); }
.tl-leyenda .punto-rival { color: var(--rival); }
.tl-hint { margin-left: auto; }

/* ---------- lista de eventos ---------- */
.eventos {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radio);
  max-height: 620px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.evento {
  display: grid;
  grid-template-columns: 40px 74px minmax(0, 1fr) auto 54px;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  cursor: pointer;
  font-size: 13px;
}
.evento:hover { background: rgba(255,255,255,0.05); }
.evento.actual { background: rgba(245,200,66,0.14); box-shadow: inset 3px 0 0 var(--acento); }
.evento.sel { background: rgba(34,197,94,0.14); box-shadow: inset 3px 0 0 var(--edp); }
.evento .setchip {
  font-size: 11px;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  text-align: center;
  padding: 2px 0;
}
.evento .hora { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.evento .desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evento .tanteo { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--muted); white-space: nowrap; }
.evento .vt { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--acento); font-size: 12px; text-align: right; }
.evento .vt.vacio { color: var(--muted); font-weight: 400; }
.evento.tipo-cambio .desc { color: var(--muted); }

/* ---------- vista asignar ---------- */
.fila-url { display: flex; gap: 8px; margin-bottom: 10px; }
.fila-url input { flex: 1; min-width: 0; }
.error {
  background: rgba(239,68,68,0.12);
  border: 1px solid rgba(239,68,68,0.4);
  color: #f3a3a3;
  padding: 8px 12px;
  border-radius: var(--radio);
  font-size: 13px;
  margin-bottom: 10px;
}
.pasos { margin: 14px 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.pasos b { color: var(--text); }

.btn-grande {
  width: 100%;
  padding: 15px;
  border-radius: var(--radio);
  border: 1px dashed rgba(34,197,94,0.55);
  background: rgba(34,197,94,0.10);
  color: #9ff0b8;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.btn-grande:disabled { opacity: 0.35; cursor: not-allowed; border-style: solid; }
.btn-grande:not(:disabled):hover { background: rgba(34,197,94,0.2); }

.anclas { margin-top: 18px; }
.anclas h3 { font-size: 13px; color: var(--muted); font-weight: 600; margin-bottom: 8px; letter-spacing: 0.04em; }
.lista-anclas { display: flex; flex-direction: column; gap: 6px; }
.ancla {
  display: grid;
  grid-template-columns: 26px 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radio);
  font-size: 12px;
}
.ancla .n { color: var(--edp); font-weight: 800; }
.ancla .info small { color: var(--muted); display: block; }
.ancla button {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 6px;
  width: 26px;
  height: 26px;
  cursor: pointer;
}
.ancla button:hover { color: var(--text); background: rgba(255,255,255,0.08); }
.ayuda { color: var(--muted); font-size: 12px; line-height: 1.5; margin-top: 8px; }

.acciones {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.a-estado { color: var(--edp); font-size: 12px; }

.aviso {
  text-align: center;
  color: var(--muted);
  padding: 40px 10px;
  font-size: 14px;
}
.aviso[hidden] { display: none; }

/* ---------- panel de filtros colapsable (cerrado por defecto) ---------- */
.filtros-box {
  border: 1px solid var(--border);
  border-radius: var(--radio);
  background: var(--card);
  margin-bottom: 8px;
}
.filtros-box > summary {
  cursor: pointer;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--muted);
  list-style: none;
  user-select: none;
}
.filtros-box > summary::-webkit-details-marker { display: none; }
.filtros-box > summary::before {
  content: '▸';
  color: var(--acento);
  font-size: 10px;
  margin-right: 6px;
}
.filtros-box[open] > summary::before { content: '▾'; }
.filtros-box > summary b { color: var(--acento); }
.filtros-box .chips { padding: 0 10px 10px; margin-bottom: 0; }

/* jugada en foco: en escritorio no se muestra */
.evento-activo { display: none; }

/* ---------- celular ---------- */
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .eventos { max-height: 420px; }
  .partido { grid-template-columns: 1fr auto; row-gap: 4px; }
  .partido .fecha { grid-column: 1; }
  .partido .equipos { grid-column: 1; }
  .partido .resultado { grid-column: 2; grid-row: 1 / span 2; }
  .partido .marca-flag { display: none; }
  /* en celular se prioriza el tanteador y se oculta la hora */
  .evento { grid-template-columns: 34px minmax(0,1fr) auto 44px; }
  .evento .hora { display: none; }
  .evento .tanteo { font-size: 12px; }
  main { padding: 8px 10px 30px; }
  /* barra del partido: el título va arriba, a todo el ancho, y los botones abajo.
     Antes los 4 botones se comían el ancho y el nombre quedaba en una tira de 50px. */
  .barra { flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
  .barra-titulo { order: -1; flex: 1 1 100%; }
  .barra-titulo h1 {
    font-size: 14px;
    line-height: 1.2;
    white-space: normal;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .barra-titulo .sub { font-size: 11px; margin-top: 1px; }
  .barra-titulo .parciales { font-size: 11px; margin-top: 1px; }
  .barra-titulo .video-n { font-size: 10px; margin-left: 0; }
  .barra .btn.chico { padding: 6px 9px; font-size: 12px; }

  /* todo lo de abajo del reproductor, más junto: así la grilla de eventos
     arranca mucho más arriba en la pantalla del celular */
  .controles { margin-top: 8px; gap: 6px; }
  .controles button { width: 38px; height: 38px; font-size: 14px; }
  .controles button.salto { font-size: 11px; }
  .controles .reloj { font-size: 15px; min-width: 48px; }
  .timeline-wrap { margin-top: 8px; }
  .timeline { height: 46px; }
  .tl-marca.punto { height: 26px; }
  .tl-marca.cambio { height: 13px; }
  .tl-marca.set { height: 34px; }
  .tl-leyenda { margin-top: 4px; font-size: 10px; }
  .auto-fila { margin-top: 8px; gap: 6px; }
  .chips { margin-bottom: 6px; gap: 4px; }
  .chip { padding: 5px 9px; font-size: 11px; }
  /* la jugada en foco, entre los controles y la línea de tiempo */
  .evento-activo {
    display: block;
    margin-top: 6px;
    border: 1px solid rgba(245,200,66,0.35);
    border-radius: 8px;
    background: rgba(245,200,66,0.07);
    overflow: hidden;
  }
  .evento-activo > .evento { border-bottom: 0; cursor: default; padding: 7px 9px; }
  .evento-activo[hidden] { display: none; }
  .controles select { flex-basis: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FILTROS DEL HISTORIAL
   ═══════════════════════════════════════════════════════════════════════════ */
.chips { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.chip-fila { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.chip {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 999px;
  padding: 6px 11px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.chip:hover { background: var(--card-fuerte); color: var(--text); }
.chip.activo {
  background: rgba(245,200,66,0.16);
  border-color: rgba(245,200,66,0.55);
  color: var(--acento);
  font-weight: 700;
}
.chip-l.activo { background: rgba(34,197,94,0.16); border-color: rgba(34,197,94,0.55); color: #7ee2a8; }
.chip-v.activo { background: rgba(239,68,68,0.16); border-color: rgba(239,68,68,0.55); color: #f3a3a3; }
.chip-pp.activo { background: rgba(93,204,114,0.18); border-color: rgba(93,204,114,0.55); color: #8ef0a6; }
.chip-eq.activo { background: rgba(224,85,85,0.18); border-color: rgba(224,85,85,0.55); color: #f0a0a0; }
.chip-cont { margin-left: auto; color: var(--muted); font-size: 11px; white-space: nowrap; }
.chips select { padding: 6px 10px; font-size: 12px; border-radius: 999px; max-width: 48%; }

/* color suave segun calidad de la accion */
.evento.tipo-pp .desc { color: #9ff0b8; }
.evento.tipo-eq .desc { color: #f0a8a8; }
/* resultado set por set */
.parciales {
  font-size: 12px;
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
  color: rgba(240,240,240,0.78);
}
.parciales:empty { display: none; }
.partido .parciales { display: block; color: rgba(240,240,240,0.6); font-size: 11px; margin-top: 3px; }
/* botones de salto de tiempo */
.controles button.salto { font-size: 12px; font-weight: 700; letter-spacing: 0.02em; }
/* ── login del área de asignación ─────────────────────────────────────── */
.login {
  max-width: 420px;
  margin: 40px auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radio);
  padding: 26px 22px;
  text-align: center;
}
.login h2 { font-size: 18px; margin-bottom: 6px; }
.login p { color: var(--muted); font-size: 13px; margin-bottom: 16px; }
.login-fila { display: flex; gap: 8px; }
.login-fila input { flex: 1; min-width: 0; }
.login .error { margin-top: 12px; }
#asignar-contenido[hidden] { display: none !important; }
.chip-grupo {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  opacity: 0.75;
  margin-right: 2px;
}
.chip-limpiar { margin-left: auto; border-style: dashed; }
/* ── vista automática ─────────────────────────────────────────────────── */
.auto-fila {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.auto-fila input[type="number"] { width: 68px; padding: 7px 8px; text-align: center; }
.auto-u { color: var(--muted); font-size: 12px; }
.auto-estado { color: var(--acento); font-size: 12px; margin-left: auto; }
.btn.activo {
  background: rgba(245,200,66,0.16);
  border-color: rgba(245,200,66,0.55);
  color: var(--acento);
  font-weight: 700;
}
/* ── pestañas de videos del partido ───────────────────────────────────── */
.videos-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.vtab {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: inherit;
}
.vtab:hover { background: var(--card-fuerte); color: var(--text); }
.vtab.activo {
  background: rgba(245,200,66,0.16);
  border-color: rgba(245,200,66,0.55);
  color: var(--acento);
  font-weight: 700;
}
.vtab.vacio { border-style: dashed; }
.vtab b {
  font-weight: 400;
  opacity: 0.6;
  padding: 0 2px;
}
.vtab b:hover { opacity: 1; color: #f3a3a3; }
.vtab-add { border-style: dashed; }
.video-n {
  display: inline-block;
  margin-left: 8px;
  font-size: 11px;
  color: var(--acento);
  letter-spacing: 0.04em;
}
/* los botones que son links */
a.btn { text-decoration: none; display: inline-flex; align-items: center; }
/* ── aviso de cambio de marca (flash + cuenta regresiva) ──────────────── */
.flash {
  position: absolute;
  inset: 0;
  background: #f5c842;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}
.flash.on { animation: flashMarca 0.55s ease-out; }
@keyframes flashMarca {
  0%   { opacity: 0.55; }
  100% { opacity: 0; }
}
.auto-cuenta {
  color: var(--acento);
  font-weight: 800;
  font-size: 15px;
  min-width: 58px;
  font-variant-numeric: tabular-nums;
}
/* ── aviso flotante (link copiado, etc.) ─────────────────────────────── */
.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  background: #1db954;
  color: #06220f;
  font-weight: 800;
  font-size: 14px;
  padding: 12px 20px;
  border-radius: 999px;
  box-shadow: 0 8px 26px rgba(0,0,0,.5);
  z-index: 9999;
  max-width: 90vw;
  text-align: center;
}
.toast[hidden] { display: none; }
/* boton de compartir al lado de los filtros */
.compartir-fila {
  display: flex;
  justify-content: flex-end;
  margin: 2px 0 8px;
}
#btn-compartir-filtro {
  border-style: dashed;
  border-color: rgba(245,200,66,0.45);
  color: var(--acento);
}
#btn-compartir-filtro:hover { background: rgba(245,200,66,0.12); }
#btn-compartir-filtro:disabled { opacity: .45; }
/* boton para activar el sonido cuando el navegador arranca en silencio */
.unmute {
  background: #f5c842;
  color: #1a1408;
  font-weight: 800;
  border-color: #f5c842;
  animation: pulso 1.6s ease-in-out infinite;
}
@keyframes pulso {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,200,66,.55); }
  50%      { box-shadow: 0 0 0 8px rgba(245,200,66,0); }
}
/* capa para tocar el video (con controls=0 no hay barra de YouTube) */
.player-tap {
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: pointer;
}
/* pantalla completa */
.player-wrap:fullscreen,
.player-wrap:-webkit-full-screen {
  background: #000;
  width: 100%;
  height: 100%;
  padding: 0;
}
.player-wrap:fullscreen iframe,
.player-wrap:fullscreen #host-ver,
.player-wrap:-webkit-full-screen iframe {
  width: 100% !important;
  height: 100% !important;
}
.player-wrap:fullscreen #player-tap { z-index: 4; }