/* === Estilo exclusivo para el dialog de detalle === */
.mud-dialog.custom-dialog {
    background: rgba(18, 18, 28, 0.96);
    backdrop-filter: blur(14px);
    border-radius: 18px;
    color: #e0e0e0;
    box-shadow: 0 0 25px rgba(0, 150, 255, 0.25);
    border: 1px solid rgba(91, 192, 255, 0.15);
    max-width: 900px !important;
    margin: auto;
    animation: dialogFadeZoom 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

    .mud-dialog.custom-dialog .mud-dialog-title {
        color: #5bc0ff;
        text-shadow: 0 0 10px rgba(91, 192, 255, 0.7);
        font-weight: 600;
    }

    .mud-dialog.custom-dialog .mud-table {
        background-color: rgba(255, 255, 255, 0.03);
        border-radius: 12px;
    }

        .mud-dialog.custom-dialog .mud-table th {
            color: #a5b3d0;
            font-weight: 500;
        }

        .mud-dialog.custom-dialog .mud-table td {
            color: #e8ebf7;
            border-color: rgba(255, 255, 255, 0.08);
        }

        .mud-dialog.custom-dialog .mud-table tr:hover td {
            background: rgba(91, 192, 255, 0.06);
            transition: background 0.2s ease-in-out;
        }

@keyframes dialogFadeZoom {
    0% {
        opacity: 0;
        transform: scale(0.9) translateY(10px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}


/* === Glow exterior y halo animado === */
.mud-dialog.custom-dialog {
    position: relative;
    overflow: hidden;
    padding-bottom: 20px;
}

    .mud-dialog.custom-dialog::before {
        content: "";
        position: absolute;
        inset: -3px;
        border-radius: inherit;
        background: radial-gradient( circle at 50% 100%, rgba(0, 140, 255, 0.35) 0%, rgba(0, 80, 200, 0.15) 40%, transparent 80% );
        filter: blur(12px);
        z-index: -1;
        animation: glowPulse 3s ease-in-out infinite;
    }

@keyframes glowPulse {
    0%, 100% {
        opacity: 0.7;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}


/* Bordes superiores con gradiente sutil */
.predictive-detail-dialog {
    border-top: 1px solid rgba(91, 192, 255, 0.3);
    border-bottom: 1px solid rgba(91, 192, 255, 0.1);
}

/* Efecto de resplandor en filas al pasar el ratón */
.detail-table tr:hover td {
    background: rgba(91, 192, 255, 0.08);
    box-shadow: inset 0 0 10px rgba(91, 192, 255, 0.15);
    transition: all 0.2s ease-in-out;
}