@charset "UTF-8"; /* ============================================================================================= CALENDARIO (vanillajs-datepicker) — PIEL DEL DESIGN SYSTEM ============================================================================================= Enrique 2026-08-17: "hay que modernizar el datepicker". Lo que se veía era la hoja de la librería tal cual: cabecera con « / » y el mes en gris, rejilla apretada, el día de hoy en un verde agua (hsl(171,100%,41%)) que no existe en ninguna otra parte del portal, el seleccionado en el azul de Bulma y los botones "Hoy"/"Borrar" con borde gris de Bootstrap crudo. Junto a los chips, las cabeceras tematizadas y los menús de fila que ya llevamos, desentonaba. ESTA HOJA SE CARGA DESPUÉS de /vanillajs-datepicker/datepicker.css (ver comun/head :: datepicker) a propósito: los overrides ganan por ORDEN de cascada, así que aquí basta con repetir el mismo selector y no hay que inflar la especificidad ni usar !important. COLOR: `--dp-color` se la cuelga portal.js al desplegar (`pintaCalendarioConColorDeSeccion`), leyendo el `--piv6-card-head` RESUELTO en el contexto del input. Hace falta porque el calendario cuelga del y no hereda nada de la tarjeta que lo abrió. El respaldo es el color del tenant y, si no, el primario de Bootstrap: nunca se queda sin color. ALCANCE: el datepicker es COMPARTIDO (filtros de fecha de todas las consultas, formas de alta, flujo de pagos). Esto es sólo piel —colores, tipografía, radios y espaciados—: no toca el markup, ni las opciones de la librería (formato, idioma, botones Hoy/Borrar, números de semana), ni el comportamiento. Ninguna pantalla cambia de conducta, todas cambian de aspecto. ============================================================================================= */ .datepicker { --dp-color: var(--piv6-card-head, var(--tema-color, var(--bs-primary, #0d6efd))); --dp-texto: #212529; --dp-tenue: #6c757d; --dp-borde: #e4e7eb; --dp-radio: 10px; } /* ---------- LA TARJETA ---------- */ .datepicker-picker { border-radius: var(--dp-radio); overflow: hidden; /* para que el título respete las esquinas */ font-family: inherit; } .datepicker-dropdown .datepicker-picker { /* Sombra de tarjeta flotante, no el doble contorno de 1px de la librería. */ box-shadow: 0 .5rem 1.5rem rgba(16, 24, 40, .18), 0 0 0 1px var(--dp-borde); } /* ---------- TÍTULO (el nombre del campo) ---------- */ /* Era gris sobre gris y no se leía como cabecera de nada. Ahora es la banda de sección, igual que el encabezado del menú de fila y el de la tarjeta de página. */ .datepicker-title { box-shadow: none; background: color-mix(in srgb, var(--dp-color) 58%, #000); color: #fff; padding: .45rem .75rem; font-size: .82rem; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; } /* ---------- CABECERA: mes/año y navegación ---------- */ .datepicker-header .datepicker-controls { padding: .4rem .4rem .1rem; gap: .2rem; } .datepicker-controls .button { border-radius: 8px; height: 2rem; font-size: .92rem; font-family: inherit; color: var(--dp-texto); } /* El mes y año EN NEGRO Y EN GRANDE: es el dato con el que se navega, no una etiqueta. */ .datepicker-header .datepicker-controls .view-switch { font-weight: 700; font-size: .95rem; color: var(--dp-texto); text-transform: capitalize; } .datepicker-header .datepicker-controls .button:hover { background: color-mix(in srgb, var(--dp-color) 10%, #fff); color: color-mix(in srgb, var(--dp-color) 75%, #000); } .datepicker-header .datepicker-controls .button:active { background: color-mix(in srgb, var(--dp-color) 18%, #fff); } .datepicker-controls .button:focus { border-color: transparent; outline: 2px solid color-mix(in srgb, var(--dp-color) 45%, transparent); outline-offset: -2px; } .datepicker-controls .button:focus:not(:active) { box-shadow: none; } /* « y » -> chevrones de bootstrap-icons, que es la familia de iconos del portal. El texto de la librería se oculta con `font-size:0` (no con `text-indent`, que descoloca el glifo) y el glifo entra por ::before con su propio tamaño. */ .datepicker-controls .prev-button, .datepicker-controls .next-button { font-size: 0; color: var(--dp-tenue); } .datepicker-controls .prev-button::before, .datepicker-controls .next-button::before { font-family: bootstrap-icons !important; font-size: 1rem; line-height: 1; font-weight: normal; } .datepicker-controls .prev-button::before { content: "\F284"; } .datepicker-controls .next-button::before { content: "\F285"; } /* ---------- REJILLA ---------- */ .datepicker-main { padding: .35rem .5rem .1rem; } /* Los días de la semana como rótulo, no como dato: chiquitos, en versalitas y tenues. */ .datepicker .dow { height: 1.35rem; font-size: .68rem; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--dp-tenue); } .datepicker-cell { height: 2rem; border-radius: 8px; font-size: .9rem; transition: background-color .12s ease, color .12s ease; } .datepicker-cell:not(.disabled):hover { background: color-mix(in srgb, var(--dp-color) 12%, #fff); color: color-mix(in srgb, var(--dp-color) 78%, #000); } .datepicker-cell.focused:not(.selected) { background: color-mix(in srgb, var(--dp-color) 16%, #fff); } .datepicker-cell.prev:not(.disabled), .datepicker-cell.next:not(.disabled) { color: #adb5bd; } .datepicker-cell.disabled { color: #dee2e6; } /* HOY: el mismo lenguaje que los chips del portal —contorno y texto en el color, sin relleno—. El relleno se reserva para la selección, que es la que el usuario decide. Antes era un bloque verde agua que competía con el día elegido y no significaba nada en la paleta. */ .datepicker-cell.today:not(.selected) { background: color-mix(in srgb, var(--dp-color) 8%, #fff); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--dp-color) 55%, #fff); color: color-mix(in srgb, var(--dp-color) 80%, #000); font-weight: 700; } .datepicker-cell.today:not(.selected):not(.disabled) { color: color-mix(in srgb, var(--dp-color) 80%, #000); } .datepicker-cell.today.focused:not(.selected) { background: color-mix(in srgb, var(--dp-color) 16%, #fff); } /* SELECCIONADO: relleno pleno del color de sección. */ .datepicker-cell.selected, .datepicker-cell.selected:hover { background: color-mix(in srgb, var(--dp-color) 72%, #000); color: #fff; font-weight: 700; } .datepicker-cell.prev.selected, .datepicker-cell.next.selected { color: rgba(255, 255, 255, .75); } /* RANGO (filtros de las consultas: desde/hasta): el tramo intermedio tintado y los extremos con el relleno del color, en vez del gris "gainsboro" de la librería. */ .datepicker-cell.range { background: color-mix(in srgb, var(--dp-color) 14%, #fff); border-radius: 0; } .datepicker-cell.range:not(.disabled):not(.focused):not(.today):hover { background: color-mix(in srgb, var(--dp-color) 22%, #fff); } .datepicker-cell.range.focused { background: color-mix(in srgb, var(--dp-color) 26%, #fff); } .datepicker-cell.range-start:not(.selected), .datepicker-cell.range-end:not(.selected) { background: color-mix(in srgb, var(--dp-color) 55%, #000); color: #fff; } .datepicker-cell.range-start:not(.range-end) { border-radius: 8px 0 0 8px; } .datepicker-cell.range-end:not(.range-start) { border-radius: 0 8px 8px 0; } /* NÚMERO DE SEMANA: es una referencia de apoyo, no un dato del calendario. Se queda (la opción `weekNumbers` la fija portal.js y es compartida), pero deja de competir: más chico, más tenue y separado de los días por una línea, para que no se lea como una columna más de la rejilla. */ .datepicker .week-numbers { margin-right: .15rem; } .datepicker .week { font-size: .62rem; font-weight: 600; color: #c3c8ce; border-right: 1px solid var(--dp-borde); } /* ---------- PIE: Hoy / Borrar ---------- */ /* Eran dos botones grises idénticos, sin jerarquía y con el borde de Bootstrap crudo. "Hoy" es la acción útil (rellena) y "Borrar" es destructiva y secundaria (discreta, se enciende en rojo al pasar por encima). Van en ese orden porque es el que emite la librería. */ .datepicker-footer { box-shadow: none; background: #f8f9fa; border-top: 1px solid var(--dp-borde); } .datepicker-footer .datepicker-controls { gap: .35rem; padding: 0 .15rem; } .datepicker-footer .datepicker-controls .button { margin: .4rem .25rem; border-radius: 8px; height: 1.9rem; font-size: .78rem; font-weight: 600; letter-spacing: .2px; } .datepicker-footer .datepicker-controls .today-button { border-color: transparent; background: color-mix(in srgb, var(--dp-color) 72%, #000); color: #fff; } .datepicker-footer .datepicker-controls .today-button:hover { background: color-mix(in srgb, var(--dp-color) 82%, #000); color: #fff; } .datepicker-footer .datepicker-controls .today-button[disabled] { background: #dee2e6; color: #adb5bd; } .datepicker-footer .datepicker-controls .clear-button { border-color: var(--dp-borde); background: #fff; color: var(--dp-tenue); } .datepicker-footer .datepicker-controls .clear-button:hover { border-color: #f1aeb5; background: #fff5f5; color: #b02a37; } /* ---------- EL INPUT EN EDICIÓN ---------- */ /* El azul fijo de la librería sobre un campo que ya está tematizado por la sección. */ .datepicker-input.in-edit { border-color: color-mix(in srgb, var(--dp-color) 60%, #dee2e6); } .datepicker-input.in-edit:focus, .datepicker-input.in-edit:active { box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--dp-color) 25%, transparent); }