:root { --loop-primary: #481775; --loop-secondary: #6f35a5; --loop-accent: #ffbe00; --ink: #18131f; --muted: #706978; --line: #e4ddea; --soft: #f7f4fa; --surface: #ffffff; --success: #087443; --warning: #9a6700; --danger: #b42318; --shadow: 0 20px 60px rgba(47, 23, 72, 0.14); --radius: 8px; } * { box-sizing: border-box; } /* O sprite de ícones ( no topo do , só usado via em outros elementos) nunca tinha uma regra que o escondesse — sem largura/altura explícitas, o navegador renderiza esse SVG no tamanho intrínseco dele, criando uma faixa em branco no topo de toda página (login e workspace). position:absolute + width/height:0 tira do fluxo e do layout sem usar display:none, que em alguns navegadores quebra a referência a um dentro de um SVG "desligado". */ .sprite-sheet { position: absolute; width: 0; height: 0; overflow: hidden; } /* Baseline pra qualquer em qualquer lugar do app: os do sprite nao tem fill/stroke proprios (dependem 100% de CSS), e antes so alguns wrappers especificos (.icon svg, .public-info-icon svg etc.) declaravam isso. Icone fora desses wrappers (ex.: #refreshButton, #toggleMoreFiltersButton) caia no fill solido padrao do SVG e, como o trace e um arco aberto, o navegador fechava a forma e preenchia — resultado era um borrao em vez do icone. Especificidade de classe unica e menor que a dos wrappers (".classe elemento"), entao isso so preenche a lacuna sem mudar nenhum icone que ja funcionava. */ .app-icon, .loop-icon { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } html { min-height: 100%; } body { margin: 0; min-height: 100vh; background: #f4f1f7; color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: 0; } .skip-link { position: fixed; top: 12px; left: 12px; z-index: 100; padding: 11px 15px; border-radius: 10px; background: var(--loop-primary); color: #ffffff; font-weight: 800; text-decoration: none; box-shadow: 0 10px 28px rgba(42, 20, 60, 0.24); transform: translateY(calc(-100% - 24px)); transition: transform 160ms ease; } .skip-link:focus { outline: 3px solid var(--loop-accent); outline-offset: 3px; transform: translateY(0); } button, input, select, textarea { font: inherit; } button { cursor: pointer; } h1, h2, h3, p { margin-top: 0; } h1, h2, h3 { letter-spacing: 0; } h1 { margin-bottom: 10px; font-size: clamp(30px, 4vw, 54px); line-height: 1.02; } h2 { margin-bottom: 8px; font-size: 22px; } p { color: var(--muted); line-height: 1.55; } label { display: grid; gap: 8px; color: #4c4455; font-size: 13px; font-weight: 700; } input, select, textarea { width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; background: #ffffff; color: var(--ink); outline: none; transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease; } textarea { resize: vertical; } input:focus, select:focus, textarea:focus { border-color: var(--loop-secondary); box-shadow: 0 0 0 4px rgba(111, 53, 165, 0.12); } .hidden { display: none !important; } .muted { color: var(--muted); } .muted.success { color: var(--success); font-weight: 700; } .eyebrow { margin-bottom: 8px; color: var(--loop-secondary); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .app { min-height: 100vh; min-height: 100dvh; } .button, .icon-button, .nav-item { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: var(--radius); padding: 0 16px; font-weight: 800; text-decoration: none; transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, border-color 160ms ease; } .button:hover, .icon-button:hover, .nav-item:hover { transform: translateY(-1px); } .button:focus-visible, .icon-button:focus-visible, .nav-item:focus-visible, .nav-subitem:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(111, 53, 165, 0.22); } .button:disabled { cursor: wait; opacity: 0.68; transform: none; box-shadow: none; } /* Estado de "operacao em andamento" (withBusyButton em app.js) — reutilizado por qualquer botao de gravar/enviar/processar, um unico padrao em vez de cada tela inventar o seu. */ .button.is-busy { position: relative; padding-left: 38px; } .button.is-busy::before { position: absolute; left: 14px; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: #ffffff; border-radius: 50%; content: ""; animation: spin 700ms linear infinite; } .button-secondary.is-busy::before, .button-ghost.is-busy::before, .button-light.is-busy::before { border-color: rgba(72, 23, 117, 0.25); border-top-color: var(--loop-primary); } .button-primary { background: linear-gradient(135deg, var(--loop-primary), var(--loop-secondary)); color: #ffffff; box-shadow: 0 14px 28px rgba(72, 23, 117, 0.28); } .button-primary:hover { background: linear-gradient(135deg, var(--loop-secondary), var(--loop-primary)); box-shadow: 0 18px 34px rgba(72, 23, 117, 0.34); } .button-secondary { border-color: rgba(72, 23, 117, 0.2); background: #ffffff; color: var(--loop-primary); } .button-secondary:hover { border-color: var(--loop-secondary); box-shadow: 0 12px 24px rgba(72, 23, 117, 0.1); } .button-ghost { border-color: var(--line); background: transparent; color: var(--muted); } /* Indica que o e-mail dessa etapa ja saiu (envio automatico na criacao, ou reenvio manual) — cor e icone diferentes do botao de acao primaria "Enviar", pra nao parecer que ainda falta enviar algo. Continua clicavel: dispara reenvio pra quem esta pendente, nao o envio original. */ .button-mail-sent { border-color: rgba(8, 116, 67, 0.28); background: #eafbf3; color: var(--success); } .button-mail-sent:hover { background: #dff7ea; } .button-mail-sent #sendDocumentButtonIcon { color: var(--success); } .button-light { background: #ffffff; color: var(--loop-primary); } .icon-button { width: 44px; padding: 0; border-color: var(--line); background: #ffffff; color: var(--loop-primary); } .login-screen { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(360px, 0.8fr); min-height: 100vh; padding: 20px; gap: 20px; } .login-visual { position: relative; display: flex; min-height: calc(100vh - 40px); flex-direction: column; justify-content: space-between; overflow: hidden; border-radius: var(--radius); padding: 34px; background: linear-gradient(135deg, rgba(72, 23, 117, 0.98), rgba(111, 53, 165, 0.92)), radial-gradient(circle at 80% 20%, rgba(255, 190, 0, 0.4), transparent 32%); color: #ffffff; box-shadow: var(--shadow); } .login-visual::after { position: absolute; right: -120px; bottom: -120px; width: 360px; height: 360px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 50%; content: ""; } .login-visual .eyebrow, .login-visual p, .login-visual span { color: rgba(255, 255, 255, 0.78); } .login-copy { position: relative; max-width: 720px; z-index: 1; } .login-copy p:last-child { max-width: 620px; font-size: 18px; } .brand-row { display: flex; align-items: center; gap: 12px; } .brand-row strong, .brand-row span { display: block; } .brand-row span { color: var(--muted); font-size: 13px; } .brand-mark { display: grid; width: 44px; height: 44px; place-items: center; border-radius: var(--radius); background: var(--loop-primary); color: #ffffff; font-weight: 900; } .login-visual .brand-mark { background: rgba(255, 255, 255, 0.16); color: #ffffff; } .brand-mark-logo { padding: 0; overflow: hidden; background: transparent; } .brand-mark-logo img { width: 100%; height: 100%; object-fit: contain; } .compact .brand-mark { width: 38px; height: 38px; } .signal-grid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; z-index: 1; } .signal-grid div { min-height: 96px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--radius); padding: 16px; background: rgba(255, 255, 255, 0.1); } .signal-grid strong, .signal-grid span { display: block; } .signal-grid strong { margin-bottom: 8px; font-size: 20px; } .login-card { align-self: center; display: grid; gap: 18px; border: 1px solid rgba(72, 23, 117, 0.08); border-radius: var(--radius); padding: 32px; background: rgba(255, 255, 255, 0.9); box-shadow: var(--shadow); } .workspace { display: grid; grid-template-columns: 280px minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; } .sidebar { position: sticky; top: 0; display: flex; height: 100vh; height: 100dvh; flex-direction: column; gap: 24px; border-right: 1px solid var(--line); padding: 24px 18px; background: #ffffff; } .nav { display: grid; gap: 8px; } .nav-group { display: grid; gap: 4px; } /* Fechado por padrao — so abre com uma animacao leve ao clicar no item pai (.nav-group.open, alternado em toggleNavGroup em app.js). max-height fixo (bem acima do necessario) em vez de height:auto porque transition nao anima "auto" nativamente. */ .nav-subnav { display: flex; flex-direction: column; gap: 2px; padding-left: 40px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height 240ms ease, opacity 180ms ease; } .nav-group.open .nav-subnav { max-height: 320px; opacity: 1; } .nav-subitem { display: flex; align-items: center; min-height: 34px; padding: 0 10px; border: none; border-radius: 8px; background: transparent; color: var(--muted); font-size: 12.5px; font-weight: 700; text-align: left; cursor: pointer; transition: background 160ms ease, color 160ms ease; } .nav-subitem:hover { background: #f1e9f8; color: var(--loop-primary); } .nav-subitem.active { background: var(--loop-primary); color: #ffffff; } .nav-item { justify-content: flex-start; width: 100%; background: transparent; color: #43394c; } .nav-item.active, .nav-item:hover { background: #f1e9f8; color: var(--loop-primary); } .icon { display: grid; width: 24px; height: 24px; place-items: center; color: var(--loop-secondary); } .session-card { display: grid; gap: 8px; margin-top: auto; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; background: #fbf9fd; } .session-card span, .session-card small { color: var(--muted); font-size: 12px; } .session-card strong { overflow-wrap: anywhere; } .main { min-width: 0; padding: 28px; } .topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; } .topbar h1 { margin-bottom: 6px; font-size: 34px; } .topbar-actions, .button-row, .wizard-actions, .action-grid { display: flex; flex-wrap: wrap; gap: 10px; } .view { animation: rise 240ms ease both; } @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .panel, .summary-card { border: 1px solid rgba(72, 23, 117, 0.08); border-radius: var(--radius); background: #ffffff; box-shadow: 0 14px 36px rgba(50, 31, 68, 0.08); } .panel { padding: 20px; } .panel-header, .wizard-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; } .panel-header p, .wizard-header p { margin-bottom: 0; } /* Icones de acao secundaria (atualizar/duplicar/salvar como modelo) ao lado do badge de status — tira esses 3 botoes do meio da fileira de acoes principais (.action-grid), que ficava com botoes demais alinhados juntos. So icone + tooltip (title/aria-label), sem rotulo de texto. */ .panel-header-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .panel-header-actions .icon-button { width: 34px; min-height: 34px; } .signer-item-summary .icon-button { width: 40px; min-height: 40px; } /* Acordeao das secoes de Configuracoes (initSettingsAccordion em app.js envolve o conteudo de cada painel num .panel-body gerado em runtime, so o cabecalho fica sempre visivel — inclusive badges de aviso, como o de SMTP nao configurado). Ao entrar na tela, so "Identidade da empresa" comeca aberta; SMTP comeca aberta tambem se ainda nao estiver configurada. */ #settingsView .panel-header-collapsible { cursor: pointer; margin: -6px -8px 16px; padding: 6px 8px; border-radius: 8px; transition: background 160ms ease; } #settingsView .panel.panel-collapsed .panel-header-collapsible { margin-bottom: -6px; } #settingsView .panel-header-collapsible:hover { background: #faf7fd; } #settingsView .panel-toggle { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--loop-primary); transition: transform 200ms ease, background 160ms ease; } #settingsView .panel-toggle svg { width: 16px; height: 16px; } #settingsView .panel.panel-collapsed .panel-toggle { transform: rotate(-90deg); } #settingsView .panel.panel-collapsed .panel-body { display: none; } .summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; } .summary-card { display: grid; gap: 6px; min-height: 136px; padding: 18px; } .summary-card span, .summary-card small { color: var(--muted); } .summary-card strong { font-size: 36px; line-height: 1; } .summary-card.featured { background: linear-gradient(135deg, var(--loop-primary), var(--loop-secondary)); color: #ffffff; } .summary-card.featured span, .summary-card.featured small { color: rgba(255, 255, 255, 0.72); } .summary-card[data-dashboard-filter] { cursor: pointer; transition: transform 160ms ease, box-shadow 160ms ease; } .summary-card[data-dashboard-filter]:hover, .summary-card[data-dashboard-filter]:focus-visible { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(50, 31, 68, 0.14); } .summary-card[data-dashboard-filter]:focus-visible { outline: 3px solid var(--loop-accent); outline-offset: 2px; } /* Segunda fileira do dashboard — indicadores de atencao (spec: "documentos proximos de vencer", "recusados", "expirados"), com tratamento visual mais leve que os 4 cards principais para nao competir com eles (ver .loopai/ux: "acao principal deve ser evidente"). */ .alert-chip-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: -6px 0 18px; } .alert-chip { display: flex; align-items: baseline; gap: 8px; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; background: #ffffff; cursor: pointer; font: inherit; text-align: left; transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; } .alert-chip:hover, .alert-chip:focus-visible { transform: translateY(-1px); border-color: rgba(72, 23, 117, 0.28); box-shadow: 0 10px 24px rgba(50, 31, 68, 0.08); } .alert-chip strong { font-size: 18px; color: var(--loop-primary); } .alert-chip span { color: var(--muted); font-size: 12px; } /* Filtros da tela Documentos */ .filters-summary { display: flex; align-items: center; min-height: 24px; margin-bottom: 10px; } .filters-summary span { color: var(--muted); font-size: 12px; } .filters-summary button { margin-left: 10px; border: 0; background: none; color: var(--loop-secondary); font-weight: 800; font-size: 12px; cursor: pointer; text-decoration: underline; } .filter-count { display: inline-flex; min-width: 16px; height: 16px; align-items: center; justify-content: center; margin-left: 4px; border-radius: 999px; background: var(--loop-accent); color: #241600; font-size: 10px; font-weight: 900; } .more-filters { margin-top: -6px; } .dashboard-grid, .detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 18px; align-items: start; } .accent-panel { overflow: hidden; background: linear-gradient(150deg, var(--loop-primary), var(--loop-secondary)); color: #ffffff; } .accent-panel p { color: rgba(255, 255, 255, 0.78); } .flow-preview { display: grid; grid-template-columns: 18px 1fr 18px 1fr 18px 1fr 18px; align-items: center; margin-bottom: 10px; } .flow-dot { width: 18px; height: 18px; border: 3px solid rgba(255, 255, 255, 0.85); border-radius: 50%; } .flow-dot.active { border-color: var(--loop-accent); background: var(--loop-accent); } .flow-line { height: 2px; background: rgba(255, 255, 255, 0.5); } /* Rotulos das 4 etapas do card "Fluxo LoopSign" (Dashboard) — widget ilustrativo, nao reflete documentos reais; usa o mesmo grid-template-columns de .flow-preview pra cada rotulo ficar alinhado embaixo do dot correspondente (pula as colunas de .flow-line). */ /* Rotulo do 1o e do ultimo passo alinham pra dentro (esquerda/direita) em vez de centralizar em cima do proprio dot — o dot das pontas fica exatamente na borda do card, entao um rotulo centralizado ali vazaria pra fora dos dois lados (o card tem overflow:hidden, cortava a ultima letra de "Concluir"). Os do meio continuam centralizados. */ .flow-labels { display: grid; grid-template-columns: 18px 1fr 18px 1fr 18px 1fr 18px; margin-bottom: 22px; font-size: 10px; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; color: rgba(255, 255, 255, 0.85); } .flow-labels span:nth-child(1) { grid-column: 1 / 3; text-align: left; } .flow-labels span:nth-child(2) { grid-column: 2 / 5; text-align: center; } .flow-labels span:nth-child(3) { grid-column: 4 / 7; text-align: center; } .flow-labels span:nth-child(4) { grid-column: 6 / 8; text-align: right; } .toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 16px; } .filter-field { display: grid; flex: 1 1 170px; min-width: 140px; gap: 6px; } /* "Buscar" e o campo com mais chance de ter texto longo — cresce mais que os demais em vez de dividir o espaco igualmente. */ .filter-field-grow { flex: 2 1 220px; } /* Datas nao precisam da mesma largura de um select/input de texto — antes ocupavam a coluna inteira (240px) cada uma em linhas separadas; agora ficam lado a lado, mais estreitas. */ .filter-field-date { flex: 0 1 150px; min-width: 130px; } .filter-field-checkbox { flex: 1 1 200px; } #toggleMoreFiltersButton { flex: 0 0 auto; } /* Antes ocupava a largura inteira da coluna (minmax(0,1fr), a mesma do campo "Buscar") — um botao de texto curto nao precisa disso; agora cabe ao lado do funil de mais filtros. */ .filter-clear-button { flex: 0 0 auto; padding: 0 18px; white-space: nowrap; } .document-list { display: grid; gap: 12px; } .document-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; border: 1px solid rgba(72, 23, 117, 0.08); border-radius: var(--radius); padding: 16px; background: #ffffff; box-shadow: 0 12px 28px rgba(50, 31, 68, 0.07); transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; } .document-card:hover { border-color: rgba(111, 53, 165, 0.26); box-shadow: 0 18px 40px rgba(50, 31, 68, 0.12); transform: translateY(-2px); } .document-card h3 { margin-bottom: 6px; font-size: 17px; } .document-card p { margin-bottom: 0; font-size: 13px; } .compact .document-card { box-shadow: none; } .document-card-actions { display: flex; align-items: center; gap: 8px; } .document-card-actions .icon-button { width: 34px; min-height: 34px; } .badge { display: inline-flex; min-height: 28px; align-items: center; justify-content: center; border-radius: 999px; padding: 0 10px; font-size: 12px; font-weight: 900; white-space: nowrap; } .badge.neutral, .badge.rascunho { background: #eee8f5; color: var(--loop-primary); } .badge.aguardando_assinaturas, .badge.parcialmente_assinado { background: #fff5cc; color: var(--warning); } .badge.assinado { background: #dff7ea; color: var(--success); } .badge.cancelado, .badge.expirado { background: #fee4e2; color: var(--danger); } /* Status de signatario (loop_sign_signatarios.status) — pendente/visualizado/otp_enviado reaproveitam o mesmo tom "aguardando" dos badges de documento; assinado/expirado ja tem regra acima (mesmo tom se aplica). Recusado ganha o mesmo tom de perigo que cancelado. */ .badge.pendente, .badge.visualizado, .badge.otp_enviado { background: #fff5cc; color: var(--warning); } .badge.recusado { background: #fee4e2; color: var(--danger); } .badge.warning { background: #fff5cc; color: var(--warning); } .empty-state { display: grid; place-items: center; min-height: 260px; border: 1px dashed #d7cde2; border-radius: var(--radius); padding: 28px; background: #ffffff; text-align: center; } .empty-state strong { display: block; margin-bottom: 6px; font-size: 18px; } .wizard { max-width: 980px; } .progress-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 20px; } .progress-steps::before { content: ""; position: absolute; top: 23px; left: calc(12.5% + 5px); right: calc(12.5% + 5px); height: 2px; background: var(--line); z-index: 0; } .step { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; min-height: 46px; border: 1px solid var(--line); border-radius: var(--radius); padding: 0 12px; background: #ffffff; color: var(--muted); font-weight: 900; transition: opacity 160ms ease, background 160ms ease, border-color 160ms ease; } .step span { display: grid; width: 26px; height: 26px; flex-shrink: 0; place-items: center; border-radius: 50%; background: #f0e9f6; color: var(--loop-primary); } .step span svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .step.active { border-color: var(--loop-secondary); background: #f7f0fd; color: var(--loop-primary); } .step.done span { background: var(--success); color: #ffffff; } .step:disabled { opacity: 0.5; cursor: not-allowed; background: #ffffff; } .wizard-body { display: grid; gap: 18px; } .wizard-page { display: grid; gap: 16px; } .upload-zone { display: grid; min-height: 300px; place-items: center; border: 1px dashed #cdbbdc; border-radius: var(--radius); padding: 30px; background: #fbf8fe; text-align: center; cursor: pointer; } .upload-zone input { position: absolute; width: 1px; height: 1px; opacity: 0; } /* Botões nativos de "Escolher arquivo" (logo da empresa, certificado PFX/P12, logo do remetente de e-mail — telas de Configurações) usavam o botão cinza padrão do sistema operacional, destoando do resto da UI. ::file-selector-button estiliza só a parte de botão do