/* ============================================================ Consultor · Design System v1.9 — BUNDLE Gerado por `python manage.py build_ds`. NÃO EDITE ÀQUI. Para editar: mexa nos módulos em ds/ e rode o comando. ============================================================ */ /* ===== _tokens.css ===== */ /* ============================================================ DS · Tokens Fonte única da verdade de cores, sombras e motion. Espelha base_style.css + adiciona novos tokens (v1.2). ============================================================ */ :root, html.light { /* Cores de marca */ --primary-blue: #596589; --primary-blue-hover: #4A5775; /* 10% escuro — substitui opacity-90 */ --primary-blue-tint: rgba(89, 101, 137, 0.10); /* icon-box, hover bg */ --primary-blue-soft: rgba(89, 101, 137, 0.20); /* selected, badge subtle */ --primary-black: #342028; --secondary-gray: #5C5D5F; /* escurecido p/ passar WCAG AA */ /* Cores semânticas (tokens — delegam para Tailwind semantic scale) */ --text-main: var(--primary-black); --text-muted: var(--secondary-gray); --bg-page: #F8FAFC; --surface: #FFFFFF; --surface-raised: #FFFFFF; /* = surface em light */ --border-ui: rgba(52, 32, 40, 0.12); --border-strong: rgba(52, 32, 40, 0.20); --title-color: #1e3a8a; /* Elevação (sombra tinted com primary-black, não preto puro) */ --shadow-elev-1: 0 1px 2px rgba(52, 32, 40, 0.04), 0 1px 3px rgba(52, 32, 40, 0.06); --shadow-elev-2: 0 4px 6px -1px rgba(52, 32, 40, 0.08), 0 2px 4px -2px rgba(52, 32, 40, 0.06); --shadow-elev-3: 0 20px 25px -5px rgba(52, 32, 40, 0.08), 0 8px 10px -6px rgba(52, 32, 40, 0.06); /* Motion — 3 durações, 2 curvas */ --motion-instant: 80ms cubic-bezier(0.4, 0, 0.2, 1); --motion-smooth: 200ms cubic-bezier(0.4, 0, 0.2, 1); --motion-deliberate: 400ms cubic-bezier(0.16, 1, 0.3, 1); } html.dark { --primary-blue: #7B88B0; /* clareado p/ AA em dark */ --primary-blue-hover: #8A98C0; --primary-blue-tint: rgba(123, 136, 176, 0.14); --primary-blue-soft: rgba(123, 136, 176, 0.24); --primary-black: #F4F4F5; --text-main: var(--primary-black); --text-muted: #A1A1AA; --bg-page: #09090B; --surface: #18181B; --surface-raised: #23232A; /* mais claro que card em dark */ --border-ui: rgba(255, 255, 255, 0.12); --border-strong: rgba(255, 255, 255, 0.20); --title-color: #FFFFFF; /* Em dark, elevação vem da borda + surface-raised, não de sombra pesada */ --shadow-elev-1: none; --shadow-elev-2: 0 4px 6px -1px rgba(0, 0, 0, 0.5); --shadow-elev-3: 0 20px 25px -5px rgba(0, 0, 0, 0.7), 0 8px 10px -6px rgba(0, 0, 0, 0.5); } /* ===== _base.css ===== */ /* ============================================================ DS · Base Reset leve, focus-ring utilitário, keyframes e a11y global. Não contém componentes — só fundação comportamental. ============================================================ */ /* -------- Fonte única do site (Inter) + números tabulares -------- v1.4: obrigatoriedade de ter uma fonte só no site inteiro. Inter + tabular-nums garante que números alinham por coluna sem precisar de monospace. html.light e html.dark herdam. O do base_site já declara font-family; reforçamos aqui para templates sem extends (modais). */ html { font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: inherit; } code, kbd, pre, samp { font-family: inherit; /* v1.4: também usa Inter para consistência */ font-variant-numeric: tabular-nums; } /* -------- Keyframes canônicos -------- */ @keyframes ds-fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } @keyframes ds-slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } @keyframes ds-scaleIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } } @keyframes ds-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } /* -------- A11Y: prefers-reduced-motion (WCAG 2.3.3) -------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* -------- Focus-ring utilitário (só keyboard, preserva mouse) -------- Aplicar a qualquer elemento interativo: Já embutido em .btn, .input, .icon-btn. */ .focus-ring:focus-visible { outline: none; border-color: var(--primary-blue); box-shadow: 0 0 0 4px var(--primary-blue-tint); } /* ===== utilities.css ===== */ /* ============================================================ DS · Utilities Atalhos de classe para tokens usados diretamente em templates. Equivale ao que seria `@apply` — escritos como CSS puro para não exigir toolchain (Tailwind CDN no projeto). ============================================================ */ /* -------- Elevação -------- */ .shadow-elev-1 { box-shadow: var(--shadow-elev-1); } .shadow-elev-2 { box-shadow: var(--shadow-elev-2); } .shadow-elev-3 { box-shadow: var(--shadow-elev-3); } /* -------- Animações -------- */ .animate-fadeIn { animation: ds-fadeIn var(--motion-deliberate) both; } .animate-slideDown { animation: ds-slideDown var(--motion-smooth) both; } .animate-scaleIn { animation: ds-scaleIn var(--motion-deliberate) both; } /* -------- Superfícies semânticas (legibilidade em templates) -------- */ .surface { background-color: var(--surface); } .surface-raised { background-color: var(--surface-raised); } .bg-page { background-color: var(--bg-page); } /* -------- Texto semântico -------- */ .text-main { color: var(--text-main); } .text-muted { color: var(--text-muted); } .text-title { color: var(--title-color); } .text-brand { color: var(--primary-blue); } /* -------- Borda -------- */ .border-ui { border: 1px solid var(--border-ui); } .border-strong { border: 1px solid var(--border-strong); } /* ===== action-bar.css ===== */ /* ============================================================ DS · Action bar Barra de ações primárias de um formulário longo. Mobile-first: gruda no rodapé da viewport para a CTA ficar sempre visível enquanto o usuário rola um form alto. Em ≥1024px volta a ser estática (fluxo normal do card). Uso (dentro de um .card / .card-flush):
Variante quando a barra mora dentro de um corpo `px-5 py-4` e deve colar nas bordas do card (sem gap visual):
…
Notas: - Cobre safe-area-inset-bottom (iOS com notch / barra de gestos). - Sticky é relativo à viewport — funciona dentro do .page-wrap. - O utilitário `.hidden` (display:none) continua valendo: como este arquivo é carregado depois do Tailwind no bundle, há regra explícita restaurando `display:none` quando ambos coexistem. ============================================================ */ .action-bar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; background-color: var(--surface); border-top: 1px solid var(--border-ui); padding: 0.75rem 1.25rem; padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px)); /* Sombra apontando para cima — só no mobile sticky */ box-shadow: 0 -2px 6px rgba(15, 23, 42, 0.06); } /* Preserva o utilitário `.hidden` (Tailwind) sobre action-bar. */ .action-bar.hidden, .action-bar[hidden] { display: none; } /* Variante "in-card": cola nas bordas de um corpo `px-5 py-4`. */ .action-bar-in-card { margin-left: -1.25rem; margin-right: -1.25rem; margin-bottom: -1rem; } /* Desktop: vira ações normais no fluxo do form, sem sticky. */ @media (min-width: 1024px) { .action-bar { position: static; z-index: auto; background-color: transparent; border-top: 0; padding: 0; padding-bottom: 0; box-shadow: none; } .action-bar-in-card { margin: 0; } } /* ===== alert.css ===== */ /* ============================================================ DS · Alert (v1.9) Aviso contextual in-line, não-efêmero, dentro de cards. Diferente de Toast (notificação efêmera) e Empty (estado vazio). Uso — completo (ícone + título + descrição):

Aviso Prévio

Início: 12/03/2026 — 30 dias

Uso — compact (uma linha, ícone + texto):

Acesso Liberado

Variantes de cor: .alert-success — verde, confirmação positiva .alert-danger — vermelho, erro ou bloqueio .alert-warning — amarelo, atenção .alert-info — azul, neutro informacional .alert-neutral — cinza, sem ênfase Modificador de layout: .alert-compact — uma linha (sem descrição, padding menor) ============================================================ */ .alert { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem 1rem; border: 1px solid transparent; border-radius: 0.75rem; } .alert-icon { font-size: 1.25rem; line-height: 1; flex-shrink: 0; margin-top: 0.125rem; } .alert-body { flex: 1; min-width: 0; } .alert-title { font-size: 0.8125rem; font-weight: 700; line-height: 1.3; margin: 0; } .alert-desc { font-size: 0.75rem; line-height: 1.4; margin: 0.125rem 0 0; opacity: 0.85; } /* -------- Compact (uma linha) -------- */ .alert-compact { align-items: center; padding: 0.5rem 0.75rem; border-radius: 0.5rem; gap: 0.5rem; } .alert-compact .alert-icon { font-size: 1rem; margin-top: 0; } .alert-compact .alert-title { font-size: 0.75rem; font-weight: 600; } /* -------- Variante: success -------- */ .alert-success { background-color: rgba(34, 197, 94, 0.08); /* green-500/8 */ border-color: rgba(34, 197, 94, 0.25); color: #15803D; /* green-700 */ } html.dark .alert-success { background-color: rgba(34, 197, 94, 0.10); border-color: rgba(34, 197, 94, 0.30); color: #4ADE80; /* green-400 */ } /* -------- Variante: danger -------- */ .alert-danger { background-color: rgba(239, 68, 68, 0.08); /* red-500/8 */ border-color: rgba(239, 68, 68, 0.25); color: #B91C1C; /* red-700 */ } html.dark .alert-danger { background-color: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.30); color: #F87171; /* red-400 */ } /* -------- Variante: warning -------- */ .alert-warning { background-color: rgba(234, 179, 8, 0.10); /* yellow-500/10 */ border-color: rgba(234, 179, 8, 0.30); color: #A16207; /* yellow-700 */ } html.dark .alert-warning { background-color: rgba(234, 179, 8, 0.12); border-color: rgba(234, 179, 8, 0.35); color: #FCD34D; /* amber-300 */ } /* -------- Variante: info -------- */ .alert-info { background-color: rgba(59, 130, 246, 0.08); /* blue-500/8 */ border-color: rgba(59, 130, 246, 0.25); color: #1D4ED8; /* blue-700 */ } html.dark .alert-info { background-color: rgba(59, 130, 246, 0.12); border-color: rgba(59, 130, 246, 0.30); color: #60A5FA; /* blue-400 */ } /* -------- Variante: neutral -------- */ .alert-neutral { background-color: var(--bg-page); border-color: var(--border-ui); color: var(--text-main); } /* ===== avatar.css ===== */ /* ============================================================ DS · Avatar Escala: xs 24 · sm 32 · md 40 · lg 48 · xl 64 Fallback: iniciais sobre bg tint. Com , usar iniciais em onerror. Uso:
AF
Ana Fernandes
============================================================ */ .avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; background-color: var(--primary-blue-tint); color: var(--primary-blue); font-weight: 700; line-height: 1; flex-shrink: 0; overflow: hidden; user-select: none; } .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } /* -------- Escala -------- */ .avatar-xs { width: 24px; height: 24px; font-size: 0.625rem; } /* 10px */ .avatar-sm { width: 32px; height: 32px; font-size: 0.6875rem; } /* 11px */ .avatar-md { width: 40px; height: 40px; font-size: 0.875rem; } /* 14px — default */ .avatar-lg { width: 48px; height: 48px; font-size: 1rem; } .avatar-xl { width: 64px; height: 64px; font-size: 1.25rem; } /* ===== badge.css ===== */ /* ============================================================ DS · Badge & Chip 3 variantes: pill (solid), dot (refinado), chip (quadrado). 5 cores semânticas: success · warning · danger · info · neutral. Uso: Ativo Ativo 12 arquivos ============================================================ */ /* -------- Pill (solid) — destaque em tabela -------- */ .badge { display: inline-flex; align-items: center; padding: 0.25rem 0.625rem; /* py-1 px-2.5 */ border-radius: 9999px; font-size: 0.75rem; font-weight: 600; line-height: 1; white-space: nowrap; } .badge-success { background-color: #DCFCE7; color: #15803D; } /* green-100 / 700 */ .badge-warning { background-color: #FEF9C3; color: #A16207; } /* yellow-100 / 700 */ .badge-danger { background-color: #FEE2E2; color: #B91C1C; } /* red-100 / 700 */ .badge-info { background-color: #DBEAFE; color: #1D4ED8; } /* blue-100 / 700 */ .badge-neutral { background-color: #F3F4F6; color: #4B5563; } /* gray-100 / 600 */ /* -------- Dot (refinado) — tabelas densas -------- Uso: Ativo */ .badge-dot { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; font-weight: 500; color: var(--text-main); white-space: nowrap; } .badge-dot-circle { width: 6px; height: 6px; border-radius: 9999px; flex-shrink: 0; } .badge-dot-success { background-color: #22C55E; } /* green-500 */ .badge-dot-warning { background-color: #EAB308; } /* yellow-500 */ .badge-dot-danger { background-color: #EF4444; } /* red-500 */ .badge-dot-info { background-color: #3B82F6; } /* blue-500 */ .badge-dot-neutral { background-color: #9CA3AF; } /* gray-400 */ /* -------- Chip (quadrado) — tag/contador dentro de card -------- Uso: 12 arquivos */ .chip { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.5rem; /* py-0.5 px-2 */ background-color: var(--bg-page); border: 1px solid var(--border-ui); border-radius: 0.375rem; /* rounded-md */ font-size: 0.75rem; font-weight: 500; color: var(--text-muted); line-height: 1.4; } /* Chip em tint (destaque) */ .chip-brand { background-color: var(--primary-blue-tint); border-color: transparent; color: var(--primary-blue); font-weight: 600; } /* Chip de alerta — vínculo salvo cujo item não existe mais na origem (sync atrasado, pasta removida). Mesmas cores de .badge-warning. */ .chip-warn { background-color: #FEF9C3; /* yellow-100 */ border-color: #FDE68A; /* amber-200 */ color: #A16207; /* yellow-700 */ } html.dark .chip-warn { background-color: rgba(161, 98, 7, 0.18); border-color: rgba(253, 230, 138, 0.30); color: #FCD34D; /* amber-300 */ } /* ===== breadcrumb.css ===== */ /* ============================================================ DS · Breadcrumb (v1.3) Navegação hierárquica para fluxos profundos (BI > Dashboard > Relatório > Conta). Uso: ============================================================ */ .breadcrumb { font-size: 0.75rem; color: var(--text-muted); line-height: 1.4; } .breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; list-style: none; margin: 0; padding: 0; } .breadcrumb li { display: inline-flex; align-items: center; gap: 0.25rem; } .breadcrumb li + li::before { content: "/"; color: var(--border-strong); margin: 0 0.25rem; font-weight: 400; } .breadcrumb a { color: var(--text-muted); text-decoration: none; transition: color var(--motion-instant); border-radius: 0.25rem; } .breadcrumb a:hover { color: var(--primary-blue); } .breadcrumb a:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--primary-blue-tint); } .breadcrumb [aria-current="page"] { color: var(--text-main); font-weight: 600; } /* ===== btn.css ===== */ /* ============================================================ DS · Button — escala unificada (v1.2) 2 tamanhos (sm 32px · md 38px default) × 5 variantes + link. Uso: Recuperar senha Notas: - Todos os btn suportam O .ph-spinner já gira pelo Phosphor. */ .btn-loading { opacity: 0.6; cursor: not-allowed; pointer-events: none; } .btn-loading .ph-spinner { animation: ds-spin 0.8s linear infinite; } @keyframes ds-spin { to { transform: rotate(360deg); } } /* ===== card.css ===== */ /* ============================================================ DS · Card Wrapper canônico para blocos de conteúdo. Uso:
... conteúdo direto (p-5) ...

Título

...
============================================================ */ .card { background-color: var(--surface); border: 1px solid var(--border-ui); border-radius: 0.75rem; /* rounded-xl */ padding: 1.25rem; /* p-5 */ box-shadow: var(--shadow-elev-1); } /* -------- Split: header + body (sem padding no wrapper) -------- */ .card-split { padding: 0; overflow: hidden; /* raio respeita children full-width */ } .card-header { padding: 1rem 1.25rem; /* py-4 px-5 */ border-bottom: 1px solid var(--border-ui); display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .card-body { padding: 1.25rem; } .card-title { font-size: 0.875rem; font-weight: 600; color: var(--text-main); margin: 0; } /* -------- Sem padding (quando o card contém tabela full-width) -------- */ .card-flush { padding: 0; overflow: hidden; } /* ===== combobox.css ===== */ /* ============================================================ DS · Combobox Select digitavel: input visivel filtra por digitacao, dropdown ancorado ao body (n�o cortado por overflow:hidden de cards). Sucessor do `_filter_picker.html` antigo — agora componente DS. Markup canonico:
Variantes: .combobox-sm — input usa .input-sm (32px) ao inves de 38px. ============================================================ */ .combobox { position: relative; width: 100%; } .combobox-search { width: 100%; /* Herda tudo de .input — o JS posiciona o dropdown abaixo. */ } /* --------- Dropdown ancorado ao input (absolute, dentro do root) --------- Padrao: absolute logo abaixo do input. Funciona dentro de modais e cards normais. Para casos em que o card ancestral tem overflow:hidden cortando o dropdown, adicione `data-combobox-popover-body` no .combobox root — o JS move o pop para o com z-index alto. */ .combobox-pop { position: absolute; top: calc(100% + 0.25rem); left: 0; right: 0; z-index: 30; background-color: var(--surface); border: 1px solid var(--border-ui); border-radius: 0.75rem; /* rounded-xl */ box-shadow: var(--shadow-elev-3); max-height: 18rem; overflow-y: auto; min-width: 12rem; } /* Quando o JS move para o (data-combobox-popover-body), o pop vira position:fixed para usar o viewport como referencia. O JS seta top/left/width inline via getBoundingClientRect. */ .combobox-pop[data-popover-body="1"] { position: fixed; z-index: 9999; top: auto; left: auto; right: auto; } .combobox-pop.hidden { display: none; } .combobox-options { display: flex !important; flex-direction: column !important; width: 100%; } /* --------- Items --------- `!important` em display/width porque o markup usa ← ISO Ancoragem do popover segue o mesmo padrão do combobox: absolute dentro do root; se um ancestral tiver overflow:hidden, o JS move para o e marca data-popover-body="1" (vira fixed). ============================================================ */ .datebr { position: relative; display: block; width: 100%; } /* O texto herda .input (altura, borda, foco). Só reserva espaço à direita para o botão do calendário. */ .datebr-text { padding-right: 2.25rem; } .datebr-sm .datebr-text { padding-right: 2rem; } /* Estado inválido enquanto o usuário digita uma data impossível (32/13/2026). Não usa :invalid porque o campo é type=text. */ .datebr-text[data-datebr-invalid="1"] { border-color: #EF4444; /* red-500 — mesmo erro do form.css */ } .datebr-text[data-datebr-invalid="1"]:focus { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.12); } html.dark .datebr-text[data-datebr-invalid="1"] { border-color: #F87171; /* red-400 */ } /* -------- Botão do calendário -------- */ .datebr-toggle { position: absolute; top: 1px; right: 1px; bottom: 1px; width: 2.125rem; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; border-radius: 0 0.5rem 0.5rem 0; color: var(--text-muted); cursor: pointer; font-size: 1rem; transition: color var(--motion-instant), background-color var(--motion-instant); } .datebr-toggle:hover { color: var(--text-main); background-color: var(--primary-blue-tint); } .datebr-toggle:focus-visible { outline: none; color: var(--primary-blue); box-shadow: 0 0 0 2px var(--primary-blue); } .datebr-toggle:disabled { opacity: 0.5; cursor: not-allowed; } .datebr-toggle:disabled:hover { color: var(--text-muted); background-color: transparent; } /* -------- Popover (mesmo padrão do .combobox-pop) -------- */ .datebr-pop { position: absolute; top: calc(100% + 0.25rem); left: 0; z-index: 30; width: 17.5rem; padding: 0.625rem; background-color: var(--surface); border: 1px solid var(--border-ui); border-radius: 0.75rem; box-shadow: var(--shadow-elev-3); } .datebr-pop[data-popover-body="1"] { position: fixed; z-index: 9999; } /* Abre para cima quando não há espaço abaixo (JS decide). */ .datebr-pop[data-datebr-up="1"] { top: auto; bottom: calc(100% + 0.25rem); } .datebr-pop.hidden { display: none; } /* -------- Cabeçalho: ‹ Agosto 2026 › -------- */ .datebr-head { display: flex; align-items: center; gap: 0.25rem; margin-bottom: 0.5rem; } .datebr-nav { flex: 0 0 auto; width: 1.75rem; height: 1.75rem; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 0.375rem; background: transparent; color: var(--text-muted); cursor: pointer; transition: background-color var(--motion-instant), color var(--motion-instant); } .datebr-nav:hover { background-color: var(--bg-page); color: var(--text-main); } .datebr-nav:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--primary-blue); } /* Título clicável — abre a grade de meses e depois a de anos. Sem isso, escolher uma data de nascimento exigiria dezenas de cliques. */ .datebr-title { flex: 1 1 auto; height: 1.75rem; padding: 0 0.5rem; border: 0; border-radius: 0.375rem; background: transparent; color: var(--text-main); font-family: inherit; font-size: 0.8125rem; font-weight: 600; cursor: pointer; transition: background-color var(--motion-instant); } .datebr-title:hover { background-color: var(--bg-page); } .datebr-title:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--primary-blue); } /* -------- Cabeçalho dos dias da semana -------- */ .datebr-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.125rem; margin-bottom: 0.125rem; } .datebr-dow span { text-align: center; font-size: 0.6875rem; font-weight: 600; color: var(--text-muted); padding: 0.25rem 0; } /* -------- Grades -------- */ .datebr-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.125rem; } /* Meses e anos usam 3 ou 4 colunas em vez de 7. */ .datebr-grid[data-datebr-view="months"] { grid-template-columns: repeat(3, 1fr); gap: 0.25rem; } .datebr-grid[data-datebr-view="years"] { grid-template-columns: repeat(4, 1fr); gap: 0.25rem; } .datebr-cell { display: flex; align-items: center; justify-content: center; height: 2rem; border: 0; border-radius: 0.375rem; background: transparent; color: var(--text-main); font-family: inherit; font-size: 0.8125rem; cursor: pointer; transition: background-color var(--motion-instant), color var(--motion-instant); } .datebr-grid[data-datebr-view="months"] .datebr-cell, .datebr-grid[data-datebr-view="years"] .datebr-cell { height: 2.25rem; } .datebr-cell:hover:not(:disabled) { background-color: var(--primary-blue-tint); } .datebr-cell:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--primary-blue); } /* Dia de outro mês — visível mas discreto (contexto da semana). */ .datebr-cell[data-datebr-outside="1"] { color: var(--text-muted); opacity: 0.55; } /* Fora de min/max */ .datebr-cell:disabled { color: var(--text-muted); opacity: 0.3; cursor: not-allowed; } /* Hoje — anel, sem preencher (para não competir com o selecionado). */ .datebr-cell[data-datebr-today="1"] { box-shadow: inset 0 0 0 1px var(--primary-blue); font-weight: 600; } /* Selecionado */ .datebr-cell[aria-selected="true"] { background-color: var(--primary-blue); color: #fff; font-weight: 600; } .datebr-cell[aria-selected="true"]:hover:not(:disabled) { background-color: var(--primary-blue-hover); } /* -------- Hora (type="datetime-local") -------- */ .datebr-time { display: flex; align-items: center; gap: 0.375rem; margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--border-ui); } .datebr-time label { font-size: 0.75rem; color: var(--text-muted); } .datebr-time input { width: 3rem; height: 1.875rem; padding: 0 0.25rem; text-align: center; font-family: inherit; font-size: 0.8125rem; color: var(--text-main); background-color: var(--bg-page); border: 1px solid var(--border-ui); border-radius: 0.375rem; } .datebr-time input:focus { outline: none; border-color: var(--primary-blue); } /* -------- Rodapé: Hoje / Limpar -------- */ .datebr-foot { display: flex; gap: 0.375rem; margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--border-ui); } .datebr-foot-btn { flex: 1 1 0; height: 1.875rem; border: 1px solid var(--border-ui); border-radius: 0.375rem; background-color: transparent; color: var(--text-main); font-family: inherit; font-size: 0.75rem; cursor: pointer; transition: background-color var(--motion-instant); } .datebr-foot-btn:hover { background-color: var(--bg-page); } .datebr-foot-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--primary-blue); } /* Impressão: o campo vira texto puro, sem botão nem popover. */ @media print { .datebr-toggle, .datebr-pop { display: none !important; } } /* ===== dropzone.css ===== */ /* ============================================================ DS · Dropzone (v1.3) Upload de arquivo com drag & drop. Uso: Estados extras (aplicar via JS ao arrastar/errar): .dropzone.dropzone-active — arrastando sobre (dashed virar solid blue) .dropzone.dropzone-error — arquivo inválido ============================================================ */ .dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; padding: 2rem 1.25rem; border: 2px dashed var(--border-strong); border-radius: 0.75rem; background: var(--bg-page); color: var(--text-muted); cursor: pointer; text-align: center; transition: border-color var(--motion-smooth), background var(--motion-smooth), color var(--motion-smooth); } .dropzone:hover { border-color: var(--primary-blue); color: var(--primary-blue); } .dropzone-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .dropzone-icon { font-size: 2.25rem; opacity: 0.7; margin-bottom: 0.25rem; } .dropzone-primary { font-size: 0.875rem; font-weight: 600; color: var(--text-main); margin: 0; } .dropzone-secondary { font-size: 0.75rem; color: var(--text-muted); margin: 0; } /* Ativo (arquivo sendo arrastado sobre) */ .dropzone-active { border-style: solid; border-color: var(--primary-blue); background: var(--primary-blue-tint); color: var(--primary-blue); } /* Erro (arquivo inválido, tamanho excedido) */ .dropzone-error { border-color: #F87171; /* red-400 */ background: #FEF2F2; /* red-50 */ color: #B91C1C; /* red-700 */ } html.dark .dropzone-error { background: rgba(239, 68, 68, 0.1); } /* ===== dual-list.css ===== */ /* dual-list.css — picker de duas listas (transferência por click) * * Classes: * .dual-list — container grid (1col mobile / 2col lg) * .dual-list-col — coluna (header + search + items + empty) * .dual-list-col-included — modifier visual da coluna direita (opcional) * .dual-list-col-header — barra de título da coluna * .dual-list-col-title — texto "Disponíveis" / "Inclusos" * .dual-list-col-count — pill com contagem * .dual-list-search — wrapper input com ícone * .dual-list-items —