/* ========================================================================== SISTEMA UNIFICADO DE ARMONIZACIÓN DE TEMAS (DIURNO CLARO vs NOCTURNO OSCURO) Garantiza legibilidad AAA, contraste de textos, tablas, inputs y modales sin alterar las vistas de impresión (@media print) ni chasis de hardware. ========================================================================== */ @media screen { :root { --theme-surface: #ffffff; --theme-card: #f8fafc; --theme-card-alt: #f1f5f9; --theme-border: #cbd5e1; --theme-border-soft: #e2e8f0; --theme-text-main: #0f172a; --theme-text-sec: #334155; --theme-text-muted: #475569; --theme-accent: #0284c7; } :root[data-mode="night"], body[data-mode="night"] { --theme-surface: #0f172a; --theme-card: #1e293b; --theme-card-alt: #111827; --theme-border: #334155; --theme-border-soft: #1e293b; --theme-text-main: #f8fafc; --theme-text-sec: #e2e8f0; --theme-text-muted: #94a3b8; --theme-accent: #38bdf8; } /* ------------------------------------------------------------------------ 1. MODO DIURNO (CLARO) — :root:not([data-mode="night"]) ------------------------------------------------------------------------ */ /* 1.1 Todos los Modales y Ventanas Emergentes en Modo Claro */ :root:not([data-mode="night"]) .modal, :root:not([data-mode="night"]) .hoja-vida-modal, :root:not([data-mode="night"]) #assetLifeSheetModal .modal, :root:not([data-mode="night"]) #switchLifeSheetModal .modal, :root:not([data-mode="night"]) #centerLifeSheetModal .modal, :root:not([data-mode="night"]) #upsLifeSheetModal .modal, :root:not([data-mode="night"]) #switchFaceplateModal .modal, :root:not([data-mode="night"]) #switchEditModal .modal, :root:not([data-mode="night"]) #manageVlansModal .modal, :root:not([data-mode="night"]) #passiveAssetModal .modal, :root:not([data-mode="night"]) #wiringCenterModal .modal, :root:not([data-mode="night"]) #patchPanelModal .modal, :root:not([data-mode="night"]) #networkTopologyModal .modal, :root:not([data-mode="night"]) #networkLinkModal .modal, :root:not([data-mode="night"]) #manageNetworkLinksModal .modal, :root:not([data-mode="night"]) #activeExpandedDeviceModal .modal, :root:not([data-mode="night"]) #activeExpandedDetailModal .modal, :root:not([data-mode="night"]) #standardizationBackdrop .modal, :root:not([data-mode="night"]) #legalizationUploadModal .modal, :root:not([data-mode="night"]) #decommissionUploadModal .modal, :root:not([data-mode="night"]) #upsLegalizeDecomModal .modal, :root:not([data-mode="night"]) #newDeliveryActSelectorModal .modal, :root:not([data-mode="night"]) #deliveryActModal .modal, :root:not([data-mode="night"]) #deliveryActUploadModal .modal, :root:not([data-mode="night"]) #deliveryActApprovalModal .modal, :root:not([data-mode="night"]) #backupActModal .modal, :root:not([data-mode="night"]) #backupActUploadModal .modal, :root:not([data-mode="night"]) #backupActApprovalModal .modal, :root:not([data-mode="night"]) #backupActSelectorModal .modal { background: #ffffff !important; color: #0f172a !important; border: 1px solid #cbd5e1 !important; box-shadow: 0 20px 50px rgba(15, 23, 42, 0.16) !important; } :root:not([data-mode="night"]) .modal .modal-top, :root:not([data-mode="night"]) .modal .modal-foot, :root:not([data-mode="night"]) #switchFaceplateModal .modal-top, :root:not([data-mode="night"]) #switchEditModal .modal-top, :root:not([data-mode="night"]) #switchLifeSheetModal .modal-top, :root:not([data-mode="night"]) #manageVlansModal .modal-top, :root:not([data-mode="night"]) #passiveAssetModal .modal-top, :root:not([data-mode="night"]) #wiringCenterModal .modal-top, :root:not([data-mode="night"]) #patchPanelModal .modal-top, :root:not([data-mode="night"]) #networkTopologyModal .modal-top, :root:not([data-mode="night"]) #networkLinkModal .modal-top, :root:not([data-mode="night"]) #manageNetworkLinksModal .modal-top, :root:not([data-mode="night"]) #activeExpandedDeviceModal .modal-top, :root:not([data-mode="night"]) #activeExpandedDetailModal .modal-top { background: #ffffff !important; border-color: #e2e8f0 !important; } :root:not([data-mode="night"]) .modal .modal-top h2, :root:not([data-mode="night"]) .modal .modal-top h3, :root:not([data-mode="night"]) .modal h2, :root:not([data-mode="night"]) .modal h3, :root:not([data-mode="night"]) .modal .titulo-principal { color: #0f172a !important; } :root:not([data-mode="night"]) .modal .modal-top .close { color: #475569 !important; } /* 1.2 Páginas de Red, Actas y Hojas de Vida en Modo Claro */ :root:not([data-mode="night"]) #net-activePage, :root:not([data-mode="night"]) #net-passivePage, :root:not([data-mode="night"]) #net-roomsPage, :root:not([data-mode="night"]) #net-ipsPage, :root:not([data-mode="night"]) #net-vlansPage, :root:not([data-mode="night"]) #net-topologyPage { background: var(--paper, #f8fafc) !important; color: var(--ink, #0f172a) !important; } :root:not([data-mode="night"]) #net-activePage .heading h1, :root:not([data-mode="night"]) #net-passivePage .heading h1, :root:not([data-mode="night"]) #net-roomsPage .heading h1, :root:not([data-mode="night"]) #net-ipsPage .heading h1, :root:not([data-mode="night"]) #net-vlansPage .heading h1, :root:not([data-mode="night"]) #net-topologyPage .heading h1, :root:not([data-mode="night"]) #net-activePage .panelhead h2, :root:not([data-mode="night"]) #net-passivePage .panelhead h2, :root:not([data-mode="night"]) #net-roomsPage .panelhead h2, :root:not([data-mode="night"]) #net-ipsPage .panelhead h2, :root:not([data-mode="night"]) #net-vlansPage .panelhead h2 { color: var(--ink, #0f172a) !important; } :root:not([data-mode="night"]) #net-activePage .heading p, :root:not([data-mode="night"]) #net-passivePage .heading p, :root:not([data-mode="night"]) #net-roomsPage .heading p, :root:not([data-mode="night"]) #net-ipsPage .heading p, :root:not([data-mode="night"]) #net-vlansPage .heading p, :root:not([data-mode="night"]) #net-topologyPage .heading p, :root:not([data-mode="night"]) #net-activePage .panelhead .sub, :root:not([data-mode="night"]) #net-passivePage .panelhead .sub, :root:not([data-mode="night"]) #net-roomsPage .panelhead .sub, :root:not([data-mode="night"]) #net-ipsPage .panelhead .sub, :root:not([data-mode="night"]) #net-vlansPage .panelhead .sub { color: var(--muted, #64748b) !important; } :root:not([data-mode="night"]) #net-activePage .panel, :root:not([data-mode="night"]) #net-activePage section.panel, :root:not([data-mode="night"]) #net-passivePage .panel, :root:not([data-mode="night"]) #net-roomsPage .panel, :root:not([data-mode="night"]) #net-ipsPage .panel, :root:not([data-mode="night"]) #net-vlansPage .panel, :root:not([data-mode="night"]) #net-topologyPage .panel, :root:not([data-mode="night"]) #switchFaceplateModal .panel, :root:not([data-mode="night"]) #faceplateConfigPanel { background: #ffffff !important; border: 1px solid #cbd5e1 !important; color: #0f172a !important; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05) !important; } :root:not([data-mode="night"]) #net-activePage .panel h2, :root:not([data-mode="night"]) #net-passivePage .panel h2 { color: #0f172a !important; } :root:not([data-mode="night"]) #net-activePage .panel .sub, :root:not([data-mode="night"]) #net-passivePage .panel .sub { color: #64748b !important; } /* Tarjetas de estadísticas de red en Modo Claro */ :root:not([data-mode="night"]) #net-activePage .stats .stat, :root:not([data-mode="night"]) #net-passivePage .stats .stat, :root:not([data-mode="night"]) #net-roomsPage .stats .stat, :root:not([data-mode="night"]) #net-ipsPage .stats .stat, :root:not([data-mode="night"]) #net-vlansPage .stats .stat { background: #ffffff !important; border-color: #cbd5e1 !important; color: #0f172a !important; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important; } :root:not([data-mode="night"]) #net-activePage .stats .stat .stat-top, :root:not([data-mode="night"]) #net-passivePage .stats .stat .stat-top, :root:not([data-mode="night"]) #net-roomsPage .stats .stat .stat-top, :root:not([data-mode="night"]) #net-ipsPage .stats .stat .stat-top, :root:not([data-mode="night"]) #net-vlansPage .stats .stat .stat-top { color: #475569 !important; } :root:not([data-mode="night"]) #net-activePage .stats .stat small, :root:not([data-mode="night"]) #net-passivePage .stats .stat small, :root:not([data-mode="night"]) #net-roomsPage .stats .stat small, :root:not([data-mode="night"]) #net-ipsPage .stats .stat small, :root:not([data-mode="night"]) #net-vlansPage .stats .stat small { color: #64748b !important; } /* Botones de acción en paneles de red en Modo Claro */ :root:not([data-mode="night"]) #net-activePage button.secondary, :root:not([data-mode="night"]) #net-passivePage button.secondary, :root:not([data-mode="night"]) #net-roomsPage button.secondary, :root:not([data-mode="night"]) #net-ipsPage button.secondary, :root:not([data-mode="night"]) #net-vlansPage button.secondary, :root:not([data-mode="night"]) #net-topologyPage button.secondary, :root:not([data-mode="night"]) .page button.secondary[style*="background:#1e293b"], :root:not([data-mode="night"]) .page button.secondary[style*="background:#0f172a"] { background: #f1f5f9 !important; border: 1px solid #cbd5e1 !important; color: #334155 !important; } :root:not([data-mode="night"]) #net-activePage button.secondary:hover, :root:not([data-mode="night"]) #net-passivePage button.secondary:hover, :root:not([data-mode="night"]) #net-roomsPage button.secondary:hover, :root:not([data-mode="night"]) #net-ipsPage button.secondary:hover, :root:not([data-mode="night"]) #net-vlansPage button.secondary:hover, :root:not([data-mode="night"]) #net-topologyPage button.secondary:hover, :root:not([data-mode="night"]) .page button.secondary[style*="background:#1e293b"]:hover, :root:not([data-mode="night"]) .page button.secondary[style*="background:#0f172a"]:hover { background: #e2e8f0 !important; color: #0f172a !important; } :root:not([data-mode="night"]) #net-activePage .filters-bar, :root:not([data-mode="night"]) #net-passivePage .filters-bar, :root:not([data-mode="night"]) #net-roomsPage .filters-bar, :root:not([data-mode="night"]) #net-ipsPage .filters-bar { background: #f8fafc !important; border: 1px solid #cbd5e1 !important; } :root:not([data-mode="night"]) #net-activePage .filters-bar label, :root:not([data-mode="night"]) #net-passivePage .filters-bar label, :root:not([data-mode="night"]) #net-roomsPage .filters-bar label, :root:not([data-mode="night"]) #net-ipsPage .filters-bar label { color: #475569 !important; } :root:not([data-mode="night"]) #net-activePage .filters-bar input, :root:not([data-mode="night"]) #net-activePage .filters-bar select, :root:not([data-mode="night"]) #net-passivePage .filters-bar input, :root:not([data-mode="night"]) #net-passivePage .filters-bar select, :root:not([data-mode="night"]) #net-roomsPage input, :root:not([data-mode="night"]) #net-roomsPage select, :root:not([data-mode="night"]) #net-ipsPage input, :root:not([data-mode="night"]) #net-ipsPage select, :root:not([data-mode="night"]) #net-vlansPage input:not([type="color"]), :root:not([data-mode="night"]) #net-vlansPage select, :root:not([data-mode="night"]) #net-topologyPage input, :root:not([data-mode="night"]) #net-topologyPage select, :root:not([data-mode="night"]) .page .user-manager-input:not([type="color"]) { background: #ffffff !important; border: 1px solid #cbd5e1 !important; color: #0f172a !important; } :root:not([data-mode="night"]) #net-vlansPage input::placeholder, :root:not([data-mode="night"]) .page .user-manager-input::placeholder { color: #94a3b8 !important; } /* Acordeones de Centros de Cableado y Filas de Switches en Modo Claro */ :root:not([data-mode="night"]) .wiring-center-accordion { background: #ffffff !important; border-color: #cbd5e1 !important; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06) !important; } :root:not([data-mode="night"]) .wiring-center-accordion.is-mdf { border-color: #0284c7 !important; } :root:not([data-mode="night"]) .wiring-center-header { background: #f8fafc !important; color: #0f172a !important; } :root:not([data-mode="night"]) .wiring-center-accordion.open .wiring-center-header { background: #f1f5f9 !important; border-bottom-color: #cbd5e1 !important; } :root:not([data-mode="night"]) .wiring-center-accordion.is-mdf .wiring-center-header { background: linear-gradient(90deg, #f0f9ff 0%, #ede9fe 100%) !important; } :root:not([data-mode="night"]) .center-name-text { color: #0f172a !important; } :root:not([data-mode="night"]) .center-order-tag, :root:not([data-mode="night"]) .center-code-pill { color: #0369a1 !important; } :root:not([data-mode="night"]) .center-stat-pill:not(.switches):not(.ports) { background: #ffffff !important; color: #334155 !important; border-color: #cbd5e1 !important; } :root:not([data-mode="night"]) .center-stat-pill.switches { background: #dcfce7 !important; color: #15803d !important; border-color: #86efac !important; } :root:not([data-mode="night"]) .center-stat-pill.ports { background: #e0f2fe !important; color: #0369a1 !important; border-color: #7dd3fc !important; } :root:not([data-mode="night"]) .center-ups-section { background: #ffffff !important; border-color: #cbd5e1 !important; } :root:not([data-mode="night"]) .center-ups-section label { color: #b45309 !important; } :root:not([data-mode="night"]) .center-ups-section select { background: #f8fafc !important; color: #0f172a !important; border-color: #cbd5e1 !important; } :root:not([data-mode="night"]) .wiring-center-body { background: #ffffff !important; border-top-color: #e2e8f0 !important; } :root:not([data-mode="night"]) .switch-item-row { background: #f8fafc !important; border-color: #cbd5e1 !important; color: #0f172a !important; } :root:not([data-mode="night"]) .switch-item-row:hover { background: #f0f9ff !important; border-color: #0284c7 !important; box-shadow: 0 4px 12px rgba(2, 132, 199, 0.12) !important; } :root:not([data-mode="night"]) .switch-item-row b, :root:not([data-mode="night"]) .switch-item-row b[style*="color:#f8fafc"] { color: #0f172a !important; } :root:not([data-mode="night"]) .switch-item-row span[style*="background:#0f172a"] { background: #f1f5f9 !important; color: #334155 !important; } /* Botones de pestañas de red y pool de IPs en Modo Claro */ :root:not([data-mode="night"]) .net-category-nav, :root:not([data-mode="night"]) .passive-subtabs-nav, :root:not([data-mode="night"]) .ip-view-subnav { border-bottom-color: #cbd5e1 !important; } :root:not([data-mode="night"]) .net-category-btn:not(.active), :root:not([data-mode="night"]) .passive-subtab-btn:not(.active), :root:not([data-mode="night"]) .ip-view-tab-btn:not(.active) { background: #ffffff !important; border-color: #cbd5e1 !important; color: #475569 !important; } :root:not([data-mode="night"]) .net-category-btn:not(.active):hover, :root:not([data-mode="night"]) .passive-subtab-btn:not(.active):hover, :root:not([data-mode="night"]) .ip-view-tab-btn:not(.active):hover { background: #f1f5f9 !important; color: #0f172a !important; } :root:not([data-mode="night"]) .ip-pool-grid { background: #f8fafc !important; border-color: #cbd5e1 !important; } :root:not([data-mode="night"]) .ip-box.available { background: #ffffff !important; border-color: #cbd5e1 !important; color: #475569 !important; } :root:not([data-mode="night"]) .ip-box.available:hover { background: #e2e8f0 !important; color: #0f172a !important; border-color: #64748b !important; } :root:not([data-mode="night"]) .ip-pool-legend { background: #f8fafc !important; border-color: #cbd5e1 !important; color: #334155 !important; } /* Tarjetas de Métricas Rápidas (KPIs) de Hojas de Vida */ .life-metric-card { border-radius: 10px; padding: 12px 16px; transition: transform 0.15s ease, box-shadow 0.15s ease; cursor: pointer; box-sizing: border-box; } .life-metric-card:hover { transform: translateY(-2px); } .life-metric-card .metric-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; } .life-metric-card .metric-val { font-size: 24px; font-weight: 800; margin-top: 4px; line-height: 1.2; } .life-metric-card .metric-sub { font-size: 11px; margin-top: 3px; } :root:not([data-mode="night"]) .life-metric-card { background: #ffffff !important; border: 1px solid #cbd5e1 !important; color: #0f172a !important; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important; } :root:not([data-mode="night"]) .life-metric-card .metric-label { color: #475569 !important; } :root:not([data-mode="night"]) .life-metric-card .metric-val { color: #0f172a !important; } :root:not([data-mode="night"]) .life-metric-card .metric-sub { color: #64748b !important; } :root:not([data-mode="night"]) .life-metric-card.is-operativo { border-left: 4px solid #16a34a !important; } :root:not([data-mode="night"]) .life-metric-card.is-operativo .metric-label { color: #15803d !important; } :root:not([data-mode="night"]) .life-metric-card.is-revision { border-left: 4px solid #eab308 !important; } :root:not([data-mode="night"]) .life-metric-card.is-revision .metric-label { color: #b45309 !important; } :root:not([data-mode="night"]) .life-metric-card.is-baja { border-left: 4px solid #f97316 !important; } :root:not([data-mode="night"]) .life-metric-card.is-baja .metric-label { color: #c2410c !important; } :root:not([data-mode="night"]) .life-metric-card.is-soporte { border-left: 4px solid #0284c7 !important; } :root:not([data-mode="night"]) .life-metric-card.is-soporte .metric-label { color: #0369a1 !important; } :root:not([data-mode="night"]) .life-metric-card.is-obsolescencia { border-left: 4px solid #f59e0b !important; } :root:not([data-mode="night"]) .life-metric-card.is-obsolescencia .metric-label { color: #b45309 !important; } :root:not([data-mode="night"]) .life-metric-card.is-dano { border-left: 4px solid #ef4444 !important; } :root:not([data-mode="night"]) .life-metric-card.is-dano .metric-label { color: #b91c1c !important; } /* Modales de Hoja de Vida en Modo Claro */ :root:not([data-mode="night"]) .hoja-vida-modal, :root:not([data-mode="night"]) #assetLifeSheetModal .modal, :root:not([data-mode="night"]) #switchLifeSheetModal .modal, :root:not([data-mode="night"]) #centerLifeSheetModal .modal, :root:not([data-mode="night"]) #upsLifeSheetModal .modal { background: #ffffff !important; color: #0f172a !important; border: 1px solid #cbd5e1 !important; } :root:not([data-mode="night"]) .hoja-vida-modal .life-block, :root:not([data-mode="night"]) #assetLifeSheetModal .life-block, :root:not([data-mode="night"]) .hoja-vida-modal .life-qr-wrap, :root:not([data-mode="night"]) #assetLifeSheetModal .life-qr-wrap { background: #f8fafc !important; border: 1px solid #cbd5e1 !important; color: #0f172a !important; } :root:not([data-mode="night"]) .hoja-vida-modal .life-block b, :root:not([data-mode="night"]) .hoja-vida-modal .life-block strong, :root:not([data-mode="night"]) #assetLifeSheetModal .life-block b, :root:not([data-mode="night"]) #assetLifeSheetModal .life-block strong { color: #0f172a !important; } :root:not([data-mode="night"]) .hoja-vida-modal .life-lbl, :root:not([data-mode="night"]) #assetLifeSheetModal .life-lbl { color: #475569 !important; font-weight: 700 !important; } :root:not([data-mode="night"]) .hoja-vida-modal .titulo-principal, :root:not([data-mode="night"]) #assetLifeSheetModal .titulo-principal { color: #0f172a !important; } :root:not([data-mode="night"]) .hoja-vida-modal .subtitulo, :root:not([data-mode="night"]) #assetLifeSheetModal .subtitulo { color: #0284c7 !important; } :root:not([data-mode="night"]) .hoja-vida-modal table, :root:not([data-mode="night"]) #assetLifeSheetModal table { border: 1px solid #cbd5e1 !important; } :root:not([data-mode="night"]) .hoja-vida-modal th, :root:not([data-mode="night"]) .hoja-vida-modal thead tr, :root:not([data-mode="night"]) #assetLifeSheetModal th, :root:not([data-mode="night"]) #assetLifeSheetModal thead tr { background: #f1f5f9 !important; color: #334155 !important; border: 1px solid #cbd5e1 !important; } :root:not([data-mode="night"]) .hoja-vida-modal td, :root:not([data-mode="night"]) #assetLifeSheetModal td { background: #ffffff !important; color: #1e293b !important; border: 1px solid #e2e8f0 !important; } :root:not([data-mode="night"]) .hoja-vida-modal .modal-foot button.secondary, :root:not([data-mode="night"]) #assetLifeSheetModal .modal-foot button.secondary:not(#assetLifeSheetDeliveryActBtn) { background: #f1f5f9 !important; border: 1px solid #cbd5e1 !important; color: #334155 !important; } :root:not([data-mode="night"]) .hoja-vida-modal .modal-foot button.secondary:hover, :root:not([data-mode="night"]) #assetLifeSheetModal .modal-foot button.secondary:not(#assetLifeSheetDeliveryActBtn):hover { background: #e2e8f0 !important; color: #0f172a !important; } /* 1.3 Bloques de Hojas de Vida (.life-block) y Contenedores con Fondos Oscuros Inline en Modo Claro */ :root:not([data-mode="night"]) .life-block:not(.life-status-banner), :root:not([data-mode="night"]) .life-qr-wrap, :root:not([data-mode="night"]) .modal div[style*="background:#1e293b"]:not(.life-status-banner):not(.switch-chassis-container):not(.rack-frame-wrapper), :root:not([data-mode="night"]) .modal div[style*="background: #1e293b"]:not(.life-status-banner):not(.switch-chassis-container):not(.rack-frame-wrapper), :root:not([data-mode="night"]) .modal div[style*="background:#0f172a"]:not(.life-status-banner):not(.switch-chassis-container):not(.rack-frame-wrapper), :root:not([data-mode="night"]) .modal div[style*="background: #0f172a"]:not(.life-status-banner):not(.switch-chassis-container):not(.rack-frame-wrapper), :root:not([data-mode="night"]) .modal div[style*="background:#111827"]:not(.life-status-banner), :root:not([data-mode="night"]) .modal div[style*="background: #111827"]:not(.life-status-banner), :root:not([data-mode="night"]) .modal section[style*="background:#1e293b"], :root:not([data-mode="night"]) .modal section[style*="background:#0f172a"], :root:not([data-mode="night"]) .page div[style*="background:#1e293b"]:not(.switch-chassis-container):not(.rack-frame-wrapper):not(.topology-diagram-container):not(#areaSummaryHeaderCard):not(.sec-system-disaster-recovery), :root:not([data-mode="night"]) .page div[style*="background: #1e293b"]:not(.switch-chassis-container):not(.rack-frame-wrapper):not(.topology-diagram-container):not(#areaSummaryHeaderCard):not(.sec-system-disaster-recovery), :root:not([data-mode="night"]) .page div[style*="background:#0f172a"]:not(.switch-chassis-container):not(.rack-frame-wrapper):not(.topology-diagram-container):not(.rack-slots-column):not(.rack-u-label):not(.port-faceplate-item):not(#areaSummaryHeaderCard):not(.sec-system-disaster-recovery), :root:not([data-mode="night"]) .page div[style*="background: #0f172a"]:not(.switch-chassis-container):not(.rack-frame-wrapper):not(.topology-diagram-container):not(.rack-slots-column):not(.rack-u-label):not(.port-faceplate-item):not(#areaSummaryHeaderCard):not(.sec-system-disaster-recovery), :root:not([data-mode="night"]) .page section[style*="background:#1e293b"]:not(.sec-system-disaster-recovery), :root:not([data-mode="night"]) .page article[style*="background:#1e293b"], :root:not([data-mode="night"]) .page article[style*="background: #1e293b"] { background: #f8fafc !important; border-color: #cbd5e1 !important; color: #0f172a !important; } /* Sub-tarjetas anidadas dentro de tarjetas claras en Modo Claro */ :root:not([data-mode="night"]) .life-block:not(.life-status-banner) div[style*="background:#0f172a"], :root:not([data-mode="night"]) .page section[style*="background:#1e293b"] div[style*="background:#0f172a"], :root:not([data-mode="night"]) #faceplateFormPortDisplay { background: #ffffff !important; border-color: #cbd5e1 !important; color: #0f172a !important; } /* 1.4 Corrección Automática de Textos Claros Hardcodeados sobre Fondos Claros en Modo Diurno */ :root:not([data-mode="night"]) .modal :is(div, span, b, strong, p, h1, h2, h3, h4, small, label, td, th)[style*="color:#f8fafc"]:not(.badge):not(.status):not(button), :root:not([data-mode="night"]) .modal :is(div, span, b, strong, p, h1, h2, h3, h4, small, label, td, th)[style*="color: #f8fafc"]:not(.badge):not(.status):not(button), :root:not([data-mode="night"]) .modal :is(div, span, b, strong, p, h1, h2, h3, h4, small, label, td, th)[style*="color:#ffffff"]:not(.badge):not(.status):not(button), :root:not([data-mode="night"]) .modal :is(div, span, b, strong, p, h1, h2, h3, h4, small, label, td, th)[style*="color: #ffffff"]:not(.badge):not(.status):not(button), :root:not([data-mode="night"]) .modal :is(div, span, b, strong, p, h1, h2, h3, h4, small, label, td, th)[style*="color:#e2e8f0"]:not(.badge):not(.status):not(button), :root:not([data-mode="night"]) .modal :is(div, span, b, strong, p, h1, h2, h3, h4, small, label, td, th)[style*="color: #e2e8f0"]:not(.badge):not(.status):not(button), :root:not([data-mode="night"]) .modal :is(div, span, b, strong, p, h1, h2, h3, h4, small, label, td, th)[style*="color:#cbd5e1"]:not(.badge):not(.status):not(button), :root:not([data-mode="night"]) .modal :is(div, span, b, strong, p, h1, h2, h3, h4, small, label, td, th)[style*="color: #cbd5e1"]:not(.badge):not(.status):not(button), :root:not([data-mode="night"]) .page :is(div, span, b, strong, p, h1, h2, h3, h4, small, label, td, th)[style*="color:#f8fafc"]:not(.badge):not(.status):not(button), :root:not([data-mode="night"]) .page :is(div, span, b, strong, p, h1, h2, h3, h4, small, label, td, th)[style*="color: #f8fafc"]:not(.badge):not(.status):not(button), :root:not([data-mode="night"]) .page :is(div, span, b, strong, p, h1, h2, h3, h4, small, label, td, th)[style*="color:#e2e8f0"]:not(.badge):not(.status):not(button), :root:not([data-mode="night"]) .page :is(div, span, b, strong, p, h1, h2, h3, h4, small, label, td, th)[style*="color: #e2e8f0"]:not(.badge):not(.status):not(button), :root:not([data-mode="night"]) .page :is(div, span, b, strong, p, h1, h2, h3, h4, small, label, td, th)[style*="color:#cbd5e1"]:not(.badge):not(.status):not(button), :root:not([data-mode="night"]) .page :is(div, span, b, strong, p, h1, h2, h3, h4, small, label, td, th)[style*="color: #cbd5e1"]:not(.badge):not(.status):not(button) { color: #0f172a !important; } /* Etiquetas secundarias (.life-lbl y grises claros #94a3b8) en Modo Claro */ :root:not([data-mode="night"]) .modal .life-lbl, :root:not([data-mode="night"]) .modal :is(div, span, small, label, p, th)[style*="color:#94a3b8"]:not(.badge), :root:not([data-mode="night"]) .modal :is(div, span, small, label, p, th)[style*="color: #94a3b8"]:not(.badge), :root:not([data-mode="night"]) .page :is(div, span, small, label, p, th)[style*="color:#94a3b8"]:not(.badge), :root:not([data-mode="night"]) .page :is(div, span, small, label, p, th)[style*="color: #94a3b8"]:not(.badge) { color: #475569 !important; } /* Acentos cian/azul/amarillo/verde/rojo claros adaptados a tonos legibles sobre fondo blanco en Modo Claro */ :root:not([data-mode="night"]) .modal :is(div, span, b, strong, code, a)[style*="color:#38bdf8"]:not(.badge):not(button), :root:not([data-mode="night"]) .modal :is(div, span, b, strong, code, a)[style*="color:#60a5fa"]:not(.badge):not(button), :root:not([data-mode="night"]) .modal :is(div, span, b, strong, code, a)[style*="color:#7dd3fc"]:not(.badge):not(button), :root:not([data-mode="night"]) .modal :is(div, span, b, strong, code, a)[style*="color:#93c5fd"]:not(.badge):not(button), :root:not([data-mode="night"]) .page :is(div, span, b, strong, code, a)[style*="color:#38bdf8"]:not(.badge):not(button), :root:not([data-mode="night"]) .page :is(div, span, b, strong, code, a)[style*="color:#60a5fa"]:not(.badge):not(button), :root:not([data-mode="night"]) .page :is(div, span, b, strong, code, a)[style*="color:#7dd3fc"]:not(.badge):not(button), :root:not([data-mode="night"]) .page :is(div, span, b, strong, code, a)[style*="color:#93c5fd"]:not(.badge):not(button) { color: #0369a1 !important; } :root:not([data-mode="night"]) .modal :is(div, span, b, strong)[style*="color:#fde047"]:not(.badge), :root:not([data-mode="night"]) .modal :is(div, span, b, strong)[style*="color:#fcd34d"]:not(.badge), :root:not([data-mode="night"]) .modal :is(div, span, b, strong)[style*="color:#fbbf24"]:not(.badge), :root:not([data-mode="night"]) .modal :is(div, span, b, strong)[style*="color:#facc15"]:not(.badge), :root:not([data-mode="night"]) .page :is(div, span, b, strong)[style*="color:#fde047"]:not(.badge), :root:not([data-mode="night"]) .page :is(div, span, b, strong)[style*="color:#fcd34d"]:not(.badge), :root:not([data-mode="night"]) .page :is(div, span, b, strong)[style*="color:#fbbf24"]:not(.badge), :root:not([data-mode="night"]) .page :is(div, span, b, strong)[style*="color:#facc15"]:not(.badge) { color: #b45309 !important; } :root:not([data-mode="night"]) .modal :is(div, span, b, strong)[style*="color:#fdba74"]:not(.badge), :root:not([data-mode="night"]) .page :is(div, span, b, strong)[style*="color:#fdba74"]:not(.badge) { color: #c2410c !important; } :root:not([data-mode="night"]) .modal :is(div, span, b, strong)[style*="color:#86efac"]:not(.badge), :root:not([data-mode="night"]) .modal :is(div, span, b, strong)[style*="color:#34d399"]:not(.badge), :root:not([data-mode="night"]) .modal :is(div, span, b, strong)[style*="color:#4ade80"]:not(.badge), :root:not([data-mode="night"]) .page :is(div, span, b, strong)[style*="color:#86efac"]:not(.badge), :root:not([data-mode="night"]) .page :is(div, span, b, strong)[style*="color:#34d399"]:not(.badge), :root:not([data-mode="night"]) .page :is(div, span, b, strong)[style*="color:#4ade80"]:not(.badge) { color: #15803d !important; } :root:not([data-mode="night"]) .modal :is(div, span, b, strong)[style*="color:#fca5a5"]:not(.badge), :root:not([data-mode="night"]) .page :is(div, span, b, strong)[style*="color:#fca5a5"]:not(.badge) { color: #b91c1c !important; } :root:not([data-mode="night"]) .modal code[style*="color:#cbd5e1"], :root:not([data-mode="night"]) .page code[style*="color:#cbd5e1"] { color: #1e293b !important; background: #e2e8f0 !important; padding: 1px 5px !important; border-radius: 4px !important; } /* Preservar colores claros dentro de componentes de hardware genuinamente oscuros y banners oscuros */ :root:not([data-mode="night"]) :is(.switch-chassis-container, .rack-frame-wrapper, .topology-diagram-container) [style*="color:#f8fafc"], :root:not([data-mode="night"]) :is(.switch-chassis-container, .rack-frame-wrapper, .topology-diagram-container) [style*="color:#ffffff"], :root:not([data-mode="night"]) :is(.switch-chassis-container, .rack-frame-wrapper, .topology-diagram-container) [style*="color:#e2e8f0"], :root:not([data-mode="night"]) :is(.switch-chassis-container, .rack-frame-wrapper, .topology-diagram-container) [style*="color:#cbd5e1"] { color: #f8fafc !important; } :root:not([data-mode="night"]) :is(.switch-chassis-container, .rack-frame-wrapper, .topology-diagram-container) [style*="color:#94a3b8"] { color: #94a3b8 !important; } :root:not([data-mode="night"]) :is(.switch-chassis-container, .rack-frame-wrapper, .topology-diagram-container) [style*="color:#38bdf8"] { color: #38bdf8 !important; } /* Banners de estado (.life-status-banner) en Modo Claro: fondo pastel limpio y texto oscuro de alto contraste */ :root:not([data-mode="night"]) .life-status-banner[style*="background:#064e3b"] { background: #ecfdf5 !important; border-color: #10b981 !important; } :root:not([data-mode="night"]) .life-status-banner[style*="background:#451a03"] { background: #fffbeb !important; border-color: #f59e0b !important; } :root:not([data-mode="night"]) .life-status-banner[style*="background:#0c4a6e"] { background: #f0f9ff !important; border-color: #0284c7 !important; } :root:not([data-mode="night"]) .life-status-banner[style*="background:#450a0a"] { background: #fef2f2 !important; border-color: #ef4444 !important; } :root:not([data-mode="night"]) .life-status-banner :is(div, span, b, strong)[style*="color:#ffffff"], :root:not([data-mode="night"]) .life-status-banner :is(div, span, b, strong)[style*="color:#f8fafc"] { color: #0f172a !important; } :root:not([data-mode="night"]) .life-status-banner .life-lbl { color: #334155 !important; font-weight: 700 !important; } :root:not([data-mode="night"]) .life-status-banner [style*="color:#6ee7b7"] { color: #047857 !important; } :root:not([data-mode="night"]) .life-status-banner [style*="color:#fcd34d"], :root:not([data-mode="night"]) .life-status-banner [style*="color:#fbbf24"] { color: #b45309 !important; } :root:not([data-mode="night"]) .life-status-banner [style*="color:#7dd3fc"], :root:not([data-mode="night"]) .life-status-banner [style*="color:#38bdf8"] { color: #0369a1 !important; } :root:not([data-mode="night"]) .life-status-banner [style*="color:#fca5a5"] { color: #b91c1c !important; } /* Badges con fondo #0f172a o #1e293b en Modo Claro */ :root:not([data-mode="night"]) .badge[style*="background:#0f172a"], :root:not([data-mode="night"]) .badge[style*="background:#1e293b"], :root:not([data-mode="night"]) .badge-asset[style*="background:#1e293b"] { background: #f1f5f9 !important; color: #0f172a !important; border-color: #94a3b8 !important; } /* 1.5 Inputs, Selects y Botones Secundarios en Modales y Páginas en Modo Claro */ :root:not([data-mode="night"]) .modal input:not([type="checkbox"]):not([type="radio"]), :root:not([data-mode="night"]) .modal select, :root:not([data-mode="night"]) .modal textarea, :root:not([data-mode="night"]) #faceplatePortForm input, :root:not([data-mode="night"]) #faceplatePortForm select, :root:not([data-mode="night"]) #faceplateVlanCatalogSelect, :root:not([data-mode="night"]) #swFormVlanCatalogSelect, :root:not([data-mode="night"]) #swFormVlanId, :root:not([data-mode="night"]) #swFormVlanName, :root:not([data-mode="night"]) #netVlanPageForm input, :root:not([data-mode="night"]) #netVlanPageForm select, :root:not([data-mode="night"]) #net-activePage .filters-bar input, :root:not([data-mode="night"]) #net-activePage .filters-bar select, :root:not([data-mode="night"]) #net-passivePage .filters-bar input, :root:not([data-mode="night"]) #net-passivePage .filters-bar select, :root:not([data-mode="night"]) #net-roomsPage .filters-bar input, :root:not([data-mode="night"]) #net-roomsPage .filters-bar select, :root:not([data-mode="night"]) #net-ipsPage .filters-bar input, :root:not([data-mode="night"]) #net-ipsPage .filters-bar select, :root:not([data-mode="night"]) #delivery-actsPage input, :root:not([data-mode="night"]) #delivery-actsPage select, :root:not([data-mode="night"]) #backup-actsPage input, :root:not([data-mode="night"]) #backup-actsPage select, :root:not([data-mode="night"]) #backupActModal input, :root:not([data-mode="night"]) #backupActModal select, :root:not([data-mode="night"]) #backupActModal textarea, :root:not([data-mode="night"]) #backupActUploadModal input, :root:not([data-mode="night"]) #backupActApprovalModal input, :root:not([data-mode="night"]) #backupActSelectorModal input { background: #ffffff !important; color: #0f172a !important; border: 1px solid #cbd5e1 !important; } :root:not([data-mode="night"]) .modal button.secondary[style*="background:#334155"], :root:not([data-mode="night"]) .modal button.secondary[style*="background:#0f172a"], :root:not([data-mode="night"]) .page button.secondary[style*="background:#334155"], :root:not([data-mode="night"]) .page button.secondary[style*="background:#0f172a"], :root:not([data-mode="night"]) .page .sm-btn[style*="background:#1e293b"], :root:not([data-mode="night"]) .page .sm-btn[style*="background:#334155"], :root:not([data-mode="night"]) .page .sm-btn[style*="background:#0f172a"], :root:not([data-mode="night"]) .modal .sm-btn[style*="background:#1e293b"], :root:not([data-mode="night"]) .modal .sm-btn[style*="background:#334155"], :root:not([data-mode="night"]) .modal .sm-btn[style*="background:#0f172a"] { background: #f1f5f9 !important; color: #1e293b !important; border: 1px solid #cbd5e1 !important; } /* 1.6 Tablas en Modales y Páginas en Modo Claro */ :root:not([data-mode="night"]) .modal table, :root:not([data-mode="night"]) .page table { border-color: #cbd5e1 !important; } :root:not([data-mode="night"]) .modal thead tr, :root:not([data-mode="night"]) .modal th, :root:not([data-mode="night"]) .page thead tr, :root:not([data-mode="night"]) .page th { background: #f1f5f9 !important; color: #334155 !important; border-color: #cbd5e1 !important; } :root:not([data-mode="night"]) .modal tbody tr, :root:not([data-mode="night"]) .modal td, :root:not([data-mode="night"]) .page tbody tr, :root:not([data-mode="night"]) .page td { background: #ffffff !important; color: #1e293b !important; border-color: #e2e8f0 !important; } :root:not([data-mode="night"]) .modal tbody tr:hover td, :root:not([data-mode="night"]) .page tbody tr:hover td { background: #f0f9ff !important; color: #0f172a !important; } :root:not([data-mode="night"]) .modal div[style*="border:1px solid #334155"], :root:not([data-mode="night"]) .page div[style*="border:1px solid #334155"] { border-color: #cbd5e1 !important; } /* REGLAS GLOBALES PARA BADGES, PÍLDORAS Y EMOJIS (PREVENIR CORTES Y SALTOS DE LÍNEA) */ .badge, .badge-asset, .ping-status-pill, .history-status-pill, .history-part-pill, .ip-pill, .net-ip-badge { display: inline-flex !important; align-items: center !important; justify-content: center !important; white-space: nowrap !important; line-height: 1.25 !important; vertical-align: middle !important; box-sizing: border-box !important; } .badge span, .badge-asset span, .ip-pill span, .net-ip-badge span { display: inline-flex !important; align-items: center !important; line-height: 1 !important; } /* ADAPTACIÓN EN MODO CLARO PARA BADGES DE ESTADO (VERDE, ROJO, ÁMBAR, AZUL) */ :root:not([data-mode="night"]) .badge[style*="background:#064e3b"], :root:not([data-mode="night"]) .page span[style*="background:#064e3b"], :root:not([data-mode="night"]) .modal span[style*="background:#064e3b"] { background: #ecfdf5 !important; color: #047857 !important; border-color: #a7f3d0 !important; font-weight: 700 !important; } :root:not([data-mode="night"]) .badge[style*="background:#0c4a6e"], :root:not([data-mode="night"]) .page span[style*="background:#0c4a6e"], :root:not([data-mode="night"]) .modal span[style*="background:#0c4a6e"], :root:not([data-mode="night"]) .ip-pill, :root:not([data-mode="night"]) .net-ip-badge { background: #f0f9ff !important; color: #0284c7 !important; border: 1px solid #bae6fd !important; font-weight: 700 !important; } :root:not([data-mode="night"]) .ip-pill span, :root:not([data-mode="night"]) .net-ip-badge span { color: #0284c7 !important; } :root:not([data-mode="night"]) .badge[style*="background:#78350f"], :root:not([data-mode="night"]) .page span[style*="background:#78350f"], :root:not([data-mode="night"]) .modal span[style*="background:#78350f"] { background: #fffbeb !important; color: #b45309 !important; border-color: #fde68a !important; font-weight: 700 !important; } :root:not([data-mode="night"]) .badge[style*="background:#3b0764"], :root:not([data-mode="night"]) .badge[style*="background:#1e1b4b"], :root:not([data-mode="night"]) .page span[style*="background:#3b0764"], :root:not([data-mode="night"]) .page span[style*="background:#1e1b4b"] { background: #f5f3ff !important; color: #6d28d9 !important; border-color: #ddd6fe !important; font-weight: 700 !important; } :root:not([data-mode="night"]) .badge[style*="background:#450a0a"], :root:not([data-mode="night"]) .page span[style*="background:#450a0a"] { background: #fef2f2 !important; color: #b91c1c !important; border-color: #fecaca !important; font-weight: 700 !important; } /* PÍLDORAS DE PING NOC EN MODO CLARO */ :root:not([data-mode="night"]) .ping-status-pill.online { background: #ecfdf5 !important; color: #047857 !important; border-color: #a7f3d0 !important; } :root:not([data-mode="night"]) .ping-status-pill.warn { background: #fffbeb !important; color: #b45309 !important; border-color: #fde68a !important; } :root:not([data-mode="night"]) .ping-status-pill.offline { background: #fef2f2 !important; color: #b91c1c !important; border-color: #fecaca !important; } /* IPAM Y MAPA DE IPS EN MODO CLARO */ :root:not([data-mode="night"]) #net-ipsPage .heading ~ div[style*="background:#1e293b"], :root:not([data-mode="night"]) #netIpsPoolLegendBar, :root:not([data-mode="night"]) #net-ipsPage .filters-bar, :root:not([data-mode="night"]) #net-passivePage .filters-bar { background: #ffffff !important; border-color: #e2e8f0 !important; box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important; } :root:not([data-mode="night"]) #netIpSubnetSelector { background: #ffffff !important; color: #0f172a !important; border-color: #0284c7 !important; } :root:not([data-mode="night"]) #ipamSubnetBadge { background: #e0f2fe !important; color: #0284c7 !important; border-color: #bae6fd !important; } :root:not([data-mode="night"]) #ipamGatewayBadge, :root:not([data-mode="night"]) #ipamMaskBadge { background: #f8fafc !important; color: #334155 !important; border-color: #cbd5e1 !important; } :root:not([data-mode="night"]) #netIpsPoolLegendBar [style*="color:#d1fae5"] { color: #047857 !important; } :root:not([data-mode="night"]) #netIpsPoolLegendBar [style*="color:#e0f2fe"] { color: #0284c7 !important; } :root:not([data-mode="night"]) #netIpsPoolLegendBar [style*="color:#fef3c7"] { color: #b45309 !important; } :root:not([data-mode="night"]) #netIpsPoolLegendBar [style*="color:#ede9fe"] { color: #7e22ce !important; } :root:not([data-mode="night"]) #netIpsPoolLegendBar [style*="color:#94a3b8"] { color: #475569 !important; } :root:not([data-mode="night"]) #net-ipsPage .stat[style*="background:#1e293b"] { background: #ffffff !important; border-color: #e2e8f0 !important; color: #0f172a !important; box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important; } :root:not([data-mode="night"]) #net-ipsPage .stat .stat-top { color: #64748b !important; } :root:not([data-mode="night"]) #net-ipsPage .stat small { color: #64748b !important; } /* BOTÓN RACK Y ACCIONES EN MODO CLARO */ :root:not([data-mode="night"]) .page .sm-btn[style*="background:#1e1b4b"] { background: #eef2ff !important; border-color: #c7d2fe !important; color: #4338ca !important; font-weight: 700 !important; } :root:not([data-mode="night"]) .page .sm-btn[style*="background:#1e293b"] { background: #f1f5f9 !important; border-color: #cbd5e1 !important; color: #334155 !important; } /* TEXTOS EN TABLAS DE IPS Y PASIVOS EN MODO CLARO */ :root:not([data-mode="night"]) #netIpsTableBody b, :root:not([data-mode="night"]) #netPassiveTableBody b { color: #0f172a !important; } :root:not([data-mode="night"]) #netIpsTableBody div, :root:not([data-mode="night"]) #netPassiveTableBody div { color: #475569; } :root:not([data-mode="night"]) #netIpsTableBody b[style*="color:#38bdf8"], :root:not([data-mode="night"]) #netPassiveTableBody b[style*="color:#38bdf8"] { color: #0284c7 !important; } :root:not([data-mode="night"]) #netIpsPanelTitle { color: #0f172a !important; } :root:not([data-mode="night"]) #netIpsPanelSub { color: #64748b !important; } /* IP POOL GRID / MAP VIEW (.ip-box) EN MODO CLARO */ :root:not([data-mode="night"]) .ip-box.assigned span, :root:not([data-mode="night"]) .ip-box.assigned div { color: inherit; } :root:not([data-mode="night"]) .ip-box.assigned [style*="color:#ffffff"], :root:not([data-mode="night"]) .ip-box.assigned [style*="color: #ffffff"] { color: #ffffff !important; } :root:not([data-mode="night"]) .ip-box.assigned [style*="color:#e0f2fe"], :root:not([data-mode="night"]) .ip-box.assigned [style*="color:#d1fae5"], :root:not([data-mode="night"]) .ip-box.assigned [style*="color:#fef3c7"], :root:not([data-mode="night"]) .ip-box.assigned [style*="color:#ede9fe"], :root:not([data-mode="night"]) .ip-box.assigned [style*="color:#ccfbf1"] { color: inherit !important; } /* DRAWER INSPECTOR DE IP EN MODO CLARO */ :root:not([data-mode="night"]) #netIpInspectorDrawer { background: #ffffff !important; border-color: #cbd5e1 !important; color: #0f172a !important; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08) !important; } :root:not([data-mode="night"]) #netIpInspectorDrawer div[style*="background:#0f172a"], :root:not([data-mode="night"]) #netIpInspectorDrawer div[style*="background: #0f172a"] { background: #f8fafc !important; border-color: #e2e8f0 !important; } :root:not([data-mode="night"]) #netIpInspectorDrawer [style*="border-bottom:1px solid #334155"] { border-color: #e2e8f0 !important; } :root:not([data-mode="night"]) #netIpInspectorDrawer button[onclick*="closeIpInspector"] { background: #f1f5f9 !important; border-color: #cbd5e1 !important; color: #475569 !important; } :root:not([data-mode="night"]) #netIpInspectorDrawer div[style*="border-top:1px solid #1e293b"] { border-color: #e2e8f0 !important; } /* SUB-CONTENEDORES EN MODALES EN MODO CLARO */ :root:not([data-mode="night"]) .modal div[style*="background:#1e293b"]:not(.switch-chassis-container):not(.rack-frame-wrapper):not(.topology-diagram-container), :root:not([data-mode="night"]) .modal div[style*="background: #1e293b"]:not(.switch-chassis-container):not(.rack-frame-wrapper):not(.topology-diagram-container), :root:not([data-mode="night"]) .modal div[style*="background:#162032"], :root:not([data-mode="night"]) .modal div[style*="background:#0f172a"]:not(.switch-chassis-container):not(.rack-frame-wrapper):not(.topology-diagram-container), :root:not([data-mode="night"]) .modal div[style*="background: #0f172a"]:not(.switch-chassis-container):not(.rack-frame-wrapper):not(.topology-diagram-container) { background: #f8fafc !important; border-color: #e2e8f0 !important; color: #0f172a !important; } :root:not([data-mode="night"]) #mountRackDeviceModal .modal { background: #ffffff !important; border-color: #cbd5e1 !important; color: #0f172a !important; } :root:not([data-mode="night"]) #passiveAssetModal .modal { background: #ffffff !important; border-color: #cbd5e1 !important; color: #0f172a !important; } /* ------------------------------------------------------------------------ 2. MODO NOCTURNO (OSCURO) — :root[data-mode="night"], body[data-mode="night"] ------------------------------------------------------------------------ */ /* Garantizar que las tablas dentro de modales y páginas en Modo Nocturno NUNCA tengan cabeceras ni hovers blancos */ :root[data-mode="night"] .modal th, body[data-mode="night"] .modal th, :root[data-mode="night"] .page th, body[data-mode="night"] .page th, :root[data-mode="night"] .modal thead tr, body[data-mode="night"] .modal thead tr { background: #0f172a !important; color: #94a3b8 !important; border-color: #334155 !important; } :root[data-mode="night"] .modal td, body[data-mode="night"] .modal td, :root[data-mode="night"] .page td, body[data-mode="night"] .page td { background: transparent !important; color: #e2e8f0 !important; border-color: #1e293b !important; } :root[data-mode="night"] .modal tbody tr:hover td, body[data-mode="night"] .modal tbody tr:hover td, :root[data-mode="night"] .page tbody tr:hover td, body[data-mode="night"] .page tbody tr:hover td { background: rgba(30, 41, 59, 0.85) !important; color: #f8fafc !important; } :root[data-mode="night"] .life-block b, body[data-mode="night"] .life-block b, :root[data-mode="night"] .life-block strong, body[data-mode="night"] .life-block strong, :root[data-mode="night"] .modal b[style*="color:var(--ink)"], body[data-mode="night"] .modal b[style*="color:var(--ink)"], :root[data-mode="night"] .page b[style*="color:var(--ink)"], body[data-mode="night"] .page b[style*="color:var(--ink)"] { color: #f8fafc !important; } /* Tarjetas de Métricas Rápidas (KPIs) en Modo Nocturno */ :root[data-mode="night"] .life-metric-card, body[data-mode="night"] .life-metric-card { background: #1e293b !important; border: 1px solid #334155 !important; color: #f8fafc !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important; } :root[data-mode="night"] .life-metric-card .metric-label, body[data-mode="night"] .life-metric-card .metric-label { color: #94a3b8 !important; } :root[data-mode="night"] .life-metric-card .metric-val, body[data-mode="night"] .life-metric-card .metric-val { color: #f8fafc !important; } :root[data-mode="night"] .life-metric-card .metric-sub, body[data-mode="night"] .life-metric-card .metric-sub { color: #64748b !important; } :root[data-mode="night"] .life-metric-card.is-operativo, body[data-mode="night"] .life-metric-card.is-operativo { border-left: 4px solid #22c55e !important; } :root[data-mode="night"] .life-metric-card.is-operativo .metric-label, body[data-mode="night"] .life-metric-card.is-operativo .metric-label { color: #86efac !important; } :root[data-mode="night"] .life-metric-card.is-revision, body[data-mode="night"] .life-metric-card.is-revision { border-left: 4px solid #eab308 !important; } :root[data-mode="night"] .life-metric-card.is-revision .metric-label, body[data-mode="night"] .life-metric-card.is-revision .metric-label { color: #fde047 !important; } :root[data-mode="night"] .life-metric-card.is-baja, body[data-mode="night"] .life-metric-card.is-baja { border-left: 4px solid #f97316 !important; } :root[data-mode="night"] .life-metric-card.is-baja .metric-label, body[data-mode="night"] .life-metric-card.is-baja .metric-label { color: #fdba74 !important; } :root[data-mode="night"] .life-metric-card.is-soporte, body[data-mode="night"] .life-metric-card.is-soporte { border-left: 4px solid #3b82f6 !important; } :root[data-mode="night"] .life-metric-card.is-soporte .metric-label, body[data-mode="night"] .life-metric-card.is-soporte .metric-label { color: #93c5fd !important; } :root[data-mode="night"] .life-metric-card.is-obsolescencia, body[data-mode="night"] .life-metric-card.is-obsolescencia { border-left: 4px solid #f59e0b !important; } :root[data-mode="night"] .life-metric-card.is-obsolescencia .metric-label, body[data-mode="night"] .life-metric-card.is-obsolescencia .metric-label { color: #fcd34d !important; } :root[data-mode="night"] .life-metric-card.is-dano, body[data-mode="night"] .life-metric-card.is-dano { border-left: 4px solid #ef4444 !important; } :root[data-mode="night"] .life-metric-card.is-dano .metric-label, body[data-mode="night"] .life-metric-card.is-dano .metric-label { color: #fca5a5 !important; } /* Modales de Hoja de Vida en Modo Nocturno */ :root[data-mode="night"] .hoja-vida-modal, body[data-mode="night"] .hoja-vida-modal, :root[data-mode="night"] #assetLifeSheetModal .modal, body[data-mode="night"] #assetLifeSheetModal .modal, :root[data-mode="night"] #switchLifeSheetModal .modal, body[data-mode="night"] #switchLifeSheetModal .modal, :root[data-mode="night"] #centerLifeSheetModal .modal, body[data-mode="night"] #centerLifeSheetModal .modal, :root[data-mode="night"] #upsLifeSheetModal .modal, body[data-mode="night"] #upsLifeSheetModal .modal { background: #0f172a !important; color: #f8fafc !important; border: 1px solid #334155 !important; } :root[data-mode="night"] .hoja-vida-modal .life-block, body[data-mode="night"] .hoja-vida-modal .life-block, :root[data-mode="night"] #assetLifeSheetModal .life-block, body[data-mode="night"] #assetLifeSheetModal .life-block, :root[data-mode="night"] .hoja-vida-modal .life-qr-wrap, body[data-mode="night"] .hoja-vida-modal .life-qr-wrap, :root[data-mode="night"] #assetLifeSheetModal .life-qr-wrap, body[data-mode="night"] #assetLifeSheetModal .life-qr-wrap { background: #1e293b !important; border: 1px solid #334155 !important; color: #f8fafc !important; } :root[data-mode="night"] .hoja-vida-modal .life-block b, body[data-mode="night"] .hoja-vida-modal .life-block b, :root[data-mode="night"] .hoja-vida-modal .life-block strong, body[data-mode="night"] .hoja-vida-modal .life-block strong, :root[data-mode="night"] #assetLifeSheetModal .life-block b, body[data-mode="night"] #assetLifeSheetModal .life-block b, :root[data-mode="night"] #assetLifeSheetModal .life-block strong, body[data-mode="night"] #assetLifeSheetModal .life-block strong { color: #f8fafc !important; } :root[data-mode="night"] .hoja-vida-modal .life-lbl, body[data-mode="night"] .hoja-vida-modal .life-lbl, :root[data-mode="night"] #assetLifeSheetModal .life-lbl, body[data-mode="night"] #assetLifeSheetModal .life-lbl { color: #94a3b8 !important; } :root[data-mode="night"] .hoja-vida-modal .titulo-principal, body[data-mode="night"] .hoja-vida-modal .titulo-principal, :root[data-mode="night"] #assetLifeSheetModal .titulo-principal, body[data-mode="night"] #assetLifeSheetModal .titulo-principal { color: #f8fafc !important; } :root[data-mode="night"] .hoja-vida-modal .subtitulo, body[data-mode="night"] .hoja-vida-modal .subtitulo, :root[data-mode="night"] #assetLifeSheetModal .subtitulo, body[data-mode="night"] #assetLifeSheetModal .subtitulo { color: #38bdf8 !important; } :root[data-mode="night"] .hoja-vida-modal table, body[data-mode="night"] .hoja-vida-modal table, :root[data-mode="night"] #assetLifeSheetModal table, body[data-mode="night"] #assetLifeSheetModal table { border: 1px solid #334155 !important; } :root[data-mode="night"] .hoja-vida-modal th, body[data-mode="night"] .hoja-vida-modal th, :root[data-mode="night"] .hoja-vida-modal thead tr, body[data-mode="night"] .hoja-vida-modal thead tr, :root[data-mode="night"] #assetLifeSheetModal th, body[data-mode="night"] #assetLifeSheetModal th, :root[data-mode="night"] #assetLifeSheetModal thead tr, body[data-mode="night"] #assetLifeSheetModal thead tr { background: #0f172a !important; color: #94a3b8 !important; border: 1px solid #334155 !important; } :root[data-mode="night"] .hoja-vida-modal td, body[data-mode="night"] .hoja-vida-modal td, :root[data-mode="night"] #assetLifeSheetModal td, body[data-mode="night"] #assetLifeSheetModal td { background: transparent !important; color: #e2e8f0 !important; border: 1px solid #1e293b !important; } :root[data-mode="night"] .hoja-vida-modal tbody tr:hover td, body[data-mode="night"] .hoja-vida-modal tbody tr:hover td, :root[data-mode="night"] #assetLifeSheetModal tbody tr:hover td, body[data-mode="night"] #assetLifeSheetModal tbody tr:hover td { background: rgba(30, 41, 59, 0.85) !important; color: #f8fafc !important; } :root[data-mode="night"] .hoja-vida-modal .modal-foot button.secondary, body[data-mode="night"] .hoja-vida-modal .modal-foot button.secondary, :root[data-mode="night"] #assetLifeSheetModal .modal-foot button.secondary:not(#assetLifeSheetDeliveryActBtn), body[data-mode="night"] #assetLifeSheetModal .modal-foot button.secondary:not(#assetLifeSheetDeliveryActBtn) { background: #1e293b !important; border: 1px solid #334155 !important; color: #cbd5e1 !important; } /* Red y Equipos Activos en Modo Nocturno */ :root[data-mode="night"] :is(#net-activePage, #net-passivePage, #net-roomsPage, #net-ipsPage, #net-vlansPage, #net-topologyPage), body[data-mode="night"] :is(#net-activePage, #net-passivePage, #net-roomsPage, #net-ipsPage, #net-vlansPage, #net-topologyPage) { background: #0f172a !important; color: #f8fafc !important; } :root[data-mode="night"] #net-activePage section.panel, body[data-mode="night"] #net-activePage section.panel { background: #111827 !important; border-color: #334155 !important; color: #f8fafc !important; } :root[data-mode="night"] .wiring-center-accordion, body[data-mode="night"] .wiring-center-accordion { background: #1e293b !important; border-color: #334155 !important; } :root[data-mode="night"] .wiring-center-header, body[data-mode="night"] .wiring-center-header { background: #1e293b !important; color: #f8fafc !important; } :root[data-mode="night"] .wiring-center-body, body[data-mode="night"] .wiring-center-body { background: #111827 !important; border-top-color: #334155 !important; } :root[data-mode="night"] .switch-item-row, body[data-mode="night"] .switch-item-row { background: #1e293b !important; border-color: #334155 !important; color: #f8fafc !important; } :root[data-mode="night"] .switch-item-row b, body[data-mode="night"] .switch-item-row b { color: #f8fafc !important; } } /* ========================================================================== MODERN SAAS UI POLISH (TOPBAR, SIDEBAR SVG, KPIS, SEARCH, TABLES, NIGHT) ========================================================================== */ .topbar { position: sticky; top: 0; z-index: 100; background: #ffffff !important; border-bottom: 1px solid #e2e8f0 !important; transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04); } :root[data-mode="night"] .topbar, body[data-mode="night"] .topbar { background: #0f172a !important; border-bottom-color: #1e293b !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); } /* Sidebar SVG icons & refined navigation items */ .nav .ico { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: #94a3b8; transition: color 0.18s ease, transform 0.18s ease; } .nav .ico svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; } .nav button:hover .ico, .nav button.active .ico, .nav-group.open > button .ico { color: #60a5fa; transform: scale(1.05); } .nav button { font-weight: 500; transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease; } .sidefoot { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 11px 12px !important; margin-top: auto; transition: background 0.2s ease, border-color 0.2s ease; } .sidefoot:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.14); } /* QuickSearch Ctrl+K KBD & Focus Glow */ .dash-quicksearch-box { display: flex; gap: 10px; align-items: center; background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 8px 14px; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04); position: relative; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .dash-quicksearch-box:focus-within { border-color: var(--season-accent, #2563eb); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14), 0 4px 14px rgba(15, 23, 42, 0.06); } .qs-kbd { display: inline-flex; align-items: center; gap: 3px; font-family: 'DM Sans', sans-serif; font-size: 10.5px; font-weight: 700; color: var(--muted); background: var(--paper, #f1f5f9); border: 1px solid var(--line, #cbd5e1); border-bottom-width: 2px; border-radius: 6px; padding: 3px 7px; user-select: none; white-space: nowrap; } :root[data-mode="night"] .dash-quicksearch-box, body[data-mode="night"] .dash-quicksearch-box { background: #1e293b !important; border-color: #334155 !important; } :root[data-mode="night"] .qs-kbd, body[data-mode="night"] .qs-kbd { background: #0f172a !important; border-color: #475569 !important; color: #94a3b8 !important; } .dash-qs-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--line); cursor: pointer; border-radius: 8px; transition: background 0.15s ease; gap: 10px; } .dash-qs-item:hover, .dash-qs-item.is-selected { background: var(--paper, rgba(15, 23, 42, 0.05)); } .dash-qs-item:last-child { border-bottom: 0; } :root[data-mode="night"] .dash-qs-item:hover, body[data-mode="night"] .dash-qs-item:hover, :root[data-mode="night"] .dash-qs-item.is-selected, body[data-mode="night"] .dash-qs-item.is-selected { background: #27354a !important; } :root[data-mode="night"] #dashQuickSearchResults, body[data-mode="night"] #dashQuickSearchResults { background: #1e293b !important; border-color: #334155 !important; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5) !important; } .qs-tag-ip { font-size: 10.5px; font-family: ui-monospace, monospace; background: rgba(37,99,235,0.12); color: var(--season-accent, #2563eb); padding: 1px 6px; border-radius: 4px; font-weight: 600; } .qs-tag-kva { font-size: 10.5px; background: rgba(245,158,11,0.15); color: #f59e0b; padding: 1px 6px; border-radius: 4px; font-weight: 700; } /* KPI Cards Polish & Top Accent Borders */ .stats .stat { border-radius: 14px; padding: 18px 20px; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03); transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease; display: flex; flex-direction: column; justify-content: space-between; } .stats .stat::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3.5px; background: linear-gradient(90deg, #2563eb, #60a5fa); opacity: 0.9; } .stats .stat.kpi-ups::before { background: linear-gradient(90deg, #0284c7, #38bdf8); } .stats .stat.kpi-net::before { background: linear-gradient(90deg, #16a34a, #4ade80); } .stats .stat.maintenance-status-stat::before { background: linear-gradient(90deg, #6366f1, #a855f7); } .stat-ico { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .stat-ico svg { width: 19px; height: 19px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; } .maintenance-status-button { display: flex; align-items: center; justify-content: space-between; padding: 7px 10px !important; border-radius: 8px !important; transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .maintenance-status-button:hover { transform: translateY(-1px); } .maintenance-status-button b { margin: 0 !important; font-size: 15px !important; } /* Sticky Table Headers & SaaS Row Feel */ .tablewrap { max-height: 68vh; overflow: auto; border-radius: 0 0 12px 12px; } .tablewrap th { position: sticky; top: 0; z-index: 2; backdrop-filter: blur(6px); box-shadow: 0 1px 0 var(--line); } :root[data-mode="night"] #workflowDashboardAlertCard h3, body[data-mode="night"] #workflowDashboardAlertCard h3 { color: #f8fafc !important; } :root[data-mode="night"] #workflowDashboardAlertCard small, body[data-mode="night"] #workflowDashboardAlertCard small { color: #94a3b8 !important; } /* ========================================================================== BANDEJA DE AUDITORÍA Y DISCREPANCIAS DE HARDWARE (MODO CLARO Y NOCTURNO) ========================================================================== */ .btn-life-discrepancies { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; padding: 9px 15px; border-radius: 8px; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; transition: all 0.2s ease; } .btn-life-discrepancies:hover { background: #dbeafe; border-color: #93c5fd; transform: translateY(-1px); } #discrepanciesModal .modal { width: min(1150px, 96vw); max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; padding: 0 !important; background: #ffffff; border: 1px solid #cbd5e1; border-radius: 14px; box-shadow: 0 20px 45px rgba(15, 23, 42, 0.2); } .disc-modal-top { padding: 16px 22px; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center; background: #f8fafc; } .disc-modal-title { margin: 0; font-size: 17px; font-weight: 800; display: flex; align-items: center; gap: 9px; color: #0f172a; } .disc-modal-sub { font-size: 12px; color: #64748b; margin-top: 3px; } .disc-modal-close { background: transparent; border: none; font-size: 24px; line-height: 1; cursor: pointer; color: #64748b; padding: 4px 8px; border-radius: 6px; transition: all 0.15s ease; } .disc-modal-close:hover { color: #0f172a; background: #e2e8f0; } .disc-stats-bar { padding: 14px 22px; background: #ffffff; border-bottom: 1px solid #f1f5f9; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; } .disc-stat-card { border-radius: 8px; padding: 8px 14px; min-width: 140px; transition: transform 0.15s ease; } .disc-stat-card:hover { transform: translateY(-1px); } .disc-stat-card.stat-card-assets { background: #f0fdf4; border: 1px solid #bbf7d0; } .disc-stat-card.stat-card-assets .disc-stat-lbl { font-size: 11px; color: #166534; font-weight: 600; } .disc-stat-card.stat-card-assets .disc-stat-num { font-size: 19px; font-weight: 900; color: #15803d; } .disc-stat-card.stat-card-upgrades { background: #eff6ff; border: 1px solid #bfdbfe; } .disc-stat-card.stat-card-upgrades .disc-stat-lbl { font-size: 11px; color: #1e40af; font-weight: 600; } .disc-stat-card.stat-card-upgrades .disc-stat-num { font-size: 19px; font-weight: 900; color: #2563eb; } .disc-stat-card.stat-card-alerts { background: #fef2f2; border: 1px solid #fecaca; } .disc-stat-card.stat-card-alerts .disc-stat-lbl { font-size: 11px; color: #991b1b; font-weight: 600; } .disc-stat-card.stat-card-alerts .disc-stat-num { font-size: 19px; font-weight: 900; color: #dc2626; } .disc-btn-approve-all { background: #16a34a; border: 1px solid #15803d; color: #ffffff; padding: 9px 18px; font-size: 13px; font-weight: 800; display: inline-flex; align-items: center; gap: 8px; border-radius: 7px; cursor: pointer; box-shadow: 0 2px 6px rgba(22, 163, 74, 0.25); transition: all 0.15s ease; } .disc-btn-approve-all:hover { background: #15803d; box-shadow: 0 4px 10px rgba(22, 163, 74, 0.35); } .disc-filter-bar { padding: 10px 22px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; } .disc-filter-tabs { display: flex; gap: 6px; } .disc-filter-tab { font-weight: 700; padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 12px; border: 1px solid #cbd5e1; background: #ffffff; color: #475569; transition: all 0.15s ease; } .disc-filter-tab:hover { background: #f1f5f9; color: #0f172a; } .disc-filter-tab.active { background: #0284c7 !important; color: #ffffff !important; border-color: #0369a1 !important; box-shadow: 0 2px 6px rgba(2, 132, 199, 0.25) !important; } .disc-search-box { padding: 7px 13px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 12px; width: 290px; background: #ffffff; color: #0f172a; outline: none; transition: border-color 0.15s ease; } .disc-search-box:focus { border-color: #0284c7; box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.15); } .disc-table-wrap { flex: 1; overflow-y: auto; padding: 0; background: #ffffff; } .disc-table { width: 100%; border-collapse: collapse; font-size: 12px; } .disc-table thead { background: #f1f5f9; position: sticky; top: 0; z-index: 2; } .disc-table th { padding: 11px 16px; text-align: left; border-bottom: 1px solid #cbd5e1; color: #475569; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .disc-table td { padding: 11px 16px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; color: #1e293b; } .disc-table tbody tr:hover td { background: #f8fafc; } .disc-asset-id { font-weight: 800; color: #0f172a; font-size: 13px; } .disc-asset-meta { font-size: 11px; color: #64748b; margin-top: 2px; } .disc-area-name { font-weight: 600; color: #1e293b; } .disc-subarea-name { color: #64748b; font-size: 11px; } .disc-field-name { font-weight: 700; color: #334155; } .disc-code-current { background: #f1f5f9; color: #475569; padding: 3px 6px; border-radius: 4px; font-size: 11.5px; border: 1px solid #e2e8f0; } .disc-code-detected { padding: 3px 7px; border-radius: 4px; font-size: 11.5px; font-weight: 700; } .disc-code-detected.is-upgrade { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; } .disc-code-detected.is-alert { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; } .disc-badge { display: inline-block; border-radius: 999px; padding: 3px 9px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.02em; } .disc-badge.badge-upgrade { background: #dcfce7; color: #15803d; border: 1px solid #86efac; } .disc-badge.badge-alert { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; } .disc-btn-approve { background: #16a34a; color: #ffffff; border: none; padding: 5px 11px; border-radius: 5px; cursor: pointer; font-weight: 700; font-size: 11px; margin-right: 4px; transition: all 0.15s ease; } .disc-btn-approve:hover { background: #15803d; } .disc-btn-reject { background: #e2e8f0; color: #475569; border: 1px solid #cbd5e1; padding: 5px 9px; border-radius: 5px; cursor: pointer; font-weight: 600; font-size: 11px; transition: all 0.15s ease; } .disc-btn-reject:hover { background: #cbd5e1; color: #0f172a; } .disc-modal-foot { padding: 12px 22px; border-top: 1px solid #e2e8f0; background: #f8fafc; display: flex; justify-content: space-between; align-items: center; } .disc-foot-note { font-size: 11px; color: #64748b; } .disc-btn-close { background: #e2e8f0; color: #334155; border: 1px solid #cbd5e1; padding: 7px 18px; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 12px; transition: all 0.15s ease; } .disc-btn-close:hover { background: #cbd5e1; color: #0f172a; } /* --- DARK THEME OVERRIDES PARA AUDITORÍA Y DISCREPANCIAS --- */ :root[data-mode="night"] .btn-life-discrepancies, body[data-mode="night"] .btn-life-discrepancies { background: rgba(37, 99, 235, 0.18) !important; color: #60a5fa !important; border: 1px solid rgba(96, 165, 250, 0.35) !important; } :root[data-mode="night"] .btn-life-discrepancies:hover, body[data-mode="night"] .btn-life-discrepancies:hover { background: rgba(37, 99, 235, 0.3) !important; border-color: rgba(96, 165, 250, 0.6) !important; } :root[data-mode="night"] #discrepanciesModal .modal, body[data-mode="night"] #discrepanciesModal .modal { background: #0f172a !important; border: 1px solid #334155 !important; color: #f8fafc !important; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6) !important; } :root[data-mode="night"] .disc-modal-top, body[data-mode="night"] .disc-modal-top { background: #0f172a !important; border-bottom: 1px solid #334155 !important; } :root[data-mode="night"] .disc-modal-title, body[data-mode="night"] .disc-modal-title { color: #f8fafc !important; } :root[data-mode="night"] .disc-modal-sub, body[data-mode="night"] .disc-modal-sub { color: #94a3b8 !important; } :root[data-mode="night"] .disc-modal-close, body[data-mode="night"] .disc-modal-close { color: #94a3b8 !important; } :root[data-mode="night"] .disc-modal-close:hover, body[data-mode="night"] .disc-modal-close:hover { color: #f8fafc !important; background: #1e293b !important; } :root[data-mode="night"] .disc-stats-bar, body[data-mode="night"] .disc-stats-bar { background: #1e293b !important; border-bottom: 1px solid #334155 !important; } :root[data-mode="night"] .disc-stat-card.stat-card-assets, body[data-mode="night"] .disc-stat-card.stat-card-assets { background: rgba(22, 163, 74, 0.15) !important; border: 1px solid rgba(74, 222, 128, 0.3) !important; } :root[data-mode="night"] .disc-stat-card.stat-card-assets .disc-stat-lbl, body[data-mode="night"] .disc-stat-card.stat-card-assets .disc-stat-lbl { color: #86efac !important; } :root[data-mode="night"] .disc-stat-card.stat-card-assets .disc-stat-num, body[data-mode="night"] .disc-stat-card.stat-card-assets .disc-stat-num { color: #4ade80 !important; } :root[data-mode="night"] .disc-stat-card.stat-card-upgrades, body[data-mode="night"] .disc-stat-card.stat-card-upgrades { background: rgba(37, 99, 235, 0.18) !important; border: 1px solid rgba(96, 165, 250, 0.35) !important; } :root[data-mode="night"] .disc-stat-card.stat-card-upgrades .disc-stat-lbl, body[data-mode="night"] .disc-stat-card.stat-card-upgrades .disc-stat-lbl { color: #93c5fd !important; } :root[data-mode="night"] .disc-stat-card.stat-card-upgrades .disc-stat-num, body[data-mode="night"] .disc-stat-card.stat-card-upgrades .disc-stat-num { color: #60a5fa !important; } :root[data-mode="night"] .disc-stat-card.stat-card-alerts, body[data-mode="night"] .disc-stat-card.stat-card-alerts { background: rgba(239, 68, 68, 0.15) !important; border: 1px solid rgba(248, 113, 113, 0.35) !important; } :root[data-mode="night"] .disc-stat-card.stat-card-alerts .disc-stat-lbl, body[data-mode="night"] .disc-stat-card.stat-card-alerts .disc-stat-lbl { color: #fca5a5 !important; } :root[data-mode="night"] .disc-stat-card.stat-card-alerts .disc-stat-num, body[data-mode="night"] .disc-stat-card.stat-card-alerts .disc-stat-num { color: #f87171 !important; } :root[data-mode="night"] .disc-filter-bar, body[data-mode="night"] .disc-filter-bar { background: #0f172a !important; border-bottom: 1px solid #334155 !important; } :root[data-mode="night"] .disc-filter-tab, body[data-mode="night"] .disc-filter-tab { background: #1e293b !important; border: 1px solid #334155 !important; color: #94a3b8 !important; } :root[data-mode="night"] .disc-filter-tab:hover, body[data-mode="night"] .disc-filter-tab:hover { background: #334155 !important; color: #f8fafc !important; } :root[data-mode="night"] .disc-filter-tab.active, body[data-mode="night"] .disc-filter-tab.active { background: #2563eb !important; border-color: #3b82f6 !important; color: #ffffff !important; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4) !important; } :root[data-mode="night"] .disc-search-box, body[data-mode="night"] .disc-search-box { background: #1e293b !important; border: 1px solid #334155 !important; color: #f8fafc !important; } :root[data-mode="night"] .disc-search-box:focus, body[data-mode="night"] .disc-search-box:focus { border-color: #38bdf8 !important; box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2) !important; } :root[data-mode="night"] .disc-table-wrap, body[data-mode="night"] .disc-table-wrap { background: #0f172a !important; } :root[data-mode="night"] .disc-table thead, body[data-mode="night"] .disc-table thead { background: #1e293b !important; } :root[data-mode="night"] .disc-table th, body[data-mode="night"] .disc-table th { background: #1e293b !important; color: #94a3b8 !important; border-bottom: 1px solid #334155 !important; } :root[data-mode="night"] .disc-table td, body[data-mode="night"] .disc-table td { border-bottom: 1px solid #334155 !important; color: #f8fafc !important; } :root[data-mode="night"] .disc-table tbody tr:hover td, body[data-mode="night"] .disc-table tbody tr:hover td { background: rgba(30, 41, 59, 0.6) !important; } :root[data-mode="night"] .disc-asset-id, body[data-mode="night"] .disc-asset-id { color: #f8fafc !important; } :root[data-mode="night"] .disc-asset-meta, body[data-mode="night"] .disc-asset-meta { color: #94a3b8 !important; } :root[data-mode="night"] .disc-area-name, body[data-mode="night"] .disc-area-name { color: #e2e8f0 !important; } :root[data-mode="night"] .disc-subarea-name, body[data-mode="night"] .disc-subarea-name { color: #94a3b8 !important; } :root[data-mode="night"] .disc-field-name, body[data-mode="night"] .disc-field-name { color: #cbd5e1 !important; } :root[data-mode="night"] .disc-code-current, body[data-mode="night"] .disc-code-current { background: rgba(255, 255, 255, 0.05) !important; color: #cbd5e1 !important; border: 1px solid #334155 !important; } :root[data-mode="night"] .disc-code-detected.is-upgrade, body[data-mode="night"] .disc-code-detected.is-upgrade { background: rgba(22, 163, 74, 0.2) !important; color: #4ade80 !important; border: 1px solid rgba(74, 222, 128, 0.35) !important; } :root[data-mode="night"] .disc-code-detected.is-alert, body[data-mode="night"] .disc-code-detected.is-alert { background: rgba(239, 68, 68, 0.2) !important; color: #f87171 !important; border: 1px solid rgba(248, 113, 113, 0.35) !important; } :root[data-mode="night"] .disc-badge.badge-upgrade, body[data-mode="night"] .disc-badge.badge-upgrade { background: rgba(22, 163, 74, 0.2) !important; color: #4ade80 !important; border: 1px solid rgba(74, 222, 128, 0.35) !important; } :root[data-mode="night"] .disc-badge.badge-alert, body[data-mode="night"] .disc-badge.badge-alert { background: rgba(239, 68, 68, 0.2) !important; color: #f87171 !important; border: 1px solid rgba(248, 113, 113, 0.35) !important; } :root[data-mode="night"] .disc-btn-reject, body[data-mode="night"] .disc-btn-reject { background: #334155 !important; color: #cbd5e1 !important; border: 1px solid #475569 !important; } :root[data-mode="night"] .disc-btn-reject:hover, body[data-mode="night"] .disc-btn-reject:hover { background: #475569 !important; color: #ffffff !important; } :root[data-mode="night"] .disc-modal-foot, body[data-mode="night"] .disc-modal-foot { background: #0f172a !important; border-top: 1px solid #334155 !important; } :root[data-mode="night"] .disc-foot-note, body[data-mode="night"] .disc-foot-note { color: #94a3b8 !important; } :root[data-mode="night"] .disc-btn-close, body[data-mode="night"] .disc-btn-close { background: #334155 !important; color: #f8fafc !important; border: 1px solid #475569 !important; } :root[data-mode="night"] .disc-btn-close:hover, body[data-mode="night"] .disc-btn-close:hover { background: #475569 !important; color: #ffffff !important; }