/* ============================================================================ TAHUA — Tema del selector de fechas flatpickr (Grafito & Ámbar). Consume var(--tahua-*) de tahua-brand.css. Dark bajo body.dark-mode. ============================================================================ */ .flatpickr-calendar.tahua-fp{ background: var(--tahua-card); border: 1px solid var(--tahua-line); border-radius: 14px; box-shadow: var(--tahua-shadow-lg); padding: 8px; width: auto; font-family: var(--tahua-sans); } .flatpickr-calendar.tahua-fp.arrowTop:before, .flatpickr-calendar.tahua-fp.arrowTop:after, .flatpickr-calendar.tahua-fp.arrowBottom:before, .flatpickr-calendar.tahua-fp.arrowBottom:after{ display:none; } /* --- barra de atajos --- */ .tahua-fp .tahua-fp-presets{ display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 6px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--tahua-line); } .tahua-fp .tahua-fp-preset{ font: inherit; font-size: 12.5px; font-weight: 600; color: var(--tahua-ink); background: var(--tahua-bg); border: 1px solid var(--tahua-line); border-radius: 999px; padding: 6px 12px; cursor: pointer; transition: all .14s ease; } .tahua-fp .tahua-fp-preset:hover{ background: var(--tahua-brand-soft); border-color: var(--tahua-brand); color: var(--tahua-ink); } /* --- cabecera de mes / navegación --- */ .tahua-fp .flatpickr-months .flatpickr-month{ color: var(--tahua-ink); } .tahua-fp .flatpickr-current-month .flatpickr-monthDropdown-months, .tahua-fp .flatpickr-current-month input.cur-year{ color: var(--tahua-ink); font-weight: 700; } .tahua-fp .flatpickr-monthDropdown-months{ background: var(--tahua-card); } .tahua-fp .flatpickr-prev-month svg, .tahua-fp .flatpickr-next-month svg{ fill: var(--tahua-muted); } .tahua-fp .flatpickr-prev-month:hover svg, .tahua-fp .flatpickr-next-month:hover svg{ fill: var(--tahua-brand); } .tahua-fp span.flatpickr-weekday{ color: var(--tahua-muted); font-weight: 600; } /* --- días --- */ .tahua-fp .flatpickr-day{ color: var(--tahua-ink); border-radius: 8px; border: 1px solid transparent; } .tahua-fp .flatpickr-day:hover{ background: var(--tahua-brand-soft); border-color: transparent; } .tahua-fp .flatpickr-day.today{ border-color: var(--tahua-brand); color: var(--tahua-ink); } .tahua-fp .flatpickr-day.flatpickr-disabled, .tahua-fp .flatpickr-day.prevMonthDay, .tahua-fp .flatpickr-day.nextMonthDay{ color: var(--tahua-muted); opacity: .5; } /* rango: extremos en oro, medio en oro-suave */ .tahua-fp .flatpickr-day.selected, .tahua-fp .flatpickr-day.startRange, .tahua-fp .flatpickr-day.endRange{ background: var(--tahua-brand); border-color: var(--tahua-brand); color: #14130F; font-weight: 700; } .tahua-fp .flatpickr-day.inRange{ background: var(--tahua-brand-soft); border-color: var(--tahua-brand-soft); color: var(--tahua-ink); box-shadow: -5px 0 0 var(--tahua-brand-soft), 5px 0 0 var(--tahua-brand-soft); } .tahua-fp .flatpickr-day.startRange.endRange{ border-radius: 8px; } /* dark: los tokens ya cambian bajo body.dark-mode; solo ajustamos tinta del extremo */ body.dark-mode .tahua-fp .flatpickr-day.selected, body.dark-mode .tahua-fp .flatpickr-day.startRange, body.dark-mode .tahua-fp .flatpickr-day.endRange{ color: #121212; } body.dark-mode .flatpickr-calendar.tahua-fp{ background: var(--tahua-card); } /* ============================================================================ TEMA bootstrap-datepicker (Grafito & Ámbar). Usado por el campo fecha del POS (input.form-control.date, main.blade.php). Se apenda a : body.dark-mode .datepicker cubre el oscuro. Anula el tema viejo (gradientes de bootstrap, morado #7c5cc4) por especificidad. ============================================================================ */ .datepicker.datepicker-dropdown{ background: var(--tahua-card); border: 1px solid var(--tahua-line); border-radius: 12px; box-shadow: var(--tahua-shadow-lg); padding: 10px; font-family: var(--tahua-sans); } .datepicker.datepicker-dropdown table{ margin: 0; } .datepicker.datepicker-dropdown.dropdown-menu:before, .datepicker.datepicker-dropdown.dropdown-menu:after{ border-bottom-color: transparent !important; display: none; } /* --- cabecera: mes/año y flechas prev/next --- */ .datepicker.datepicker-dropdown .datepicker-switch, .datepicker.datepicker-dropdown th.prev, .datepicker.datepicker-dropdown th.next{ color: var(--tahua-ink); background: transparent !important; border: none; font-weight: 700; } .datepicker.datepicker-dropdown .datepicker-switch:hover, .datepicker.datepicker-dropdown th.prev:hover, .datepicker.datepicker-dropdown th.next:hover{ background: var(--tahua-brand-soft) !important; color: var(--tahua-ink); border-radius: 8px; } .datepicker.datepicker-dropdown th.dow{ color: var(--tahua-muted); font-weight: 600; background: transparent !important; } /* --- celdas de día --- */ .datepicker.datepicker-dropdown table.table-condensed td.day{ color: var(--tahua-ink); background: transparent !important; background-image: none !important; border-radius: 8px; } .datepicker.datepicker-dropdown table.table-condensed td.day:hover{ background: var(--tahua-brand-soft) !important; background-image: none !important; color: var(--tahua-ink); } .datepicker.datepicker-dropdown table.table-condensed td.day.old, .datepicker.datepicker-dropdown table.table-condensed td.day.new{ color: var(--tahua-muted) !important; opacity: .5; } .datepicker.datepicker-dropdown table.table-condensed td.day.disabled, .datepicker.datepicker-dropdown table.table-condensed td.day.disabled:hover{ color: var(--tahua-muted) !important; opacity: .35; background: transparent !important; background-image: none !important; } .datepicker.datepicker-dropdown table.table-condensed td.day.today{ border: 1px solid var(--tahua-brand); background: transparent !important; background-image: none !important; color: var(--tahua-ink); } .datepicker.datepicker-dropdown table.table-condensed td.day.active, .datepicker.datepicker-dropdown table.table-condensed td.day.active:hover{ background: var(--tahua-brand) !important; background-image: none !important; color: #14130F !important; font-weight: 700; border-radius: 8px; text-shadow: none; } /* --- vistas de mes / año --- */ .datepicker.datepicker-dropdown table.table-condensed span.month, .datepicker.datepicker-dropdown table.table-condensed span.year{ color: var(--tahua-ink); background: transparent !important; background-image: none !important; border-radius: 8px; } .datepicker.datepicker-dropdown table.table-condensed span.month:hover, .datepicker.datepicker-dropdown table.table-condensed span.year:hover{ background: var(--tahua-brand-soft) !important; background-image: none !important; color: var(--tahua-ink); } .datepicker.datepicker-dropdown table.table-condensed span.month.active, .datepicker.datepicker-dropdown table.table-condensed span.year.active, .datepicker.datepicker-dropdown table.table-condensed span.month.focused, .datepicker.datepicker-dropdown table.table-condensed span.year.focused{ background: var(--tahua-brand) !important; background-image: none !important; color: #14130F !important; font-weight: 700; } /* --- dark: mismo card/line/ink de los tokens; solo la tinta del día activo cambia --- */ body.dark-mode .datepicker.datepicker-dropdown{ background: var(--tahua-card); border-color: var(--tahua-line); } body.dark-mode .datepicker.datepicker-dropdown table.table-condensed td.day.active, body.dark-mode .datepicker.datepicker-dropdown table.table-condensed td.day.active:hover, body.dark-mode .datepicker.datepicker-dropdown table.table-condensed span.month.active, body.dark-mode .datepicker.datepicker-dropdown table.table-condensed span.year.active{ color: #121212 !important; } /* ============================================================================ FIX rejilla del calendario (2026-08-25). El tema base (css/style.default.css, legado Bootstrap 3) define `.hidden{display:none!important}` y flatpickr usa ESA MISMA clase para los días del mes anterior/siguiente cuando muestra 2 meses, esperando que solo sean `visibility:hidden` (su propio CSS). Al colapsarlos con display:none desaparecían del flujo flex de .dayContainer y TODOS los meses arrancaban en lunes, con la última fila repartida por `justify-content:space-around`. Restauramos el contrato de flatpickr solo dentro del calendario. ============================================================================ */ .flatpickr-calendar .flatpickr-day.hidden{ display: inline-block !important; visibility: hidden !important; pointer-events: none; }