/*!
 * Sparring v0.6 — estilo del cronómetro (Deporte de Contacto · Leone)
 * Estética alineada con la página de CLUBES: tipografía Poppins, ROJO INTENSO
 * (#FF0000), fondo negro con rejilla roja sutil y botones estilo Apple.
 * Integrado en el TEMA: tarjeta "arena" dentro del contenido, con scroll normal
 * y números escalados AL CÍRCULO con container queries.
 */

:root {
  --sp-bg: #000;
  --sp-ink: #ffffff;
  --sp-muted: #888;

  /* Rojo intenso de marca (igual que la página de Clubes). */
  --sp-red: #ff0000;
  --sp-red-hi: #ff5252;      /* rojo claro para el degradado */
  --sp-red-deep: #b00000;
  --sp-gold: #ffd75e;
  --sp-green: #1fe089;
  --sp-green-hi: #7bffb0;
  --sp-green-deep: #0c8f57;
  --sp-blue: #3f8bff;
  --sp-track: #1c1c22;

  /* Acento del estado actual (lo cambia [data-phase]). */
  --sp-accent: var(--sp-red);
  --sp-accent-hi: var(--sp-red-hi);
  --sp-accent-soft: rgba(255, 0, 0, 0.30);
  --sp-accent-glow: rgba(255, 0, 0, 0.55);

  --sp-font-display: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --sp-font-ui: "Poppins", "Helvetica Neue", Arial, sans-serif;
}

/* Tarjeta "arena": vive dentro del contenido del tema, con esquinas
   redondeadas. NO fuerza la altura del viewport ni bloquea el scroll. */
.sparring {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding-top: clamp(16px, 3.4vh, 34px);
  padding-bottom: clamp(10px, 2vh, 20px);
  color: var(--sp-ink);
  font-family: var(--sp-font-ui);
  overflow: hidden;                 /* recorta el destello; NO afecta al scroll de la página */
  border-radius: clamp(14px, 2vw, 24px);
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Fondo negro con profundidad + rejilla roja sutil (igual que Clubes):
     halo del acento arriba, negro puro abajo y una trama fina de 60px. */
  background:
    radial-gradient(130% 90% at 50% -18%, var(--sp-accent-soft) 0%, transparent 52%),
    radial-gradient(100% 70% at 50% 120%, rgba(255,255,255,0.04) 0%, transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 59px, rgba(255,0,0,0.035) 59px 60px),
    repeating-linear-gradient(90deg, transparent 0 59px, rgba(255,0,0,0.035) 59px 60px),
    #000;
  transition: background 0.55s ease;
}
.sparring *,
.sparring *::before,
.sparring *::after { box-sizing: border-box; }

/* En PANTALLA COMPLETA (botón ⛶ · Fullscreen API sobre .sparring): inmersivo,
   ocupa todo el viewport, sin bordes. Se centra si cabe y, si NO cabe, permite
   SCROLL (safe center + overflow-y:auto) para que nunca se corte el contenido. */
.sparring:fullscreen,
.sparring:-webkit-full-screen {
  /* Inmersivo y VERTICAL siempre (aunque en escritorio el modo normal sea de
     dos columnas): mayor especificidad que el layout de escritorio de abajo. */
  display: flex;
  flex-direction: column;
  max-width: none;
  min-height: 100vh;
  min-height: 100svh;
  border-radius: 0;
  justify-content: safe center;
  overflow-y: auto;
  padding-block: clamp(12px, 3vh, 30px);
}
/* Anillo que cabe en horizontal (limitado por la altura). */
.sparring:fullscreen .sp-ring-wrap,
.sparring:-webkit-full-screen .sp-ring-wrap { width: min(70vw, 56vh, 460px); }
/* En marcha (running) el botón grande "Estoy listo" se oculta: solo Reanudar/
   Reiniciar/⛶. (También aplica fuera de pantalla completa; ver más abajo.) */
.sparring:fullscreen .sp-powered,
.sparring:-webkit-full-screen .sp-powered { margin-top: clamp(12px, 2.5vh, 22px); margin-bottom: 0; }
/* Logo pequeño en pantalla completa (no debe dominar la vista de entrenamiento). */
.sparring:fullscreen .sp-powered__logo-wrap,
.sparring:-webkit-full-screen .sp-powered__logo-wrap { width: min(60%, 240px); }

/* ── ANCHO COMPLETO (body.sparring-full) ──────────────────────────────────
   Estira la tarjeta a TODO el ancho del viewport (rompe cualquier contenedor
   centrado del tema) y oculta barras laterales/widgets a los lados. Se mantiene
   la cabecera y los menús del tema; solo desaparece la columna lateral. */
body.sparring-full .sparring {
  max-width: none;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-radius: 0;
}
/* Fuerza el contenedor de contenido a ocupar todo el ancho (temas clásicos). */
body.sparring-full #primary,
body.sparring-full .content-area,
body.sparring-full .site-content,
body.sparring-full #content,
body.sparring-full .content-wrap,
body.sparring-full main {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  float: none !important;
}
/* Oculta la barra lateral / columna de widgets (selectores habituales). */
body.sparring-full #secondary,
body.sparring-full .widget-area,
body.sparring-full .sidebar,
body.sparring-full #sidebar,
body.sparring-full aside.sidebar,
body.sparring-full .sidebar-primary,
body.sparring-full .wp-block-sidebar {
  display: none !important;
}

/* ── SIN BOTONES DE COMPARTIR (body.sparring-noshare) ─────────────────────
   Red de seguridad universal: oculta los contenedores de botones de compartir
   de los plugins sociales más habituales, solo en esta página. */
body.sparring-noshare .sharedaddy,
body.sparring-noshare .jetpack-sharing-buttons,
body.sparring-noshare .sd-sharing,
body.sparring-noshare .a2a_kit,
body.sparring-noshare .addtoany_share_save_container,
body.sparring-noshare .addtoany_content,
body.sparring-noshare .swp_social_panel,
body.sparring-noshare .social_warfare,
body.sparring-noshare .heateor_sss_sharing_container,
body.sparring-noshare .heateorSssSharingContainer,
body.sparring-noshare .heateorSssClear,
body.sparring-noshare .mashsb-container,
body.sparring-noshare .shared-counts-wrap,
body.sparring-noshare .dpsp-share-buttons-wrapper,
body.sparring-noshare .dpsp-content-wrapper,
body.sparring-noshare .supsystic-social-sharing,
body.sparring-noshare .addthis_toolbox,
body.sparring-noshare .addthis_inline_share_toolbox,
body.sparring-noshare .sfsi_plus_widget,
body.sparring-noshare .sfsiplusid,
body.sparring-noshare .grow-share,
body.sparring-noshare .ssba,
body.sparring-noshare .ssba-share {
  display: none !important;
}

/* Contenido SEO/accesible: presente en el DOM para Google y lectores de
   pantalla, pero oculto visualmente. */
.sp-seo {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Marco/cuerdas del ring. */
.sparring::after {
  content: "";
  position: absolute;
  inset: 10px;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  box-shadow: inset 0 0 0 5px rgba(0,0,0,0.55),
              inset 0 0 90px rgba(0,0,0,0.85);
  z-index: 0;
}

/* ── Cabecera: chips de tiempos ───────────────────────────────────────── */
.sp-brand {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  width: 100%;
  padding: clamp(4px, 2vw, 12px) 16px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 2vh, 16px);
}

/* Chips fijos BAJO el círculo: Sparring / Descanso / Round, siempre visibles.
   Mismo ancho entre sí y alineados con la fila de controles (560px), y con más
   tamaño para quedar equilibrados con los botones. */
.sp-info {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  max-width: 560px;
  margin: clamp(10px, 2.4vh, 20px) auto 0;
}
.sp-chip {
  flex: 1 1 0;
  min-width: 140px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: clamp(12px, 2.6vw, 16px) 12px;
  border-radius: 8px;   /* rectangular con esquinas suaves (no cápsula) */
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  font-family: var(--sp-font-ui);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: clamp(13px, 3.2vw, 16px);
  white-space: nowrap;
  color: var(--sp-muted);
  backdrop-filter: blur(4px);
  transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
}
.sp-chip__dot {
  width: 9px; height: 9px; border-radius: 50%;
  box-shadow: 0 0 8px currentColor;
}
.sp-chip--round { color: #ff6b6b; }
.sp-chip--round .sp-chip__dot { color: var(--sp-red); background: var(--sp-red); }
.sp-chip--rest  { color: #86f0bd; }
.sp-chip--rest .sp-chip__dot { color: var(--sp-green); background: var(--sp-green); }
.sp-chip--count { color: #cfcfd6; }
.sp-chip--count .sp-chip__dot { color: #fff; background: #fff; }
.sp-chip__val { color: #fff; font-variant-numeric: tabular-nums; }
/* Resalta el chip de la fase activa. */
.sparring[data-phase="round"] .sp-chip--round,
.sparring[data-phase="rest"]  .sp-chip--rest {
  border-color: var(--sp-accent);
  background: var(--sp-accent-soft);
}

/* Contenedor del crono + controles. En móvil ocupa todo el ancho y se apila
   (sin marco, diseño tipo app); en ordenador pasa a ser un PANEL contenido a
   la izquierda (ver el bloque de escritorio, más abajo). */
.sp-main {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── Zona central (crono) ─────────────────────────────────────────────── */
.sp-stage {
  position: relative;
  z-index: 2;
  /* Altura por CONTENIDO: no se estira aunque el tema (OceanWP) dé mucha altura
     al contenedor, así no aparecen huecos verticales enormes. En pantalla
     completa sí crece para centrar (regla más abajo). */
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 2vh, 18px);
  padding: clamp(10px, 2.4vh, 22px) 16px;
  min-height: 0;
}
.sparring:fullscreen .sp-main,
.sparring:-webkit-full-screen .sp-main { flex: 1 1 auto; justify-content: center; }
.sparring:fullscreen .sp-stage,
.sparring:-webkit-full-screen .sp-stage { flex: 1 1 auto; }

.sp-phase {
  margin: 0;
  font-family: var(--sp-font-display);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: clamp(26px, 7.5vw, 52px);
  color: var(--sp-accent);
  text-shadow: 0 0 26px var(--sp-accent-glow);
}

.sp-ring-wrap {
  position: relative;
  width: min(78vw, 46vh, 380px);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Convierte el anillo en contenedor de consulta: los dígitos se dimensionan
     en cqmin (porcentaje del lado del círculo) y NUNCA se salen del círculo. */
  container-type: size;
  container-name: spring;
}
.sp-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  overflow: visible;
}
.sp-ring__track {
  fill: none;
  stroke: var(--sp-track);
  stroke-width: 6.5;
}
.sp-ring__glow,
.sp-ring__progress {
  fill: none;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.12s linear;
}
/* Trazo grueso difuminado por debajo = halo del anillo. */
.sp-ring__glow {
  stroke: var(--sp-accent);
  stroke-width: 15;
  opacity: 0.35;
  filter: blur(6px);
}
.sp-ring__progress {
  stroke: url(#sp-grad-round);
  stroke-width: 9;
  filter: drop-shadow(0 0 6px var(--sp-accent-glow));
}
/* Degradado del anillo según la fase. */
.sparring[data-phase="rest"] .sp-ring__progress { stroke: url(#sp-grad-rest); }
.sparring[data-phase="prep"] .sp-ring__progress,
.sparring[data-phase="finished"] .sp-ring__progress { stroke: url(#sp-grad-prep); }

/* Las paradas del degradado del anillo siguen a los colores de los ajustes. */
#sp-grad-round stop:nth-of-type(1) { stop-color: var(--sp-gold); }
#sp-grad-round stop:nth-of-type(2) { stop-color: var(--sp-red-hi); }
#sp-grad-round stop:nth-of-type(3) { stop-color: var(--sp-red); }
#sp-grad-rest  stop:nth-of-type(1) { stop-color: var(--sp-green-hi); }
#sp-grad-rest  stop:nth-of-type(2) { stop-color: var(--sp-green-deep); }
#sp-grad-prep  stop:nth-of-type(1) { stop-color: var(--sp-gold); }

/* Dígito central: en degradado, grueso, y contenido DENTRO del círculo. */
.sp-center {
  position: relative;
  z-index: 1;
  max-width: 78%;                    /* margen de seguridad respecto al anillo */
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.sp-time {
  font-family: var(--sp-font-display);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  line-height: 0.9;
  /* Fallback para navegadores sin container queries. */
  font-size: clamp(32px, 13vw, 104px);
  /* Escalado al círculo (un poco más grande, pero cuidando que "10:00" siga
     cabiendo dentro del anillo con Poppins). */
  font-size: clamp(30px, 26cqmin, 140px);
  /* Relleno en degradado rojo recortado al texto. */
  background: linear-gradient(180deg, var(--sp-accent-hi) 0%, var(--sp-accent) 48%, var(--sp-red-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 18px var(--sp-accent-glow));
}
.sp-round {
  margin-top: clamp(4px, 1.4vh, 12px);
  font-family: var(--sp-font-ui);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-size: clamp(11px, 4cqmin, 18px);
  color: var(--sp-muted);
}

/* ── Controles ────────────────────────────────────────────────────────── */
.sp-controls {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  width: 100%;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.sp-setup {
  display: none;
  width: 100%;
  max-width: 560px;
  gap: 12px;
}
.sparring[data-mode="setup"] .sp-setup { display: flex; flex-wrap: wrap; }
.sparring[data-mode="setup"] .sp-runtime { display: none; }
/* En marcha, "Estoy listo" (botón de inicio) se oculta: solo controles de
   marcha (Reanudar/Reiniciar/⛶). Evita el solapamiento que se veía. */
.sparring[data-mode="running"] .sp-btn--primary { display: none; }

.sp-field {
  flex: 1 1 150px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}
.sp-field label {
  font-size: clamp(11px, 2.6vw, 13px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sp-muted);
}
/* Selectores endurecidos: mayor especificidad y !important en lo esencial para
   que el tema (OceanWP) no cambie el alto/color y los números SIEMPRE se lean. */
.sparring .sp-field select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  box-sizing: border-box;
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto !important;
  min-height: 52px;
  margin: 0 !important;
  padding: 12px 42px 12px 16px !important;
  background-color: #0d0d11 !important;
  color: #ffffff !important;
  border: 1px solid #26262d !important;
  border-radius: 7px;
  font-family: var(--sp-font-ui) !important;
  font-size: clamp(15px, 4vw, 18px) !important;
  font-weight: 600;
  line-height: 1.3 !important;
  letter-spacing: 0.02em;
  text-indent: 0 !important;
  text-transform: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--sp-muted) 50%),
    linear-gradient(135deg, var(--sp-muted) 50%, transparent 50%);
  background-position: right 18px center, right 12px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
/* Lista desplegable del navegador: fondo claro y texto oscuro (legible). */
.sparring .sp-field select option { color: #111; background: #fff; }
.sparring .sp-field select:focus {
  outline: none;
  border-color: var(--sp-accent) !important;
  box-shadow: 0 0 0 3px var(--sp-accent-soft);
}

/* Botones estilo Apple: Poppins, sin mayúsculas forzadas, esquinas suaves,
   degradado sutil, brillo interior y sombra difusa (nada de tosco). */
.sp-btn {
  font-family: var(--sp-font-ui);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.01em;
  border: none;
  border-radius: 6px;   /* rectangular con las esquinas apenas redondeadas */
  cursor: pointer;
  transition: transform 0.12s cubic-bezier(.2,.7,.3,1), box-shadow 0.25s ease, filter 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}
.sp-btn:active { transform: scale(0.975); }
.sp-btn:disabled { opacity: 0.4; pointer-events: none; }

.sp-btn--primary {
  position: relative;
  width: 100%;
  max-width: 560px;
  padding: clamp(15px, 3.8vw, 20px);
  font-size: clamp(17px, 4.4vw, 22px);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #fff;
  border-radius: 7px;   /* rectangular, esquinas muy poco redondeadas */
  /* Rojo intenso con brillo glossy superior. */
  background: linear-gradient(180deg, #ff4b4b 0%, var(--sp-red) 52%, var(--sp-red-deep) 100%);
  box-shadow:
    0 10px 30px -6px rgba(255,0,0,0.5),
    0 2px 6px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -8px 16px -6px rgba(0,0,0,0.3);
}
.sp-btn--primary:hover { filter: brightness(1.05) saturate(1.05); box-shadow: 0 14px 36px -6px rgba(255,0,0,0.6), 0 2px 6px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -8px 16px -6px rgba(0,0,0,0.3); }

.sp-runtime { display: flex; gap: 12px; width: 100%; max-width: 560px; }
.sparring[data-mode="setup"] .sp-runtime { display: none; }
.sp-btn--ghost {
  flex: 1 1 0;
  /* Mismo tamaño (alto y tipografía) que el botón "Estoy listo" de arriba. */
  padding: clamp(15px, 3.8vw, 20px);
  font-size: clamp(16px, 4.2vw, 20px);
  font-weight: 600;
  color: var(--sp-ink);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.03) 100%);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  backdrop-filter: blur(6px);
}
.sp-btn--ghost:hover { border-color: rgba(255,0,0,0.55); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 0 1px rgba(255,0,0,0.35); }
/* Botón de pantalla completa: mismo ALTO que los demás (no más pequeño). */
.sp-btn--icon {
  flex: 0 0 auto;
  width: clamp(58px, 15vw, 72px);
  padding: clamp(15px, 3.8vw, 20px) 0;
  font-size: clamp(20px, 5vw, 24px);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── Marca: "Powered by" + logotipo Leone (blanco) ────────────────────────
   El logo vive DENTRO de la caja (.sp-main). En MÓVIL/TABLET se queda al PIE
   (order:1, respetando el diseño antiguo) con aire generoso arriba y abajo y
   un tamaño más contenido y elegante. En ESCRITORIO sube arriba del todo
   (order:-1, ver bloque de escritorio). */
.sp-powered {
  position: relative;
  z-index: 2;
  order: 1;                 /* móvil/tablet: al pie de la caja */
  flex: 0 0 auto;
  width: 100%;
  /* Aire respecto al botón "Estoy listo". */
  margin-top: clamp(30px, 5vh, 46px);
  /* Aire amplio por debajo para que respire y no quede pegado al pie. */
  margin-bottom: clamp(30px, 5vh, 52px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
/* Único logo Leone: vive al pie de la caja en todas las pantallas (hereda de
   .sp-powered order:1 y los márgenes de móvil/tablet). */
.sp-powered--bottom { display: flex; }
.sp-powered__label {
  font-family: var(--sp-font-ui);
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-size: clamp(9px, 2.4vw, 11px);
  color: rgba(255,255,255,0.6);
}
/* Contenedor que RECORTA el margen transparente del PNG cuadrado (938×938)
   dejando el logo real (≈463×346, centrado). La caja es un pelín más alta que
   el logo (aspect 463/384) para que se vea COMPLETO (incluido "1947") sin
   cortarlo, y algo más pequeño para que no se vea forzado. */
.sp-powered__logo-wrap {
  position: relative;
  display: block;
  /* Móvil/tablet: logo contenido y elegante (no domina la pantalla),
     un pelín más pequeño. */
  width: min(54%, 208px);
  aspect-ratio: 463 / 384;
  overflow: hidden;
  margin: 0 auto;
  filter: drop-shadow(0 1px 10px rgba(0,0,0,0.6));
}
.sp-powered__logo {
  /* Centrado absoluto y agrandado (938/463 ≈ 2.026) para que el contenido del
     PNG llene el contenedor; la transparencia sobrante se recorta. */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 202.6%;
  max-width: none;
  height: auto;
}

/* ── Estados de fase: recolorean el acento ────────────────────────────── */
.sparring[data-phase="round"] {
  --sp-accent: var(--sp-red);   --sp-accent-hi: var(--sp-red-hi);
  --sp-accent-soft: rgba(255,0,0,0.30); --sp-accent-glow: rgba(255,0,0,0.55);
}
.sparring[data-phase="rest"] {
  --sp-accent: var(--sp-green); --sp-accent-hi: var(--sp-green-hi);
  --sp-accent-soft: rgba(31,224,137,0.26); --sp-accent-glow: rgba(31,224,137,0.5);
}
.sparring[data-phase="prep"] {
  --sp-accent: var(--sp-gold);  --sp-accent-hi: #fff0b0;
  --sp-accent-soft: rgba(255,215,94,0.26); --sp-accent-glow: rgba(255,215,94,0.5);
}
.sparring[data-phase="finished"] {
  --sp-accent: var(--sp-gold);  --sp-accent-hi: #fff0b0;
  --sp-accent-soft: rgba(255,215,94,0.30); --sp-accent-glow: rgba(255,215,94,0.55);
}
/* En descanso/prep el dígito acompaña al acento (no siempre rojo). */
.sparring[data-phase="rest"] .sp-time {
  background: linear-gradient(180deg, var(--sp-green-hi) 0%, var(--sp-green) 55%, var(--sp-green-deep) 100%);
  -webkit-background-clip: text; background-clip: text;
}
.sparring[data-phase="prep"] .sp-time,
.sparring[data-phase="finished"] .sp-time {
  background: linear-gradient(180deg, #fff0b0 0%, var(--sp-gold) 55%, #c99312 100%);
  -webkit-background-clip: text; background-clip: text;
}

/* Pulso del anillo mientras corre. */
.sparring[data-mode="running"] .sp-ring__glow { animation: sp-pulse 2.4s ease-in-out infinite; }
@keyframes sp-pulse {
  0%, 100% { opacity: 0.28; }
  50%      { opacity: 0.5; }
}

/* Últimos 10 s del round: parpadeo del dígito. */
.sparring.is-critical .sp-time { animation: sp-blink 1s steps(2, start) infinite; }
@keyframes sp-blink { 50% { opacity: 0.28; } }

/* Destello en campanas. */
.sparring.sp-flash::before {
  content: "";
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: var(--sp-accent);
  animation: sp-flash 0.5s ease-out forwards;
}
@keyframes sp-flash {
  0%   { opacity: 0.45; }
  100% { opacity: 0; }
}

/* ── Responsive: horizontal / móviles apaisados ───────────────────────── */
@media (orientation: landscape) and (max-height: 560px) {
  .sparring:fullscreen .sp-stage,
  .sparring:-webkit-full-screen .sp-stage { flex-direction: row; gap: clamp(16px, 4vw, 42px); }
  .sparring:fullscreen .sp-phase,
  .sparring:-webkit-full-screen .sp-phase { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); }
}

/* ── ESCRITORIO (ordenador): CAJA GRANDE, UNA COLUMNA ─────────────────────
   En pantallas anchas la CAJA (.sp-main) se amplía a prácticamente toda la
   pantalla y agrupa TODO dentro, apilado y bien espaciado (más cuadrado):
   LISTO → crono → chips → controles → logotipo Leone al PIE. En móvil y tablet
   se mantiene el mismo diseño vertical tipo app con el logo al pie (una sola
   columna). NO aplica en pantalla completa, que sigue
   siendo inmersiva y centrada (regla :fullscreen de arriba, con mayor
   especificidad). */
@media (min-width: 1024px) {
  .sparring {
    /* La arena ocupa casi todo el ancho para que la caja se vea grande. */
    max-width: min(1180px, 96vw);
    align-items: center;
    justify-content: center;
    padding: clamp(26px, 4vh, 48px) clamp(28px, 4vw, 60px);
  }
  /* CAJA única grande: contiene el crono, los controles Y el logo, centrada. */
  .sparring .sp-main {
    flex: 0 1 auto;
    width: 100%;
    max-width: 920px;
    padding: clamp(28px, 3vw, 52px) clamp(28px, 3.2vw, 56px);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: clamp(20px, 2vw, 28px);
    background: rgba(255,255,255,0.028);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.05),
      0 30px 70px -28px rgba(0,0,0,0.72);
    gap: clamp(8px, 1.6vh, 18px);
  }
  /* Con la caja ancha, los chips y los selectores caben en UNA sola fila. */
  .sparring .sp-info,
  .sparring .sp-setup { flex-wrap: nowrap; }
  /* Logo Leone: un pelín más pequeño que antes. */
  .sparring .sp-powered__logo-wrap { width: min(32%, 250px); }
  /* Único logotipo Leone al PIE de la caja: aire respecto al botón "Estoy
     listo" y MÁS aire aún hasta el borde inferior. */
  .sparring .sp-powered--bottom {
    display: flex;
    order: 3;
    width: 100%;
    margin: clamp(34px, 5vh, 58px) 0 clamp(46px, 7vh, 82px);
  }
  /* Crono contenido para que la caja completa quepa en una sola pantalla. */
  .sparring .sp-ring-wrap { width: min(34vh, 290px); }
  .sparring .sp-phase { font-size: clamp(24px, 4.2vh, 40px); }
  .sparring .sp-stage { gap: clamp(6px, 1.4vh, 14px); padding-top: 0; padding-bottom: 0; }
  .sparring .sp-info  { margin-top: clamp(10px, 1.8vh, 18px); }
}

@media (prefers-reduced-motion: reduce) {
  .sparring *,
  .sparring *::before { animation: none !important; transition: none !important; }
}