/* ============================================================================ Gerenciador de Dashboard - NobelPack Design System | Azul-marinho #0D2E51 . Dourado #E4B72A . Branco #FFFFFF ========================================================================= */ /* ------------------------------------------------------------- 1. Tokens -- */ :root { /* Marca */ --navy-900: #061727; --navy-800: #0A2440; --navy: #0D2E51; --navy-700: #14406C; --navy-600: #1B5289; --navy-500: #2A6BAA; --navy-050: #EEF3F9; --gold: #E4B72A; --gold-700: #B58C12; --gold-600: #CFA31C; --gold-200: #F6E4A8; --gold-050: #FDF7E4; --white: #FFFFFF; /* Superficies (invertem no tema escuro; --white permanece branco literal, usado como texto sobre o azul-marinho) */ --surface: #FFFFFF; --surface-alpha: rgba(255,255,255,.88); --line-forte: #C6D2E2; --scroll: #CBD5E1; --scroll-hover: #9FB0C4; --seta-select: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2346586E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); /* Neutros */ --ink: #0F1D2E; --ink-2: #46586E; --ink-3: #7C8A9C; --ink-4: #A8B3C1; --line: #E2E8F1; --line-2: #EFF3F8; --bg: #F4F7FB; --bg-2: #FAFBFD; /* Semanticos */ --ok: #10795A; --ok-bg: #E6F4EF; --warn: #A96A0B; --warn-bg: #FDF3E2; --danger: #B5342A; --danger-bg:#FBECEA; --info: #1B5289; --info-bg: #E9F1F9; /* Elevacao */ --sh-1: 0 1px 2px rgba(13,46,81,.06), 0 1px 3px rgba(13,46,81,.05); --sh-2: 0 2px 6px rgba(13,46,81,.07), 0 6px 16px rgba(13,46,81,.06); --sh-3: 0 10px 24px rgba(13,46,81,.10), 0 22px 60px rgba(13,46,81,.12); --sh-focus: 0 0 0 3px rgba(42,107,170,.22); /* Formas */ --r-sm: 6px; --r: 10px; --r-lg: 14px; --r-xl: 20px; --sidebar-w: 268px; --topbar-h: 64px; --font: "Segoe UI Variable Text", "Segoe UI", Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --mono: "Cascadia Mono", "Consolas", "SF Mono", ui-monospace, monospace; --ease: cubic-bezier(.22,.61,.36,1); } /* ------------------------------------------------------- 1b. Tema escuro -- O tema e definido em por web/js/tema.js, que roda antes da primeira pintura para nao piscar. Aqui so redefinimos os tokens - nenhum componente precisa saber qual tema esta ativo. */ :root[data-tema="escuro"] { --navy-900: #04101C; --navy-800: #0A1B2B; --navy: #0D2E51; --navy-700: #2A6BAA; --navy-600: #61A5E0; --navy-500: #7FB8EC; --navy-050: #16293C; --gold: #E9C33F; --gold-700: #F0D375; --gold-600: #D8AF29; --gold-200: #6B550F; --gold-050: #2B2410; /* Superficies e neutros */ --surface: #142334; --surface-alpha: rgba(16,29,43,.90); --ink: #E9EFF7; --ink-2: #B3C3D6; --ink-3: #8397AC; --ink-4: #64798F; --line: #23384F; --line-2: #1C2E42; --line-forte: #33506E; --bg: #0B1622; --bg-2: #101D2B; --scroll: #2C4360; --scroll-hover: #3E5C80; --seta-select: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23B3C3D6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); /* Semanticos: tons mais claros para contrastar com o fundo escuro */ --ok: #4FC79B; --ok-bg: #12332A; --warn: #E8B65C; --warn-bg: #382B12; --danger: #F08D82; --danger-bg:#3A1E1A; --info: #78B4EC; --info-bg: #14293D; /* Sombras precisam ser mais densas sobre fundo escuro */ --sh-1: 0 1px 2px rgba(0,0,0,.34), 0 1px 3px rgba(0,0,0,.28); --sh-2: 0 2px 6px rgba(0,0,0,.38), 0 6px 16px rgba(0,0,0,.32); --sh-3: 0 10px 24px rgba(0,0,0,.46), 0 22px 60px rgba(0,0,0,.42); --sh-focus: 0 0 0 3px rgba(127,184,236,.28); } /* Ajustes pontuais que nao se resolvem so por token */ :root[data-tema="escuro"] .side { background: linear-gradient(178deg, #0A1B2B 0%, #0C2440 55%, #05121F 100%); border-right: 1px solid var(--line); } :root[data-tema="escuro"] .btn--primary { background: var(--navy-700); color: #04101C; } :root[data-tema="escuro"] .btn--primary:hover { background: var(--navy-600); } :root[data-tema="escuro"] .btn--danger { color: #2A0F0B; } :root[data-tema="escuro"] .avatar { color: #1B1405; } :root[data-tema="escuro"] .navitem.is-active .navitem__badge { color: #04101C; } :root[data-tema="escuro"] .seg button.is-active { color: var(--ink); } :root[data-tema="escuro"] .overlay { background: rgba(2,8,15,.66); } :root[data-tema="escuro"] .login { background: var(--bg); } :root[data-tema="escuro"] .chart .area { fill: url(#gradNavyEscuro); } :root[data-tema="escuro"] .spinner--dark { border-color: var(--line); border-top-color: var(--navy-600); } :root[data-tema="escuro"] .brandchip { background: #F2F5F9; } :root[data-tema="escuro"] ::selection { background: var(--gold-200); color: var(--ink); } /* O conteudo do dashboard vive dentro de um iframe e mantem o proprio tema. A moldura fica neutra para nao brigar com painieis de fundo claro. */ :root[data-tema="escuro"] .viewer__frame { background: var(--bg-2); } /* Botao de alternancia de tema */ .tema-btn { position: relative; } .tema-btn .ico-claro, .tema-btn .ico-escuro { transition: opacity .18s var(--ease), transform .18s var(--ease); } :root[data-tema="claro"] .tema-btn .ico-claro { display: none; } :root[data-tema="escuro"] .tema-btn .ico-escuro { display: none; } .login__tema { position: absolute; top: 22px; right: 24px; z-index: 2; } /* -------------------------------------------------------------- 2. Reset -- */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font); font-size: 14px; line-height: 1.5; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1,h2,h3,h4,h5,p,figure { margin: 0; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: 0; } a { color: var(--navy-600); text-decoration: none; } a:hover { text-decoration: underline; } svg { display: block; } [hidden] { display: none !important; } ::selection { background: var(--gold-200); color: var(--navy); } :focus-visible { outline: 2px solid var(--navy-500); outline-offset: 2px; border-radius: 4px; } /* Scrollbar discreta */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: var(--scroll-hover); background-clip: content-box; } /* ================================================================= LOGIN == */ .login { min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr; background: var(--surface); } .login__brand { position: relative; overflow: hidden; padding: 56px 64px; display: flex; flex-direction: column; justify-content: space-between; background: radial-gradient(1100px 620px at 12% -10%, rgba(42,107,170,.42), transparent 60%), radial-gradient(760px 520px at 96% 108%, rgba(228,183,42,.20), transparent 62%), linear-gradient(155deg, var(--navy-800) 0%, var(--navy) 45%, var(--navy-900) 100%); color: var(--white); } .login__brand::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 46px 46px; mask-image: radial-gradient(circle at 30% 30%, #000 0%, transparent 78%); pointer-events: none; } .login__brand > * { position: relative; z-index: 1; } .login__logo { width: 176px; height: auto; } .login__pitch h1 { font-size: 38px; font-weight: 700; letter-spacing: -.9px; line-height: 1.14; max-width: 15ch; margin-bottom: 16px; } .login__pitch h1 em { font-style: normal; color: var(--gold); } .login__pitch p { color: rgba(255,255,255,.74); font-size: 15px; max-width: 44ch; line-height: 1.65; } .login__facts { display: flex; gap: 36px; margin-top: 34px; } .login__fact strong { display: block; font-size: 22px; font-weight: 700; color: var(--gold); letter-spacing: -.4px; } .login__fact span { font-size: 12px; color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .07em; } .login__foot { font-size: 12px; color: rgba(255,255,255,.45); } .login__panel { position: relative; display: grid; place-items: center; padding: 40px; } .login__form { width: 100%; max-width: 380px; } .login__form h2 { font-size: 25px; font-weight: 650; letter-spacing: -.5px; } .login__form .sub { color: var(--ink-3); margin: 8px 0 30px; font-size: 14px; } .login__mobilelogo { display: none; } /* Base branca para exibir o logotipo oficial sobre o painel azul-marinho, quando nao houver uma versao clara da arte. */ .brandchip { display: inline-flex; align-items: center; justify-content: center; background: var(--white); padding: 14px 22px; border-radius: var(--r-lg); box-shadow: 0 6px 20px rgba(0,0,0,.18); align-self: flex-start; } .brandchip img { width: 168px; height: auto; display: block; } .side__mark { object-fit: contain; } .login__logo, .login__mobilelogo { object-fit: contain; } /* ============================================================== APP SHELL == */ .app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; } .app.is-collapsed { --sidebar-w: 76px; } /* --------------------------------------------------------- 3. Sidebar ----- */ .side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; background: linear-gradient(178deg, var(--navy-800) 0%, var(--navy) 55%, var(--navy-900) 100%); color: rgba(255,255,255,.82); border-right: 1px solid rgba(255,255,255,.06); z-index: 40; transition: width .22s var(--ease); } .side__head { height: var(--topbar-h); display: flex; align-items: center; gap: 11px; padding: 0 18px; border-bottom: 1px solid rgba(255,255,255,.08); flex-shrink: 0; } .side__mark { width: 30px; height: 30px; flex-shrink: 0; } .side__name { display: flex; flex-direction: column; overflow: hidden; } .side__name b { font-size: 14.5px; font-weight: 700; color: var(--white); letter-spacing: -.3px; white-space: nowrap; } .side__name span { font-size: 10.5px; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .09em; white-space: nowrap; } .app.is-collapsed .side__name { display: none; } .side__nav { flex: 1; overflow-y: auto; padding: 16px 12px 20px; } .side__nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); background-clip: content-box; } .side__block + .side__block { margin-top: 22px; } .side__label { font-size: 10.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: rgba(255,255,255,.38); padding: 0 12px 9px; } .app.is-collapsed .side__label { overflow: hidden; text-indent: -999px; height: 1px; padding: 0; margin: 14px 12px; background: rgba(255,255,255,.12); border-radius: 1px; } .navitem { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 12px; border-radius: var(--r-sm); color: rgba(255,255,255,.78); font-size: 13.5px; font-weight: 500; text-align: left; transition: background .15s var(--ease), color .15s var(--ease); } .navitem:hover { background: rgba(255,255,255,.07); color: var(--white); text-decoration: none; } .navitem.is-active { background: rgba(255,255,255,.11); color: var(--white); font-weight: 600; } .navitem.is-active::before { content: ""; position: absolute; left: -12px; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: var(--gold); } .navitem svg { width: 18px; height: 18px; flex-shrink: 0; stroke-width: 1.7; } .navitem__txt { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .navitem__badge { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 20px; background: rgba(255,255,255,.13); color: rgba(255,255,255,.85); } .navitem.is-active .navitem__badge { background: var(--gold); color: var(--navy); } .app.is-collapsed .navitem { justify-content: center; padding: 10px; } .app.is-collapsed .navitem__txt, .app.is-collapsed .navitem__badge { display: none; } .side__foot { padding: 14px 12px; border-top: 1px solid rgba(255,255,255,.08); flex-shrink: 0; } .side__user { display: flex; align-items: center; gap: 11px; width: 100%; padding: 8px; border-radius: var(--r-sm); } .side__user:hover { background: rgba(255,255,255,.07); } .side__user .avatar { flex-shrink: 0; } .side__userinfo { overflow: hidden; text-align: left; flex: 1; } .side__userinfo b { display: block; font-size: 13px; color: var(--white); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .side__userinfo span { font-size: 11.5px; color: rgba(255,255,255,.5); } .app.is-collapsed .side__userinfo, .app.is-collapsed .side__user svg.chev { display: none; } .avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 700; letter-spacing: .2px; background: linear-gradient(140deg, var(--gold) 0%, var(--gold-700) 100%); color: var(--navy-900); } .avatar--sm { width: 28px; height: 28px; font-size: 11px; } .avatar--lg { width: 44px; height: 44px; font-size: 15px; } /* ---------------------------------------------------------- 4. Topbar ----- */ .main { display: flex; flex-direction: column; min-width: 0; } .top { position: sticky; top: 0; z-index: 30; height: var(--topbar-h); display: flex; align-items: center; gap: 16px; padding: 0 26px; background: var(--surface-alpha); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--line); } .icobtn { width: 34px; height: 34px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--ink-2); transition: background .15s var(--ease), color .15s var(--ease); } .icobtn:hover { background: var(--line-2); color: var(--navy); } .icobtn svg { width: 18px; height: 18px; } .crumb { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-3); min-width: 0; } .crumb b { color: var(--ink); font-weight: 600; font-size: 14.5px; letter-spacing: -.2px; } .crumb__sep { color: var(--ink-4); } .crumb a { color: var(--ink-3); } .top__spacer { flex: 1; } .search { position: relative; width: 300px; } .search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--ink-4); pointer-events: none; } .search input { width: 100%; height: 36px; padding: 0 12px 0 34px; border: 1px solid var(--line); border-radius: 18px; background: var(--bg-2); font-size: 13.5px; transition: border-color .15s, box-shadow .15s, background .15s; } .search input::placeholder { color: var(--ink-4); } .search input:focus { outline: none; background: var(--surface); border-color: var(--navy-500); box-shadow: var(--sh-focus); } /* ----------------------------------------------------------- 5. Content --- */ .content { flex: 1; padding: 26px 26px 44px; max-width: 1560px; width: 100%; } .page__head { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 22px; flex-wrap: wrap; } .page__title { font-size: 23px; font-weight: 650; letter-spacing: -.55px; color: var(--ink); } .page__sub { color: var(--ink-3); font-size: 13.5px; margin-top: 5px; max-width: 78ch; } .page__actions { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; } .grid { display: grid; gap: 16px; } .grid--kpi { grid-template-columns: repeat(auto-fit, minmax(224px, 1fr)); } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .grid--cards { grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); } .stack { display: grid; gap: 16px; } /* ------------------------------------------------------------- 6. Cards --- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); } .card__head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line-2); } .card__head h3 { font-size: 14.5px; font-weight: 650; letter-spacing: -.2px; } .card__head p { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; } .card__head .right { margin-left: auto; display: flex; gap: 8px; align-items: center; } .card__body { padding: 20px; } .card__body--flush { padding: 0; } .card__foot { padding: 13px 20px; border-top: 1px solid var(--line-2); background: var(--bg-2); border-radius: 0 0 var(--r-lg) var(--r-lg); font-size: 12.5px; color: var(--ink-3); } /* KPI */ .kpi { position: relative; padding: 18px 20px; overflow: hidden; } .kpi::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent, var(--navy)); opacity: .85; } .kpi__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .kpi__label { font-size: 12px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; } .kpi__ico { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-bg, var(--navy-050)); color: var(--accent, var(--navy)); } .kpi__ico svg { width: 18px; height: 18px; } .kpi__value { font-size: 30px; font-weight: 700; letter-spacing: -1.1px; margin-top: 10px; line-height: 1.1; font-variant-numeric: tabular-nums; } .kpi__value small { font-size: 14px; font-weight: 600; color: var(--ink-3); letter-spacing: 0; } .kpi__foot { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12.5px; color: var(--ink-3); } /* --------------------------------------------------------- 7. Componentes - */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 15px; border: 1px solid transparent; border-radius: var(--r-sm); font-size: 13.5px; font-weight: 600; letter-spacing: -.1px; white-space: nowrap; transition: background .15s var(--ease), border-color .15s, box-shadow .15s, transform .06s; } .btn:hover { text-decoration: none; } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: .5; cursor: not-allowed; transform: none; } .btn svg { width: 16px; height: 16px; } .btn--primary { background: var(--navy); color: var(--white); box-shadow: var(--sh-1); } .btn--primary:hover { background: var(--navy-700); } .btn--gold { background: var(--gold); color: var(--navy-900); box-shadow: var(--sh-1); } .btn--gold:hover { background: var(--gold-600); } .btn--ghost { background: var(--surface); border-color: var(--line); color: var(--ink-2); } .btn--ghost:hover { background: var(--bg-2); border-color: var(--line-forte); color: var(--navy); } .btn--subtle { background: var(--line-2); color: var(--ink-2); } .btn--subtle:hover { background: var(--line); color: var(--navy); } .btn--danger { background: var(--danger); color: var(--white); } .btn--danger:hover { background: #99291F; } .btn--sm { height: 30px; padding: 0 11px; font-size: 12.5px; border-radius: var(--r-sm); } .btn--icon { width: 32px; padding: 0; } .btn--block { width: 100%; height: 42px; font-size: 14.5px; } .chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 20px; font-size: 11.5px; font-weight: 600; letter-spacing: .01em; background: var(--line-2); color: var(--ink-2); white-space: nowrap; } .chip--ok { background: var(--ok-bg); color: var(--ok); } .chip--warn { background: var(--warn-bg); color: var(--warn); } .chip--danger { background: var(--danger-bg); color: var(--danger); } .chip--info { background: var(--info-bg); color: var(--info); } .chip--gold { background: var(--gold-050); color: var(--gold-700); } .chip--navy { background: var(--navy-050); color: var(--navy-600); } .chip__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* Formularios */ .field { display: grid; gap: 6px; } .field > label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); } .field > label .req { color: var(--danger); margin-left: 2px; } .field .hint { font-size: 11.5px; color: var(--ink-3); } .field .err { font-size: 11.5px; color: var(--danger); font-weight: 500; } .input, .select, .textarea { width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); font-size: 13.5px; transition: border-color .15s, box-shadow .15s; } .textarea { height: auto; min-height: 84px; padding: 10px 12px; resize: vertical; line-height: 1.55; } .select { appearance: none; padding-right: 34px; background-image: var(--seta-select); background-repeat: no-repeat; background-position: right 11px center; } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--navy-500); box-shadow: var(--sh-focus); } .input:disabled, .select:disabled { background: var(--bg-2); color: var(--ink-3); cursor: not-allowed; } .input.is-error, .select.is-error { border-color: var(--danger); } .input[type="color"] { padding: 3px; height: 38px; cursor: pointer; } .check { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; font-size: 13.5px; } .check input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--navy); cursor: pointer; flex-shrink: 0; } .check span b { display: block; font-weight: 600; } .check span i { font-style: normal; font-size: 12px; color: var(--ink-3); } .picker { border: 1px solid var(--line); border-radius: var(--r-sm); max-height: 190px; overflow-y: auto; padding: 6px; background: var(--bg-2); } .picker__item { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 5px; cursor: pointer; font-size: 13px; } .picker__item:hover { background: var(--surface); } .picker__item input { accent-color: var(--navy); width: 15px; height: 15px; cursor: pointer; } .picker__empty { padding: 14px; text-align: center; color: var(--ink-3); font-size: 12.5px; } .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .form-grid .col-2 { grid-column: 1 / -1; } .dropzone { border: 1.5px dashed var(--line-forte); border-radius: var(--r); padding: 22px; text-align: center; background: var(--bg-2); transition: border-color .15s, background .15s; cursor: pointer; } .dropzone:hover, .dropzone.is-over { border-color: var(--navy-500); background: var(--navy-050); } .dropzone svg { width: 26px; height: 26px; margin: 0 auto 9px; color: var(--navy-500); } .dropzone b { font-size: 13.5px; display: block; } .dropzone span { font-size: 12px; color: var(--ink-3); } .dropzone.has-file { border-style: solid; border-color: var(--ok); background: var(--ok-bg); } .dropzone.has-file svg { color: var(--ok); } /* Tabelas */ .tablewrap { overflow-x: auto; } table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; } table.tbl th { position: sticky; top: 0; z-index: 2; text-align: left; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); padding: 11px 16px; background: var(--bg-2); border-bottom: 1px solid var(--line); white-space: nowrap; } table.tbl td { padding: 12px 16px; border-bottom: 1px solid var(--line-2); vertical-align: middle; } table.tbl tbody tr { transition: background .12s; } table.tbl tbody tr:hover { background: var(--navy-050); } table.tbl tbody tr:last-child td { border-bottom: 0; } table.tbl .num { text-align: right; font-variant-numeric: tabular-nums; } table.tbl .acts { text-align: right; white-space: nowrap; } table.tbl .acts .icobtn { display: inline-grid; } .cellmain { font-weight: 600; color: var(--ink); } .cellsub { font-size: 12px; color: var(--ink-3); margin-top: 1px; } .tbl-empty { padding: 44px 20px; text-align: center; color: var(--ink-3); } /* Cartoes de grupo / dashboard */ .gcard { position: relative; display: block; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--sh-1); overflow: hidden; transition: box-shadow .18s var(--ease), transform .18s var(--ease), border-color .18s; } .gcard:hover { box-shadow: var(--sh-2); transform: translateY(-2px); border-color: var(--line-forte); text-decoration: none; } .gcard::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--accent, var(--navy)); } .gcard__ico { width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-bg); color: var(--accent); margin-bottom: 14px; } .gcard__ico svg { width: 21px; height: 21px; } .gcard h4 { font-size: 15.5px; font-weight: 650; letter-spacing: -.25px; color: var(--ink); } .gcard p { font-size: 13px; color: var(--ink-3); margin-top: 5px; min-height: 38px; line-height: 1.5; } .gcard__meta { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line-2); font-size: 12.5px; color: var(--ink-3); } .gcard__meta b { color: var(--ink); font-weight: 650; } .dcard { display: flex; flex-direction: column; } .dcard__top { display: flex; align-items: flex-start; gap: 12px; } .dcard__body { flex: 1; } .dcard__title { font-size: 14.5px; font-weight: 650; letter-spacing: -.2px; } .dcard__desc { font-size: 12.5px; color: var(--ink-3); margin-top: 4px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 38px; } .dcard__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .dcard__foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line-2); } .dcard__stat { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-3); } .dcard__stat svg { width: 14px; height: 14px; } /* Estados vazios */ .empty { padding: 56px 24px; text-align: center; } .empty__ico { width: 60px; height: 60px; border-radius: 16px; margin: 0 auto 16px; display: grid; place-items: center; background: var(--navy-050); color: var(--navy-500); } .empty__ico svg { width: 27px; height: 27px; } .empty h3 { font-size: 16px; font-weight: 650; } .empty p { color: var(--ink-3); font-size: 13.5px; margin: 7px auto 0; max-width: 46ch; line-height: 1.6; } .empty .btn { margin-top: 18px; } /* Barras / progresso */ .bars { display: grid; gap: 13px; } .bar__top { display: flex; align-items: center; gap: 10px; font-size: 13px; margin-bottom: 6px; } .bar__top b { font-weight: 600; } .bar__top .v { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--ink-2); font-weight: 650; } .bar__track { height: 7px; border-radius: 4px; background: var(--line-2); overflow: hidden; } .bar__fill { height: 100%; border-radius: 4px; background: var(--navy); transition: width .5s var(--ease); } /* Timeline de auditoria */ .tline { display: grid; gap: 0; } .tline__item { display: flex; gap: 13px; padding: 11px 0; border-bottom: 1px solid var(--line-2); } .tline__item:last-child { border-bottom: 0; } .tline__dot { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; display: grid; place-items: center; background: var(--info-bg); color: var(--info); } .tline__dot svg { width: 15px; height: 15px; } .tline__dot.is-warn { background: var(--warn-bg); color: var(--warn); } .tline__dot.is-danger { background: var(--danger-bg); color: var(--danger); } .tline__dot.is-ok { background: var(--ok-bg); color: var(--ok); } .tline__body { flex: 1; min-width: 0; } .tline__body b { font-size: 13px; font-weight: 600; } .tline__body p { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tline__time { font-size: 11.5px; color: var(--ink-4); white-space: nowrap; } /* Abas */ .tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 20px; overflow-x: auto; } .tab { padding: 10px 15px; font-size: 13.5px; font-weight: 600; color: var(--ink-3); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; transition: color .15s, border-color .15s; } .tab:hover { color: var(--navy); } .tab.is-active { color: var(--navy); border-bottom-color: var(--gold); } .tab__count { font-size: 11.5px; color: var(--ink-4); margin-left: 5px; font-weight: 600; } /* Alternancia quadros / lista */ .seg--visao button { display: inline-flex; align-items: center; gap: 6px; } .seg--visao svg { width: 15px; height: 15px; } .seg--visao button.is-active svg { color: var(--navy); } :root[data-tema="escuro"] .seg--visao button.is-active svg { color: var(--ink); } @media (max-width: 620px) { .seg--visao button span { display: none; } } /* Linhas de tabela que abrem um registro */ table.tbl--clicavel tbody tr { cursor: pointer; } table.tbl--clicavel tbody tr:hover .cellmain { color: var(--navy-600); } table.tbl--clicavel td:first-child { max-width: 520px; } table.tbl--clicavel .cellsub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 60ch; } /* Filtros */ .filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; } .filters .field { min-width: 160px; } .filters .field--grow { flex: 1; min-width: 220px; } /* Segmentado */ .seg { display: inline-flex; background: var(--line-2); border-radius: 8px; padding: 3px; gap: 2px; } .seg button { padding: 5px 13px; border-radius: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); transition: background .15s, color .15s; } .seg button.is-active { background: var(--surface); color: var(--navy); box-shadow: var(--sh-1); } /* --------------------------------------------------------- 8. Visualizador */ .viewer { display: flex; flex-direction: column; height: calc(100vh - var(--topbar-h)); background: var(--surface); } .viewer__bar { display: flex; align-items: center; gap: 12px; padding: 12px 22px; border-bottom: 1px solid var(--line); background: var(--surface); flex-shrink: 0; } .viewer__title { min-width: 0; } .viewer__title b { display: block; font-size: 15px; font-weight: 650; letter-spacing: -.25px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .viewer__title span { font-size: 12.5px; color: var(--ink-3); } .viewer__acts { margin-left: auto; display: flex; gap: 8px; align-items: center; } .viewer__frame { flex: 1; border: 0; width: 100%; background: var(--bg); } .viewer.is-full { position: fixed; inset: 0; z-index: 90; height: 100vh; } /* --------------------------------------------------------------- 9. Modal - */ .overlay { position: fixed; inset: 0; z-index: 100; background: rgba(8,22,39,.48); backdrop-filter: blur(3px); display: grid; place-items: center; padding: 24px; animation: fade .16s var(--ease); } @keyframes fade { from { opacity: 0 } to { opacity: 1 } } @keyframes rise { from { opacity: 0; transform: translateY(14px) scale(.985) } to { opacity: 1; transform: none } } .modal { width: 100%; max-width: 660px; max-height: calc(100vh - 48px); display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--sh-3); animation: rise .2s var(--ease); overflow: hidden; } .modal--sm { max-width: 440px; } .modal--lg { max-width: 860px; } .modal__head { display: flex; align-items: flex-start; gap: 14px; padding: 22px 24px 16px; } .modal__head h3 { font-size: 17.5px; font-weight: 650; letter-spacing: -.35px; } .modal__head p { font-size: 13px; color: var(--ink-3); margin-top: 4px; } .modal__head .icobtn { margin-left: auto; } .modal__body { padding: 4px 24px 22px; overflow-y: auto; } .modal__foot { display: flex; gap: 10px; justify-content: flex-end; padding: 16px 24px; border-top: 1px solid var(--line-2); background: var(--bg-2); } .modal__foot .left { margin-right: auto; } .alertbox { display: flex; gap: 12px; padding: 13px 15px; border-radius: var(--r); font-size: 13px; line-height: 1.55; } .alertbox svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; } .alertbox--danger { background: var(--danger-bg); color: var(--danger); } .alertbox--warn { background: var(--warn-bg); color: var(--warn); } .alertbox--info { background: var(--info-bg); color: var(--info); } .alertbox--ok { background: var(--ok-bg); color: var(--ok); } /* ---------------------------------------------------------- 10. Toasts ---- */ .toasts { position: fixed; right: 22px; bottom: 22px; z-index: 200; display: grid; gap: 10px; width: 348px; } .toast { display: flex; gap: 12px; align-items: flex-start; padding: 13px 15px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-3); animation: rise .2s var(--ease); border-left: 3px solid var(--navy-500); } .toast--ok { border-left-color: var(--ok); } .toast--err { border-left-color: var(--danger); } .toast--warn { border-left-color: var(--warn); } .toast svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; } .toast--ok svg { color: var(--ok); } .toast--err svg { color: var(--danger); } .toast--warn svg { color: var(--warn); } .toast b { font-size: 13.5px; font-weight: 650; display: block; } .toast p { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; line-height: 1.5; } /* ------------------------------------------------------------ 11. Utils --- */ .muted { color: var(--ink-3); } .small { font-size: 12.5px; } .mono { font-family: var(--mono); font-size: 12px; } .nowrap { white-space: nowrap; } .right { text-align: right; } .center { text-align: center; } .flex { display: flex; align-items: center; gap: 10px; } .flex--between { justify-content: space-between; } .flex--wrap { flex-wrap: wrap; } .mt-0 { margin-top: 0 } .mt-1 { margin-top: 8px } .mt-2 { margin-top: 16px } .mt-3 { margin-top: 24px } .mb-2 { margin-bottom: 16px } .divider { height: 1px; background: var(--line-2); margin: 18px 0; } .skeleton { border-radius: var(--r-sm); background: linear-gradient(90deg, var(--line-2) 25%, #E8EDF4 37%, var(--line-2) 63%); background-size: 400% 100%; animation: shimmer 1.3s ease-in-out infinite; } @keyframes shimmer { from { background-position: 100% 0 } to { background-position: 0 0 } } .spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: var(--white); animation: spin .7s linear infinite; } .spinner--dark { border-color: var(--line); border-top-color: var(--navy); } @keyframes spin { to { transform: rotate(360deg) } } .loading-page { display: grid; place-items: center; padding: 80px 20px; } .loading-page .spinner { width: 30px; height: 30px; border-width: 3px; } /* Grafico SVG */ .chart { width: 100%; } .chart .axis { stroke: var(--line); stroke-width: 1; } .chart .gridline { stroke: var(--line-2); stroke-width: 1; } .chart .lbl { font-size: 10.5px; fill: var(--ink-3); font-family: var(--font); } .chart .area { fill: url(#gradNavy); } .chart .line { fill: none; stroke: var(--navy-600); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; } .chart .pt { fill: var(--surface); stroke: var(--navy-600); stroke-width: 2; } .chart .pt-hit { fill: transparent; cursor: pointer; } .chart .colbar { fill: var(--navy-600); transition: fill .15s; } .chart .colbar:hover { fill: var(--gold); } /* ------------------------------------------------------ 12. Responsivo ---- */ @media (max-width: 1180px) { .search { width: 210px; } } @media (max-width: 980px) { .login { grid-template-columns: 1fr; } .login__brand { display: none; } .login__mobilelogo { display: block; margin: 0 auto 26px; width: 150px; } .login__panel { align-items: flex-start; padding-top: 64px; } } @media (max-width: 900px) { .app { grid-template-columns: 1fr; } .side { position: fixed; left: 0; top: 0; width: 280px; transform: translateX(-100%); transition: transform .24s var(--ease); box-shadow: var(--sh-3); } .app.is-open .side { transform: none; } .app.is-open::after { content: ""; position: fixed; inset: 0; background: rgba(8,22,39,.4); z-index: 35; } .content { padding: 18px 16px 40px; } .top { padding: 0 16px; } .search { display: none; } .form-grid { grid-template-columns: 1fr; } .toasts { left: 16px; right: 16px; width: auto; } } @media (min-width: 901px) { .only-mobile { display: none !important; } } @media print { .side, .top, .page__actions, .toasts { display: none !important; } .app { grid-template-columns: 1fr; } .card { box-shadow: none; break-inside: avoid; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* Visibilidade por breakpoint (complemento) */ @media (max-width: 900px) { .only-desktop { display: none !important; } }