/* ============================================================= CONTA MODULAR — Stylesheet base Design system: Indigo/Violet/Teal/Canvas (do design_system.txt) ============================================================= */ /* CSS custom properties são INJETADAS por BrandingService::cssVariables() no , sobrescrevendo o default :root abaixo conforme o tenant. */ :root { /* Cores - Indigo / Violet / Teal */ --color-primary: #1b1938; --color-primary-deep: #0e0c1f; --color-accent: #c9b4fa; --color-teal: #0e3030; --color-teal-mid: #155555; --color-canvas: #ffffff; --color-canvas-soft: #fafaf8; --color-ink: #292827; --color-ink-mute: #73706d; --color-ink-faint: #9a9794; --color-hairline: #e8e4dd; --color-hairline-dark:#3f3a52; /* Semantic */ --color-success: #16a34a; --color-warning: #f59e0b; --color-danger: #dc2626; --color-info: #2563eb; /* Tipografia (Inter Variable como fallback de Super Sans VF) */ --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; /* Spacing (8px base) */ --space-xxs: 2px; --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 24px; --space-xxl: 32px; --space-huge: 64px; /* Radii */ --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-full: 9999px; /* Elevation */ --elev-1: 0 1px 3px rgba(0,0,0,.08); --elev-2: 0 8px 24px rgba(0,0,0,.12); /* Layout */ --sidebar-w: 256px; --topbar-h: 64px; } /* ── Reset minimalista ────────────────────────────────────── */ *,*::before,*::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-sans); font-variation-settings: 'wght' 460; font-size: 16px; line-height: 1.5; color: var(--color-ink); background: var(--color-canvas-soft); } a { color: inherit; } button { font-family: inherit; } img, svg { display: block; max-width: 100%; } /* ── Tipografia (Inter Variable nas mid-weights signature) ── */ .display-xxl { font-size: 64px; font-variation-settings: 'wght' 540; line-height: .96; letter-spacing: -1.32px; } .display-xl { font-size: 48px; font-variation-settings: 'wght' 460; line-height: .96; letter-spacing: -1.0px; } .display-lg { font-size: 28px; font-variation-settings: 'wght' 540; line-height: 1.14; letter-spacing: -0.63px; } .display-md { font-size: 22px; font-variation-settings: 'wght' 460; line-height: 1.1; letter-spacing: -0.315px; } .heading-lg { font-size: 20px; font-variation-settings: 'wght' 540; line-height: 1.2; } .heading-md { font-size: 16px; font-variation-settings: 'wght' 540; line-height: 1.3; } .body-lg { font-size: 18px; font-variation-settings: 'wght' 540; line-height: 1.5; } .body-md { font-size: 16px; font-variation-settings: 'wght' 460; line-height: 1.5; } .caption { font-size: 14px; font-variation-settings: 'wght' 460; line-height: 1.4; color: var(--color-ink-mute); } .micro { font-size: 12px; font-variation-settings: 'wght' 540; line-height: 1.4; letter-spacing: .02em; text-transform: uppercase; color: var(--color-ink-mute); } /* ── Layout shell ─────────────────────────────────────────── */ .app-shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; } .sidebar { background: var(--color-primary); color: var(--color-canvas); padding: var(--space-xl) 0; display: flex; flex-direction: column; position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; } .sidebar__brand { padding: 0 var(--space-xl) var(--space-xl); border-bottom: 1px solid var(--color-hairline-dark); } .sidebar__brand-name { font-size: 22px; font-variation-settings: 'wght' 540; letter-spacing: -0.3px; color: var(--color-canvas); word-break: break-word; overflow-wrap: anywhere; line-height: 1.15; } .sidebar__brand-tag { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--color-accent); margin-top: var(--space-xs); font-variation-settings: 'wght' 540; } .sidebar__nav { padding: var(--space-lg) var(--space-md); flex: 1; } .sidebar__group-label { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.45); padding: var(--space-lg) var(--space-md) var(--space-sm); font-variation-settings: 'wght' 540; } .sidebar__link { display: flex; align-items: center; gap: var(--space-md); padding: 10px 14px; border-radius: var(--r-md); color: rgba(255,255,255,.78); text-decoration: none; font-size: 14px; font-variation-settings: 'wght' 460; transition: background .15s, color .15s; } .sidebar__link:hover { background: rgba(255,255,255,.06); color: var(--color-canvas); } .sidebar__link.is-active { background: rgba(201,180,250,.14); /* accent fade */ color: var(--color-canvas); } .sidebar__link svg { width: 16px; height: 16px; flex: 0 0 16px; } .sidebar__footer { padding: var(--space-lg) var(--space-xl); border-top: 1px solid var(--color-hairline-dark); } /* ── Main / topbar ────────────────────────────────────────── */ .main { display: flex; flex-direction: column; min-width: 0; } .topbar { height: var(--topbar-h); background: var(--color-canvas); border-bottom: 1px solid var(--color-hairline); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-xxl); position: sticky; top: 0; z-index: 5; } .topbar__title { font-size: 18px; font-variation-settings: 'wght' 540; } .topbar__user { display: flex; align-items: center; gap: var(--space-md); font-size: 14px; } .topbar__user .avatar { width: 32px; height: 32px; border-radius: var(--r-full); background: var(--color-primary); color: var(--color-canvas); display: grid; place-items: center; font-size: 12px; font-variation-settings: 'wght' 600; } .page { padding: var(--space-xxl); max-width: 1280px; } .page__header { margin-bottom: var(--space-xxl); } .page__title { font-size: 28px; font-variation-settings: 'wght' 540; letter-spacing: -.5px; margin: 0; } .page__subtitle { color: var(--color-ink-mute); margin-top: var(--space-xs); } /* ── Cards ───────────────────────────────────────────────── */ .card { background: var(--color-canvas); border: 1px solid var(--color-hairline); border-radius: var(--r-lg); padding: var(--space-xxl); } .card--soft { background: var(--color-canvas-soft); } .card__title { font-size: 16px; font-variation-settings: 'wght' 540; margin: 0 0 var(--space-md); } /* KPIs */ .kpi-grid { display: grid; gap: var(--space-lg); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: var(--space-xxl); } .kpi { padding: var(--space-xl); background: var(--color-canvas); border: 1px solid var(--color-hairline); border-radius: var(--r-lg); } .kpi__label { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--color-ink-mute); } .kpi__value { font-size: 36px; font-variation-settings: 'wght' 540; margin-top: var(--space-sm); letter-spacing: -0.5px; } /* Buttons */ .btn { display: inline-flex; align-items: center; gap: var(--space-sm); padding: 10px 18px; border-radius: var(--r-md); font-size: 14px; font-variation-settings: 'wght' 600; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s, transform .05s; white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--color-primary); color: var(--color-canvas); } .btn--primary:hover { background: var(--color-primary-deep); } .btn--ghost { background: transparent; color: var(--color-ink); border-color: var(--color-hairline); } .btn--ghost:hover { border-color: var(--color-ink); } .btn--danger { background: var(--color-danger); color: var(--color-canvas); } .btn--sm { padding: 6px 12px; font-size: 13px; } .btn--block { width: 100%; justify-content: center; } /* Forms */ .form-row { margin-bottom: var(--space-lg); } .form-label { display: block; font-size: 13px; font-variation-settings: 'wght' 540; margin-bottom: 6px; color: var(--color-ink); } .form-input, .form-select, .form-textarea { width: 100%; padding: 10px 12px; font-family: inherit; font-size: 14px; background: var(--color-canvas); color: var(--color-ink); border: 1px solid var(--color-hairline); border-radius: var(--r-sm); outline: none; transition: border-color .15s, box-shadow .15s; } .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(27,25,56,.08); } .form-help { font-size: 12px; color: var(--color-ink-mute); margin-top: 4px; } .form-grid { display: grid; gap: var(--space-lg); grid-template-columns: 1fr 1fr; } @media (max-width: 720px) { .form-grid { grid-template-columns: 1fr; } } /* Tables */ .table { width: 100%; border-collapse: collapse; background: var(--color-canvas); border: 1px solid var(--color-hairline); border-radius: var(--r-lg); overflow: hidden; } .table th, .table td { text-align: left; padding: 12px 16px; font-size: 14px; } .table th { background: var(--color-canvas-soft); font-variation-settings: 'wght' 540; color: var(--color-ink-mute); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; } .table tbody tr + tr td { border-top: 1px solid var(--color-hairline); } .table tbody tr:hover td { background: var(--color-canvas-soft); } /* Badges */ .badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--r-full); font-size: 11px; font-variation-settings: 'wght' 540; text-transform: uppercase; letter-spacing: .05em; } .badge--enabled { background: rgba(22,163,74,.12); color: #15803d; } .badge--disabled { background: var(--color-canvas-soft); color: var(--color-ink-mute); border: 1px solid var(--color-hairline); } .badge--coming { background: rgba(201,180,250,.25); color: #4c1d95; } .badge--core { background: var(--color-primary); color: var(--color-canvas); } /* Alerts */ .alert { padding: 12px 16px; border-radius: var(--r-md); margin-bottom: var(--space-lg); font-size: 14px; border: 1px solid; } .alert--info { background: rgba(37,99,235,.06); border-color: rgba(37,99,235,.25); color: #1e40af; } .alert--success { background: rgba(22,163,74,.06); border-color: rgba(22,163,74,.25); color: #15803d; } .alert--error { background: rgba(220,38,38,.06); border-color: rgba(220,38,38,.25); color: #991b1b; } /* Empty state */ .empty { padding: var(--space-huge) var(--space-xxl); text-align: center; background: var(--color-canvas); border: 1px dashed var(--color-hairline); border-radius: var(--r-lg); color: var(--color-ink-mute); } .empty__title { color: var(--color-ink); font-size: 18px; font-variation-settings: 'wght' 540; margin-bottom: var(--space-sm); } /* Module store grid */ .module-grid { display: grid; gap: var(--space-lg); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .module-card { background: var(--color-canvas); border: 1px solid var(--color-hairline); border-radius: var(--r-lg); padding: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-md); transition: border-color .15s, box-shadow .15s; } .module-card:hover { border-color: var(--color-ink-faint); box-shadow: var(--elev-1); } .module-card__head { display: flex; align-items: center; justify-content: space-between; } .module-card__title { font-size: 16px; font-variation-settings: 'wght' 540; } .module-card__desc { color: var(--color-ink-mute); font-size: 14px; flex: 1; } .module-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); } /* Auth pages */ .auth-shell { min-height: 100vh; display: grid; grid-template-columns: 1fr 480px; background: var(--color-primary); } @media (max-width: 900px) { .auth-shell { grid-template-columns: 1fr; } } .auth-hero { padding: var(--space-huge); color: var(--color-canvas); display: flex; flex-direction: column; justify-content: space-between; background: radial-gradient(at 70% 10%, rgba(201,180,250,.25) 0%, transparent 40%), radial-gradient(at 20% 80%, rgba(14,48,48,.4) 0%, transparent 50%), var(--color-primary); } .auth-hero__title { font-size: 56px; font-variation-settings: 'wght' 540; line-height: .96; letter-spacing: -1.32px; max-width: 540px; } .auth-hero__sub { color: rgba(255,255,255,.7); font-size: 18px; margin-top: var(--space-lg); max-width: 480px; } .auth-form { background: var(--color-canvas); padding: var(--space-huge) var(--space-xxl); display: flex; flex-direction: column; justify-content: center; } .auth-form__title { font-size: 28px; font-variation-settings: 'wght' 540; margin: 0 0 var(--space-xs); } .auth-form__sub { color: var(--color-ink-mute); margin-bottom: var(--space-xxl); } .auth-form__link { font-size: 13px; color: var(--color-primary); text-decoration: underline; } /* Utility */ .row { display: flex; align-items: center; gap: var(--space-md); } .row--between { justify-content: space-between; } .stack { display: flex; flex-direction: column; gap: var(--space-md); } .mt-md { margin-top: var(--space-md); } .mt-lg { margin-top: var(--space-lg); } .mt-xl { margin-top: var(--space-xl); } .muted { color: var(--color-ink-mute); } .text-right { text-align: right; } /* ── Cadastros (Fase 1) ───────────────────────────────────── */ /* Toolbar de filtro */ .toolbar { background: var(--color-canvas); border: 1px solid var(--color-hairline); border-radius: var(--r-lg); padding: var(--space-md) var(--space-lg); display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; margin-bottom: var(--space-lg); } .toolbar .search { flex: 1; min-width: 240px; position: relative; } .toolbar .search input { width: 100%; padding: 9px 12px 9px 36px; border: 1px solid var(--color-hairline); border-radius: var(--r-md); background: var(--color-canvas-soft); font-size: 14px; font-family: inherit; outline: none; transition: background .15s, border-color .15s; } .toolbar .search input:focus { background: var(--color-canvas); border-color: var(--color-primary); } .toolbar .search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--color-ink-mute); } .toolbar select.form-select { width: auto; min-width: 140px; padding: 8px 10px; font-size: 14px; } /* Tabs (Empresas / Pessoas / Clientes / Fornecedores) */ .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--color-hairline); margin-bottom: var(--space-lg); } .tabs a { padding: 10px 14px; font-size: 14px; color: var(--color-ink-mute); text-decoration: none; border-bottom: 2px solid transparent; font-variation-settings: 'wght' 540; display: inline-flex; align-items: center; gap: 8px; } .tabs a:hover { color: var(--color-ink); } .tabs a.is-active { color: var(--color-primary); border-bottom-color: var(--color-primary); } .tabs a .count { background: var(--color-canvas-soft); color: var(--color-ink-mute); padding: 1px 8px; border-radius: var(--r-full); font-size: 11px; font-variation-settings: 'wght' 540; } .tabs a.is-active .count { background: rgba(27,25,56,.08); color: var(--color-primary); } /* Avatar/iniciais reutilizável */ .avatar-pill { width: 36px; height: 36px; border-radius: var(--r-md); background: var(--color-primary); color: var(--color-canvas); display: inline-grid; place-items: center; font-size: 13px; font-variation-settings: 'wght' 600; flex-shrink: 0; } .avatar-pill--person { background: var(--color-teal); } .avatar-pill--customer { background: var(--color-primary); } .avatar-pill--supplier { background: #155555; } /* Listing com nome + secondary */ .identity { display: flex; align-items: center; gap: 12px; } .identity__main { line-height: 1.2; } .identity__name { font-variation-settings: 'wght' 540; font-size: 14px; } .identity__sub { font-size: 12px; color: var(--color-ink-mute); } /* Detalhe (show.php) — header de identidade */ .entity-header { display: flex; align-items: center; gap: 18px; padding: var(--space-xl); background: var(--color-canvas); border: 1px solid var(--color-hairline); border-radius: var(--r-lg); margin-bottom: var(--space-lg); } .entity-header__avatar { width: 64px; height: 64px; border-radius: var(--r-lg); background: var(--color-primary); color: var(--color-canvas); display: grid; place-items: center; font-size: 24px; font-variation-settings: 'wght' 600; flex-shrink: 0; } .entity-header__name { font-size: 22px; font-variation-settings: 'wght' 540; letter-spacing: -.3px; } .entity-header__meta { color: var(--color-ink-mute); font-size: 13px; margin-top: 4px; } .entity-header__actions { margin-left: auto; display: flex; gap: 8px; } /* Painel de seção dentro do detalhe */ .panel { background: var(--color-canvas); border: 1px solid var(--color-hairline); border-radius: var(--r-lg); padding: var(--space-xl); margin-bottom: var(--space-lg); } .panel__title { display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-variation-settings: 'wght' 540; color: var(--color-ink-mute); text-transform: uppercase; letter-spacing: .05em; margin: 0 0 var(--space-md); } .dl { display: grid; grid-template-columns: 180px 1fr; gap: 8px 18px; font-size: 14px; } .dl dt { color: var(--color-ink-mute); } .dl dd { margin: 0; } @media (max-width: 720px) { .dl { grid-template-columns: 1fr; } .dl dt { margin-top: 8px; } } /* Inline mini-form */ .mini-form { display: grid; gap: 10px; padding: 12px; background: var(--color-canvas-soft); border: 1px dashed var(--color-hairline); border-radius: var(--r-md); } .mini-form-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } /* Status pill na linha */ .status-pill { font-size: 11px; padding: 2px 8px; border-radius: var(--r-full); font-variation-settings: 'wght' 540; text-transform: uppercase; letter-spacing: .04em; } .status-pill--active { background: rgba(22,163,74,.12); color: #15803d; } .status-pill--archived { background: var(--color-canvas-soft); color: var(--color-ink-mute); border: 1px solid var(--color-hairline); } /* Role badges (cliente/fornecedor) */ .role-tag { display: inline-block; padding: 2px 8px; border-radius: var(--r-full); font-size: 11px; font-variation-settings: 'wght' 540; margin-right: 4px; } .role-tag--customer { background: rgba(27,25,56,.08); color: var(--color-primary); } .role-tag--supplier { background: rgba(14,48,48,.10); color: var(--color-teal); } .role-tag--self { background: rgba(201,180,250,.30); color: #4c1d95; } /* ── Financeiro (Fase 1) ──────────────────────────────────── */ /* KPIs grandes do dashboard */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-md); margin-bottom: var(--space-lg); } .kpi { background: var(--color-canvas); border: 1px solid var(--color-hairline); border-radius: var(--r-lg); padding: var(--space-lg); } .kpi__label { font-size: 11px; color: var(--color-ink-mute); text-transform: uppercase; letter-spacing: .05em; font-variation-settings: 'wght' 540; } .kpi__value { font-size: 26px; font-variation-settings: 'wght' 540; letter-spacing: -.5px; margin-top: 6px; line-height: 1; } .kpi__value--money { font-variant-numeric: tabular-nums; } .kpi__value--up { color: #15803d; } .kpi__value--down { color: #c2410c; } .kpi__caption { font-size: 12px; color: var(--color-ink-mute); margin-top: 6px; } /* Sub-menu de abas dentro do módulo (Pagar / Receber / Categorias / Contas / Recorrências) */ .module-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--color-hairline); margin: 0 0 var(--space-lg); background: var(--color-canvas); border-radius: var(--r-md) var(--r-md) 0 0; } .module-tabs a { padding: 12px 16px; font-size: 14px; color: var(--color-ink-mute); text-decoration: none !important; border-bottom: 2px solid transparent; font-variation-settings: 'wght' 540; transition: color .15s, border-color .15s; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .module-tabs a:hover { color: var(--color-ink); background: var(--color-canvas-soft); } .module-tabs a.is-active { color: var(--color-primary); border-bottom-color: var(--color-primary); background: var(--color-canvas); } /* Status pills financeiras */ .fin-status { display: inline-block; padding: 2px 8px; border-radius: var(--r-full); font-size: 11px; font-variation-settings: 'wght' 540; text-transform: uppercase; letter-spacing: .04em; } .fin-status--open { background: var(--color-canvas-soft); color: var(--color-ink-mute); border: 1px solid var(--color-hairline); } .fin-status--partial { background: rgba(201,180,250,.30); color: #4c1d95; } .fin-status--paid { background: rgba(22,163,74,.12); color: #15803d; } .fin-status--overdue { background: rgba(194,65,12,.12); color: #c2410c; } .fin-status--cancelled { background: var(--color-canvas-soft); color: var(--color-ink-mute); text-decoration: line-through; } .fin-status--active { background: rgba(22,163,74,.12); color: #15803d; } .fin-status--paused { background: rgba(201,180,250,.30); color: #4c1d95; } .fin-status--finished { background: var(--color-canvas-soft); color: var(--color-ink-mute); } /* Valores monetários alinhados à direita com tabular-nums */ .money, .table .money, td.money { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } .money--negative { color: #c2410c; } .money--positive { color: #15803d; } /* Lista de contas no /financeiro/contas */ .account-card { background: var(--color-canvas); border: 1px solid var(--color-hairline); border-radius: var(--r-lg); padding: var(--space-lg); display: flex; align-items: center; gap: var(--space-md); } .account-card__icon { width: 44px; height: 44px; border-radius: var(--r-md); background: var(--color-primary); color: var(--color-canvas); display: grid; place-items: center; flex-shrink: 0; } .account-card__name { font-size: 15px; font-variation-settings: 'wght' 540; } .account-card__meta { font-size: 12px; color: var(--color-ink-mute); } .account-card__balance { margin-left: auto; font-size: 18px; font-variation-settings: 'wght' 540; font-variant-numeric: tabular-nums; } /* Lista de categorias com indentação para subcategorias */ .cat-row { padding: 8px 0; border-bottom: 1px solid var(--color-hairline); display: flex; align-items: center; gap: 8px; font-size: 14px; } .cat-row--child { padding-left: 24px; color: var(--color-ink-mute); } .cat-row__name { flex: 1; } /* Form de baixa (inline em modal) */ .pay-modal-form { display: grid; gap: 10px; } .pay-modal-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } /* Linha de parcela em entry_show */ .installment-row { display: grid; grid-template-columns: auto 1fr auto auto auto; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--color-hairline); align-items: center; } .installment-row__num { width: 32px; height: 32px; border-radius: 50%; background: var(--color-canvas-soft); border: 1px solid var(--color-hairline); display: grid; place-items: center; font-size: 12px; font-variation-settings: 'wght' 600; } .installment-row__due { font-size: 14px; } .installment-row__due small { color: var(--color-ink-mute); font-size: 12px; } /* ── Topbar: dropdown do usuário ───────────────────────────── */ .topbar { position: relative; } .user-menu { position: relative; display: flex; align-items: center; } .user-menu__trigger { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 14px; background: transparent; border: 1px solid transparent; border-radius: var(--r-full); cursor: pointer; color: var(--color-ink); font-family: inherit; transition: background .15s, border-color .15s; } .user-menu__trigger:hover { background: var(--color-canvas-soft); border-color: var(--color-hairline); } .user-menu[data-open="true"] .user-menu__trigger { background: var(--color-canvas-soft); border-color: var(--color-hairline); } .user-menu__email { font-size: 13px; color: var(--color-ink-mute); white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 720px) { .user-menu__email { display: none; } } .user-menu__chevron { color: var(--color-ink-mute); transition: transform .2s; } .user-menu[data-open="true"] .user-menu__chevron { transform: rotate(180deg); } .user-menu__panel { position: absolute; top: calc(100% + 8px); right: 0; min-width: 280px; background: var(--color-canvas); border: 1px solid var(--color-hairline); border-radius: var(--r-lg); box-shadow: 0 10px 32px rgba(14, 12, 31, .10), 0 2px 8px rgba(14, 12, 31, .06); z-index: 100; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .15s, transform .15s, visibility 0s .15s; padding: 8px 0; } .user-menu[data-open="true"] .user-menu__panel { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity .15s, transform .15s, visibility 0s; } .user-menu__head { padding: 12px 16px 14px; border-bottom: 1px solid var(--color-hairline); margin-bottom: 6px; } .user-menu__head-name { font-size: 14px; font-variation-settings: 'wght' 600; color: var(--color-ink); line-height: 1.3; } .user-menu__head-email { font-size: 12px; color: var(--color-ink-mute); margin-top: 2px; word-break: break-all; } .user-menu__head-tenant { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--color-primary); margin-top: 8px; font-variation-settings: 'wght' 540; } .user-menu__list { display: flex; flex-direction: column; padding: 0; } .user-menu__item { display: flex; align-items: center; gap: 12px; padding: 10px 16px; font-size: 14px; color: var(--color-ink); text-decoration: none !important; background: transparent; border: none; cursor: pointer; width: 100%; text-align: left; font-family: inherit; font-size: 14px; transition: background .12s; } .user-menu__item:hover { background: var(--color-canvas-soft); } .user-menu__item svg { color: var(--color-ink-mute); flex-shrink: 0; } .user-menu__item--danger { color: #c2410c; } .user-menu__item--danger svg { color: #c2410c; } .user-menu__item--danger:hover { background: rgba(194, 65, 12, .06); } .user-menu__divider { height: 1px; background: var(--color-hairline); margin: 6px 0; } .user-menu__logout { margin: 0; } /* ── Sidebar: card destacado da Loja de Módulos ────────────── */ .sidebar__footer { padding: var(--space-md); border-top: 1px solid var(--color-hairline-dark); } .sidebar__store-card { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--r-md); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .10); color: var(--color-canvas); text-decoration: none !important; transition: background .15s, border-color .15s, transform .15s; } .sidebar__store-card:hover { background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .18); } .sidebar__store-card.is-active { background: var(--color-accent, #c9b4fa); border-color: var(--color-accent, #c9b4fa); color: #1b1938; } .sidebar__store-card-icon { width: 36px; height: 36px; border-radius: var(--r-md); display: grid; place-items: center; background: rgba(255, 255, 255, .12); flex-shrink: 0; } .sidebar__store-card.is-active .sidebar__store-card-icon { background: rgba(27, 25, 56, .12); color: #1b1938; } .sidebar__store-card-icon svg { width: 20px; height: 20px; } .sidebar__store-card-text { flex: 1; min-width: 0; } .sidebar__store-card-title { font-size: 13px; font-variation-settings: 'wght' 600; line-height: 1.2; } .sidebar__store-card-sub { font-size: 11px; opacity: .7; margin-top: 2px; line-height: 1.2; } /* ── Loja de módulos: novo design ──────────────────────────── */ .store-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--space-md) 0 var(--space-lg); padding: 4px; background: var(--color-canvas-soft); border-radius: var(--r-full); width: fit-content; } .store-filter { padding: 8px 16px; font-size: 13px; font-variation-settings: 'wght' 540; color: var(--color-ink-mute); background: transparent; border: none; border-radius: var(--r-full); cursor: pointer; transition: background .15s, color .15s; font-family: inherit; } .store-filter:hover { color: var(--color-ink); } .store-filter.is-active { background: var(--color-canvas); color: var(--color-primary); box-shadow: 0 1px 3px rgba(14, 12, 31, .08); } .store-filter__count { font-size: 11px; opacity: .6; margin-left: 4px; } .store-section { margin-bottom: var(--space-xl); } .store-section__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--space-md); } .store-section__title { font-size: 14px; font-variation-settings: 'wght' 600; color: var(--color-ink); text-transform: uppercase; letter-spacing: .04em; } .store-section__count { font-size: 12px; color: var(--color-ink-mute); } .store-grid { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } .store-card { position: relative; background: var(--color-canvas); border: 1px solid var(--color-hairline); border-radius: var(--r-lg); padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-md); transition: border-color .15s, box-shadow .15s, transform .15s; } .store-card:hover { border-color: var(--color-ink-faint, #cbc7be); box-shadow: 0 4px 16px rgba(14, 12, 31, .06); } .store-card--enabled { border-color: rgba(22, 163, 74, .25); background: linear-gradient(180deg, rgba(22, 163, 74, .025), transparent 80%); } .store-card--coming { opacity: .65; } .store-card__top { display: flex; align-items: flex-start; gap: 12px; } .store-card__icon { width: 44px; height: 44px; border-radius: var(--r-md); background: var(--color-canvas-soft); display: grid; place-items: center; color: var(--color-primary); flex-shrink: 0; } .store-card--enabled .store-card__icon { background: rgba(22, 163, 74, .12); color: #15803d; } .store-card__icon svg { width: 22px; height: 22px; } .store-card__heading { flex: 1; min-width: 0; } .store-card__name { font-size: 16px; font-variation-settings: 'wght' 600; color: var(--color-ink); margin-bottom: 2px; line-height: 1.25; } .store-card__category { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--color-ink-mute); font-variation-settings: 'wght' 540; } .store-card__badge { position: absolute; top: 14px; right: 14px; } .store-card__desc { font-size: 13px; color: var(--color-ink-mute); line-height: 1.5; flex: 1; } .store-card__foot { display: flex; align-items: center; justify-content: space-between; padding-top: var(--space-sm); border-top: 1px solid var(--color-hairline); } .store-card__status { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-ink-mute); } .store-card__status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-ink-faint); } .store-card--enabled .store-card__status { color: #15803d; } .store-card--enabled .store-card__status-dot { background: #15803d; box-shadow: 0 0 0 3px rgba(22, 163, 74, .12); } /* ── Bloco de boas-vindas/destaque dentro da Loja ──────────── */ .store-hero { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark, #0e0c1f) 100%); color: var(--color-canvas); border-radius: var(--r-lg); padding: var(--space-xl); margin-bottom: var(--space-lg); display: flex; align-items: center; gap: var(--space-lg); } .store-hero__icon { width: 56px; height: 56px; border-radius: var(--r-md); background: rgba(255, 255, 255, .15); display: grid; place-items: center; flex-shrink: 0; } .store-hero__icon svg { width: 28px; height: 28px; } .store-hero__title { font-size: 20px; font-variation-settings: 'wght' 600; margin-bottom: 4px; } .store-hero__sub { font-size: 14px; opacity: .85; line-height: 1.45; } /* ── Drive (Fase 1) ─────────────────────────────────────────── */ .drive-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: var(--space-lg); padding: var(--space-md); background: var(--color-canvas-soft); border-radius: var(--r-md); border: 1px solid var(--color-hairline); } .drive-toolbar__search { position: relative; flex: 1; max-width: 360px; } .drive-toolbar__search input { width: 100%; padding: 8px 12px 8px 36px; border: 1px solid var(--color-hairline); border-radius: var(--r-md); background: var(--color-canvas); font-size: 14px; font-family: inherit; } .drive-toolbar__search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--color-ink-mute); } .breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--color-ink-mute); margin-bottom: var(--space-md); flex-wrap: wrap; } .breadcrumb a { color: var(--color-ink-mute); text-decoration: none !important; } .breadcrumb a:hover { color: var(--color-ink); } .breadcrumb__current { color: var(--color-ink); font-variation-settings: 'wght' 540; } .breadcrumb__sep { color: var(--color-ink-faint); } .drive-stats { display: flex; gap: 16px; font-size: 12px; color: var(--color-ink-mute); margin-left: auto; align-items: center; } .drive-stats__item strong { font-variation-settings: 'wght' 600; color: var(--color-ink); } .drive-grid { display: grid; gap: var(--space-sm); grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } .drive-card { background: var(--color-canvas); border: 1px solid var(--color-hairline); border-radius: var(--r-md); padding: var(--space-md); display: flex; flex-direction: column; gap: 8px; cursor: pointer; transition: border-color .15s, box-shadow .15s; position: relative; text-decoration: none !important; color: var(--color-ink); } .drive-card:hover { border-color: var(--color-ink-faint, #cbc7be); box-shadow: 0 2px 8px rgba(14,12,31,.06); } .drive-card__icon { width: 40px; height: 40px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--color-canvas-soft); color: var(--color-primary); flex-shrink: 0; } .drive-card__icon--folder { background: rgba(201,180,250,.25); color: #4c1d95; } .drive-card__icon--image { background: rgba(22,163,74,.10); color: #15803d; } .drive-card__icon--pdf { background: rgba(194,65,12,.10); color: #c2410c; } .drive-card__icon--doc { background: rgba(37,99,235,.10); color: #1e40af; } .drive-card__icon--sheet { background: rgba(22,163,74,.10); color: #15803d; } .drive-card__icon--zip { background: rgba(146,64,14,.10); color: #92400e; } .drive-card__name { font-size: 13px; font-variation-settings: 'wght' 540; word-break: break-word; line-height: 1.3; } .drive-card__meta { font-size: 11px; color: var(--color-ink-mute); margin-top: auto; display: flex; gap: 8px; justify-content: space-between; } .drive-card__menu { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; background: var(--color-canvas); border: 1px solid var(--color-hairline); border-radius: var(--r-sm); display: none; place-items: center; cursor: pointer; color: var(--color-ink-mute); } .drive-card:hover .drive-card__menu { display: grid; } .drive-card__menu:hover { color: var(--color-ink); } .drive-empty { text-align: center; padding: 48px 24px; border: 2px dashed var(--color-hairline); border-radius: var(--r-lg); color: var(--color-ink-mute); } .drive-empty__icon { width: 48px; height: 48px; margin: 0 auto 12px; opacity: .4; } .drive-empty h3 { font-size: 16px; color: var(--color-ink); margin-bottom: 4px; } .drive-empty p { font-size: 14px; margin-bottom: 16px; } .drive-section { margin-bottom: var(--space-xl); } .drive-section__title { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--color-ink-mute); font-variation-settings: 'wght' 600; margin-bottom: var(--space-sm); } /* Upload area drag-drop */ .drive-upload-zone { border: 2px dashed var(--color-hairline); border-radius: var(--r-lg); padding: 32px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; background: var(--color-canvas); } .drive-upload-zone:hover, .drive-upload-zone.is-dragover { border-color: var(--color-primary); background: rgba(201,180,250,.06); } .drive-upload-zone__icon { width: 48px; height: 48px; margin: 0 auto 12px; color: var(--color-ink-mute); } .drive-upload-zone__title { font-size: 15px; font-variation-settings: 'wght' 540; } .drive-upload-zone__hint { font-size: 12px; color: var(--color-ink-mute); margin-top: 4px; } /* Share link card */ .share-link-card { background: var(--color-canvas-soft); border: 1px solid var(--color-hairline); border-radius: var(--r-md); padding: var(--space-md); margin-bottom: var(--space-sm); display: flex; flex-direction: column; gap: 8px; } .share-link-card.is-revoked { opacity: .5; } .share-link-card__url { display: flex; gap: 6px; align-items: center; background: var(--color-canvas); border: 1px solid var(--color-hairline); border-radius: var(--r-sm); padding: 6px 10px; font-size: 12px; font-family: ui-monospace, monospace; word-break: break-all; } .share-link-card__url button { border: none; background: transparent; color: var(--color-primary); cursor: pointer; font-size: 11px; font-family: inherit; } .share-link-card__meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--color-ink-mute); } /* Lista de anexos (componente reusável em outros módulos) */ .attachment-list { display: flex; flex-direction: column; gap: 6px; } .attachment-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--color-canvas-soft); border-radius: var(--r-sm); border: 1px solid var(--color-hairline); } .attachment-item__icon { color: var(--color-ink-mute); flex-shrink: 0; } .attachment-item__name { flex: 1; font-size: 13px; word-break: break-word; } .attachment-item__meta { font-size: 11px; color: var(--color-ink-mute); } .attachment-item__actions { display: flex; gap: 4px; } /* Página pública de compartilhamento */ .public-share { max-width: 480px; margin: 80px auto; padding: 32px; background: var(--color-canvas); border-radius: var(--r-lg); border: 1px solid var(--color-hairline); text-align: center; } .public-share__icon { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: var(--r-md); background: var(--color-canvas-soft); display: grid; place-items: center; color: var(--color-primary); } .public-share__name { font-size: 18px; font-variation-settings: 'wght' 600; margin-bottom: 4px; word-break: break-word; } .public-share__meta { font-size: 13px; color: var(--color-ink-mute); margin-bottom: 24px; } /* ── CNPJ search (form de Nova empresa) ────────────────────── */ .cnpj-search { background: linear-gradient(135deg, rgba(201,180,250,.10), rgba(201,180,250,.04)); border: 1px solid rgba(201,180,250,.40); border-radius: var(--r-md); padding: var(--space-md) var(--space-lg); margin-bottom: var(--space-lg); } .cnpj-search .form-label { margin-bottom: 8px; } .cnpj-search__input-wrap { display: flex; gap: 8px; align-items: stretch; position: relative; } .cnpj-search__input { flex: 1; font-family: ui-monospace, SFMono-Regular, monospace; font-size: 16px; letter-spacing: .02em; } .cnpj-search__btn { flex-shrink: 0; } .cnpj-search.is-loading .cnpj-search__btn::after { content: ''; width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; display: inline-block; margin-left: 8px; vertical-align: -2px; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .cnpj-search__status { position: absolute; top: calc(100% + 6px); left: 0; font-size: 12px; line-height: 1.4; color: var(--color-ink-mute); padding-left: 4px; } .cnpj-search__status.is-loading { color: var(--color-ink-mute); } .cnpj-search__status.is-error { color: #c2410c; } .cnpj-search__status.is-warn { color: #92400e; } .cnpj-search__status.is-success { color: #15803d; } .cnpj-search__status.is-info { color: var(--color-primary); } /* ────────────────────────────────────────────────────────── SPLASH SCREEN — Animação do logo no primeiro acesso Estratégia: NÃO tocar em transforms internos do SVG (eles posicionam as formas no lugar certo). A animação acontece só via opacity nas internas e via transform/scale no wrapper externo (.cm-splash__stage). ──────────────────────────────────────────────────────── */ #cm-splash { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: linear-gradient(135deg, #ffffff 0%, #f7fafc 100%); opacity: 1; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1); } #cm-splash.is-leaving { opacity: 0; pointer-events: none; } /* O stage é o wrapper EXTERNO do SVG — aqui podemos animar transform livremente sem afetar o layout interno do SVG. */ .cm-splash__stage { width: min(640px, 80vw); opacity: 0; transform: scale(0.92); animation: cm-stage-in 700ms cubic-bezier(0.22, 1, 0.36, 1) forwards; } @keyframes cm-stage-in { 0% { opacity: 0; transform: scale(0.92); } 100% { opacity: 1; transform: scale(1); } } .cm-splash__logo { width: 100%; height: auto; display: block; } /* Cada shape do ÍCONE: animamos APENAS opacity. Os transforms do SVG (translate, rotate) ficam intactos — a forma aparece exatamente onde foi desenhada no arquivo original. */ .cm-sp-shape { opacity: 0; animation: cm-fade-in 500ms ease-out forwards; } .cm-sp-shape--1 { animation-delay: 600ms; } /* fundo verde escuro */ .cm-sp-shape--2 { animation-delay: 780ms; } /* ciano traseiro */ .cm-sp-shape--3 { animation-delay: 960ms; } /* ciano da frente */ /* Wordmark: também só opacity. */ .cm-sp-word { opacity: 0; animation: cm-fade-in 600ms ease-out forwards; } .cm-sp-word--1 { animation-delay: 1200ms; } /* CONTA */ .cm-sp-word--2 { animation-delay: 1380ms; } /* MODULAR */ @keyframes cm-fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } /* Respeita preferência por menos movimento */ @media (prefers-reduced-motion: reduce) { .cm-splash__stage { animation: none; opacity: 1; transform: none; } .cm-sp-shape, .cm-sp-word { opacity: 1; animation: none; } }