/* ============================================
   ESTILOS RESIDUALES — Solo lo que Tailwind no cubre
   ============================================ */

/* ---- Keyframe Animations ---- */
@keyframes slideIn {
  from { transform: translateX(100px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes modalShow {
  from { transform: scale(0.92) translateY(10px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 8px rgba(204, 255, 0, 0.3); }
  50%      { box-shadow: 0 0 20px rgba(204, 255, 0, 0.6); }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes progressFill {
  from { width: 0; }
  to   { width: var(--progress-width, 33%); }
}

@keyframes dotPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.3); }
}

/* ---- Dialog / Modal Styles ---- */
dialog {
  border: none;
  border-radius: 16px;
  padding: 0;
  max-width: 520px;
  width: 92%;
  margin: auto;
  background-color: #1a2332;
  color: #f1f5f9;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

dialog[open] {
  animation: modalShow 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---- Toast Animations ---- */
.toast-enter {
  animation: slideIn 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.toast-exit {
  animation: fadeOut 0.3s ease forwards;
}

/* ---- View Transitions ---- */
.view-fade-in {
  animation: fadeIn 0.3s ease;
}

/* ---- Bracket Connector Lines ---- */
/* ---- Bracket Connector Lines ---- */
.bracket-round {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 220px;
  height: 640px;
}

.bracket-match-node {
  position: relative;
  background-color: #1a2332;
  border: 1px solid #334155;
  border-radius: 12px;
  padding: 12px;
  width: 220px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Outgoing line from right side of the nodes */
.bracket-match-node::after {
  content: '';
  position: absolute;
  right: -24px;
  top: 50%;
  width: 24px;
  height: 2px;
  background-color: #334155;
  z-index: 10;
}

/* Incoming line from the left for non-first rounds */
.bracket-round:not(:first-child) .bracket-match-node::before {
  content: '';
  position: absolute;
  left: -24px;
  top: 50%;
  width: 24px;
  height: 2px;
  background-color: #334155;
  z-index: 10;
}

/* Hide outgoing connector on last round (Final) */
.bracket-round:last-child .bracket-match-node::after {
  display: none !important;
}

/* Vertical connector lines per round match size */
/* Round of 8 matches: sibling distance is 80px, half is 40px */
.bracket-round-8 .bracket-match-node:nth-child(even)::after {
  height: 40px;
  border-right: 2px solid #334155;
  border-top: 2px solid #334155;
  background-color: transparent;
}
.bracket-round-8 .bracket-match-node:nth-child(odd)::after {
  height: 40px;
  border-right: 2px solid #334155;
  border-bottom: 2px solid #334155;
  background-color: transparent;
  top: auto;
  bottom: 50%;
}

/* Round of 4 matches: sibling distance is 160px, half is 80px */
.bracket-round-4 .bracket-match-node:nth-child(even)::after {
  height: 80px;
  border-right: 2px solid #334155;
  border-top: 2px solid #334155;
  background-color: transparent;
}
.bracket-round-4 .bracket-match-node:nth-child(odd)::after {
  height: 80px;
  border-right: 2px solid #334155;
  border-bottom: 2px solid #334155;
  background-color: transparent;
  top: auto;
  bottom: 50%;
}

/* Round of 2 matches: sibling distance is 320px, half is 160px */
.bracket-round-2 .bracket-match-node:nth-child(even)::after {
  height: 160px;
  border-right: 2px solid #334155;
  border-top: 2px solid #334155;
  background-color: transparent;
}
.bracket-round-2 .bracket-match-node:nth-child(odd)::after {
  height: 160px;
  border-right: 2px solid #334155;
  border-bottom: 2px solid #334155;
  background-color: transparent;
  top: auto;
  bottom: 50%;
}

/* Color coding for winner connector lines */
.bracket-round-8 .bracket-match-node.winner-t1:nth-child(odd)::after,
.bracket-round-8 .bracket-match-node.winner-t2:nth-child(odd)::after,
.bracket-round-4 .bracket-match-node.winner-t1:nth-child(odd)::after,
.bracket-round-4 .bracket-match-node.winner-t2:nth-child(odd)::after,
.bracket-round-2 .bracket-match-node.winner-t1:nth-child(odd)::after,
.bracket-round-2 .bracket-match-node.winner-t2:nth-child(odd)::after {
  border-color: #CCFF00 !important;
}

.bracket-round-8 .bracket-match-node.winner-t1:nth-child(even)::after,
.bracket-round-8 .bracket-match-node.winner-t2:nth-child(even)::after,
.bracket-round-4 .bracket-match-node.winner-t1:nth-child(even)::after,
.bracket-round-4 .bracket-match-node.winner-t2:nth-child(even)::after,
.bracket-round-2 .bracket-match-node.winner-t1:nth-child(even)::after,
.bracket-round-2 .bracket-match-node.winner-t2:nth-child(even)::after {
  border-color: #CCFF00 !important;
}

/* ---- Bracket Scroll Snap ---- */
.bracket-scroll-container {
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #334155 transparent;
}

.bracket-scroll-container::-webkit-scrollbar {
  height: 6px;
}

.bracket-scroll-container::-webkit-scrollbar-track {
  background: transparent;
}

.bracket-scroll-container::-webkit-scrollbar-thumb {
  background-color: #334155;
  border-radius: 3px;
}

.bracket-round {
  scroll-snap-align: start;
}

/* ---- Custom Scrollbar (Global thin) ---- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: #475569;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #64748b;
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #475569 transparent;
}

/* ---- Wizard Step Transitions ---- */
.wizard-step {
  animation: fadeIn 0.35s ease;
}

/* ---- Progress Bar Animation ---- */
.progress-fill {
  animation: progressFill 0.5s ease forwards;
}

/* ---- Sport-color left borders ---- */
.sport-border-padel    { border-left-color: #84cc16 !important; }
.sport-border-pingpong { border-left-color: #f97316 !important; }
.sport-border-parchis  { border-left-color: #ef4444 !important; }
.sport-border-ajedrez  { border-left-color: #8b5cf6 !important; }

/* ---- Rank Qualification Indicator ---- */
.rank-qualify-bar {
  position: relative;
}

.rank-qualify-bar::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: #CCFF00;
  border-radius: 0 2px 2px 0;
}

/* ---- Glassmorphism card ---- */
.glass-card {
  background: rgba(30, 41, 59, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(51, 65, 85, 0.5);
}

/* ---- Pulse Glow for Live/Active Elements ---- */
.glow-accent {
  animation: pulse-glow 2s ease-in-out infinite;
}

/* ---- Skeleton Loading Shimmer ---- */
.skeleton {
  background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}

/* ---- Tab Indicator Animation ---- */
.tab-indicator {
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- Mobile: hide desktop-only, show mobile-only ---- */
@media (max-width: 767px) {
  .desktop-only { display: none !important; }
}

@media (min-width: 768px) {
  .mobile-only { display: none !important; }
}

/* ---- Admin sidebar mobile slide-in ---- */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.sidebar-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.sidebar-slide {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 280px;
  z-index: 50;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
}

.sidebar-slide.open {
  transform: translateX(0);
}