/* 📅 Estilo general del MudDatePicker */
.mud-picker {
    background-color: white !important;
    color: #212529;
    border-radius: 0.75rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* 🌙 Modo oscuro */
body.dark-mode .mud-picker {
    background-color: #2a2a2a !important;
    color: #f1f1f1;
}

/* 📩 Input interno centrado */
.centered-datepicker .mud-input-slot {
    justify-content: center !important;
    text-align: center;
}

/* 🟦 Input con bordes redondeados y sombra */
.rounded-datepicker .mud-input {
    border-radius: 0.75rem !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    background-color: white !important;
    border: 1px solid #ced4da;
}

/* 🌙 Modo oscuro para input */
body.dark-mode .rounded-datepicker .mud-input {
    background-color: #1e1e1e !important;
    color: #f1f1f1;
    border: 1px solid #444;
}

/* 📆 Popup (calendario) */
.mud-popover {
    background-color: white !important;
    border: 1px solid #dee2e6;
    border-radius: 0.75rem;
    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.25);
    z-index: 3000 !important;
}

/* 🌙 Dark mode popup */
body.dark-mode .mud-popover {
    background-color: #2c2c2c !important;
    color: #e0e0e0;
    border: 1px solid #555;
}

/* 📱 Responsive: centrar el popup en móvil */
@media (max-width: 576px) {
    .mud-popover {
        width: 95% !important;
        left: 2.5% !important;
    }
}