.dialog-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 20000;
            display: none;
            justify-content: center;
            align-items: center;
            backdrop-filter: blur(5px);
        }

        /*
        .dialog-box {
            background: #1e1e1e; border: 1px solid #333; border-radius: 8px;
            width: 350px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
            color: white; font-family: 'Segoe UI', sans-serif; overflow: hidden;
        }
        */

        .dialog-box {
            background: rgba(30, 30, 30, 0.8) !important;
            width: 90%;
            max-width: 400px;
            /* Ancho para alerts normales */
            transition: max-width 0.3s ease;
            /* Animacion suave al crecer */
            /* width: 350px; */
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(15px);
            border: 1px solid rgba(255, 255, 255, 0.1) !important;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
            color: white;
            font-family: 'Segoe UI', sans-serif;
            overflow: hidden;
            font-weight: bold;
            font-size: 14px;
        }

        .dialog-box.wide {
            max-width: 550px;
        }

        .dialog-header {
            background: linear-gradient(to right, rgba(66, 133, 244, 0.2), transparent);
            padding: 10px 15px;
            color: white;
            font-family: 'Segoe UI', sans-serif;
            overflow: hidden;
            font-size: 13px;
        }

        /*  .dialog-header { padding: 10px 15px; background: rgba(255,255,255,0.05); font-weight: bold; font-size: 14px; }  */
        .dialog-body {
            padding: 20px 15px;
            font-size: 14px;
            line-height: 1.4;
        }

        .dialog-footer {
            padding: 10px;
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            background: rgba(0, 0, 0, 0.2);
        }

        .dialog-btn {
            padding: 6px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            background: #333;
            color: white;
            transition: 0.2s;
        }

        .dialog-btn.primary {
            background: #4285f4;
        }

        .dialog-btn:hover {
            filter: brightness(1.2);
        }

        /*.dialog-btn.primary { background: #4285f4; }*/
        /*.dialog-btn:hover { filter: brightness(1.2); }*/

        /*
input[type="date"] {
    -webkit-appearance: textfield !important;
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}
*/

        /* En Chrome/Edge, esto no es suficiente. Necesitamos permitir el icono */

        input[type="date"]::-webkit-calendar-picker-indicator {
            display: block !important;
            opacity: 1 !important;
            cursor: pointer;
        }


        /* Específico para date y datetime */
        .os-prompt-input option {
            background: #1e1e1e !important;
            color: white !important;
        }

        /*
.os-prompt-input[type="date"],
.os-prompt-input[type="datetime-local"] {
    -webkit-appearance: textfield !important;
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}

.os-prompt-input[type="date"]::-webkit-calendar-picker-indicator {
    display: block !important;
    opacity: 1 !important;
    cursor: pointer;
}
*/