/* =================================================== 1. SPINNER ADA (Carga de Dashboards) =================================================== */ @keyframes pulse-ada-white { 0% { transform: scale(0.85); opacity: 0.6; filter: invert(100%); } 50% { transform: scale(1.1); opacity: 1; filter: invert(100%); } 100% { transform: scale(0.85); opacity: 0.6; filter: invert(100%); } } .ada-spinner-white { animation: pulse-ada-white 1.5s infinite ease-in-out; width: 60px; height: auto; display: block; margin: 0 auto; filter: invert(100%); } /* =================================================== 2. BOTÓN "DATOS EN VIVO" (Landing Page) =================================================== */ @keyframes blink-live { 0% { opacity: 1; text-shadow: 0 0 8px rgba(255, 77, 77, 0.9); } 50% { opacity: 0.3; text-shadow: none; } 100% { opacity: 1; text-shadow: 0 0 8px rgba(255, 77, 77, 0.9); } } /* Fuerza el botón primario a usar dos líneas centradas */ .btn-live-data { display: inline-flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; line-height: 1.2 !important; padding: 10px 24px !important; } /* Fila 1: "● DATOS EN VIVO" */ .live-row-1 { display: flex; align-items: center; font-weight: 800; font-size: 15px; margin-bottom: 2px; } /* El punto rojo titilante */ .live-dot { color: #ff4d4d; animation: blink-live 1.5s infinite ease-in-out; margin-right: 6px; font-size: 14px; } /* Fila 2: "Consumo en Argentina" */ .live-row-2 { font-size: 11px; font-weight: 600; opacity: 0.9; } /* =================================================== 3. LOGISTICS COMMAND CENTER =================================================== */ .logi-command-center .Select-control, .logi-command-center .Select-menu-outer, .logi-command-center .Select-menu, .logi-command-center .DateRangePickerInput, .logi-command-center .DateInput_input { background: #0B1220 !important; border-color: #30363D !important; color: #C9D1D9 !important; } .logi-command-center .Select-control, .logi-command-center .DateRangePickerInput { border-radius: 10px !important; min-height: 38px !important; box-shadow: none !important; } .logi-command-center .Select-value-label, .logi-command-center .Select-placeholder, .logi-command-center .Select-input > input, .logi-command-center .DateInput_input { color: #C9D1D9 !important; font-size: 12px !important; } .logi-command-center .Select-arrow-zone, .logi-command-center .DateInput_input__focused, .logi-command-center .DateRangePickerInput_arrow_svg { color: #8B949E !important; fill: #8B949E !important; } .logi-command-center .Select-option { background: #0B1220 !important; color: #C9D1D9 !important; } .logi-command-center .Select-option.is-focused { background: #161B22 !important; } .logi-command-center .CalendarDay__default, .logi-command-center .CalendarDay__default:hover { background: #0B1220 !important; border-color: #30363D !important; color: #C9D1D9 !important; } .logi-command-center .CalendarDay__selected, .logi-command-center .CalendarDay__selected:hover, .logi-command-center .CalendarDay__selected_span { background: #58A6FF !important; border-color: #58A6FF !important; color: #08121F !important; } /* =================================================== 4. HELIX / GRID RM — LIGHT THEME Applied when via clientside callback =================================================== */ /* Sidebar text & label overrides */ body.rm-light #rm-sidebar { color: #1F2328; } body.rm-light #rm-sidebar div[style*="color"] { color: #656D76 !important; } /* Labels (uppercase small caps above controls) */ body.rm-light #rm-sidebar .rm-label { color: #656D76 !important; } /* Radio / Checklist labels */ body.rm-light #rm-sidebar .form-check-label { color: #1F2328 !important; } body.rm-light #rm-sidebar .form-check-input { border-color: #D0D7DE !important; } /* dcc.Dropdown in sidebar */ body.rm-light #rm-sidebar .Select-control { background-color: #FFFFFF !important; border-color: #D0D7DE !important; color: #1F2328 !important; } body.rm-light #rm-sidebar .Select-menu-outer { background-color: #FFFFFF !important; border-color: #D0D7DE !important; } body.rm-light #rm-sidebar .Select-option { color: #1F2328 !important; background: #FFFFFF !important; } body.rm-light #rm-sidebar .Select-option.is-focused { background: #F6F8FA !important; } body.rm-light #rm-sidebar .Select-value-label, body.rm-light #rm-sidebar .Select-placeholder, body.rm-light #rm-sidebar .Select-input > input { color: #1F2328 !important; } /* DatePickerRange */ body.rm-light #rm-sidebar .DateInput_input { background: #FFFFFF !important; color: #1F2328 !important; border-color: #D0D7DE !important; } body.rm-light #rm-sidebar .DateRangePickerInput { background: #FFFFFF !important; border-color: #D0D7DE !important; } /* Toggle button (☰) — sits outside sidebar so scoped to rm-panel-toggle id */ body.rm-light #rm-panel-toggle { background-color: #FFFFFF !important; color: #1F2328 !important; border-color: #D0D7DE !important; } /* Sidebar action buttons (⟳, ⬇ CSV) */ body.rm-light #rm-sidebar .btn { border-color: #D0D7DE !important; color: #1F2328 !important; } /* Logout button — hardcoded bg in Python; CSS override needed for light mode */ body.rm-light #grm-logout-submit { background-color: #F6F8FA !important; color: #656D76 !important; border-color: #D0D7DE !important; } /* Page background override — content area picks up bg from inline style via callback but html/body need to be light too to avoid dark flash */ body.rm-light { background-color: #F6F8FA; } /* =================================================== 5. FARDO DATA CONTROL CENTER =================================================== */ .fardo-page .Select-control, .fardo-page .Select-menu-outer, .fardo-page .Select-menu, .fardo-page .DateRangePickerInput, .fardo-page .DateInput_input { background: #0B1220 !important; border-color: #30363D !important; color: #C9D1D9 !important; box-shadow: none !important; } .fardo-page .Select-control, .fardo-page .DateRangePickerInput { border-radius: 9px !important; min-height: 36px !important; } .fardo-page .Select-value-label, .fardo-page .Select-placeholder, .fardo-page .Select-input > input, .fardo-page .DateInput_input { color: #C9D1D9 !important; font-size: 12px !important; font-weight: 700 !important; } .fardo-page .Select-option { background: #0B1220 !important; color: #C9D1D9 !important; font-size: 12px !important; } .fardo-page .Select-option.is-focused { background: #161B22 !important; } .fardo-page .tab { background: #0B1220 !important; color: #8B949E !important; border-color: #30363D !important; font-weight: 800 !important; font-size: 12px !important; padding: 10px 12px !important; } .fardo-page .tab--selected { background: #161B22 !important; color: #F0F6FC !important; border-top: 3px solid #58A6FF !important; } .fardo-page .info-badge { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.45); color: #94A3B8; font-size: 11px; font-weight: 800; margin-left: 8px; cursor: help; background: rgba(15, 23, 42, 0.65); text-transform: none; letter-spacing: 0; line-height: 1; } .fardo-page .info-badge:hover { color: #E2E8F0; border-color: rgba(226, 232, 240, 0.75); background: rgba(30, 41, 59, 0.95); } .fardo-page .kpi-sparkline { opacity: 0.35; } .npl-kpi-info-icon { align-items: center; background: rgba(148, 163, 184, 0.12); border: 1px solid rgba(148, 163, 184, 0.42); border-radius: 999px; color: #C9D1D9; cursor: pointer; display: inline-flex; font-size: 10px; font-weight: 900; height: 18px; justify-content: center; line-height: 1; outline: none; user-select: none; width: 18px; } .npl-kpi-info-icon:hover, .npl-kpi-info-icon:focus { background: rgba(76, 201, 240, 0.18); border-color: rgba(76, 201, 240, 0.75); color: #FFFFFF; box-shadow: 0 0 0 2px rgba(76, 201, 240, 0.16); } .npl-kpi-popover { --bs-popover-max-width: 420px; --bs-popover-bg: #161B22; --bs-popover-border-color: rgba(148, 163, 184, 0.35); --bs-popover-header-bg: #0D1117; --bs-popover-header-color: #FFFFFF; --bs-popover-body-color: #C9D1D9; box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42); } .npl-kpi-popover-header { border-bottom: 1px solid rgba(148, 163, 184, 0.24); font-size: 13px; font-weight: 900; } .npl-kpi-popover-body { display: grid; gap: 9px; max-width: 420px; } .npl-kpi-popover-section { display: grid; gap: 3px; } .npl-kpi-popover-section-title { color: #FFFFFF; font-size: 10px; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; } .npl-kpi-popover-text, .npl-kpi-popover-actions, .npl-kpi-popover-learn-more { color: #C9D1D9; font-size: 11px; line-height: 1.42; margin: 0; } .npl-kpi-popover-actions { padding-left: 16px; } .npl-kpi-popover-learn-more { border-top: 1px solid rgba(148, 163, 184, 0.18); color: #4CC9F0; font-weight: 800; padding-top: 8px; } .npl-action-toolbar { align-items: flex-start; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; } .npl-action-group { background: rgba(15, 23, 42, 0.34); border: 1px solid #30363D; border-radius: 12px; display: flex; flex-direction: column; gap: 7px; padding: 8px; } .npl-action-group-planning { border-color: rgba(14, 165, 233, 0.32); } .npl-action-group-editing { border-color: rgba(45, 212, 191, 0.30); } .npl-action-group-flight { border-color: rgba(139, 92, 246, 0.30); } .npl-action-group-danger { border-color: rgba(248, 81, 73, 0.32); } .npl-action-group-title { color: #8B949E; font-size: 10px; font-weight: 900; letter-spacing: 0.08em; line-height: 1; text-transform: uppercase; } .npl-action-group-grid { align-items: center; display: grid; gap: 6px; } .npl-action-group-grid.cols-1 { grid-template-columns: minmax(112px, max-content); } .npl-action-group-grid.cols-2 { grid-template-columns: repeat(2, minmax(112px, max-content)); } .npl-action-group-grid.cols-3 { grid-template-columns: repeat(3, minmax(112px, max-content)); } .npl-action-button-wrap { display: inline-flex; min-width: 0; } .npl-action-button { border: 0; border-radius: 8px; box-shadow: none; color: #FFFFFF; cursor: pointer; font-size: 11px; font-weight: 800; line-height: 1; min-height: 32px; min-width: 112px; padding: 7px 10px; white-space: nowrap; } .npl-action-button:hover { filter: brightness(1.1); } .npl-action-button:focus { outline: 2px solid rgba(76, 201, 240, 0.85); outline-offset: 2px; } .npl-action-button.destructive { box-shadow: 0 0 0 1px rgba(248, 81, 73, 0.45) inset; } .npl-action-popover { --bs-popover-max-width: 360px; --bs-popover-bg: #161B22; --bs-popover-border-color: rgba(148, 163, 184, 0.35); --bs-popover-header-bg: #0D1117; --bs-popover-header-color: #FFFFFF; --bs-popover-body-color: #C9D1D9; box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42); } .npl-action-popover-header { border-bottom: 1px solid rgba(148, 163, 184, 0.24); font-size: 13px; font-weight: 900; } .npl-action-popover-body { display: grid; font-size: 11px; gap: 7px; line-height: 1.42; } .npl-action-popover-lead { color: #FFFFFF; font-weight: 700; } .npl-action-popover-line { color: #C9D1D9; } @media (max-width: 900px) { .npl-action-group-grid.cols-2, .npl-action-group-grid.cols-3 { grid-template-columns: repeat(2, minmax(112px, max-content)); } } .npl-network-map-section { background: rgba(15, 23, 42, 0.30); border: 1px solid #30363D; border-radius: 12px; margin-top: 14px; padding: 12px; } .npl-network-map-header { align-items: center; display: flex; gap: 12px; justify-content: space-between; margin-bottom: 12px; } .npl-network-map-title { color: #FFFFFF; font-size: 14px; font-weight: 900; letter-spacing: 0.02em; } .npl-network-map-subtitle { color: #8B949E; font-size: 11px; line-height: 1.4; } .npl-network-map-controls { align-items: end; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 12px; } .npl-network-map-empty { align-items: center; background: #161B22; border: 1px dashed rgba(148, 163, 184, 0.28); border-radius: 12px; color: #8B949E; display: flex; font-size: 12px; justify-content: center; min-height: 240px; padding: 16px; text-align: center; } .npl-network-map-summary { display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 12px; } .npl-network-map-card { background: #161B22; border: 1px solid #30363D; border-radius: 12px; padding: 10px 12px; } .npl-network-map-card-title { color: #8B949E; font-size: 10px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; } .npl-network-map-card-value { color: #FFFFFF; font-size: 16px; font-weight: 900; margin-top: 4px; } .npl-network-map-card-subtitle { color: #8B949E; font-size: 11px; line-height: 1.35; margin-top: 3px; } .npl-compact-dropdown .Select-control, .npl-compact-dropdown .Select-value, .npl-compact-dropdown .Select-placeholder { min-height: 34px; height: 34px; line-height: 32px; font-size: 12px; } .npl-compact-dropdown .Select-value-label { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .npl-compact-dropdown .VirtualizedSelectOption, .npl-compact-dropdown .Select-option { font-size: 12px; padding: 6px 10px; } .npl-plan-header-panel { align-items: end; column-gap: 18px; display: grid; grid-template-columns: minmax(0, 1fr) auto; width: 100%; } .npl-create-edit-zone, .npl-replicate-zone { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .npl-zone-title, .npl-replicate-title { color: #C9D1D9; font-size: 12px; font-weight: 800; letter-spacing: 0.02em; line-height: 1.05; margin: 0; white-space: nowrap; } .npl-create-edit-row { align-items: flex-end; display: flex; flex-wrap: nowrap; gap: 8px; min-width: 0; } .npl-replicate-row { align-items: flex-end; display: flex; flex-wrap: nowrap; gap: 8px; } .npl-field { min-width: 0; } .npl-field-label-row, .npl-market-label-row { align-items: center; display: flex; gap: 6px; min-height: 14px; } .npl-field-label { color: #C9D1D9; font-size: 12px; font-weight: 700; line-height: 1.05; margin: 0; white-space: nowrap; } .npl-market-field { max-width: 220px; min-width: 160px; } .npl-market-label-row { justify-content: space-between; } .npl-market-manage-btn { align-items: center; background: rgba(76, 201, 240, 0.1); border: 1px solid rgba(76, 201, 240, 0.35); border-radius: 999px; color: #BAE6FD; cursor: pointer; display: inline-flex; font-size: 12px; font-weight: 900; height: 18px; justify-content: center; line-height: 1; padding: 0; width: 18px; } .npl-market-manage-btn:hover, .npl-market-manage-btn:focus { background: rgba(76, 201, 240, 0.18); border-color: rgba(76, 201, 240, 0.75); color: #FFFFFF; outline: none; } .npl-operating-days-options { align-items: center; display: flex; flex-wrap: nowrap; gap: 4px; min-height: 34px; } .npl-frequency-days { align-items: center; display: inline-flex; flex-wrap: nowrap; gap: 4px; } .npl-frequency-day-label { align-items: center; background: rgba(15, 23, 42, 0.82); border: 1px solid #30363D; border-radius: 8px; color: #C9D1D9; cursor: pointer; display: inline-flex; font-size: 10.5px; font-weight: 900; gap: 4px; min-height: 26px; min-width: 28px; padding: 3px 6px; } .npl-frequency-day-label:hover { border-color: rgba(76, 201, 240, 0.65); color: #FFFFFF; } .npl-frequency-day-input { margin: 0; } .npl-frequency-reset { align-self: center; background: transparent; border: 1px solid #30363D; border-radius: 8px; color: #8B949E; cursor: pointer; font-size: 10px; font-weight: 800; min-height: 26px; padding: 4px 8px; white-space: nowrap; } .npl-frequency-reset:hover, .npl-frequency-reset:focus { border-color: rgba(76, 201, 240, 0.65); color: #FFFFFF; outline: none; } .npl-date-input .SingleDatePickerInput, .npl-replicate-date .SingleDatePickerInput, .npl-compact-date-input .SingleDatePickerInput { background: #0B1220 !important; border: 1px solid #30363D !important; border-radius: 4px !important; height: 34px !important; } .npl-date-input .DateInput, .npl-replicate-date .DateInput, .npl-compact-date-input .DateInput { background: #0B1220 !important; height: 32px !important; width: 116px !important; } .npl-date-input .DateInput_input, .npl-replicate-date .DateInput_input, .npl-compact-date-input .DateInput_input { background: #0B1220 !important; color: #C9D1D9 !important; font-size: 12px !important; font-weight: 700 !important; height: 32px !important; line-height: 18px !important; padding: 5px 8px !important; } .npl-date-input .DateInput_input__focused, .npl-replicate-date .DateInput_input__focused, .npl-compact-date-input .DateInput_input__focused { border-bottom-color: #4CC9F0 !important; } .npl-time-input, .npl-compact-time-input { background: #0B1220 !important; border: 1px solid #30363D !important; border-radius: 4px !important; color: #C9D1D9 !important; font-size: 12px !important; font-weight: 700 !important; height: 34px !important; line-height: 18px !important; padding: 6px 8px !important; } .npl-time-input:focus, .npl-compact-time-input:focus { border-color: #4CC9F0 !important; outline: none !important; } .npl-time-input::placeholder, .npl-compact-time-input::placeholder { color: #8B949E; font-size: 11px; } .npl-time-picker { align-items: center; background: #0B1220; border: 1px solid #30363D; border-radius: 10px; display: flex; gap: 2px; height: 34px; padding: 2px 4px; width: 100%; } .npl-time-separator { color: #8B949E; font-size: 13px; font-weight: 900; line-height: 1; padding-bottom: 1px; } .npl-time-wheel-dropdown { width: 47px; } .npl-time-wheel-dropdown .Select-control { background: transparent !important; border: 0 !important; box-shadow: none !important; cursor: pointer; height: 28px !important; min-height: 28px !important; } .npl-time-wheel-dropdown .Select-value, .npl-time-wheel-dropdown .Select-placeholder { color: #F8FAFC !important; font-size: 12px !important; font-weight: 800 !important; height: 28px !important; line-height: 28px !important; padding-left: 0 !important; padding-right: 0 !important; text-align: center; } .npl-time-wheel-dropdown .Select-value-label { color: #F8FAFC !important; display: block !important; font-size: 12px !important; font-weight: 800 !important; text-align: center; } .npl-time-wheel-dropdown .Select-arrow-zone { display: none !important; } .npl-time-wheel-dropdown .Select-menu-outer { background: #2F3033 !important; border: 1px solid #4B5563 !important; border-radius: 10px !important; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.42) !important; margin-top: 5px !important; max-height: 216px !important; overflow: hidden !important; width: 54px !important; z-index: 3000 !important; } .npl-time-wheel-dropdown .Select-menu { max-height: 214px !important; } .npl-time-wheel-dropdown .VirtualizedSelectOption, .npl-time-wheel-dropdown .Select-option { background: #2F3033 !important; color: #FFFFFF !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1.15 !important; padding: 9px 0 !important; text-align: center; } .npl-time-wheel-dropdown .VirtualizedSelectFocusedOption, .npl-time-wheel-dropdown .Select-option.is-focused, .npl-time-wheel-dropdown .Select-option.is-selected { background: #A7D0FF !important; color: #0F172A !important; } .npl-time-picker:focus-within { border-color: #4CC9F0; box-shadow: 0 0 0 1px rgba(76, 201, 240, 0.32); } .npl-compact-time-input::-webkit-datetime-edit-second-field, .npl-compact-time-input::-webkit-datetime-edit-millisecond-field { display: none; } @media (max-width: 1280px) { .npl-plan-header-panel { grid-template-columns: 1fr; row-gap: 8px; } .npl-create-edit-row { align-items: flex-start; flex-wrap: wrap; } .npl-replicate-row { flex-wrap: wrap; } } @media (max-width: 900px) { .npl-network-map-header { align-items: stretch; flex-direction: column; } .npl-network-map-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }