/* Global Background */
body {
    background: linear-gradient(to bottom, #f0f4fc 0%, #ffffff 100%);
    min-height: 100vh;
    overflow-y: scroll;
    /* Prevents layout shift when dialogs close, which causes Radzen JS ResizeObserver errors */
}

/* Common Styles */
.card {
    border: none;
    border-radius: 1rem;
    /* 16px */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    /* Sombra suave y difusa */
    background-color: #fff;
    margin-bottom: 1.5rem;
}

/* Frosted Glass Card Effect */
.glass-card {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07) !important;
}

.dark-mode .glass-card {
    background: rgba(30, 30, 30, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.card-header.bg-transparent {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.card .card-header {
    background-color: #fff;
    border-bottom: 1px solid #f0f0f0;
    font-weight: 700;
    color: #4e73df;
    /* Color primario para títulos */
    padding: 1.25rem 1.5rem;
    border-radius: 1rem 1rem 0 0;
}

.card-body {
    padding: 1.5rem;
}

/* Modern Buttons */
.btn,
.rz-button {
    border-radius: 50px !important;
    /* Pill shape */
    padding: 0.5rem 1.5rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.btn:hover,
.rz-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.btn-primary {
    background-color: #4e73df;
    border-color: #4e73df;
}

.btn-primary:hover {
    background-color: #2e59d9;
    border-color: #2e59d9;
}

.btn-success {
    background-color: #1cc88a;
    border-color: #1cc88a;
}

.btn-success:hover {
    background-color: #169c6d;
    border-color: #169c6d;
}

.btn-info {
    background-color: #36b9cc;
    border-color: #36b9cc;
}

.btn-info:hover {
    background-color: #2a93a4;
    border-color: #2a93a4;
}

.btn-warning {
    background-color: #f6c23e;
    border-color: #f6c23e;
}

.btn-warning:hover {
    background-color: #e0a800;
    border-color: #e0a800;
}

.btn-danger {
    background-color: #e74a3b;
    border-color: #e74a3b;
}

.btn-danger:hover {
    background-color: #d03424;
    border-color: #d03424;
}

/* Modern Inputs */
.form-control,
.rz-textbox,
.rz-password,
.rz-dropdown {
    border-radius: 0.5rem !important;
    border: 1px solid #e3e6f0;
    padding: 0.5rem 1rem;
}

.form-control:focus,
.rz-textbox:focus {
    box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.15);
    border-color: #4e73df;
}

/* Navigation Styles */
.nav-link.active {
    font-weight: 600;
}

/* Status Badge Styles */
.badge {
    font-size: 0.75em;
}

/* Table Styles */
.table th {
    border-top: none;
    font-weight: 600;
    color: #5a5c69;
}

/* Responsive Design */
.container-fluid {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

@media (min-width: 576px) {
    .container-fluid {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media (min-width: 768px) {
    .container-fluid {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .page-header {
        font-size: 1.75rem;
    }
}

@media (min-width: 992px) {
    .page-header {
        font-size: 2rem;
    }
}

/* Custom components styling */
.appointment-card {
    border-left: 0.25rem solid #4e73df;
    transition: transform 0.2s ease-in-out;
}

.appointment-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.status-solicitado {
    background-color: #ffa500 !important;
    /* Orange */
}

.status-reservado {
    background-color: #4682B4 !important;
    /* Steel Blue */
}

.status-confirmado {
    background-color: #32CD32 !important;
    /* Lime Green */
}

.status-en-atencion {
    background-color: #1E90FF !important;
    /* Dodger Blue */
}

.status-atendido {
    background-color: #228B22 !important;
    /* Forest Green */
}

.status-cancelado {
    background-color: #DC143C !important;
    /* Crimson */
}

.status-no-show {
    background-color: #800080 !important;
    /* Purple */
}

.status-bloqueado {
    background-color: #A9A9A9 !important;
    /* Dark Gray */
}

.status-cerrado {
    background-color: #000000 !important;
    /* Black */
}

/* Page header styling */
.page-header {
    border-bottom: 1px solid #e3e6f0;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    font-weight: 600;
}

/* Responsive card layouts */
@media (max-width: 767.98px) {
    .row {
        margin-left: -0.5rem;
        margin-right: -0.5rem;
    }

    .col,
    .col-1,
    .col-2,
    .col-3,
    .col-4,
    .col-5,
    .col-6,
    .col-7,
    .col-8,
    .col-9,
    .col-10,
    .col-11,
    .col-12 {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .card-body {
        padding: 1rem;
    }

    .btn {
        margin-bottom: 0.25rem;
    }

    /* Make tables scrollable on small screens */
    .table-responsive-mobile {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Additional responsive utilities */
.d-sm-none {
    display: none;
}

.d-sm-block {
    display: block;
}

@media (min-width: 576px) {
    .d-sm-none {
        display: none !important;
    }

    .d-sm-block {
        display: block !important;
    }
}

@media (max-width: 575.98px) {
    .hide-mobile {
        display: none !important;
    }

    .show-mobile {
        display: block !important;
    }

    .mobile-full-width {
        width: 100%;
    }
}

/* Improve form responsiveness */
.form-control,
.form-select {
    min-height: calc(1.5em + 0.75rem + 2px);
}

@media (max-width: 575.98px) {

    .form-control,
    .form-select {
        font-size: 1rem;
        /* Prevents zooming on mobile devices */
    }

    .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    .btn-group {
        flex-direction: column;
    }

    .btn-group>.btn {
        width: 100%;
        margin-bottom: 0.25rem;
    }
}

/* Ajuste específico para Profile Menu para que los items sean visibles */
.rz-profile-menu .rz-navigation-item-link {
    color: #4e73df !important;
}

.rz-profile-menu .rz-navigation-item-icon {
    color: #4e73df !important;
}

.rz-header {
    z-index: 1000;
}

/* Scheduler View-based Time Display */
/* Show time ONLY in Month view (index 2), hide in Day (0) and Week (1) views */
.scheduler-view-0 .scheduler-time-display,
.scheduler-view-1 .scheduler-time-display {
    display: none !important;
}

.scheduler-view-2 .scheduler-time-display {
    display: block !important;
}

/* Radzen DataGrid Header Styling - Gray Background */
.rz-datatable .rz-grid-table thead th,
.rz-datatable .rz-grid-table thead td,
.rz-grid-table thead th,
.rz-grid-table thead td {
    background-color: #e9ecef !important;
    color: #495057 !important;
    font-weight: 700 !important;
    text-transform: capitalize !important;
    border-bottom: 2px solid #dee2e6 !important;
}

/* Radzen Notification Positioning - Global Top Center */
.rz-notification {
    top: 1rem !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    max-width: 90% !important;
}

.rz-notification-item-wrapper {
    margin-bottom: 0.5rem !important;
}