/** * FechaSelector — estilos del calendario propio (ver js/fecha_selector.js). * Compatible con el tema oscuro del webmail (clase .wm-dark en ). * * Los colores salen de variables: por defecto el granate de la casa, pero quien * incruste el calendario puede fijar los suyos sin tocar este fichero. Lo hace el * filtro de tablas, que conserva su azul de siempre (css/tabla-filtros-excel.css). */ :root { --fs-acento: #8c3345; /* dia elegido y extremos del rango */ --fs-acento-oscuro: #6b2533; --fs-rango: #f3e3e8; /* dias intermedios */ --fs-suave: #f0dde3; /* hover */ } /* Disparador: parece un input, se comporta como un botón */ .fs-trigger { display: inline-flex; align-items: center; gap: .4rem; min-width: 150px; text-align: left; border: 1px solid #e5e7eb; border-radius: .375rem; padding: .35rem .6rem; font-size: .875rem; color: #1f2937; background: #fff; cursor: pointer; transition: border-color .12s ease, box-shadow .12s ease; } .fs-trigger::before { content: ''; width: 15px; height: 15px; flex: 0 0 15px; opacity: .55; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c3345' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E"); } .fs-trigger:hover { border-color: #cbb2b9; } .fs-trigger:focus-visible { outline: none; border-color: var(--fs-acento); box-shadow: 0 0 0 3px rgba(140, 51, 69, .15); } .fs-trigger.vacio { color: #9ca3af; } /* Panel flotante */ .fs-panel { position: fixed; z-index: 90; width: 264px; background: #fff; border: 1px solid #e5e7eb; border-radius: .5rem; box-shadow: 0 12px 32px rgba(0, 0, 0, .18); padding: 10px; font-size: .8rem; color: #1f2937; } .fs-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .fs-nav strong { font-size: .82rem; } .fs-nav button { border: 0; background: none; cursor: pointer; color: var(--fs-acento); font-size: 1.1rem; line-height: 1; padding: 2px 8px; border-radius: 4px; } .fs-nav button:hover { background: var(--fs-suave); } .fs-dow, .fs-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .fs-dow { margin-bottom: 2px; } .fs-dow div { text-align: center; font-size: .7rem; color: #9ca3af; } .fs-d { text-align: center; padding: 5px 0; border-radius: 4px; cursor: pointer; transition: background .1s ease; } .fs-d:hover { background: var(--fs-suave); } .fs-d.en-rango { background: var(--fs-rango); } .fs-d.extremo { background: var(--fs-acento); color: #fff; font-weight: 600; } .fs-d.hoy { box-shadow: inset 0 0 0 1px var(--fs-acento); } .fs-d:focus-visible { outline: 2px solid var(--fs-acento); outline-offset: -2px; } .fs-resumen { margin-top: 8px; padding-top: 6px; border-top: 1px solid #f3f4f6; font-size: .72rem; color: #6b7280; } .fs-resumen strong { color: #1f2937; } .fs-hora { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #f3f4f6; } .fs-hora span { color: #6b7280; } .fs-hora b { color: #9ca3af; } .fs-hora select { border: 1px solid #e5e7eb; border-radius: 4px; padding: 3px 4px; font-size: .8rem; background: #fff; color: #1f2937; } .fs-hora select:focus { outline: none; border-color: var(--fs-acento); } .fs-acciones { display: flex; gap: 6px; justify-content: flex-end; margin-top: 10px; } .fs-acciones button { border: 1px solid #e5e7eb; background: #fff; color: #6b7280; border-radius: 999px; padding: .25rem .75rem; font-size: .75rem; cursor: pointer; } .fs-acciones button:hover { background: #f9fafb; } .fs-acciones button.primaria { background: var(--fs-acento); border-color: var(--fs-acento); color: #fff; font-weight: 600; } .fs-acciones button.primaria:hover { background: var(--fs-acento-oscuro); } /* ---------- Tema oscuro (webmail) ---------- */ html.wm-dark .fs-trigger { background: #171a1e; border-color: #3a4149; color: #e5e7eb; } html.wm-dark .fs-trigger.vacio { color: #6b7481; } html.wm-dark .fs-trigger:hover { border-color: #c66d80; } html.wm-dark .fs-panel { background: #20242a; border-color: #343b44; color: #e5e7eb; box-shadow: 0 12px 32px rgba(0, 0, 0, .5); } html.wm-dark .fs-nav button { color: #e8a3b1; } html.wm-dark .fs-nav button:hover { background: #3a2a30; } html.wm-dark .fs-dow div { color: #828c99; } html.wm-dark .fs-d:hover { background: #3a2a30; } html.wm-dark .fs-d.en-rango { background: #3a2a30; } html.wm-dark .fs-d.extremo { background: #8c3345; color: #fff; } html.wm-dark .fs-d.hoy { box-shadow: inset 0 0 0 1px #e8a3b1; } html.wm-dark .fs-resumen { border-top-color: #2b3138; color: #9aa4b0; } html.wm-dark .fs-resumen strong { color: #e5e7eb; } html.wm-dark .fs-hora { border-top-color: #2b3138; } html.wm-dark .fs-hora span, html.wm-dark .fs-hora b { color: #9aa4b0; } html.wm-dark .fs-hora select { background: #171a1e; border-color: #3a4149; color: #e5e7eb; } html.wm-dark .fs-acciones button { background: #262b31; border-color: #3a4149; color: #c9d1d9; } html.wm-dark .fs-acciones button:hover { background: #2f353d; } html.wm-dark .fs-acciones button.primaria { background: #8c3345; border-color: #a94b5f; color: #fff; } @media (prefers-reduced-motion: reduce) { .fs-trigger, .fs-d { transition: none; } }