/* Tema Flatpickr — combina con la paleta oro+negro del proyecto (tokens.css).
   El input original queda oculto (Flatpickr lo pasa a type=hidden); el que se
   ve es el altInput generado, al que le copiamos las clases del input real
   (rp-input, ra-input, ca-input-fecha, etc.) más .wk-dp-alt para el ícono. */

.wk-dp-alt {
    /* Base propia: así se ve bien aunque el input original no tuviera
       ninguna clase de estilo (ej. Auditoría/Contingencia, <input type="date">
       sin class). Si el original SÍ tenía clase (rp-input, ra-input, etc.),
       esa clase se copia también y sus reglas (cargadas después en el HTML)
       ganan sobre esta base. */
    position: relative;
    display: inline-block;
    width: 100%;
    height: 34px;
    padding: 7px 32px 7px 11px;
    border-radius: 10px;
    border: 1px solid var(--wk-border-2, rgba(210, 205, 190, .55));
    background-color: var(--wk-surface-2, rgba(250, 249, 244, .8));
    color: var(--wk-text, #1a1a1a);
    font-size: 13px;
    font-family: inherit;
    outline: none;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' width='18' height='18' fill='%23d4af37'%3E%3Cpath d='M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    padding-right: 32px !important;
}
/* !important a propósito (mismo patrón que la flecha de <select> en app.css):
   cada página trae su propia clase de input (fx-input, rp-input, ra-input…) y
   varias declaran `background: <color>` en shorthand — eso resetea repeat/
   position/size a "repeat / 0% 0% / auto" aunque la clase no lo diga explícito,
   y el ícono termina mosaiqueado por todo el input. Pasa sobre todo en modo
   oscuro (`.dark .fx-input { background: rgba(...) }` tiene más especificidad
   que la regla base de .wk-dp-alt de arriba). */
.wk-dp-alt {
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 16px !important;
}
.wk-dp-alt:focus { border-color: var(--wk-text); box-shadow: 0 0 0 3px rgba(var(--wk-primary-rgb),.1); }
.wk-dp-alt::placeholder { color: var(--wk-text-3, #8a8782); }

html.dark .wk-dp-alt {
    border-color: var(--wk-border-2, rgba(255, 255, 255, .15));
    background-color: var(--wk-surface-2, rgba(20, 20, 20, .85));
    color: var(--wk-text, #f2f0ea);
}

html.dark .wk-dp-alt {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' width='18' height='18' fill='%23e3c25a'%3E%3Cpath d='M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Z'/%3E%3C/svg%3E");
}

/* ── Calendario emergente ─────────────────────────────────────── */
.flatpickr-calendar {
    background: var(--wk-surface, #fff);
    color: var(--wk-text, #1a1a1a);
    border: 1px solid var(--wk-border-2, rgba(0, 0, 0, .1));
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
    font-family: 'Figtree', system-ui, sans-serif;
    backdrop-filter: blur(6px);
}

.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after { border-bottom-color: var(--wk-surface-solid, #fff); }
.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after { border-top-color: var(--wk-surface-solid, #fff); }

.flatpickr-months { padding: 10px 6px 4px; }
.flatpickr-months .flatpickr-month { color: var(--wk-text, #1a1a1a); fill: var(--wk-text, #1a1a1a); }
.flatpickr-current-month { color: var(--wk-text, #1a1a1a); font-weight: 600; }
.flatpickr-current-month input.cur-year,
.flatpickr-current-month .flatpickr-monthDropdown-months {
    color: var(--wk-text, #1a1a1a);
    font-weight: 600;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover { background: var(--wk-primary-light, rgba(212,175,55,.14)); }

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    fill: var(--wk-text-2, #46443d);
    border-radius: 8px;
}
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover { fill: var(--wk-primary, #d4af37); }

span.flatpickr-weekday {
    color: var(--wk-text-3, #8a8782);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
}

.flatpickr-day {
    color: var(--wk-text, #1a1a1a);
    border-radius: 10px;
}
.flatpickr-day.today { border-color: var(--wk-primary, #d4af37); }
.flatpickr-day:hover,
.flatpickr-day:focus {
    background: var(--wk-primary-light, rgba(212,175,55,.14));
    border-color: var(--wk-primary-light, rgba(212,175,55,.14));
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--wk-primary, #d4af37);
    border-color: var(--wk-primary, #d4af37);
    color: var(--wk-on-primary, #171717);
    font-weight: 700;
}
.flatpickr-day.inRange {
    background: var(--wk-primary-light, rgba(212,175,55,.14));
    border-color: var(--wk-primary-light, rgba(212,175,55,.14));
    box-shadow: -5px 0 0 var(--wk-primary-light, rgba(212,175,55,.14)), 5px 0 0 var(--wk-primary-light, rgba(212,175,55,.14));
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay { color: var(--wk-text-4, #b5b1a8); }

.flatpickr-weekdays,
.flatpickr-innerContainer,
.flatpickr-rContainer { background: transparent; }

.flatpickr-months,
.flatpickr-weekdaycontainer,
.flatpickr-current-month {
    background: transparent;
}

.numInputWrapper span.arrowUp:after { border-bottom-color: var(--wk-text-2, #46443d); }
.numInputWrapper span.arrowDown:after { border-top-color: var(--wk-text-2, #46443d); }

.flatpickr-time { border-top: 1px solid var(--wk-border-2, rgba(0,0,0,.1)); }
.flatpickr-time input { color: var(--wk-text, #1a1a1a); }

/* ── Plugin monthSelect (Libro de IVA: <input type="month">) ────── */
.flatpickr-monthSelect-month {
    color: var(--wk-text, #1a1a1a);
    border-radius: 10px;
}
.flatpickr-monthSelect-month.flatpickr-disabled { color: var(--wk-text-4, #b5b1a8); }
.flatpickr-monthSelect-month:hover {
    background: var(--wk-primary-light, rgba(212,175,55,.14)) !important;
    color: var(--wk-text, #1a1a1a) !important;
}
.flatpickr-monthSelect-month.selected,
.flatpickr-monthSelect-month.selected:hover {
    background: var(--wk-primary, #d4af37) !important;
    color: var(--wk-on-primary, #171717) !important;
    font-weight: 700;
}