/* ═══════════════════════════════════════════════════════════════════════
   BLK BEARZ · Llaves de fase final

   Se apoya en las variables --wc-* que ya define el panel, así que sigue el
   tema claro/oscuro sin hacer nada.

   REGLA DE RENDIMIENTO: solo se animan `transform` y `opacity`. Los
   conectores del cuadro son bordes de pseudo-elementos y no SVG, para que se
   estiren solos cuando cambia la altura de un partido.
   ═══════════════════════════════════════════════════════════════════════ */

/* Las variables --wc-* las define el propio admin; aquí solo se añade lo
   que es de las llaves, para no pisarle el tema. */
:root{ --sombra: rgba(0,0,0,.45); --bronce:#CD7F32 }
:root[data-theme="light"]{ --sombra: rgba(0,0,0,.12); --bronce:#A9682A }

[data-cat="emerald"]{ --cat:#10B981; --cat-claro:#34D399; --cat-oscuro:#0A3D2E }
[data-cat="cyan"]   { --cat:#06B6D4; --cat-claro:#22D3EE; --cat-oscuro:#0A2D3D }
[data-cat="amber"]  { --cat:#F59E0B; --cat-claro:#FBBF24; --cat-oscuro:#3D2A00 }
[data-cat="violet"] { --cat:#8B5CF6; --cat-claro:#A78BFA; --cat-oscuro:#241A3D }
[data-cat="rose"]   { --cat:#F43F5E; --cat-claro:#FB7185; --cat-oscuro:#3D0A14 }
[data-cat="coral"]  { --cat:#FF6B4A; --cat-claro:#FF8A6E; --cat-oscuro:#3D1A10 }
[data-cat="teal"]   { --cat:#14B8A6; --cat-claro:#2DD4BF; --cat-oscuro:#0A3330 }
[data-cat="sky"]    { --cat:#0EA5E9; --cat-claro:#38BDF8; --cat-oscuro:#0A263D }
[data-cat="lime"]   { --cat:#84CC16; --cat-claro:#A3E635; --cat-oscuro:#22330A }

h1,h2,h3,h4{ margin:0; font-weight:700; letter-spacing:-.01em }
button{ font:inherit; cursor:pointer }
input,select{ font:inherit }

.contenedor{ max-width:1500px; margin:0 auto; padding:0 20px }

/* ── Barra superior ───────────────────────────────────────────────── */

/* ── Piezas comunes ───────────────────────────────────────────────── */
.tarjeta{
  background:var(--wc-gray); border:1px solid var(--wc-border);
  border-radius:16px; padding:22px;
}
.pildora{
  padding:.55rem 1.3rem; border-radius:100px; font-size:.82rem; font-weight:500;
  border:1.5px solid var(--wc-border); background:var(--wc-light);
  color:var(--wc-text-secondary); transition:all .25s; white-space:nowrap;
}
.pildora:hover{ transform:translateY(-1px); color:var(--wc-text) }
.pildora.on{ background:var(--cat,#DBB458); border-color:var(--cat,#DBB458); color:#fff; font-weight:600 }
.btn{
  padding:10px 20px; border-radius:11px; font-size:.86rem; font-weight:600;
  border:1.5px solid transparent; transition:all .2s;
}
.btn-oro{ background:var(--wc-gold); color:#14151A }
.btn-oro:hover{ background:var(--wc-gold-dark) }
.btn-borde{ background:transparent; border-color:var(--wc-border); color:var(--wc-text) }
.btn-borde:hover{ border-color:var(--wc-gold); color:var(--wc-gold) }
.btn-rojo{ background:transparent; border-color:#7f1d2e; color:#f0687f }
.btn-rojo:hover{ background:#7f1d2e; color:#fff }
.campo{
  width:100%; padding:10px 13px; border-radius:11px;
  background:var(--wc-light); border:1.5px solid var(--wc-border);
  color:var(--wc-text); outline:none; transition:border-color .2s;
}
.campo:focus{ border-color:var(--wc-gold) }
.etiqueta{
  display:block; font-size:.7rem; text-transform:uppercase; letter-spacing:.12em;
  color:var(--wc-text-secondary); margin-bottom:6px; font-weight:600;
}
.rotulo{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.2em;
  color:var(--wc-text-secondary); font-weight:700;
}
.vacio{ text-align:center; color:var(--wc-text-secondary); padding:60px 20px; font-size:.9rem }

/* ── Escudos ──────────────────────────────────────────────────────── */
.escudo{
  width:30px; height:30px; border-radius:8px; flex:none; object-fit:cover;
  background:var(--wc-light); border:1px solid var(--wc-border);
  display:grid; place-items:center; font-size:.62rem; font-weight:800;
  color:var(--wc-text-secondary); overflow:hidden;
}
.escudo.grande{ width:42px; height:42px; font-size:.75rem }

/* ═══════════════════════════════════════════════════════════════════════
   LA LLAVE

   Estructura: las rondas del lado izquierdo, la final al centro, y las del
   lado derecho en espejo. Es la forma clásica y es la que pidió Max: con 8
   equipos, dos partidos de cada lado y la final en medio.

   Los conectores son bordes de un pseudo-elemento, no SVG: así se estiran
   solos cuando cambia la altura de un partido y no hay que recalcular nada
   al redimensionar.
   ═══════════════════════════════════════════════════════════════════════ */

.llave{
  display:flex; align-items:stretch; justify-content:center;
  gap:clamp(18px, 3vw, 54px);
  padding:28px 10px 34px;
  overflow-x:auto;
}
.columna{
  display:flex; flex-direction:column; justify-content:space-around;
  gap:16px; flex:none;
}
.columna-titulo{
  text-align:center; margin-bottom:6px;
  font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--wc-text-secondary); font-weight:700;
}

/* ── Un partido ───────────────────────────────────────────────────── */
.duelo{
  position:relative; width:252px;
  background:var(--wc-gray);
  border:1px solid var(--wc-border); border-radius:13px;
  overflow:hidden;
  transition:border-color .25s, box-shadow .25s, transform .25s;
}
.duelo:hover{ border-color:var(--cat,var(--wc-gold)); box-shadow:0 10px 26px var(--sombra) }
.duelo.editable{ cursor:pointer }

/* La cinta de color de la ronda, al canto. */
.duelo::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--tono, var(--wc-border));
}

.duelo-cabeza{
  display:flex; justify-content:space-between; align-items:center;
  padding:6px 11px 5px 13px;
  background:var(--wc-light); border-bottom:1px solid var(--wc-border);
  font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  color:var(--wc-text-secondary);
}
.duelo-fase{ color:var(--tono, var(--wc-text-secondary)) }

.lado{
  display:flex; align-items:center; gap:9px;
  padding:9px 12px 9px 13px;
  transition:background .2s;
}
.lado + .lado{ border-top:1px solid var(--wc-border) }
.lado-nombre{
  flex:1; min-width:0; font-size:.83rem; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.lado-goles{
  font-variant-numeric:tabular-nums; font-weight:800; font-size:1.02rem;
  min-width:22px; text-align:right; color:var(--wc-text-secondary);
}
/* Quien gana se queda en dorado; el otro se apaga. Se lee de un vistazo
   quién pasó, que es lo único que de verdad importa en una llave. */
.lado.gana{ background:linear-gradient(90deg, var(--wc-gold-light), transparent 70%) }
.lado.gana .lado-nombre{ color:var(--wc-gold) }
.lado.gana .lado-goles{ color:var(--wc-gold) }
.lado.pierde{ opacity:.45 }
.lado.libre .lado-nombre{ color:var(--wc-text-secondary); font-weight:500; font-style:italic }

.duelo-pie{
  padding:5px 12px 7px 13px; border-top:1px solid var(--wc-border);
  font-size:.66rem; color:var(--wc-text-secondary);
  display:flex; justify-content:space-between; gap:8px;
}

/* ── La final ─────────────────────────────────────────────────────── */
.columna-final{ justify-content:center }
.duelo.final{
  width:284px;
  border:1.5px solid var(--wc-gold);
  box-shadow:0 0 0 4px var(--wc-gold-light), 0 18px 44px var(--sombra);
}
.duelo.final .duelo-cabeza{
  background:linear-gradient(90deg, var(--wc-gold-light), transparent);
  color:var(--wc-gold);
}
.duelo.final .lado{ padding-top:13px; padding-bottom:13px }
.duelo.final .lado-nombre{ font-size:.93rem }

.copa{
  text-align:center; margin-bottom:12px;
  font-size:2.1rem; line-height:1;
  filter:drop-shadow(0 4px 10px var(--sombra));
}
.campeon{
  margin-top:14px; text-align:center;
  padding:11px 14px; border-radius:12px;
  background:linear-gradient(135deg, var(--wc-gold-light), transparent);
  border:1px solid var(--wc-gold);
}
.campeon-rotulo{
  font-size:.6rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--wc-gold-dark); font-weight:700;
}
.campeon-nombre{ font-size:1.02rem; font-weight:800; color:var(--wc-gold); margin-top:3px }

/* ── Conectores ───────────────────────────────────────────────────── */
/* Une cada partido con la ronda siguiente. `--orilla` dice hacia qué lado
   sale la línea, para que el lado derecho quede en espejo. */
.enlace{
  position:absolute; top:50%; width:calc(clamp(18px, 3vw, 54px) / 2);
  border-top:1.5px solid var(--wc-border);
}
.enlace.izq{ right:calc(-1 * clamp(18px, 3vw, 54px) / 2) }
.enlace.der{ left:calc(-1 * clamp(18px, 3vw, 54px) / 2) }

/* ── Tercer lugar y repechaje ─────────────────────────────────────── */
.duelo.bronce{ border-color:var(--bronce) }
.duelo.bronce .duelo-cabeza{ color:var(--bronce) }
.duelo.bronce::before{ background:var(--bronce) }

.aparte{
  display:flex; flex-wrap:wrap; gap:22px; justify-content:center;
  margin-top:10px; padding-top:26px; border-top:1px dashed var(--wc-border);
}

/* ── Cabecera de la llave ─────────────────────────────────────────── */
.llave-cabeza{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:16px 20px; border-radius:15px;
  background:linear-gradient(120deg,
     color-mix(in srgb, var(--cat,#DBB458) 16%, transparent), transparent 62%);
  border:1px solid var(--wc-border);
  border-left:4px solid var(--cat,var(--wc-gold));
}
.llave-nombre{ font-size:1.32rem; font-weight:800 }
.llave-cat{
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--cat,var(--wc-gold)); font-weight:700;
}

/* ── El marco dorado en los roles ─────────────────────────────────── */
/* Max lo pidió así: el partido de llave se ve en el rol normal, pero
   enmarcado y con su fase escrita, para que no se confunda con uno de
   temporada regular. */
.rol{
  display:flex; align-items:center; gap:12px;
  padding:12px 15px; border-radius:12px;
  background:var(--wc-gray); border:1px solid var(--wc-border);
}
.rol.de-llave{
  border:1.5px solid var(--wc-gold);
  background:linear-gradient(120deg, var(--wc-gold-light), var(--wc-gray) 55%);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--wc-gold) 13%, transparent);
}
.sello{
  font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; font-weight:800;
  padding:3px 9px; border-radius:100px;
  background:var(--wc-gold); color:#14151A; white-space:nowrap;
}
.sello.bronce{ background:var(--bronce); color:#fff }

/* ── Arrastrar equipos ────────────────────────────────────────────── */
.lado[draggable="true"]{ cursor:grab }
.lado.arrastrando{ opacity:.35 }
.lado.recibe{ background:color-mix(in srgb, var(--wc-gold) 22%, transparent); outline:1.5px dashed var(--wc-gold); outline-offset:-3px }

/* ── Ventanas ─────────────────────────────────────────────────────── */
.velo{
  position:fixed; inset:0; z-index:100; display:none;
  background:rgba(0,0,0,.66); backdrop-filter:blur(3px);
  align-items:center; justify-content:center; padding:20px;
}
.velo.abierto{ display:flex }
.ventana{
  background:var(--wc-gray); border:1px solid var(--wc-border);
  border-radius:17px; padding:26px; width:100%; max-width:470px;
  max-height:88vh; overflow:auto;
  box-shadow:0 26px 70px rgba(0,0,0,.55);
}

@media (max-width:860px){
  .llave{ gap:14px }
  .duelo{ width:210px }
  .duelo.final{ width:230px }
  .enlace{ display:none }
}

/* ── La posición del torneo, en la esquina ────────────────────────────
   Va sobre el escudo, arriba a la izquierda. Es el lugar en que terminó el
   equipo la temporada regular, no su número dentro de la llave: así, de un
   vistazo, se sabe si el cruce es el que debía ser. */
.con-pos{ position:relative; flex:none; display:flex }
.pos-torneo{
  position:absolute; top:-5px; left:-6px; z-index:2;
  min-width:17px; height:17px; padding:0 3px;
  border-radius:6px;
  background:var(--wc-gold); color:#14151A;
  font-size:.58rem; font-weight:800; line-height:17px; text-align:center;
  box-shadow:0 1px 4px rgba(0,0,0,.4);
}
/* El campeón de la temporada se marca aparte: es el dato que más se mira. */
.pos-torneo.primero{ background:#F3DC92; box-shadow:0 0 0 1.5px var(--wc-gold-dark) }

/* ── Tabla general ────────────────────────────────────────────────── */
.tabla-general{ width:100%; border-collapse:collapse; font-size:.78rem }
.tabla-general th{
  text-align:right; padding:7px 8px; font-size:.62rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--wc-text-secondary); font-weight:700;
  border-bottom:1px solid var(--wc-border); white-space:nowrap;
}
.tabla-general th:nth-child(-n+2){ text-align:left }
.tabla-general td{ padding:7px 8px; text-align:right; border-bottom:1px solid var(--wc-border) }
.tabla-general td:nth-child(-n+2){ text-align:left }
.tabla-general tbody tr:hover{ background:var(--wc-light) }
.tabla-general .eq-nombre{ font-weight:600 }
.tabla-general .num-pos{
  display:inline-grid; place-items:center; width:20px; height:20px;
  border-radius:6px; background:var(--wc-light); border:1px solid var(--wc-border);
  font-size:.66rem; font-weight:800;
}
.tabla-general tr.dentro .num-pos{ background:var(--wc-gold); color:#14151A; border-color:var(--wc-gold) }
.tabla-general tr.fuera{ opacity:.42 }
.tabla-general .pts{ font-weight:800; color:var(--wc-gold) }

details.plegable{ border:1px solid var(--wc-border); border-radius:13px; background:var(--wc-gray) }
details.plegable > summary{
  cursor:pointer; padding:12px 16px; font-size:.82rem; font-weight:600;
  list-style:none; display:flex; align-items:center; gap:9px;
}
details.plegable > summary::-webkit-details-marker{ display:none }
details.plegable > summary::before{ content:"▸"; color:var(--wc-gold); transition:transform .2s }
details.plegable[open] > summary::before{ transform:rotate(90deg) }
details.plegable > div{ padding:0 16px 14px; overflow-x:auto }

/* ── Estados ──────────────────────────────────────────────────────── */
.marca-estado{
  display:inline-block; margin-left:8px; padding:2px 9px; border-radius:100px;
  font-size:.56rem; letter-spacing:.14em; font-weight:800;
}
.marca-estado.es-borrador{ background:var(--wc-border); color:var(--wc-text-secondary) }
.marca-estado.es-firme{ background:var(--wc-gold); color:#14151A }

.aviso{
  margin-top:14px; padding:12px 16px; border-radius:12px;
  font-size:.8rem; line-height:1.55;
  border:1px solid var(--wc-border); background:var(--wc-light);
}
.aviso-borrador{ border-left:3px solid var(--wc-text-secondary) }
.aviso-pendiente{ border-left:3px solid var(--wc-gold); background:var(--wc-gold-light) }

/* Un partido que ya tiene rivales pero no día. Se marca con raya para que
   se note sin gritar: no es un error, es que falta un dato. */
.duelo.sin-confirmar{ border-style:dashed }
.duelo-pie.por-confirmar{ color:var(--wc-gold); font-weight:600 }
.duelo-pie.doble{ font-size:.62rem }

/* ── Programador de fechas ────────────────────────────────────────── */
.fila-prog{
  padding:13px 0; border-bottom:1px solid var(--wc-border);
  display:flex; flex-direction:column; gap:9px;
}
.fila-prog:last-of-type{ border-bottom:0 }
.fila-prog-eq{ display:flex; align-items:center; gap:9px; font-size:.85rem; flex-wrap:wrap }
.fila-prog-campos{ display:grid; grid-template-columns:1fr 110px 1.2fr; gap:9px }
.fila-prog-campos.vuelta{ grid-template-columns:62px 1fr 110px 1.2fr; opacity:.9 }
.opt-doble{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  font-size:.76rem; color:var(--wc-text-secondary);
}
@media (max-width:620px){
  .fila-prog-campos, .fila-prog-campos.vuelta{ grid-template-columns:1fr 1fr }
}

/* ── Ventana de partido ───────────────────────────────────────────── */
.duelo-rivales{
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:13px; border-radius:12px; background:var(--wc-light);
  border:1px solid var(--wc-border); font-weight:700; font-size:.92rem;
  text-align:center;
}
.bloque-juego{
  padding:14px; border-radius:12px;
  background:var(--wc-light); border:1px solid var(--wc-border);
}
.rejilla-goles{
  display:grid; grid-template-columns:1fr 58px 16px 58px 1fr;
  gap:8px; align-items:center;
}
.campo-gol{ text-align:center; font-weight:800; font-size:1.05rem; padding:9px 4px }
.eq-lbl{
  font-size:.76rem; font-weight:600; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}
.eq-lbl.der{ text-align:right }
.global{
  text-align:center; padding:11px; border-radius:11px;
  background:var(--wc-gold-light); border:1px solid var(--wc-gold);
  font-size:.86rem; color:var(--wc-gold);
}

/* ── Goleadores ───────────────────────────────────────────────────── */
.fila-gol{
  display:grid; grid-template-columns:1fr 1.3fr 54px 92px auto;
  gap:6px; align-items:center; margin-bottom:7px;
}
.fila-gol .campo{ padding:7px 9px; font-size:.76rem }
.fila-gol .quitar{
  width:28px; height:28px; border-radius:8px; border:1px solid var(--wc-border);
  background:transparent; color:#f0687f; font-size:1rem; line-height:1;
}
.fila-gol .quitar:hover{ background:#7f1d2e; color:#fff }
@media (max-width:560px){ .fila-gol{ grid-template-columns:1fr 1fr; } }

.cuadra{ margin-top:9px; font-size:.72rem; line-height:1.5 }
.cuadra.bien{ color:#34D399 }
.cuadra.mal{ color:var(--wc-gold) }

/* En el cuadro, bajo el marcador: dos columnas, una por equipo. */
.goleadores-duelo{
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
  padding:7px 12px; border-top:1px solid var(--wc-border);
  font-size:.62rem; color:var(--wc-text-secondary); line-height:1.45;
}
.gol-lado{ display:flex; flex-direction:column }
.gol-lado:nth-child(2){ text-align:right }

.fila-prog.urge{
  background:var(--wc-gold-light); border-radius:11px;
  padding:13px 12px; margin-bottom:8px; border-bottom:0;
}
.aviso-mini{
  font-size:.62rem; font-weight:700; padding:2px 8px; border-radius:100px;
  background:var(--wc-gold); color:#14151A;
}
.aviso-mini.ok{ background:transparent; color:#34D399; border:1px solid #34D399 }