/* ========================================================================= FLORA OS — Design System Mensagem 7: elegancia, confianca, calma. Cada cor comunica algo. Verde=saude/sucesso, Amarelo=atencao/oportunidade, Vermelho=critico, Cinza=secundario, Branco/claro=conteudo. Nada de cor decorativa. ========================================================================= */ :root { /* Marca */ --verde-900: #0f3d2e; --verde-700: #1b6b4c; --verde-500: #2e9e6f; --verde-100: #e6f4ee; /* Semantica */ --sucesso: #2e9e6f; --atencao: #c98a12; --atencao-bg: #fdf5e3; --critico: #c0392b; --critico-bg: #fbecea; --sucesso-bg: #e6f4ee; /* Neutros */ --tinta: #1a2b24; /* texto principal */ --tinta-2: #5a6b63; /* texto secundario */ --tinta-3: #93a29b; /* texto terciario / legendas */ --linha: #e7ece9; /* bordas suaves */ --superficie: #ffffff; /* cards */ --fundo: #f6f8f7; /* fundo da pagina */ --raio: 14px; --raio-sm: 10px; --sombra: 0 1px 2px rgba(16, 40, 30, .04), 0 8px 24px rgba(16, 40, 30, .06); --sombra-hover: 0 2px 4px rgba(16, 40, 30, .06), 0 14px 34px rgba(16, 40, 30, .10); --transicao: 180ms cubic-bezier(.4, 0, .2, 1); --nav-largura: 244px; color-scheme: light; } /* ---------- Tema escuro ---------- */ /* Sobrescreve as variaveis; nenhum componente precisa saber do tema. O atributo data-theme e carimbado no por um script (com persistencia). */ :root[data-theme="dark"] { color-scheme: dark; --verde-900: #0b1512; /* nav (mantem o verde escuro) */ --verde-700: #57c79c; /* verde de TEXTO (mais claro p/ contraste no escuro) */ --verde-100: #16241d; /* superficies verdes claras -> tom escuro */ --sucesso: #45c68c; --atencao: #e0a93a; --atencao-bg: #2a2413; --critico: #e5675b; --critico-bg: #2c1815; --sucesso-bg: #14251d; --tinta: #e8eeeb; --tinta-2: #a4b4ac; --tinta-3: #74857d; --linha: #27312c; --superficie: #161d19; --fundo: #0f1411; --sombra: 0 1px 2px rgba(0, 0, 0, .30), 0 8px 24px rgba(0, 0, 0, .38); --sombra-hover: 0 2px 4px rgba(0, 0, 0, .38), 0 14px 34px rgba(0, 0, 0, .48); } html { transition: background var(--transicao); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--fundo); color: var(--tinta); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } /* ---------- Layout: nav lateral + conteudo ---------- */ .app { display: grid; grid-template-columns: var(--nav-largura) 1fr; min-height: 100vh; } .nav { background: var(--verde-900); color: #dfeee7; padding: 26px 18px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; /* rola quando o menu passa da altura da tela */ scrollbar-width: thin; scrollbar-color: var(--verde-500) transparent; } .nav::-webkit-scrollbar { width: 8px; } .nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); border-radius: 999px; } .nav__foot { flex: none; } .nav__brand { display: flex; align-items: baseline; gap: 8px; padding: 0 10px 4px; } .nav__brand strong { font-size: 19px; letter-spacing: .3px; color: #fff; } .nav__brand span { font-size: 11px; color: #7fb8a1; } .nav__empresa { margin: 6px 10px 20px; padding: 12px; background: rgba(255, 255, 255, .06); border-radius: var(--raio-sm); font-size: 13px; } .nav__empresa b { color: #fff; display: block; } .nav__empresa small { color: #7fb8a1; text-transform: capitalize; } .nav__item { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: var(--raio-sm); color: #cfe4da; transition: background var(--transicao), color var(--transicao); } .nav__item:hover { background: rgba(255, 255, 255, .07); color: #fff; } .nav__item--active { background: var(--verde-500); color: #fff; } .nav__item .icon { font-size: 17px; width: 20px; text-align: center; } .nav__item .label { font-weight: 500; } .nav__foot { margin-top: auto; padding: 12px 12px 0; font-size: 11px; color: #4f8a72; } .tema-toggle { display: flex; align-items: center; gap: 9px; width: 100%; margin-top: auto; background: rgba(255, 255, 255, .06); border: none; color: #cfe4da; cursor: pointer; padding: 10px 12px; border-radius: var(--raio-sm); font-size: 13px; font-family: inherit; transition: background var(--transicao), color var(--transicao); } .tema-toggle:hover { background: rgba(255, 255, 255, .11); color: #fff; } .tema-toggle__icon { font-size: 15px; } .content { padding: 34px 40px 60px; max-width: 1160px; } /* ---------- Cabecalho de pagina ---------- */ .page-head { margin-bottom: 26px; } .page-head h1 { margin: 0; font-size: 25px; letter-spacing: -.2px; } .page-head .pergunta { margin: 4px 0 0; color: var(--tinta-2); font-size: 15px; } /* ---------- Icone de acao (remover linha, etc.) ---------- */ .icone-acao { appearance: none; border: 1px solid transparent; background: transparent; color: var(--tinta-3); cursor: pointer; width: 30px; height: 30px; border-radius: 8px; font-size: 14px; line-height: 1; transition: background var(--transicao), color var(--transicao); } .icone-acao:hover { background: var(--critico-bg); color: var(--critico); } /* ---------- Central de Importacoes (experiencia premium) ---------- */ .upload-zone { border: 2px dashed var(--linha); border-radius: var(--raio); background: linear-gradient(180deg, var(--verde-100), var(--superficie)); padding: 34px 24px; text-align: center; transition: border-color var(--transicao), background var(--transicao); cursor: pointer; } .upload-zone:hover, .upload-zone--drag { border-color: var(--verde-500); background: linear-gradient(180deg, var(--sucesso-bg), var(--superficie)); } .upload-zone__icone { font-size: 34px; } .upload-zone__titulo { font-weight: 650; margin: 8px 0 2px; } .upload-zone__sub { color: var(--tinta-2); font-size: 13.5px; } .upload-zone input[type="file"] { display: none; } .upload-arquivos { margin-top: 12px; font-size: 13.5px; color: var(--tinta); } .upload-arquivos .chip { margin: 3px; } .formato-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; justify-content: center; } .formato-chips .chip { background: var(--fundo); border: 1px solid var(--linha); } .import-sessao { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--linha); } .import-sessao:first-child { border-top: none; } .badge-status { font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--fundo); border: 1px solid var(--linha); color: var(--tinta-2); white-space: nowrap; } .badge-status--aguardando { background: var(--atencao-bg); color: var(--atencao); border-color: transparent; } .badge-status--confirmado { background: var(--sucesso-bg); color: var(--sucesso); border-color: transparent; } .badge-status--cancelado, .badge-status--erro { background: var(--critico-bg); color: var(--critico); border-color: transparent; } /* ---------- Seletor de periodo financeiro ---------- */ /* Navegacao elegante entre periodos (calendario ou ciclo customizado). Cada passo recarrega a tela inteira ja no periodo escolhido (?periodo=offset). */ .periodo-nav { display: inline-flex; align-items: center; gap: 6px; background: var(--superficie); border: 1px solid var(--linha); border-radius: 999px; padding: 5px; box-shadow: var(--sombra); } .periodo-nav__btn { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--tinta-2); font-size: 18px; line-height: 1; transition: background var(--transicao), color var(--transicao); } .periodo-nav__btn:hover { background: var(--verde-100); color: var(--verde-700); } .periodo-nav__btn--off { opacity: .3; pointer-events: none; } .periodo-nav__centro { display: flex; flex-direction: column; align-items: center; min-width: 168px; padding: 0 6px; line-height: 1.15; } .periodo-nav__rotulo { font-size: 14px; font-weight: 650; color: var(--tinta); letter-spacing: -.2px; } .periodo-nav__tag { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; font-weight: 600; color: var(--tinta-3); margin-top: 1px; } .periodo-nav__tag--andamento { color: var(--atencao); } /* Seletor de mes/ano ao clicar no periodo (disclosure nativo
). */ .periodo-picker { position: relative; } .periodo-picker > summary { list-style: none; cursor: pointer; } .periodo-picker > summary::-webkit-details-marker { display: none; } .periodo-picker > summary:hover .periodo-nav__rotulo { color: var(--verde-700); } .periodo-picker__caret { font-size: 10px; color: var(--tinta-3); margin-left: 2px; } .periodo-picker[open] .periodo-picker__caret { color: var(--verde-700); } .periodo-picker__pop { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 20; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-sm); box-shadow: var(--sombra-hover); padding: 10px; } .periodo-picker__form { display: flex; gap: 8px; align-items: center; } .periodo-picker__form select { padding: 8px 10px; border: 1px solid var(--linha); border-radius: var(--raio-sm); background: var(--fundo); color: var(--tinta); font-family: inherit; font-size: 13.5px; } .periodo-picker__form .btn { padding: 8px 14px; } .periodo-reset { align-self: center; margin-left: 12px; font-size: 12.5px; font-weight: 600; color: var(--verde-700); } .periodo-reset:hover { text-decoration: underline; } .page-head--flex { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } /* ---------- Cards ---------- */ .card { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); padding: 20px 22px; } .card-titulo { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--tinta-3); margin: 0 0 12px; font-weight: 600; } .grid { display: grid; gap: 18px; } .grid--kpi { grid-template-columns: repeat(4, 1fr); } .grid--2 { grid-template-columns: 1.4fr 1fr; } /* ---------- KPI ---------- */ .kpi { display: flex; flex-direction: column; gap: 6px; } .kpi__label { font-size: 12.5px; color: var(--tinta-2); font-weight: 500; } .kpi__valor { font-size: 27px; font-weight: 700; letter-spacing: -.5px; } .kpi__delta { font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; } .delta--pos { color: var(--sucesso); } .delta--neg { color: var(--critico); } .delta--neutro { color: var(--tinta-3); } .kpi--destaque .kpi__valor { color: var(--verde-700); } /* ---------- Posição de caixa (o ÚNICO conceito financeiro da FLORA) ---------- */ .caixa { padding: 20px 22px; } .caixa__grade { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; gap: 6px 14px; } .caixa__bloco { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .caixa__rotulo { font-size: 12.5px; color: var(--tinta-2); font-weight: 500; } .caixa__valor { font-size: 24px; font-weight: 700; letter-spacing: -.5px; white-space: nowrap; } .caixa__valor--pos { color: var(--sucesso); } .caixa__valor--neg { color: var(--critico); } .caixa__nota { font-size: 11.5px; color: var(--tinta-3); } .caixa__op { font-size: 22px; font-weight: 600; color: var(--tinta-3); text-align: center; } .caixa__bloco--atual .caixa__valor { color: var(--verde-700); } .caixa__bloco--projetado { padding-left: 14px; border-left: 2px solid var(--borda); } .caixa__bloco--projetado .caixa__rotulo { font-weight: 600; color: var(--tinta-1); } .caixa__bloco--projetado .caixa__valor { font-size: 27px; } @media (max-width: 860px) { .caixa__grade { grid-template-columns: 1fr 1fr; } .caixa__op { display: none; } .caixa__bloco--projetado { border-left: 0; padding-left: 0; grid-column: 1 / -1; border-top: 2px solid var(--borda); padding-top: 12px; margin-top: 4px; } } /* ---------- Resumo executivo (a voz da FLORA) ---------- */ .resumo { background: linear-gradient(180deg, var(--verde-100), var(--superficie)); border: 1px solid #d3e8dd; border-radius: var(--raio); padding: 22px 24px; display: flex; gap: 16px; align-items: flex-start; } .resumo__avatar { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--verde-500); color: #fff; display: grid; place-items: center; font-size: 19px; } .resumo__corpo h2 { margin: 0 0 6px; font-size: 15px; } .resumo__corpo p { margin: 0; color: var(--tinta); font-size: 15px; line-height: 1.6; } .resumo__corpo p + p { margin-top: 8px; } /* ---------- Insights (problema -> causa -> impacto -> acao) ---------- */ .insight { border: 1px solid var(--linha); border-left: 4px solid var(--tinta-3); border-radius: var(--raio-sm); padding: 16px 18px; background: var(--superficie); } .insight + .insight { margin-top: 14px; } .insight--critico { border-left-color: var(--critico); } .insight--atencao { border-left-color: var(--atencao); } .insight--oportunidade { border-left-color: var(--sucesso); } .insight__topo { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .insight__tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 3px 9px; border-radius: 999px; } .tag--critico { background: var(--critico-bg); color: var(--critico); } .tag--atencao { background: var(--atencao-bg); color: var(--atencao); } .tag--oportunidade { background: var(--sucesso-bg); color: var(--sucesso); } .insight__titulo { font-weight: 600; font-size: 15.5px; } .insight__linha { display: flex; gap: 8px; font-size: 14px; margin-top: 5px; } .insight__rotulo { color: var(--tinta-3); min-width: 66px; font-weight: 600; } .insight__texto { color: var(--tinta); } .insight__acao { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--linha); font-size: 14px; } .insight__acao b { color: var(--verde-700); } /* ---------- Tabela ---------- */ .tabela { width: 100%; border-collapse: collapse; font-size: 14px; } .tabela th { text-align: left; color: var(--tinta-3); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; padding: 8px 10px; border-bottom: 1px solid var(--linha); } .tabela td { padding: 11px 10px; border-bottom: 1px solid var(--linha); } .tabela tr:last-child td { border-bottom: none; } .tabela .num { text-align: right; font-variant-numeric: tabular-nums; } .th-ordenavel { cursor: pointer; user-select: none; } .th-ordenavel:hover { color: var(--tinta); } .th-ordenavel::after { content: " ⇅"; opacity: .35; font-size: 11px; } .th-asc::after { content: " ↑"; opacity: 1; } .th-desc::after { content: " ↓"; opacity: 1; } /* Barra de busca acima de listas */ .lista-busca { width: 100%; max-width: 320px; padding: 9px 13px; border: 1px solid var(--linha); border-radius: var(--raio-sm); font-size: 14px; font-family: inherit; background: var(--superficie); color: var(--tinta); margin-bottom: 14px; } .lista-busca:focus { outline: none; border-color: var(--verde-500); } .neg { color: var(--critico); } .pos { color: var(--sucesso); } /* ---------- Barra de projecao (mini) ---------- */ .barra { height: 8px; border-radius: 999px; background: var(--linha); overflow: hidden; } .barra__fill { height: 100%; border-radius: 999px; background: var(--verde-500); } .barra__fill--alerta { background: var(--atencao); } .barra__fill--critico { background: var(--critico); } /* ---------- Alavancas (sliders) ---------- */ .lever { padding: 14px 0; border-bottom: 1px solid var(--linha); } .lever:last-of-type { border-bottom: none; } .lever__topo { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; } .lever__label { font-weight: 600; font-size: 14.5px; } .lever__valor { font-weight: 700; color: var(--verde-700); font-variant-numeric: tabular-nums; } .lever__hint { margin: 6px 0 0; font-size: 12px; color: var(--tinta-3); } .lever input[type="range"] { width: 100%; height: 6px; border-radius: 999px; appearance: none; -webkit-appearance: none; background: var(--linha); outline: none; cursor: pointer; } .lever input[type="range"]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--verde-500); border: 3px solid #fff; box-shadow: var(--sombra); cursor: pointer; } .lever input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--verde-500); border: 3px solid #fff; box-shadow: var(--sombra); cursor: pointer; } .lever__acoes { display: flex; gap: 10px; margin-top: 18px; } .btn { appearance: none; border: none; cursor: pointer; font-size: 14px; font-weight: 600; padding: 10px 18px; border-radius: var(--raio-sm); background: var(--verde-500); color: #fff; transition: background var(--transicao); } .btn:hover { background: var(--verde-700); } .btn--ghost { background: transparent; color: var(--tinta-2); border: 1px solid var(--linha); } .btn--ghost:hover { background: var(--fundo); color: var(--tinta); } .btn--perigo { background: var(--critico); } .btn--perigo:hover { background: #a5322a; } /* ---------- Acoes de registro (editar / duplicar / excluir) ---------- */ .acoes { display: inline-flex; gap: 4px; white-space: nowrap; } .acao { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--linha); background: var(--superficie); color: var(--tinta-2); cursor: pointer; font-size: 14px; transition: background var(--transicao), color var(--transicao), border-color var(--transicao); } .acao:hover { background: var(--fundo); color: var(--tinta); } .acao--excluir:hover { background: var(--critico-bg); color: var(--critico); border-color: #f2cfca; } .acoes form { display: inline; } /* ---------- Hero de impacto ---------- */ .impacto-hero { border-radius: var(--raio); padding: 22px; text-align: center; background: var(--fundo); border: 1px solid var(--linha); } .impacto-hero.is-pos { background: var(--sucesso-bg); border-color: #cfe8dc; } .impacto-hero.is-neg { background: var(--critico-bg); border-color: #f2cfca; } .impacto-hero__label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--tinta-2); font-weight: 600; } .impacto-hero__valor { display: block; font-size: 34px; font-weight: 800; letter-spacing: -1px; margin-top: 4px; } .is-pos .impacto-hero__valor { color: var(--sucesso); } .is-neg .impacto-hero__valor { color: var(--critico); } .impacto-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; } .impacto-grid > div { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-sm); padding: 12px; text-align: center; } .impacto-grid__l { display: block; font-size: 11.5px; color: var(--tinta-3); margin-bottom: 3px; } .impacto-grid b { font-size: 15px; font-variant-numeric: tabular-nums; } /* ---------- Badges (status pill) ---------- */ .badge { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; } .badge--critico { background: var(--critico-bg); color: var(--critico); } .badge--atencao { background: var(--atencao-bg); color: var(--atencao); } .badge--ok { background: var(--sucesso-bg); color: var(--sucesso); } /* ---------- Dashboard: prioridade + destaques ---------- */ .prioridade { border-left: 4px solid var(--tinta-3); } .prioridade--critico { border-left-color: var(--critico); } .prioridade--atencao { border-left-color: var(--atencao); } .prioridade--oportunidade { border-left-color: var(--sucesso); } .prioridade--ok { border-left-color: var(--sucesso); } .prioridade__linha { display: flex; justify-content: space-between; align-items: center; gap: 16px; } .prioridade__headline { font-size: 18px; font-weight: 700; letter-spacing: -.2px; } .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block; } .dot--critico { background: var(--critico); } .dot--atencao { background: var(--atencao); } .dot--oportunidade { background: var(--sucesso); } .dot--ok { background: var(--tinta-3); } .destaque { display: block; transition: box-shadow var(--transicao), transform var(--transicao); } .destaque:hover { box-shadow: var(--sombra-hover); transform: translateY(-2px); } .destaque__topo { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .destaque__titulo { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--tinta-3); font-weight: 600; } .destaque__headline { font-size: 15.5px; font-weight: 600; line-height: 1.4; } .destaque__valor { margin-top: 8px; font-size: 13px; color: var(--verde-700); font-weight: 600; } /* ---------- Agenda (Calendario) ---------- */ .agenda-dia { margin-bottom: 18px; } .agenda-dia__head { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; font-weight: 700; color: var(--tinta-2); padding: 0 4px 8px; border-bottom: 1px solid var(--linha); margin-bottom: 4px; } .agenda-ev { display: grid; grid-template-columns: 14px 1fr auto auto; align-items: center; gap: 12px; padding: 12px 6px; border-bottom: 1px solid var(--linha); transition: background var(--transicao); } .agenda-ev:last-child { border-bottom: none; } .agenda-ev:hover { background: var(--superficie); } .agenda-ev__titulo { font-weight: 500; } .agenda-ev__origem { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--tinta-3); background: var(--fundo); border: 1px solid var(--linha); border-radius: 999px; padding: 2px 8px; } .agenda-ev__valor { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; min-width: 96px; } /* ---------- Formulario de lancamento rapido ---------- */ .lancar-form { margin-top: 16px; } .lancar-form__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; align-items: end; } .lancar-form label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--tinta-2); font-weight: 600; } .lancar-form input, .lancar-form select { padding: 9px 11px; border: 1px solid var(--linha); border-radius: var(--raio-sm); font-size: 14px; font-family: inherit; background: var(--superficie); color: var(--tinta); } .lancar-form__acao { display: flex; } .lancar-form__acao .btn { width: 100%; } /* ---------- Validação de formato (flora_mask.js) ---------- */ /* Campo com conteúdo claramente inválido: borda e anel vermelhos, em qualquer input/select da plataforma (não só no lancar-form). */ input.campo-invalido, select.campo-invalido, textarea.campo-invalido { border-color: var(--critico) !important; } input.campo-invalido:focus, select.campo-invalido:focus, textarea.campo-invalido:focus { outline: none; box-shadow: 0 0 0 3px var(--critico-bg); } .campo-erro { display: none; margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--critico); } /* ---------- Centro de custos ---------- */ .centro { padding: 13px 0; border-bottom: 1px solid var(--linha); } .centro:last-of-type { border-bottom: none; } .centro__topo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; } .centro__nome { font-weight: 600; } .centro__valor { font-variant-numeric: tabular-nums; } /* ---------- Relatorio (documento imprimivel) ---------- */ .relatorio { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); padding: 36px 40px; max-width: 820px; } .relatorio__head { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 18px; border-bottom: 2px solid var(--verde-500); margin-bottom: 22px; } .relatorio__selo { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--verde-700); margin-bottom: 6px; } .relatorio__empresa { font-size: 22px; font-weight: 800; letter-spacing: -.3px; } .relatorio__nota { margin-top: 30px; padding-top: 14px; border-top: 1px solid var(--linha); font-size: 11.5px; color: var(--tinta-3); line-height: 1.5; } .relatorio__resumo p { font-size: 15.5px; line-height: 1.6; margin: 0 0 8px; } .relatorio__secao { margin-top: 26px; } .relatorio__secao h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--tinta-3); border-bottom: 1px solid var(--linha); padding-bottom: 8px; margin: 0 0 12px; font-weight: 700; } .relatorio__kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px; } .relatorio__kpis > div { display: flex; flex-direction: column; gap: 4px; } .relatorio__kpis span { font-size: 12px; color: var(--tinta-3); } .relatorio__kpis b { font-size: 19px; font-variant-numeric: tabular-nums; } @media print { .nav, .no-print { display: none !important; } .app { grid-template-columns: 1fr !important; } .content { padding: 0 !important; max-width: none !important; } html, body { background: #fff !important; } .relatorio { border: none; box-shadow: none; border-radius: 0; padding: 0; max-width: none; } } /* ---------- Consultor (conversa) ---------- */ .ia-status { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--tinta-2); background: var(--superficie); border: 1px solid var(--linha); border-radius: 999px; padding: 6px 14px; } .chat { display: flex; flex-direction: column; gap: 12px; } .bolha { max-width: 78%; padding: 13px 16px; border-radius: 16px; font-size: 15px; line-height: 1.55; white-space: pre-wrap; } .bolha--user { align-self: flex-end; background: var(--verde-500); color: #fff; border-bottom-right-radius: 4px; } .bolha--assistant { align-self: flex-start; background: var(--superficie); border: 1px solid var(--linha); border-bottom-left-radius: 4px; } .bolha--erro { background: var(--critico-bg); border-color: transparent; color: var(--critico); } /* Markdown renderizado dentro das bolhas da FLORA — nunca "**"/"#"/"-" crus. As bolhas do assistente passam a conter blocos (p/ul/ol/li); normalizamos as margens para o texto respirar sem "buracos". A fala do usuário segue como texto. */ .bolha > :first-child { margin-top: 0; } .bolha > :last-child { margin-bottom: 0; } .bolha p { margin: 0 0 8px; white-space: pre-wrap; } .bolha p.md-h { font-weight: 700; margin: 10px 0 4px; } .bolha ul, .bolha ol { margin: 6px 0; padding-left: 20px; } .bolha li { margin: 3px 0; } .bolha li::marker { color: var(--tinta-3); } .bolha strong { font-weight: 700; } .bolha code { background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 5px; font-size: .92em; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; } .bolha--user code { background: rgba(255,255,255,.22); } .bolha a { color: inherit; text-decoration: underline; } /* Assistente contextual (nos módulos): a conversa anterior COLAPSA num resumo expansível, para a tela mostrar só a interação atual sem virar página de chat. */ .chat-antigas { align-self: stretch; margin-bottom: 4px; } .chat-antigas__resumo { cursor: pointer; list-style: none; font-size: 13px; color: var(--tinta-3); padding: 5px 11px; border-radius: 999px; background: rgba(0,0,0,.04); display: inline-block; user-select: none; } .chat-antigas__resumo::-webkit-details-marker { display: none; } .chat-antigas__resumo:hover { color: var(--tinta-2); } .chat-antigas__corpo { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; opacity: .8; } /* Seletor de fornecedores de um produto (checkboxes em pílulas). */ .lancar-form__full { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; } .chips-check { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .chip-check { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; padding: 7px 12px; border: 1px solid var(--linha); border-radius: 999px; font-size: 13px; background: var(--superficie); user-select: none; } .chip-check input { accent-color: var(--verde-500); } .chip-check:has(input:checked) { border-color: var(--verde-500); background: var(--verde-50, rgba(34,139,87,.08)); font-weight: 600; } /* Formulário de configuração (Configurações → Conectores). */ .cfg-label { display:block; font-size:12.5px; color: var(--tinta-3); margin: 12px 0 5px; } .cfg-input { width:100%; padding:10px 12px; border:1px solid var(--linha); border-radius: var(--raio-sm); font-size:14px; margin-bottom: 6px; } /* Confirmação de que a FLORA alterou dados e a tela vai se atualizar sozinha. */ .chat-atualizando { align-self: center; font-size: 12.5px; color: var(--sucesso, var(--tinta-3)); padding: 4px 10px; margin-top: 2px; opacity: .9; } /* Chat AJAX (flora_chat.js): surgimento suave das bolhas + "digitando…". */ .chat-widget { display: flex; flex-direction: column; } .chat[data-chat-mensagens] { scroll-behavior: smooth; } .bolha--surge { animation: bolha-surge 220ms ease-out both; } @keyframes bolha-surge { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .bolha--digitando { padding: 14px 16px; } .digita { display: inline-flex; gap: 5px; align-items: center; } .digita i { width: 7px; height: 7px; border-radius: 50%; background: var(--tinta-3); display: inline-block; animation: digita-pulo 1.1s infinite ease-in-out both; } .digita i:nth-child(2) { animation-delay: .18s; } .digita i:nth-child(3) { animation-delay: .36s; } @keyframes digita-pulo { 0%, 80%, 100% { transform: scale(.6); opacity: .45; } 40% { transform: scale(1); opacity: 1; } } .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { appearance: none; cursor: pointer; font-size: 13px; font-family: inherit; background: var(--verde-100); color: var(--verde-700); border: 1px solid #d3e8dd; border-radius: 999px; padding: 7px 14px; transition: background var(--transicao); } .chip:hover { background: #d9efe4; } .chat-input { display: flex; gap: 10px; } .chat-input input { flex: 1; padding: 12px 16px; border: 1px solid var(--linha); border-radius: var(--raio-sm); font-size: 15px; font-family: inherit; } .chat-input input:focus { outline: none; border-color: var(--verde-500); } .chat-input input:disabled { background: var(--fundo); color: var(--tinta-3); cursor: not-allowed; } .chat-input .btn:disabled { opacity: .5; cursor: not-allowed; } .consultor-hero { display: flex; gap: 16px; align-items: flex-start; background: linear-gradient(180deg, var(--verde-100), var(--superficie)); border: 1px solid var(--linha); border-radius: var(--raio); padding: 22px 24px; } .consultor-hero__avatar { flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--verde-500); color: #fff; display: grid; place-items: center; font-size: 23px; } .chip--preview { background: var(--fundo); color: var(--tinta-2); border-color: var(--linha); cursor: default; } .chip--preview:hover { background: var(--fundo); } /* ---------- Reposicao: item de pedido ---------- */ .pedido-item { border: 1px solid var(--linha); border-radius: var(--raio-sm); padding: 12px 14px; background: var(--fundo); } /* ---------- Toast (feedback discreto) ---------- */ .toast { position: fixed; bottom: 24px; right: 24px; z-index: 1000; display: flex; align-items: center; gap: 14px; background: var(--verde-700); color: #fff; padding: 13px 16px; border-radius: var(--raio-sm); box-shadow: var(--sombra-hover); font-size: 14px; font-weight: 500; max-width: 360px; animation: toast-in .24s cubic-bezier(.4, 0, .2, 1); } .toast--erro { background: var(--critico); } .toast--aviso { background: var(--atencao); } .toast button { background: none; border: none; color: #fff; font-size: 19px; line-height: 1; cursor: pointer; opacity: .8; padding: 0; } .toast button:hover { opacity: 1; } @keyframes toast-in { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } } /* ---------- Estado vazio ---------- */ .vazio { text-align: center; padding: 44px 24px; max-width: 460px; margin: 0 auto; } .vazio__icone { font-size: 44px; line-height: 1; margin-bottom: 14px; } .vazio__titulo { margin: 0 0 8px; font-size: 18px; } .vazio__texto { margin: 0 0 20px; color: var(--tinta-2); line-height: 1.6; } /* ---------- Utilitarios ---------- */ /* Escala de espacamento. `mt-8` e `mt-16` eram usadas em dezenas de telas SEM existir aqui — nao faziam nada, e era essa a origem de boa parte do desalinhamento vertical entre modulos. */ .mt-4 { margin-top: 4px; } .mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-18 { margin-top: 18px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; } .muted { color: var(--tinta-2); } .small { font-size: 12.5px; } /* Padroes de layout que estavam sendo reescritos inline em cada tela. Um nome so, mesmo espacamento em toda a plataforma. */ .linha-entre { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .linha-acoes { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .form-inline { display: inline; } .centro { text-align: center; } .direita { text-align: right; } .sem-quebra { white-space: nowrap; } /* Titulo de card dentro de um cabecalho flex: sem margem propria. */ .card-titulo--inline { margin: 0; } /* ---------- Responsivo ---------- */ @media (max-width: 980px) { .app { grid-template-columns: 1fr; } .nav { position: static; height: auto; flex-direction: row; flex-wrap: wrap; } .nav__foot, .nav__empresa { display: none; } .grid--kpi { grid-template-columns: repeat(2, 1fr); } .grid--2 { grid-template-columns: 1fr; } .content { padding: 24px 20px 48px; } } @media (max-width: 560px) { .grid--kpi { grid-template-columns: 1fr; } .page-head--flex { flex-direction: column; align-items: stretch; } .page-head--flex > .btn, .page-head--flex a.btn { align-self: flex-start; } .content { padding: 20px 16px 44px; } .card { padding: 18px 16px; } .lancar-form__grid { grid-template-columns: 1fr; } /* Tabelas largas rolam dentro de si em vez de estourar a pagina. */ .tabela { display: block; overflow-x: auto; white-space: nowrap; } } /* ========================================================================= */ /* Conectores — experiencia premium de integracoes */ /* ========================================================================= */ /* Grade de conectores */ .conector-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; } .conector-card { display: flex; flex-direction: column; gap: 12px; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); padding: 20px 22px; transition: box-shadow var(--transicao), transform var(--transicao), border-color var(--transicao); } .conector-card:hover { box-shadow: var(--sombra-hover); transform: translateY(-3px); border-color: #d3e8dd; } .conector-card__top { display: flex; align-items: center; gap: 12px; } .conector-card__emoji { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 24px; background: var(--verde-100); border: 1px solid var(--linha); } .conector-card__id { display: flex; flex-direction: column; min-width: 0; } .conector-card__nome { font-weight: 700; font-size: 16px; letter-spacing: -.2px; } .conector-card__cat { font-size: 11.5px; color: var(--tinta-3); text-transform: uppercase; letter-spacing: .5px; } .conector-card__resumo { margin: 0; color: var(--tinta-2); font-size: 13.5px; line-height: 1.5; flex: 1; } .conector-card__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--tinta-2); } .conector-card__cta { font-size: 13.5px; font-weight: 650; color: var(--verde-700); } /* Pilula de status */ .status-pill { margin-left: auto; flex: none; font-size: 12px; font-weight: 650; padding: 5px 11px; border-radius: 999px; white-space: nowrap; border: 1px solid transparent; } .status-pill--on { background: var(--sucesso-bg); color: var(--sucesso); } .status-pill--off { background: var(--fundo); color: var(--tinta-2); border-color: var(--linha); } .status-pill--na { background: var(--atencao-bg); color: var(--atencao); } /* Cabecalho da pagina do conector */ .conector-hero { display: flex; align-items: center; gap: 16px; background: linear-gradient(180deg, var(--verde-100), var(--superficie)); border: 1px solid #d3e8dd; border-radius: var(--raio); padding: 22px 24px; } .conector-hero__emoji { flex: none; width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; font-size: 30px; background: var(--superficie); border: 1px solid var(--linha); box-shadow: var(--sombra); } .conector-hero__id h1 { margin: 0; font-size: 24px; letter-spacing: -.3px; } .conector-hero__cat { font-size: 12px; color: var(--tinta-3); text-transform: uppercase; letter-spacing: .5px; } .conector-hero .status-pill { align-self: center; } /* Layout principal + lateral */ .conector-layout { display: grid; grid-template-columns: 1fr 320px; gap: 18px; align-items: start; } .conector-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .conector-descricao { margin: 0; color: var(--tinta); line-height: 1.65; font-size: 14.5px; } /* Lista de funcionalidades (o que a FLORA consegue fazer) */ .func-list, .perm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .func-list li, .perm-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.4; } .func-list__check { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--sucesso-bg); color: var(--sucesso); display: grid; place-items: center; font-size: 12px; font-weight: 700; margin-top: 1px; } .perm-list__ic { flex: none; font-size: 13px; margin-top: 2px; opacity: .8; } @media (min-width: 640px) { .func-list { grid-template-columns: 1fr 1fr; } } /* Timeline (historico de sincronizacoes) */ .timeline { list-style: none; margin: 0; padding: 0; } .timeline__item { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--linha); } .timeline__item:first-child { border-top: none; } .timeline__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; } .timeline__dot--ok { background: var(--sucesso); } .timeline__dot--erro { background: var(--critico); } .timeline__linha { font-size: 14px; } .timeline__meta { font-size: 12px; color: var(--tinta-3); margin-top: 1px; } /* Mini-listas (eventos / acoes) */ .mini-lista { list-style: none; margin: 0; padding: 0; } .mini-lista li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--linha); font-size: 13.5px; } .mini-lista li:first-child { border-top: none; } .mini-lista__t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mini-lista__d { flex: none; color: var(--tinta-3); font-size: 12px; } /* Cartao de conta conectada */ .conta-linha { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; } .conta-linha + .conta-linha { border-top: 1px solid var(--linha); } .conta-linha__l { color: var(--tinta-2); font-size: 13px; } .conta-linha b { font-variant-numeric: tabular-nums; text-align: right; } /* Acoes do conector (botoes empilhados) */ .acoes-conector { display: flex; flex-direction: column; gap: 10px; } .acoes-conector .btn, .acoes-conector form { width: 100%; } .acoes-conector .btn { width: 100%; text-align: center; } /* Aviso (feedback inline na pagina do conector) */ .aviso { margin-top: 16px; padding: 12px 16px; border-radius: var(--raio-sm); font-size: 14px; border: 1px solid var(--linha); border-left-width: 3px; animation: aviso-in .24s cubic-bezier(.4, 0, .2, 1); } .aviso--ok { background: var(--sucesso-bg); border-left-color: var(--sucesso); } .aviso--erro { background: var(--critico-bg); border-left-color: var(--critico); } .aviso--info { background: var(--atencao-bg); border-left-color: var(--atencao); } @keyframes aviso-in { from { transform: translateY(-6px); opacity: 0; } to { transform: none; opacity: 1; } } @media (max-width: 860px) { .conector-layout { grid-template-columns: 1fr; } .conector-duo { grid-template-columns: 1fr; } } /* Central de Inteligência — anel de score + evolução */ .score-anel { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 18px; color: #fff; background: var(--tinta-3); } .score-anel--ok { background: var(--sucesso); } .score-anel--oportunidade { background: var(--verde-500); } .score-anel--atencao { background: var(--atencao); } .score-anel--critico { background: var(--critico); } .score-anel--grande { width: 96px; height: 96px; font-size: 38px; margin: 8px auto 0; } .evolucao { display: flex; align-items: flex-end; gap: 14px; height: 150px; padding-top: 10px; overflow-x: auto; } .evolucao__col { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 44px; } .evolucao__barra { width: 34px; border-radius: 8px 8px 0 0; background: linear-gradient(180deg, var(--verde-500), var(--verde-700)); transition: height var(--transicao); min-height: 6px; } .evolucao__valor { font-weight: 700; font-size: 13px; } .evolucao__data { font-size: 11px; color: var(--tinta-3); } /* CTA do Hub de Auditorias (a partir do dossiê) */ .aud-cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; transition: box-shadow var(--transicao), transform var(--transicao); } .aud-cta:hover { box-shadow: var(--sombra-hover); transform: translateY(-2px); } .aud-cta > div:first-child { flex: 1; min-width: 240px; } .aud-cta__icones { display: flex; gap: 8px; } .aud-cta__icones span { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 21px; background: var(--verde-100); border: 1px solid var(--linha); } /* Hub de Auditorias — cada integração desbloqueia um consultor especialista */ .aud-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; } .aud-card { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); padding: 22px; display: flex; flex-direction: column; gap: 12px; transition: box-shadow var(--transicao), transform var(--transicao); } .aud-card:hover { box-shadow: var(--sombra-hover); transform: translateY(-3px); } .aud-card--ativa { border-color: var(--verde-500); } .aud-card__head { display: flex; align-items: center; gap: 12px; } .aud-card__icone { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 26px; background: var(--verde-100); border: 1px solid var(--linha); } .aud-card__nome { margin: 0; font-size: 17px; letter-spacing: -.2px; } .aud-card__esp { font-size: 12px; color: var(--verde-700); font-weight: 650; } .aud-card__head .status-pill { margin-left: auto; } .aud-promessa { margin: 0; color: var(--tinta-2); font-size: 14px; line-height: 1.55; } .aud-itens { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; font-size: 13.5px; } .aud-itens li { display: flex; align-items: center; gap: 7px; } .aud-check { color: var(--sucesso); font-weight: 800; font-size: 12px; } .aud-nota { background: var(--fundo); border-radius: var(--raio-sm); padding: 10px 12px; } .aud-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; } .aud-acoes .btn { flex: 1; min-width: 150px; text-align: center; } .aud-score { display: flex; align-items: center; gap: 16px; } .aud-score .score-anel--grande { margin: 0; width: 74px; height: 74px; font-size: 28px; } .aud-estrelas { color: var(--atencao); font-size: 18px; letter-spacing: 2px; } .aud-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; } .aud-kpis > div { background: var(--fundo); border-radius: var(--raio-sm); padding: 10px 6px; } .aud-kpis b { display: block; font-size: 19px; } .aud-kpis span { font-size: 11px; color: var(--tinta-3); } .aud-hero { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; background: linear-gradient(135deg, var(--verde-100), var(--superficie)); border-color: #d3e8dd; } .aud-hero__icone { flex: none; width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center; font-size: 32px; background: var(--superficie); border: 1px solid var(--linha); } .aud-hero__id { flex: 1; min-width: 220px; } .aud-hero__id h1 { margin: 0; font-size: 23px; } .aud-hero__score { display: flex; flex-direction: column; align-items: center; gap: 4px; } .aud-hero__score .score-anel--grande { margin: 0; } .aviso--exemplo { background: var(--atencao-bg); border-left-color: var(--atencao); } .bench { display: flex; flex-direction: column; gap: 10px; } .bench__linha { display: grid; grid-template-columns: 150px 1fr 44px; align-items: center; gap: 12px; font-size: 13.5px; } .bench__linha--eu { font-weight: 700; } .bench__barra { height: 12px; background: var(--linha); border-radius: 999px; overflow: hidden; } .bench__fill { height: 100%; background: var(--tinta-3); border-radius: 999px; } .bench__linha--eu .bench__fill { background: var(--verde-500); } .bench__score { text-align: right; font-variant-numeric: tabular-nums; } .aud-checklist { list-style: none; margin: 0; padding: 0; } .aud-checklist li { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-top: 1px solid var(--linha); font-size: 14px; } .aud-checklist li:first-child { border-top: none; } .aud-check-box { flex: none; width: 18px; height: 18px; border: 2px solid var(--linha); border-radius: 5px; margin-top: 2px; } @media (max-width: 560px) { .aud-itens { grid-template-columns: 1fr; } .aud-kpis { grid-template-columns: repeat(2, 1fr); } .bench__linha { grid-template-columns: 110px 1fr 40px; } } /* Dossiê estratégico (Central de Inteligência) */ .dossie-acoes { display: flex; gap: 8px; flex-wrap: wrap; } .dossie-hero { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; background: linear-gradient(135deg, var(--verde-100), var(--superficie)); border-color: #d3e8dd; } .dossie-hero--critico { background: linear-gradient(135deg, var(--critico-bg), var(--superficie)); border-color: #f2cfca; } .dossie-hero--atencao { background: linear-gradient(135deg, var(--atencao-bg), var(--superficie)); } .dossie-hero__score { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; } .dossie-hero__saude { display: flex; align-items: center; gap: 8px; font-size: 15px; } .dossie-hero__resumo { flex: 1; min-width: 260px; } .trend { font-weight: 700; font-size: 13px; padding: 2px 8px; border-radius: 999px; } .trend--up { color: var(--sucesso); background: var(--sucesso-bg); } .trend--down { color: var(--critico); background: var(--critico-bg); } /* Heatmap de score por área */ .heatmap { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .heat { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-radius: var(--raio-sm); color: #fff; font-weight: 600; transition: transform var(--transicao); background: hsl(calc(var(--s) * 1.2) 62% 42%); } /* 0=vermelho → 100=verde */ .heat:hover { transform: translateY(-2px); } .heat__area { font-size: 13.5px; } .heat__score { font-size: 18px; font-weight: 800; } /* SWOT (4 quadrantes) */ .swot { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .swot__q { border-radius: var(--raio-sm); padding: 14px 16px; border: 1px solid var(--linha); } .swot__q h4 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; } .swot__q ul { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.5; } .swot__q--f { background: var(--sucesso-bg); } .swot__q--f h4 { color: var(--sucesso); } .swot__q--o { background: var(--verde-100); } .swot__q--o h4 { color: var(--verde-700); } .swot__q--w { background: var(--atencao-bg); } .swot__q--w h4 { color: var(--atencao); } .swot__q--t { background: var(--critico-bg); } .swot__q--t h4 { color: var(--critico); } /* Plano de ação com concluído/pendente */ .plano { list-style: none; margin: 0; padding: 0; } .plano__item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--linha); } .plano__item:first-child { border-top: none; } .plano__item--ok .plano__corpo { text-decoration: line-through; color: var(--tinta-3); } .plano__check { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--linha); background: var(--superficie); cursor: pointer; color: var(--sucesso); font-weight: 800; line-height: 1; } .plano__item--ok .plano__check { background: var(--sucesso); border-color: var(--sucesso); color: #fff; } .plano__corpo { flex: 1; font-size: 14px; } @media (max-width: 720px) { .swot { grid-template-columns: 1fr; } .dossie-hero { flex-direction: column; align-items: stretch; } } /* Plano em destaque (Billing) */ .plano--destaque { border-color: var(--verde-500); box-shadow: var(--sombra-hover); position: relative; } .plano--destaque::before { content: "★"; position: absolute; top: -10px; right: 16px; background: var(--verde-500); color: #fff; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; } /* ---------- Refinamentos de experiencia (Fase 3, premium) ---------- */ /* Foco de teclado visivel e consistente (acessibilidade + sensacao premium). */ :focus-visible { outline: 2px solid var(--verde-500); outline-offset: 2px; } a:focus-visible, .btn:focus-visible, button:focus-visible, summary:focus-visible { border-radius: var(--raio-sm); } /* Anel suave nos campos ao focar — consistente em toda a plataforma. */ input:focus, select:focus, textarea:focus { outline: none; border-color: var(--verde-500); box-shadow: 0 0 0 3px rgba(46, 158, 111, .16); } /* Feedback tatil sutil ao clicar em botoes. */ .btn:active, .icone-acao:active, .periodo-nav__btn:active { transform: translateY(1px); } .btn, .icone-acao { transition: background var(--transicao), transform 80ms ease; } /* Respeita quem prefere menos movimento (acessibilidade). */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ============================================================ CONSULTOR EXECUTIVO — briefing, descobertas e recomendacoes. A FLORA "fala": abre a reuniao, mostra o que encontrou e diz o que faria se estivesse administrando a empresa hoje. ============================================================ */ .briefing { display: flex; gap: 16px; align-items: flex-start; padding: 22px 24px; border: 1px solid var(--linha); border-left: 4px solid var(--verde-500); border-radius: var(--raio); background: linear-gradient(135deg, var(--verde-100) 0%, var(--superficie) 62%); box-shadow: var(--sombra); animation: briefing-entra .42s cubic-bezier(.4, 0, .2, 1) both; } @keyframes briefing-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .briefing__avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; background: var(--verde-500); color: #fff; box-shadow: 0 4px 12px rgba(46, 158, 111, .28); } .briefing__corpo { flex: 1; min-width: 0; } .briefing__ola { margin: 0; font-size: 18px; font-weight: 700; color: var(--tinta); } .briefing__intro { margin: 4px 0 10px; color: var(--tinta-2); font-size: 14px; } .briefing__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; } .briefing__item { position: relative; padding-left: 20px; line-height: 1.5; font-size: 14.5px; color: var(--tinta); } .briefing__item::before { content: "•"; position: absolute; left: 4px; color: var(--tinta-3); font-weight: 700; } .briefing__item--positivo::before { content: "▲"; font-size: 10px; top: 3px; color: var(--sucesso); } .briefing__item--negativo::before { content: "▼"; font-size: 10px; top: 3px; color: var(--critico); } .briefing__rec { margin-top: 14px; padding: 12px 14px; border-radius: var(--raio-sm); background: var(--superficie); border: 1px solid var(--linha); } .briefing__rec-rotulo { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--verde-700); } .briefing__rec p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--tinta); } /* "O que a FLORA encontrou" — o valor entregue, em numeros. */ .descobertas__titulo { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); } .descobertas__grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); } .desc-card { padding: 16px 14px; text-align: center; background: var(--superficie); border: 1px solid var(--linha); border-top: 3px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); transition: transform var(--transicao), box-shadow var(--transicao); } .desc-card:hover { transform: translateY(-2px); box-shadow: var(--sombra-hover); } .desc-card b { display: block; font-size: 28px; line-height: 1.1; color: var(--tinta); } .desc-card span { display: block; margin-top: 4px; font-size: 12px; color: var(--tinta-2); } .desc-card--op { border-top-color: var(--sucesso); } .desc-card--op b { color: var(--sucesso); } .desc-card--ri { border-top-color: var(--atencao); } .desc-card--ri b { color: var(--atencao); } .desc-card--cr { border-top-color: var(--critico); } .desc-card--cr b { color: var(--critico); } .desc-card--ok { border-top-color: var(--verde-700); } .desc-card--nx { border-top-color: var(--verde-500); } /* "Se eu estivesse administrando esta empresa hoje, eu faria:" */ .card--ia { border-left: 4px solid var(--verde-500); } .ia-frase { margin: 2px 0 14px; font-size: 15px; font-style: italic; color: var(--tinta-2); } .ia-lista { margin: 0; padding-left: 22px; display: grid; gap: 12px; } .ia-item { color: var(--tinta); } .ia-item__acao { font-size: 15px; line-height: 1.45; } /* Atributos executivos de cada acao (prioridade / impacto / prazo). */ .plano__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--tinta-2); background: var(--fundo); border: 1px solid var(--linha); } .tag--palta { color: var(--critico); background: var(--critico-bg); border-color: var(--critico-bg); } .tag--pmedia { color: var(--atencao); background: var(--atencao-bg); border-color: var(--atencao-bg); } .tag--pbaixa { color: var(--verde-700); background: var(--sucesso-bg); border-color: var(--sucesso-bg); } .tag--link { color: var(--verde-700); text-decoration: none; } .tag--link:hover { background: var(--sucesso-bg); } /* Cartao de empresa como mini-dashboard. */ .mini-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0 10px; padding: 10px 0; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); } .mini-kpi { text-align: center; } .mini-kpi b { display: block; font-size: 17px; color: var(--tinta); } .mini-kpi span { display: block; font-size: 10.5px; color: var(--tinta-3); } .mini-kpi--op b { color: var(--sucesso); } .mini-kpi--ri b { color: var(--atencao); } .proxima-acao { margin-top: 10px; padding: 9px 11px; border-radius: var(--raio-sm); background: var(--sucesso-bg); border: 1px solid var(--linha); font-size: 13px; line-height: 1.4; color: var(--tinta); } .proxima-acao__rotulo { display: block; margin-bottom: 2px; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--verde-700); } @media (max-width: 640px) { .briefing { flex-direction: column; gap: 12px; padding: 18px; } .mini-kpis { grid-template-columns: repeat(2, 1fr); } } /* ---------- Painel competitivo (auditorias externas) ---------- */ .bench-topo { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } .bench-topo > div:first-child { flex: 1; min-width: 180px; } .bench-posicao { text-align: center; min-width: 78px; } .bench-posicao__n { display: block; font-size: 24px; font-weight: 700; color: var(--tinta); } .bench-posicao__d { display: block; font-size: 11px; color: var(--tinta-3); } .tabela-rolagem { overflow-x: auto; } .tabela-comp { width: 100%; border-collapse: collapse; font-size: 13.5px; } .tabela-comp th, .tabela-comp td { padding: 9px 12px; text-align: center; border-bottom: 1px solid var(--linha); white-space: nowrap; } .tabela-comp thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-3); font-weight: 700; } .tabela-comp tbody th { text-align: left; color: var(--tinta-2); font-weight: 600; } .tabela-comp .col-eu { background: var(--sucesso-bg); color: var(--tinta); font-weight: 700; } .tabela-comp tr:last-child th, .tabela-comp tr:last-child td { border-bottom: none; } .comp-rotulo { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; } .comp-rotulo--porque { color: var(--atencao); } .comp-rotulo--acao { color: var(--verde-700); } /* ---------- Evolucao por area (sparkline) ---------- */ .trend--flat { color: var(--tinta-3); background: var(--fundo); } .evol-areas { display: grid; gap: 10px; } .evol-area { display: grid; grid-template-columns: 1fr auto 42px 62px; align-items: center; gap: 14px; padding: 8px 10px; border-radius: var(--raio-sm); transition: background var(--transicao); } .evol-area:hover { background: var(--fundo); } .evol-area__nome { font-size: 14px; color: var(--tinta); } .evol-area__atual { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; } .spark { display: flex; align-items: flex-end; gap: 3px; height: 38px; } .spark__b { width: 7px; border-radius: 2px 2px 0 0; background: var(--tinta-3); } .spark__b--ok { background: var(--sucesso); } .spark__b--oportunidade { background: var(--verde-500); } .spark__b--atencao { background: var(--atencao); } .spark__b--critico { background: var(--critico); } @media (max-width: 640px) { .evol-area { grid-template-columns: 1fr auto; row-gap: 6px; } .evol-area__atual, .evol-area .trend { justify-self: end; } } /* ---------- Barra de ferramentas (buscar / ordenar) ---------- */ .barra-ferramentas { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; } .campo-busca { flex: 1; min-width: 220px; padding: 10px 14px; border: 1px solid var(--linha); border-radius: 999px; background: var(--superficie); color: var(--tinta); font-size: 14px; } .campo-ordenar { display: flex; align-items: center; gap: 8px; } .campo-ordenar select { padding: 9px 12px; border: 1px solid var(--linha); border-radius: var(--raio-sm); background: var(--superficie); color: var(--tinta); font-size: 14px; } /* ---------- Estado de processamento ("a FLORA esta pensando") ---------- */ .btn--ocupado { opacity: .78; pointer-events: none; } .btn--ocupado::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -1px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: girando .7s linear infinite; } @keyframes girando { to { transform: rotate(360deg); } } /* ---------- Skeleton (carregamento elegante) ---------- */ .skeleton { border-radius: var(--raio-sm); min-height: 14px; background: linear-gradient(90deg, var(--linha) 25%, var(--fundo) 37%, var(--linha) 63%); background-size: 400% 100%; animation: skeleton 1.3s ease infinite; } @keyframes skeleton { from { background-position: 100% 50%; } to { background-position: 0 50%; } } /* Estado vazio dentro de uma tabela (ocupa a linha inteira, sem quebrar o grid). */ .vazio--linha { padding: 28px 16px; } .vazio--linha .vazio__icone { font-size: 30px; } /* Acoes rapidas no cabecalho de cada tela (nada de funcionalidade escondida). */ .acoes-rapidas { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } @media (max-width: 640px) { .acoes-rapidas { width: 100%; } } /* ============================================================ ADMINISTRACAO — pessoas, permissoes, convites e sessoes ============================================================ */ /* Abas de secao (um so padrao para qualquer tela com abas). */ .abas { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 18px; border-bottom: 1px solid var(--linha); } .aba { padding: 10px 16px; font-size: 14px; font-weight: 600; color: var(--tinta-2); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: var(--raio-sm) var(--raio-sm) 0 0; transition: color var(--transicao), background var(--transicao), border-color var(--transicao); } .aba:hover { color: var(--tinta); background: var(--fundo); } .aba--ativa { color: var(--verde-700); border-bottom-color: var(--verde-500); } .aba__n { display: inline-block; min-width: 20px; padding: 1px 6px; margin-left: 4px; border-radius: 999px; background: var(--fundo); border: 1px solid var(--linha); font-size: 11px; font-weight: 700; text-align: center; } .aba--ativa .aba__n { background: var(--sucesso-bg); border-color: var(--sucesso-bg); color: var(--verde-700); } /* Botao pequeno — para acoes dentro de linhas de tabela. */ .btn--sm { padding: 5px 11px; font-size: 12.5px; } /* Formulario em linha (campos lado a lado, quebra no mobile). */ .form-linha { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; } .form-linha label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--tinta-2); } .form-linha input, .form-linha select { padding: 9px 12px; border: 1px solid var(--linha); border-radius: var(--raio-sm); background: var(--superficie); color: var(--tinta); font-size: 14px; min-width: 160px; } /* Cartoes de papel. */ .papeis-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .papel-card--atual { border-color: var(--verde-500); box-shadow: 0 0 0 1px var(--verde-500) inset; } .tag--papel { background: var(--sucesso-bg); color: var(--verde-700); border-color: var(--sucesso-bg); } /* Escolha de papel (radio em cartao — clicavel inteiro). */ .papel-opcoes { display: grid; gap: 8px; } .papel-opcao { display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; border: 1px solid var(--linha); border-radius: var(--raio-sm); cursor: pointer; transition: border-color var(--transicao), background var(--transicao); } .papel-opcao:hover { border-color: var(--verde-500); background: var(--fundo); } .papel-opcao--atual { border-color: var(--verde-500); background: var(--sucesso-bg); } .papel-opcao span { display: flex; flex-direction: column; gap: 2px; } .papel-opcao small { color: var(--tinta-2); font-size: 12.5px; line-height: 1.4; } /* Matriz de permissoes. */ .tabela-perm th { white-space: nowrap; } .tabela-perm tbody th { text-align: left; font-weight: 600; color: var(--tinta); } .tabela-perm input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--verde-500); cursor: pointer; } .linha-restrita { opacity: .55; } /* Link do convite recem-criado. */ .convite-link { display: block; margin: 8px 0; padding: 8px 10px; border-radius: var(--raio-sm); background: var(--fundo); border: 1px solid var(--linha); font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 12.5px; word-break: break-all; color: var(--tinta); } /* Trilha de navegacao (breadcrumbs). */ .trilha { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; margin-bottom: 10px; } .trilha a { color: var(--tinta-2); text-decoration: none; } .trilha a:hover { color: var(--verde-700); text-decoration: underline; } .trilha__sep { color: var(--tinta-3); } .trilha span:last-child { color: var(--tinta); font-weight: 600; } /* ============================================================ WORKSPACE — seletor de empresa no menu lateral ============================================================ */ /* Marca clicavel: leva para a Visao Geral. */ a.nav__brand { text-decoration: none; display: block; cursor: pointer; transition: transform 140ms cubic-bezier(.4, 0, .2, 1), opacity var(--transicao); } a.nav__brand:hover { transform: translateY(-1px); opacity: .92; } a.nav__brand:active { transform: translateY(0); } .empresa-switcher { position: relative; } .empresa-switcher > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; } .empresa-switcher > summary::-webkit-details-marker { display: none; } .empresa-switcher__seta { margin-left: auto; opacity: .6; font-size: 14px; transition: transform var(--transicao); } .empresa-switcher[open] .empresa-switcher__seta { transform: rotate(180deg); } .nav__empresa-id { display: flex; flex-direction: column; min-width: 0; } .nav__empresa-id b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .empresa-inicial { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-weight: 800; font-size: 14px; background: var(--verde-500); color: #fff; } .empresa-menu { margin-top: 8px; border-radius: var(--raio-sm); overflow: hidden; background: var(--superficie); border: 1px solid var(--linha); box-shadow: var(--sombra); animation: menu-entra .16s cubic-bezier(.4, 0, .2, 1) both; } @keyframes menu-entra { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .empresa-menu__busca { border-radius: 0; border: none; border-bottom: 1px solid var(--linha); width: 100%; } .empresa-menu__lista { max-height: 260px; overflow-y: auto; } .empresa-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 11px; background: none; border: none; text-align: left; cursor: pointer; color: var(--tinta); font: inherit; transition: background var(--transicao); } .empresa-item:hover:not(:disabled) { background: var(--fundo); } .empresa-item:disabled { cursor: default; } .empresa-item--atual { background: var(--sucesso-bg); } .empresa-item__id { display: flex; flex-direction: column; min-width: 0; } .empresa-item__id b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .empresa-item__id small { font-size: 11.5px; color: var(--tinta-2); } .empresa-item__check { margin-left: auto; color: var(--verde-700); font-weight: 700; } .empresa-menu__rodape { border-top: 1px solid var(--linha); padding: 8px 11px; display: grid; gap: 4px; } .empresa-menu__plano { font-size: 11px; color: var(--tinta-3); text-transform: uppercase; letter-spacing: .05em; } .empresa-menu__acao { font-size: 13px; color: var(--verde-700); text-decoration: none; padding: 3px 0; } .empresa-menu__acao:hover { text-decoration: underline; } .conector-card--atual { border-color: var(--verde-500); box-shadow: 0 0 0 1px var(--verde-500) inset; } /* ============================================================ SELECAO EM LOTE — um padrao para qualquer lista da plataforma ============================================================ */ .col-check { width: 38px; text-align: center; } .col-check input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--verde-500); cursor: pointer; } .linha-selecionada > td { background: var(--sucesso-bg); } .lote-barra { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 50; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 999px; background: var(--verde-900); color: #fff; box-shadow: 0 8px 30px rgba(16, 40, 30, .28); animation: lote-sobe .18s cubic-bezier(.4, 0, .2, 1) both; max-width: calc(100vw - 32px); } @keyframes lote-sobe { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } } .lote-barra[hidden] { display: none; } .lote-barra__n { font-size: 13.5px; font-weight: 700; white-space: nowrap; padding-left: 4px; } .lote-barra__acoes { display: flex; gap: 6px; flex-wrap: wrap; } .lote-barra .btn { background: rgba(255, 255, 255, .14); color: #fff; border: 1px solid rgba(255, 255, 255, .22); padding: 5px 12px; font-size: 12.5px; border-radius: 999px; } .lote-barra .btn:hover { background: rgba(255, 255, 255, .24); } .lote-barra .btn--perigo { background: var(--critico); border-color: var(--critico); } .lote-barra .btn--perigo:hover { background: #a5322a; } /* Espaco para a barra nao cobrir o fim da lista. */ body.com-lote .content { padding-bottom: 90px; } @media (max-width: 640px) { .lote-barra { left: 12px; right: 12px; transform: none; border-radius: var(--raio); flex-wrap: wrap; } @keyframes lote-sobe { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } } /* ---------- "Pedir para a FLORA" (a alternativa conversacional) ---------- */ .pedir-flora { position: relative; } .pedir-flora > summary { list-style: none; } .pedir-flora > summary::-webkit-details-marker { display: none; } .pedir-flora__botao { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 8px 14px; border-radius: var(--raio-sm); font-size: 13.5px; font-weight: 600; color: var(--verde-700); background: var(--sucesso-bg); border: 1px dashed var(--verde-500); transition: background var(--transicao), transform 80ms ease; } .pedir-flora__botao:hover { background: var(--verde-100); } .pedir-flora__botao:active { transform: translateY(1px); } /* A FLORA responde AQUI dentro do módulo — assistente contextual, não uma página de chat. Painel com rolagem própria, altura limitada, nunca domina a tela. */ .pedir-flora__chat { animation: menu-entra .16s cubic-bezier(.4, 0, .2, 1) both; } .pedir-flora__mensagens { display: flex; flex-direction: column; gap: 10px; max-height: 300px; overflow-y: auto; margin-top: 8px; } .pedir-flora__mensagens:empty { display: none; } .pedir-flora__mensagens .bolha { max-width: 92%; font-size: 14px; padding: 10px 13px; } .pedir-flora__limpar { align-self: flex-end; margin-top: 8px; appearance: none; cursor: pointer; background: none; border: 0; color: var(--tinta-3); font: inherit; font-size: 12.5px; padding: 2px 4px; border-radius: var(--raio-sm); } .pedir-flora__limpar:hover { color: var(--critico); background: var(--critico-bg); } .pedir-flora__form { display: flex; gap: 8px; margin-top: 8px; align-items: center; } .pedir-flora__form input[type="text"] { flex: 1; min-width: 220px; padding: 9px 13px; font-size: 14px; border: 1px solid var(--linha); border-radius: 999px; background: var(--superficie); color: var(--tinta); } /* ============================================================ BUSCA GLOBAL (Ctrl+K) ============================================================ */ .busca-global { position: fixed; inset: 0; z-index: 200; } .busca-global[hidden] { display: none; } .busca-global__fundo { position: absolute; inset: 0; background: rgba(16, 40, 30, .38); backdrop-filter: blur(2px); } .busca-global__caixa { position: relative; margin: 12vh auto 0; width: min(620px, calc(100vw - 32px)); background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: 0 20px 60px rgba(16, 40, 30, .3); overflow: hidden; animation: busca-entra .16s cubic-bezier(.4, 0, .2, 1) both; } @keyframes busca-entra { from { opacity: 0; transform: translateY(-8px) scale(.99); } to { opacity: 1; transform: none; } } .busca-global__campo { width: 100%; padding: 17px 20px; border: none; border-bottom: 1px solid var(--linha); font-size: 16px; background: transparent; color: var(--tinta); outline: none; } .busca-global__lista { max-height: 52vh; overflow-y: auto; padding: 6px; } .busca-global__grupo { padding: 10px 12px 5px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); } .busca-global__item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 12px; border: none; background: none; border-radius: var(--raio-sm); cursor: pointer; text-align: left; color: var(--tinta); font: inherit; } .busca-global__item--ativo, .busca-global__item:hover { background: var(--fundo); } .busca-global__icone { font-size: 16px; width: 22px; text-align: center; flex: none; } .busca-global__txt { display: flex; flex-direction: column; min-width: 0; } .busca-global__txt b { font-size: 14px; font-weight: 600; } .busca-global__txt small { font-size: 12px; color: var(--tinta-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .busca-global__vazio { padding: 26px 16px; text-align: center; color: var(--tinta-2); font-size: 14px; } .busca-global__rodape { display: flex; gap: 16px; padding: 9px 16px; border-top: 1px solid var(--linha); background: var(--fundo); font-size: 11.5px; color: var(--tinta-3); } .busca-global__rodape kbd { display: inline-block; padding: 1px 5px; margin-right: 3px; border-radius: 4px; border: 1px solid var(--linha); background: var(--superficie); font-family: inherit; font-size: 10.5px; } /* Gatilho no menu lateral. */ .nav__busca { display: flex; align-items: center; gap: 8px; width: 100%; margin: 10px 0 4px; padding: 8px 11px; border-radius: var(--raio-sm); cursor: pointer; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); color: inherit; font: inherit; font-size: 13px; opacity: .85; transition: background var(--transicao), opacity var(--transicao); } .nav__busca:hover { background: rgba(255, 255, 255, .13); opacity: 1; } .nav__busca kbd { margin-left: auto; padding: 1px 5px; border-radius: 4px; font-size: 10.5px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .08); } /* ---------- Formulario de escrita colapsado: parece ACAO, nao texto ---------- */ .abrir-form { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; padding: 9px 15px; border-radius: var(--raio-sm); font-size: 14px; font-weight: 600; color: #fff; background: var(--verde-500); list-style: none; transition: background var(--transicao), transform 80ms ease; } .abrir-form::-webkit-details-marker { display: none; } .abrir-form:hover { background: var(--verde-700); } .abrir-form:active { transform: translateY(1px); } .abrir-form--linha { display: flex; justify-content: space-between; width: 100%; } .abrir-form--linha a { color: #fff; text-decoration: underline; opacity: .9; } details[open] > .abrir-form { margin-bottom: 14px; } /* ---------- Faixa "vendo como" (experimentar um papel na demonstracao) ---------- */ .ver-como { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; padding: 10px 16px; border-radius: var(--raio-sm); background: var(--atencao-bg); border: 1px solid var(--atencao); color: var(--tinta); font-size: 13.5px; } .ver-como form { margin-left: auto; } /* ============================================================ MODO ADMINISTRADOR — barra fixa de impersonacao Deliberadamente impossivel de ignorar: quem esta dentro da conta de um cliente precisa lembrar disso a cada segundo. ============================================================ */ .modo-admin-barra { position: fixed; top: 0; left: 0; right: 0; z-index: 300; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 20px; background: repeating-linear-gradient(135deg, #7a1d16, #7a1d16 14px, #92241c 14px, #92241c 28px); color: #fff; font-size: 13.5px; line-height: 1.4; box-shadow: 0 2px 14px rgba(0, 0, 0, .28); } .modo-admin-barra__selo { font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, .28); white-space: nowrap; } /* Identidade: quem administra -> qual empresa esta aberta. */ .modo-admin-barra__quem { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } .modo-admin-barra__quem small { font-size: 10.5px; opacity: .82; text-transform: uppercase; letter-spacing: .05em; } .modo-admin-barra__quem b { font-weight: 700; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .modo-admin-barra__seta { opacity: .6; font-size: 15px; } .modo-admin-barra__aviso { flex: 1; min-width: 180px; opacity: .9; font-size: 12.5px; } .modo-admin-barra__sair { padding: 7px 15px; border-radius: 999px; cursor: pointer; white-space: nowrap; background: #fff; color: #7a1d16; border: none; font: inherit; font-size: 13px; font-weight: 700; transition: transform 80ms ease, background var(--transicao); } .modo-admin-barra__sair:hover { background: #ffe9e7; } .modo-admin-barra__sair:active { transform: translateY(1px); } /* A barra e fixa: o conteudo desce para nao ficar por baixo dela. */ body.com-modo-admin .app { padding-top: 52px; } body.com-modo-admin .nav { top: 52px; } @media (max-width: 640px) { body.com-modo-admin .app { padding-top: 92px; } } /* Selecao em lote dentro de listas (timeline e afins). */ .timeline__check { margin-right: 8px; accent-color: var(--verde-500); cursor: pointer; } li.linha-selecionada { background: var(--sucesso-bg); border-radius: var(--raio-sm); } /* Item de menu do painel INTERNO da FLORA (so super-admin ve). Visualmente separado do resto para nao se confundir com as areas do cliente. */ .nav__item--interno { margin-top: 10px; border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 14px; opacity: .8; } .nav__item--interno:hover { opacity: 1; } /* ============================================================ CARTAO DE CONTEXTO — de quem/do que e esta tela ============================================================ */ .ctx-card { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px 20px; margin-bottom: 18px; background: var(--superficie); border: 1px solid var(--linha); border-left: 4px solid var(--verde-500); border-radius: var(--raio); box-shadow: var(--sombra); } .ctx-card__avatar { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; font-weight: 800; letter-spacing: .5px; background: var(--verde-500); color: #fff; box-shadow: 0 4px 12px rgba(46, 158, 111, .26); } .ctx-card__id { min-width: 0; } .ctx-card__nome { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 19px; font-weight: 700; color: var(--tinta); } .ctx-card__sub { font-size: 13.5px; color: var(--tinta-2); margin-top: 2px; } .ctx-card__campos { display: flex; gap: 26px; flex-wrap: wrap; margin: 0 0 0 auto; padding: 0; } .ctx-card__campos div { min-width: 0; } .ctx-card__campos dt { font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--tinta-3); font-weight: 700; } .ctx-card__campos dd { margin: 2px 0 0; font-size: 13.5px; color: var(--tinta); font-weight: 600; } @media (max-width: 720px) { .ctx-card__campos { margin-left: 0; width: 100%; gap: 18px; } } /* ============================================================ CHECKOUT — a jornada de contratacao (modo empresa) ============================================================ */ .checkout { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } .checkout__resumo { position: sticky; top: 18px; } /* Ciclo mensal x anual. */ .ciclo-opcoes { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } .ciclo { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 16px 18px; border-radius: var(--raio); text-decoration: none; border: 2px solid var(--linha); background: var(--superficie); color: var(--tinta); transition: border-color var(--transicao), transform 80ms ease, box-shadow var(--transicao); } .ciclo:hover { border-color: var(--verde-500); transform: translateY(-1px); box-shadow: var(--sombra); } .ciclo--ativo { border-color: var(--verde-500); background: var(--sucesso-bg); } .ciclo__nome { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--tinta-2); } .ciclo__valor { font-size: 26px; font-weight: 800; letter-spacing: -.5px; } .ciclo__valor small { font-size: 14px; font-weight: 600; color: var(--tinta-2); } .ciclo__nota { font-size: 12.5px; color: var(--tinta-2); line-height: 1.4; } .ciclo__selo { position: absolute; top: -10px; right: 14px; padding: 3px 10px; border-radius: 999px; background: var(--verde-500); color: #fff; font-size: 11px; font-weight: 800; } /* Listas de ganho e perda. */ .lista-check, .lista-x { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; } .lista-check--duas { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 7px 24px; } .lista-check li, .lista-x li { position: relative; padding-left: 24px; font-size: 14px; line-height: 1.45; } .lista-check li::before { content: "✓"; position: absolute; left: 2px; color: var(--sucesso); font-weight: 800; } .lista-x li::before { content: "×"; position: absolute; left: 4px; color: var(--critico); font-weight: 800; font-size: 16px; } /* Resumo lateral. */ .resumo-card { border-top: 3px solid var(--verde-500); } .conta-linha--bonus b { color: var(--sucesso); } .resumo-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--linha); } .resumo-total span { font-size: 13px; color: var(--tinta-2); } .resumo-total b { font-size: 25px; font-weight: 800; letter-spacing: -.5px; } .cupom { display: block; font-size: 12.5px; color: var(--tinta-2); } .cupom__linha { display: flex; gap: 6px; margin-top: 5px; } .cupom input { flex: 1; min-width: 0; padding: 8px 12px; font-size: 13.5px; border: 1px solid var(--linha); border-radius: var(--raio-sm); background: var(--superficie); color: var(--tinta); } .formas { display: grid; gap: 8px; margin-top: 10px; } .forma { display: flex; align-items: center; gap: 10px; padding: 11px 13px; cursor: pointer; border: 1px solid var(--linha); border-radius: var(--raio-sm); font-size: 14px; transition: border-color var(--transicao), background var(--transicao); } .forma:hover { border-color: var(--verde-500); background: var(--fundo); } .forma:has(input:checked) { border-color: var(--verde-500); background: var(--sucesso-bg); } .forma input { accent-color: var(--verde-500); } .btn--grande { padding: 13px 20px; font-size: 15px; font-weight: 700; } .termos { font-size: 11.5px; color: var(--tinta-3); line-height: 1.5; } /* Perguntas frequentes. */ .faq { display: grid; gap: 2px; } .faq__item { border-bottom: 1px solid var(--linha); } .faq__item summary { cursor: pointer; padding: 12px 2px; font-size: 14px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary::after { content: "+"; color: var(--tinta-3); font-size: 18px; font-weight: 400; } .faq__item[open] summary::after { content: "−"; } .faq__item p { margin: 0 0 14px; font-size: 13.5px; color: var(--tinta-2); line-height: 1.6; } /* ---------- Contratacao recebida ---------- */ .recebido { max-width: 620px; margin: 0 auto; text-align: center; padding: 18px 0 40px; } .recebido__marca { width: 62px; height: 62px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center; font-size: 30px; color: #fff; background: var(--verde-500); box-shadow: 0 8px 24px rgba(46, 158, 111, .3); animation: recebido-entra .4s cubic-bezier(.2, .9, .3, 1.2) both; } @keyframes recebido-entra { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } } .recebido__titulo { font-size: 25px; margin: 0 0 8px; } .recebido__texto { color: var(--tinta-2); font-size: 15.5px; line-height: 1.6; margin: 0 0 22px; } .recebido__resumo { text-align: left; margin-bottom: 22px; } .recebido__passos { display: grid; gap: 12px; text-align: left; margin-bottom: 22px; } .passo { display: flex; gap: 12px; align-items: flex-start; } .passo__n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--sucesso-bg); color: var(--verde-700); font-weight: 800; font-size: 13px; } .passo b { display: block; font-size: 14px; } .passo small { color: var(--tinta-2); font-size: 13px; line-height: 1.5; } .recebido__nota { padding: 12px 16px; border-radius: var(--raio-sm); background: var(--fundo); border: 1px solid var(--linha); font-size: 13.5px; color: var(--tinta-2); margin-bottom: 22px; } /* ---------- Cotação inteligente (Compras) ---------- */ /* Stepper horizontal do fluxo de compra (nome proprio, nao colide com .passo). */ .fluxo { display: flex; gap: 8px; flex-wrap: wrap; } .fluxo-passo { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--fundo); border: 1px solid var(--linha); } .fluxo-bola { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--linha); color: var(--tinta-2); font-weight: 700; font-size: 12px; } .fluxo-rotulo { font-size: 12.5px; font-weight: 600; color: var(--tinta-2); } .fluxo-passo--ok .fluxo-bola { background: var(--sucesso-bg); color: var(--verde-700); } .fluxo-passo--ok .fluxo-rotulo { color: var(--tinta); } .fluxo-passo--atual { border-color: var(--verde-500); background: var(--sucesso-bg); } .fluxo-passo--atual .fluxo-bola { background: var(--verde-700); color: #fff; } .fluxo-passo--atual .fluxo-rotulo { color: var(--verde-700); } /* Bloco da mensagem pronta para WhatsApp (texto que o empresario copia/envia). */ .mensagem-wpp { white-space: pre-wrap; font-family: inherit; font-size: 13.5px; line-height: 1.55; color: var(--tinta); background: var(--fundo); border: 1px solid var(--linha); border-radius: var(--raio-sm); padding: 14px 16px; margin: 12px 0; overflow-x: auto; } .btn--wpp { background: #25d366; color: #073; display: inline-block; } .btn--wpp:hover { background: #1eb457; } .decisao-botoes { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; } .decisao-negociar summary { list-style: none; cursor: pointer; } .decisao-negociar summary::-webkit-details-marker { display: none; } .aviso-inline { padding: 10px 14px; border-radius: var(--raio-sm); background: var(--atencao-bg); color: var(--atencao); font-size: 13.5px; font-weight: 500; } .sep { border: 0; border-top: 1px solid var(--linha); margin: 20px 0; } .mb-12 { margin-bottom: 12px; } @media (max-width: 900px) { .checkout { grid-template-columns: 1fr; } .checkout__resumo { position: static; } } /* ============================================================ ESTADOS DA INTERFACE — um comportamento so, em toda a plataforma Antes, `:disabled` so existia dentro do chat e do seletor de empresas: um botao desabilitado em qualquer outra tela ficava identico a um ativo. ============================================================ */ .btn:disabled, button:disabled, input:disabled, select:disabled, textarea:disabled { opacity: .55; cursor: not-allowed; filter: grayscale(.35); } .btn:disabled:hover, button:disabled:hover { transform: none; } input:disabled, select:disabled, textarea:disabled { background: var(--fundo); color: var(--tinta-3); } /* Campo invalido depois que a pessoa tentou enviar (nunca enquanto digita). */ form.foi-enviado :invalid { border-color: var(--critico); box-shadow: 0 0 0 3px var(--critico-bg); } /* Placeholder consistente (alguns navegadores usam cinza quase invisivel). */ ::placeholder { color: var(--tinta-3); opacity: 1; } /* Somente-leitura difere de desabilitado: da para copiar, nao da para editar. */ /* :read-only tambem casa com campos DESABILITADOS — excluimos para nao sobrescrever o cursor de "nao permitido". */ input:read-only:not(:disabled):not([type="checkbox"]):not([type="radio"]) { background: var(--fundo); cursor: default; } /* Link e botao em foco por teclado: mesmo anel do resto (acessibilidade). */ .btn:focus-visible, .aba:focus-visible, .empresa-item:focus-visible, .busca-global__item:focus-visible, .abrir-form:focus-visible { outline: 2px solid var(--verde-500); outline-offset: 2px; } /* ============================================================================ CHECKOUT & PAGAMENTO — seleção de método (componentizada) + interface premium. A UI é a mesma para qualquer gateway; os componentes vivem em billing/metodos/*. ============================================================================ */ .pay-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; } .pay-tab { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; padding: 14px 14px; border-radius: 14px; cursor: pointer; background: var(--superficie, #fff); border: 1.5px solid var(--borda, rgba(0,0,0,.10)); color: var(--tinta-2, #55645c); transition: border-color .18s, box-shadow .18s, color .18s, transform .12s; } .pay-tab:hover { border-color: color-mix(in srgb, var(--verde-700,#2f6f4e) 45%, var(--borda,#ccc)); transform: translateY(-1px); } .pay-tab__ic { color: var(--tinta-2, #8a978f); transition: color .18s; } .pay-tab__nome { font-weight: 700; font-size: 14.5px; color: var(--tinta, #14201a); } .pay-tab__resumo { font-size: 12px; color: var(--tinta-2, #8a978f); } .pay-tab--ativa { border-color: var(--verde-700, #2f6f4e); color: var(--verde-800, #1f4d37); box-shadow: 0 0 0 3px color-mix(in srgb, var(--verde-700,#2f6f4e) 14%, transparent); } .pay-tab--ativa .pay-tab__ic { color: var(--verde-700, #2f6f4e); } .pay-panel { display: none; margin-top: 16px; } .pay-panel--ativa { display: block; animation: pay-fade .28s ease; } @keyframes pay-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .pay-cardform { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .pay-cardform .lancar-form__full { grid-column: 1 / -1; } .pay-cardform label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--tinta-2,#55645c); } .pay-cardform input, .pay-cardform select { padding: 11px 12px; border-radius: 10px; border: 1px solid var(--borda, rgba(0,0,0,.14)); background: var(--superficie,#fff); color: var(--tinta,#14201a); font-size: 14px; } /* Ações do resumo: coluna com espaçamento — os botões NUNCA se sobrepõem. */ .pay-actions-col { display: flex; flex-direction: column; gap: 10px; } .pay-actions-col .btn { width: 100%; justify-content: center; } .pay-erro { margin-top: 16px; } /* Resultado (checkout inline e página de pagamento). */ .checkout-result { max-width: 640px; margin: 0 auto; } .checkout-result .pay-result { background: var(--superficie,#fff); border: 1px solid var(--borda, rgba(0,0,0,.08)); border-radius: 16px; padding: 22px; box-shadow: 0 10px 30px rgba(16,40,28,.06); } .pay-result { display: block; } .pay-status { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; } .pay-status__msg { color: var(--tinta-2, #55645c); font-size: 14px; } .pay-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; padding: 5px 12px; border-radius: 999px; } .pay-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .pay-badge--aguardando { color: #9a6b00; background: #fff4dc; } .pay-badge--processando { color: #1b5fb0; background: #e2eefb; } .pay-badge--pago { color: #1f7a4d; background: #dcf3e6; } .pay-badge--vencido, .pay-badge--cancelado, .pay-badge--estornado, .pay-badge--erro { color: #b02a2a; background: #fbe4e4; } .pay-pix { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; margin-top: 14px; } .pay-qr { flex-shrink: 0; text-align: center; } .pay-qr img { border-radius: 10px; background: #fff; padding: 8px; border: 1px solid var(--borda, rgba(0,0,0,.08)); image-rendering: pixelated; } .pay-qr__ph { width: 180px; height: 180px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--fundo, #f4f7f4); border: 1px dashed var(--borda, rgba(0,0,0,.18)); color: color-mix(in srgb, var(--verde-700,#2f6f4e) 55%, #98a89f); } .pay-qr__nota { display: block; max-width: 180px; margin: 8px auto 0; font-size: 11.5px; color: var(--tinta-2,#8a978f); } .pay-pix__side { flex: 1; min-width: 240px; } .pay-lead { font-size: 15px; line-height: 1.55; color: var(--tinta,#14201a); margin: 0 0 12px; } .pay-hint { font-size: 12.5px; line-height: 1.5; color: var(--tinta-2,#8a978f); margin: 10px 0 0; } .pay-label { display: block; font-size: 12px; font-weight: 700; color: var(--tinta-2,#55645c); margin-bottom: 5px; } .pay-copia { display: flex; gap: 8px; } .pay-copia input { flex: 1; padding: 11px 12px; border-radius: 10px; font-size: 13px; font-family: monospace; border: 1px solid var(--borda, rgba(0,0,0,.14)); background: var(--fundo,#f6f8f6); color: var(--tinta,#14201a); } .pay-copia__btn { flex-shrink: 0; border: 0; border-radius: 10px; padding: 0 16px; cursor: pointer; font-weight: 700; font-size: 13px; background: var(--verde-700, #2f6f4e); color: #fff; transition: filter .15s; } .pay-copia__btn:hover { filter: brightness(1.07); } .pay-copia__btn.is-copied { background: #1f7a4d; } .pay-boleto { margin-top: 14px; } .pay-boleto__venc { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; } .pay-boleto__venc b { font-size: 16px; color: var(--tinta,#14201a); } .pay-boleto__baixar { margin: 16px 0 0; } .pay-cartao { margin-top: 14px; text-align: center; } .pay-cartao__lock { color: var(--verde-700,#2f6f4e); margin-bottom: 6px; } .pay-sucesso { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 14px 16px; border-radius: 12px; background: #dcf3e6; color: #1f4d37; } .pay-sucesso__mark { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: #1f7a4d; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; } .pay-sucesso span { display: block; font-size: 13px; opacity: .85; } .pay-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; } @media (max-width: 560px) { .pay-cardform { grid-template-columns: 1fr; } .pay-pix { gap: 14px; } } /* ---- Checkout: campos premium + segmentado Pessoa Física/Jurídica ---- */ .pay-seg { display: inline-flex; padding: 4px; gap: 4px; border-radius: 12px; background: var(--fundo, #f4f7f4); border: 1px solid var(--borda, rgba(0,0,0,.08)); } .pay-seg__op { border: 0; background: transparent; cursor: pointer; padding: 9px 18px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--tinta-2, #55645c); transition: background .18s, color .18s, box-shadow .18s; } .pay-seg__op.is-on { background: var(--superficie, #fff); color: var(--verde-800, #1f4d37); box-shadow: 0 1px 4px rgba(16,40,28,.10); } .pay-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; } .pay-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .pay-field--full { grid-column: 1 / -1; } .pay-field > label { font-size: 12px; font-weight: 600; letter-spacing: .01em; color: var(--tinta-2, #6b7a72); } .pay-field .req { font-weight: 500; color: #b02a2a; font-size: 11px; margin-left: 4px; } .pay-field input, .pay-field select { width: 100%; box-sizing: border-box; padding: 14px 15px; font-size: 15px; border-radius: 12px; background: var(--superficie, #fff); color: var(--tinta, #14201a); border: 1.5px solid var(--borda, rgba(0,0,0,.12)); transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; } .pay-field input::placeholder { color: color-mix(in srgb, var(--tinta-2,#6b7a72) 65%, transparent); } .pay-field input:hover, .pay-field select:hover { border-color: color-mix(in srgb, var(--verde-700,#2f6f4e) 40%, var(--borda,#ccc)); } .pay-field input:focus, .pay-field select:focus { outline: none; border-color: var(--verde-700, #2f6f4e); box-shadow: 0 0 0 3px color-mix(in srgb, var(--verde-700,#2f6f4e) 15%, transparent); } .pay-field input.campo-invalido { border-color: #d15b5b; box-shadow: 0 0 0 3px rgba(209,91,91,.14); } .pay-field .campo-erro { color: #b02a2a; font-size: 11.5px; } .pay-endereco > summary { cursor: pointer; font-size: 13.5px; color: var(--verde-800, #1f4d37); font-weight: 600; padding: 6px 0; list-style: none; } .pay-endereco > summary::-webkit-details-marker { display: none; } .pay-endereco > summary::before { content: "＋ "; color: var(--verde-700, #2f6f4e); } .pay-endereco[open] > summary::before { content: "− "; } @media (max-width: 560px) { .pay-fields { grid-template-columns: 1fr; } .pay-seg { width: 100%; } .pay-seg__op { flex: 1; } } /* ============================================================================ CONECTORES — tela genérica reutilizável (lista + configuração por conector). ============================================================================ */ .cx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin-top: 8px; } .cx-card { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 16px; text-decoration: none; background: var(--superficie, #fff); border: 1px solid var(--borda, rgba(0,0,0,.08)); box-shadow: 0 2px 10px rgba(16,40,28,.04); transition: transform .14s, box-shadow .18s, border-color .18s; } .cx-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(16,40,28,.10); border-color: color-mix(in srgb, var(--verde-700,#2f6f4e) 40%, var(--borda,#ccc)); } .cx-card__top { display: flex; align-items: center; justify-content: space-between; } .cx-card__ic { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: var(--fundo, #f4f7f4); color: var(--verde-700, #2f6f4e); font-weight: 800; font-size: 17px; } .cx-card__nome { font-weight: 700; font-size: 16px; color: var(--tinta, #14201a); margin-top: 4px; } .cx-card__desc { font-size: 13px; color: var(--tinta-2, #6b7a72); flex: 1; } .cx-card__acao { font-size: 13px; font-weight: 700; color: var(--verde-700, #2f6f4e); } .cx-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 4px; } .cx-secret { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; } .cx-secret .cfg-input { flex: 1; margin-bottom: 0; font-family: monospace; letter-spacing: .04em; } .cx-leitura { display: block; padding: 12px 14px; border-radius: 10px; margin-bottom: 4px; font-size: 13px; word-break: break-all; background: var(--fundo, #f4f7f4); border: 1px solid var(--borda, rgba(0,0,0,.08)); } .cx-ajuda { display: block; color: var(--tinta-2, #8a978f); font-size: 12px; margin: -4px 0 14px; } .cx-botoes { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .cx-botoes form { margin: 0; } .cx-check { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 14px; color: var(--tinta-2, #8a978f); } .cx-check span { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; border: 2px solid #c3cec8; display: inline-flex; align-items: center; justify-content: center; } .cx-check.is-on { color: var(--tinta, #14201a); font-weight: 600; } .cx-check.is-on span { background: var(--verde-700, #2f6f4e); border-color: var(--verde-700, #2f6f4e); } .cx-check.is-on span::after { content: "✓"; color: #fff; font-size: 11px; font-weight: 800; } .cx-info { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; font-size: 13px; border-top: 1px solid var(--borda, rgba(0,0,0,.05)); } .cx-info span { color: var(--tinta-2, #8a978f); } .cx-info b { color: var(--tinta, #14201a); text-align: right; word-break: break-word; }