/* ============================================================
   HERRAMIENTAS DE GIMNASIO — rediseño completo
   Marcador | Sorteo de equipos | Temporizador
   ============================================================ */

/* ── Layout principal ── */
.tools-view {
  grid-column: 2 / 4;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
  padding: 28px 40px 48px;
  background: transparent;
}

/* ── Cabecera ── */
.tools-view-header {
  margin-bottom: 24px;
}

/* ── Pestañas pill ── */
.tools-pill-tabs {
  display: flex;
  gap: 6px;
  background: var(--surface-2, rgba(255,255,255,0.05));
  border-radius: 14px;
  padding: 5px;
  margin-bottom: 28px;
  width: 100%;
  max-width: fit-content;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tools-pill-tabs::-webkit-scrollbar { display: none; }

.tools-pill-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 20px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--fg-muted);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.tools-pill-tab:hover:not(.active) {
  background: rgba(255,255,255,0.06);
  color: var(--fg);
}

.tools-pill-tab.active {
  background: var(--accent);
  color: #111;
  font-weight: 700;
}

.tools-pill-emoji {
  font-size: 16px;
  line-height: 1;
}

/* ── Panel de contenido ── */
.tools-panel {
  flex: 1;
}

/* ── Botones comunes ── */
.tools-primary-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 24px;
  background: var(--accent);
  color: #111;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}

.tools-primary-btn:hover:not(:disabled) { opacity: 0.9; }
.tools-primary-btn:active:not(:disabled) { transform: scale(0.97); }
.tools-primary-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.tools-primary-btn--pause {
  background: var(--surface-2, rgba(255,255,255,0.1));
  color: var(--fg);
}

.tools-primary-btn--busy {
  opacity: 0.75;
}

.tools-ghost-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: transparent;
  color: var(--fg-muted);
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.tools-ghost-btn:hover { background: rgba(255,255,255,0.06); color: var(--fg); }

/* Spinner pequeño */
.tools-spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid rgba(0,0,0,0.2);
  border-top-color: #000;
  border-radius: 50%;
  animation: tools-spin 0.6s linear infinite;
}
@keyframes tools-spin { to { transform: rotate(360deg); } }


/* ============================================================
   MARCADOR DIGITAL
   ============================================================ */

.tsb-root {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tsb-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 620px;
}

.tsb-team {
  background: var(--surface-2, rgba(255,255,255,0.05));
  border: 2px solid transparent;
  border-radius: 18px;
  padding: 24px 20px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  position: relative;
  transition: border-color 0.2s;
}

.tsb-team::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  border-radius: 18px 18px 0 0;
  background: var(--tc);
}

.tsb-team--winner {
  border-color: var(--tc);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tc) 20%, transparent);
}

/* Nombre del equipo */
.tsb-name {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: none;
  color: var(--fg-muted);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  padding: 0;
  opacity: 0.8;
  transition: opacity 0.15s, color 0.15s;
}
.tsb-name:hover { opacity: 1; color: var(--fg); }
.tsb-name svg { opacity: 0.5; }

.tsb-name-input {
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--tc);
  color: var(--fg);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
  width: 100%;
  outline: none;
  padding: 2px 4px;
}

/* Puntuación grande */
.tsb-score {
  font-size: 80px;
  font-weight: 900;
  line-height: 1;
  font-family: var(--font-display, inherit);
  color: var(--tc);
  letter-spacing: -3px;
  min-height: 80px;
}

/* Botones +/− */
.tsb-btns {
  display: flex;
  gap: 6px;
  width: 100%;
}

.tsb-btn {
  flex: 1;
  padding: 10px 4px;
  border: none;
  border-radius: 10px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.1s, opacity 0.15s;
}
.tsb-btn:active { transform: scale(0.93); }

.tsb-btn--minus {
  background: rgba(255,255,255,0.07);
  color: var(--fg-muted);
  font-size: 22px;
}
.tsb-btn--minus:hover { background: rgba(255,255,255,0.12); color: var(--fg); }

.tsb-btn--plus {
  background: color-mix(in srgb, var(--tc) 20%, transparent);
  color: var(--tc);
}
.tsb-btn--plus:hover { background: color-mix(in srgb, var(--tc) 30%, transparent); }

.tsb-btn--plus5 {
  background: color-mix(in srgb, var(--tc) 12%, transparent);
  color: var(--tc);
  font-size: 13px;
  font-weight: 800;
  flex: 0.7;
}
.tsb-btn--plus5:hover { background: color-mix(in srgb, var(--tc) 22%, transparent); }

/* Badge ganador */
.tsb-win-badge {
  position: absolute;
  top: 10px; right: 10px;
  background: var(--tc);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 20px;
  letter-spacing: 0.03em;
}

.tsb-footer {
  display: flex;
  justify-content: flex-start;
}


/* ============================================================
   SORTEO DE EQUIPOS
   ============================================================ */

.tteam-root {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 640px;
}

.tteam-config {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

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

.tteam-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tteam-label-hint {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--fg-muted);
  opacity: 0.6;
}

.tteam-num-row {
  display: flex;
  gap: 6px;
}

.tteam-num-btn {
  width: 44px; height: 44px;
  border-radius: 10px;
  border: 2px solid var(--border, rgba(255,255,255,0.12));
  background: transparent;
  color: var(--fg-muted);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}
.tteam-num-btn:hover { border-color: var(--accent); color: var(--fg); }
.tteam-num-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #111;
}

.tteam-textarea {
  width: 100%;
  background: var(--surface-2, rgba(255,255,255,0.05));
  border: 1.5px solid var(--border, rgba(255,255,255,0.1));
  border-radius: 10px;
  color: var(--fg);
  font-size: 14px;
  line-height: 1.6;
  padding: 12px 14px;
  resize: vertical;
  outline: none;
  font-family: inherit;
  transition: border-color 0.15s;
}
.tteam-textarea:focus { border-color: var(--accent); }
.tteam-textarea::placeholder { color: var(--fg-muted); opacity: 0.5; }

/* Resultado en tarjetas */
.tteam-result {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.tteam-card {
  background: var(--surface-2, rgba(255,255,255,0.05));
  border-radius: 14px;
  overflow: hidden;
  border: 1.5px solid color-mix(in srgb, var(--tc) 25%, transparent);
}

.tteam-card-header {
  background: color-mix(in srgb, var(--tc) 18%, transparent);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tteam-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--tc);
  flex-shrink: 0;
}

.tteam-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--fg);
  flex: 1;
}

.tteam-card-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--tc);
  background: color-mix(in srgb, var(--tc) 20%, transparent);
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

.tteam-card-list {
  list-style: none;
  margin: 0; padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tteam-card-player {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--fg);
}

.tteam-card-player-num {
  font-size: 11px;
  font-weight: 700;
  color: var(--tc);
  opacity: 0.7;
  min-width: 14px;
}


/* ============================================================
   TEMPORIZADOR
   ============================================================ */

.ttimer-root {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 420px;
}

/* Presets */
.ttimer-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  width: 100%;
}

.ttimer-preset {
  padding: 7px 14px;
  border-radius: 8px;
  border: 1.5px solid var(--border, rgba(255,255,255,0.12));
  background: transparent;
  color: var(--fg-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.ttimer-preset:hover:not(:disabled) { border-color: var(--accent); color: var(--fg); }
.ttimer-preset.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #111;
}
.ttimer-preset:disabled { opacity: 0.4; cursor: not-allowed; }

/* Círculo SVG */
.ttimer-circle-wrap {
  position: relative;
  width: 220px; height: 220px;
}

.ttimer-circle--done .ttimer-arc {
  animation: ttimer-pulse 0.5s ease-in-out 3;
}

@keyframes ttimer-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.ttimer-svg {
  width: 100%; height: 100%;
  transform: rotate(-90deg);
}

.ttimer-track {
  fill: none;
  stroke: var(--surface-2, rgba(255,255,255,0.08));
  stroke-width: 10;
}

.ttimer-arc {
  fill: none;
  stroke-width: 10;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s linear, stroke 0.5s;
}

.ttimer-display {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.ttimer-time {
  font-size: 52px;
  font-weight: 900;
  font-family: var(--font-display, inherit);
  color: var(--fg);
  letter-spacing: -2px;
  line-height: 1;
}

.ttimer-done-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--coral, #ef4444);
  animation: ttimer-fadein 0.3s ease;
}

.ttimer-status-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.7;
}

@keyframes ttimer-fadein {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1); }
}

/* Inputs manuales */
.ttimer-inputs {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.ttimer-input-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.ttimer-input-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ttimer-input {
  width: 72px;
  text-align: center;
  background: var(--surface-2, rgba(255,255,255,0.06));
  border: 1.5px solid var(--border, rgba(255,255,255,0.12));
  border-radius: 10px;
  color: var(--fg);
  font-size: 22px;
  font-weight: 700;
  padding: 10px 8px;
  outline: none;
  transition: border-color 0.15s;
  /* Ocultar flechas spin */
  -moz-appearance: textfield;
}
.ttimer-input::-webkit-inner-spin-button,
.ttimer-input::-webkit-outer-spin-button { display: none; }
.ttimer-input:focus { border-color: var(--accent); }

.ttimer-sep {
  font-size: 28px;
  font-weight: 700;
  color: var(--fg-muted);
  margin-bottom: 10px;
}

/* Controles */
.ttimer-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ============================================================
   PLANIFICADOR DE TORNEOS
   Eliminatoria (bracket) + Liga (round-robin)
   ============================================================ */

.ttourn-root {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 900px;
}

/* ── Panel de configuración inicial ── */
.ttourn-setup {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 520px;
}

/* ── Selector de formato ── */
.ttourn-format-row {
  display: flex;
  gap: 8px;
}

.ttourn-format-btn {
  flex: 1;
  padding: 12px 18px;
  border-radius: 10px;
  border: 2px solid var(--border, rgba(255,255,255,0.12));
  background: transparent;
  color: var(--fg-muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}
.ttourn-format-btn:hover:not(.active) {
  border-color: var(--accent);
  color: var(--fg);
}
.ttourn-format-btn.active {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-color: var(--accent);
  color: var(--fg);
  font-weight: 700;
}

.ttourn-format-desc {
  font-size: 12.5px;
  color: var(--fg-muted);
  line-height: 1.55;
  margin: 0;
  opacity: 0.8;
}

/* ── Banner campeón / líder ── */
.ttourn-champion {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 22px 28px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 12%, transparent),
    color-mix(in srgb, var(--accent) 6%, transparent));
  border: 1.5px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 18px;
  text-align: center;
  animation: ttourn-appear 0.4s ease;
}

@keyframes ttourn-appear {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

.ttourn-champion-trophy {
  font-size: 42px;
  line-height: 1;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
}

.ttourn-champion-name {
  font-size: 22px;
  font-weight: 900;
  color: var(--fg);
  letter-spacing: -0.4px;
}

.ttourn-champion-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ── Bracket — layout horizontal de rondas ── */
.ttourn-bracket {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.ttourn-round {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 200px;
  flex-shrink: 0;
}

.ttourn-round-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0 4px;
  margin-bottom: 2px;
}

/* ── Tarjeta de partido (bracket) ── */
.ttourn-match {
  background: var(--surface-2, rgba(255,255,255,0.05));
  border: 1.5px solid var(--border, rgba(255,255,255,0.1));
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.15s;
}

.ttourn-match:not(.ttourn-match--bye):hover {
  border-color: rgba(255,255,255,0.2);
}

.ttourn-match--bye {
  opacity: 0.45;
}

.ttourn-match-team {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  transition: background 0.15s;
}

.ttourn-match-team:not(:last-child) {
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
}

.ttourn-match-team--winner {
  background: color-mix(in srgb, var(--tc) 14%, transparent);
}

.ttourn-match-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--tc, rgba(255,255,255,0.3));
  flex-shrink: 0;
}

.ttourn-match-name {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ttourn-match-team--winner .ttourn-match-name {
  color: var(--tc);
  font-weight: 700;
}

.ttourn-score-input {
  width: 44px;
  text-align: center;
  background: var(--surface-2, rgba(255,255,255,0.07));
  border: 1.5px solid var(--border, rgba(255,255,255,0.12));
  border-radius: 7px;
  color: var(--fg);
  font-size: 14px;
  font-weight: 700;
  padding: 4px 6px;
  outline: none;
  transition: border-color 0.15s;
  /* Ocultar flechas spin */
  -moz-appearance: textfield;
}
.ttourn-score-input::-webkit-inner-spin-button,
.ttourn-score-input::-webkit-outer-spin-button { display: none; }
.ttourn-score-input:focus { border-color: var(--accent); }

/* ── Secciones liga ── */
.ttourn-liga-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ttourn-section-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ── Tabla clasificación liga ── */
.ttourn-liga-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.ttourn-th {
  padding: 8px 10px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1.5px solid var(--border, rgba(255,255,255,0.1));
  white-space: nowrap;
}

.ttourn-th--pos { width: 36px; }
.ttourn-th--team { text-align: left; min-width: 120px; }

.ttourn-td {
  padding: 9px 10px;
  text-align: center;
  color: var(--fg);
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.06));
  font-variant-numeric: tabular-nums;
}

.ttourn-td--pos { text-align: center; }
.ttourn-td--team { text-align: left; font-weight: 600; }
.ttourn-td--pts  { font-weight: 800; color: var(--accent); font-size: 14px; }

.ttourn-td--pos-dif { color: #10b981; font-weight: 700; }
.ttourn-td--neg-dif { color: #ef4444; font-weight: 700; }

.ttourn-pos-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
}

.ttourn-liga-leader td {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.ttourn-liga-leader .ttourn-td--team {
  color: var(--accent);
}

/* ── Grid de partidos liga ── */
.ttourn-matches-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 8px;
}

.ttourn-liga-match {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  background: var(--surface-2, rgba(255,255,255,0.04));
  border: 1.5px solid var(--border, rgba(255,255,255,0.09));
  border-radius: 11px;
  transition: border-color 0.15s;
}

.ttourn-liga-match--played {
  border-color: color-mix(in srgb, var(--accent) 25%, transparent);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

.ttourn-liga-team {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.ttourn-liga-team--right {
  flex-direction: row-reverse;
  text-align: right;
}

.ttourn-liga-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.ttourn-liga-team--right .ttourn-liga-name {
  text-align: right;
}

.ttourn-liga-sep {
  font-size: 11px;
  font-weight: 700;
  color: var(--fg-muted);
  opacity: 0.5;
  flex-shrink: 0;
  padding: 0 2px;
}

/* ── Responsive ── */
@media (max-width: 767px) {
  .tools-view { display: none; }
}

@media (max-width: 960px) {
  .tools-view { padding: 20px 20px 40px; }
  .tsb-score { font-size: 64px; }
  .ttimer-circle-wrap { width: 180px; height: 180px; }
  .ttimer-time { font-size: 42px; }
}