/* =========================================================

   SL Date Picker — calendario global (Flatpickr)

   ========================================================= */



.sl-date-wrap,

.cg-date-wrap {

    position: relative;

    width: 100%;

    display: block;

}



/* Contenedor externo (Pagos/Retiros) — un solo control integrado */

.pr-datebox,

.kpi-date-field {

    display: block;

    width: 100%;

}



.pr-datebox .sl-date-wrap,

.kpi-date-field .sl-date-wrap {

    width: 100%;

}



input.sl-date-alt-input,

.sl-fp-calendar .flatpickr-day,

.sl-fp-calendar .flatpickr-weekday,

.sl-fp-calendar .flatpickr-monthDropdown-months,

.sl-fp-calendar .numInputWrapper input {

    font-family: Inter, Segoe UI, system-ui, sans-serif;

}



/* Base: icono a la derecha del año (dentro del campo) */

.sl-date-wrap input.sl-date-input,

.sl-date-wrap input.sl-date-alt-input,

.cg-date-wrap input.sl-date-input {

    width: 100%;

    box-sizing: border-box;

    padding-right: 42px !important;

    font-variant-numeric: tabular-nums;

    letter-spacing: .06em;

}



/* Botón calendario — alineado verticalmente a la derecha del texto */

.sl-date-picker-btn,

.cg-date-picker-btn,

.sl-date-wrap .pr-datebtn,

.pr-datebox .sl-date-picker-btn,

.pr-datebox .pr-datebtn {

    position: absolute;

    top: 50%;

    right: 8px;

    transform: translateY(-50%);

    width: 32px;

    height: 32px;

    min-width: 32px;

    min-height: 32px;

    margin: 0;

    padding: 0;

    border-radius: 10px;

    border: 1px solid rgba(37, 99, 235, .16);

    background: linear-gradient(180deg, #ffffff, #eef4ff);

    z-index: 3;

    box-shadow: 0 4px 12px rgba(15, 23, 42, .08);

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    transition: transform .12s ease, box-shadow .12s ease;

}



.sl-date-picker-btn:hover,

.cg-date-picker-btn:hover {

    transform: translateY(-50%) scale(1.04);

    box-shadow: 0 8px 18px rgba(15, 23, 42, .12);

}



.sl-date-picker-btn:disabled {

    opacity: .55;

    cursor: not-allowed;

}



.sl-date-icon,

.cg-date-icon {

    font-size: 15px;

    line-height: 1;

    user-select: none;

    pointer-events: none;

}



/* —— Filtros (vendedor, banca, consultas): misma altura, fuente 1pt menor que el select —— */

.sl-date-wrap input.sl-date-input.cf-input,

.sl-date-wrap input.sl-date-input.cfxn-input,

.sl-date-wrap input.sl-date-input.cfd-input,

.sl-date-wrap input.sl-date-input.consulta-input,

.sl-date-wrap input.sl-date-input.pr-date,

.sl-date-wrap input.sl-date-input.cb-date,

.sl-date-wrap input.sl-date-input.cs-date,

.sl-date-wrap input.sl-date-input.cg-date-input,

.sl-date-wrap input.sl-date-input.kpi-date-input,

.sl-date-wrap input.sl-date-input.cg-date-text,

.sl-date-wrap input.sl-date-input.ganador-pro-date,

input.sl-date-input.cf-input {

    height: 42px;

    min-height: 42px;

    font-size: 0.92rem;

    font-weight: 800;

    padding: 10px 40px 10px 12px !important;

    border-radius: 12px;

}



.sl-date-wrap input.sl-date-input.consulta-input {

    height: 48px;

    min-height: 48px;

    font-size: 0.98rem;

    padding: 0 40px 0 14px !important;

    line-height: 48px;

    border-radius: 14px;

}



/* —— Ventas encabezado: como fv-date pero 1pt menor —— */

.sl-date-wrap input.sl-date-input.fv-date,

.sl-date-wrap input.sl-date-input.fv-date.fv-xl,

input.sl-date-input.fv-date.fv-xl {

    height: 56px !important;

    min-height: 56px;

    font-size: 1.25rem !important;

    font-weight: 900 !important;

    padding: 10px 44px 10px 14px !important;

    border-radius: 10px !important;

}



.sl-date-wrap input.sl-date-input.fv-date.fv-xl + .sl-date-picker-btn,

.sl-date-wrap input.sl-date-input.fv-date.fv-xl + .cg-date-picker-btn {

    width: 36px;

    height: 36px;

    right: 10px;

}



.sl-date-wrap input.sl-date-input.fv-date.fv-xl + .sl-date-picker-btn .sl-date-icon {

    font-size: 17px;

}



input.sl-date-alt-input:focus,

input.sl-date-input:focus {

    outline: none;

}



/* Ocultar input nativo type=date cuando Flatpickr usa altInput */

input[type="date"].sl-date-native-hidden {

    position: absolute !important;

    width: 1px !important;

    height: 1px !important;

    opacity: 0 !important;

    pointer-events: none !important;

    padding: 0 !important;

    border: 0 !important;

}



/* Calendario popup — siempre encima de modales (banca 99991, alertas) */

.sl-fp-calendar.flatpickr-calendar {

    width: min(360px, 94vw) !important;

    border-radius: 22px !important;

    border: 1px solid rgba(37, 99, 235, .18) !important;

    box-shadow: 0 28px 70px rgba(15, 23, 42, .22) !important;

    padding: 10px 8px 14px !important;

    background: #ffffff !important;

    z-index: 100010 !important;

    position: fixed !important;

}



.sl-fp-calendar .flatpickr-months {

    padding: 6px 4px 10px !important;

}



.sl-fp-calendar .flatpickr-current-month {

    font-size: 1.15rem !important;

    font-weight: 900 !important;

    color: #0f172a !important;

    padding-top: 4px !important;

}



.sl-fp-calendar .flatpickr-monthDropdown-months,

.sl-fp-calendar .numInputWrapper input {

    font-size: 1.05rem !important;

    font-weight: 900 !important;

}



.sl-fp-calendar .flatpickr-weekdays {
    margin-top: 4px !important;
    display: flex !important;
    width: 100% !important;
}

.sl-fp-calendar span.flatpickr-weekday {
    font-size: .82rem !important;
    font-weight: 900 !important;
    color: #64748b !important;
    flex: 0 0 14.2857143% !important;
    width: 14.2857143% !important;
    max-width: 14.2857143% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.sl-fp-calendar .flatpickr-days {
    width: 100% !important;
}

.sl-fp-calendar .flatpickr-days .dayContainer {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
}

.sl-fp-calendar .flatpickr-day {
    font-size: .95rem !important;
    font-weight: 800 !important;
    border-radius: 12px !important;
    flex: 0 0 14.2857143% !important;
    width: 14.2857143% !important;
    max-width: 14.2857143% !important;
    height: 40px !important;
    line-height: 40px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}



.sl-fp-calendar .flatpickr-day.selected,

.sl-fp-calendar .flatpickr-day.startRange,

.sl-fp-calendar .flatpickr-day.endRange {

    background: #2563eb !important;

    border-color: #2563eb !important;

    color: #fff !important;

}



.sl-fp-calendar .flatpickr-day.today {

    border-color: rgba(37, 99, 235, .45) !important;

}



.sl-fp-calendar .flatpickr-prev-month,

.sl-fp-calendar .flatpickr-next-month {

    padding: 8px !important;

}



.sl-fp-calendar .flatpickr-prev-month svg,

.sl-fp-calendar .flatpickr-next-month svg {

    width: 16px !important;

    height: 16px !important;

}



/* —— Campos compactos (consultas banca, listas, históricos) —— */

.sl-date-wrap.sl-date-field-compact,

.cg-date-wrap.sl-date-field-compact,

.cb-field-fecha .sl-date-wrap,

.cf-block:not(.cf-grow) .sl-date-wrap,

.cfd-block:not(.cfd-grow) .sl-date-wrap,

.cfxn-field .sl-date-wrap,
.cfxn-filtros .sl-date-wrap,

.listas-fecha-control .sl-date-wrap {

    width: auto;

    max-width: 220px;

    min-width: 168px;

    display: inline-flex;

    flex: 0 0 auto;

}



.sl-date-wrap.sl-date-field-compact input.sl-date-input,

.cg-date-wrap.sl-date-field-compact input.sl-date-input,

.cg-date-field .sl-date-wrap.sl-date-field-compact input.sl-date-input,

.cb-field-fecha .sl-date-wrap input.sl-date-input,

.cf-block:not(.cf-grow) .sl-date-wrap input.sl-date-input,

.cfd-block:not(.cfd-grow) .sl-date-wrap input.sl-date-input,

.cfxn-filtros .sl-date-wrap input.sl-date-input,

.listas-fecha-control .sl-date-wrap input.sl-date-input {

    width: 100%;

    min-width: 0;

}



/* Listas editor — mismo look que consultas banca (cb-date / cf-input) */

.sl-date-wrap input.sl-date-input.listas-sl-date,

.listas-fecha-control .sl-date-wrap input.sl-date-input.listas-sl-date,

.listas-fecha-control .sl-date-wrap input.sl-date-input.cb-date {

    height: 42px;

    min-height: 42px;

    font-size: 0.92rem;

    font-weight: 800;

    padding: 10px 40px 10px 12px !important;

    border-radius: 12px;

    border: 1px solid rgba(18, 83, 163, 0.2);

    background: #fbfdff;

    color: #0f1b2d;

    box-shadow: 0 10px 18px rgba(15, 23, 42, 0.06);

    box-sizing: border-box;

}



.listas-fecha-control .sl-date-wrap .cg-date-picker-btn,

.listas-fecha-control .sl-date-wrap .sl-date-picker-btn {

    border-radius: 10px;

}



/* Modales reimpresión / jala / borrar tiquete */

.rt-field.rt-date .sl-date-wrap {

    width: 100%;

    min-width: 0;

}



.rt-field.rt-date .sl-date-wrap input.sl-date-input.rt-input {

    width: 100%;

    min-height: 42px;

    font-size: 0.95rem;

    font-weight: 700;

    padding: 10px 42px 10px 12px !important;

    border-radius: 10px;

    border: 1px solid rgba(37, 99, 235, 0.28);

    background: #fff;

    color: #0f172a;

    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);

}



.rt-field.rt-date .sl-date-wrap .cg-date-picker-btn {

    width: 34px;

    height: 34px;

    border-radius: 8px;

}