/* ======================================================================== FAOS UI — Design System Canônico em ~/.claude/design/faos-ui.css Versão 1.53 (01/09/2026: prosa + diagramas Mermaid como componentes; .main--prose DEPRECADO — cap de leitura é anti-pattern) Versão 1.8 (28/05/2026: sidebar rail + nav por módulos accordion/flyout) — 28/05/2026 (layout largo: .main min(1800px,100%) — aproveita a tela; modos de largura .main--form (820px, só telas cadastrar) e .main--prose (72ch); input solto capa 720px fora de grid) Versão 1.6 — 22/05/2026 (batch process primitives: lote-action-bar, lote-fases-grid, lote-card + fase-pill, lote-cnab-card — extraídas na migração Campanha/listar) Tagline: indigo · GitHub-style · dashboard primitives Ref: ~/.claude/design/faos-ui.md ======================================================================== */ :root { /* === Paleta neutra (light, GitHub-inspired) === */ --bg: #FFFFFF; --surface: #FFFFFF; --surface-alt: #F6F8FA; /* canvas-subtle — headers, hover */ /* === Borders (mais marcadas que antes, GitHub-style) === */ --border-subtle: #D8DEE4; --border: #D0D7DE; --border-strong: #8C959F; /* === Texto === */ --text: #1F2328; --text-muted: #656D76; --text-subtle: #8C959F; --text-inverse: #FFFFFF; /* === Ação (indigo FAOS) === */ --accent: #5B5BD6; --accent-hover: #4F46E5; --accent-active: #4338CA; --accent-bg: #EEF2FF; --accent-ring: rgba(91, 91, 214, 0.20); /* === Cores ONG (FAOS=azul, SVP=laranja) === */ --ong-faos: #1F6FEB; --ong-faos-bg: #DDF4FF; --ong-svp: #F97316; --ong-svp-bg: #FFF1E5; /* === Status === */ --success: #1A7F37; --success-bg: #DAFBE1; --warning: #9A6700; --warning-bg: #FFF8C5; --danger: #CF222E; --danger-bg: #FFEBE9; --info: #0969DA; --info-bg: #DDF4FF; /* === Tipografia === */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-mono: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace; --fs-xs: 11px; --fs-sm: 12px; --fs-base: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 18px; --fs-2xl: 22px; --fs-3xl: 28px; --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --lh-tight: 1.25; --lh-normal: 1.5; /* === Espaçamento === */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; /* === Radius === */ --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 12px; --r-full: 9999px; /* === Sombras (mais discretas, GitHub-style usa borda) === */ --shadow-xs: 0 1px 0 0 rgba(31, 35, 40, 0.04); --shadow-sm: 0 3px 6px rgba(140, 149, 159, 0.15); --shadow-md: 0 8px 24px rgba(140, 149, 159, 0.20); --shadow-lg: 0 12px 28px rgba(140, 149, 159, 0.30); /* === Movimento === */ --motion-fast: 100ms; --motion-base: 150ms; --motion-slow: 250ms; --ease: cubic-bezier(0.4, 0, 0.2, 1); color-scheme: light; } /* =========================================================================== DARK MODE Ativado por: 1. data-theme="dark" no (forçado por usuário) 2. prefers-color-scheme: dark (auto, se data-theme não definido) =========================================================================== */ :root[data-theme="dark"] { --bg: #0D1117; --surface: #161B22; --surface-alt: #21262D; --border-subtle: #21262D; --border: #30363D; --border-strong: #6E7681; --text: #E6EDF3; --text-muted: #8B949E; --text-subtle: #6E7681; --text-inverse: #0D1117; --accent: #7C7CDE; --accent-hover: #9090E5; --accent-active: #6464D0; --accent-bg: #1E1E3F; --accent-ring: rgba(124, 124, 222, 0.30); --ong-faos: #388BFD; --ong-faos-bg: #0C2D6B; --ong-svp: #FB923C; --ong-svp-bg: #3A1D0A; --success: #3FB950; --success-bg: #04250F; --warning: #D29922; --warning-bg: #2E2A0E; --danger: #F85149; --danger-bg: #2D1216; --info: #2F81F7; --info-bg: #0C2D6B; --shadow-xs: 0 1px 0 0 rgba(0, 0, 0, 0.20); --shadow-sm: 0 3px 6px rgba(0, 0, 0, 0.30); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.40); --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.50); color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0D1117; --surface: #161B22; --surface-alt: #21262D; --border-subtle: #21262D; --border: #30363D; --border-strong: #6E7681; --text: #E6EDF3; --text-muted: #8B949E; --text-subtle: #6E7681; --text-inverse: #0D1117; --accent: #7C7CDE; --accent-hover: #9090E5; --accent-active: #6464D0; --accent-bg: #1E1E3F; --accent-ring: rgba(124, 124, 222, 0.30); --success: #3FB950; --success-bg: #04250F; --warning: #D29922; --warning-bg: #2E2A0E; --danger: #F85149; --danger-bg: #2D1216; --info: #2F81F7; --info-bg: #0C2D6B; --shadow-xs: 0 1px 0 0 rgba(0, 0, 0, 0.20); --shadow-sm: 0 3px 6px rgba(0, 0, 0, 0.30); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.40); --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.50); color-scheme: dark; } } /* === Reset leve === */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-sans); font-size: var(--fs-md); line-height: var(--lh-normal); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "cv02", "cv11", "ss01"; /* Inter — leituras finas */ } h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--fw-semibold); line-height: var(--lh-tight); } h1 { font-size: var(--fs-3xl); } h2 { font-size: var(--fs-xl); } h3 { font-size: var(--fs-lg); } h4 { font-size: var(--fs-md); } p { margin: 0; } a { color: var(--accent); text-decoration: none; transition: color var(--motion-base) var(--ease); } a:hover { color: var(--accent-hover); text-decoration: underline; } code, pre, .mono { font-family: var(--font-mono); } code { background: var(--surface-alt); padding: 2px 6px; border-radius: var(--r-sm); font-size: 0.92em; color: var(--text); } /* === Layout === */ .topbar { display: flex; align-items: center; justify-content: space-between; padding: var(--s-3) var(--s-6); background: var(--surface); border-bottom: 1px solid var(--border-subtle); position: sticky; top: 0; z-index: 50; box-shadow: var(--shadow-xs); } .brand { display: flex; align-items: center; gap: var(--s-2); } .brand-mark { width: 24px; height: 24px; background: linear-gradient(135deg, var(--accent), var(--accent-active)); border-radius: var(--r-md); display: inline-flex; align-items: center; justify-content: center; color: var(--text-inverse); font-weight: var(--fw-semibold); font-size: var(--fs-sm); } .brand-name { font-weight: var(--fw-semibold); font-size: var(--fs-md); letter-spacing: -0.01em; color: var(--text); } .topbar-nav { display: flex; align-items: center; gap: var(--s-2); } .topbar-nav .muted { user-select: none; } .topbar-center { color: var(--text-muted); font-size: var(--fs-sm); user-select: none; } @media (max-width: 900px) { .topbar-center { display: none; } } .topbar-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: transparent; border: 1px solid var(--border); border-radius: var(--r-md); color: var(--text-muted); cursor: pointer; transition: background var(--motion-base) var(--ease), color var(--motion-base) var(--ease), border-color var(--motion-base) var(--ease); padding: 0; text-decoration: none; } .topbar-icon-btn:hover { background: var(--surface-alt); color: var(--text); border-color: var(--border-strong); text-decoration: none; } .topbar-icon-btn svg { width: 16px; height: 16px; display: block; } .container { max-width: 1240px; margin: 0 auto; padding: var(--s-5) var(--s-6); } /* === App shell (topbar + sidebar + main) === */ .app-shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: calc(100vh - 49px); /* topbar height ~49 */ background: var(--bg); } .app-shell .sidebar { position: sticky; top: 49px; align-self: start; height: calc(100vh - 49px); overflow-y: auto; background: var(--surface-alt); border-right: 1px solid var(--border-subtle); padding: var(--s-4) var(--s-3); } .app-shell .main { padding: var(--s-5) var(--s-6); max-width: min(1800px, 100%); /* largo: aproveita a tela (era 1100px, deixava espaço morto à direita) */ width: 100%; min-width: 0; /* impede que min-content de filhos empurre a faixa do grid */ } /* Modo de largura por tipo de tela (28/05/2026). Layout aplica .main--form só em views terminadas em "cadastrar" (form de criar). alterar/gestão ficam largas. */ .app-shell .main.main--form { max-width: 820px; } .app-shell .main.main--prose { max-width: 72ch; } .sidebar-section { margin-bottom: var(--s-5); } .sidebar-section-title { font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-subtle); padding: 0 var(--s-3); margin-bottom: var(--s-2); } .sidebar-nav { display: flex; flex-direction: column; gap: 2px; } .sidebar-link { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); border-radius: var(--r-md); color: var(--text-muted); font-size: var(--fs-md); text-decoration: none; transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease); font-weight: var(--fw-medium); line-height: 1; } .sidebar-link:hover { background: var(--surface); color: var(--text); text-decoration: none; } .sidebar-link.is-active { background: var(--accent-bg); color: var(--accent); } .sidebar-link svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.85; } .sidebar-link.is-active svg { opacity: 1; } .sidebar-link .badge { margin-left: auto; } .sidebar-footer { margin-top: auto; padding: var(--s-3); font-size: var(--fs-xs); color: var(--text-subtle); border-top: 1px solid var(--border-subtle); } /* === Section headers (anchors no .main) === */ .section { scroll-margin-top: 60px; /* compensa topbar sticky no smooth-scroll */ margin-bottom: var(--s-6); } .section-header { margin-bottom: var(--s-3); padding-bottom: var(--s-2); border-bottom: 1px solid var(--border-subtle); } .section-title { font-size: var(--fs-xl); font-weight: var(--fw-semibold); color: var(--text); margin: 0; } .section-subtitle { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 2px; } /* Mobile: sidebar colapsa */ @media (max-width: 800px) { .app-shell { grid-template-columns: 1fr; } .app-shell .sidebar { position: static; height: auto; border-right: none; border-bottom: 1px solid var(--border-subtle); } .sidebar-nav { flex-direction: row; flex-wrap: wrap; } .sidebar-section-title { display: none; } .sidebar-link { flex: 0 0 auto; } } /* === Card (GitHub-style: borda > sombra, header sutil) === */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); margin-bottom: var(--s-4); overflow: hidden; } .card-header { padding: var(--s-3) var(--s-5); border-bottom: 1px solid var(--border-subtle); background: var(--surface-alt); } .card-title { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text); margin: 0; display: flex; align-items: center; gap: var(--s-2); } .card-title .step { width: 20px; height: 20px; background: var(--accent-bg); color: var(--accent); border-radius: var(--r-full); display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-xs); font-weight: var(--fw-semibold); } .card-subtitle { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 2px; } .card-body { padding: var(--s-5); /* FAOS UI v1.2: ritmo vertical via flex + gap (substitui margin-bottom manual). Garante simetria topo/embaixo do card e elimina necessidade de inline `margin-top: var(--s-4)` nos filhos diretos. */ display: flex; flex-direction: column; gap: var(--s-4); } .card-body > *:first-child { margin-top: 0; } .card-body > *:last-child { margin-bottom: 0; } /* FAOS UI v1.2: botões filhos diretos do card-body NÃO esticam (default flex column estica filhos via align-items:stretch). Volta pra largura natural. */ .card-body > .btn { align-self: flex-start; } /* FAOS UI v1.2: placeholders vazios (#preview-result, #print-result, etc) não criam gap fantasma quando ainda não foram preenchidos via JS. */ .card-body > *:empty { display: none; } .card-footer { padding: var(--s-3) var(--s-5); background: var(--surface-alt); border-top: 1px solid var(--border-subtle); } /* === Field / Input === */ .field { display: flex; flex-direction: column; gap: var(--s-1); margin-bottom: var(--s-4); } /* FAOS UI v1.2: último field NÃO empilha mb (evita "sobra embaixo" do card). */ .field:last-child { margin-bottom: 0; } .row > div > .field:only-child { margin-bottom: 0; } .field .label { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text); } .field .help { font-size: var(--fs-xs); color: var(--text-muted); } .input, .select, .textarea { width: 100%; padding: var(--s-2) var(--s-3); background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-md); font-size: var(--fs-md); font-family: inherit; transition: border-color var(--motion-base) var(--ease), box-shadow var(--motion-base) var(--ease); appearance: none; } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); } .input::placeholder { color: var(--text-subtle); } .input:disabled { background: var(--surface-alt); color: var(--text-subtle); cursor: not-allowed; } .select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2394A3B8'%3E%3Cpath d='M5.5 7.5L10 12l4.5-4.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--s-3) center; background-size: 16px; padding-right: var(--s-8); } .input[type="file"] { padding: var(--s-2); cursor: pointer; } .input[type="number"] { max-width: 120px; } .field-row { display: flex; gap: var(--s-4); flex-wrap: wrap; } .field-row > .field { flex: 1; min-width: 200px; } /* === Botão === */ .btn { display: inline-flex; align-items: center; gap: var(--s-1); padding: var(--s-2) var(--s-4); background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-md); font-family: inherit; font-size: var(--fs-md); font-weight: var(--fw-medium); cursor: pointer; transition: background var(--motion-base) var(--ease), border-color var(--motion-base) var(--ease), transform var(--motion-fast) var(--ease); user-select: none; white-space: nowrap; } .btn:hover { background: var(--surface-alt); border-color: var(--border-strong); } .btn:active { transform: scale(0.98); } .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); } .btn:disabled { background: var(--surface-alt); color: var(--text-subtle); cursor: not-allowed; border-color: var(--border-subtle); } .btn-primary { background: var(--accent); color: var(--text-inverse); border-color: var(--accent); } .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .btn-primary:active { background: var(--accent-active); } .btn-primary:disabled { background: var(--text-subtle); border-color: transparent; color: var(--text-inverse); } .btn-secondary { background: var(--surface-alt); } .btn-secondary:hover { background: var(--border-subtle); } .btn-danger { background: var(--danger); color: var(--text-inverse); border-color: var(--danger); } .btn-danger:hover { background: #DC2626; border-color: #DC2626; } .btn-ghost { background: transparent; border-color: transparent; color: var(--text-muted); } .btn-ghost:hover { background: var(--surface-alt); color: var(--text); } .btn-sm { padding: var(--s-1) var(--s-2); font-size: var(--fs-sm); } .btn-lg { padding: var(--s-3) var(--s-6); font-size: var(--fs-lg); } .btn-block { width: 100%; justify-content: center; } /* === Badge === */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; background: var(--surface-alt); color: var(--text-muted); border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: var(--fw-medium); line-height: 1.4; } .badge-success { background: var(--success-bg); color: var(--success); } .badge-warning { background: var(--warning-bg); color: var(--warning); } .badge-danger { background: var(--danger-bg); color: var(--danger); } .badge-info { background: var(--info-bg); color: var(--info); } .badge-accent { background: var(--accent-bg); color: var(--accent); } .badge-ong-faos { background: var(--ong-faos-bg); color: var(--ong-faos); } .badge-ong-svp { background: var(--ong-svp-bg); color: var(--ong-svp); } .text-ong-faos { color: var(--ong-faos); } .text-ong-svp { color: var(--ong-svp); } .dot-ong-faos { display:inline-block; width:8px; height:8px; border-radius:var(--r-full); background: var(--ong-faos); } .dot-ong-svp { display:inline-block; width:8px; height:8px; border-radius:var(--r-full); background: var(--ong-svp); } /* === Utilitários mínimos — adicionados na migração da Usuario/listar (sessão 37) === Existem pra cumprir a regra "zero style= inline" sem precisar de classes ad-hoc por view. */ .text-right { text-align: right; } .text-left { text-align: left; } .text-center { text-align: center; } .text-danger { color: var(--danger); } .text-success { color: var(--success); } .text-warning { color: var(--warning); } .text-info { color: var(--info); } .actions-end { display: flex; gap: var(--s-2); justify-content: flex-end; align-items: center; } .actions-start { display: flex; gap: var(--s-2); justify-content: flex-start; align-items: center; } .card-body.is-flush { padding: 0; gap: 0; } /* === Primitives extraídas na migração transicional Banco/listar + Cliente/pesquisar (sessão 38) === */ /* Split layout (master-detail) — sidebar lateral + main */ .split { display: grid; grid-template-columns: 320px 1fr; gap: var(--s-4); align-items: start; } .split-aside { min-width: 0; } .split-main { min-width: 0; } @media (max-width: 800px) { .split { grid-template-columns: 1fr; } } /* Select list (lista de itens selecionáveis tipo sidebar interna) */ .select-list { list-style: none; padding: 0; margin: 0; } .select-list > li { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--border-subtle); cursor: pointer; transition: background var(--motion-fast) var(--ease); } .select-list > li:last-child { border-bottom: none; } .select-list > li:hover { background: var(--surface-alt); } .select-list > li.is-active { background: var(--accent-bg); border-left: 3px solid var(--accent); padding-left: calc(var(--s-4) - 3px); } .select-list > li .title { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text); display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-1); margin-bottom: 2px; } .select-list > li .meta { font-size: var(--fs-xs); color: var(--text-muted); font-family: var(--font-mono); } /* Key-value list (definition list canônico pra read-only data) */ .kv-list { margin: 0; } .kv-list dt { font-size: var(--fs-xs); color: var(--text-muted); font-weight: var(--fw-medium); margin-top: var(--s-3); } .kv-list dt:first-of-type { margin-top: 0; } .kv-list dd { margin: 2px 0 0 0; font-size: var(--fs-sm); color: var(--text); word-break: break-word; } .kv-list dd.mono { font-family: var(--font-mono); font-size: var(--fs-xs); } .kv-list dd .empty { color: var(--text-subtle); font-style: italic; } /* Section divider (subtítulo decorativo dentro de card-body) */ .section-divider { margin: var(--s-4) 0 var(--s-2); padding-top: var(--s-3); border-top: 1px dashed var(--border-subtle); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); font-weight: var(--fw-medium); } /* Field grid (responsivo: campos lado-a-lado com min-width) */ .field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-3) var(--s-4); } .field-grid .field.span-2 { grid-column: span 2; } .field-grid .field.span-3 { grid-column: span 3; } @media (max-width: 500px) { .field-grid .field.span-2, .field-grid .field.span-3 { grid-column: span 1; } } /* Empty value marker (campo vazio em listas read-only) */ .empty { color: var(--text-subtle); font-style: italic; } /* Scroll horizontal (pra tabelas largas em mobile) */ .scroll-x { overflow-x: auto; } .scroll-y { overflow-y: auto; } /* Tamanhos de fonte como utilitários */ .text-xs { font-size: var(--fs-xs); } .text-sm { font-size: var(--fs-sm); } .text-md { font-size: var(--fs-md); } .text-lg { font-size: var(--fs-lg); } /* Spacer flex-1 (ja existe, mas reforco) */ .flex-1 { flex: 1; min-width: 0; } /* Whitespace control (preserva \n em conteudo texto multi-linha como obs/notas) */ .pre-wrap { white-space: pre-wrap; } .no-wrap { white-space: nowrap; } .break-word { word-break: break-word; overflow-wrap: anywhere; } /* Decoração de texto (usado pra fatura ID substituida no Pix preview) */ .strike { text-decoration: line-through; } .underline { text-decoration: underline; } /* === Batch process primitives — usado em Campanha/listar lote remessa + similares === */ .lote-action-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-2); padding: var(--s-3) var(--s-4); background: var(--surface-alt); border: 1px solid var(--border-subtle); border-radius: var(--r-md); margin-top: var(--s-3); } .lote-action-bar.disabled { opacity: 0.5; pointer-events: none; } .lote-fases-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2) var(--s-4); margin: var(--s-3) 0; } .lote-fases-grid label { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); border: 1px solid var(--border-subtle); border-radius: var(--r-md); cursor: pointer; font-weight: normal; margin: 0; transition: background var(--motion-fast) var(--ease); } .lote-fases-grid label:hover { background: var(--surface-alt); } .lote-fases-grid label.disabled { opacity: 0.5; cursor: not-allowed; } .lote-fases-grid .fase-tag { display: inline-block; min-width: 90px; font-size: var(--fs-sm); } .lote-fases-grid .fase-hint { font-size: var(--fs-xs); color: var(--text-muted); } /* Lote card: cada job de processamento em lote (uma campanha) */ .lote-card { background: var(--surface); border: 1px solid var(--border-subtle); border-left: 4px solid var(--text-subtle); padding: var(--s-3) var(--s-4); margin-bottom: var(--s-2); border-radius: var(--r-md); transition: border-left-color var(--motion-base) var(--ease); } .lote-card.exec { border-left-color: var(--info); } .lote-card.ok { border-left-color: var(--success); } .lote-card.err { border-left-color: var(--danger); } .lote-card .head-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); } .lote-card .head-left { flex: 1 1 auto; min-width: 0; } .lote-card .head-right { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-xs); color: var(--text-muted); } .lote-card .titulo { font-weight: var(--fw-semibold); font-size: var(--fs-md); } .lote-card .meta { color: var(--text-muted); font-size: var(--fs-xs); } .lote-card .seg-tag { display: inline-block; padding: 1px 6px; background: var(--warning-bg); color: var(--warning); border-radius: var(--r-sm); font-size: var(--fs-xs); font-weight: var(--fw-semibold); margin: 0 var(--s-1); } .lote-card .fases { font-size: var(--fs-xs); margin-top: var(--s-1); line-height: 1.5; } .lote-card .fase-pill { display: inline-block; padding: 1px 8px; border-radius: var(--r-sm); margin-right: 4px; background: var(--surface-alt); color: var(--text-muted); } .lote-card .fase-pill.exec { background: var(--info-bg); color: var(--info); } .lote-card .fase-pill.ok { background: var(--success-bg); color: var(--success); } .lote-card .fase-pill.err { background: var(--danger-bg); color: var(--danger); } .lote-card .fase-pill.skip { background: var(--surface-alt); color: var(--text-subtle); text-decoration: line-through; } /* Lote CNAB consolidado (1 arquivo por banco) */ .lote-cnab-card { background: var(--warning-bg); border: 1px solid var(--warning); border-left: 4px solid var(--warning); padding: var(--s-3) var(--s-4); margin-bottom: var(--s-3); border-radius: var(--r-md); } .lote-cnab-card.ok { border-left-color: var(--success); background: var(--success-bg); } .lote-cnab-card .titulo { font-weight: var(--fw-semibold); font-size: var(--fs-md); } /* Spin animation legado (mantido pra compat com legacy ) */ @keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } } .spin { animation: spin 1.5s linear infinite; display: inline-block; } /* Modal size modifiers */ .modal.is-md { max-width: 700px; } .modal.is-lg { max-width: 900px; } .modal.is-xl { max-width: 1100px; } /* Margin utilities */ .mt-1 { margin-top: var(--s-1); } .mt-2 { margin-top: var(--s-2); } .mt-3 { margin-top: var(--s-3); } .mt-4 { margin-top: var(--s-4); } .mb-1 { margin-bottom: var(--s-1); } .mb-2 { margin-bottom: var(--s-2); } .mb-3 { margin-bottom: var(--s-3); } .mb-4 { margin-bottom: var(--s-4); } .my-1 { margin: var(--s-1) 0; } .my-2 { margin: var(--s-2) 0; } .my-3 { margin: var(--s-3) 0; } .my-4 { margin: var(--s-4) 0; } /* Max-height containers (pra listas scrolláveis em modais) */ .max-h-180 { max-height: 180px; } .max-h-200 { max-height: 200px; } .max-h-280 { max-height: 280px; } /* Surface alternativa (cards aninhados, áreas de destaque) */ .bg-alt { background: var(--surface-alt); } /* === Visibility utility — usado em TODOS os toggles JS de modais, alertas, status conditionals === Crítico: sem essa regra, .modal-overlay (display:flex) fica visível no load. */ .hidden { display: none !important; } /* === Bootstrap tab-pane compat (usado SÓ em TemplateCampanha/alterar — 1 view) === Bootstrap normalmente define isso via bootstrap.css; como layouts/v2 não carrega Bootstrap, replicamos as 2 regras essenciais aqui. Tab switch é vanilla JS (sem $.tab()). */ .tab-pane { display: none; } .tab-pane.active { display: block; } /* === Progress bar — usado em jobs assíncronos (Retorno/Pix/Faturar/Remessa) === */ .progress { background: var(--surface-alt); border: 1px solid var(--border-subtle); border-radius: var(--r-md); height: 10px; overflow: hidden; } .progress.is-tall { height: 22px; } .progress-bar { background: var(--accent); height: 100%; width: 0%; transition: width 0.3s ease; display: flex; align-items: center; justify-content: center; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: white; white-space: nowrap; } .progress-bar.is-success { background: var(--success); } .progress-bar.is-warning { background: var(--warning); } .progress-bar.is-danger { background: var(--danger); } .progress-bar.is-striped { background-image: linear-gradient(45deg, rgba(255,255,255,0.2) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.2) 75%, transparent 75%, transparent); background-size: 16px 16px; animation: progress-stripes 1s linear infinite; } @keyframes progress-stripes { from { background-position: 16px 0; } to { background-position: 0 0; } } /* Spinner inline (usado em alerts/cards de processamento async) */ .spinner-inline { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--text-subtle); border-top-color: var(--accent); border-radius: var(--r-full); animation: spinner-rotate 0.7s linear infinite; vertical-align: middle; margin-right: var(--s-1); } @keyframes spinner-rotate { to { transform: rotate(360deg); } } /* Page head (titulo + acoes em linha — usado no topo da view) */ .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-4); flex-wrap: wrap; } .page-head .page-titles { flex: 1; min-width: 0; } .page-head .page-titles h1 { font-size: var(--fs-3xl); font-weight: var(--fw-semibold); letter-spacing: -0.02em; margin: 0; color: var(--text); } .page-head .page-titles .subtitle { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 2px; } /* Pane visibility no .split — mostra so o ativo */ .split .pane:not(.is-active) { display: none; } /* === Stat card (KPI hero — ícone à esquerda, número grande à direita) === */ .stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-4) var(--s-5); display: flex; align-items: flex-start; gap: var(--s-4); min-height: 132px; } .stat-card .stat-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--r-md); display: inline-flex; align-items: center; justify-content: center; background: var(--accent-bg); color: var(--accent); font-size: 22px; } .stat-icon.is-faos { background: var(--ong-faos-bg); color: var(--ong-faos); } .stat-icon.is-svp { background: var(--ong-svp-bg); color: var(--ong-svp); } .stat-icon.is-success { background: var(--success-bg); color: var(--success); } .stat-icon.is-warning { background: var(--warning-bg); color: var(--warning); } .stat-icon.is-info { background: var(--info-bg); color: var(--info); } .stat-icon.is-danger { background: var(--danger-bg); color: var(--danger); } .stat-icon.is-muted { background: var(--surface-alt); color: var(--text-muted); } .stat-card .stat-body { flex: 1; min-width: 0; } .stat-card .stat-label { font-size: var(--fs-sm); color: var(--text-muted); font-weight: var(--fw-medium); } .stat-card .stat-value { font-size: var(--fs-2xl); font-weight: var(--fw-semibold); letter-spacing: -0.02em; color: var(--text); line-height: 1.15; margin: 2px 0 var(--s-1); /* sem nowrap: permite quebra natural se o número for grande demais pro card */ word-break: keep-all; } .stat-card .stat-foot { display: flex; justify-content: space-between; gap: var(--s-2); font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--border); } /* Variante 'hero' — gradient mais discreto + borda accent (premium, não carnaval) */ .stat-card.is-hero { background: linear-gradient(135deg, rgba(31,111,235,0.12) 0%, rgba(91,91,214,0.06) 100%), var(--surface); border-color: var(--ong-faos); position: relative; overflow: hidden; } .stat-card.is-hero::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--ong-faos), var(--accent)); } .stat-card.is-hero .stat-icon { background: linear-gradient(135deg, var(--ong-faos), var(--accent)); color: var(--text-inverse); } :root[data-theme="dark"] .stat-card.is-hero { background: linear-gradient(135deg, rgba(56,139,253,0.18) 0%, rgba(124,124,222,0.10) 100%), var(--surface); } /* Cor adaptativa pro sparkline do hero (azul no light, branco no dark) */ :root { --hero-spark: #1F6FEB; } :root[data-theme="dark"] { --hero-spark: rgba(255,255,255,0.85); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --hero-spark: rgba(255,255,255,0.85); } } /* === Sparkline mini (inline SVG nos stat cards) === */ .stat-sparkline { display: block; margin-top: var(--s-2); height: 30px; width: 100%; overflow: visible; } .stat-sparkline .spark-line { fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .stat-sparkline .spark-area { fill-opacity: 0.10; stroke: none; } .stat-sparkline .spark-dot { stroke: var(--surface); stroke-width: 1.5; } /* === Topbar user dropdown (CSS-only via :focus-within) === */ .topbar-user { position: relative; display: inline-block; } .topbar-user > button { display: inline-flex; align-items: center; gap: var(--s-2); background: transparent; border: 1px solid transparent; padding: var(--s-1) var(--s-2); border-radius: var(--r-md); color: var(--text); font: inherit; cursor: pointer; user-select: none; transition: background var(--motion-base) var(--ease), border-color var(--motion-base) var(--ease); } .topbar-user > button:hover, .topbar-user > button[aria-expanded="true"] { background: var(--surface-alt); border-color: var(--border); } .topbar-user > button .avatar { width: 24px; height: 24px; border-radius: var(--r-full); background: linear-gradient(135deg, var(--ong-faos), var(--accent)); color: var(--text-inverse); display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-xs); font-weight: var(--fw-semibold); } .topbar-user > button .chev { font-size: 10px; color: var(--text-subtle); margin-left: 2px; } .topbar-user-menu { position: absolute; right: 0; top: calc(100% + 4px); min-width: 220px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-md); padding: var(--s-1); display: none; z-index: 100; } .topbar-user.is-open .topbar-user-menu { display: block; } .topbar-user-menu .item { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); color: var(--text); text-decoration: none; font-size: var(--fs-md); cursor: pointer; background: transparent; border: none; width: 100%; text-align: left; font-family: inherit; } .topbar-user-menu .item:hover { background: var(--surface-alt); color: var(--text); text-decoration: none; } .topbar-user-menu .divider { height: 1px; background: var(--border-subtle); margin: var(--s-1) 0; } .topbar-user-menu .header { padding: var(--s-2) var(--s-3); font-size: var(--fs-xs); color: var(--text-subtle); } /* === Empty state pro mapa === */ .map-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2); background: rgba(255,255,255,0.65); pointer-events: none; z-index: 400; border-radius: 0 0 var(--r-lg) var(--r-lg); } :root[data-theme="dark"] .map-empty { background: rgba(13,17,23,0.65); } .map-empty .icon { width: 48px; height: 48px; border-radius: var(--r-full); background: var(--surface-alt); display: inline-flex; align-items: center; justify-content: center; color: var(--text-subtle); } .map-empty .icon svg { width: 26px; height: 26px; } .map-empty .text { color: var(--text-muted); font-size: var(--fs-sm); } /* === Chip group (toggle Hoje/7d/Mês) === */ .chip-group { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; } .chip-group .chip { padding: 4px var(--s-3); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-muted); background: var(--surface); border: none; cursor: pointer; border-right: 1px solid var(--border); transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease); font-family: inherit; } .chip-group .chip:last-child { border-right: none; } .chip-group .chip:hover { background: var(--surface-alt); color: var(--text); } .chip-group .chip.is-active { background: var(--accent-bg); color: var(--accent); } /* Variante compacta — pra quando precisar de muitos chips lado a lado */ .chip-group.is-compact .chip { padding: 3px var(--s-2); font-size: var(--fs-xs); } /* === Overlay de chips sobre o Leaflet (dentro do mapa) === */ .mapa-overlay-chips { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; pointer-events: auto; } .mapa-overlay-chips .chip-group { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); border-radius: var(--r-md); } /* === Delta pill (variação vs período anterior) === */ .delta { display: inline-flex; align-items: center; gap: 2px; padding: 1px 6px; border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: var(--fw-medium); line-height: 1.4; background: var(--surface-alt); color: var(--text-muted); } .delta::before { content: "→"; font-size: 10px; line-height: 1; } .delta.is-up { background: var(--success-bg); color: var(--success); } .delta.is-up::before { content: "▲"; } .delta.is-down { background: var(--danger-bg); color: var(--danger); } .delta.is-down::before { content: "▼"; } .stat-card.is-hero .delta { background: rgba(255,255,255,0.18); color: var(--text-inverse); } /* === Sidebar user (avatar + nome no topo) === */ .sidebar-user { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3); margin-bottom: var(--s-4); border-bottom: 1px solid var(--border-subtle); } .sidebar-user .avatar { width: 36px; height: 36px; border-radius: var(--r-full); background: linear-gradient(135deg, var(--ong-faos), var(--accent)); color: var(--text-inverse); display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-sm); font-weight: var(--fw-semibold); flex-shrink: 0; } .sidebar-user .info { min-width: 0; flex: 1; } .sidebar-user .name { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-user .role { font-size: var(--fs-xs); color: var(--text-subtle); } /* === Alert === */ .alert { padding: var(--s-3) var(--s-4); border-radius: var(--r-md); font-size: var(--fs-md); border: 1px solid; margin-bottom: var(--s-4); } .alert strong { font-weight: var(--fw-semibold); margin-right: var(--s-1); } .alert-info { background: var(--info-bg); border-color: var(--info); color: var(--info); } .alert-success { background: var(--success-bg); border-color: var(--success); color: var(--success); } .alert-warning { background: var(--warning-bg); border-color: var(--warning); color: var(--warning); } .alert-danger { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); } /* === Tabela === */ .table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); } .table th, .table td { text-align: left; padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--border-subtle); } .table th { font-weight: var(--fw-medium); color: var(--text-muted); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.02em; } .table tbody tr { transition: background var(--motion-fast) var(--ease); } .table.hover tbody tr:hover { background: var(--surface-alt); } .table.zebra tbody tr:nth-child(even) { background: var(--surface-alt); } .table.compact th, .table.compact td { padding: var(--s-1) var(--s-2); font-size: var(--fs-sm); } .table td.mono { font-family: var(--font-mono); font-size: var(--fs-sm); } /* === Select grid (printer grid, etc.) === */ .select-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--s-3); } .select-card { background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); padding: var(--s-3); cursor: pointer; display: flex; flex-direction: column; gap: var(--s-1); transition: all var(--motion-base) var(--ease); position: relative; } .select-card:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); } .select-card.is-selected { border-color: var(--accent); background: var(--accent-bg); box-shadow: 0 0 0 2px var(--accent-ring); } .select-card.is-selected::after { content: "✓"; position: absolute; top: 6px; right: 8px; color: var(--accent); font-weight: var(--fw-semibold); font-size: var(--fs-md); } .select-card.is-disabled { opacity: 0.5; cursor: not-allowed; } .select-card.is-disabled:hover { border-color: var(--border-subtle); box-shadow: none; } .select-card .name { font-size: var(--fs-lg); font-weight: var(--fw-semibold); letter-spacing: -0.01em; } .select-card .meta { font-size: var(--fs-xs); color: var(--text-muted); display: flex; align-items: center; gap: var(--s-1); } .select-card .meta.status-ok { color: var(--success); } .select-card .meta.status-warning { color: var(--warning); } .select-card .meta.status-danger { color: var(--danger); } /* === Details/Summary colapsável === */ details.collapsible { border: 1px solid var(--border-subtle); border-radius: var(--r-md); background: var(--surface-alt); margin-bottom: var(--s-4); } details.collapsible summary { padding: var(--s-2) var(--s-4); cursor: pointer; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-muted); list-style: none; display: flex; align-items: center; justify-content: space-between; } details.collapsible summary::-webkit-details-marker { display: none; } details.collapsible summary::after { content: "▾"; color: var(--text-subtle); transition: transform var(--motion-base) var(--ease); } details.collapsible[open] summary::after { transform: rotate(180deg); } details.collapsible summary:hover { color: var(--text); } details.collapsible .collapsible-body { padding: var(--s-4); border-top: 1px solid var(--border-subtle); background: var(--surface); } /* === Status line === */ .status-line { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); color: var(--text-muted); } .status-line .dot { width: 6px; height: 6px; border-radius: var(--r-full); background: var(--text-subtle); } .status-line.is-ok .dot { background: var(--success); } .status-line.is-warning .dot { background: var(--warning); } .status-line.is-danger .dot { background: var(--danger); } .status-line.is-active .dot { background: var(--accent); animation: pulse 1.6s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.4); } } /* === Utilitários === */ .muted { color: var(--text-muted); font-size: var(--fs-sm); } .subtle { color: var(--text-subtle); font-size: var(--fs-sm); } .error { color: var(--danger); } .row { display: flex; gap: var(--s-4); flex-wrap: wrap; align-items: flex-start; } .row.gap-sm { gap: var(--s-2); } .row.gap-lg { gap: var(--s-6); } .row > * { flex: 1; min-width: 0; } .inline { display: inline-flex; align-items: center; gap: var(--s-2); } .spacer { flex: 1; } /* === Loading === */ .spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--border-subtle); border-top-color: var(--accent); border-radius: var(--r-full); animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* === Modal === */ .modal-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(15, 23, 42, 0.45); display: flex; align-items: center; justify-content: center; padding: var(--s-4); animation: modal-fade var(--motion-base) var(--ease); } :root[data-theme="dark"] .modal-overlay, .modal-overlay { backdrop-filter: blur(2px); } @keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } } .modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); max-width: 720px; width: 100%; max-height: calc(100vh - var(--s-10)); display: flex; flex-direction: column; overflow: hidden; } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: var(--s-3) var(--s-5); border-bottom: 1px solid var(--border-subtle); background: var(--surface-alt); } .modal-title { font-size: var(--fs-md); font-weight: var(--fw-semibold); margin: 0; } .modal-close { background: transparent; border: none; cursor: pointer; color: var(--text-muted); font-size: var(--fs-xl); padding: 0 var(--s-2); line-height: 1; } .modal-close:hover { color: var(--text); } .modal-body { padding: var(--s-4) var(--s-5); overflow-y: auto; flex: 1; } .modal-footer { padding: var(--s-3) var(--s-5); border-top: 1px solid var(--border-subtle); background: var(--surface-alt); display: flex; justify-content: flex-end; gap: var(--s-2); } /* === Theme toggle (sun/moon) === */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: transparent; border: 1px solid var(--border); border-radius: var(--r-md); color: var(--text-muted); cursor: pointer; transition: all var(--motion-base) var(--ease); font-size: var(--fs-md); padding: 0; } .theme-toggle:hover { background: var(--surface-alt); color: var(--text); border-color: var(--border-strong); } .theme-toggle[data-state] svg { width: 16px; height: 16px; display: block; } /* === Tela de Login (centralizado) === */ .auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); padding: var(--s-4); } .auth-card { width: 100%; max-width: 380px; background: var(--surface); border-radius: var(--r-xl); padding: var(--s-8); box-shadow: var(--shadow-md); border: 1px solid var(--border-subtle); } .auth-card h1 { font-size: var(--fs-2xl); margin-bottom: var(--s-1); display: flex; align-items: center; gap: var(--s-2); } .auth-card .subtitle { color: var(--text-muted); font-size: var(--fs-md); margin-bottom: var(--s-6); } /* === Legacy dialogo widget (iframe overlay) ================================ Transitório até Onda B2 substituir por modal HTML5 nativo. Markup em layouts/v2.php (#page_screen + .legacy-dialogo + #frameDialogo) é manipulado por scripts/painel/dialogo.js (mostraFrame_dialogo / fechaFrame_dialogo). Usado por: Fatura/{cadastrar,alterar,pesquisar}, Remessa/{cadastrar,alterar,pesquisar}. ============================================================================ */ #page_screen { display: none; position: absolute; top: 0; left: 0; width: 100%; background: #000; opacity: 0.5; z-index: 2000; } .legacy-dialogo { display: none; position: absolute; top: 0; left: 0; width: 820px; height: 475px; background: #fff; border: 2px solid #000; text-align: center; z-index: 2001; } .legacy-dialogo-close { position: absolute; top: 4px; right: 8px; width: 28px; height: 28px; padding: 0; background: transparent; border: 0; font-size: 22px; line-height: 1; color: #333; cursor: pointer; z-index: 2002; } .legacy-dialogo-close:hover { color: #000; } .legacy-dialogo-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* === Clickable rows / cells (table-row affordance) ========================== */ .is-clickable { cursor: pointer; } /* === Pagination (CI3 .pagination — listar com