/** * DELP Brand – Custom Theme Overrides * Paleta oficial: * DELP RED #CC0F10 (cor primária / destaque) * DELP BLACK #000000 * DELP WHITE #FFFFFF * DELP SOLID #B0B0B0 * DELP MODERN #EAE5DF * DELP SUBSEA #2362D3 * DELP INDUSTRIA #FF6B05 * DELP SERVIÇOS #0B861D * DELP MOORING #213D75 */ /* ── Cores primárias (light mode) ───────────────────────────────────────── */ :root, [data-bs-theme=light] { --ds-primary: #CC0F10; --ds-primary-rgb: 204, 15, 16; --ds-primary-lighter: #fde8e8; --ds-primary-light: #f5a0a0; --ds-primary-dark: #8a0b0b; --ds-primary-darker: #5c0707; --ds-primary-text-emphasis: #8a0b0b; --ds-primary-bg-subtle: #fde8e8; --ds-primary-border-subtle: #f5a0a0; --ds-navbar-bg: #ffffff; /* Cores das torres do Medti — usadas pelo KpiCalculator::corTorre() via var(). */ --apex-tower-infraestrutura: #fd7e14; --apex-tower-sistemas: #0d6efd; --apex-tower-devops: #6f42c1; --apex-tower-business-partner: #20c997; --apex-tower-triagem: #dc3545; /* Matriz de prioridade do GLPI (Muito Baixa..Major) — mesma paleta usada no Painel Público e em /kpis/torres. Adicionada em 2026-07-08 pra essas telas pararem de fixar hex em PHP/JS e responderem ao tema 'contrast' (Okabe-Ito) igual às torres. */ --apex-prio-1: #28a745; --apex-prio-2: #0d6efd; --apex-prio-3: #ffc107; --apex-prio-4: #fd7e14; --apex-prio-5: #dc3545; --apex-prio-6: #a371f7; /* Verde/laranja/vermelho/neutro pra indicadores "vs meta" (SLA, CSAT, FCR, Reabertura) em /kpis/torres e no Dashboard. Criadas em 2026-07-08 — a primeira tentativa usou var(--bs-success/warning/danger/secondary) direto, mas esse tema NÃO expõe essas variáveis fora do bloco 'contrast' (só funcionava lá); daí var() ficava inválido em light/dark e o background/color inteiro era descartado pelo navegador (SLA gauge sumia, número ficava sem cor). --apex-status-* garante um valor válido nos 3 temas. */ --apex-status-ok: #198754; --apex-status-warn: #fd7e14; --apex-status-danger: #dc3545; --apex-status-neutral: #adb5bd; --apex-status-info: #0d6efd; } /* ── Cores primárias (dark mode) ────────────────────────────────────────── */ [data-bs-theme=dark] { --ds-primary: #CC0F10; --ds-primary-rgb: 204, 15, 16; --ds-primary-lighter: #5c0707; --ds-primary-light: #8a0b0b; --ds-primary-dark: #f5a0a0; --ds-primary-darker: #fde8e8; --ds-primary-text-emphasis: #f5a0a0; --ds-primary-bg-subtle: #2d0404; --ds-primary-border-subtle: #8a0b0b; --ds-navbar-bg: #1c252e; /* Cores das torres ajustadas para fundo escuro (mais saturadas). */ --apex-tower-infraestrutura: #ff9442; --apex-tower-sistemas: #4d8ff5; --apex-tower-devops: #9970d6; --apex-tower-business-partner: #3ddbb0; --apex-tower-triagem: #ef6e7c; /* Mesma matriz de prioridade, ajustada pra contraste em fundo escuro. */ --apex-prio-1: #3fb950; --apex-prio-2: #58a6ff; --apex-prio-3: #d29922; --apex-prio-4: #f0883e; --apex-prio-5: #f85149; --apex-prio-6: #bc8cff; /* Mesmos indicadores "vs meta", ajustados pra fundo escuro. */ --apex-status-ok: #3fb950; --apex-status-warn: #f0883e; --apex-status-danger: #f85149; --apex-status-neutral: #7d8590; --apex-status-info: #58a6ff; } /* ── Botões primários ────────────────────────────────────────────────────── */ .btn-primary { --ds-btn-bg: #CC0F10; --ds-btn-border-color: #CC0F10; --ds-btn-hover-bg: #a80d0e; --ds-btn-hover-border-color: #a80d0e; --ds-btn-active-bg: #8a0b0b; --ds-btn-active-border-color: #8a0b0b; } .btn-outline-primary { --ds-btn-color: #CC0F10; --ds-btn-border-color: #CC0F10; --ds-btn-hover-bg: #CC0F10; --ds-btn-hover-border-color: #CC0F10; } /* ── Links ───────────────────────────────────────────────────────────────── */ a { color: #CC0F10; } a:hover { color: #a80d0e; } /* ── Logo na sidebar ─────────────────────────────────────────────────────── */ #miniSidebar .brand-logo { min-height: 60px; display: flex; align-items: center; } /* ── Ícone de toggle da sidebar ──────────────────────────────────────────── */ .sidebar-toggle:hover { color: #CC0F10 !important; } /* ── Cores de utilidade da paleta DELP (classes auxiliares) ─────────────── */ .bg-delp-red { background-color: #CC0F10 !important; color: #fff !important; } .bg-delp-subsea { background-color: #2362D3 !important; color: #fff !important; } .bg-delp-industria { background-color: #FF6B05 !important; color: #fff !important; } .bg-delp-servicos { background-color: #0B861D !important; color: #fff !important; } .bg-delp-mooring { background-color: #213D75 !important; color: #fff !important; } .bg-delp-modern { background-color: #EAE5DF !important; color: #000 !important; } .text-delp-red { color: #CC0F10 !important; } /* ── Inputs: foco e borda ativa em DELP RED ─────────────────────────────── */ .form-control:focus, .form-select:focus { border-color: #CC0F10 !important; box-shadow: 0 0 0 0.2rem rgba(204, 15, 16, 0.18) !important; } .input-group-text { border-color: var(--ds-gray-300); } .input-group .form-control:focus ~ .input-group-text, .input-group:focus-within .input-group-text { border-color: #CC0F10; } /* ── Backdrop: sempre invisível por padrão (qualquer tamanho de tela) ──────── */ #sidebarBackdrop { display: none !important; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 1054; } /* ── Topbar largura total no mobile (tema define 480px, precisamos 992px) ── */ @media (max-width: 991.98px) { .navbar-glass { width: 100% !important; left: 0 !important; } } /* ────────────────────────────────────────────────────────────────────────── TEMA "CONTRAST" — Daltonismo Verde/Vermelho (deuteranopia / protanopia) ────────────────────────────────────────────────────────────────────────── IMPORTANTE: este tema é uma variação do tema CLARO (light), não um tema de "alto contraste" tradicional. Mantém todo o visual claro/branco do light — fundo, hierarquia, sombras, bordas — e troca APENAS as cores funcionais (verde, vermelho, amarelo, azul) pelas equivalentes da paleta Okabe-Ito, que são distinguíveis por pessoas com daltonismo verde-vermelho. Paleta Okabe-Ito usada (https://jfly.uni-koeln.de/color/): primary #0072B2 azul forte (substitui o vermelho DELP — ação/links) success #009E73 verde-azulado (substitui o verde Bootstrap) danger #D55E00 vermelho-alaranjado vibrante warning #F0E442 amarelo claro (texto preto em cima) info #56B4E9 azul céu Reforço não-cor (sutil, sem poluir): badges e textos semânticos ganham font-weight 600. Sem ícones unicode injetados, sem bordas grossas, sem mudar o fundo. O usuário sem daltonismo nem nota a diferença visual. Ativação: ────────────────────────────────────────────────────────────────────────── */ [data-bs-theme="contrast"] { /* ── Base: igual ao light (Bootstrap default) ────────────────────────── */ /* Não sobrescrevemos --bs-body-bg, --bs-body-color, --bs-border-color, etc. — o light é a base e só trocamos o que é cor funcional. */ /* ── Cores funcionais Okabe-Ito ──────────────────────────────────────── */ --bs-primary: #0072B2; --bs-primary-rgb: 0, 114, 178; --bs-success: #009E73; --bs-success-rgb: 0, 158, 115; --bs-danger: #D55E00; --bs-danger-rgb: 213, 94, 0; --bs-warning: #F0E442; --bs-warning-rgb: 240, 228, 66; --bs-info: #56B4E9; --bs-info-rgb: 86, 180, 233; /* ── Variações "subtle" / "emphasis" — ajustadas pra paleta nova ────── */ --bs-primary-bg-subtle: #d6ebf6; --bs-primary-border-subtle: #abd6ed; --bs-primary-text-emphasis: #004d7a; --bs-success-bg-subtle: #cceee2; --bs-success-border-subtle: #9addbf; --bs-success-text-emphasis: #00604a; --bs-danger-bg-subtle: #f7dbcc; --bs-danger-border-subtle: #efb799; --bs-danger-text-emphasis: #8a3d00; --bs-warning-bg-subtle: #fcf9d3; --bs-warning-border-subtle: #f8f3a8; --bs-warning-text-emphasis: #807821; --bs-info-bg-subtle: #ddeffb; --bs-info-border-subtle: #bbe0f7; --bs-info-text-emphasis: #2c5d78; /* ── Links ───────────────────────────────────────────────────────────── */ --bs-link-color: #0072B2; --bs-link-color-rgb: 0, 114, 178; --bs-link-hover-color: #004d7a; --bs-link-hover-color-rgb: 0, 77, 122; /* ── DELP: o vermelho #CC0F10 vira azul Okabe-Ito (mantém contrato) ──── */ --ds-primary: #0072B2; --ds-primary-rgb: 0, 114, 178; --ds-primary-lighter: #d6ebf6; --ds-primary-light: #abd6ed; --ds-primary-dark: #004d7a; --ds-primary-darker: #003150; --ds-primary-text-emphasis: #004d7a; --ds-primary-bg-subtle: #d6ebf6; --ds-primary-border-subtle: #abd6ed; /* ── Torres do Medti em paleta Okabe-Ito (distinguíveis por daltônicos) */ --apex-tower-infraestrutura: #D55E00; /* vermelho-alaranjado */ --apex-tower-sistemas: #0072B2; /* azul forte */ --apex-tower-devops: #CC79A7; /* rosa-violeta */ --apex-tower-business-partner: #009E73; /* verde-azulado */ --apex-tower-triagem: #56B4E9; /* azul céu */ /* ── Prioridades em paleta Okabe-Ito completa (8 cores, das quais 6 são escolhidas evitando tons próximos como dois azuis adjacentes). As escolhas seguem a ordem de criticidade visual: 1 (Muito Baixa) → cinza neutro — ausência de cor, "ok" 2 (Baixa) → azul-céu — tom claro, baixo alarme 3 (Média) → verde-azulado — distinto dos demais azuis 4 (Alta) → laranja claro — começa a alertar 5 (Muito Alta) → vermelho-alaranjado — alarme alto 6 (Major) → rosa-violeta — máxima criticidade, sem colidir com vermelho */ --apex-prio-1: #999999; --apex-prio-2: #56B4E9; --apex-prio-3: #009E73; --apex-prio-4: #E69F00; --apex-prio-5: #D55E00; --apex-prio-6: #CC79A7; /* Mesmos indicadores "vs meta" (SLA, CSAT, FCR, Reabertura) em paleta Okabe-Ito — reaproveita as mesmas cores funcionais já definidas acima neste bloco. */ --apex-status-ok: #009E73; --apex-status-warn: #F0E442; --apex-status-danger: #D55E00; --apex-status-neutral: #999999; --apex-status-info: #0072B2; } /* ── Botão primário: azul Okabe-Ito ─────────────────────────────────────── */ [data-bs-theme="contrast"] .btn-primary { --ds-btn-bg: #0072B2; --ds-btn-border-color: #0072B2; --ds-btn-hover-bg: #005a8c; --ds-btn-hover-border-color: #005a8c; --ds-btn-active-bg: #004d7a; --ds-btn-active-border-color:#004d7a; background-color: #0072B2; border-color: #0072B2; color: #ffffff; } [data-bs-theme="contrast"] .btn-outline-primary { --ds-btn-color: #0072B2; --ds-btn-border-color: #0072B2; --ds-btn-hover-bg: #0072B2; --ds-btn-hover-border-color: #0072B2; } [data-bs-theme="contrast"] .btn-success { background-color: #009E73; border-color: #009E73; color: #ffffff; } [data-bs-theme="contrast"] .btn-danger { background-color: #D55E00; border-color: #D55E00; color: #ffffff; } [data-bs-theme="contrast"] .btn-warning { background-color: #F0E442; border-color: #F0E442; color: #000000; } /* ── Foco do input vira azul Okabe-Ito (era vermelho DELP no light) ────── */ [data-bs-theme="contrast"] .form-control:focus, [data-bs-theme="contrast"] .form-select:focus { border-color: #0072B2 !important; box-shadow: 0 0 0 0.2rem rgba(0, 114, 178, 0.18) !important; } [data-bs-theme="contrast"] .input-group .form-control:focus ~ .input-group-text, [data-bs-theme="contrast"] .input-group:focus-within .input-group-text { border-color: #0072B2; } /* ── Links e texto-DELP: azul ao invés do vermelho ─────────────────────── */ [data-bs-theme="contrast"] a { color: #0072B2; } [data-bs-theme="contrast"] a:hover { color: #004d7a; } [data-bs-theme="contrast"] .text-delp-red { color: #0072B2 !important; } /* ── Sidebar: hover/active no azul (era vermelho DELP) ─────────────────── */ [data-bs-theme="contrast"] .sidebar-toggle:hover { color: #0072B2 !important; } /* ── Reforço NÃO-COR (sutil): badges e textos semânticos ficam negrito ── */ /* Isso ajuda quem é monocromático ou quando a cor passa despercebida. */ [data-bs-theme="contrast"] .badge { font-weight: 600; } [data-bs-theme="contrast"] .text-success, [data-bs-theme="contrast"] .text-danger, [data-bs-theme="contrast"] .text-warning { font-weight: 600; } /* ── Tabelas ordenáveis (public/assets/js/sortable-table.js) ────────────── */ /* Seta some/aparece via opacity — evita "pulo" de layout ao trocar de estado (2026-07-10, /kpis/torres e /kpis/disponibilidade). */ .sortable-th { user-select: none; white-space: nowrap; } .sortable-th::after { content: '⇕'; display: inline-block; margin-left: .35rem; opacity: .35; font-size: .8em; } .sortable-th[data-sort-dir='asc']::after { content: '↑'; opacity: .9; } .sortable-th[data-sort-dir='desc']::after { content: '↓'; opacity: .9; } /* ── Combobox pesquisável sobre original fica absoluto/invisível por trás do (mantém `required`/validação nativa — display:none quebraria isso), só o + a lista abaixo são visíveis. */ .sse-wrap { position: relative; } .sse-input { cursor: text; } select.sse-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; z-index: -1; } .sse-menu { position: absolute; top: 100%; left: 0; right: 0; z-index: 1060; margin-top: 2px; max-height: 260px; overflow-y: auto; background: var(--bs-body-bg, #fff); border: 1px solid var(--bs-border-color, #dee2e6); border-radius: .375rem; box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); font-size: .875rem; } .sse-group-label { padding: .35rem .75rem .15rem; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--bs-secondary-color, #6c757d); } .sse-item { padding: .35rem .9rem; cursor: pointer; white-space: nowrap; } .sse-item:hover, .sse-item-active { background: var(--ds-primary-bg-subtle, #fde8e8); color: var(--ds-primary-text-emphasis, #8a0b0b); } .sse-empty { padding: .5rem .9rem; color: var(--bs-secondary-color, #6c757d); font-style: italic; font-size: .85rem; } /* ── Anexo de evidências (public/assets/js/evidence-upload.js) ─────────── Criado em 2026-07-13 pros formulários de Cibersegurança (canal anônimo e tela interna) — clicar ou colar (Ctrl+V) uma captura de tela. */ .evidence-dropzone { border: 1px dashed var(--bs-border-color, #dee2e6); border-radius: .375rem; padding: .9rem 1rem; text-align: center; font-size: .85rem; color: var(--bs-secondary-color, #6c757d); cursor: pointer; transition: border-color .15s, background-color .15s; } .evidence-dropzone:hover, .evidence-dropzone:focus { border-color: #CC0F10; outline: none; } .evidence-dropzone-over { border-color: #CC0F10; background: var(--ds-primary-bg-subtle, #fde8e8); } .evidence-thumbs { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; } .evidence-thumb { position: relative; width: 72px; height: 72px; border-radius: .375rem; overflow: hidden; border: 1px solid var(--bs-border-color, #dee2e6); } .evidence-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .evidence-thumb-remove { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; line-height: 18px; padding: 0; border: none; border-radius: 50%; background: rgba(0, 0, 0, .6); color: #fff; font-size: 14px; cursor: pointer; } .evidence-thumb-remove:hover { background: #CC0F10; } .evidence-aviso { font-size: .8rem; color: #dc3545; margin-top: .35rem; } /* ── Mobile sidebar overlay ──────────────────────────────────────────────── */ @media (max-width: 991.98px) { /* Sidebar como drawer overlay quando aberta no mobile */ html.expanded #miniSidebar { display: block !important; position: fixed !important; top: 0 !important; left: 0 !important; width: 260px !important; height: 100vh !important; z-index: 1055 !important; overflow-y: auto !important; box-shadow: 4px 0 16px rgba(0,0,0,0.18) !important; } /* Mostrar backdrop somente quando sidebar aberta no mobile */ html.expanded #sidebarBackdrop { display: block !important; } /* Garantir que fechado o backdrop fique oculto (reforço) */ html.collapsed #sidebarBackdrop, html:not(.expanded) #sidebarBackdrop { display: none !important; } }