/* ===================================================================== CAP SOARES — Design System Sem dependências externas. Tema claro/escuro via data-theme no . ===================================================================== */ /* -------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------- */ :root { /* Superfícies */ --bg: #f4f5f9; --bg-subtle: #eceef5; --surface: #ffffff; --surface-2: #f8f9fc; --surface-3: #f1f3f9; --surface-hover: #f5f6fa; --overlay: rgba(15, 18, 34, .48); /* Texto */ --text: #111527; --text-muted: #5b6178; --text-subtle: #868da5; --text-invert: #ffffff; /* Bordas */ --border: #e2e5ee; --border-strong: #cfd4e2; --ring: rgba(99, 102, 241, .35); /* Marca */ --brand: #4f46e5; --brand-hover: #4338ca; --brand-soft: #eef0ff; --brand-text: #4338ca; --brand-contrast:#ffffff; /* Semânticas */ --success: #059669; --success-soft: #e7f7f0; --success-text: #047857; --warning: #d97706; --warning-soft: #fef4e6; --warning-text: #b45309; --danger: #dc2626; --danger-soft: #fdecec; --danger-text: #b91c1c; --info: #0284c7; --info-soft: #e6f4fd; --info-text: #0369a1; --neutral: #64748b; --neutral-soft: #f1f3f7; /* Formas */ --radius-xs: 6px; --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --radius-xl: 22px; --radius-full: 999px; /* Sombras */ --shadow-xs: 0 1px 2px rgba(16, 21, 44, .05); --shadow-sm: 0 1px 3px rgba(16, 21, 44, .07), 0 1px 2px rgba(16, 21, 44, .04); --shadow: 0 4px 14px rgba(16, 21, 44, .07), 0 1px 3px rgba(16, 21, 44, .05); --shadow-lg: 0 12px 32px rgba(16, 21, 44, .1), 0 4px 8px rgba(16, 21, 44, .05); --shadow-xl: 0 24px 56px rgba(16, 21, 44, .16); /* Tipografia */ --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace; /* Espaço */ --sidebar-w: 260px; --header-h: 64px; /* Movimento */ --ease: cubic-bezier(.32, .72, 0, 1); --dur: 180ms; } :root[data-theme="dark"] { --bg: #0b0d16; --bg-subtle: #0f1220; --surface: #151827; --surface-2: #1b1f31; --surface-3: #222739; --surface-hover: #1f2436; --overlay: rgba(0, 0, 0, .66); --text: #e8eaf3; --text-muted: #9aa1bb; --text-subtle: #6f7794; --text-invert: #0b0d16; --border: #262b3f; --border-strong: #343a52; --ring: rgba(129, 140, 248, .4); --brand: #6366f1; --brand-hover: #818cf8; --brand-soft: #1e2142; --brand-text: #a5b4fc; --success: #10b981; --success-soft: #0d2a24; --success-text: #34d399; --warning: #f59e0b; --warning-soft: #2e2210; --warning-text: #fbbf24; --danger: #ef4444; --danger-soft: #331618; --danger-text: #f87171; --info: #38bdf8; --info-soft: #0c2635; --info-text: #7dd3fc; --neutral: #94a3b8; --neutral-soft: #1e2233; --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4); --shadow-sm: 0 1px 3px rgba(0, 0, 0, .5); --shadow: 0 4px 16px rgba(0, 0, 0, .45); --shadow-lg: 0 16px 40px rgba(0, 0, 0, .55); --shadow-xl: 0 28px 64px rgba(0, 0, 0, .7); } /* -------------------------------------------------------------------- 2. Reset -------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; height: 100%; } body { min-height: 100%; font-family: var(--font); font-size: 15px; line-height: 1.55; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "cv02", "cv03", "cv04", "tnum"; } img, svg, video, canvas { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; padding: 0; } a { color: var(--brand-text); text-decoration: none; } a:hover { text-decoration: underline; } table { border-collapse: collapse; width: 100%; } h1, h2, h3, h4, h5 { line-height: 1.25; font-weight: 650; letter-spacing: -.015em; } h1 { font-size: 1.6rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.05rem; } h4 { font-size: .95rem; } p { text-wrap: pretty; } :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } ::selection { background: var(--brand); color: #fff; } .icon { flex: none; } /* Scrollbar discreta */ * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-full); border: 3px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: var(--text-subtle); background-clip: content-box; } /* -------------------------------------------------------------------- 3. Utilitários -------------------------------------------------------------------- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .hidden { display: none !important; } .text-muted { color: var(--text-muted); } .text-subtle { color: var(--text-subtle); } .text-success { color: var(--success-text); } .text-danger { color: var(--danger-text); } .text-warning { color: var(--warning-text); } .text-brand { color: var(--brand-text); } .text-right { text-align: right; } .text-center { text-align: center; } .text-sm { font-size: .85rem; } .text-xs { font-size: .76rem; } .text-lg { font-size: 1.1rem; } .fw-500 { font-weight: 500; } .fw-600 { font-weight: 620; } .fw-700 { font-weight: 700; } .mono { font-family: var(--font-mono); font-size: .88em; letter-spacing: -.01em; } .tabular { font-variant-numeric: tabular-nums; } .nowrap { white-space: nowrap; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .flex { display: flex; } .flex-col { display: flex; flex-direction: column; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .justify-end { justify-content: flex-end; } .flex-wrap { flex-wrap: wrap; } .flex-1 { flex: 1; min-width: 0; } .gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-5 { gap: 20px; } .gap-6 { gap: 24px; } .mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-5 { margin-top: 20px; } .mt-6 { margin-top: 24px; } .mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .mb-5 { margin-bottom: 20px; } .mb-6 { margin-bottom: 24px; } .w-full { width: 100%; } /* -------------------------------------------------------------------- 4. Layout da aplicação -------------------------------------------------------------------- */ .app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; } /* ---- Sidebar ---- */ .sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--border); z-index: 40; } .sidebar__brand { display: flex; align-items: center; gap: 11px; padding: 0 20px; height: var(--header-h); border-bottom: 1px solid var(--border); flex: none; } .sidebar__logo { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(135deg, var(--brand), #8b5cf6); color: #fff; font-weight: 800; font-size: .82rem; letter-spacing: -.03em; box-shadow: 0 3px 10px rgba(79, 70, 229, .3); flex: none; } .sidebar__name { font-weight: 680; font-size: .96rem; letter-spacing: -.02em; } .sidebar__tag { font-size: .68rem; color: var(--text-subtle); text-transform: uppercase; letter-spacing: .08em; } .sidebar__nav { flex: 1; overflow-y: auto; padding: 14px 12px 20px; } .nav__group + .nav__group { margin-top: 20px; } .nav__label { font-size: .68rem; font-weight: 650; text-transform: uppercase; letter-spacing: .09em; color: var(--text-subtle); padding: 0 10px 8px; } .nav__item { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: var(--radius-sm); color: var(--text-muted); font-weight: 520; font-size: .9rem; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); position: relative; } .nav__item:hover { background: var(--surface-hover); color: var(--text); text-decoration: none; } .nav__item.is-active { background: var(--brand-soft); color: var(--brand-text); font-weight: 600; } .nav__item.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(--brand); } .nav__badge { margin-left: auto; min-width: 20px; padding: 1px 6px; border-radius: var(--radius-full); background: var(--danger); color: #fff; font-size: .68rem; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; } .nav__badge--muted { background: var(--neutral-soft); color: var(--text-muted); } .sidebar__footer { flex: none; padding: 12px; border-top: 1px solid var(--border); } /* A cortina do menu só existe no modo gaveta (≤860px). Sem este display:none ela conta como item da grade no desktop, ocupa a 2ª coluna e joga .main para a linha de baixo — o conteúdo some da tela. */ .sidebar-backdrop { display: none; } /* ---- Área principal ---- */ .main { display: flex; flex-direction: column; min-width: 0; } .topbar { position: sticky; top: 0; z-index: 30; height: var(--header-h); display: flex; align-items: center; gap: 12px; padding: 0 22px; background: color-mix(in srgb, var(--surface) 86%, transparent); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--border); } .topbar__title { font-size: 1.02rem; font-weight: 640; letter-spacing: -.02em; } .topbar__sub { font-size: .78rem; color: var(--text-subtle); } .topbar__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; } .menu-toggle { display: none; } .content { padding: 22px; flex: 1; max-width: 1600px; width: 100%; } .content--narrow { max-width: 900px; } /* -------------------------------------------------------------------- 5. Botões -------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 15px; border-radius: var(--radius-sm); border: 1px solid transparent; font-size: .875rem; font-weight: 570; line-height: 1.2; white-space: nowrap; transition: all var(--dur) var(--ease); text-decoration: none !important; user-select: none; } .btn:disabled, .btn.is-loading { opacity: .55; pointer-events: none; } .btn:active:not(:disabled) { transform: translateY(1px); } .btn--primary { background: var(--brand); color: var(--brand-contrast); box-shadow: 0 1px 2px rgba(16,21,44,.14); } .btn--primary:hover { background: var(--brand-hover); } .btn--secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); box-shadow: var(--shadow-xs); } .btn--secondary:hover { background: var(--surface-hover); border-color: var(--text-subtle); } .btn--ghost { background: transparent; color: var(--text-muted); } .btn--ghost:hover { background: var(--surface-hover); color: var(--text); } .btn--success { background: var(--success); color: #fff; } .btn--success:hover { filter: brightness(1.08); } .btn--danger { background: var(--danger); color: #fff; } .btn--danger:hover { filter: brightness(1.08); } .btn--warning { background: var(--warning); color: #fff; } .btn--warning:hover { filter: brightness(1.08); } .btn--outline-danger { background: transparent; color: var(--danger-text); border-color: var(--danger); } .btn--outline-danger:hover { background: var(--danger-soft); } .btn--sm { padding: 6px 11px; font-size: .8rem; gap: 5px; border-radius: var(--radius-xs); } .btn--lg { padding: 12px 22px; font-size: .95rem; } .btn--block { width: 100%; } .btn--icon { padding: 8px; } .btn--icon.btn--sm { padding: 6px; } /* -------------------------------------------------------------------- 6. Cartões -------------------------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-xs); } .card__header { display: flex; align-items: center; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--border); } .card__title { font-size: .95rem; font-weight: 640; letter-spacing: -.015em; } .card__sub { font-size: .78rem; color: var(--text-subtle); } .card__actions { margin-left: auto; display: flex; gap: 6px; align-items: center; } .card__body { padding: 18px; } .card__body--flush { padding: 0; } .card__footer { padding: 12px 18px; border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 var(--radius) var(--radius); } /* -------------------------------------------------------------------- 7. Grid -------------------------------------------------------------------- */ .grid { display: grid; gap: 16px; } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } .grid--auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .grid--cards { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } /* -------------------------------------------------------------------- 8. KPIs -------------------------------------------------------------------- */ .kpi { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-xs); overflow: hidden; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .kpi:hover { transform: translateY(-1px); box-shadow: var(--shadow); } .kpi::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--accent, var(--brand)); } .kpi__head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .kpi__icon { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--accent-soft, var(--brand-soft)); color: var(--accent, var(--brand)); } .kpi__label { font-size: .74rem; font-weight: 620; text-transform: uppercase; letter-spacing: .06em; color: var(--text-subtle); } .kpi__value { font-size: 1.5rem; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.1; } .kpi__value--sm { font-size: 1.22rem; } .kpi__meta { margin-top: 5px; font-size: .78rem; color: var(--text-muted); display: flex; align-items: center; gap: 5px; } .kpi--brand { --accent: var(--brand); --accent-soft: var(--brand-soft); } .kpi--success { --accent: var(--success); --accent-soft: var(--success-soft); } .kpi--warning { --accent: var(--warning); --accent-soft: var(--warning-soft); } .kpi--danger { --accent: var(--danger); --accent-soft: var(--danger-soft); } .kpi--info { --accent: var(--info); --accent-soft: var(--info-soft); } .kpi--neutral { --accent: var(--neutral); --accent-soft: var(--neutral-soft); } /* -------------------------------------------------------------------- 9. Badges e pílulas -------------------------------------------------------------------- */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--radius-full); font-size: .74rem; font-weight: 620; line-height: 1.5; white-space: nowrap; } .badge--success { background: var(--success-soft); color: var(--success-text); } .badge--warning { background: var(--warning-soft); color: var(--warning-text); } .badge--danger { background: var(--danger-soft); color: var(--danger-text); } .badge--info { background: var(--info-soft); color: var(--info-text); } .badge--neutral { background: var(--neutral-soft); color: var(--text-muted); } .badge--muted { background: var(--surface-3); color: var(--text-subtle); } .badge--brand { background: var(--brand-soft); color: var(--brand-text); } .badge--dot::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; } .badge--lg { padding: 5px 12px; font-size: .8rem; } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-full); border: 1px solid var(--border); background: var(--surface-2); font-size: .78rem; color: var(--text-muted); } .chip__x { display: grid; place-items: center; color: var(--text-subtle); border-radius: 50%; } .chip__x:hover { color: var(--danger-text); } /* -------------------------------------------------------------------- 10. Formulários -------------------------------------------------------------------- */ .form-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; } .col-1{grid-column:span 1}.col-2{grid-column:span 2}.col-3{grid-column:span 3} .col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-6{grid-column:span 6} .col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-9{grid-column:span 9} .col-10{grid-column:span 10}.col-11{grid-column:span 11}.col-12{grid-column:span 12} .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .label { font-size: .8rem; font-weight: 570; color: var(--text-muted); display: flex; align-items: center; gap: 5px; } .label .req { color: var(--danger); } .input, .select, .textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background-color: var(--surface); color: var(--text); font-size: .9rem; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); -webkit-appearance: none; appearance: none; } .input::placeholder, .textarea::placeholder { color: var(--text-subtle); } .input:hover, .select:hover, .textarea:hover { border-color: var(--text-subtle); } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); } /* background-color, nunca o atalho `background`: o atalho zera background-repeat/position, e como a seta do .select é definida em regra mais específica no tema escuro, ela sobrevivia e passava a ladrilhar o campo inteiro. */ .input:disabled, .select:disabled, .textarea:disabled { background-color: var(--surface-3); color: var(--text-subtle); cursor: not-allowed; } .textarea { resize: vertical; min-height: 84px; line-height: 1.5; } .select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23868da5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 34px; } :root[data-theme="dark"] .select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236f7794' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } .input--error, .select--error { border-color: var(--danger); } .input--error:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, .18); } .field__error { font-size: .76rem; color: var(--danger-text); display: flex; align-items: center; gap: 4px; } .field__hint { font-size: .76rem; color: var(--text-subtle); } .input-group { display: flex; align-items: stretch; } .input-group .input { border-radius: var(--radius-sm) 0 0 var(--radius-sm); } .input-group__addon { display: grid; place-items: center; padding: 0 12px; border: 1px solid var(--border-strong); border-left: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--surface-3); color: var(--text-subtle); font-size: .82rem; white-space: nowrap; } .input-group--prefix .input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .input-group--prefix .input-group__addon { border-left: 1px solid var(--border-strong); border-right: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); } /* Checkbox e radio */ .check { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; user-select: none; padding: 2px 0; } .check input[type="checkbox"], .check input[type="radio"] { appearance: none; -webkit-appearance: none; width: 17px; height: 17px; border: 1.5px solid var(--border-strong); border-radius: 5px; background: var(--surface); display: grid; place-items: center; cursor: pointer; flex: none; margin-top: 2px; transition: all var(--dur) var(--ease); } .check input[type="radio"] { border-radius: 50%; } .check input:checked { background: var(--brand); border-color: var(--brand); } .check input[type="checkbox"]:checked::after { content: ""; width: 9px; height: 5px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); } .check input[type="radio"]:checked::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; } .check input:focus-visible { box-shadow: 0 0 0 3px var(--ring); } .check__text { font-size: .87rem; line-height: 1.45; } .check__desc { font-size: .76rem; color: var(--text-subtle); } /* Switch */ .switch { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; } .switch input { appearance: none; -webkit-appearance: none; width: 38px; height: 22px; border-radius: var(--radius-full); background: var(--border-strong); position: relative; cursor: pointer; transition: background var(--dur) var(--ease); flex: none; } .switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform var(--dur) var(--ease); } .switch input:checked { background: var(--brand); } .switch input:checked::after { transform: translateX(16px); } .switch input:focus-visible { box-shadow: 0 0 0 3px var(--ring); } /* Fieldset */ .fieldset { border: 0; padding: 0; margin: 0; } .fieldset + .fieldset { margin-top: 24px; } .fieldset__legend { display: flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--text-subtle); padding-bottom: 10px; margin-bottom: 14px; border-bottom: 1px solid var(--border); width: 100%; } /* -------------------------------------------------------------------- 11. Tabelas -------------------------------------------------------------------- */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Menus de ação dentro de tabela roláveis usam posição fixa: como `absolute` eles ficavam pendurados abaixo da última linha, inflando a área de rolagem (barra vertical falsa) e sendo recortados pelo overflow — o que deixava os itens do menu inalcançáveis. As coordenadas são calculadas na abertura. */ .table-wrap .dropdown__menu { position: fixed; } .table { font-size: .875rem; } .table th { text-align: left; padding: 10px 14px; font-size: .72rem; font-weight: 640; text-transform: uppercase; letter-spacing: .06em; color: var(--text-subtle); background: var(--surface-2); border-bottom: 1px solid var(--border); white-space: nowrap; position: sticky; top: 0; z-index: 1; } .table td { padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; } .table tbody tr { transition: background var(--dur) var(--ease); } .table tbody tr:hover { background: var(--surface-hover); } .table tbody tr:last-child td { border-bottom: 0; } .table tfoot td { padding: 11px 14px; background: var(--surface-2); font-weight: 640; border-top: 2px solid var(--border); } .table--compact td { padding: 8px 12px; } .table--compact th { padding: 8px 12px; } .table th a { color: inherit; display: inline-flex; align-items: center; gap: 4px; } .table th a:hover { color: var(--text); text-decoration: none; } .row--overdue { background: color-mix(in srgb, var(--danger-soft) 42%, transparent); } .row--overdue:hover { background: color-mix(in srgb, var(--danger-soft) 62%, transparent) !important; } .row--paid td:first-child { border-left: 2px solid var(--success); } .row--today { background: color-mix(in srgb, var(--warning-soft) 40%, transparent); } .td-actions { display: flex; gap: 4px; justify-content: flex-end; } /* Em tabela larga a coluna de ações saía da área visível e obrigava a rolar de lado para agir sobre a linha. Fixando-a à direita, os botões continuam ao alcance enquanto o restante rola. */ .table:has(.td-actions) thead th:last-child, .table:has(.td-actions) tbody td:last-child { position: sticky; right: 0; z-index: 2; box-shadow: -1px 0 0 var(--border); } .table:has(.td-actions) thead th:last-child { background: var(--surface-2); z-index: 3; } .table:has(.td-actions) tbody td:last-child { background: var(--surface); } .table:has(.td-actions) tbody tr:hover td:last-child { background: var(--surface-hover); } .table:has(.td-actions) tbody tr.row--overdue td:last-child { background: color-mix(in srgb, var(--danger-soft) 42%, var(--surface)); } .table:has(.td-actions) tbody tr.row--today td:last-child { background: color-mix(in srgb, var(--warning-soft) 40%, var(--surface)); } /* -------------------------------------------------------------------- 12. Avatares e identidade -------------------------------------------------------------------- */ .avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: .76rem; font-weight: 680; color: #fff; flex: none; letter-spacing: -.01em; text-transform: uppercase; } .avatar--sm { width: 26px; height: 26px; font-size: .65rem; } .avatar--lg { width: 52px; height: 52px; font-size: 1.05rem; } .avatar--xl { width: 76px; height: 76px; font-size: 1.5rem; } .user-cell { display: flex; align-items: center; gap: 10px; min-width: 0; } .user-cell__name { font-weight: 570; } .user-cell__meta { font-size: .76rem; color: var(--text-subtle); } /* -------------------------------------------------------------------- 13. Alertas -------------------------------------------------------------------- */ .alert { display: flex; align-items: flex-start; gap: 11px; padding: 12px 15px; border-radius: var(--radius-sm); border: 1px solid; font-size: .875rem; line-height: 1.5; } .alert__icon { flex: none; margin-top: 1px; } .alert__body { flex: 1; min-width: 0; } .alert__title { font-weight: 640; margin-bottom: 2px; } .alert--success { background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 30%, transparent); color: var(--success-text); } .alert--danger { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 30%, transparent); color: var(--danger-text); } .alert--warning { background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 30%, transparent); color: var(--warning-text); } .alert--info { background: var(--info-soft); border-color: color-mix(in srgb, var(--info) 30%, transparent); color: var(--info-text); } .alert--neutral { background: var(--surface-2); border-color: var(--border); color: var(--text-muted); } /* Toasts */ .toasts { position: fixed; top: 16px; right: 16px; z-index: 200; display: flex; flex-direction: column; gap: 10px; max-width: min(400px, calc(100vw - 32px)); pointer-events: none; } .toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 11px; padding: 13px 15px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg); font-size: .875rem; animation: toast-in .28s var(--ease); position: relative; overflow: hidden; } .toast::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--tone, var(--brand)); } .toast--success { --tone: var(--success); } .toast--error { --tone: var(--danger); } .toast--warning { --tone: var(--warning); } .toast--info { --tone: var(--info); } .toast__icon { color: var(--tone, var(--brand)); flex: none; margin-top: 1px; } .toast__close { margin-left: auto; color: var(--text-subtle); flex: none; } .toast__close:hover { color: var(--text); } .toast.is-leaving { animation: toast-out .22s var(--ease) forwards; } @keyframes toast-in { from { opacity: 0; transform: translateX(24px) scale(.97); } to { opacity: 1; transform: none; } } @keyframes toast-out { to { opacity: 0; transform: translateX(24px) scale(.97); } } /* -------------------------------------------------------------------- 14. Estado vazio -------------------------------------------------------------------- */ .empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 48px 24px; text-align: center; color: var(--text-muted); } .empty__icon { width: 52px; height: 52px; border-radius: var(--radius-lg); display: grid; place-items: center; background: var(--surface-3); color: var(--text-subtle); margin-bottom: 4px; } .empty__title { font-size: 1rem; font-weight: 620; color: var(--text); } .empty__text { font-size: .87rem; max-width: 380px; } /* -------------------------------------------------------------------- 15. Barra de filtros -------------------------------------------------------------------- */ .filters { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 16px; box-shadow: var(--shadow-xs); overflow: hidden; } .filters__bar { display: flex; align-items: center; gap: 10px; padding: 12px 14px; flex-wrap: wrap; } .filters__search { flex: 1; min-width: 200px; position: relative; display: flex; align-items: center; } .filters__search .icon { position: absolute; left: 11px; color: var(--text-subtle); pointer-events: none; } .filters__search .input { padding-left: 36px; } .filters__advanced { display: none; padding: 0 14px 14px; border-top: 1px solid var(--border); padding-top: 14px; background: var(--surface-2); } .filters__advanced.is-open { display: block; } .filters__actions { display: flex; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); flex-wrap: wrap; } .filters__active { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 14px 12px; } .quick-filters { display: flex; gap: 6px; flex-wrap: wrap; } .quick-filter { padding: 5px 11px; border-radius: var(--radius-full); border: 1px solid var(--border); background: var(--surface); font-size: .8rem; font-weight: 540; color: var(--text-muted); transition: all var(--dur) var(--ease); display: inline-flex; align-items: center; gap: 5px; } .quick-filter:hover { border-color: var(--brand); color: var(--brand-text); text-decoration: none; } .quick-filter.is-active { background: var(--brand); border-color: var(--brand); color: #fff; } .quick-filter__count { padding: 0 5px; border-radius: var(--radius-full); background: color-mix(in srgb, currentColor 15%, transparent); font-size: .7rem; font-weight: 700; } /* -------------------------------------------------------------------- 16. Paginação -------------------------------------------------------------------- */ .pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; flex-wrap: wrap; border-top: 1px solid var(--border); } .pagination__info { font-size: .82rem; color: var(--text-muted); } .pagination__pages { display: flex; gap: 4px; align-items: center; } .page-link { min-width: 33px; height: 33px; padding: 0 9px; display: grid; place-items: center; border-radius: var(--radius-xs); border: 1px solid var(--border); background: var(--surface); font-size: .82rem; font-weight: 540; color: var(--text-muted); transition: all var(--dur) var(--ease); } .page-link:hover { background: var(--surface-hover); color: var(--text); text-decoration: none; } .page-link.is-active { background: var(--brand); border-color: var(--brand); color: #fff; } .page-link.is-disabled { opacity: .4; pointer-events: none; } .page-gap { color: var(--text-subtle); padding: 0 3px; } /* -------------------------------------------------------------------- 17. Dropdown -------------------------------------------------------------------- */ .dropdown { position: relative; } .dropdown__menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 210px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 5px; z-index: 60; opacity: 0; visibility: hidden; transform: translateY(-5px); transition: all var(--dur) var(--ease); } .dropdown.is-open .dropdown__menu { opacity: 1; visibility: visible; transform: none; } .dropdown__menu--left { right: auto; left: 0; } .dropdown__menu--wide { min-width: 320px; } .dropdown__item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 11px; border-radius: var(--radius-xs); font-size: .865rem; color: var(--text); text-align: left; transition: background var(--dur) var(--ease); } .dropdown__item:hover { background: var(--surface-hover); text-decoration: none; } .dropdown__item--danger { color: var(--danger-text); } .dropdown__item--danger:hover { background: var(--danger-soft); } .dropdown__divider { height: 1px; background: var(--border); margin: 5px 0; } .dropdown__header { padding: 8px 11px 5px; font-size: .7rem; font-weight: 650; text-transform: uppercase; letter-spacing: .07em; color: var(--text-subtle); } /* -------------------------------------------------------------------- 18. Modal -------------------------------------------------------------------- */ .modal-backdrop { position: fixed; inset: 0; background: var(--overlay); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); z-index: 100; display: grid; place-items: center; padding: 20px; opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), visibility var(--dur); } .modal-backdrop.is-open { opacity: 1; visibility: visible; } .modal { width: 100%; max-width: 520px; max-height: calc(100vh - 40px); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); transform: scale(.96) translateY(8px); transition: transform var(--dur) var(--ease); } .modal-backdrop.is-open .modal { transform: none; } .modal--lg { max-width: 760px; } .modal--xl { max-width: 1000px; } .modal__header { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); flex: none; } .modal__title { font-size: 1.02rem; font-weight: 650; } .modal__close { margin-left: auto; color: var(--text-subtle); border-radius: var(--radius-xs); padding: 5px; } .modal__close:hover { background: var(--surface-hover); color: var(--text); } .modal__body { padding: 20px; overflow-y: auto; flex: 1; } .modal__footer { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 var(--radius-lg) var(--radius-lg); flex: none; flex-wrap: wrap; } /* -------------------------------------------------------------------- 19. Calendário -------------------------------------------------------------------- */ .calendar { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-xs); } .calendar__header { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; } .calendar__month { font-size: 1.1rem; font-weight: 680; letter-spacing: -.02em; text-transform: capitalize; min-width: 190px; } .calendar__nav { display: flex; gap: 4px; } .calendar__weekdays { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--border); background: var(--surface-2); } .calendar__weekday { padding: 9px 6px; text-align: center; font-size: .7rem; font-weight: 650; text-transform: uppercase; letter-spacing: .07em; color: var(--text-subtle); } .calendar__weekday--weekend { color: var(--danger-text); } .calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); } .day { position: relative; min-height: 116px; padding: 7px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; background: var(--surface); transition: background var(--dur) var(--ease); cursor: pointer; text-align: left; width: 100%; } .day:nth-child(7n) { border-right: 0; } .day:hover { background: var(--surface-hover); } .day--outside { background: var(--surface-2); opacity: .55; } .day--weekend { background: color-mix(in srgb, var(--surface-2) 55%, var(--surface)); } .day--today { background: color-mix(in srgb, var(--brand-soft) 45%, var(--surface)); } .day--has-overdue { background: color-mix(in srgb, var(--danger-soft) 32%, var(--surface)); } .day__number { font-size: .82rem; font-weight: 620; color: var(--text-muted); width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; font-variant-numeric: tabular-nums; flex: none; } .day--today .day__number { background: var(--brand); color: #fff; } .day__head { display: flex; align-items: center; justify-content: space-between; gap: 4px; } .day__total { font-size: .68rem; font-weight: 700; color: var(--text-subtle); font-variant-numeric: tabular-nums; } .day__events { display: flex; flex-direction: column; gap: 3px; overflow: hidden; } .event { display: flex; align-items: center; gap: 5px; padding: 3px 6px; border-radius: var(--radius-xs); font-size: .7rem; line-height: 1.35; background: var(--surface-3); border-left: 2px solid var(--tone, var(--neutral)); color: var(--text-muted); overflow: hidden; } .event__value { font-weight: 680; font-variant-numeric: tabular-nums; flex: none; } .event__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .event--paid { --tone: var(--success); background: var(--success-soft); color: var(--success-text); } .event--overdue { --tone: var(--danger); background: var(--danger-soft); color: var(--danger-text); } .event--open { --tone: var(--info); background: var(--info-soft); color: var(--info-text); } .event--partial { --tone: var(--warning); background: var(--warning-soft); color: var(--warning-text); } .event--more { font-size: .67rem; color: var(--text-subtle); padding-left: 7px; border-left: 0; background: none; } .calendar__legend { display: flex; gap: 14px; padding: 11px 16px; border-top: 1px solid var(--border); background: var(--surface-2); flex-wrap: wrap; font-size: .76rem; color: var(--text-muted); } .legend-item { display: flex; align-items: center; gap: 6px; } .legend-dot { width: 9px; height: 9px; border-radius: 3px; } /* Painel lateral do dia */ .day-panel { position: fixed; top: 0; right: 0; width: min(440px, 100vw); height: 100vh; background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--shadow-xl); z-index: 110; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 260ms var(--ease); } .day-panel.is-open { transform: none; } .day-panel__header { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border); flex: none; } .day-panel__body { flex: 1; overflow-y: auto; padding: 16px 18px; } /* -------------------------------------------------------------------- 20. Barra de progresso -------------------------------------------------------------------- */ .progress { height: 7px; border-radius: var(--radius-full); background: var(--surface-3); overflow: hidden; } .progress__bar { height: 100%; border-radius: var(--radius-full); background: var(--tone, var(--brand)); transition: width 500ms var(--ease); } .progress--sm { height: 5px; } .progress--lg { height: 10px; } .progress--success .progress__bar { --tone: var(--success); } .progress--warning .progress__bar { --tone: var(--warning); } .progress--danger .progress__bar { --tone: var(--danger); } /* -------------------------------------------------------------------- 21. Página de autenticação -------------------------------------------------------------------- */ .auth { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; } .auth__aside { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 44px; background: linear-gradient(150deg, #312e81 0%, #4f46e5 46%, #7c3aed 100%); color: #fff; overflow: hidden; } .auth__aside::before { content: ""; position: absolute; width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.14), transparent 66%); top: -180px; right: -180px; } .auth__aside::after { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.09), transparent 68%); bottom: -140px; left: -110px; } .auth__aside > * { position: relative; z-index: 1; } .auth__headline { font-size: 2.05rem; font-weight: 720; letter-spacing: -.035em; line-height: 1.18; } .auth__text { opacity: .85; font-size: 1rem; margin-top: 12px; max-width: 420px; } .auth__features { display: flex; flex-direction: column; gap: 14px; margin-top: 34px; } .auth__feature { display: flex; align-items: flex-start; gap: 12px; } .auth__feature-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.16); backdrop-filter: blur(8px); flex: none; } .auth__feature-title { font-weight: 620; font-size: .93rem; } .auth__feature-text { font-size: .82rem; opacity: .8; } .auth__main { display: flex; align-items: center; justify-content: center; padding: 36px 24px; background: var(--bg); overflow-y: auto; } .auth__card { width: 100%; max-width: 400px; } .auth__card--wide { max-width: 620px; } .auth__logo { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(135deg, var(--brand), #8b5cf6); color: #fff; font-weight: 800; font-size: 1rem; margin-bottom: 20px; box-shadow: 0 6px 18px rgba(79,70,229,.32); } .auth__title { font-size: 1.55rem; font-weight: 700; letter-spacing: -.03em; } .auth__subtitle { color: var(--text-muted); margin-top: 5px; font-size: .92rem; } .password-field { position: relative; } .password-field .input { padding-right: 42px; } .password-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); padding: 7px; color: var(--text-subtle); border-radius: var(--radius-xs); } .password-toggle:hover { color: var(--text); background: var(--surface-hover); } .divider { display: flex; align-items: center; gap: 12px; color: var(--text-subtle); font-size: .78rem; margin: 20px 0; } .divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border); } /* -------------------------------------------------------------------- 22. Galeria de anexos -------------------------------------------------------------------- */ .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; } .gallery__item { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); background: var(--surface-3); cursor: pointer; } .gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms var(--ease); } .gallery__item:hover img { transform: scale(1.05); } .gallery__overlay { position: absolute; inset: auto 0 0 0; padding: 18px 8px 7px; background: linear-gradient(transparent, rgba(0,0,0,.72)); color: #fff; font-size: .72rem; display: flex; align-items: center; justify-content: space-between; gap: 6px; opacity: 0; transition: opacity var(--dur) var(--ease); } .gallery__item:hover .gallery__overlay { opacity: 1; } .gallery__badge { position: absolute; top: 6px; left: 6px; padding: 2px 7px; border-radius: var(--radius-full); background: rgba(0,0,0,.65); color: #fff; font-size: .66rem; font-weight: 640; backdrop-filter: blur(4px); } .gallery__actions { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; opacity: 0; transition: opacity var(--dur) var(--ease); } .gallery__item:hover .gallery__actions { opacity: 1; } .gallery__action { width: 26px; height: 26px; display: grid; place-items: center; border-radius: var(--radius-xs); background: rgba(0,0,0,.62); color: #fff; backdrop-filter: blur(4px); } .gallery__action:hover { background: rgba(0,0,0,.85); } .gallery__action--danger:hover { background: var(--danger); } .file-item { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); } .file-item__icon { width: 34px; height: 34px; border-radius: var(--radius-xs); display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-text); flex: none; } /* Dropzone */ .dropzone { border: 2px dashed var(--border-strong); border-radius: var(--radius); padding: 26px 18px; text-align: center; background: var(--surface-2); transition: all var(--dur) var(--ease); cursor: pointer; } .dropzone:hover, .dropzone.is-dragging { border-color: var(--brand); background: var(--brand-soft); } .dropzone__icon { color: var(--text-subtle); margin: 0 auto 8px; } .dropzone.is-dragging .dropzone__icon { color: var(--brand); } /* Lightbox */ .lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 200; display: grid; place-items: center; padding: 32px; opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), visibility var(--dur); } .lightbox.is-open { opacity: 1; visibility: visible; } .lightbox img { max-width: 100%; max-height: calc(100vh - 120px); object-fit: contain; border-radius: var(--radius-sm); } .lightbox__close { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; } .lightbox__close:hover { background: rgba(255,255,255,.26); } .lightbox__caption { position: absolute; bottom: 22px; color: #fff; opacity: .85; font-size: .88rem; text-align: center; } /* -------------------------------------------------------------------- 23. Composição do pagamento (splits) -------------------------------------------------------------------- */ .split-row { display: grid; grid-template-columns: 170px 150px 1fr 40px; gap: 9px; align-items: start; padding: 11px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); } .split-row + .split-row { margin-top: 8px; } .split-summary { display: flex; flex-direction: column; gap: 8px; padding: 15px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border); } .split-summary__row { display: flex; justify-content: space-between; gap: 12px; font-size: .875rem; } .split-summary__row--total { border-top: 1px dashed var(--border-strong); padding-top: 9px; margin-top: 3px; font-weight: 700; font-size: 1.05rem; } .split-summary__label { color: var(--text-muted); } .split-summary__value { font-variant-numeric: tabular-nums; font-weight: 600; } /* Memória de cálculo */ .calc-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--border); font-size: .875rem; } .calc-line:last-child { border-bottom: 0; } .calc-line__label { color: var(--text-muted); } .calc-line__detail { font-size: .75rem; color: var(--text-subtle); } .calc-line__value { font-weight: 620; font-variant-numeric: tabular-nums; white-space: nowrap; } .calc-line--total { border-top: 2px solid var(--border-strong); border-bottom: 0; margin-top: 6px; padding-top: 12px; font-size: 1.05rem; font-weight: 700; } .calc-line--negative .calc-line__value { color: var(--success-text); } /* -------------------------------------------------------------------- 24. Linha do tempo -------------------------------------------------------------------- */ .timeline { position: relative; padding-left: 26px; } .timeline::before { content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: var(--border); } .timeline__item { position: relative; padding-bottom: 18px; } .timeline__item:last-child { padding-bottom: 0; } .timeline__dot { position: absolute; left: -26px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); border: 2px solid var(--tone, var(--border-strong)); display: grid; place-items: center; } .timeline__dot::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tone, var(--text-subtle)); } .timeline__item--success { --tone: var(--success); } .timeline__item--danger { --tone: var(--danger); } .timeline__item--warning { --tone: var(--warning); } .timeline__item--brand { --tone: var(--brand); } .timeline__title { font-size: .89rem; font-weight: 590; } .timeline__meta { font-size: .76rem; color: var(--text-subtle); } /* -------------------------------------------------------------------- 25. Abas -------------------------------------------------------------------- */ .tabs { display: flex; gap: 3px; border-bottom: 1px solid var(--border); margin-bottom: 18px; overflow-x: auto; } .tab { padding: 10px 15px; font-size: .88rem; font-weight: 555; color: var(--text-muted); border-bottom: 2px solid transparent; white-space: nowrap; transition: all var(--dur) var(--ease); display: inline-flex; align-items: center; gap: 7px; } .tab:hover { color: var(--text); text-decoration: none; } .tab.is-active { color: var(--brand-text); border-bottom-color: var(--brand); font-weight: 620; } .tab__count { padding: 0 6px; border-radius: var(--radius-full); background: var(--surface-3); font-size: .7rem; font-weight: 700; } .tab.is-active .tab__count { background: var(--brand-soft); color: var(--brand-text); } .tab-panel { display: none; } .tab-panel.is-active { display: block; animation: fade-in .22s var(--ease); } @keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } /* -------------------------------------------------------------------- 26. Cabeçalho de página -------------------------------------------------------------------- */ .page-header { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; } .page-header__title { font-size: 1.42rem; font-weight: 700; letter-spacing: -.03em; } .page-header__sub { color: var(--text-muted); font-size: .88rem; margin-top: 3px; } .page-header__actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; } .breadcrumb { display: flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--text-subtle); margin-bottom: 7px; flex-wrap: wrap; } .breadcrumb a { color: var(--text-muted); } .breadcrumb a:hover { color: var(--brand-text); } /* -------------------------------------------------------------------- 27. Lista de definições -------------------------------------------------------------------- */ .dl { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 9px 18px; font-size: .875rem; } .dl dt { color: var(--text-subtle); font-size: .8rem; } .dl dd { font-weight: 545; word-break: break-word; } .dl--stack { grid-template-columns: 1fr; gap: 12px; } .dl--stack dt { margin-bottom: 1px; } /* -------------------------------------------------------------------- 28. Gráfico de barras (CSS puro) -------------------------------------------------------------------- */ .chart { display: flex; align-items: flex-end; gap: 5px; height: 150px; padding: 10px 0; } .chart__col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; height: 100%; justify-content: flex-end; } .chart__bar { width: 100%; max-width: 42px; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, var(--brand), color-mix(in srgb, var(--brand) 62%, transparent)); min-height: 3px; transition: height 600ms var(--ease), filter var(--dur) var(--ease); position: relative; } .chart__col:hover .chart__bar { filter: brightness(1.18); } .chart__label { font-size: .66rem; color: var(--text-subtle); white-space: nowrap; } .chart__tooltip { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); padding: 4px 8px; border-radius: var(--radius-xs); background: var(--text); color: var(--surface); font-size: .68rem; font-weight: 640; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease); z-index: 2; } .chart__col:hover .chart__tooltip { opacity: 1; } .meter { display: flex; flex-direction: column; gap: 9px; } .meter__row { display: flex; align-items: center; gap: 10px; font-size: .82rem; } .meter__label { width: 132px; flex: none; color: var(--text-muted); } .meter__track { flex: 1; height: 8px; border-radius: var(--radius-full); background: var(--surface-3); overflow: hidden; } .meter__fill { height: 100%; border-radius: var(--radius-full); background: var(--tone, var(--brand)); transition: width 600ms var(--ease); } .meter__value { width: 106px; text-align: right; font-weight: 620; font-variant-numeric: tabular-nums; flex: none; } /* -------------------------------------------------------------------- 29. Recibo para impressão -------------------------------------------------------------------- */ .receipt { max-width: 720px; margin: 24px auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 34px; box-shadow: var(--shadow); } .receipt__header { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 20px; border-bottom: 2px solid var(--text); margin-bottom: 22px; flex-wrap: wrap; } .receipt__code { font-family: var(--font-mono); font-size: 1.1rem; font-weight: 700; } .receipt__total { display: flex; justify-content: space-between; align-items: baseline; padding: 15px 18px; margin: 20px 0; background: var(--surface-2); border-radius: var(--radius); border: 1px solid var(--border); } .receipt__total-value { font-size: 1.5rem; font-weight: 750; font-variant-numeric: tabular-nums; } .receipt__signature { margin-top: 46px; padding-top: 9px; border-top: 1px solid var(--text); text-align: center; font-size: .82rem; color: var(--text-muted); max-width: 300px; margin-inline: auto; } /* -------------------------------------------------------------------- 30. Diversos -------------------------------------------------------------------- */ .spinner { width: 15px; height: 15px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .62s linear infinite; display: inline-block; } @keyframes spin { to { transform: rotate(360deg); } } .skeleton { background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-hover) 50%, var(--surface-3) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: var(--radius-xs); } @keyframes shimmer { to { background-position: -200% 0; } } .tooltip { position: relative; } .tooltip::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); padding: 5px 9px; border-radius: var(--radius-xs); background: var(--text); color: var(--surface); font-size: .72rem; font-weight: 540; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease); z-index: 70; } .tooltip:hover::after { opacity: 1; } .stat-inline { display: inline-flex; align-items: baseline; gap: 5px; } .stat-inline__value { font-weight: 680; font-variant-numeric: tabular-nums; } .stat-inline__label { font-size: .76rem; color: var(--text-subtle); } hr.sep { border: 0; border-top: 1px solid var(--border); margin: 18px 0; } .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; } .max-h-400 { max-height: 400px; overflow-y: auto; } /* -------------------------------------------------------------------- 31. Responsividade -------------------------------------------------------------------- */ @media (max-width: 1280px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 1024px) { :root { --sidebar-w: 240px; } .grid--3 { grid-template-columns: repeat(2, 1fr); } .split-row { grid-template-columns: 1fr 1fr; } .split-row > *:nth-child(3) { grid-column: 1 / -1; } .auth { grid-template-columns: 1fr; } .auth__aside { display: none; } } @media (max-width: 860px) { .app { grid-template-columns: 1fr; } .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 280px; transform: translateX(-100%); transition: transform 260ms var(--ease); box-shadow: var(--shadow-xl); } .sidebar.is-open { transform: none; } .sidebar-backdrop { display: block; position: fixed; inset: 0; background: var(--overlay); z-index: 35; opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), visibility var(--dur); } .sidebar-backdrop.is-open { opacity: 1; visibility: visible; } .menu-toggle { display: grid; place-items: center; padding: 8px; border-radius: var(--radius-xs); } .menu-toggle:hover { background: var(--surface-hover); } .content { padding: 16px; } .topbar { padding: 0 14px; } .topbar__sub { display: none; } .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } .form-grid > [class^="col-"] { grid-column: 1 / -1; } .form-grid { grid-template-columns: 1fr; } .page-header__actions { margin-left: 0; width: 100%; } .page-header__actions .btn { flex: 1; } .day { min-height: 76px; padding: 4px; } .day__number { width: 21px; height: 21px; font-size: .74rem; } .day__total { display: none; } .event__label { display: none; } .event { padding: 2px 4px; justify-content: center; } .calendar__month { font-size: .98rem; min-width: auto; } .modal { max-width: 100%; max-height: calc(100vh - 24px); } .modal__footer { flex-direction: column-reverse; } .modal__footer .btn { width: 100%; } .toasts { top: auto; bottom: 14px; left: 14px; right: 14px; max-width: none; } .split-row { grid-template-columns: 1fr; } .split-row > * { grid-column: 1 / -1 !important; } .receipt { padding: 20px; margin: 12px; } .dl { grid-template-columns: 1fr; gap: 3px 0; } .dl dd { margin-bottom: 9px; } .pagination { justify-content: center; } .pagination__info { width: 100%; text-align: center; } /* Tabelas viram cartões */ .table--stack thead { display: none; } .table--stack tbody tr { display: block; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 9px; padding: 11px; background: var(--surface); } .table--stack tbody td { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border: 0; text-align: right; } .table--stack tbody td::before { content: attr(data-label); font-size: .74rem; font-weight: 640; text-transform: uppercase; letter-spacing: .05em; color: var(--text-subtle); text-align: left; flex: none; } .table--stack tbody td:empty { display: none; } .table--stack .td-actions { justify-content: flex-end; padding-top: 9px; border-top: 1px solid var(--border); margin-top: 5px; } .table--stack tfoot { display: none; } /* No modo cartão não há rolagem lateral: a coluna fixa só atrapalharia. */ .table:has(.td-actions) thead th:last-child, .table:has(.td-actions) tbody td:last-child { position: static; box-shadow: none; background: transparent; } .table-wrap .dropdown__menu { position: absolute; } } @media (max-width: 480px) { body { font-size: 14px; } .content { padding: 12px; } .card__body { padding: 14px; } .kpi { padding: 13px 14px; } .kpi__value { font-size: 1.3rem; } .gallery { grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); } .day-panel { width: 100vw; } .page-header__title { font-size: 1.22rem; } } /* -------------------------------------------------------------------- 32. Impressão -------------------------------------------------------------------- */ @media print { .sidebar, .topbar, .no-print, .toasts, .filters, .pagination, .page-header__actions, .btn, .day-panel, .sidebar-backdrop { display: none !important; } .app { grid-template-columns: 1fr; } .content { padding: 0; max-width: none; } body { background: #fff; color: #000; font-size: 11pt; } .card, .receipt { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; } .table th { background: #f3f3f3 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .table:has(.td-actions) thead th:last-child, .table:has(.td-actions) tbody td:last-child { position: static; box-shadow: none; } a { color: #000; text-decoration: none; } .badge { border: 1px solid #999; } @page { margin: 1.5cm; } } /* Acessibilidade: respeita quem pediu menos movimento */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }