/* ==========================================================================
   📦 CONTENEDOR FLUIDO DEL ÁRBOL (SOPORTA 5 RONDAS SIN ROMPERSE)
   ========================================================================== */
.karate-bracket-exact {
    display: flex;
    gap: 1.5rem;          /* Espacio horizontal optimizado entre columnas */
    overflow-x: visible !important;
    padding: 15px 5px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; /* Scroll táctil elástico en móviles */
}

/* Columna contenedora de la ronda */
.round-column-exact {
    display: flex;
    flex-direction: column;
    min-width: 250px;     /* Ancho compacto fijo para que quepan más rondas en pantalla */
    flex-shrink: 0;       /* Crucial: impide que las columnas se aplasten al añadir rondas */
}

/* 🚀 NUEVA CLASE: Contenedor interno que recibe el margen de Smarty para centrar los combates */
.matches-wrapper-exact {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ==========================================================================
   🥋 DISEÑO DE TARJETA DE COMBATE COMPACTA Y MODERNA
   ========================================================================== */
.match-card-exact {
    background: #ffffff;
    border-radius: 8px;   /* Bordes suavizados proporcionales al nuevo tamaño */
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative; /* OBLIGATORIO para el funcionamiento del botón absoluto */
}

/* Efecto moderno de elevación al pasar el ratón */
.match-card-exact:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}

/* 🏷️ Franjas de Katas (Superior e Inferior) con tamaño ultra reducido y color atenuado */
.kata-meta-bar {
    background: #f8f9fa;
    color: #6c757d;     
    font-size: 0.7rem; 
    padding: 1px 12px;   /* Padding vertical mínimo para que las franjas sean poco altas */
}
.kata-meta-bar.top-bar { border-bottom: 1px solid #dee2e6; }
.kata-meta-bar.bottom-bar { border-top: 1px solid #dee2e6; }

/* 🚀 Fuerza el tamaño micro en CUALQUIER etiqueta interna del Kata (span, strong, etc.) */
.kata-meta-bar * {
    font-size: 0.7rem !important;
    font-weight: 400 !important;
    font-style: italic !important;
    color: #000000 !important;
}

.tatami-number {
    float:right;
    font-style: normal !important;
}


/* Filas de competidores con los degradados intensos */
.fighter-row-exact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;   /* Altura de fila compactada */
    color: #ffffff; 
    letter-spacing: 0.5px;
    border-bottom: 1px solid #ffffff; /* Línea de separación interna blanca y fina */
}
.fighter-row-exact:last-child { border-bottom: none; }

/* Degradados corporativos potentes */
.fighter-row-exact.aka-vibrant { background: linear-gradient(90deg, #dc3545 0%, #b21f2d 100%); }
.fighter-row-exact.ao-vibrant { background: linear-gradient(90deg, #0d6efd 0%, #0a58ca 100%); }

/* Bloque de textos (Nombre del atleta + Club de Karate) */
.fighter-info { display: flex; flex-direction: column; line-height: 1.1; }
.fighter-name { font-size: 0.85rem; font-weight: 600; }
.fighter-club { font-size: 0.68rem; font-weight: 400; color: rgba(255, 255, 255, 0.75); margin-top: 1px; }

/* Marcador de puntos compacto estilo panel electrónico */
.score-badge-exact {
    display: flex;
    align-items: center;
    gap: 5px;            /* Distancia entre el punto LED y los puntos numéricos */
    background: rgba(0, 0, 0, 0.35);
    color: #ffffff;
    font-family: monospace;
    font-size: 1rem;     
    font-weight: 700;
    padding: 2px 8px;    
    border-radius: 4px;
    min-width: 28px;     
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* 🟡 PUNTO LUMINOSO DE GANADOR (CSS Puro) */
.winner-dot {
    display: none;       /* Oculto por defecto */
    width: 6px;
    height: 6px;
    background-color: #ffc107; /* Amarillo dorado */
    border-radius: 50%;
    box-shadow: 0 0 6px #ffc107, 0 0 2px #fff; /* Efecto de resplandor LED */
    flex-shrink: 0;
}

/* ==========================================================================
   🏆 DINÁMICAS DE ESTADO: COMPORTAMIENTO DE GANADOR Y PERDEDOR
   ========================================================================== */

/* Si gana AKA (Rojo): Marcador pasa a Rojo Oscuro Profundo */
.aka-vibrant.is-winner .score-badge-exact { 
    background-color: #7f1d1d !important; 
    border: 1px solid rgba(255, 255, 255, 0.4); 
}

/* Si gana AO (Azul): Marcador pasa a Azul Oscuro Profundo */
.ao-vibrant.is-winner .score-badge-exact { 
    background-color: #1e3a8a !important; 
    border: 1px solid rgba(255, 255, 255, 0.4); 
}

/* Muestra el punto LED de victoria y engrosa la tipografía del ganador */
.is-winner .winner-dot { display: inline-block; }
.fighter-row-exact.is-winner .fighter-name { font-weight: 800; }

/* El Perdedor: Conserva su fondo de color, pero reduce su opacidad al 75% */
.fighter-row-exact.is-loser { opacity: 0.70; }
.fighter-row-exact.is-loser .fighter-name { color: rgba(255, 255, 255, 0.85); font-weight: 500; }
.fighter-row-exact.is-loser .fighter-club { color: rgba(255, 255, 255, 0.55); }



/* 🚀 BOTÓN FLOTANTE INTERNO CLARO, PEADO A LA DERECHA Y CON EL SIGNO MÁS MÁS GRANDE */
.match-access-btn {
    position: absolute;
    right: 0px;            /* Mantener al extremo derecho dentro del cuadro */
    top: 50%;              /* Centrado verticalmente respecto a todo el encuentro */
    transform: translateY(-50%); /* Ajuste perfecto para el centrado vertical */
    width: 18px;           
    height: 18px;
    background-color: rgba(255, 255, 255, 0.85); /* Fondo blanco translúcido (muy claro) */
    color: #4a5568 !important;                   /* El signo más se tiñe de gris pizarra suave */
    border: 1px solid #cbd5e0;                   /* Borde gris claro muy fino */
    border-radius: 4px;    
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;    /* 🚀 AGRANDADO: Signo más notablemente más grande */
    font-weight: 800;      /* 🚀 Más grueso para mejorar la visibilidad */
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    z-index: 15;           /* Flota por encima de las filas de color */
}

.match-access-btn:hover {
    background-color: #ffffff; /* Se vuelve blanco opaco al pasar el ratón */
    color: #1a202c !important; /* El signo más se oscurece un poco más al hacer hover */
    transform: translateY(-50%) scale(1.08); /* Sutil efecto de aumento */
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}