/* ============================================================================= theme.light.css — Light mode overrides Applies when is set. Uses !important where needed to override Tailwind utilities and inline styles. ============================================================================= */ /* ── Body & root ─────────────────────────────────────────────────────────────── */ html.light, html.light body { background-color: #f0f4fb !important; color: #1a1c2e !important; } /* ── Tailwind surface color overrides ───────────────────────────────────────── */ html.light .bg-surface { background-color: #f8faff !important; } html.light .bg-surface-dim { background-color: #d8dceb !important; } html.light .bg-surface-bright { background-color: #ffffff !important; } html.light .bg-background { background-color: #f0f4fb !important; } html.light .bg-surface-container-lowest { background-color: #ffffff !important; } html.light .bg-surface-container-low { background-color: #edf1fa !important; } html.light .bg-surface-container { background-color: #e7ebf5 !important; } html.light .bg-surface-container-high { background-color: #e1e5ef !important; } html.light .bg-surface-container-highest { background-color: #dbe0ea !important; } html.light .bg-surface-variant { background-color: #dce3f0 !important; } html.light .bg-error { background-color: #ba1a1a !important; } html.light .bg-error-dim\/20 { background-color: rgba(186,26,26,0.12) !important; } /* ── Tailwind text color overrides ──────────────────────────────────────────── */ html.light .text-on-surface { color: #1a1c2e !important; } html.light .text-on-surface-variant { color: #44475a !important; } html.light .text-on-background { color: #1a1c2e !important; } /* Fractional opacity variants */ html.light .text-on-surface\/90 { color: rgba(26, 28, 46, 0.90) !important; } html.light .text-on-surface\/80 { color: rgba(26, 28, 46, 0.80) !important; } html.light .text-on-surface\/70 { color: rgba(26, 28, 46, 0.70) !important; } html.light .text-primary { color: #006977 !important; } html.light .text-secondary { color: #006c49 !important; } html.light .text-tertiary { color: #7039b1 !important; } html.light .text-error { color: #ba1a1a !important; } html.light .text-on-primary { color: #ffffff !important; } html.light .text-cyan-400 { color: #0284c7 !important; } html.light .text-slate-300 { color: #374151 !important; } html.light .text-slate-400 { color: #4b5563 !important; } html.light .text-slate-500 { color: #6b7280 !important; } html.light .text-white { color: #1a1c2e !important; } /* ── Tailwind border color overrides ────────────────────────────────────────── */ html.light .border-outline-variant\/30 { border-color: rgba(196, 198, 212, 0.6) !important; } html.light .border-outline-variant\/20 { border-color: rgba(196, 198, 212, 0.4) !important; } html.light .border-outline-variant { border-color: #c4c6d4 !important; } html.light .border-white\/5 { border-color: rgba(0, 0, 0, 0.06) !important; } html.light .border-white\/20 { border-color: rgba(0, 0, 0, 0.12) !important; } html.light .border-error\/30 { border-color: rgba(186, 26, 26, 0.30) !important; } html.light .border-error\/40 { border-color: rgba(186, 26, 26, 0.40) !important; } html.light .border-error\/50 { border-color: rgba(186, 26, 26, 0.50) !important; } html.light .border-primary\/20 { border-color: rgba(0, 105, 119, 0.20) !important; } html.light .border-primary\/40 { border-color: rgba(0, 105, 119, 0.40) !important; } html.light .border-cyan-400\/20 { border-color: rgba(2, 132, 199, 0.25) !important; } html.light .border-cyan-400\/50 { border-color: rgba(2, 132, 199, 0.50) !important; } /* ── Design system globals ───────────────────────────────────────────────────── */ html.light .glass-panel { background: rgba(240, 244, 251, 0.88) !important; backdrop-filter: blur(24px); } html.light .nav-rail { background: rgba(240, 244, 251, 0.96) !important; border-right: 1px solid rgba(0, 105, 119, 0.12) !important; } html.light .header-blur { background: rgba(248, 250, 255, 0.96) !important; border-bottom: 1px solid rgba(0, 105, 119, 0.08) !important; } html.light .map-overlay-glow { box-shadow: 0 0 15px rgba(0, 105, 119, 0.25); } /* ── Nav items ───────────────────────────────────────────────────────────────── */ html.light .nav-item { color: rgb(68 75 100); } html.light .nav-item:hover { color: #006977; } html.light .nav-item.active { color: #006977; } html.light .nav-item.active::after { background: #006977; box-shadow: 0 0 8px rgba(0, 105, 119, 0.55); } /* ── Nav toggle ──────────────────────────────────────────────────────────────── */ html.light #nav-toggle { background: rgba(240, 244, 251, 0.80) !important; border-color: rgba(0, 105, 119, 0.12) !important; color: rgba(68, 75, 100, 0.65) !important; } html.light #nav-toggle:hover { color: #006977 !important; background: rgba(240, 244, 251, 0.95) !important; border-color: rgba(0, 105, 119, 0.28) !important; } /* ── Header gradient title ───────────────────────────────────────────────────── */ html.light .from-\[#7DD3FC\] { --tw-gradient-from: #0369a1; } html.light .to-\[#0EA5E9\] { --tw-gradient-to: #0284c7; } /* ── Search bar ──────────────────────────────────────────────────────────────── */ html.light .bg-surface-container-low\/60 { background-color: rgba(237, 241, 250, 0.80) !important; } html.light .focus-within\:border-cyan-400\/50:focus-within { border-color: rgba(2, 132, 199, 0.50) !important; } html.light input.bg-transparent { color: #1a1c2e !important; } html.light input.bg-transparent::placeholder { color: #9096b0 !important; } /* ── Floating panels with dark inline styles ─────────────────────────────────── */ /* Zoom/tools controls, measure dropdown — use rgba(15,25,48,0.4) inline */ html.light [style*="rgba(15, 25, 48, 0.4)"], html.light [style*="rgba(15,25,48,0.4)"] { background-color: rgba(240,244,251,0.75) !important; } /* Modal containers using rgba(15,25,48,0.95) inline */ html.light [style*="background-color: rgba(15, 25, 48, 0.95)"] { background-color: rgba(240,244,251,0.98) !important; } /* Tools hover dropdown */ html.light [style*="rgba(15, 25, 48, 0.4); backdrop-filter"] { background-color: rgba(240,244,251,0.88) !important; } /* ── Theme toggle icon (purple accent in light) ──────────────────────────────── */ html.light #color-mode-icon { color: #7039b1 !important; } /* ── Divider in settings dropdown ────────────────────────────────────────────── */ html.light .my-1.h-px { background-color: rgba(196,198,212,0.40) !important; } /* ── Settings dropdown ───────────────────────────────────────────────────────── */ html.light #dropdown_ajustes { background-color: #f0f4fb !important; border-color: rgba(196, 198, 212, 0.60) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important; } html.light #dropdown_ajustes button:hover { background-color: #e1e5ef !important; } /* ── Ajustes button ──────────────────────────────────────────────────────────── */ html.light #boton_ajustes { color: #44475a !important; } html.light #boton_ajustes:hover { color: #006977 !important; background: rgba(0,0,0,0.05) !important; } /* ── Modals ──────────────────────────────────────────────────────────────────── */ html.light #modal_importacion > div:last-child, html.light #modal_exportacion > div:last-child { background-color: rgba(240, 244, 251, 0.98) !important; } html.light .bg-black\/20 { background-color: rgba(0, 0, 0, 0.10) !important; } html.light .bg-black\/60 { background-color: rgba(0, 0, 0, 0.25) !important; } html.light #modal-sync-delete-confirm > div { background-color: #f8faff !important; } /* ── Changelog modal ─────────────────────────────────────────────────────────── */ html.light #modal-changelog { background: rgba(240, 244, 251, 0.97) !important; border-color: rgba(2, 132, 199, 0.20) !important; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15) !important; } html.light #modal-changelog .bg-white\/5 { background-color: rgba(0, 0, 0, 0.04) !important; } html.light #modal-changelog .border-white\/5 { border-color: rgba(0, 0, 0, 0.08) !important; } html.light #modal-changelog .bg-surface-container\/50 { background-color: rgba(231, 235, 245, 0.60) !important; } html.light .font-manrope.text-cyan-50, html.light .font-manrope.font-bold { color: #1a1c2e !important; } /* Changelog list bullet markers */ html.light .marker\:text-cyan-500\/50::marker { color: rgba(2, 132, 199, 0.70) !important; } /* ── Scrollbars ──────────────────────────────────────────────────────────────── */ html.light .changelog-scrollbar { scrollbar-color: rgba(0, 105, 119, 0.30) rgba(0, 0, 0, 0.04); } html.light .changelog-scrollbar::-webkit-scrollbar-track { background: rgba(0,0,0,0.04); border-radius: 10px; } html.light .changelog-scrollbar::-webkit-scrollbar-thumb { background: rgba(0, 105, 119, 0.30); border-radius: 10px; } html.light .changelog-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(0, 105, 119, 0.55); } /* ── Map floating controls ───────────────────────────────────────────────────── */ html.light .absolute.flex.flex-col.gap-2.top-4.right-2 .glass-panel { background-color: rgba(240, 244, 251, 0.88) !important; } html.light .w-7.h-7.flex.items-center.justify-center.rounded-md:hover { background: rgba(0, 0, 0, 0.06) !important; } /* ── Hover overlays ──────────────────────────────────────────────────────────── */ html.light .hover\:bg-white\/5:hover { background-color: rgba(0,0,0,0.04) !important; } html.light .hover\:bg-white\/10:hover { background-color: rgba(0,0,0,0.07) !important; } html.light .bg-white\/5 { background-color: rgba(0,0,0,0.04) !important; } /* ── GPS panel ───────────────────────────────────────────────────────────────── */ html.light #panel-gps .glass-panel { border-color: rgba(0, 105, 119, 0.22) !important; } html.light .text-primary\/80 { color: rgba(0, 105, 119, 0.90) !important; } html.light #btn-gps-activate { background-color: #006977 !important; color: #ffffff !important; box-shadow: 0 4px 14px rgba(0,105,119,0.25) !important; } html.light #btn-gps-activate:hover { background-color: #00818f !important; } html.light #gps-accuracy-badge .glass-panel { border-color: rgba(0, 105, 119, 0.20) !important; } /* ── Footer ──────────────────────────────────────────────────────────────────── */ html.light footer { background-color: #edf1fa !important; border-top-color: rgba(0, 0, 0, 0.08) !important; } html.light #btn-footer-changelog { color: #718096 !important; } html.light #btn-footer-changelog:hover { color: #0284c7 !important; border-color: rgba(2,132,199,0.40) !important; } html.light #footer-version-label { color: #718096 !important; } html.light #footer-version-label:hover { color: #0284c7 !important; } html.light #footer-coord-e, html.light #footer-coord-n, html.light #footer-coord-z { color: #0284c7 !important; } /* ── Sync panel selects & buttons ────────────────────────────────────────────── */ html.light .sync-field-select { background-color: rgba(255, 255, 255, 0.90) !important; border-color: rgba(196, 198, 212, 0.60) !important; color: #1a1c2e !important; } html.light .sync-field-select:hover { border-color: rgba(0, 105, 119, 0.40) !important; background-color: #ffffff !important; } html.light .sync-field-select:focus { border-color: rgba(0, 105, 119, 0.55) !important; box-shadow: 0 0 0 1px rgba(0, 105, 119, 0.30) !important; } html.light .sync-field-select option { background-color: #f0f4fb !important; color: #1a1c2e !important; } html.light .sync-action-btn { background-color: rgba(0, 105, 119, 0.10) !important; border-color: rgba(0, 105, 119, 0.30) !important; color: #006977 !important; } html.light .sync-action-btn:hover { background-color: rgba(0, 105, 119, 0.18) !important; border-color: rgba(0, 105, 119, 0.50) !important; } /* ── Layer action buttons ────────────────────────────────────────────────────── */ html.light .layer-action-btn { color: #44475a !important; } html.light .layer-action-btn:hover { color: #006977 !important; } html.light .layer-action-btn.active { color: #006977 !important; background: rgba(0,105,119,0.10) !important; } /* ── Sync toggle ─────────────────────────────────────────────────────────────── */ html.light .sync-toggle { border-color: rgba(100, 116, 139, 0.45) !important; background: rgba(255, 255, 255, 0.95) !important; } /* ── GPS map controls (app.css) ──────────────────────────────────────────────── */ html.light .cursor-coords-control { border-color: rgba(0, 105, 119, 0.20) !important; background: rgba(240, 244, 251, 0.90) !important; color: #006977 !important; } html.light .map-location-control.leaflet-bar { background: rgba(240, 244, 251, 0.92) !important; border-color: rgba(0, 105, 119, 0.18) !important; } html.light .map-location-control__btn { color: #44475a !important; } html.light .map-location-control__btn:hover { background: rgba(0,105,119,0.08) !important; color: #006977 !important; } html.light .map-location-control__meta { background: rgba(240, 244, 251, 0.80) !important; border-left-color: rgba(196, 198, 212, 0.50) !important; } html.light .map-location-control__accuracy { color: #1a1c2e !important; } html.light .map-location-control__status { color: #44475a !important; } html.light .map-location-toast { border-color: rgba(0, 105, 119, 0.30) !important; background: rgba(240, 244, 251, 0.98) !important; color: #1a1c2e !important; } html.light .map-location-toast--error { border-color: rgba(186, 26, 26, 0.45) !important; } /* ── Theme toggle button state ───────────────────────────────────────────────── */ html.light #btn-color-mode .material-symbols-outlined { color: #7039b1 !important; } /* ── Import dashed label ─────────────────────────────────────────────────────── */ html.light .border-dashed.border-outline-variant\/50 { border-color: rgba(196, 198, 212, 0.70) !important; } html.light .border-dashed.hover\:border-cyan-400\/50:hover { border-color: rgba(2, 132, 199, 0.50) !important; } /* ── Tailwind JIT fractional classes (layer cards, buttons) ──────────────────── */ html.light .bg-surface-container\/25 { background-color: rgba(231,235,245,0.50) !important; } html.light .bg-surface-container\/30 { background-color: rgba(231,235,245,0.45) !important; } html.light .bg-surface-container\/50 { background-color: rgba(231,235,245,0.60) !important; } html.light .border-outline-variant\/10 { border-color: rgba(196,198,212,0.30) !important; } html.light .border-t.border-outline-variant\/10 { border-color: rgba(196,198,212,0.30) !important; } html.light .bg-primary\/10 { background-color: rgba(0,105,119,0.10) !important; } html.light .bg-primary\/20 { background-color: rgba(0,105,119,0.15) !important; } html.light .bg-primary\/30 { background-color: rgba(0,105,119,0.22) !important; } html.light .border-primary\/30 { border-color: rgba(0,105,119,0.30) !important; } html.light .border-primary\/50 { border-color: rgba(0,105,119,0.50) !important; } html.light .hover\:bg-primary\/20:hover { background-color: rgba(0,105,119,0.18) !important; } html.light .hover\:border-primary\/50:hover { border-color: rgba(0,105,119,0.50) !important; } html.light .bg-secondary\/10 { background-color: rgba(0,108,73,0.10) !important; } html.light .bg-tertiary\/10 { background-color: rgba(112,57,177,0.10) !important; } html.light .text-error\/60 { color: rgba(186,26,26,0.70) !important; } html.light .hover\:text-error:hover { color: #ba1a1a !important; } html.light .bg-error\/10 { background-color: rgba(186,26,26,0.10) !important; } html.light .border-error\/30 { border-color: rgba(186,26,26,0.30) !important; } html.light .text-amber-400 { color: #b45309 !important; } html.light .bg-amber-400\/10 { background-color: rgba(180,83,9,0.10) !important; } html.light .bg-\[#FACC15\] { background-color: #eab308 !important; } html.light .hover\:bg-\[#EAB308\]:hover { background-color: #ca8a04 !important; } html.light .text-slate-900 { color: #1a1c2e !important; } /* ── Hover overrides for Tailwind surface utilities ──────────────────────────── */ html.light .hover\:bg-surface-container-high:hover { background-color: #e1e5ef !important; } html.light .hover\:bg-surface-container\/30:hover { background-color: rgba(231,235,245,0.55) !important; } html.light .hover\:bg-surface-container\/50:hover { background-color: rgba(231,235,245,0.70) !important; } html.light .hover\:border-outline:hover { border-color: #757887 !important; } /* ── Layer controls reveal section border ────────────────────────────────────── */ html.light .border-t.border-outline-variant\/10 { border-top-color: rgba(196,198,212,0.35) !important; } /* ── On-surface-variant fractional ──────────────────────────────────────────── */ html.light .text-on-surface-variant\/60 { color: rgba(68,71,90,0.70) !important; } /* ── sp-header-add-btn in sidebar (Tailwind classes injected by JS) ──────────── */ html.light #sp-header-add-btn { background-color: rgba(0,105,119,0.10) !important; border-color: rgba(0,105,119,0.30) !important; color: #006977 !important; } html.light #sp-header-add-btn:hover { background-color: rgba(0,105,119,0.18) !important; border-color: rgba(0,105,119,0.50) !important; }