/* El calendario del selector de fechas (AppDatePicker). Radzen lo mueve a <body> al abrirlo, fuera del componente, por eso este estilo es
   global y parte del contenedor del popup en lugar de ser un estilo del componente. Solo hay un selector de fechas en la aplicación. */
body .rz-datepicker-popup-container {
    --adp-brand: var(--custom-primary-color, #40b49f);
    --adp-accent: color-mix(in srgb, var(--adp-brand) 42%, #101828);
    --adp-ink: #17222b;
    --adp-line: #e1e7ea;
    --adp-muted: #52616d;
    font-family: "Hanken Grotesk", "Segoe UI", sans-serif;
}

/* El calendario de Radzen con el lenguaje de esta pantalla: esquinas amplias, el color del negocio en lugar del magenta del tema,
   días de 44 px en pantallas táctiles y estados que no dependen solo del color (hoy lleva aro, el elegido va relleno y en negrita). */
body .rz-datepicker-popup-container {
    padding: .75rem;
    border: 1px solid var(--adp-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 28px 56px -24px color-mix(in srgb, var(--adp-brand) 40%, rgba(16, 24, 40, .45)), 0 2px 6px rgba(16, 24, 40, .06);
}

/* app.css fuerza un borde gris con !important a .rz-calendar, .rz-dropdown y .rz-state-active; dentro de este calendario se anula. */
body .rz-datepicker-popup-container .rz-calendar {
    border: 0 !important;
    background: transparent;
    box-shadow: none;
    font-family: inherit;
}

body .rz-datepicker-popup-container .rz-calendar-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0 0 .5rem;
}

body .rz-datepicker-popup-container .rz-calendar-prev,
body .rz-datepicker-popup-container .rz-calendar-next {
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 12px;
    color: var(--adp-ink);
}

body .rz-datepicker-popup-container .rz-calendar-prev:hover,
body .rz-datepicker-popup-container .rz-calendar-next:hover {
    background: color-mix(in srgb, var(--adp-brand) 12%, #fff);
}

body .rz-datepicker-popup-container .rz-calendar-month-dropdown,
body .rz-datepicker-popup-container .rz-calendar-year-dropdown {
    min-height: 2.75rem;
    border: 1px solid #c9d2d8 !important;
    border-radius: 12px;
    background: #fff;
    font-weight: 600;
}

body .rz-datepicker-popup-container .rz-calendar-month-dropdown .rz-dropdown-label {
    text-transform: capitalize;
}

body .rz-datepicker-popup-container .rz-calendar-view th {
    padding: .25rem 0 .5rem;
    color: var(--adp-muted);
    font-size: .75rem;
    font-weight: 600;
    text-align: center;
    text-transform: capitalize;
}

body .rz-datepicker-popup-container .rz-calendar-view td {
    padding: 2px;
    text-align: center;
}

body .rz-datepicker-popup-container .rz-calendar-view td > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    color: var(--adp-ink);
    font-size: .9375rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background-color .15s ease;
}

body .rz-datepicker-popup-container .rz-calendar-view td > span.rz-calendar-other-month {
    color: #98a2b3;
}

body .rz-datepicker-popup-container .rz-calendar-view td > span.rz-state-disabled {
    color: #b8c0c8;
    cursor: not-allowed;
}

body .rz-datepicker-popup-container .rz-calendar-view td > span:not(.rz-state-disabled):not(.rz-state-active):hover {
    background: color-mix(in srgb, var(--adp-brand) 14%, #fff);
}

body .rz-datepicker-popup-container .rz-calendar-view td > span.rz-calendar-today {
    box-shadow: inset 0 0 0 1.5px var(--adp-accent);
}

body .rz-datepicker-popup-container .rz-calendar-view td > span.rz-state-active {
    border: 0 !important;
    background: var(--adp-accent);
    color: #fff;
    font-weight: 700;
}

body .rz-datepicker-popup-container .rz-calendar-view td:focus-visible > span {
    outline: 2px solid var(--adp-accent);
    outline-offset: 2px;
}

@media (pointer: coarse) {
    .rz-datepicker-popup-container .rz-calendar-view td > span {
        width: 2.75rem;
        height: 2.75rem;
    }
}