/* ══════════════════════════════════════════════════════════ GESTORPRO 3.0 — Prefeitura de Bagé Paleta: Amarelo Bagé #F5C400 / Cinza #5C5C5C / Branco ══════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600;700;800&family=Barlow+Condensed:wght@600;700;800&display=swap'); /* Fallback: se o CDN falhar, o sistema usa fontes do sistema com aparência similar */ :root { --bage-yellow: #F5C400; --bage-yellow-dark: #D4A900; --bage-yellow-light: #FFF0A0; --bage-gray: #5C5C5C; --bage-gray-dark: #3A3A3A; --bage-gray-light: #8A8A8A; --primary: #2A2A2A; --primary-mid: #3D3D3D; --accent: #F5C400; --accent-dark: #D4A900; --accent2: #F5C400; --warning: #F5C400; --danger: #e53e3e; --info: #3182ce; --success: #38a169; --purple: #805ad5; --light-bg: #F4F4F4; --surface: #ffffff; --surface2: #FAFAFA; --border: #E0E0E0; --border-light: #EBEBEB; --text: #1A1A1A; --text-muted: #5C5C5C; --text-light: #9A9A9A; --card-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.04); --card-shadow-hover: 0 4px 12px rgba(0,0,0,.10), 0 16px 40px rgba(0,0,0,.08); --topnav-h: 58px; --subnav-h: 46px; --sidebar-w: 220px; --sidebar-w-collapsed: 64px; } /* ══════════════════════════════════════════════════════════ DARK MODE — ativado via data-theme="dark" no ══════════════════════════════════════════════════════════ */ [data-theme="dark"] { --light-bg: #0F1117; --surface: #1A1D27; --surface2: #22263A; --border: #2E3350; --border-light:#252840; --text: #E8EAF0; --text-muted: #8B90A7; --text-light: #5A6070; --primary: #1A1D27; --primary-mid:#22263A; --card-shadow: 0 1px 3px rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.2); --card-shadow-hover: 0 4px 12px rgba(0,0,0,.4), 0 16px 40px rgba(0,0,0,.3); } [data-theme="dark"] body { background: var(--light-bg); } [data-theme="dark"] .tbl-wrap { background: var(--surface); } [data-theme="dark"] table { color: var(--text); } [data-theme="dark"] thead th { background: #0D1020; } [data-theme="dark"] tbody tr:hover{ background: rgba(245,196,0,.06); } [data-theme="dark"] .card { background: var(--surface); border-color: var(--border); } [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { background: var(--surface2); color: var(--text); border-color: var(--border); } [data-theme="dark"] input::placeholder { color: var(--text-light); } [data-theme="dark"] .modal-box { background: var(--surface); color: var(--text); } [data-theme="dark"] .modal-hdr { background: var(--surface2); border-bottom-color: var(--border); } [data-theme="dark"] .subnav { background: #13151F; border-bottom-color: var(--border); } [data-theme="dark"] .topnav { background: #13151F; border-bottom-color: var(--border); } [data-theme="dark"] .filters { background: var(--surface); border-color: var(--border); } [data-theme="dark"] .filters input, [data-theme="dark"] .filters select { background: var(--surface2); } [data-theme="dark"] .detail-section { background: var(--surface2); border-color: var(--border); } [data-theme="dark"] .detail-item .label { color: var(--text-muted); } [data-theme="dark"] .dash-card { background: var(--surface); } [data-theme="dark"] .fin-cell { background: var(--surface2); } [data-theme="dark"] .backup-zone { background: var(--surface2); } /* Toggle button */ .theme-toggle { background: none; border: none; cursor: pointer; color: rgba(255,255,255,.7); font-size: 1.1rem; padding: 6px 8px; border-radius: 8px; transition: color .2s, background .2s; display: flex; align-items: center; } .theme-toggle:hover { background: rgba(255,255,255,.1); color: #fff; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :focus-visible { outline: 2px solid var(--bage-yellow); outline-offset: 2px; border-radius: 4px; } html { scroll-behavior: smooth; } body { background: var(--light-bg); color: var(--text); font-family: 'Barlow', 'Segoe UI', 'Helvetica Neue', Arial, system-ui, -apple-system, sans-serif; font-size: 14px; line-height: 1.5; overflow-x: hidden; } /* ══════════════════════════════════════════════════════════ LOADING SKELETONS ══════════════════════════════════════════════════════════ */ @keyframes shimmer { 0% { background-position: -600px 0; } 100% { background-position: 600px 0; } } .skeleton { background: linear-gradient(90deg, var(--border) 25%, var(--border-light) 50%, var(--border) 75%); background-size: 600px 100%; animation: shimmer 1.4s infinite linear; border-radius: 6px; display: block; } .skeleton-row { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border-light); } .skeleton-row .sk-id { width: 36px; height: 18px; flex-shrink: 0; } .skeleton-row .sk-type { width: 80px; height: 18px; flex-shrink: 0; } .skeleton-row .sk-text { flex: 1; height: 18px; } .skeleton-row .sk-badge{ width: 70px; height: 18px; flex-shrink: 0; } .skeleton-row .sk-num { width: 90px; height: 18px; flex-shrink: 0; } /* ══════════════════════════════════════════════════════════ LOGIN SCREEN ══════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════ LOGIN — Novo design institucional governamental ══════════════════════════════════════════════════════════ */ #login-screen { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; background: #f0f2f5; font-family: 'Plus Jakarta Sans', sans-serif; } /* Faixa de topo */ .lg-topbar { background: #1B2A4A; border-bottom: 3px solid #F5C400; flex-shrink: 0; } .lg-topbar-inner { max-width: 1400px; margin: 0 auto; padding: 10px 32px; display: flex; align-items: center; justify-content: space-between; } .lg-topbar-left, .lg-topbar-right { display: flex; align-items: center; gap: 8px; font-size: .75rem; font-weight: 600; color: rgba(255,255,255,.80); letter-spacing: .03em; } .lg-topbar-flag { color: #F5C400; font-size: .8rem; } .lg-topbar-right { color: rgba(255,255,255,.55); font-size: .72rem; } .lg-topbar-right i { color: #F5C400; } /* Corpo */ .lg-body { flex: 1; display: flex; overflow: hidden; } /* Coluna esquerda */ .lg-left { flex: 1; background: #1B2A4A; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .lg-left::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 30% 60%, rgba(245,196,0,.14) 0%, transparent 65%), radial-gradient(ellipse 40% 40% at 80% 20%, rgba(255,255,255,.04) 0%, transparent 55%); } .lg-left::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 56px 56px; } .lg-left-inner { position: relative; z-index: 1; padding: 60px; max-width: 480px; } .lg-seal { margin-bottom: 32px; } .lg-seal-icon { width: 80px; height: 80px; border-radius: 20px; background: #F5C400; display: flex; align-items: center; justify-content: center; box-shadow: 0 16px 48px rgba(245,196,0,.40); } .lg-seal-icon i { font-size: 36px; color: #1a1a1a; } .lg-title { font-family: 'Outfit', sans-serif; font-size: 3rem; font-weight: 900; line-height: 1; color: #fff; margin: 0 0 12px; letter-spacing: -1.5px; } .lg-title span { display: inline-block; background: #F5C400; color: #1a1a1a; font-size: 1rem; font-weight: 900; padding: 3px 10px; border-radius: 6px; letter-spacing: .05em; vertical-align: middle; margin-left: 8px; margin-bottom: 6px; } .lg-subtitle { font-size: 1rem; color: rgba(255,255,255,.70); line-height: 1.6; margin: 0 0 28px; } .lg-divline { width: 48px; height: 3px; background: #F5C400; border-radius: 2px; margin-bottom: 28px; } .lg-features { list-style: none; margin: 0 0 40px; padding: 0; display: flex; flex-direction: column; gap: 12px; } .lg-features li { display: flex; align-items: center; gap: 12px; font-size: .88rem; font-weight: 500; color: rgba(255,255,255,.75); } .lg-features li i { color: #F5C400; font-size: .85rem; flex-shrink: 0; } .lg-version { font-size: .70rem; font-weight: 600; color: rgba(255,255,255,.30); letter-spacing: .08em; text-transform: uppercase; } /* Coluna direita — formulário */ .lg-right { width: 480px; flex-shrink: 0; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: -8px 0 40px rgba(0,0,0,.12); } .lg-form-wrap { width: 100%; padding: 56px 48px; } /* Cabeçalho do formulário */ .lg-form-header { display: flex; align-items: center; gap: 16px; margin-bottom: 36px; padding-bottom: 24px; border-bottom: 2px solid #f0f2f5; } .lg-form-icon { width: 48px; height: 48px; border-radius: 12px; background: #1B2A4A; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .lg-form-icon i { font-size: 18px; color: #F5C400; } .lg-form-header h2 { font-family: 'Outfit', sans-serif; font-size: 1.3rem; font-weight: 800; color: #1B2A4A; margin: 0; letter-spacing: -.3px; } .lg-form-header p { font-size: .82rem; color: #6b7280; margin: 4px 0 0; } /* Erro */ .lg-error { display: flex; align-items: center; gap: 10px; background: #fef2f2; border-left: 4px solid #dc2626; color: #dc2626; border-radius: 0 8px 8px 0; padding: 12px 16px; font-size: .84rem; font-weight: 600; margin-bottom: 24px; } /* Campos */ .lg-field { margin-bottom: 20px; } .lg-field label { display: block; font-size: .72rem; font-weight: 800; color: #374151; letter-spacing: .07em; margin-bottom: 8px; text-transform: uppercase; } .lg-input-wrap { position: relative; background: #f8f9fb; border: 2px solid #e2e6ed; border-radius: 10px; transition: all .15s; } .lg-input-wrap > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #9ca3af; font-size: .88rem; pointer-events: none; z-index: 2; } .lg-input-wrap input { width: 100%; padding: 14px 46px 14px 16px; background: transparent; border: none; outline: none; font-family: 'Plus Jakarta Sans', sans-serif; font-size: .97rem; font-weight: 500; color: #111827; box-sizing: border-box; display: block; position: relative; z-index: 1; } .lg-input-wrap input:-webkit-autofill, .lg-input-wrap input:-webkit-autofill:hover, .lg-input-wrap input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #f8f9fb inset !important; -webkit-text-fill-color: #111827 !important; caret-color: #111827; } .lg-input-wrap input::placeholder { color: #b0bac9; font-weight: 400; } .lg-input-wrap:focus-within { border-color: #1B2A4A; background: #fff; box-shadow: 0 0 0 4px rgba(27,42,74,.10); } .lg-input-wrap:focus-within input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #fff inset !important; } /* Olho */ .lg-eye, .relogin-eye { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: #9ca3af; font-size: .88rem; padding: 4px 6px; display: flex; align-items: center; z-index: 2; transition: color .15s; } .lg-eye:hover { color: #1B2A4A; } .relogin-eye { right: 12px; } .relogin-eye:hover { color: #374151; } /* Botão entrar */ .lg-btn { width: 100%; padding: 15px; background: #1B2A4A; color: #fff; border: none; border-radius: 10px; font-family: 'Plus Jakarta Sans', sans-serif; font-size: .97rem; font-weight: 800; cursor: pointer; transition: all .2s; display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 8px; letter-spacing: .02em; } .lg-btn:hover { background: #253d6b; box-shadow: 0 8px 28px rgba(27,42,74,.30); transform: translateY(-1px); } .lg-btn:active { transform: translateY(0); box-shadow: none; } .lg-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; } /* Badge segurança */ .lg-secure { margin-top: 20px; text-align: center; font-size: .72rem; color: #9ca3af; font-weight: 500; letter-spacing: .03em; } .lg-secure i { color: #6b7280; } /* ── Overlay reconexão — fundo branco ── */ #relogin-overlay { display: none; position: fixed; inset: 0; z-index: 19999; background: rgba(27,42,74,.88); backdrop-filter: blur(8px); align-items: center; justify-content: center; } #relogin-overlay.show { display: flex; } .relogin-box { background: #fff; border-radius: 16px; padding: 40px 36px; width: 100%; max-width: 400px; text-align: center; box-shadow: 0 40px 100px rgba(0,0,0,.40); } .relogin-icon { font-size: 2.4rem; margin-bottom: 14px; } .relogin-box h3 { color: #1B2A4A; font-size: 1.2rem; font-weight: 800; margin: 0 0 8px; font-family: 'Outfit', sans-serif; } .relogin-box p { color: #6b7280; font-size: .87rem; margin: 0 0 24px; line-height: 1.6; } .relogin-err { display: none; background: #fef2f2; border-left: 4px solid #dc2626; color: #dc2626; border-radius: 0 8px 8px 0; padding: 10px 14px; font-size: .82rem; margin-bottom: 16px; text-align: left; } .relogin-err.show { display: block; } .relogin-input-wrap { position: relative; background: #f8f9fb; border: 2px solid #e2e6ed; border-radius: 10px; margin-bottom: 12px; } .relogin-input-wrap > i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #9ca3af; font-size: .85rem; pointer-events: none; } .relogin-input-wrap:focus-within { border-color: #1B2A4A; background: #fff; box-shadow: 0 0 0 4px rgba(27,42,74,.10); } .relogin-input { width: 100%; padding: 13px 46px 13px 42px; background: transparent; border: none; outline: none; color: #111827; font-size: .95rem; font-weight: 500; box-sizing: border-box; font-family: 'Plus Jakarta Sans', sans-serif; } .relogin-input::placeholder { color: #b0bac9; } .relogin-btn-main { width: 100%; padding: 14px; background: #1B2A4A; color: #fff; border: none; border-radius: 10px; font-weight: 800; font-size: .97rem; cursor: pointer; margin-bottom: 10px; font-family: 'Plus Jakarta Sans', sans-serif; transition: all .18s; } .relogin-btn-main:hover { background: #253d6b; } .relogin-btn-exit { width: 100%; padding: 11px; background: transparent; color: #9ca3af; border: 2px solid #e2e6ed; border-radius: 10px; font-size: .83rem; cursor: pointer; font-family: 'Plus Jakarta Sans', sans-serif; transition: all .18s; } .relogin-btn-exit:hover { color: #374151; border-color: #d1d5db; } /* Botão toggle senha — campo usuários */ .pwd-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: #9ca3af; font-size: .88rem; padding: 4px 6px; display: flex; align-items: center; z-index: 2; transition: color .15s; } .pwd-toggle:hover { color: #374151; } .pwd-toggle-light { color: #9ca3af; } .pwd-toggle-light:hover { color: #374151; } @media (max-width: 900px) { .lg-left { display: none; } .lg-right { width: 100%; } .lg-form-wrap { padding: 40px 28px; } } @media (max-width: 480px) { .lg-form-wrap { padding: 32px 20px; } .lg-topbar-left span { display: none; } } /* ══════════════════════════════════════════════════════════ APP SHELL — TOP NAV LAYOUT ══════════════════════════════════════════════════════════ */ #app-shell { display: flex; flex-direction: column; min-height: 100vh; } /* ── TOP NAVIGATION BAR ── */ .topnav { position: fixed; top: 0; left: 0; right: 0; height: var(--topnav-h); z-index: 200; background: var(--primary); display: flex; align-items: center; padding: 0 20px; gap: 16px; box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 4px 18px rgba(0,0,0,.28); border-bottom: 1px solid rgba(255,255,255,.07); } .topnav-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; text-decoration: none; } .topnav-brand .brand-logo { width: 34px; height: 34px; border-radius: 8px; background: var(--bage-yellow); display: flex; align-items: center; justify-content: center; } .topnav-brand .brand-logo i { font-size: 16px; color: #1A1A1A; } .topnav-brand .brand-text { display: flex; flex-direction: column; } .topnav-brand .brand-name { font-family: 'Barlow Condensed', sans-serif; font-size: 1.1rem; font-weight: 800; color: #fff; letter-spacing: .3px; line-height: 1; } .topnav-brand .brand-name span { color: var(--bage-yellow); } .topnav-brand .brand-version { font-size:.68rem; color: var(--bage-yellow); font-weight: 700; letter-spacing: .5px; } .topnav-divider { width: 1px; height: 28px; background: rgba(255,255,255,.15); flex-shrink: 0; } .topnav-right { display: flex; align-items: center; gap: 8px; margin-left: auto; } /* ═══════════════════════════════════════════════ PAINEL GERAL — LAYOUT PROFISSIONAL ═══════════════════════════════════════════════ */ .dash-bottom-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 0; } @media (max-width: 900px) { .dash-bottom-row { grid-template-columns: 1fr; } } .dash-panel { background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; padding: 20px 22px 18px; box-shadow: 0 2px 10px rgba(0,0,0,.06); } .dash-panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .dash-panel-title { font-size: .82rem; font-weight: 700; color: var(--text); text-transform: uppercase; letter-spacing: .05em; } .dash-panel-title i { color: var(--bage-yellow-dark); margin-right: 7px; } .dash-panel-badge { font-size: .7rem; font-weight: 700; color: var(--text-muted); background: var(--light-bg); border: 1px solid var(--border); border-radius: 20px; padding: 2px 10px; } /* Secretaria chart */ .sec-chart-layout { display: grid; grid-template-columns: 220px 1fr; gap: 18px; align-items: center; } @media (max-width: 600px) { .sec-chart-layout { grid-template-columns: 1fr; } } .sec-donut-wrap { width: 220px; height: 220px; position: relative; margin: 0 auto; } .sec-donut-wrap canvas { width: 100% !important; height: 100% !important; } .sec-legend-wrap { display: flex; flex-direction: column; gap: 5px; } .sec-legend-item { display: flex; align-items: center; gap: 8px; font-size: .73rem; color: var(--text); cursor: pointer; padding: 3px 6px; border-radius: 6px; transition: background .12s; } .sec-legend-item:hover { background: rgba(245,196,0,.08); } .sec-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .sec-legend-lbl { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sec-legend-val { font-weight: 700; color: var(--text); font-size: .72rem; white-space: nowrap; } .sec-legend-pct { font-size: .67rem; color: var(--text-muted); } /* Posição Financeira */ .exec-bar-section { margin-bottom: 16px; } .exec-bar-label { display: flex; justify-content: space-between; align-items: center; font-size: .73rem; color: var(--text-muted); margin-bottom: 5px; } .exec-bar-label strong { font-size: .88rem; font-weight: 800; color: var(--text); } .exec-bar-track { height: 10px; background: var(--light-bg); border-radius: 6px; overflow: hidden; } .exec-bar-fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, #166140 0%, #2f9e5e 100%); transition: width .8s cubic-bezier(.4,0,.2,1); } .fin-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; } @media (max-width: 700px) { .fin-grid { grid-template-columns: 1fr 1fr; } } .fin-cell { background: var(--light-bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; } .fin-cell-total { grid-column: span 3; background: linear-gradient(135deg, #1a2a1a 0%, #233323 100%); border-color: #166140; } @media (max-width: 700px) { .fin-cell-total { grid-column: span 2; } } .fin-lbl { display: block; font-size:.68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px; } .fin-val { display: block; font-size: .85rem; font-weight: 700; color: var(--text); } .fin-val.success { color: var(--success); } .fin-val.warning { color: var(--warning); } .fin-val.info { color: var(--info); } .fin-val.large { font-size: 1rem; color: #5fe89e; } .fin-cell-total .fin-lbl { color: rgba(255,255,255,.55); } /* ═══════════════════════════════════════════════ DISTRIBUIÇÃO POR STATUS — CARD VISUAL MODERNO ═══════════════════════════════════════════════ */ .status-dist-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; padding: 22px 24px 18px; margin-bottom: 24px; box-shadow: 0 2px 12px rgba(0,0,0,.07); } .status-dist-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .status-dist-header h3 { font-size: .85rem; font-weight: 700; color: var(--text); text-transform: uppercase; letter-spacing: .05em; margin: 0; } .status-dist-header h3 i { color: var(--bage-yellow-dark); margin-right: 7px; } .status-dist-body { display: grid; grid-template-columns: 210px 1fr; gap: 28px; align-items: center; } @media (max-width: 720px) { .status-dist-body { grid-template-columns: 1fr; } } .status-donut-wrap { position: relative; width: 200px; height: 200px; flex-shrink: 0; margin: 0 auto; } .status-donut-wrap canvas { width: 100% !important; height: 100% !important; } .status-donut-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; } .donut-big-num { display: block; font-size: 2rem; font-weight: 800; color: var(--text); line-height: 1.1; } .donut-big-lbl { display: block; font-size:.68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; } .status-bars-wrap { display: flex; flex-direction: column; gap: 6px; } .sbar-row { display: grid; grid-template-columns: 120px 1fr 36px; align-items: center; gap: 10px; padding: 4px 8px; border-radius: 8px; cursor: pointer; transition: background .15s; } .sbar-row:hover { background: rgba(245,196,0,.09); } .sbar-lbl { font-size: .73rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sbar-track { background: var(--light-bg); border-radius: 5px; height: 9px; overflow: hidden; } .sbar-fill { height: 100%; border-radius: 5px; transition: width .5s cubic-bezier(.4,0,.2,1); } .sbar-count { font-size: .78rem; font-weight: 700; text-align: right; } /* ═══════════════════════════════════════════════ RELATÓRIOS — LAYOUT PROFISSIONAL ═══════════════════════════════════════════════ */ .rep-export-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--light-bg); border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px; margin-bottom: 20px; } .rep-export-bar label { font-size: .75rem; font-weight: 700; color: var(--text-muted); } .rep-section-title { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: var(--text-muted); padding: 5px 0 9px 2px; border-bottom: 2px solid var(--border-light); margin: 24px 0 12px; display: flex; align-items: center; gap: 8px; } .rep-section-title i { margin-right: 6px; } .report-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 10px; margin-bottom: 6px; } .report-item { display: flex; align-items: center; justify-content: space-between; background: var(--card-bg); border: 1.5px solid var(--border); border-radius: 11px; padding: 14px 16px; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .12s; gap: 10px; } .report-item:hover { border-color: var(--bage-yellow); box-shadow: 0 4px 16px rgba(245,196,0,.22); transform: translateX(3px); } .report-item strong { font-size: .82rem; display: flex; align-items: center; gap: 7px; } .report-item .ri-badge { font-size: .7rem; color: var(--text-muted); white-space: nowrap; display: flex; align-items: center; gap: 4px; } .rep-summary-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 10px; } .rep-summary-item { background: var(--card-bg); border: 1.5px solid var(--border); border-radius: 11px; padding: 14px 16px; cursor: default; } .rep-summary-item .rsi-lbl { font-size:.68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; display: block; margin-bottom: 4px; } .rep-summary-item .rsi-val { font-size: 1.4rem; font-weight: 800; color: var(--text); } /* ═══════════════════════════════════════════════ TOPNAV — BADGES E AÇÕES CONTEXTUAIS ═══════════════════════════════════════════════ */ .topnav-section-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: rgba(255,255,255,.45); padding: 3px 10px; border: 1px solid rgba(255,255,255,.13); border-radius: 6px; white-space: nowrap; margin-right: 4px; } .topnav-ctx-btns { display: flex; align-items: center; gap: 6px; } /* ═══════════════════════════════════════════════ SENHA — SEGURANÇA VISUAL ═══════════════════════════════════════════════ */ .pwd-strength-track { height: 5px; background: var(--light-bg); border-radius: 3px; margin-top: 6px; overflow: hidden; } .pwd-strength-fill { height: 100%; border-radius: 3px; width: 0%; transition: width .3s, background .3s; } .pwd-strength-label { font-size: .69rem; margin-top: 3px; } .pwd-reqs { margin-top: 6px; } .pwd-req { font-size: .69rem; color: var(--text-muted); display: flex; align-items: center; gap: 5px; padding: 1px 0; } .pwd-req.ok { color: var(--success); } .pwd-req.ok i::before { content: "\f00c"; } .pwd-req i { font-size:.68rem; width: 10px; } .topnav-btn { background: rgba(255,255,255,.08); color: rgba(255,255,255,.85); border: 1px solid rgba(255,255,255,.12); border-radius: 7px; padding: 6px 12px; font-size: .8rem; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: all .2s; font-family: inherit; } .topnav-btn:hover { background: rgba(245,196,0,.15); border-color: rgba(245,196,0,.3); color: var(--bage-yellow); } .topnav-btn.yellow { background: var(--bage-yellow); color: #1A1A1A; border-color: var(--bage-yellow-dark); font-weight: 700; box-shadow: 0 2px 8px rgba(245,196,0,.32); } .topnav-btn.yellow:hover { background: var(--bage-yellow-dark); box-shadow: 0 4px 14px rgba(245,196,0,.44); transform: translateY(-1px); } .topnav-user-info { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.85); font-size: .82rem; } .topnav-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--bage-yellow); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .72rem; color: #1A1A1A; flex-shrink: 0; } .topnav-logout { background: none; border: none; color: rgba(255,255,255,.5); cursor: pointer; padding: 4px 8px; border-radius: 6px; font-size: .82rem; transition: .2s; font-family: inherit; } .topnav-logout:hover { color: #fff; background: rgba(255,255,255,.08); } /* ── SIDEBAR (menu lateral) ── */ .sidebar { position: fixed; top: var(--topnav-h); left: 0; bottom: 0; width: var(--sidebar-w); z-index: 198; background: linear-gradient(180deg, #0c2340 0%, #0f2e52 60%, #0c2340 100%); display: flex; flex-direction: column; overflow: hidden; transition: width .3s cubic-bezier(.4,0,.2,1); box-shadow: 3px 0 16px rgba(0,0,0,.25); } .sidebar.collapsed { width: var(--sidebar-w-collapsed); } /* Toggle button */ .sidebar-toggle { display: flex; align-items: center; justify-content: flex-end; padding: 10px 12px 6px; flex-shrink: 0; } .sidebar-toggle-btn { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 7px; color: rgba(255,255,255,.7); width: 30px; height: 30px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: .85rem; transition: all .18s; flex-shrink: 0; } .sidebar-toggle-btn:hover { background: rgba(245,196,0,.18); color: #F5C400; border-color: rgba(245,196,0,.3); } .sidebar nav .sidebar-label { font-size:.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.28); padding: 12px 10px 3px; white-space: nowrap; overflow: hidden; transition: opacity .18s; } .sidebar.collapsed nav .sidebar-label { opacity: 0; height: 0; padding: 0; overflow: hidden; } /* Nav items */ .sidebar nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 4px 8px 12px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.12) transparent; } .sidebar nav::-webkit-scrollbar { width: 3px; } .sidebar nav::-webkit-scrollbar-track { background: transparent; } .sidebar nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 3px; } .sidebar nav a { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 8px; font-size: .83rem; font-weight: 600; color: rgba(255,255,255,.62); text-decoration: none; cursor: pointer; transition: all .16s; white-space: nowrap; overflow: hidden; position: relative; margin-bottom: 2px; } .sidebar nav a i { font-size: .88rem; width: 18px; text-align: center; flex-shrink: 0; opacity: .75; transition: opacity .16s; } .sidebar nav a .nav-text { flex: 1; overflow: hidden; text-overflow: ellipsis; transition: opacity .18s, width .22s; } .sidebar.collapsed nav a .nav-text { opacity: 0; width: 0; } .sidebar nav a:hover { background: rgba(255,255,255,.09); color: #fff; } .sidebar nav a:hover i { opacity: 1; } .sidebar nav a.active { background: rgba(245,196,0,.16); color: #F5C400; font-weight: 700; } .sidebar nav a.active i { opacity: 1; color: #F5C400; } .sidebar nav a.active::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 60%; background: #F5C400; border-radius: 0 3px 3px 0; } /* Badge on nav item */ .sidebar .nav-badge { background: #F5C400; color: #1A1A1A; border-radius: 20px; font-size:.68rem; font-weight: 800; padding: 1px 6px; line-height: 1.5; flex-shrink: 0; transition: opacity .18s; } .sidebar.collapsed .nav-badge { opacity: 0; } /* Sidebar footer (user info) */ .sidebar-footer { padding: 10px 8px; border-top: 1px solid rgba(255,255,255,.08); flex-shrink: 0; } .sidebar-footer-inner { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 8px; background: rgba(255,255,255,.05); overflow: hidden; white-space: nowrap; transition: background .16s; } .sidebar-footer-inner:hover { background: rgba(255,255,255,.09); } .sidebar-footer-avatar { width: 28px; height: 28px; border-radius: 50%; background: #F5C400; color: #1A1A1A; display: flex; align-items: center; justify-content: center; font-size:.68rem; font-weight: 800; flex-shrink: 0; } .sidebar-footer-name { font-size: .75rem; font-weight: 600; color: rgba(255,255,255,.75); overflow: hidden; text-overflow: ellipsis; transition: opacity .18s; } .sidebar.collapsed .sidebar-footer-name { opacity: 0; } /* ── SIDEBAR GROUP NAV ── */ .sidebar-group { margin-bottom: 2px; } .sidebar-group-header { display: flex; align-items: center; gap: 9px; padding: 8px 10px 7px; border-radius: 8px; font-size: .7rem; font-weight: 800; color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: .1em; cursor: pointer; transition: all .18s; white-space: nowrap; overflow: hidden; user-select: none; } .sidebar-group-header:hover { color: rgba(255,255,255,.65); background: rgba(255,255,255,.04); } .sidebar-group-header i.group-icon { font-size: .78rem; width: 18px; text-align: center; flex-shrink: 0; opacity: .6; } .sidebar-group-header .group-label { flex: 1; overflow: hidden; text-overflow: ellipsis; transition: opacity .2s, width .28s; } .sidebar-group-header .group-chevron { font-size:.68rem; transition: transform .22s ease, opacity .18s; flex-shrink: 0; opacity: .5; } .sidebar-group-header.open .group-chevron { transform: rotate(90deg); } .sidebar.collapsed .sidebar-group-header .group-label, .sidebar.collapsed .sidebar-group-header .group-chevron { opacity: 0; width: 0; overflow: hidden; } .sidebar-group-items { overflow: hidden; max-height: 0; transition: max-height .32s cubic-bezier(.4,0,.2,1); } .sidebar-group-items.open { max-height: 500px; } .sidebar.collapsed .sidebar-group-items.open { max-height: 500px; } /* Access level badge colors */ .role-tag { display: inline-flex; align-items: center; gap: 4px; font-size:.68rem; font-weight: 800; padding: 1px 6px; border-radius: 20px; margin-left: 4px; } .role-tag.admin { background: rgba(245,196,0,.2); color: #F5C400; } .role-tag.supervisor { background: rgba(59,130,246,.2); color: #60a5fa; } .role-tag.operator { background: rgba(52,211,153,.2); color: #6ee7b7; } .role-tag.viewer { background: rgba(148,163,184,.2); color: #94a3b8; } /* Sidebar perfil indicador */ .sidebar-role-indicator { display: flex; align-items: center; gap: 6px; padding: 6px 10px; margin: 2px 8px 6px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); border-radius: 8px; font-size: .68rem; color: rgba(255,255,255,.5); white-space: nowrap; overflow: hidden; transition: opacity .2s; } .sidebar-role-indicator .role-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .sidebar-role-indicator .role-name { font-weight: 700; color: rgba(255,255,255,.7); } .sidebar.collapsed .sidebar-role-indicator { opacity: 0; height: 0; padding: 0; margin: 0; overflow: hidden; } /* Access level colors for dot */ .role-dot.admin { background: #F5C400; } .role-dot.supervisor { background: #60a5fa; } .role-dot.operator { background: #6ee7b7; } .role-dot.viewer { background: #94a3b8; } /* Tooltip on collapsed sidebar */ .sidebar.collapsed nav a { position: relative; } .sidebar.collapsed nav a::after { content: attr(data-tip); position: absolute; left: calc(var(--sidebar-w-collapsed) - 4px); top: 50%; transform: translateY(-50%); background: #0f2e52; color: #fff; font-size: .78rem; font-weight: 600; padding: 5px 10px; border-radius: 6px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .14s; z-index: 300; box-shadow: 2px 2px 8px rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.12); } .sidebar.collapsed nav a:hover::after { opacity: 1; } /* ── CONTENT AREA ── */ .content-area { margin-top: var(--topnav-h); margin-left: var(--sidebar-w); padding: 24px 24px; min-height: calc(100vh - var(--topnav-h)); transition: margin-left .22s cubic-bezier(.4,0,.2,1); } .sidebar.collapsed ~ #content-area .content-area, body.sidebar-collapsed .content-area { margin-left: var(--sidebar-w-collapsed); } /* ── PAGE HEADER ── */ .page-header { margin-bottom: 24px; padding: 16px 20px 16px 22px; background: #fff; border-radius: 12px; border-left: 4px solid var(--bage-yellow); box-shadow: var(--card-shadow); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .page-header-left { display: flex; flex-direction: column; gap: 2px; flex: 1; } .page-header h2 { font-family: 'Barlow Condensed', sans-serif; font-size: 1.4rem; font-weight: 800; color: var(--primary); margin: 0; display: flex; align-items: center; gap: 8px; line-height: 1.2; } .page-header h2 i { color: var(--bage-yellow-dark); } .page-header p { font-size: .82rem; color: var(--text-muted); margin: 0; } /* ══════════════════════════════════════════════════════════ CARDS ══════════════════════════════════════════════════════════ */ .cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; } .card { background: #fff; border-radius: 12px; padding: 18px 20px; box-shadow: var(--card-shadow); border-left: 4px solid var(--bage-yellow); position: relative; overflow: hidden; transition: transform .2s, box-shadow .2s; } .card:hover { transform: translateY(-2px); box-shadow: var(--card-shadow-hover); } .card.blue { border-left-color: #3182ce; } .card.green { border-left-color: #38a169; } .card.orange{ border-left-color: #dd6b20; } .card.red { border-left-color: #e53e3e; } .card.purple{ border-left-color: #805ad5; } .card.yellow{ border-left-color: var(--bage-yellow); } .card-icon-wrap { width: 38px; height: 38px; border-radius: 9px; background: var(--light-bg); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; } .card-icon-wrap i { font-size: 1.05rem; color: var(--bage-yellow-dark); } .card.blue .card-icon-wrap i { color: #3182ce; } .card.green .card-icon-wrap i { color: #38a169; } .card.orange .card-icon-wrap i { color: #dd6b20; } .card.red .card-icon-wrap i { color: #e53e3e; } .card.purple .card-icon-wrap i { color: #805ad5; } .card h3 { font-size: .74rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; } .card-value, .card .val { font-family: 'Barlow Condensed', sans-serif; font-size: 1.8rem; font-weight: 800; color: var(--primary); line-height: 1; } .card-label, .card .sub { font-size: .78rem; color: var(--text-muted); margin-top: 4px; font-weight: 500; } .card-sub { font-size: .72rem; color: var(--text-light); margin-top: 6px; } /* Clickable stat cards */ .stat-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; } .stat-card { background: #fff; border-radius: 10px; padding: 12px 16px; cursor: pointer; border: 2px solid transparent; box-shadow: var(--card-shadow); transition: all .2s; display: flex; flex-direction: column; align-items: center; min-width: 100px; } .stat-card:hover { border-color: var(--bage-yellow); transform: translateY(-2px); box-shadow: 0 4px 14px rgba(245,196,0,.18); } .stat-card.selected { border-color: var(--bage-yellow-dark); background: #fffdf0; } .stat-card .cnt { font-family: 'Barlow Condensed', sans-serif; font-size: 1.5rem; font-weight: 800; line-height: 1; } .stat-card .lbl { font-size: .7rem; color: var(--text-muted); text-align: center; margin-top: 3px; font-weight: 500; } /* Status badge */ .badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 20px; font-size: .67rem; font-weight: 700; letter-spacing: .45px; white-space: nowrap; text-transform: uppercase; } .badge.proposta { background: #fef3c7; color: #92400e; } .badge.aprovado { background: #e9d5ff; color: #5b21b6; } .badge.projeto { background: #ffedd5; color: #9a3412; } .badge.pre-licitacao { background: #dbeafe; color: #1e40af; } .badge.licitacao { background: #fed7aa; color: #c2410c; } .badge.execucao { background: #bbf7d0; color: #166534; } .badge.paralisado { background: #fee2e2; color: #991b1b; } .badge.concluido { background: #d1fae5; color: #065f46; } /* ══════════════════════════════════════════════════════════ TABLES ══════════════════════════════════════════════════════════ */ .tbl-wrap { background: #fff; border-radius: 12px; box-shadow: var(--card-shadow); overflow-x: auto; overflow-y: hidden; margin-bottom: 22px; } table { width: 100%; border-collapse: collapse; } thead th { background: var(--primary); color: rgba(255,255,255,.92); padding: 10px 12px; font-size: .7rem; font-weight: 700; text-align: left; letter-spacing: .5px; white-space: nowrap; text-transform: uppercase; user-select: none; } tbody tr { border-bottom: 1px solid var(--border-light); transition: background .12s; } tbody tr:nth-child(even) { background: rgba(0,0,0,.018); } tbody tr:hover { background: rgba(245,196,0,.07) !important; } tbody td { padding: 9px 12px; font-size: .82rem; vertical-align: middle; } .sessions-table th { background: var(--bage-gray-dark); } /* ══════════════════════════════════════════════════════════ FILTERS ══════════════════════════════════════════════════════════ */ .filters { background: #fff; border-radius: 12px; padding: 16px 18px; margin-bottom: 18px; box-shadow: var(--card-shadow); display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; } .filter-group { display: flex; flex-direction: column; gap: 4px; min-width: 140px; flex: 1; } .filter-group label { font-size: .7rem; font-weight: 700; color: var(--text-muted); letter-spacing: .4px; text-transform: uppercase; } .form-control, input[type="text"], input[type="number"], input[type="date"], textarea { border: 1.5px solid var(--border); border-radius: 7px; padding: 7px 10px; font-size: .83rem; color: var(--text); background: #fff; font-family: inherit; transition: border .2s, box-shadow .2s; } select { border: 1.5px solid var(--border); border-radius: 7px; padding: 7px 28px 7px 10px; font-size: .83rem; color: var(--text); background: #fff; font-family: inherit; transition: border .2s, box-shadow .2s; -webkit-appearance: none; appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235C5C5C' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; } .form-control:focus, select:focus, input:focus, textarea:focus { outline: none; border-color: var(--bage-yellow); box-shadow: 0 0 0 3px rgba(245,196,0,.12); } /* ══════════════════════════════════════════════════════════ BUTTONS ══════════════════════════════════════════════════════════ */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 7px; border: none; font-size: .83rem; font-weight: 600; cursor: pointer; transition: all .2s; font-family: inherit; white-space: nowrap; } .btn-primary { background: var(--bage-yellow); color: #1A1A1A; box-shadow: 0 2px 6px rgba(245,196,0,.28); } .btn-primary:hover { background: var(--bage-yellow-dark); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(245,196,0,.38); } .btn-danger { background: var(--danger); color: #fff; } .btn-danger:hover { background: #c53030; } .btn-warning { background: #ed8936; color: #fff; } .btn-warning:hover { background: #c05621; } .btn-outline { background: transparent; color: var(--text-muted); border: 1.5px solid var(--border); } .btn-outline:hover { background: var(--light-bg); color: var(--primary); } .btn-success { background: #38a169; color: #fff; box-shadow: 0 2px 6px rgba(56,161,105,.28); } .btn-success:hover { background: #276749; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(56,161,105,.38); } .btn-sm { padding: 4px 10px; font-size: .76rem; } .edit-on { background: var(--danger) !important; color: #fff !important; } /* ══════════════════════════════════════════════════════════ CHARTS AREA ══════════════════════════════════════════════════════════ */ .charts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: 16px; margin-bottom: 22px; } .chart-card { background: #fff; border-radius: 12px; padding: 18px; box-shadow: var(--card-shadow); border-top: 3px solid transparent; transition: border-top-color .2s; } .chart-card:hover { border-top-color: var(--bage-yellow); } .chart-card h3 { font-size: .85rem; font-weight: 700; color: var(--primary); margin-bottom: 14px; display: flex; align-items: center; gap: 7px; } .chart-card h3 i { color: var(--bage-yellow-dark); } .chart-card canvas { max-height: 220px; } /* ══════════════════════════════════════════════════════════ SECTION HEADER ══════════════════════════════════════════════════════════ */ .section-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin: 20px 0 14px; } .section-header h2 { font-family: 'Barlow Condensed', sans-serif; font-size: 1.1rem; font-weight: 700; color: var(--primary); display: flex; align-items: center; gap: 8px; } .section-header h2 i { color: var(--bage-yellow-dark); } .subsection-title { font-size: .76rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; margin: 22px 0 10px; display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 2px solid var(--border-light); } .subsection-title i { color: var(--bage-yellow-dark); } /* ══════════════════════════════════════════════════════════ FINANCIAL SECTION ══════════════════════════════════════════════════════════ */ .financial-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(300px,1fr)); gap: 16px; margin-bottom: 16px; } .financial-card { background: #fff; border-radius: 12px; padding: 20px; box-shadow: var(--card-shadow); border-top: 3px solid var(--bage-yellow); } .financial-card h3 { font-size: .9rem; font-weight: 700; color: var(--primary); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; } .financial-card h3 i { color: var(--bage-yellow-dark); } .financial-item { display: flex; justify-content: space-between; align-items: center; padding: 9px 6px; border-bottom: 1px solid var(--border-light); border-radius: 4px; transition: background .12s; } .financial-item:hover { background: rgba(245,196,0,.04); } .financial-item:last-child { border-bottom: none; } .financial-item .label { font-size: .8rem; color: var(--text-muted); font-weight: 500; } .financial-item .value { font-size: .9rem; font-weight: 700; color: var(--primary); } .financial-item .value.positive { color: #38a169; } /* ══════════════════════════════════════════════════════════ DEPUTIES ══════════════════════════════════════════════════════════ */ .deputy-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: var(--surface2); border-radius: 8px; margin-bottom: 6px; border: 1px solid var(--border-light); transition: border-color .15s, background .15s; } .deputy-item:hover { border-color: var(--bage-yellow); background: #fffdf0; } .deputy-name { font-size: .85rem; font-weight: 600; color: var(--primary); } .deputy-party { font-size: .75rem; color: var(--text-muted); } .deputy-value { font-size: .88rem; font-weight: 700; color: var(--bage-yellow-dark); } /* ══════════════════════════════════════════════════════════ PROGRESS BAR ══════════════════════════════════════════════════════════ */ .progress-bar { height: 6px; background: var(--border-light); border-radius: 99px; overflow: hidden; width: 100%; } .progress-bar .progress { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--bage-yellow-dark), var(--bage-yellow)); transition: width .5s cubic-bezier(.4,0,.2,1); } /* ══════════════════════════════════════════════════════════ PAGINATION ══════════════════════════════════════════════════════════ */ .pagination { display: flex; align-items: center; gap: 4px; margin-top: 12px; flex-wrap: wrap; } .page-btn { padding: 5px 10px; min-width: 32px; text-align: center; border: 1.5px solid var(--border); border-radius: 7px; background: #fff; cursor: pointer; font-size: .77rem; font-weight: 600; color: var(--text-muted); transition: all .15s; font-family: inherit; } .page-btn:hover:not(:disabled) { border-color: var(--bage-yellow); color: var(--primary); background: #fffdf0; } .page-btn.active { background: var(--bage-yellow); border-color: var(--bage-yellow-dark); color: #1A1A1A; box-shadow: 0 2px 6px rgba(245,196,0,.3); } .page-btn:disabled { opacity: .4; cursor: not-allowed; } /* ══════════════════════════════════════════════════════════ MODAL ══════════════════════════════════════════════════════════ */ .modal-overlay { display: none; position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.55); backdrop-filter: blur(3px); align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; } .modal-overlay.active { display: flex; } .modal-box { background: #fff; border-radius: 16px; width: 100%; max-width: 860px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.3); animation: slideUp .3s ease; } @keyframes slideUp { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .modal-hdr { background: var(--primary); color: #fff; padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; border-radius: 16px 16px 0 0; } .modal-hdr h2 { font-size: 1rem; font-weight: 700; font-family: 'Barlow Condensed', sans-serif; } .modal-hdr-btns { display: flex; align-items: center; gap: 8px; } .modal-action-btn { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.2); border-radius: 6px; padding: 5px 10px; font-size: .78rem; cursor: pointer; display: flex; align-items: center; gap: 5px; font-family: inherit; transition: background .2s; } .modal-action-btn:hover { background: rgba(245,196,0,.2); } .close-btn { background: none; border: none; color: rgba(255,255,255,.7); font-size: 1.4rem; cursor: pointer; padding: 0 4px; line-height: 1; transition: color .2s; } .close-btn:hover { color: #fff; } .modal-body { padding: 20px 24px; max-height: 75vh; overflow-y: auto; } /* ══════════════════════════════════════════════════════════ DETAIL MODAL CONTENT ══════════════════════════════════════════════════════════ */ .detail-section { margin-bottom: 20px; } .detail-section h3 { font-size: .8rem; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: .6px; padding-bottom: 7px; border-bottom: 2px solid var(--bage-yellow); margin-bottom: 12px; display: flex; align-items: center; gap: 6px; } .detail-section h3 i { color: var(--bage-yellow-dark); } .detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 10px; } .detail-item { background: var(--surface2); border-radius: 8px; padding: 9px 12px; border: 1px solid var(--border-light); transition: border-color .15s; } .detail-item:hover { border-color: var(--bage-yellow); } .detail-item .label { font-size: .68rem; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 2px; } .detail-item .value { font-size: .84rem; color: var(--primary); font-weight: 500; } .obs-box { border-radius: 8px; padding: 12px 14px; font-size: .83rem; } .obs-box.tec { background: #fef9c3; border-left: 3px solid var(--bage-yellow-dark); color: #713f12; } .obs-box.gestor { background: #dcfce7; border-left: 3px solid #16a34a; color: #14532d; } /* ══════════════════════════════════════════════════════════ FORM CARD ══════════════════════════════════════════════════════════ */ .form-card { background: #fff; border-radius: 12px; padding: 20px; box-shadow: var(--card-shadow); } .form-card h3 { font-size: .9rem; font-weight: 700; color: var(--primary); margin-bottom: 16px; display: flex; align-items: center; gap: 7px; } .form-group { margin-bottom: 14px; } .form-group label { display: block; font-size: .72rem; font-weight: 700; color: var(--text-muted); letter-spacing: .4px; text-transform: uppercase; margin-bottom: 5px; } .form-group select, .form-group input, .form-group textarea { width: 100%; } .form-group textarea { resize: vertical; min-height: 80px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; } .users-grid { display: grid; grid-template-columns: 1fr 360px; gap: 16px; } /* ══════════════════════════════════════════════════════════ USER CARDS ══════════════════════════════════════════════════════════ */ .user-card { background: var(--surface2); border: 1px solid var(--border-light); border-radius: 10px; padding: 12px 16px; display: flex; align-items: center; gap: 12px; transition: border-color .15s, box-shadow .15s; } .user-card:hover { border-color: var(--bage-yellow); box-shadow: 0 2px 10px rgba(245,196,0,.12); } .user-avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .82rem; flex-shrink: 0; } .user-avatar.admin-av { background: var(--bage-yellow); color: #1A1A1A; } .user-avatar.supervisor-av { background: #1e3a5f; color: #fff; } .user-avatar.operator-av { background: #2d6a4f; color: #fff; } .user-avatar.viewer-av { background: var(--border); color: var(--text-muted); } .user-info { flex: 1; } .user-info .u-name { font-size: .85rem; font-weight: 700; color: var(--primary); } .user-info .u-username { font-size: .76rem; color: var(--text-muted); } .user-info .u-meta { font-size: .72rem; color: var(--text-light); margin-top: 2px; } .user-badge { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: .7rem; font-weight: 700; } .user-badge.admin { background: var(--bage-yellow-light); color: #92400e; } .user-badge.supervisor { background: #dbeafe; color: #1e3a5f; } .user-badge.operator { background: #d1fae5; color: #1a4731; } .user-badge.viewer { background: #e2e8f0; color: #4a5568; } .user-badge.inactive { background: #fee2e2; color: #991b1b; } .user-actions { display: flex; gap: 6px; } .user-actions button { background: none; border: 1.5px solid var(--border); border-radius: 6px; width: 28px; height: 28px; cursor: pointer; color: var(--text-muted); font-size: .78rem; display: flex; align-items: center; justify-content: center; transition: .2s; } .user-actions button:hover { border-color: var(--bage-yellow); color: var(--primary); background: var(--bage-yellow-light); } .user-actions button.del:hover { border-color: var(--danger); color: var(--danger); background: #fff5f5; } .online-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #38a169; margin-right: 5px; } /* ══════════════════════════════════════════════════════════ BACKUP ZONE ══════════════════════════════════════════════════════════ */ .backup-zone { background: var(--surface2); border-radius: 10px; padding: 16px; margin-bottom: 14px; } .backup-zone h3 { font-size: .85rem; font-weight: 700; color: var(--primary); margin-bottom: 6px; display: flex; align-items: center; gap: 7px; } .backup-zone p { font-size: .8rem; color: var(--text-muted); margin-bottom: 10px; } .danger-zone { background: #fff5f5; border: 1px solid #fed7d7; border-radius: 10px; padding: 16px; margin-bottom: 14px; } .danger-zone h3 { font-size: .85rem; font-weight: 700; color: #c53030; margin-bottom: 6px; display: flex; align-items: center; gap: 7px; } /* ══════════════════════════════════════════════════════════ CONFIRM DIALOG ══════════════════════════════════════════════════════════ */ .confirm-dialog { display: none; position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.55); align-items: center; justify-content: center; } .confirm-dialog.active { display: flex; } .confirm-box { background: #fff; border-radius: 16px; padding: 30px 28px 24px; max-width: 400px; width: 100%; text-align: center; box-shadow: 0 24px 64px rgba(0,0,0,.28); border-top: 3px solid var(--bage-yellow); } .confirm-icon { font-size: 2.1rem; color: var(--bage-yellow-dark); margin-bottom: 14px; } .confirm-box h3 { font-family: 'Barlow Condensed', sans-serif; font-size: 1.18rem; font-weight: 800; margin-bottom: 10px; color: var(--primary); } .confirm-box p { font-size: .85rem; color: var(--text-muted); margin-bottom: 24px; line-height: 1.6; } .confirm-btns { display: flex; gap: 10px; justify-content: center; } /* ══════════════════════════════════════════════════════════ NOTIFICATION ══════════════════════════════════════════════════════════ */ .notification { position: fixed; bottom: 24px; right: 24px; z-index: 3000; background: var(--primary); color: #fff; padding: 13px 20px; border-radius: 12px; font-size: .84rem; font-weight: 600; box-shadow: 0 12px 32px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.12); animation: slideIn .28s cubic-bezier(.34,1.56,.64,1); max-width: 360px; border-left: 4px solid rgba(255,255,255,.28); } .notification.success { background: #38a169; } .notification.error { background: var(--danger); } .notification.info { background: #3182ce; } @keyframes slideIn { from { transform: translateX(30px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* ══════════════════════════════════════════════════════════ ALERT BANNER ══════════════════════════════════════════════════════════ */ .alert-banner { display: flex; align-items: center; gap: 10px; background: var(--bage-yellow-light); border: 1px solid var(--bage-yellow); border-radius: 10px; padding: 11px 16px; margin-bottom: 16px; font-size: .83rem; color: #78350f; } .alert-banner i { color: var(--bage-yellow-dark); } .alert-banner a { color: var(--bage-yellow-dark); text-decoration: underline; cursor: pointer; font-weight: 700; } /* ══════════════════════════════════════════════════════════ OBRAS PÚBLICAS MODULE ══════════════════════════════════════════════════════════ */ .acoes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin-bottom: 22px; } .acao-card { background: #fff; border-radius: 12px; padding: 18px; box-shadow: var(--card-shadow); border-top: 3px solid var(--bage-yellow); cursor: pointer; transition: transform .2s, box-shadow .2s, border-top-color .2s; } .acao-card:hover { transform: translateY(-2px); box-shadow: var(--card-shadow-hover); } .acao-card.status-execucao { border-top-color: #38a169; } .acao-card.status-paralisado { border-top-color: #e53e3e; } .acao-card.status-concluido { border-top-color: #3182ce; } .acao-card.status-licitacao { border-top-color: #ed8936; } .acao-card.status-proposta { border-top-color: #805ad5; } .acao-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; } .acao-card-id { font-size: .7rem; color: var(--text-light); font-weight: 700; } .acao-card-title { font-size: .88rem; font-weight: 700; color: var(--primary); line-height: 1.4; margin-bottom: 8px; } .acao-card-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .acao-tag { font-size: .68rem; padding: 2px 7px; border-radius: 4px; background: var(--light-bg); color: var(--text-muted); font-weight: 600; } .acao-card-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; border-top: 1px solid var(--border-light); } .acao-value { font-size: .8rem; font-weight: 700; color: var(--bage-yellow-dark); } .acao-progress-wrap { width: 80px; } /* Kanban board */ .kanban-board { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 16px; min-height: 400px; } .kanban-col { min-width: 240px; flex: 1; background: var(--light-bg); border-radius: 10px; padding: 12px; } .kanban-col-header { font-size: .78rem; font-weight: 800; color: var(--primary); text-transform: uppercase; letter-spacing: .5px; padding: 6px 8px; border-radius: 6px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; } .kanban-card { background: #fff; border-radius: 9px; padding: 10px 12px; margin-bottom: 8px; box-shadow: var(--card-shadow); border-left: 3px solid var(--bage-yellow); cursor: pointer; transition: transform .15s, box-shadow .15s, border-left-color .15s; font-size: .79rem; } .kanban-card:hover { transform: translateX(4px); box-shadow: 0 4px 16px rgba(0,0,0,.1); } .kanban-card-id { font-size: .68rem; color: var(--text-light); font-weight: 600; margin-bottom: 3px; } .kanban-card-title { font-weight: 600; color: var(--primary); line-height: 1.3; margin-bottom: 5px; } .kanban-card-val { font-size: .72rem; color: var(--bage-yellow-dark); font-weight: 700; } /* Timeline */ .timeline { position: relative; padding-left: 30px; } .timeline::before { content: ''; position: absolute; left: 12px; top: 0; bottom: 0; width: 2px; background: var(--bage-yellow); } .timeline-item { position: relative; margin-bottom: 18px; } .timeline-dot { position: absolute; left: -24px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--bage-yellow); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--bage-yellow); } .timeline-dot.concluido { background: #38a169; box-shadow: 0 0 0 2px #38a169; } .timeline-dot.paralisado { background: #e53e3e; box-shadow: 0 0 0 2px #e53e3e; } .timeline-content { background: #fff; border-radius: 8px; padding: 12px 14px; box-shadow: var(--card-shadow); } .timeline-content h4 { font-size: .84rem; font-weight: 700; color: var(--primary); margin-bottom: 4px; } .timeline-content p { font-size: .78rem; color: var(--text-muted); } /* ══════════════════════════════════════════════════════════ MAP PLACEHOLDER ══════════════════════════════════════════════════════════ */ .map-placeholder { background: var(--light-bg); border-radius: 12px; border: 2px dashed var(--bage-yellow); height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--text-muted); } .map-placeholder i { font-size: 2.5rem; color: var(--bage-yellow-dark); } .map-placeholder p { font-size: .85rem; } /* ══════════════════════════════════════════════════════════ MOBILE RESPONSIVE ══════════════════════════════════════════════════════════ */ .mobile-menu-btn { display: none; background: none; border: none; color: rgba(255,255,255,.8); font-size: 1.2rem; cursor: pointer; padding: 4px; } @media (max-width: 768px) { .mobile-menu-btn { display: flex; align-items: center; } .sidebar { transform: translateX(-100%); transition: transform .25s cubic-bezier(.4,0,.2,1), width .22s; } .sidebar.mobile-open { transform: translateX(0); } .sidebar-overlay { display: block; } .content-area { margin-left: 0 !important; padding: 16px 12px; } .cards-grid { grid-template-columns: repeat(2,1fr); gap: 10px; } .form-row { grid-template-columns: 1fr; } .users-grid { grid-template-columns: 1fr; } .charts-grid { grid-template-columns: 1fr; } .topnav-user-info .u-name-text { display: none; } .topnav-btn.hide-mobile { display: none; } .acoes-grid { grid-template-columns: 1fr; } .kanban-board { min-height: 300px; } } @media (max-width: 480px) { .cards-grid { grid-template-columns: 1fr; } .stat-row { gap: 6px; } .stat-card { min-width: 80px; padding: 10px 12px; } } /* ══════════════════════════════════════════════════════════ PRINT STYLES ══════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════ TAB PILLS — Ações Públicas e outras abas ══════════════════════════════════════════════════════════ */ .tab-pills { display: flex; gap: 2px; background: var(--light-bg); border-radius: 10px; padding: 4px; border: 1px solid var(--border-light); flex-wrap: wrap; } .tab-pill { display: flex; align-items: center; gap: 6px; padding: 7px 15px; border-radius: 7px; border: none; font-family: 'Barlow', sans-serif; font-size: .79rem; font-weight: 600; cursor: pointer; transition: all .18s; background: transparent; color: var(--text-muted); white-space: nowrap; } .tab-pill:hover { background: rgba(245,196,0,.12); color: var(--primary); } .tab-pill.active { background: #fff; color: var(--primary); box-shadow: 0 1px 5px rgba(0,0,0,.1); } .tab-pill i { font-size: .76rem; opacity: .75; transition: opacity .18s; } .tab-pill.active i { color: var(--bage-yellow-dark); opacity: 1; } .tab-pill:hover i { opacity: 1; } @media print { .topnav, .sidebar, .filters, .pagination, .btn, .topnav-btn { display: none !important; } .section { display: block !important; } .content-area { margin: 0 !important; padding: 0 !important; } } @media print { .modal-print-mode .modal-box { display: block !important; } .modal-print-mode .modal-overlay { position: static; background: none; } } /* ══════════════════════════════════════════════════════════ SECTIONS ══════════════════════════════════════════════════════════ */ .section { display: none; animation: fadeIn .25s; padding: 24px; } .section.active { display: block; } @keyframes fadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } } .empty-state { text-align: center; padding: 40px 20px; color: var(--text-light); } .empty-state i { font-size: 2.5rem; opacity: .3; display: block; margin-bottom: 10px; } .empty-state p { font-size: .85rem; } /* ══════════════════════════════════════════════════════════ BREADCRUMB / INFO BAR ══════════════════════════════════════════════════════════ */ .info-bar { font-size: .72rem; color: rgba(255,255,255,.5); display: none; } @media (min-width: 900px) { .info-bar { display: block; } } /* Scrollbar */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--bage-yellow-dark); } /* Selection */ ::selection { background: rgba(245,196,0,.2); }