/* ═══════════════════════════════════════════════════════════════════════
   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.
   ═══════════════════════════════════════════════════════════════════════ */

/* El cuadro va dentro de un contenedor que se desplaza, y él mismo es un
   inline-flex con min-width:100%.
   
   Esto NO es capricho: un flex con `justify-content:center` que se desborda
   recorta el principio y el navegador no te deja desplazarte hasta él —los
   extremos de la llave quedaban inalcanzables—. Con inline-flex + min-width
   se centra cuando cabe y se desborda hacia los dos lados cuando no, y el
   desplazamiento llega a todo. */
.llave-scroll{
  overflow-x:auto; overflow-y:hidden;
  padding-bottom:6px;
  scrollbar-width:thin;
}
.llave{
  display:inline-flex; align-items:stretch; justify-content:center;
  min-width:100%;
  gap:clamp(18px, 3vw, 54px);
  padding:28px 14px 34px;
  box-sizing:border-box;
}
.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 ───────────────────────────────────────────
   Sin `color-mix()` a propósito: html2canvas 1.4.1 —el que usa la descarga
   de imágenes del sitio— no sabe interpretarlo y revienta al encontrarlo,
   así que la descarga fallaba sin decir por qué. */
.llave-cabeza{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:16px 20px; border-radius:15px;
  background:linear-gradient(120deg, var(--cat-oscuro, #2A2416), 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 rgba(219,180,88,.14);
}
.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:rgba(219,180,88,.22); 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 }

/* ── Aviso de guardado ────────────────────────────────────────────────
   El programador guarda solo al salir de cada campo, pero eso era
   invisible: sin una marca no había forma de saber si había quedado. */
.fila-prog-acciones{ display:flex; align-items:center; gap:12px; flex-wrap:wrap }
.aviso-guardado{ font-size:.72rem; font-weight:600; min-width:78px }
.aviso-guardado.yendo{ color:var(--wc-text-secondary) }
.aviso-guardado.ok{ color:#34D399 }
.aviso-guardado.mal{ color:#f0687f }
.btn-guardar{ margin-left:auto; padding:6px 14px; font-size:.76rem }

/* ── Cuándo se juega ──────────────────────────────────────────────────
   La fecha es de lo primero que busca quien mira una llave, así que va en
   su propio bloque y en tamaño legible. Y dice siempre si el cruce es a un
   partido o a dos, que antes había que adivinarlo. */
.duelo-cuando{
  display:flex; flex-direction:column; gap:2px;
  padding:9px 12px 10px 13px;
  border-top:1px solid var(--wc-border);
  background:var(--wc-light);
}
.cuando-tipo{
  font-size:.58rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:800; color:var(--tono, var(--wc-text-secondary));
}
.cuando-fecha{
  font-size:.86rem; font-weight:700; color:var(--wc-text);
  font-variant-numeric:tabular-nums;
}
.cuando-linea{
  font-size:.79rem; font-weight:600; color:var(--wc-text);
  font-variant-numeric:tabular-nums;
  display:flex; gap:7px;
}
.cuando-linea b{
  min-width:46px; font-weight:800;
  color:var(--wc-text-secondary); font-size:.68rem;
  text-transform:uppercase; letter-spacing:.1em;
  align-self:center;
}
.cuando-linea i, .cuando-fecha i{
  font-style:normal; font-weight:500; color:var(--wc-text-secondary); opacity:.75;
}
.cuando-nota{ font-size:.68rem; color:var(--wc-text-secondary); margin-top:1px }

.duelo-cuando.pendiente{
  background:var(--wc-gold-light);
  border-top-color:var(--wc-gold);
}
.duelo-cuando.pendiente .cuando-tipo{ color:var(--wc-gold) }

/* Con la fecha ocupando más, el cruce necesita algo más de ancho. */
.duelo{ width:268px }
.duelo.final{ width:296px }
@media (max-width:860px){
  .duelo{ width:228px }
  .duelo.final{ width:244px }
}

/* Barra de desplazamiento discreta pero visible: si no se ve, nadie
   adivina que la llave sigue hacia los lados. */
.llave-scroll::-webkit-scrollbar{ height:9px }
.llave-scroll::-webkit-scrollbar-track{ background:var(--wc-light); border-radius:99px }
.llave-scroll::-webkit-scrollbar-thumb{
  background:var(--wc-border); border-radius:99px;
}
.llave-scroll::-webkit-scrollbar-thumb:hover{ background:var(--wc-gold) }

/* Aviso de que hay más a los lados, solo cuando de verdad lo hay. */
.hay-mas{
  display:none; text-align:center; font-size:.7rem;
  color:var(--wc-text-secondary); padding:0 0 10px;
}
.hay-mas.si{ display:block }

/* Mientras se captura la imagen se suelta el recorte, para que salga la
   llave entera y no solo el trozo visible. */
.capturando .llave-scroll{ overflow:visible !important }
.capturando .llave{ justify-content:flex-start }

/* ── Altura de línea ──────────────────────────────────────────────────
   Los nombres salían cortados por arriba y por abajo: se les comían las
   tildes y las colas de la g, la j y la p.

   La causa no estaba aquí sino fuera: el sitio fija line-height muy
   apretado en sus titulares (hasta 0.85), y estos textos lo heredaban. Con
   `overflow:hidden` —que hace falta para recortar los nombres largos a lo
   ancho— la caja de la línea recorta también en vertical, así que cualquier
   letra más alta que esa caja se parte.

   Se fija una altura de línea propia para todo lo que va dentro de la
   llave, en vez de confiar en lo que herede. */
.llave [class^="lado"], .llave [class^="cuando"], .llave .columna-titulo,
.llave-cabeza .llave-nombre, .llave-cabeza .llave-cat,
.campeon-nombre, .campeon-rotulo, .duelo-fase, .goleadores-duelo span{
  line-height: 1.35 !important;
}

/* El nombre necesita además un respiro arriba y abajo: con el recorte a
   ras, una «Á» o una «g» siguen rozando el borde. */
.lado-nombre{
  line-height: 1.4 !important;
  padding: 2px 0;
}
.lado-goles{ line-height: 1.25 !important }

/* Los rótulos en versalitas no llevan descendentes, pero sí tildes. */
.cuando-tipo, .columna-titulo, .llave-cat, .campeon-rotulo{ padding: 1px 0 }

/* El nombre de la llave es grande y con el line-height del sitio se
   cortaba entero. */
.llave-nombre{ line-height: 1.25 !important; padding: 2px 0 }
.campeon-nombre{ line-height: 1.3 !important; padding: 1px 0 }

/* Y el hueco de cada equipo, con sitio para la línea completa. */
.lado{ min-height: 42px }
.duelo.final .lado{ min-height: 50px }