/* ═══════════════════════════════════════ Ápice Group — Sistema de Relatórios DESIGN SYSTEM — TEMA CLARO + DARK NAVY Tokens centralizados. NÃO altere lógica, rotas ou classes: só apresentação. - :root = tema CLARO (padrão) - [data-theme="dark"] = tema DARK NAVY O atributo data-theme é colocado em pelo toggle (localStorage). ═══════════════════════════════════════ */ :root { /* ── Estrutura (CLARO) ── */ --bg: #F1F5F9; /* fundo cinza-claro */ --surface: #FFFFFF; /* cards brancos */ --surface-2: #F8FAFC; /* inputs / secundário */ --surface-3: #EEF2F7; /* hover / destacado */ --border: #E2E8F0; /* bordas sutis */ --border-soft: rgba(100,116,139,.16); --border-strong: #CBD5E1; /* hover de bordas */ --sidebar-bg: #FFFFFF; /* sidebar clara */ /* ── Cabeçalho de tabela / rótulos ── */ --thead-bg: #F1F5F9; --field-bg: #F8FAFC; /* fundo de inputs */ --field-focus: #EFF6FF; /* fundo input focado */ /* ── Texto (CLARO) ── */ --text: #0F172A; --text-dim: #475569; --text-faint: #94A3B8; /* ── Ação (mesmo azul nos dois temas) ── */ --accent: #2563EB; --accent-hover:#1D4ED8; --accent-soft: rgba(37,99,235,.1); /* ── Estados (iguais nos dois temas) ── */ --ok-green: #10B981; --ok-green-l: #059669; --warning: #D97706; --off-red: #DC2626; --purple: #7C3AED; /* ── Sombra / sombras suaves ── */ --shadow: 0 1px 2px rgba(15,23,42,.06); --shadow-lg: 0 12px 32px rgba(15,23,42,.14); /* ── Bordas arredondadas moderadas ── */ --radius: 12px; --radius-sm: 8px; --radius-pill: 999px; color-scheme: light; } /* ── TEMA DARK PRETO ── */ [data-theme="dark"] { --bg: #0A0A0C; --surface: #131316; --surface-2: #0E0E11; --surface-3: #1A1A1E; --border: #26262B; --border-soft: rgba(38,38,43,.6); --border-strong: #33333A; --sidebar-bg: #101013; --thead-bg: #121216; --field-bg: #0E0E11; --field-focus: #111115; --text: #F5F5F6; --text-dim: #A1A1AA; --text-faint: #6E6E77; --accent: #3B82F6; --accent-hover:#60A5FA; --accent-soft: rgba(59,130,246,.16); --ok-green: #10B981; --ok-green-l: #34D399; --warning: #F59E0B; --off-red: #EF4444; --purple: #8B5CF6; --shadow: none; --shadow-lg: 0 12px 40px rgba(0,0,0,.6); color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } ::selection { background: var(--accent-soft); color: var(--text); } ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-faint); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } body { font-family: 'Inter', 'Segoe UI', Arial, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; font-size: 14px; -webkit-font-smoothing: antialiased; } /* ═══════════════════════════════════════ LAYOUT FLEX ═══════════════════════════════════════ */ .layout { display: flex; min-height: 100vh; align-items: stretch; } /* ═══════════════════════════════════════ CONTEÚDO PRINCIPAL ═══════════════════════════════════════ */ .page-wrap { flex: 1; padding: 22px 24px 48px; max-width: 1440px; width: 100%; margin: 0 auto; } .site-footer { text-align: center; font-size: 0.76rem; color: var(--text-faint); padding: 14px; border-top: 1px solid var(--border); } /* ═══════════════════════════════════════ PAGE HEADER ═══════════════════════════════════════ */ .page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; gap: 12px; flex-wrap: wrap; } .page-header h1 { font-family: 'Sora', sans-serif; font-size: 1.35rem; font-weight: 700; color: var(--text); letter-spacing: -0.01em; } .page-header .sub { color: var(--text-dim); font-size: 0.85rem; margin-top: 3px; } /* ═══════════════════════════════════════ CARDS ═══════════════════════════════════════ */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 18px; box-shadow: var(--shadow); } .card-title { font-family: 'Sora', sans-serif; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.9px; color: var(--text-dim); border-bottom: 1px solid var(--border); padding-bottom: 10px; margin-bottom: 16px; } /* ═══════════════════════════════════════ ALERTS / TOASTS ═══════════════════════════════════════ */ .alert { padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: 0.86rem; font-weight: 600; display:flex; align-items:center; gap:10px; } .alert-ok { background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.3); color: var(--ok-green-l); } .alert-erro { background: rgba(220,38,38,.08); border: 1px solid rgba(220,38,38,.28); color: var(--off-red); } /* ═══════════════════════════════════════ BUTTONS ═══════════════════════════════════════ */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius-sm); font-size: 0.84rem; font-weight: 600; font-family: 'Inter', sans-serif; cursor: pointer; border: 1px solid transparent; text-decoration: none; transition: background .15s, border-color .15s, color .15s, box-shadow .15s; white-space: nowrap; } .btn:active { transform: translateY(0); } .btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover { background: var(--accent-hover); } .btn-secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border); } .btn-secondary:hover { background: var(--surface-3); border-color: var(--border-strong); } .btn-danger { background: rgba(220,38,38,.08); color: var(--off-red); border: 1px solid rgba(220,38,38,.3); } .btn-danger:hover { background: rgba(220,38,38,.15); } .btn-sm { padding: 5px 12px; font-size: 0.78rem; border-radius: 6px; } .btn-add { background: none; border: 1px dashed var(--border-strong); color: var(--accent); border-radius: var(--radius-sm); padding: 7px 14px; font-size: 0.8rem; cursor: pointer; transition: background .15s, border-color .15s; } .btn-add:hover { background: var(--accent-soft); border-color: var(--accent); } /* ═══════════════════════════════════════ FORMS ═══════════════════════════════════════ */ .form-group { margin-bottom: 15px; } .form-label { display: block; font-size: 0.66rem; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.7px; margin-bottom: 6px; } .form-control { width: 100%; padding: 9px 13px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 0.88rem; font-family: inherit; background: var(--field-bg); color: var(--text); transition: border-color .15s, box-shadow .15s, background .15s; } .form-control::placeholder { color: var(--text-faint); } .form-control:hover { border-color: var(--border-strong); } .form-control:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--field-focus); } .form-control[readonly] { background: var(--surface-3); color: var(--text-dim); cursor: default; } /* native select */ select.form-control { cursor: pointer; color-scheme: light; background: var(--field-bg); } [data-theme="dark"] select.form-control { color-scheme: dark; } select.form-control option { background: var(--surface); color: var(--text); } select.form-control option:checked { background: var(--accent); color: #fff; } /* ══ Custom Select ══ */ .cs-wrap { position: relative; font-size: .88rem; user-select: none; } .cs-trigger { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 14px; background: var(--field-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); cursor: pointer; transition: border-color .18s, background .18s, box-shadow .18s; min-height: 40px; } .cs-trigger:hover { border-color: var(--accent); background: var(--field-bg); } .cs-wrap.cs-open .cs-trigger { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--field-bg); } .cs-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); } .cs-label.cs-placeholder { color: var(--text-faint); } .cs-chevron { width: 18px; height: 18px; fill: var(--text-faint); flex-shrink: 0; transition: transform .22s cubic-bezier(.4,0,.2,1), fill .18s; } .cs-trigger:hover .cs-chevron { fill: var(--text-dim); } .cs-wrap.cs-open .cs-chevron { transform: rotate(180deg); fill: var(--accent); } .cs-dropdown { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); z-index: 9990; overflow: hidden; max-height: 0; opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top center; transition: max-height .28s cubic-bezier(.4,0,.2,1), opacity .2s, transform .22s cubic-bezier(.4,0,.2,1); pointer-events: none; } .cs-wrap.cs-open .cs-dropdown { max-height: 280px; opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; overflow-y: auto; } .cs-dropdown::-webkit-scrollbar { width: 4px; } .cs-dropdown::-webkit-scrollbar-track { background: transparent; } .cs-dropdown::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } .cs-option { display: flex; align-items: center; gap: 10px; padding: 9px 14px; color: var(--text-dim); cursor: pointer; transition: background .12s, color .12s; font-size: .86rem; } .cs-option:first-child { border-radius: 8px 8px 0 0; } .cs-option:last-child { border-radius: 0 0 8px 8px; } .cs-option:hover { background: var(--accent-soft); color: var(--text); } .cs-option.cs-active { background: var(--accent-soft); color: var(--text); font-weight: 600; } .cs-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; opacity: 0; transition: opacity .15s; } .cs-option.cs-active .cs-dot { opacity: 1; } textarea.form-control { resize: vertical; min-height: 80px; } .form-row { display: flex; gap: 14px; flex-wrap: wrap; } .form-row .form-group { flex: 1; min-width: 160px; } .form-actions { display: flex; gap: 10px; align-items: center; padding-top: 8px; flex-wrap: wrap; } /* ═══════════════════════════════════════ TABLES ═══════════════════════════════════════ */ .table-wrap { overflow-x: auto; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow); } table.data-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; } table.data-table thead th { background: var(--thead-bg); color: var(--text-dim); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.7px; font-weight: 600; padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; } table.data-table tbody td { padding: 11px 14px; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: middle; } table.data-table tbody tr:last-child td { border-bottom: none; } table.data-table tbody tr:hover { background: var(--surface-3); } .td-actions { display: flex; gap: 6px; align-items: center; } /* ═══════════════════════════════════════ BADGES ═══════════════════════════════════════ */ .badge { display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: 0.68rem; font-weight: 700; white-space: nowrap; } .badge-adm { background: var(--accent-soft); color: var(--accent); border: 1px solid rgba(37,99,235,.32); } .badge-supervisor { background: rgba(16,185,129,.12); color: var(--ok-green-l); border: 1px solid rgba(16,185,129,.3); } .badge-colaborador { background: rgba(100,116,139,.12); color: var(--text-dim); border: 1px solid rgba(100,116,139,.25); } .badge-ativo { background: rgba(16,185,129,.12); color: var(--ok-green-l); border: 1px solid rgba(16,185,129,.3); } .badge-inativo { background: rgba(220,38,38,.08); color: var(--off-red); border: 1px solid rgba(220,38,38,.3); } .badge-torre { background: var(--accent-soft); color: var(--accent); border: 1px solid rgba(37,99,235,.26); } .badge-casa { background: rgba(245,158,11,.12); color: var(--warning); border: 1px solid rgba(245,158,11,.3); } /* ═══════════════════════════════════════ DASHBOARD GRID ═══════════════════════════════════════ */ .cond-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 12px; } .cond-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; text-decoration: none; color: var(--text); transition: border-color .2s, background .2s, transform .15s; display: block; box-shadow: var(--shadow); } .cond-card:hover { border-color: var(--accent); background: var(--surface); transform: translateY(-2px); } .cond-card-name { font-family: 'Sora', sans-serif; font-size: .95rem; font-weight: 700; margin-bottom: 6px; } .cond-card-meta { font-size: 0.78rem; color: var(--text-dim); display: flex; gap: 8px; flex-wrap: wrap; } /* ═══════════════════════════════════════ TORRE BUILDER ═══════════════════════════════════════ */ .torre-builder { margin-top: 14px; } .torre-item { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; } .torre-item input { flex: 1; } .remove-torre { background: none; border: none; color: var(--off-red); cursor: pointer; font-size: 1.1rem; padding: 6px; } /* ═══════════════════════════════════════ TOGGLE SWITCH ═══════════════════════════════════════ */ .switch-wrap { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); } .switch-wrap:last-child { border-bottom: none; } .switch-label { font-size: 0.9rem; flex: 1; } .switch-obs { display: none; width: 200px; } .switch-wrap.is-off .switch-obs { display: block; } .switch { position: relative; width: 44px; height: 24px; flex-shrink: 0; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; inset: 0; background: var(--border-strong); border-radius: 24px; transition: .25s; } .slider:before { content: ""; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .25s; box-shadow: 0 2px 6px rgba(0,0,0,.4); } .switch input:checked + .slider { background: var(--ok-green); } .switch input:checked + .slider:before { transform: translateX(20px); } .status-tag { font-size: 0.78rem; font-weight: 700; min-width: 28px; text-align: center; } .status-tag.ok { color: var(--ok-green-l); } .status-tag.off { color: var(--off-red); } .switch-wrap.is-off .status-tag { display: none; } /* ═══════════════════════════════════════ COLABORADORES ═══════════════════════════════════════ */ .colab-group { margin-bottom: 18px; } .colab-group-title { font-weight: 700; margin-bottom: 8px; font-size: 0.95rem; } .colab-entry { display: flex; gap: 8px; margin-bottom: 8px; } .colab-entry input:first-child { flex: 1.2; } .colab-entry input:nth-child(2) { flex: 1; } .remove-btn { background: none; border: none; color: var(--off-red); cursor: pointer; font-size: 1.1rem; padding: 6px; } .carta-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .carta-entry { display: flex; gap: 8px; margin-bottom: 8px; } .carta-entry input:first-child { flex: 1.3; } .carta-entry input:last-child { flex: .7; } .veiculo-entry { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; } .veiculo-entry input { flex: 1; min-width: 100px; } .veiculo-entry input[name="placa"] { flex: .8; text-transform: uppercase; } .ocorrencia-entry { position: relative; margin-bottom: 10px; } .ocorrencia-entry textarea { padding-right: 36px; } .ocorrencia-entry .remove-btn { position: absolute; top: 4px; right: 2px; } .turno-toggle { display: flex; gap: 14px; } .turno-opt { display: flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 7px 16px; cursor: pointer; font-size: 0.88rem; color: var(--text-dim); user-select: none; transition: background .15s, color .15s, border-color .15s; } .turno-opt.active { background: var(--accent); color: #fff; border-color: var(--accent); } .turno-opt input { display: none; } /* ═══════════════════════════════════════ RELATÓRIO VIEW ═══════════════════════════════════════ */ .rel-section-title { font-family: 'Sora', sans-serif; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-dim); border-bottom: 1px solid var(--border); padding-bottom: 8px; margin-bottom: 12px; } .rel-cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .rel-item { padding: 6px 0; border-bottom: 1px solid var(--border-soft); font-size: 0.86rem; display: flex; justify-content: space-between; align-items: center; } .rel-item:last-child { border-bottom: none; } .ok-tag { color: var(--ok-green-l); font-weight: 700; } .off-tag { color: var(--off-red); font-weight: 700; } /* ═══════════════════════════════════════ CONFIG ITEMS ═══════════════════════════════════════ */ .config-item-list { display: flex; flex-direction: column; gap: 6px; } .config-item-row { display: flex; gap: 8px; align-items: center; } .config-item-row input { flex: 1; } /* ═══════════════════════════════════════ EMPTY STATE ═══════════════════════════════════════ */ .empty-state { text-align: center; padding: 40px 20px; color: var(--text-dim); } /* ═══════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════ */ @media (max-width: 820px) { #sidebar { position: fixed; left: 0; top: 0; bottom: 0; height: 100vh; z-index: 500; } .main-wrap, .main-wrap.sidebar-collapsed { margin-left: 0 !important; } .page-wrap { padding: 14px 12px 40px; } .carta-cols, .rel-cols2 { grid-template-columns: 1fr; } .form-row { flex-direction: column; } .page-header { flex-direction: column; align-items: flex-start; } .page-header > div:last-child { width: 100%; } .td-actions { flex-wrap: wrap; } .btn { font-size: .8rem; padding: 7px 13px; } .btn-sm { font-size: .74rem; padding: 4px 9px; } table.data-table thead th { font-size: .64rem; padding: 9px 10px; } table.data-table tbody td { padding: 9px 10px; font-size: .8rem; } } /* ═══════════════════════════════════════ MODAIS (genérico para telas que usam .modal) ═══════════════════════════════════════ */ .modal-overlay { background: rgba(0,0,0,.65); } .modal-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); } .modal-title { color: var(--text); } /* ═══════════════════════════════════════ TOGGLE CLARO/ESCURO (na sidebar) ═══════════════════════════════════════ */ .theme-toggle-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; margin: 2px 8px; width: calc(100% - 16px); border: none; background: none; cursor: pointer; color: var(--text-dim); font-size: 0.86rem; font-weight: 600; font-family: 'Inter', sans-serif; border-radius: 8px; transition: background .15s, color .15s; text-align: left; } .theme-toggle-btn:hover { background: var(--surface-3); color: var(--text); } .theme-toggle-btn svg { width: 20px; height: 20px; fill: var(--text-faint); flex-shrink: 0; } .theme-toggle-btn span { flex: 1; white-space: nowrap; overflow: hidden; } [data-theme="dark"] .theme-toggle-btn { color: var(--text-dim); } [data-theme="dark"] .theme-toggle-btn:hover { color: var(--text); background: var(--surface-3); } /* Comportamento quando sidebar recolhida */ #sidebar.collapsed .theme-toggle-btn { justify-content: center; padding-left: 12px; } #sidebar.collapsed .theme-toggle-btn span { opacity: 0; width: 0; } @media print { #sidebar, .site-footer, .theme-toggle-btn { display: none !important; } .layout { display: block; } body, .main-wrap { background: #fff; color: #000; } .card { border: 1px solid #ccc; box-shadow: none; } .ok-tag { color: green; } .off-tag { color: red; } }