/* ════════════════════════════════════════════════════════════════════════ SUN MODE — Asignación de Cuadrillas (y resto del módulo logístico). Especificación visual: docs/app/Sun Mode - Asignacion de Cuadrillas.html Activación: FOUC guard: inline script en base.html lee localStorage 'theme' y aplica data-theme antes del primer paint. ARQUITECTURA ============ Este archivo SOLO redefine CSS variables en el scope `[data-theme="sun"]`. No tiene reglas selector-específicas (ej. `.pi-kpi { ... }`). Todas las clases del proyecto usan `var(--token)` y heredan automáticamente los valores del theme activo. Sin selectores específicos = sin specificity wars con los CSS de módulos cargados después. El refactor previo (de hex/rgba hardcoded → var(--token)) vive en los archivos de cada módulo (pedido-shared.css, pedido-table.css, etc.) en bloques `:root` — esos son los DEFAULTS dark mode. Sun mode los pisa acá. PRINCIPIOS (ver doc para detalle) ───────────────────────────────── 1. Anti-glare: bg crema #EFE9DD (no blanco puro) 2. Contraste ≥ 7:1 en datos críticos (text-primary / canvas) 3. Touch targets ≥ 44px en hit areas 4. Tipografía +20% vs dark 5. Borde > sombra (sombras invisibles al sol) 6. Brand red preservado pero darkened para AA (#B22130) ════════════════════════════════════════════════════════════════════════ */ /* ────────────────────────────────────────────────────────────────────── 1) TOKENS DE COLOR — Surfaces, Text, Lines, Brand, States ────────────────────────────────────────────────────────────────────── */ [data-theme="sun"] { /* Surfaces */ --bg-canvas: #EFE9DD; /* warm paper, anti-glare */ --bg-surface: #FFFFFF; /* cards, table, popovers */ --bg-elevated: #F7F2E7; /* hover, table head, pill bg */ --bg-muted: #E8E2D3; /* tracks, count badges */ --bg-hover: #F0E9DA; /* Chrome (sidebar + topbar): tonos distintivos para que el chrome de navegación se diferencie del content area sin romper anti-glare. 3 niveles: body cream < sidebar darker cream < topbar white. --chrome-sidebar: #E5DCC8 — paper aged, más oscuro que canvas --chrome-sidebar-hover: tono intermedio para hover/active subtle --chrome-sidebar-active-bg: rojo muy diluido para active item */ --chrome-sidebar: #E5DCC8; --chrome-sidebar-hover: #D8CFB8; --chrome-sidebar-elevated: #DDD3BC; /* search, dropdown, badges en sidebar */ --chrome-topbar: #FFFFFF; /* Text */ --text-primary: #15181E; /* 14.6:1 on canvas — datos, headings, KPI values */ --text-secondary: #3A4452; /* 8.7:1 — subtítulos, body text */ --text-tertiary: #6B7384; /* 4.6:1 AA ≥14px — labels caps, hints, placeholders */ --text-muted: #8E95A4; /* deshabilitado, meta no-crítica */ --text-inverse: #FFFFFF; /* Lines */ --border-subtle: #E0D7C3; /* divisores entre filas dentro de la misma card */ --border-default: #C9C0AB; /* bordes de cards, inputs, botones */ --border-strong: #9F977F; /* hover de bordes interactivos */ --border-focus: #B22130; /* anillo de foco accesible */ /* Brand accent */ --accent: #B22130; /* Emser red darkened (de #E63946) para AA */ --accent-hover: #931A26; --accent-soft-bg: #FBE9EB; --accent-soft-bd: #E9B7BD; /* States — TODOS pasan AA sobre canvas y surface */ --state-danger: #B42318; --state-danger-bg: #FBEAE5; --state-danger-bd: #E9B5A8; --state-warning: #92400E; /* amber-700, NO el #fbbf24 del dark (no pasa AA) */ --state-warning-bg: #FCEBC1; --state-warning-bd: #E6C887; --state-success: #15803D; /* green-700 */ --state-success-bg: #D6F1DD; --state-success-bd: #A0D5AE; --state-info: #1849A9; --state-info-bg: #DCE7F8; --state-info-bd: #A8C0E5; --state-violet: #5B2EAB; --state-violet-bg: #E8DEF8; --state-violet-bd: #C2ABE5; /* Shadows — más suaves bajo sol; nada de glow */ --shadow-sm: 0 1px 2px rgba(20, 24, 31, .06); --shadow-md: 0 4px 12px rgba(20, 24, 31, .08), 0 1px 2px rgba(20, 24, 31, .04); --shadow-lg: 0 8px 24px rgba(20, 24, 31, .10), 0 1px 2px rgba(20, 24, 31, .04); } /* ────────────────────────────────────────────────────────────────────── 2.bis) THEME TRANSITION OVERLAY — blur full-screen al togglear theme Cuando el user clickea el toggle sun/dark, dispara un overlay fixed que cubre TODO el viewport (incluyendo sidebar/topbar/ bottom-nav) con blur + ícono SVG centrado. Transmite sensación de _'la plataforma está cambiando colorimetría'_ y oculta cualquier transición CSS jank al swap del data-theme. Sin scope `[data-theme]` — el overlay aparece en AMBOS sentidos (dark→sun y sun→dark). Bg crema neutro funciona en ambos. Duración total ~1.5s: 250ms fade-in + 1000ms hold + 250ms fade-out. El theme swap se aplica a 250ms (cuando overlay está full visible), así el cambio de colores ocurre OCULTO detrás del blur. A11y: respeta `prefers-reduced-motion` → animación skipped. ────────────────────────────────────────────────────────────────────── */ .theme-overlay { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; background: rgba(245, 241, 232, .55); backdrop-filter: blur(10px) saturate(120%); -webkit-backdrop-filter: blur(10px) saturate(120%); opacity: 0; transition: opacity .25s cubic-bezier(.16, 1, .3, 1); pointer-events: none; } .theme-overlay.is-visible { opacity: 1; } .theme-overlay__icon { width: clamp(220px, 26vw, 360px); height: auto; filter: drop-shadow(0 12px 32px rgba(20, 24, 31, .18)); transform: scale(.94); transition: transform .35s cubic-bezier(.16, 1, .3, 1); } .theme-overlay.is-visible .theme-overlay__icon { transform: scale(1); animation: themeOverlayPulse 1.4s ease-in-out infinite; } @keyframes themeOverlayPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } } .theme-overlay__hint { position: absolute; bottom: clamp(60px, 12vh, 120px); left: 50%; transform: translateX(-50%); font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; color: rgba(20, 24, 31, .6); letter-spacing: .02em; text-transform: uppercase; text-align: center; pointer-events: none; } /* A11y: usuarios con reduce-motion preference no quieren animaciones. Saltea el overlay completo — el theme cambia instantáneo. */ @media (prefers-reduced-motion: reduce) { .theme-overlay { display: none !important; } } /* ────────────────────────────────────────────────────────────────────── 2) ESCALA TIPOGRÁFICA — Sun bumps body +20% vs dark ────────────────────────────────────────────────────────────────────── */ [data-theme="sun"] { --fs-kpi-value: 36px; /* dark: 28 */ --fs-page-title: 24px; /* dark: 20 */ --fs-widget: 15px; /* dark: 13 */ --fs-body: 14px; /* dark: 12.5 */ --fs-body-sm: 13px; /* dark: 11.5 */ --fs-label-caps: 11.5px; /* dark: 10.5 */ --fs-mono: 13px; /* dark: 11.5 */ } /* ────────────────────────────────────────────────────────────────────── 3) SHELL COMPONENTS — gl-card (panel container) `.gl-card` vive inline en `modelo_generico_list_paginado.html` y es el wrapper PADRE de la tabla en módulos genéricos (Asignación, Pedidos, Empleados, etc.). En dark tiene un linear-gradient navy que en sun mode se ve como un panel oscuro detrás de la tabla (que ahora es cream/blanca). Override acá para quitar el gradient y poner cream para que sea consistente con el page shell. ────────────────────────────────────────────────────────────────────── */ [data-theme="sun"] .gl-card { background: var(--bg-canvas) !important; border: 1px solid var(--border-default); box-shadow: var(--shadow-sm); } [data-theme="sun"] .gl-card::before { display: none; } /* ── Filter drawer (#drawer1) ───────────────────────────────────────── En dark, el drawer cerrado (sin `.active`, off-screen via translateX) no se nota porque su sombra negra `-8px 0 40px rgba(0,0,0,.35)` es invisible sobre el bg dark navy. En sun mode (bg cream), esa sombra negra queda visible como una "card fantasma" pegada al borde derecho. Fix: sombra solo cuando `.active` (drawer visible). Cuando cerrado: sin sombra. Bonus: tinting cream del drawer cuando está abierto, para coherencia visual. */ [data-theme="sun"] #drawer1 { box-shadow: none !important; background: var(--bg-surface) !important; border-left: 1px solid var(--border-default); color: var(--text-primary); } [data-theme="sun"] #drawer1.active { box-shadow: -8px 0 40px rgba(20, 24, 31, .12), -1px 0 0 var(--border-default) !important; } /* ────────────────────────────────────────────────────────────────────── 4) LEAFLET MAP CONTROLS — zoom +/- + attribution Leaflet renderiza sus propios controles via leaflet.css con look dark (azul oscuro). En sun mode los pasamos al lenguaje del spec: bg blanco, border slate, texto negro. El TILE LAYER ya cambia a Carto Voyager (light) via JS — esto cubre los botones encima. NOTA SPECIFICITY: pedido-shared.css tiene `.pi-map .leaflet-control-zoom a` con `!important` (specificity 0,0,2,1). Mis overrides necesitan MATCHEAR ese mismo selector + agregar el prefix `[data-theme="sun"]` + `!important` para vencer (0,0,3,1). Sin la chain `.pi-map ...`, perdía por specificity y el azul dark seguía visible. ────────────────────────────────────────────────────────────────────── */ [data-theme="sun"] .pi-map .leaflet-control-zoom.leaflet-bar { background: var(--bg-surface) !important; border: 1px solid var(--border-default) !important; box-shadow: var(--shadow-sm) !important; } [data-theme="sun"] .pi-map .leaflet-control-zoom a { background: var(--bg-surface) !important; color: var(--text-primary) !important; border: 1px solid var(--border-default) !important; font-weight: 700; } [data-theme="sun"] .pi-map .leaflet-control-zoom a:hover { background: var(--bg-hover) !important; color: var(--accent) !important; } [data-theme="sun"] .pi-map .leaflet-control-zoom a.leaflet-disabled { background: var(--bg-elevated) !important; color: var(--text-muted) !important; } /* Attribution box (esquina inferior derecha: "Leaflet | © CARTO · OSM") */ [data-theme="sun"] .pi-map .leaflet-control-attribution { background: rgba(255, 255, 255, .85) !important; color: var(--text-secondary) !important; } [data-theme="sun"] .pi-map .leaflet-control-attribution a { color: var(--state-info) !important; } /* ────────────────────────────────────────────────────────────────────── 5) THEME TOGGLE BUTTON — feedback visual en topbar El topbar (gen-topbar) se mantiene DARK siempre (scope pilot). Cuando sun mode activo (aria-pressed="true"), tintamos el botón en ámbar ligero para que el user vea claramente _'estás en sun mode'_. ────────────────────────────────────────────────────────────────────── */ [data-theme="sun"] .gen-theme-toggle { color: #fbbf24; background: rgba(251, 191, 36, .12); border-color: rgba(251, 191, 36, .35); } [data-theme="sun"] .gen-theme-toggle:hover { color: #fbbf24; background: rgba(251, 191, 36, .18); border-color: rgba(251, 191, 36, .55); }