body.modo-claro { --oz-dark: #f7f2e8; --oz-sidebar: rgba(247,242,232,0.98); --oz-text: #0a0a0a; } body.modo-claro #sidebar { border-right:1px solid rgba(0,0,0,0.1); box-shadow:15px 0 50px rgba(0,0,0,0.1); } body.modo-claro .sidebar-section { color:#888; } body.modo-claro .menu-item { color:#555; } body.modo-claro .menu-item:hover { background:rgba(0,0,0,0.05); color:#000; } body.modo-claro #sesion-usuario { color:#000 !important; } body.modo-claro #sesion-rol { color:#888 !important; } body.modo-claro .tool-btn { background:rgba(240,240,240,0.9); color:#444; border:1px solid rgba(0,0,0,0.1); } body.modo-claro .moni-input { background:#fff !important; border-color:#ccc !important; color:#000 !important; } /* La pantalla de login se ve igual en ambos modos (el tema se elige recién adentro) */ body.modo-claro #login-screen .moni-input { background:#000 !important; border-color:#333 !important; color:#fff !important; } body.modo-claro .leaflet-popup-content-wrapper { background:rgba(245,245,245,0.97) !important; color:#000 !important; } body.modo-claro .leaflet-popup-tip { background:rgba(245,245,245,0.97) !important; } body.modo-claro #busqueda-global { background:#fff !important; color:#000 !important; border-color:#ccc !important; } body.modo-claro #selProj { background:#e8e0d0 !important; color:#000 !important; border-color:#bbb !important; } body.modo-claro div[style*="padding: 10px 12px 6px"] { background:#f7f2e8 !important; } /* Banners/paneles flotantes que se crean con JS y se cuelgan directo de (toast, reporte de área, modo múltiple, medición) — sus colores de texto ya son de acento (azul/verde/morado) o grises medios legibles sobre blanco. */ body.modo-claro #moni-toast, body.modo-claro #reporte-banner, body.modo-claro #multi-banner, body.modo-claro #medicion-panel, body.modo-claro #medicion-puntos-panel { background:#fff !important; box-shadow:0 4px 20px rgba(0,0,0,0.15) !important; } body.modo-claro div[onclick="toggleMenuUsuario()"] { background:#e8e0d0 !important; border-color:#bbb !important; } body.modo-claro div[onclick="toggleMenuUsuario()"]:hover { border-color:var(--oz-blue) !important; } body.modo-claro #menu-usuario { background:#f0ebe0 !important; border-color:#ccc !important; } body.modo-claro #menu-usuario div { color:#333 !important; } body.modo-claro #menu-usuario i { color:#555 !important; } body.modo-claro .moni-modal { background:rgba(247,242,232,0.6) !important; backdrop-filter:blur(8px) !important; } body.modo-claro .moni-modal > div { background:#f7f2e8 !important; } body.modo-claro .moni-modal input { background:#fff !important; color:#000 !important; border-color:#ccc !important; } body.modo-claro .moni-modal h2 { color:#2ecc71 !important; } body.modo-claro .moni-modal button { color:#000 !important; } body.modo-claro .modal-overlay { background:rgba(0,0,0,0.1) !important; } body.modo-claro .modal-box { background:#f7f2e8 !important; color:#000 !important; } body.modo-claro .modal-box input { background:#fff !important; color:#000 !important; border-color:#ccc !important; } body.modo-claro #resultados-busqueda { background:#f7f2e8 !important; } body.modo-claro #resultados-busqueda > div { background:#f0ebe0 !important; color:#000 !important; border-color:#ddd !important; } body.modo-claro #resultados-busqueda > div:hover { background:#e8e0d0 !important; } body.modo-claro #resultados-busqueda * { color:#000 !important; } /* Dashboard */ body.modo-claro #dashboard-contenido th { color:#555 !important; } body.modo-claro #dashboard-contenido td:not([style*="color"]) { color:#333 !important; } body.modo-claro #dashboard-contenido tr:hover { background:#e8e0d0 !important; } body.modo-claro #dashboard-contenido h4 { color:var(--oz-blue) !important; } /* Listados del sidebar */ body.modo-claro #detalles-content { background:#f7f2e8 !important; } body.modo-claro #detalles-content > div { background:#f7f2e8 !important; } body.modo-claro #detalles-content table { background:#f7f2e8 !important; color:#000 !important; } body.modo-claro #detalles-content td { border-color:#ddd !important; } body.modo-claro #detalles-content td:not([style*="color"]) { color:#333 !important; } body.modo-claro #detalles-content th { color:#555 !important; border-color:#ddd !important; } body.modo-claro #detalles-content tr:hover { background:#e8e0d0 !important; } body.modo-claro #detalles-content .btn-confirm { color:#000 !important; } body.modo-claro #detalles-content tr[style*="background:#111"] { background:#f0ebe0 !important; color:#000 !important; } body.modo-claro #detalles-content tr[style*="background: #111"] { background:#f0ebe0 !important; color:#000 !important; } body.modo-claro #detalles-content div[style*="background:#111"] { background:#f0ebe0 !important; border-color:#ddd !important; } body.modo-claro #detalles-content div[style*="background: #111"] { background:#f0ebe0 !important; border-color:#ddd !important; } body.modo-claro #detalles-content tr[style*="background:#111"] td { color:#333 !important; } body.modo-claro .modal-box { background:#f7f2e8 !important; } /* .btn-confirm ya trae su propio color (azul por defecto, o un acento a propósito como naranja/morado/rojo/verde para distinguir la acción); no aplanarlo a beige. */ body.modo-claro .modal-box button:not(.btn-confirm) { background:#f0ebe0 !important; } body.modo-claro select.moni-input { color:#000 !important; } body.modo-claro #detalles-content select { color:#000 !important; background:#f0ebe0 !important; } body.modo-claro #modal-search-bar { background:#f0ebe0 !important; } body.modo-claro #panel-filtros { background:rgba(247,242,232,0.97) !important; border-color:#ccc !important; box-shadow:0 4px 30px rgba(0,0,0,0.2) !important; } body.modo-claro #panel-filtros div[style*="color: #444"] { color:#888 !important; } body.modo-claro #panel-filtros label { color:#333 !important; } body.modo-claro div[onclick*="togglePanel"] { background:rgba(247,242,232,0.95) !important; border-color:#ccc !important; color:#555 !important; } body.modo-claro div[onclick*="toggleSidebar"] { background:rgba(247,242,232,0.95) !important; border-color:#ccc !important; color:#555 !important; } body.modo-claro div[onclick*="togglePanel('tools')"] { background:rgba(247,242,232,0.95) !important; border-color:#ccc !important; color:#555 !important; } body.modo-claro div[onclick*="togglePanel('capas')"] { background:rgba(247,242,232,0.95) !important; border-color:#ccc !important; color:#555 !important; } body.modo-claro div[style*="rgba(15, 15, 15, 0.9)"] { background:rgba(247,242,232,0.95) !important; border-color:#ccc !important; color:#555 !important; } body.modo-claro div[style*="rgba(15,15,15,0.9)"] { background:rgba(247,242,232,0.95) !important; border-color:#ccc !important; color:#555 !important; } /* Mismo resalte en hover que el modo oscuro para los botones flotantes (Menú/Herramientas/Capas) */ body.modo-claro div[onclick*="togglePanel"]:hover, body.modo-claro div[onclick*="toggleSidebar"]:hover, body.modo-claro div[style*="rgba(15, 15, 15, 0.9)"]:hover, body.modo-claro div[style*="rgba(15,15,15,0.9)"]:hover { border-color:var(--oz-blue) !important; color:var(--oz-blue) !important; } body.modo-claro .tool-btn { background:rgba(247,242,232,0.95) !important; border-color:#ccc !important; color:#555 !important; } body.modo-claro .tool-btn.active { background:var(--oz-blue) !important; color:#000 !important; border:none !important; } body.modo-claro .puerto-card:hover { background:#d8d0c0 !important; } body.modo-claro .puerto-card.selected { background:#c8c0b0 !important; } body.modo-claro div[onmouseover*="0a0a1a"] { background:#f0ebe0 !important; } /* Tarjetas de cajas dentro de un condominio y resultados de preactivación en el splitter: el JS resetea el borde a un gris oscuro fijo al salir del hover; en modo claro eso debe volver al borde claro, no al oscuro. El hover (verde/azul) se preserva igual. */ body.modo-claro div[onmouseout*="borderColor='#1a1a1a'"] { border-color:#ddd !important; } body.modo-claro div[onmouseout*="borderColor='#1a1a1a'"]:hover { border-color:var(--oz-blue) !important; } body.modo-claro div[onmouseout*="borderColor='#222'"] { border-color:#ddd !important; } body.modo-claro div[onmouseout*="borderColor='#222'"]:hover { border-color:#2ecc71 !important; } body.modo-claro #detalles-content div[onclick*="clicPuertoSplitter"] { background:#f0ebe0 !important; border-color:#ddd !important; } body.modo-claro #detalles-content div[onclick*="clicPuertoSplitter"]:hover { background:#d8d0c0 !important; border-color:var(--oz-blue) !important; } body.modo-claro #manual-layout { color:#000 !important; border-color:#ddd !important; } body.modo-claro #manual-indice { background:#f0ebe0 !important; border-color:#ddd !important; } body.modo-claro #manual-indice p { color:#888 !important; } body.modo-claro #manual-indice li { color:#333 !important; } body.modo-claro #manual-indice li:hover { background:#e0d8c8 !important; } body.modo-claro #manual-contenido { background:#f7f2e8 !important; color:#000 !important; } body.modo-claro #manual-layout * { color:#000 !important; } body.modo-claro #manual-layout h1, body.modo-claro #manual-layout h2, body.modo-claro #manual-layout h3 { color:#000 !important; } body.modo-claro #manual-layout p { color:#333 !important; } body.modo-claro #manual-layout code { background:#e0d8c8 !important; color:#000 !important; } body.modo-claro #manual-layout div[style*="background:#1a"] { background:#f0d0c0 !important; border-color:#e0a080 !important; } body.modo-claro #manual-layout div[style*="background: #1a"] { background:#f0d0c0 !important; border-color:#e0a080 !important; } body.modo-claro #manual-layout div[style*="background:#2d"] { background:#f0d0c0 !important; } body.modo-claro #manual-layout div[style*="rgba(255,152,0"] { background:#fff3e0 !important; } body.modo-claro .tip { background:#e8f5e9 !important; border-left-color:#2ecc71 !important; color:#333 !important; } body.modo-claro #manual-viewer th { background:#e0d8c8 !important; color:#333 !important; border-color:#ccc !important; } body.modo-claro #manual-viewer td { background:#f7f2e8 !important; color:#333 !important; border-color:#ddd !important; } body.modo-claro #manual-viewer tr { border-color:#ddd !important; } body.modo-claro .warn { background:#fde8e8 !important; border-left-color:#e74c3c !important; color:#333 !important; } body.modo-claro #resultados-busqueda div[style*="background:#"] { background:#e0d8c8 !important; } body.modo-claro #resultados-busqueda div[style*="border-radius:10px"] { background:#e0d8c8 !important; } body.modo-claro div[style*="background:#111"][onclick*="Slot"], body.modo-claro div[style*="background:#111"][style*="border-radius:10px"] { background:#e0d8c8 !important; color:#333 !important; } body.modo-claro div[style*="border-radius:10px"][style*="cursor:pointer"] { background:#e0d8c8 !important; color:#333 !important; } body.modo-claro div[style*="border-radius:10px"][style*="cursor:pointer"]:hover { background:#d0c8b8 !important; } body.modo-claro div[style*="opacity:0.6"] { opacity:1 !important; color:#555 !important; } body.modo-claro div[style*="opacity: 0.6"] { opacity:1 !important; color:#555 !important; } body.modo-claro span[style*="opacity:0.6"] { opacity:1 !important; color:#555 !important; } body.modo-claro span[style*="opacity: 0.6"] { opacity:1 !important; color:#555 !important; } body.modo-claro #detalles-content div[style*="border-radius:16px"] { background:#e8e0d0 !important; border-color:#ddd !important; } body.modo-claro #detalles-content div[style*="border-radius: 16px"] { background:#e8e0d0 !important; border-color:#ddd !important; } /* Excluye las tarjetas de "Tipos de infraestructura" (colorean al pasar el mouse con el color propio de cada tipo, calculado por JS) para no aplanarlas a beige. */ body.modo-claro #detalles-content div[style*="border-radius:14px"]:not([onclick*="abrirModalTipo"]):not([onclick="abrirTiposCable()"]):not([onclick="abrirRegiones()"]) { background:#e8e0d0 !important; border-color:#ddd !important; } body.modo-claro #detalles-content div[style*="border-radius: 14px"]:not([onclick*="abrirModalTipo"]):not([onclick="abrirTiposCable()"]):not([onclick="abrirRegiones()"]) { background:#e8e0d0 !important; border-color:#ddd !important; } body.modo-claro #detalles-content div[style*="border-radius:14px"]:not([onclick*="abrirModalTipo"]):not([onclick="abrirTiposCable()"]):not([onclick="abrirRegiones()"]):hover { background:#d0c8b8 !important; }