/* PietroCal 10Q02.6 — contrato visual global de fechas y horarios. */
:root {
    --pc-temporal-accent: #df7614;
    --pc-temporal-accent-dark: #b45309;
    --pc-temporal-accent-ink: #9a3412;
    --pc-temporal-accent-soft: rgba(223, 118, 20, .09);
    --pc-temporal-accent-range: rgba(223, 118, 20, .11);
    --pc-temporal-border: #cfd7e1;
    --pc-temporal-text: #20242a;
    --pc-temporal-muted: #667085;
    --pc-temporal-control-height: 36px;
    --pc-temporal-radius: 7px;
}

/*
 * Esta hoja se publica al final de la cascada y es la fuente de verdad visual
 * para los componentes globales PietroDatePicker, PietroTimePicker y
 * PietroDateTimePicker. Los inputs nativos continúan siendo la fuente de datos.
 */
.pc-date-control,
.pc-time-control {
    min-height: var(--pc-temporal-control-height) !important;
    height: var(--pc-temporal-control-height) !important;
    grid-template-columns: 18px minmax(0, 1fr) 14px !important;
    align-items: center !important;
    column-gap: 6px !important;
    padding: 0 8px !important;
    border: 1px solid var(--pc-temporal-border) !important;
    border-radius: var(--pc-temporal-radius) !important;
    background: #fff !important;
    color: var(--pc-temporal-text) !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
}

.pc-date-control:hover:not(:disabled),
.pc-time-control:hover:not(:disabled),
.pc-date-control:focus-visible,
.pc-time-control:focus-visible,
.pc-date-control.is-open,
.pc-time-control.is-open,
.pc-date-control:focus-within,
.pc-time-control:focus-within {
    border-color: var(--pc-temporal-accent) !important;
    outline: 0 !important;
    box-shadow: 0 0 0 3px var(--pc-temporal-accent-soft) !important;
}

.pc-date-control:active:not(:disabled),
.pc-time-control:active:not(:disabled) {
    transform: none !important;
}

.pc-date-control-icon,
.pc-time-control-icon {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    display: grid !important;
    place-items: center !important;
    align-self: center !important;
    justify-self: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--pc-temporal-accent-dark) !important;
}

.pc-date-control-icon svg,
.pc-time-control-icon svg {
    display: block !important;
    width: 15px !important;
    height: 15px !important;
    stroke-width: 1.75 !important;
}

.pc-date-control-main {
    min-width: 0 !important;
    display: block !important;
}

.pc-date-control-value,
.pc-time-control-value {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    color: var(--pc-temporal-text) !important;
    font-family: inherit !important;
    font-size: 11.5px !important;
    line-height: 1.2 !important;
    font-weight: 550 !important;
    font-variant-numeric: tabular-nums !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.pc-date-control:not(.has-value) .pc-date-control-value,
.pc-time-control:not(.has-value) .pc-time-control-value {
    color: var(--pc-temporal-muted) !important;
    font-weight: 500 !important;
}

.pc-date-control-hint {
    display: none !important;
}

.pc-date-control-chevron,
.pc-time-control-chevron {
    width: 14px !important;
    justify-self: end !important;
    color: #98a2b3 !important;
    font-size: 14px !important;
    line-height: 1 !important;
}

.pc-datetime-field {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) !important;
    gap: 8px !important;
    align-items: center !important;
}

/* Estados comunes de exploración y selección. */
.pc-datepicker-day:hover:not(:disabled),
.pc-datepicker-day:focus-visible,
.pc-timepicker-chip:hover,
.pc-timepicker-chip:focus-visible,
.pc-timepicker-quick:hover,
.pc-timepicker-quick:focus-visible {
    color: var(--pc-temporal-accent-ink) !important;
    border-color: rgba(223, 118, 20, .42) !important;
    background: var(--pc-temporal-accent-soft) !important;
    box-shadow: 0 0 0 3px var(--pc-temporal-accent-soft) !important;
}

.pc-datepicker-day.is-in-range {
    background: var(--pc-temporal-accent-range) !important;
    color: var(--pc-temporal-accent-ink) !important;
}

.pc-datepicker-day.is-range-start,
.pc-datepicker-day.is-range-end,
.pc-datepicker-day.is-selected,
.pc-timepicker-chip.is-selected,
.pc-timepicker-done {
    color: #fff !important;
    border-color: transparent !important;
    background: linear-gradient(135deg, #e99138, #c76c16) !important;
    box-shadow: 0 8px 20px rgba(199, 108, 22, .22) !important;
}

.pc-datepicker-day.is-today:not(.is-selected)::after {
    background: var(--pc-temporal-accent) !important;
}

/* El modal rápido conserva densidad especial sin romper el lenguaje global. */
#pietroEventModal.is-quick-create .pc-date-control,
#pietroEventModal.is-quick-create .pc-time-control,
#pietroEventModal:not(.is-quick-create) .pc-date-control,
#pietroEventModal:not(.is-quick-create) .pc-time-control {
    min-height: 34px !important;
    height: 34px !important;
    border-radius: var(--pc-temporal-radius) !important;
}

#pietroEventModal.is-quick-create .pc-date-control-icon {
    color: var(--pc-temporal-accent-dark) !important;
}

#pietroEventModal.is-quick-create .pc-date-control-value,
#pietroEventModal.is-quick-create .pc-time-control-value {
    color: var(--pc-temporal-text) !important;
    font-family: inherit !important;
    font-variant-numeric: tabular-nums !important;
}

@media (max-width: 720px) {
    .pc-datetime-field {
        grid-template-columns: 1fr !important;
    }
}