/* /static/css/theme.css Tema global (light/dark) + componentes comuns. Usa data-theme e data-bs-theme (Bootstrap 5.3) no . — Versão definitiva — */ /* ========================= TOKENS — LIGHT (padrão) ========================= */ :root, :root[data-theme="light"], :root[data-bs-theme="light"]{ --bg: #f7f9fc; --text: #0f172a; --muted: #64748b; --surface-1: #ffffff; /* cards */ --surface-2: #f8fafc; /* caixas internas .box */ /* linhas/bordas no CLARO = um pouco mais escuras que o fundo */ --border: #cbd5e1; /* padrão */ --border-strong: #bcc6d8; /* contorno visível */ --divider: #cfd6e5; /* linhas internas/hr */ --stroke: 1.5px; /* ESPESSURA PADRÃO */ --shadow: rgba(0,0,0,.08); --accent: #4b6d98; --primary: var(--accent); --accent-contrast:#ffffff; --success: #4b6d98; --warning: #f5c56b; --danger: #ff7a7a; /* tabela/pdf */ --thead: #e6eef8; /* switches no CLARO */ --switch-bg: #eef2f7; --switch-border: #cbd5e1; --bs-success: #4b6d98; --bs-success-rgb: 75,109,152; /* chips */ --chip-on-bg:#e9f7ef; --chip-on-text:#14834a; --chip-on-border:#b7e1c8; --chip-off-bg:#fceaea; --chip-off-text:#b00020; --chip-off-border:#f4c7cd; --bs-primary: var(--accent); } /* ========================= AJUSTE DOS BOTÕES SUCCESS ========================= */ .btn-success{ --bs-btn-bg: #4b6d98; --bs-btn-border-color: #4b6d98; --bs-btn-hover-bg: #3f5d81; --bs-btn-hover-border-color: #3b5677; --bs-btn-active-bg: #374e6d; --bs-btn-active-border-color: #334763; --bs-btn-disabled-bg: #4b6d98; --bs-btn-disabled-border-color: #4b6d98; } .btn-outline-success{ --bs-btn-color: #4b6d98; --bs-btn-border-color: #4b6d98; --bs-btn-hover-bg: #4b6d98; --bs-btn-hover-border-color: #4b6d98; --bs-btn-active-bg: #4b6d98; --bs-btn-active-border-color: #4b6d98; } /* ========================= TOKENS — DARK ========================= */ :root[data-theme="dark"], :root[data-bs-theme="dark"]{ --bg: #0d1927; --text: #ffffff; --muted: #aeb6d1; /* iguais aos que você usou na página referência */ --surface-1: #1f212e; /* cards (.card-dark) */ --surface-2: #242b37; /* caixas internas (.box) */ /* bordas iguais às da referência: caixas com 1.5px #64748b e inputs com #444 */ --border: #444444; /* inputs / elementos sutis */ --border-strong: #64748b; /* contorno visível de caixas */ --divider: #394357; /* linhas internas/hr */ --stroke: 1.5px; --shadow: rgba(0,0,0,.12); --accent: #4cafef; --primary: var(--accent); --accent-contrast:#0b1220; --success: #4b6d98; --warning: #f5c56b; --danger: #ff7a7a; --thead: #282c34; /* switches no ESCURO */ --switch-bg: #263042; --switch-border: #3d4a61; --bs-success: #4b6d98; --bs-success-rgb: 75,109,152; --chip-on-bg:#203a2a; --chip-on-text:#65d36e; --chip-on-border:#2e6846; --chip-off-bg:#3a2020; --chip-off-text:#ff7a7a; --chip-off-border:#6b2a2a; --bs-primary: var(--accent); } /* ========================= BASE GLOBAL ========================= */ html, body{ background-color: var(--bg); color: var(--text); } body{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ========================= DASHBOARD (KPIs / Filtros) ========================= */ /* Escopo da página de dashboard */ body.page-dashboard{ background-color: var(--bg); color: var(--text); } /* Wrapper principal */ body.page-dashboard .dashboard-wrapper{ max-width: 1200px; margin: 0 auto; padding: 32px 16px 48px; } /* Títulos de seção (se você vier a usar) */ body.page-dashboard .section-title{ font-size: 1.25rem; font-weight: 600; margin-bottom: 1rem; } /* Texto “muted” específico do dashboard */ body.page-dashboard .text-muted-custom{ color: var(--muted); } /* Botões do filtro "Visualizar" */ body.page-dashboard .view-toggle-group{ display: inline-flex; border-radius: 999px; border: 1px solid var(--border-strong); overflow: hidden; background: var(--surface-1); } body.page-dashboard .view-toggle-btn{ padding: 8px 20px; font-size: .95rem; border: none; background: transparent; color: var(--muted); cursor: pointer; transition: background-color .15s ease, color .15s ease; min-width: 110px; text-align: center; } body.page-dashboard .view-toggle-btn + .view-toggle-btn{ border-left: 1px solid var(--divider); } body.page-dashboard .view-toggle-btn.active{ background: var(--primary); color: var(--accent-contrast); } /* Filtros de datas */ body.page-dashboard .filters-row{ row-gap: 1rem; } body.page-dashboard .preset-btn{ min-width: 90px; } body.page-dashboard .kpi-card{ position: relative; border-radius: 18px; padding: 18px 18px 16px 18px; background-color: var(--surface-1); border: var(--stroke) solid var(--border-strong); overflow: hidden; box-shadow: 0 2px 6px var(--shadow); } /* “chave” lateral dos KPIs – mantém o mesmo gradiente fixo */ body.page-dashboard .kpi-card::before{ content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 999px; background: linear-gradient(180deg, #f7c86a, #f48a3b); } body.page-dashboard .kpi-label{ font-size: .9rem; color: var(--muted); margin-bottom: 4px; } body.page-dashboard .kpi-value{ font-size: 1.6rem; font-weight: 700; letter-spacing: .02em; margin-bottom: 4px; white-space: nowrap; } body.page-dashboard .kpi-subtitle{ font-size: .8rem; color: var(--muted); } /* Ajustes responsivos */ @media (max-width: 576px){ body.page-dashboard .dashboard-wrapper{ padding-inline: 12px; } body.page-dashboard .kpi-value{ font-size: 1.4rem; } } /* ========================= DASHBOARD – GRÁFICO DE FATURAMENTO ========================= */ body.page-dashboard .dashboard-section-title{ font-size: .95rem; font-weight: 600; color: var(--muted); margin-bottom: .35rem; } body.page-dashboard .dashboard-card-full{ background-color: var(--surface-1); border-radius: 24px; padding: 18px 18px 16px 18px; border: var(--stroke) solid var(--border-strong); box-shadow: 0 2px 6px var(--shadow); } body.page-dashboard .dashboard-card-header{ margin-bottom: 8px; } body.page-dashboard .dashboard-card-title{ font-size: .95rem; font-weight: 600; } body.page-dashboard .dashboard-card-subtitle{ font-size: .8rem; color: var(--muted); } body.page-dashboard .dashboard-chart-wrapper{ position: relative; width: 100%; height: 260px; } @media (min-width: 992px){ body.page-dashboard .dashboard-chart-wrapper{ height: 300px; } } body.page-dashboard .dashboard-link{ color: var(--primary); text-decoration: none; font-weight: 500; } body.page-dashboard .dashboard-link:hover{ text-decoration: underline; } .card-dark{ background-color: var(--surface-1) !important; color: var(--text); border: none !important; border-radius: 12px; padding: 20px; margin-bottom: 20px; box-shadow: 0 2px 8px var(--shadow); } .box{ background: var(--surface-2); border: var(--stroke) solid var(--border-strong); border-radius: 14px; padding: 16px; box-shadow: 0 1px 7px rgba(59,130,246,.08); color: var(--text); } .box hr{ border: 0; border-top: var(--stroke) solid var(--divider); opacity: 1; margin: .75rem 0; } /* Formulários */ .form-control, .form-select{ background-color: var(--surface-1) !important; color: var(--text) !important; border: 1px solid var(--border) !important; border-radius: 8px !important; } .form-control::placeholder{ color: var(--muted) !important; } .progress{ background-color: var(--surface-1) !important; } /* Chips */ .chip{ display:inline-block; font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); vertical-align: middle; margin-left: .5rem; /* dá respiro ao lado do título (ex.: Provedores Pix) */ } .chip.on{ background: var(--chip-on-bg); color: var(--chip-on-text); border-color: var(--chip-on-border); } .chip.off{ background: var(--chip-off-bg); color: var(--chip-off-text); border-color: var(--chip-off-border); } .chip-align-fix{ line-height: 1; /* evita a “esticada” vertical que sobe o texto */ padding-top: 8px; /* desce ~1px o texto */ padding-bottom: 1px; /* mantém a altura visual */ } /* ========================= ACCORDION (Provedores Pix etc.) ========================= */ .accordion .accordion-item{ background-color: var(--surface-1) !important; border: var(--stroke) solid var(--border-strong) !important; border-radius: 12px !important; overflow: hidden; margin-bottom: 12px; color: var(--text); } .accordion .accordion-header{ position: relative; } .accordion .accordion-body{ background-color: var(--surface-1) !important; color: var(--text) !important; } .accordion .accordion-button{ position: relative; background-color: var(--surface-2) !important; color: var(--text) !important; border: none !important; padding: 12px 18px !important; font-size: .95rem !important; /* chevron colado à direita (sem reservar espaço gigante) */ padding-right: 2.75rem !important; } .accordion .accordion-button::after{ position: absolute; right: 1rem; /* cola na borda direita */ --bs-accordion-btn-icon-width: .95rem; /* chevron ligeiramente menor */ } /* MOBILE: cabeçalho do accordion na 1ª linha; botões na 2ª linha */ @media (max-width: 576px){ .accordion .accordion-header{ display:flex; /* força layout flex no header */ flex-wrap:wrap; /* permite quebrar de linha */ align-items:flex-start; gap:.5rem; } /* Título/trigger ocupa a largura toda com chevron colado à direita */ .accordion .accordion-header .accordion-button{ width:100% !important; padding-right: 2.4rem !important; } .accordion .accordion-header .accordion-button::after{ right: .75rem !important; } /* Grupo de ações (ícones/botões) desce para a linha de baixo */ .accordion .accordion-header > .d-flex, .accordion .accordion-header > .btn-group, .accordion .accordion-header > .btn, .accordion .accordion-header > .accordion-actions{ width: 100%; display: flex; gap: .5rem; align-items: center; /* sobe um pouco e dá respiro na base */ margin: .1rem 0 .55rem; justify-content: flex-start; /* mude para flex-end se quiser à direita */ order: 2; /* garante que fique na 2ª linha no mobile */ } } /* posiciona o toggle fixo na extrema direita */ .acc-toggle{ position: absolute; top: 50%; right: 12px; /* antes: 6px */ transform: translateY(-50%); background: transparent !important; padding: 0 !important; margin: 0 !important; z-index: 3; } /* responsivo */ @media (max-width: 576px){ /* mantém apenas o ajuste do toggle; o botão segue o bloco responsivo acima */ .acc-toggle{ right: 10px; } } .acc-toggle .form-check-input{ width: 3rem !important; height: 1.6rem !important; background-color: var(--switch-bg) !important; border: 1px solid var(--switch-border) !important; box-shadow: none !important; cursor: pointer !important; } .acc-toggle .form-check-input:not(:checked){ background-image: none !important; } .acc-toggle .form-check-input:checked{ background-color: #2b6cff !important; border-color: #2b6cff !important; } .acc-toggle .form-check-input:focus{ box-shadow: 0 0 0 .15rem rgba(43,108,255,.25) !important; } /* ========================= SWITCHES (globais e “modern-switch”) ========================= */ /* Torna todo switch Bootstrap mais legível nos dois temas */ .form-switch .form-check-input{ background-color: var(--switch-bg) !important; border: 1px solid var(--switch-border) !important; box-shadow: none !important; } .form-switch .form-check-input:checked{ background-color: var(--accent) !important; border-color: var(--accent) !important; } .form-switch .form-check-input:focus{ box-shadow: 0 0 0 .15rem rgba(76,175,239,.35) !important; } /* Variante “modern-switch” (usada em Permissões dos Membros) */ .modern-switch.form-check{ display: inline-flex !important; align-items: center; gap: .7rem; padding-left: 0 !important; margin: 0 !important; white-space: normal; } .modern-switch .form-check-input{ position: static !important; margin: 0 !important; width: 2.6em !important; height: 1.35em !important; background-color: var(--switch-bg) !important; border: 1px solid var(--switch-border) !important; transition: background-color .25s ease, border-color .25s ease; cursor: pointer; } .modern-switch .form-check-input:checked{ background-color: var(--accent) !important; border-color: var(--accent) !important; } .modern-switch .form-check-input:focus{ box-shadow: 0 0 0 .15rem rgba(76,175,239,.35) !important; } .modern-switch .form-check-label{ color: var(--text) !important; font-size: .92rem !important; } /* ========================= DEMAIS AJUSTES COMUNS ========================= */ #treemap text{ fill: var(--text); } /* Botões utilitários (opcional, usados em alguns pontos) */ .btn-success{ background-color: var(--success) !important; border: none !important; color: #fff !important; } /* Cancelar edição: texto branco no hover/focus/active */ .btn-outline-warning{ color: var(--warning) !important; border-color: var(--warning) !important; background: transparent !important; } .btn-outline-warning:hover, .btn-outline-warning:focus, .btn-outline-warning:active, .btn-outline-warning.active{ color: #fff !important; background-color: var(--warning) !important; border-color: var(--warning) !important; } /* ===== Inversão correta dos botões "claros" por tema ===== */ /* MODO CLARO: btn-light e btn-outline-light precisam de contorno/contraste */ html[data-theme="light"] .btn-light, html[data-bs-theme="light"] .btn-light{ background: var(--surface-2) !important; /* não some no fundo branco */ color: var(--text) !important; border: 1px solid var(--border-strong) !important; box-shadow: 0 1px 2px var(--shadow); } html[data-theme="light"] .btn-light:hover, html[data-bs-theme="light"] .btn-light:hover{ background: var(--surface-1) !important; border-color: var(--border-strong) !important; } html[data-theme="light"] .btn-light:active, html[data-bs-theme="light"] .btn-light:active{ transform: translateY(1px); } html[data-theme="light"] .btn-outline-light, html[data-bs-theme="light"] .btn-outline-light{ background: transparent !important; color: var(--text) !important; border: 1px solid var(--border-strong) !important; } html[data-theme="light"] .btn-outline-light:hover, html[data-bs-theme="light"] .btn-outline-light:hover{ background: var(--surface-2) !important; color: var(--text) !important; border-color: var(--border-strong) !important; } /* MODO ESCURO: mantém o “botão branco” com contraste alto */ html[data-theme="dark"] .btn-light, html[data-bs-theme="dark"] .btn-light{ background: #ffffff !important; color: #111 !important; border: 1px solid rgba(255,255,255,.25) !important; } html[data-theme="dark"] .btn-outline-light, html[data-bs-theme="dark"] .btn-outline-light{ color: #ffffff !important; border: 1px solid rgba(255,255,255,.75) !important; } /* Ícones seguem a cor do texto do botão */ .btn-light svg, .btn-outline-light svg{ fill: currentColor; } /* Menus/flutuantes — usado no avatar (Mudar/Remover foto) */ .floating-menu{ position: absolute; min-width: 180px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px var(--shadow); padding: 6px; z-index: 10000; display: none; /* o JS alterna para 'block' e posiciona abaixo do avatar */ color: var(--text); } .floating-menu .menu-item{ display:block; width:100%; text-align:left; padding:8px 10px; color: var(--text); background: transparent; border: none; border-radius: 8px; cursor: pointer; font-size: .92rem; } .floating-menu .menu-item:hover{ background: color-mix(in oklab, var(--text) 8%, transparent); } .floating-menu .menu-item.danger{ color: var(--danger); } /* ===== Galeria de modelos PDF – tamanhos/limites ===== */ .tpl-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap:12px; } .pdf-tpl{ position: relative; background: var(--surface-2); border: var(--stroke) solid var(--border); border-radius: 12px; padding: 10px; color: var(--text); transition: transform .06s ease, border-color .2s ease, box-shadow .2s ease; } .pdf-tpl:hover{ transform: translateY(-1px); border-color: var(--accent); } .pdf-tpl.selected{ box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 35%, transparent); border-color: var(--accent); } .pdf-tpl .thumb{ width: 100%; height: 120px; /* <- força a altura da miniatura */ overflow: hidden; /* <- evita que o SVG “estoure” */ border-radius: 8px; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border: 1px dashed color-mix(in oklab, var(--border) 70%, transparent); display: grid; place-items: center; } /* Mapeia as cores dos SVGs de preview para o tema (light/dark) */ /* 1) fundo do “canvas” do SVG (primeiro rect) segue surface-1 */ .pdf-tpl .thumb svg > rect:first-of-type{ fill: var(--surface-1) !important; } /* 2) barras/accent com o azul fixo do mock usam o --accent do tema */ .pdf-tpl .thumb svg [fill="#4cafef"]{ fill: var(--accent) !important; } /* 3) demais blocos internos ficam como surface-2 com borda do tema (não altera o topo preto dos thumbs de “Globex”) */ .pdf-tpl .thumb svg > rect:not(:first-of-type):not([fill="#4cafef"]):not([fill="#000"]){ fill: var(--surface-2) !important; stroke: var(--border) !important; } /* Faz o conteúdo caber dentro da thumb, seja ou */ .pdf-tpl .thumb > svg, .pdf-tpl .thumb > img{ width: 100%; height: 100%; display: block; object-fit: contain; } .pdf-tpl .name{ margin-top: 8px; font-weight: 700; font-size: .95rem; color: var(--text); } .pdf-tpl .desc{ margin-top: 2px; font-size: .8rem; color: var(--muted); } /* Linha de cores (primária, texto, thead) — lado a lado e responsivo */ .color-row{ display:flex; flex-wrap:wrap; gap:12px; align-items:end; } .color-row > .color-item{ flex:0 0 auto; /* não esticar */ } .color-row .form-control-color{ width:52px; height:36px; padding:2px; border-radius:8px; } .color-row .form-label{ margin-bottom:.4rem; } /* divisor mais sutil entre seções dentro do card */ .card-dark hr{ border-color: color-mix(in oklab, var(--border) 60%, transparent) !important; border-top-width: var(--stroke); opacity: 1; } /* (opcional) garantir a divisória do cabeçalho da sessão igual nas duas páginas */ [data-theme="light"] .session-head{ border-bottom:1.5px solid #d7dde7 !important; } [data-theme="dark"] .session-head{ border-bottom:1.5px solid #2a3242 !important; } /* Divisória de seção sutil e consistente dentro de cards/box */ .section-divider{ border: 0; height: 0; border-top: var(--stroke) solid var(--divider) !important; margin: 12px 0; opacity: 1; } /* Dentro de .box garante cor do divider mesmo com regras do card */ .box .section-divider{ border-top-color: var(--divider) !important; } /* Acordeon com borda e raio suaves (opt-in) */ .accordion-soft .accordion-item{ border: var(--stroke) solid var(--border); border-radius: 12px; overflow: hidden; } .accordion-soft .accordion-item + .accordion-item{ margin-top: .5rem; } .accordion-soft .accordion-button{ box-shadow: none; } /* ===== Layout leve sem mudar suas cores/inputs ===== */ /* ===== Serviços: seções com divisórias visíveis e ações alinhadas ===== */ .card-dark.service-card { border-radius: 14px; overflow: visible; } .card-dark.service-card > .box { padding: 0; background: var(--surface-2); } /* Cabeçalho da caixa */ .service-card .form-head{ padding: 14px 18px 12px; border-bottom: var(--stroke) solid color-mix(in oklab, var(--border-strong) 82%, transparent); } /* Seções internas com linha sutil */ .service-card .form-section{ padding: 16px 18px; border-bottom: var(--stroke) solid color-mix(in oklab, var(--border-strong) 82%, transparent); } .service-card .form-section:last-of-type{ border-bottom: 0; } /* Barra de ações — mesmo fundo da .box, sem “tira escura” */ .service-card .form-actions{ position: sticky; bottom: -1px; z-index: 2; padding: 12px 18px; background: var(--surface-2) !important; border-top: var(--stroke) solid color-mix(in oklab, var(--border-strong) 82%, transparent); display: flex; gap: 8px; align-items: center; } /* Grade de campos: mantém rótulos em uma linha quando cabível */ .form-grid .form-label-nowrap{ white-space: nowrap; } /* Botão “+ Adicionar Campo Personalizado” – versão leve/compacta */ .btn-ghost-success{ background: transparent; border: 1px solid color-mix(in oklab, var(--success) 55%, transparent); color: var(--success); } .btn-ghost-success:hover{ background: color-mix(in oklab, var(--success) 10%, transparent); border-color: var(--success); } .btn-ghost-success:focus{ box-shadow: 0 0 0 .15rem rgba(101,211,110,.25); } /* Campos personalizados: mantém o “-” alinhado e discreto (igual ao seu padrão) */ #camposPersonalizados .col-md-4{ position: relative; } #camposItens .col-md-4{ position: relative; } #camposPersonalizados input.form-control, #camposItens input.form-control{ width: 100%; box-sizing: border-box; padding-right: 2.5rem; } #camposPersonalizados .btn-remover-campo, #camposItens .btn-remover-campo{ position: absolute; top: 50%; right: 8px; transform: translateY(-50%); background: transparent; border: 1px solid var(--danger); color: var(--danger); border-radius: 8px; font-weight: 700; font-size: 1.05rem; height: 34px; width: 34px; line-height: 1; padding: 0; cursor: pointer; } /* ===== Alinhamento/resp. dos toggles do PDF ===== */ .toggle-grid{ display: grid; grid-template-columns: repeat(2, minmax(280px, 1fr)); /* 2 colunas iguais */ column-gap: 28px; /* espaço horizontal entre colunas */ row-gap: 2px; /* espaço vertical entre linhas */ align-items: center; } /* deixa cada switch “respirar” um pouco */ .toggle-grid .modern-switch{ padding: 6px 0; gap: 1rem; /* distância entre bolinha e texto */ } /* empilha em 1 coluna nas telas menores */ @media (max-width: 768px){ .toggle-grid{ grid-template-columns: 1fr; row-gap: 12px; } } /* Sub-seções internas com contorno leve, igual ao
*/ .form-outline-group{ border: var(--stroke) solid var(--divider); border-radius: 10px; padding: 12px; background: transparent; /* não altera o tom do box */ } /* opcional: ajusta o label quando usado acima do bloco */ .form-outline-group + .form-text { margin-top: .35rem; } /* mini utilitário para a miniatura de logo (reaproveitável) */ .img-thumb{ height: 40px; max-width: 260px; object-fit: contain; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-1); padding: 6px; } /* Variante estreita do bloco com contorno */ .form-outline-group.is-compact{ display: inline-block; /* não ocupa toda a linha */ width: -webkit-fit-content; /* Safari */ width: -moz-fit-content; /* Firefox */ width: fit-content; max-width: min(100%, 640px); /* limite superior (ajuste se quiser) */ padding: 12px; /* mantemos o respiro */ } /* Em telas muito estreitas, deixa ocupar a linha toda para não quebrar botões */ @media (max-width: 576px){ .form-outline-group.is-compact{ display: block; width: 100%; max-width: 100%; } } /* Toolbar do filtro: 1 linha, quebra só se precisar */ .filter-toolbar{ display:flex; flex-wrap:wrap; align-items:end; gap:16px; } /* Campos crescem/encolhem com largura mínima confortável */ .filter-toolbar .ft-field{ flex:1 1 220px; min-width:220px; } /* Datas podem ser um pouco menores */ .filter-toolbar .ft-date{ flex:1 1 180px; min-width:180px; } /* Grupo de ações e presets ficam juntos */ .filter-toolbar .ft-actions{ display:flex; gap:8px; align-items:center; flex:0 0 auto; } .filter-toolbar .ft-actions .btn{ white-space:nowrap; } /* Labels curtinhas, igual às outras telas */ .box .form-label{ margin-bottom:.25rem !important; } /* Overrides específicos para membros.html */ /* Aproxima o texto da direita ("Titular", etc.) da seta do accordion */ #accordionMembros .accordion-button{ /* reduz o espaço reservado para chevron/toggle que existe em outras telas */ padding-right: 2.75rem !important; gap: .5rem; } /* Reposiciona o chevron da direita */ #accordionMembros .accordion-button::after{ right: 1rem !important; } /* Nota à direita (cargo/estado) encostada no chevron com pequeno respiro */ #accordionMembros .accordion-button .right-note{ margin-left: auto; margin-right: .5rem; /* respiro antes da seta */ color: var(--muted); font-size: .9rem; } /* Linha com avatar + nome mais compacta */ #accordionMembros .member-line{ display: inline-flex; align-items: center; gap: .5rem; } /* Mobile: um tiquinho menos de padding lateral */ @media (max-width: 576px){ #accordionMembros .accordion-button{ padding-right: 2.4rem !important; } #accordionMembros .accordion-button::after{ right: .75rem !important; } } /* ===== Chave amarela (escopo enxuto) ===== */ :root{ --key-accent: var(--warning, #f59e0b); --key-width: 4px; --key-top-gap: 8px; --key-bottom-gap: 8px; } /* Chave amarela EXCLUSIVA dos KPIs */ .block-grid .block-box{ position: relative; overflow: hidden; } .block-grid .block-box::before{ content: ""; position: absolute; left: 0; top: var(--key-top-gap); bottom: var(--key-bottom-gap); width: var(--key-width); border-radius: 0 8px 8px 0; background: var(--key-accent); background: linear-gradient( to bottom, color-mix(in oklab, var(--key-accent), white 18%), color-mix(in oklab, var(--key-accent), black 8%) ); } /* Sessão de STATUS continua com chave (opt-in) */ .session-box--status{ position: relative; overflow: hidden; } .session-box--status::before{ content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: var(--key-width); border-radius: 0 8px 8px 0; background: var(--key-accent); background: linear-gradient( to bottom, color-mix(in oklab, var(--key-accent), white 18%), color-mix(in oklab, var(--key-accent), black 8%) ); } /* Utilitário de opt-in para qualquer outro container */ .keyed{ position: relative; overflow: hidden; } .keyed::before{ content:""; position:absolute; left:0; top: var(--key-top-gap); bottom: var(--key-bottom-gap); width: var(--key-width); border-radius:0 8px 8px 0; background: var(--key-accent); background: linear-gradient( to bottom, color-mix(in oklab, var(--key-accent), white 18%), color-mix(in oklab, var(--key-accent), black 8%) ); } /* Opt-out (se algum bloco específico não deve ter chave) */ .no-key::before{ display:none !important; } /* Refinos por tipo (opcional): um pouco menos de margem na block-box */ .block-box{ --key-top-gap: 8px; --key-bottom-gap: 8px; } /* Painel azul claro usado dentro do bloco de Status */ .status-soft{ background: var(--surface-2) !important; /* igual ao gráfico */ border: var(--stroke) solid var(--border-strong) !important; border-radius: 12px; padding: 20px; box-shadow: 0 1px 7px rgba(59,130,246,.08); /* mesma sombra leve */ } /* Ajuste pequeno nos inputs para “sentarem” melhor no painel */ .status-soft .form-control, .status-soft .form-select{ background-color: var(--surface-1); } /* Utilitário para forçar chave em qualquer container não listado:
...
*/ .keyed{ position: relative; overflow: hidden; } .keyed::before{ content: ""; position: absolute; left: 0; top: var(--key-top-gap, 10px); bottom: var(--key-bottom-gap, 10px); width: var(--key-width, 4px); border-radius: 0 8px 8px 0; background: var(--key-accent); background: linear-gradient( to bottom, color-mix(in oklab, var(--key-accent), white 18%), color-mix(in oklab, var(--key-accent), black 8%) ); } /* ============================================ RESPONSIVO MOBILE-FIRST — UTILITÁRIOS SEGUROS (não alteram o desktop; só entram em telas menores) ============================================ */ /* ====== FIX mobile dos grupos de botões nos cabeçalhos dos blocos ====== */ @media (max-width: 576px){ /* não deixar os grupos virarem largura cheia nem quebrarem em 2 linhas */ .status-head .btn-group, .top5-head .btn-group, .view-switch .btn-group{ width: auto; flex-wrap: nowrap; } /* impedir que cada botão “cresça” para preencher a linha */ .status-head .btn-group .btn, .top5-head .btn-group .btn, .view-switch .btn-group .btn{ flex: 0 0 auto; padding: .25rem .5rem; /* mantém compacto, alinhado ao seu .compact */ font-size: .875rem; line-height: 1.2; } /* dar um respiro entre cabeçalho e gráfico para evitar sobreposição */ .status-head, .top5-head{ margin-bottom: .5rem; } /* seus gráficos já usam .cw-chart-wrap — só adicionamos um topo mínimo no sm- */ .cw-chart-wrap{ margin-top: .25rem; } } /* Evitar estouro de mídia */ img, svg, canvas, video{ max-width:100%; height:auto; } iframe{ max-width:100%; } /* Safe-area iOS em devices com notch (não afeta desktop) */ @supports(padding:max(0px)){ body{ padding-left: max(0px, env(safe-area-inset-left)); padding-right: max(0px, env(safe-area-inset-right)); padding-bottom: max(0px, env(safe-area-inset-bottom)); } } /* Touch targets confortáveis — somente no mobile (não aplica nos botões redondos para não "ovalizar") */ @media (max-width: 576.98px){ /* mantém os alvos grandes, mas NÃO aplica na paginação */ .btn:not(.rounded-circle):not(.btn-icon), .nav-link, .list-group-item, button:not(.rounded-circle):not(.btn-icon):not(.page-link){ min-height: 44px; padding-top: .5rem; padding-bottom: .5rem; } /* páginação: mantém quadrado e compacto */ .pagination.pagination-sm .page-link{ height: var(--pg-h); width: var(--pg-h); min-width: var(--pg-h); padding: 0; /* evita “crescer” em altura */ line-height: 1; } .btn.rounded-circle, .btn-icon.rounded-circle{ width: 32px; height: 32px; min-height: 32px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } /* ícones dentro do botão redondo não esticam */ .btn.rounded-circle svg, .btn-icon.rounded-circle svg, .btn.rounded-circle i, .btn-icon.rounded-circle i{ width: 16px; height: 16px; vertical-align: middle; pointer-events: none; } } /* Inputs 16px para evitar zoom no iOS — só no mobile */ @media (max-width: 576.98px){ input, select, textarea{ font-size:16px; } } /* Flex helpers para listas/accordions: evita overlap/corte de texto */ .cw-flex-1{ flex:1 1 auto; min-width:0; } .cw-ellipsis{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .cw-break{ word-break: break-word; overflow-wrap: anywhere; } /* Wrapper de rolagem horizontal controlada (tabelas largas etc.) */ .cw-scroll-x{ overflow-x:auto; -webkit-overflow-scrolling:touch; } /* Grid utilitário mobile-first para cards/blocos */ .cw-grid{ display:grid; gap: 1rem; } @media (min-width: 576px){ .cw-grid-sm-2{ grid-template-columns: repeat(2,1fr);} } @media (min-width: 768px){ .cw-grid-md-2{ grid-template-columns: repeat(2,1fr);} .cw-grid-md-3{ grid-template-columns: repeat(3,1fr);} } @media (min-width: 992px){ .cw-grid-lg-3{ grid-template-columns: repeat(3,1fr);} .cw-grid-lg-4{ grid-template-columns: repeat(4,1fr);} } /* Tabelas empilhadas amigáveis (opt-in): use
*/ @media (max-width: 767.98px){ .cw-table-stack table{ display:block; } .cw-table-stack thead{ display:none; } .cw-table-stack tbody, .cw-table-stack tr, .cw-table-stack td{ display:block; width:100%; } .cw-table-stack tr{ border: var(--stroke) solid var(--border); border-radius:12px; padding:.5rem; margin-bottom:.75rem; background: var(--surface-1); } .cw-table-stack td{ padding:.25rem .5rem; } .cw-table-stack td::before{ content: attr(data-label); display:block; font-size:.8rem; color: var(--muted); margin-bottom:.15rem; } } /* Charts responsivos (Chart.js, D3) — altura via CSS; mantém desktop intacto */ .cw-chart-wrap{ position:relative; width:100%; height: 280px; } @media (min-width:768px){ .cw-chart-wrap{ height: 360px; } } @media (min-width:1200px){ .cw-chart-wrap{ height: 420px; } } .cw-chart-wrap canvas{ position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-height: none !important; } /* Offcanvas confortável no mobile (não afeta desktop) */ .offcanvas{ width:min(90vw, 360px); } /* Modal mais usável no sm- (aproveita .modal-fullscreen-sm-down do BS5) */ @media (max-width: 575.98px){ .modal-dialog{ margin:0; } .modal-content{ min-height:100vh; border-radius:0; } } /* Toolbars de filtro empilharem com graça no mobile (sem quebrar desktop) */ @media (max-width: 576.98px){ .filter-toolbar{ flex-direction: column; align-items: stretch; } } /* ====== Utilitários responsivos ====== */ /* Empilha label e controle no mobile */ .stack-mobile > label { margin-bottom:.25rem; } @media (max-width: 576px){ .stack-mobile { width:100%; display:block; } .stack-mobile > * { width:100%; min-width:0; } } /* Linha com 2 colunas que vira 1 no mobile */ .row-2-sm { display:grid; grid-template-columns: 1fr 1fr; gap:12px; } @media (max-width: 576px){ .row-2-sm { grid-template-columns: 1fr; } } /* Controles compactos (altura menor) */ .compact .form-select, .compact .form-control, .compact .btn { font-size: .95rem; padding: .45rem .6rem; height: 2.25rem; line-height: 1.2; } @media (max-width:576px){ .compact .form-select, .compact .form-control, .compact .btn { height: 2.1rem; } } /* Selects não “empacam” largura mínima */ .compact .form-select { min-width: 0; } /* Accordion não ovaliza */ .compact .accordion-item { border-radius: 12px; overflow: hidden; } .compact .accordion-button { padding: .6rem .9rem; } /* Calendário compacto (aplique na caixa que envolve o calendário) */ .calendar-compact { transform-origin: top left; } @media (max-width: 576px){ .calendar-compact { transform: scale(.92); } /* reduza/aumente se quiser */ } /* Paginação – não vazar e comprimir */ .pager-compact { display:flex; flex-wrap: wrap; gap:6px; } .pager-compact .page-item .page-link { padding:.35rem .55rem; line-height:1.1; border-radius:10px; } /* Garante que qualquer conteúdo dentro da box respeite a largura */ .box { overflow-x: hidden; } @media (max-width: 576px){ .orcamento-item-fields .row > .col-6.col-md-2, .orcamento-item-fields .row > .col-12.col-md-4{ flex: 1 1 100%; min-width: 0; } #itensOrcamentoVenda:empty::before{ white-space: normal; /* permite quebrar linha no mobile */ } } /* Cabeçalho do painel: ações em cima, abas abaixo */ .pane-head{ display: flex; flex-direction: column; gap: 8px; } .pane-actions{ justify-content: flex-start; /* quebra em múltiplas linhas quando precisar */ } .pane-tabs{ margin-bottom: .25rem; /* respiro antes do accordion */ } /* ===== Pager (global) — consolidado ===== */ .pager-toolbar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem; padding:10px 12px; margin-top:8px; background: var(--surface-1); color: var(--text); border:1px solid var(--border); border-radius:10px; } .pager-left{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; } .pager-right{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; overflow-x:auto; /* evita vazamento no mobile */ } .pager-right .pagination{ white-space:nowrap; margin-bottom:0; } /* “Itens por página” compacto */ .pager-size{ display:flex; align-items:center; gap:8px; flex-wrap:nowrap; } .pager-size .form-select{ height:32px; line-height:1.2; padding-top:4px; padding-bottom:4px; background: var(--surface-2); color: var(--text); border:1px solid var(--border); } .pager-size label{ font-size:.85rem; color: var(--muted); margin-right:0; white-space:nowrap; } /* Contador */ .pager-count{ font-size:.9rem; color: var(--muted); background: var(--surface-2); border:1px solid var(--border); padding:6px 8px; border-radius:8px; white-space:nowrap; } /* Botões de página (Bootstrap) */ .pager-nav .pagination{ margin:0; --bs-pagination-border-color: var(--border); --bs-pagination-bg: var(--surface-1); --bs-pagination-color: var(--text); --bs-pagination-hover-bg: var(--surface-2); --bs-pagination-hover-color: var(--text); --bs-pagination-active-bg: color-mix(in oklab, var(--primary) 25%, var(--surface-1)); --bs-pagination-active-border-color: var(--primary); } .pager-nav .page-link{ border:1px solid var(--border); } .pager-nav .page-item.disabled .page-link{ background: var(--surface-1) !important; border-color: var(--border) !important; color: var(--muted) !important; opacity:.7; cursor:not-allowed; pointer-events:none; } /* Tamanho compacto coerente em todas as páginas */ .pagination.pagination-sm{ --pg-h: 32px; --pg-minw: 32px; --pg-radius: 8px; --pg-pad-x: .5rem; --pg-font: .9rem; } .pagination.pagination-sm .page-item{ margin:0; } .pagination.pagination-sm .page-link{ height: var(--pg-h); width: var(--pg-h); /* ← mantém quadrado */ min-width: var(--pg-h); padding: 0; /* ← remove aumento de altura no mobile */ line-height: 1; font-size: var(--pg-font); display: inline-flex; align-items:center; justify-content:center; border-radius: var(--pg-radius); border: 1px solid var(--border); background: var(--surface-2); color: var(--text); } .pagination.pagination-sm .page-item.active .page-link{ background: var(--surface-1); border-color: var(--border-strong); color: var(--text); } .pagination.pagination-sm .page-item.disabled .page-link{ opacity:.55; pointer-events:none; } /* Mobile: apertos e sem vazamento */ @media (max-width: 576px){ .pager-toolbar{ gap:.4rem; flex-direction:column; align-items:stretch; } .pager-right{ justify-content:space-between; } .pagination.pagination-sm .page-link{ min-width: 30px; padding-left: .35rem; /* margem interna horizontal menor */ padding-right: .35rem; } } /* ================================ Orçamentos & Vendas (migrado do vendas.html) ================================ */ /* Página Orçamentos & Vendas — agora usando tokens do /static/css/theme.css */ /* Cards de item */ .orcamento-item-card{ background-color: var(--surface-2); border: 1.25px solid var(--border-strong); border-radius: 10px; /* deixa uma "coluna" à direita para o botão não sobrepor os campos */ padding: 18px 72px 12px 14px; /* ← antes era: 18px 14px 12px */ margin: 6px 0 12px; box-shadow: 0 1px 7px rgba(59,130,246,.08); position: relative; color: var(--text); } .orcamento-item-card .btn-remove-item{ position: absolute; top: 8px; right: 10px; width: 28px; height: 28px; /* ↓ menor para não “invadir” os inputs */ border-radius: 8px; padding: 0; font-size: 1.05rem; /* ↓ acompanha a redução do botão */ background: var(--danger); border: none; color: #fff; font-weight: 600; opacity: .9; transition: opacity .15s; } .orcamento-item-card .btn-remove-item:hover{ opacity: 1; } .orcamento-item-fields .form-label{ font-size:.96rem; font-weight:500; color: var(--text); } @media (max-width: 900px){ .orcamento-item-fields .row > [class*="col-"]{ margin-bottom:7px; } /* reserva espaço do botão também no mobile */ .orcamento-item-card{ padding:14px 48px 10px 10px; } /* ← antes era: 14px 7px 10px 10px */ } /* Zebra do acordeon (somente quando colapsado) */ .accordion-item.zebra-even .accordion-button.collapsed, .accordion-item.zebra-odd .accordion-button.collapsed{ background-color: var(--surface-2) !important; color: var(--text) !important; } /* se color-mix for suportado, aplica a nuance */ @supports (background: color-mix(in oklab, white 10%, black)) { .accordion-item.zebra-even .accordion-button.collapsed{ background-color: color-mix(in oklab, var(--surface-2) 90%, transparent) !important; } .accordion-item.zebra-odd .accordion-button.collapsed{ background-color: color-mix(in oklab, var(--surface-2) 80%, transparent) !important; } } /* Abas */ .nav-tabs .nav-link{ background-color: var(--surface-2) !important; color: var(--muted) !important; border: 1px solid var(--border) !important; } .nav-tabs .nav-link.active{ background-color: var(--surface-1) !important; color: var(--text) !important; border-color: var(--border-strong) !important; } /* Tamanhos compactos */ .d-flex.flex-wrap.gap-2 > *{ align-self: center; } .input-group-sm > .form-select, .input-group-sm > .btn, .btn-sm, .form-select-sm{ padding-top: 4px; padding-bottom: 4px; font-size: .85rem; height: 32px; } /* Prefixo/Sufixo dentro do campo */ .field-affix{ position: relative; } .field-affix > .form-control{ padding-left: 12px; padding-right: 12px; } .field-affix[data-prefix]::before{ content: attr(data-prefix); position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; font-size: .95rem; } .field-affix[data-prefix] > .form-control{ padding-left: 44px; } .field-affix[data-suffix]::after{ content: attr(data-suffix); position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; font-size: .95rem; } .field-affix[data-suffix] > .form-control{ padding-right: 64px; } /* espaço para spinner do input[type=number] com sufixo */ :root{ --spin-w:22px; --spin-gap:1px; --suffix-w:12px; } .field-affix[data-suffix] > input.form-control[type="number"]{ padding-right: calc(var(--suffix-w) + var(--spin-w) + var(--spin-gap) + 10px); } .field-affix[data-suffix] > input[type="number"]::-webkit-inner-spin-button, .field-affix[data-suffix] > input[type="number"]::-webkit-outer-spin-button{ transform: translateX(2px); margin: 0; } /* Layout do formulário */ :root{ --item-min-narrow: 140px; } /* ↓ menor base */ .orcamento-item-fields .row{ flex-wrap: wrap; } .orcamento-item-fields .row > .col-6.col-md-2{ flex: 1 1 var(--item-min-narrow); min-width: var(--item-min-narrow); max-width: 100%; /* evita estouro lateral */ } .orcamento-item-fields .row > .col-12.col-md-4{ flex: 1 1 220px; /* ↓ menor que 300px */ min-width: 180px; /* ↓ mais amigável em telas estreitas */ max-width: 100%; } /* Linha de resumo */ :root{ --resumo-width: 260px; } #linhaResumo{ display:flex; flex-wrap:wrap; justify-content:space-evenly; gap:12px; } #linhaResumo .resumo-field{ flex:0 0 var(--resumo-width); max-width: var(--resumo-width); } @media (max-width: 576px){ #linhaResumo .resumo-field{ flex-basis:100%; max-width:100%; } } .narrow{ width: var(--resumo-width); } @media (max-width:576px){ .narrow{ width:100%; } } /* Grid principal */ .orcamento-grid{ display:grid; grid-template-columns: 1fr 360px; gap:24px; align-items:start; } @media (max-width: 992px){ .orcamento-grid{ grid-template-columns:1fr; } } /* Título da caixa (a .box já vem do theme.css) */ .box-title{ font-size:1rem; font-weight:700; color: var(--text); margin-bottom:10px; } /* Linha de controles no topo */ .controls-row{ display:flex; flex-wrap:wrap; gap:12px 16px; align-items:end; } .controls-row .narrow{ width: 260px; } @media (max-width:576px){ .controls-row .narrow{ width:100%; } } .add-btn{ height:38px; } /* Área vazia elegante */ #itensOrcamentoVenda:empty{ min-height:60px; max-width: 100%; /* não vazar do box */ border:1px dashed color-mix(in oklab, var(--border) 70%, transparent); border-radius:10px; background: var(--surface-2); box-sizing: border-box; /* respeita padding/borda */ overflow: hidden; } #itensOrcamentoVenda:empty::before{ content:"Nenhum item adicionado ainda"; display:block; padding:10px 12px; color: var(--muted); font-size:.9rem; text-align:center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* encolhe horizontalmente se faltar espaço */ } /* Resumo à direita */ .resumo-card{ position: sticky; top: 16px; } .kpi-total{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border:1px solid var(--border); background: var(--surface-1); color: var(--text); border-radius:10px; margin-bottom:12px; } .kpi-total .label{ opacity:.8; font-weight:600; } .kpi-total .valor{ font-size:1.6rem; font-weight:700; letter-spacing:.3px; } .resumo-field + .resumo-field{ margin-top:10px; } .resumo-actions{ display:flex; gap:10px; margin-top:12px; justify-content:flex-end; } @media (max-width:992px){ .resumo-actions .btn{ flex:1; } } /* ↓ NOVO: somente no mobile os botões ficam um embaixo do outro */ @media (max-width: 576px){ .resumo-actions{ flex-direction: column; align-items: stretch; /* ocupa a largura toda do container */ } .resumo-actions .btn{ width: 100%; flex: 0 0 auto; /* evita “esticar” estranho */ } } /* Paleta de botões azuis (filled, com leves variações) */ .btn-primary-2{ background: color-mix(in oklab, var(--primary) 88%, white 12%) !important; border-color: color-mix(in oklab, var(--primary) 88%, white 12%) !important; color:#fff !important; } .btn-primary-3{ background: color-mix(in oklab, var(--primary) 80%, white 20%) !important; border-color: color-mix(in oklab, var(--primary) 80%, white 20%) !important; color:#fff !important; } /* Acordeon base — usa tokens do theme.css */ .accordion .accordion-item{ background: var(--surface-1); color: var(--text); border: 1px solid var(--border); border-radius: 10px; } .accordion .accordion-button{ background: var(--surface-2); color: var(--text); border-bottom: 1px solid var(--divider); } .accordion .accordion-button:not(.collapsed){ background: var(--surface-1); color: var(--text); box-shadow: none; } .accordion .accordion-body{ background: var(--surface-1); color: var(--text); } .accordion .accordion-button:focus{ box-shadow: 0 0 0 .2rem color-mix(in oklab, var(--primary) 20%, transparent); } /* Agendamento */ #secAgendamento .form-text{ margin-top: 4px; } #secAgendamento .btn{ height: 32px; } #googleStatus.connected{ color: var(--success); } #googleStatus.error{ color: var(--danger); } /* Separadores e grid (padronizado) */ #secAgendamento .form-sep{ border-top: 1px solid var(--divider); margin: 12px 0 6px; opacity: .9; } /* Colunas com largura mínima para evitar quebra torta */ #secAgendamento .row.g-3 > [class*="col-"]{ min-width: 180px; } @media (max-width: 576px){ #secAgendamento .row.g-3 > [class*="col-"]{ min-width: 100%; } } /* Nota abaixo do campo Venda, sem empurrar outras colunas */ #secAgendamento .ag-note{ margin-top: -2px; color: var(--muted); font-size: .86rem; } /* Ações alinhadas ao fim do card */ #secAgendamento .ag-actions{ display: flex; gap: 10px; justify-content: flex-end; align-items: center; } @media (max-width: 992px){ #secAgendamento .ag-actions{ justify-content: stretch; } #secAgendamento .ag-actions .btn{ flex: 1; } } /* Inputs compactos coerentes (evita “pular” com help-text) */ #secAgendamento .form-select, #secAgendamento .form-control{ line-height: 1.3; } /* ===== Agenda (calendário visual) ===== */ #agendaWrap{ display:grid; grid-template-columns: 360px 1fr; gap:16px; margin-top:18px; } @media (max-width: 992px){ #agendaWrap{ grid-template-columns:1fr; } } .ag-cal{ background: var(--surface-1); border:1px solid var(--border); border-radius:12px; padding:12px; /* ↓ garante que o calendário nunca passe da caixa */ max-width: 100%; box-sizing: border-box; } .ag-cal .cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; } .ag-cal .grid{ display:grid; grid-template-columns: repeat(7, 1fr); gap:6px; } .ag-cal .dow{ text-align:center; font-size:.85rem; color:var(--muted); margin-bottom:6px; } .ag-cal .day{ aspect-ratio:1/1; border:1px solid var(--border); border-radius:10px; display:flex; align-items:center; justify-content:center; background: var(--surface-2); cursor:pointer; position:relative; user-select:none; /* ↓ evita que cada célula force largura mínima e estoure a grade */ min-width: 0; } /* NOVO — setas do mês com o mesmo look “azuladinho” dos cards/dias */ .ag-cal .navbtn{ width: 42px; height: 42px; padding: 0; display: grid; place-items: center; line-height: 1; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; /* mesmo raio dos “dias” */ color: var(--text); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .05s ease; } .ag-cal .navbtn:hover{ border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 25%, transparent) inset; } .ag-cal .navbtn:focus{ outline: none; box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 35%, transparent) inset; } .ag-cal .navbtn:active{ transform: translateY(1px); } /* Mobile: só apertamos os espaços do container, sem mexer no tamanho dos dias */ @media (max-width: 420px){ .ag-cal{ padding: 8px; } /* antes: 12px */ .ag-cal .cal-head{ margin-bottom: 6px; } /* antes: 10px */ .ag-cal .grid{ gap: 4px; } /* antes: 6px */ .ag-cal .dow{ margin-bottom: 4px; } /* antes: 6px */ } .ag-cal .day.muted{ opacity:.5; } .ag-cal .day.today{ outline:2px solid color-mix(in oklab, var(--primary) 40%, transparent); } .ag-cal .day.has{ border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in oklab, var(--primary) 15%, transparent) inset; } .ag-cal .day.active{ background: color-mix(in oklab, var(--primary) 18%, transparent); border-color: var(--primary); } .ag-cal .legend{ margin-top:10px; display:flex; gap:10px; align-items:center; color:var(--muted); font-size:.9rem; } .ag-cal .legend .dot{ width:10px; height:10px; border-radius:50%; background: var(--primary); display:inline-block; } .ag-list{ background: var(--surface-1); border:1px solid var(--border); border-radius:12px; padding:12px; } .ag-list .title{ font-weight:700; margin-bottom:8px; } /* Limita a área da lista do dia e ativa scroll se houver >5 itens (~72px cada) */ #agDayList{ max-height: 360px; /* ~5 itens */ overflow-y: auto; } /* Zebra sutil entre os itens do dia */ #agDayList .ag-item:nth-child(odd){ background: var(--surface-2); } #agDayList .ag-item:nth-child(even){ background: var(--surface-1); } /* Altura equivalente a ~5 compromissos (com rolagem quando exceder) */ #agDayList{ --ag-item-h: 64px; /* altura aproximada de .ag-item */ --ag-item-gap: 10px; /* margin-bottom de .ag-item */ max-height: calc((var(--ag-item-h) + var(--ag-item-gap)) * 5); overflow: auto; padding-right: 4px; /* evita “corte” quando aparece o scroll */ } /* Itens */ .ag-item{ border-left:4px solid var(--primary); background: var(--surface-2); border-radius:10px; padding:10px 12px; margin-bottom:10px; border:1px solid var(--border); min-height: var(--ag-item-h, 64px); } /* Zebra sutil */ .ag-list #agDayList .ag-item:nth-child(even){ filter: brightness(0.98); } @supports (background: color-mix(in oklab, black 10%, white)){ .ag-list #agDayList .ag-item:nth-child(even){ filter: none; background: color-mix(in oklab, var(--surface-2) 92%, var(--primary) 8%); } } .ag-item .row1{ display:flex; gap:8px; align-items:center; color:var(--muted); font-size:.92rem; } .ag-item .tag{ font-size:.76rem; font-weight:700; padding:2px 8px; border-radius:999px; border:1px solid var(--border); margin-left:auto; } .ag-empty{ color:var(--muted); padding:14px; } /* ==== Agendamento – linha enxuta (datas/horas + calendário) ==== */ #secAgendamento .ag-when{ display:grid; gap:12px; align-items:end; grid-template-columns: repeat(4, minmax(140px,1fr)) minmax(240px,1.2fr); } #secAgendamento .ag-when .form-control, #secAgendamento .ag-when .form-select{ height: 38px; } /* Em telas estreitas: as duas HORAS descem juntas; o select de calendário ocupa a linha seguinte */ @media (max-width: 900px){ #secAgendamento .ag-when{ /* uma coluna: primeiro Início (data->hora), depois Término (data->hora) */ grid-template-columns: 1fr; grid-template-areas: "sd" /* Início (data) */ "st" /* Início (hora) */ "ed" /* Término (data) */ "et" /* Término (hora) */ "cal"; /* Calendário */ } #secAgendamento .ag-when .sd{ grid-area: sd; } #secAgendamento .ag-when .st{ grid-area: st; } #secAgendamento .ag-when .ed{ grid-area: ed; } #secAgendamento .ag-when .et{ grid-area: et; } #secAgendamento .ag-when .cal{ grid-area: cal; } } /* ==== MOBILE ONLY: cabeçalhos de acordeão com título em cima e botões embaixo ==== */ @media (max-width: 576px){ .accordion-header.ag-head{ flex-wrap: wrap; gap: 8px 6px; } .accordion-header.ag-head .ag-head-title{ width: 100%; order: 1; min-height: 44px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .accordion-header.ag-head .ag-head-actions{ width: 100%; order: 2; justify-content: flex-end; gap: 6px; } .accordion-header.ag-head .ag-head-actions .btn{ min-width: 40px; min-height: 40px; } } /* ================================ CADASTRO — overrides e utilitários ================================ */ /* 1) Compactos (reaproveitáveis em todo o app) */ .input-group-sm > .form-select, .input-group-sm > .btn, .btn-sm, .form-select-sm{ padding-top: 4px; padding-bottom: 4px; font-size: .85rem; height: 32px; } /* 2) Canvas (compat p/ páginas que usam direto) */ body.page-cadastro canvas{ max-height: 300px; } /* 3) Accordion — usos gerais já estão no theme. Abaixo ficam apenas nuances do CADASTRO. */ /* Chevron mais “colado” no cadastro: menos espaço entre texto e ícone */ #clientesAccordion .accordion-button::after{ margin-left: .375rem; background-size: var(--bs-accordion-btn-icon-width, .95rem); } /* Header com pequeno respiro e grupo de botões fixo */ #clientesAccordion .accordion-header{ gap: .5rem; } #clientesAccordion .accordion-header > .d-flex.ms-2{ flex: 0 0 auto; gap: .375rem; } #clientesAccordion .accordion-button{ flex-grow: 1; min-height: 52px; } /* Botões redondos usados no header do accordion desta página */ #clientesAccordion .btn.rounded-circle{ width: 34px; height: 34px; padding: 0; line-height: 1; border-radius: 999px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; } #clientesAccordion .btn.rounded-circle svg{ width: 16px; height: 16px; } /* 4) Zebra do accordion (opt-in por classe) — pode ser usado em qualquer página */ .accordion-item.zebra-even .accordion-button.collapsed{ background: color-mix(in oklab, var(--surface-2) 92%, transparent) !important; } .accordion-item.zebra-odd .accordion-button.collapsed{ background: color-mix(in oklab, var(--surface-2) 84%, transparent) !important; } /* 5) Ajustes suaves de proporção (já temos base global; aqui só garantimos borda quando fechado) */ .accordion-button.collapsed{ border-bottom: 1px solid var(--divider); } /* ========== Pager — compactação específica p/ mobile ========== */ @media (max-width: 576.98px){ /* barra um pouco mais estreita */ .pager-toolbar{ padding:8px 10px; } /* garante que a área de paginação possa rolar se faltar espaço */ .pager-right, .pager-nav nav{ overflow-x:auto; } /* base menor para os botões no sm- */ .pagination.pagination-sm{ --pg-h: 28px; /* antes 32px */ --pg-radius: 10px; /* mantém arredondado, mas menos “oval” */ } /* aperta a margem interna horizontal e não força largura fixa */ .pagination.pagination-sm .page-link{ min-width: 28px; /* antes 30–32px */ width: auto; /* libera quando for só « 1 2 3 » */ padding-left: .10rem; /* antes .35rem / 0 */ padding-right: .10rem; } /* estreita o espaçamento entre itens */ .pagination.pagination-sm .page-item{ margin: 0 2px; } } /* ========================= PRICING (Planos) ========================= */ .pricing-section{ max-width: 1200px; margin: 60px auto; padding: 0 20px; text-align: center; } .pricing-section h1{ font-weight: 700; margin-bottom: 8px; } .pricing-section p{ color: var(--muted); margin-bottom: 40px; } /* grid: iguala alturas usando flex no col */ .plans-row{ align-items: stretch; } .plan-col{ display: flex; } .plan-wrapper{ width: 100%; border-radius: 20px; box-shadow: 0 4px 20px var(--shadow); background: var(--surface-1); } .plan-wrapper.highlight{ /* moldura degradê */ padding: 2px; background: linear-gradient(135deg,#8b5cf6, #2563eb, #06b6d4); } .plan-card{ position: relative; border-radius: 18px; background: var(--surface-1); color: var(--text); padding: 34px 26px 26px; text-align: left; transition: transform .25s ease, box-shadow .25s ease; display: flex; flex-direction: column; height: 100%; border: var(--stroke) solid var(--border); } .plan-wrapper.highlight .plan-card{ border-radius: 18px; border-color: var(--surface-1); } .plan-card:hover{ transform: translateY(-6px); box-shadow: 0 10px 34px var(--shadow); } .plan-ribbon{ position: absolute; left: 50%; transform: translateX(-50%); top: -18px; padding: 10px 18px; background: linear-gradient(90deg,#8b5cf6,#2563eb,#06b6d4); color: #fff; font-weight: 700; font-size: .9rem; border-radius: 999px; box-shadow: 0 6px 16px rgba(37,99,235,.35); white-space: nowrap; } .plan-title{ font-size: 1.5rem; font-weight: 600; margin-bottom: 6px; } .plan-price{ font-size: 1.85rem; font-weight: 800; margin: 14px 0 18px; } .plan-price small{ font-weight: 600; font-size: .95rem; color: var(--muted); } /* FEATURES dos planos — 1º nível com ✓; subtópicos com • */ .plan-features{ list-style: none; padding: 0; margin: 0 0 20px; flex: 1 1 auto; } /* Itens do 1º nível (com check) */ .plan-features > li{ margin-bottom: 10px; display: flex; align-items: flex-start; font-size: .95rem; line-height: 1.35; } .plan-features > li::before{ content: "✔"; color: var(--accent); margin-right: 8px; font-weight: 900; line-height: 1.15; } /* Se tiver subtópicos, o título fica em cima e a sublista desce */ .plan-features > li:has(> ul){ display: block; /* rompe o flex só nesse caso */ } /* Subtópicos (bolinhas) */ .plan-features > li > ul{ list-style: disc; margin: .35rem 0 0 1.5rem; /* “tab” abaixo do título */ padding: 0; font-size: .95em; color: var(--muted); } .plan-features > li > ul > li{ display: list-item !important; /* garante que não herde flex */ margin: .25rem 0; } .plan-features > li > ul > li::before{ content: none !important; } .plan-features > li > ul > li::marker{ color: var(--muted); } /* Palavras que devem ficar juntas (ex.: “para vendas”) */ .plan-features .keep{ white-space: nowrap; } /* Botão escolher */ .btn-choose{ background: var(--accent) !important; color: var(--accent-contrast) !important; border-radius: 10px; font-weight: 700; padding: 12px 18px; text-align: center; display: inline-block; text-decoration: none; border: none; } .btn-choose:hover{ filter: brightness(0.95); color: var(--accent-contrast) !important; } /* Responsivo (apenas pequenos ajustes) */ @media (max-width: 767.98px){ .plan-card{ padding: 30px 22px 22px; } .plan-ribbon{ top: -16px; font-size: .85rem; padding: 8px 14px; } } /* ===== Billing toggle (Mensal/Anual) ===== */ .billing-toggle{ display:inline-flex; align-items:center; gap:4px; padding:4px; margin: 0 auto 28px; /* antes: 18px — dá mais espaço pros cards */ border: 1px solid var(--border); border-radius: 999px; background: var(--surface-1); box-shadow: 0 2px 12px var(--shadow); } .billing-toggle .bt-option{ appearance:none; border:0; background:transparent; padding:8px 14px; border-radius:999px; font-weight:700; color: var(--muted); cursor:pointer; line-height:1; } .billing-toggle .bt-option.active{ color: var(--text); background: color-mix(in oklab, var(--accent) 12%, var(--surface-1)); box-shadow: 0 0 0 1.5px color-mix(in oklab, var(--accent) 40%, transparent) inset; } .billing-toggle .save-badge{ font-size:.78em; font-weight:800; margin-left:6px; padding:3px 8px; border-radius:999px; color:#fff; background: linear-gradient(90deg,#8b5cf6,#2563eb,#06b6d4); white-space:nowrap; } @media (max-width:576px){ .billing-toggle{ width:100%; } .billing-toggle .bt-option{ flex:1; text-align:center; } .billing-toggle .save-badge{ display:none; } /* compacta no mobile */ } /* Alinhar alturas e botões */ .plan-col{ display:flex; } .plan-wrapper{ display:flex; } /* faz o wrapper esticar */ .plan-card{ display:flex; flex-direction:column; flex:1; } .plan-features{ flex: 1 1 auto; } .btn-choose{ margin-top:auto; } /* empurra CTA para o fundo */ /* Área de preço com sublinhas */ .plan-price .price-note{ color: var(--muted); font-size: .9rem; margin-top: .15rem; } /* Subtexto do CTA (ex.: 12x de R$33,33) */ .btn-choose .btn-subtext{ display:block; font-size:.85rem; font-weight:600; line-height:1.1; opacity:.95; margin-top:2px; } /* Notas */ .trial-note{ margin-top:10px; color:var(--muted); font-size:.9rem; } .fine-print{ margin-top:4px; color:var(--muted); font-size:.78rem; } /* Alinhamento dos CTAs entre cards — usa a altura do Premium como referência */ .plan-card{ display:flex; flex-direction:column; } .plan-features{ flex:1 1 auto; } /* conteúdo cresce e empurra o rodapé */ .plan-footer{ margin-top:auto; } /* o rodapé fica “ancorado” no fim da coluna */ .plan-notes{ display:block; margin-top:8px; /* TODOS os cards reservam a mesma altura das notas do Premium */ min-height: var(--notes-h, 116px); /* fallback caso o JS não rode */ font-size:.92rem; color: var(--muted); } @media (max-width: 767.98px){ /* no mobile não precisamos reservar altura extra */ .plan-notes{ min-height: 0; } } /* estilos já usados nas notas do Premium (mantidos) */ .trial-note{ color: var(--muted); font-size:.9rem; margin:0; } .fine-print{ color: var(--muted); font-size:.78rem; margin:0; } /* ===== FAQ (abaixo dos planos) — versão “clean/pro” ===== */ .faq-section{ max-width: 1000px; margin: 20px auto 96px; /* menos espaço acima do título */ padding: 0 20px; } .faq-title{ font-weight: 800; font-size: clamp(1.4rem, 2.4vw, 2rem); margin: 0 0 16px; } /* Wrap apenas para limitar a largura e criar respiro */ .faq-wrap{ display:block; } /* Lista sem caixas visíveis; apenas espaçamento e divisórias sutis */ .faq-acc{ display:grid; gap: 8px; } .faq-acc .accordion-item{ background: transparent !important; border: 0 !important; } .faq-acc .accordion-item:not(:first-child){ border-top: var(--stroke) solid var(--divider); } /* Cabeçalho minimalista */ .faq-acc .accordion-button{ background: transparent !important; color: var(--text) !important; padding: 14px 0 !important; box-shadow: none !important; border-radius: 12px; transition: background-color .15s ease, box-shadow .15s ease; } .faq-acc .accordion-button:hover{ background: color-mix(in oklab, var(--surface-2) 70%, transparent) !important; } /* Estado aberto: leve destaque + “chave” azul à esquerda */ .faq-acc .accordion-button:not(.collapsed){ background: var(--surface-1) !important; position: relative; box-shadow: 0 2px 10px var(--shadow); } .faq-acc .accordion-button:not(.collapsed)::before{ content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 4px; border-radius: 0 8px 8px 0; background: linear-gradient( to bottom, color-mix(in oklab, var(--accent), white 18%), color-mix(in oklab, var(--accent), black 8%) ); } .faq-acc .accordion-button::after{ margin-left: auto; /* seta encostada à direita */ } /* Corpo do texto: tipografia suave e alinhamento */ .faq-acc .accordion-body{ padding: 6px 0 16px 0 !important; color: var(--muted) !important; max-width: 78ch; /* leitura confortável */ } /* Divisória com recuo (não atravessa a página toda) */ .section-divider.section-inset{ max-width: 1000px; margin-left: auto !important; margin-right: auto !important; width: calc(100% - 40px); /* acompanha padding do container */ border-top-color: var(--divider) !important; } /* ===== Header compartilhado (portal + site público) ===== */ .portal-header{ position: sticky; top: 0; z-index: 1030; background: var(--surface-1); border-bottom: var(--stroke) solid var(--divider); box-shadow: 0 2px 12px var(--shadow); } .portal-header .container-fluid{ max-width: 1200px; padding: 10px 16px; } .portal-header .brand-link{ text-decoration: none; display: inline-flex; align-items: center; gap: .5rem; } .portal-header .brand-title{ font-weight: 800; font-size: 1.25rem; letter-spacing: .2px; color: var(--text); } .portal-header .brand-link:hover .brand-title{ opacity: .9; } .portal-header .header-actions .link-ghost{ color: var(--text); text-decoration: none; font-weight: 700; padding: 6px 8px; border-radius: 8px; opacity: .9; } .portal-header .header-actions .link-ghost:hover{ background: color-mix(in oklab, var(--text) 6%, transparent); opacity: 1; } /* Respiro do conteúdo logo abaixo do header na página de Planos */ .page-planos .pricing-section{ margin-top: clamp(16px, 3vw, 28px); } /* ===== PORTAL (layout do app) — ESCOPADO ===== */ * { box-sizing: border-box; } /* pode ficar global sem problemas */ /* Aplica só no portal.html (body com a classe) */ body.page-portal{ height: 100vh; overflow: hidden; margin: 0; display: flex; flex-direction: column; } /* O header visual agora é .portal-header (acima). Se o portal usar este mesmo header, não precisa de regras genéricas aqui. */ body.page-portal #main{ flex: 1; display: flex; height: 100%; } body.page-portal #sidebar{ background-color: #4b6d98; color: #ffffff; width: 240px; display: flex; flex-direction: column; transition: width 0.3s ease; } body.page-portal #sidebar.collapsed, body.page-portal #sidebar.auto-collapsed{ width: 60px; } body.page-portal #sidebar .nav-link{ color: #ffffff; display: flex; align-items: center; } body.page-portal #sidebar .nav-link svg{ flex-shrink: 0; } body.page-portal #sidebar .nav-link span{ margin-left: .5rem; } body.page-portal #sidebar.collapsed .nav-link span, body.page-portal #sidebar.auto-collapsed .nav-link span, body.page-portal #sidebar.collapsed #logoutBtn, body.page-portal #sidebar.auto-collapsed #logoutBtn{ display: none; } body.page-portal #sidebar.collapsed .nav-link, body.page-portal #sidebar.auto-collapsed .nav-link{ justify-content: center; } body.page-portal #sidebar .nav-link.active{ background-color: #1f212e; } body.page-portal #userAvatar{ object-fit: cover; border: 2px solid #0d6efd; } body.page-portal #content{ flex-grow: 1; overflow: hidden; background-color: #8391a4; display: flex; flex-direction: column; padding: 0; margin: 0; } body.page-portal #dashboard-frame{ flex: 1 1 auto; width: 100%; border: none; display: none; } /* ====== MOBILE (≤768px): sidebar vira topbar ====== */ @media (max-width: 768px){ body.page-portal #main{ flex-direction: column; height: 100%; } body.page-portal #sidebar, body.page-portal #sidebar.collapsed, body.page-portal #sidebar.auto-collapsed{ width: 100% !important; height: auto; flex-direction: column; padding: 0; background: rgba(75, 109, 152, .92); backdrop-filter: saturate(1.2) blur(6px); box-shadow: 0 2px 8px rgba(0,0,0,.15); position: sticky; top: 0; z-index: 10; border-bottom: 1px solid rgba(255,255,255,.12); } body.page-portal #sidebar > .d-flex.justify-content-end.p-2{ display: none !important; } body.page-portal #sidebar .nav{ flex-direction: row !important; gap: .5rem; padding: .6rem .75rem; margin: 0; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scroll-padding-left: .75rem; -webkit-mask-image: linear-gradient(to right, transparent 0, black 18px, black calc(100% - 18px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, black 18px, black calc(100% - 18px), transparent 100%); } body.page-portal #sidebar .nav::-webkit-scrollbar{ height: 6px; } body.page-portal #sidebar .nav::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.25); border-radius: 999px; } body.page-portal #sidebar .nav::-webkit-scrollbar-track{ background: transparent; } body.page-portal #sidebar .nav-link{ scroll-snap-align: start; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18); color: #fff; padding: .55rem .8rem; border-radius: 12px; display: inline-flex; align-items: center; gap: .5rem; line-height: 1; box-shadow: 0 1px 3px rgba(0,0,0,.12) inset, 0 1px 0 rgba(255,255,255,.06); transition: transform .06s ease, background .2s ease, border-color .2s ease; white-space: nowrap; } body.page-portal #sidebar .nav-link:hover{ background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.32); } body.page-portal #sidebar .nav-link:active{ transform: translateY(1px); } body.page-portal #sidebar .nav-link.active{ background: #0d6efd; border-color: rgba(0,0,0,.08); box-shadow: 0 0 0 2px rgba(13,110,253,.25); font-weight: 700; } body.page-portal #sidebar .nav-link svg{ width: 18px; height: 18px; } @media (max-width: 420px){ body.page-portal #sidebar .nav-link span{ display: none; } body.page-portal #sidebar .nav-link.active span{ display: inline; } } body.page-portal #sidebar .mt-auto.p-3{ display: none !important; } body.page-portal #content{ flex: 1 1 auto; min-height: 0; } } /* Acessibilidade: foco visível nos itens da barra */ body.page-portal #sidebar .nav-link:focus-visible{ outline: none; box-shadow: 0 0 0 3px rgba(13,110,253,.35); } /* ===== FAQ – ajustes finos ===== */ .faq-acc{ --faq-key-w: 4px; /* largura da “marquinha” azul */ --faq-key-gap: 10px; /* distância da marquinha para o texto */ } /* Quando aberto: dá espaço à esquerda pro “key” não encostar no texto */ .faq-acc .accordion-button:not(.collapsed){ padding-left: calc(var(--faq-key-w) + var(--faq-key-gap)) !important; } /* Mantém a marquinha colada à borda esquerda */ .faq-acc .accordion-button:not(.collapsed)::before{ left: 0; width: var(--faq-key-w); } /* Só o HEADER aberto fica branco; o corpo herda o fundo da página */ .faq-acc .accordion-body{ background: transparent !important; } /* Garante que o item do FAQ não puxe fundo branco */ .faq-acc .accordion-item{ background: transparent !important; } /* Opcional: no hover do header (fechado) um leve realce sem “placa” branca */ .faq-acc .accordion-button:hover{ background: color-mix(in oklab, var(--surface-2) 55%, transparent) !important; } /* ===== Planos – fundo igual ao restante do app ===== */ body.page-planos{ --bg: #f7f9fc; /* mesmo azul claro do app */ background-color: var(--bg); /* por garantia */ } /* ===== PORTAL: header clássico (mantém o layout antigo do portal) ===== */ body.page-portal > header{ background-color: #ffffff; color: #4b6d98; padding: 0.6rem 1rem; } body.page-portal > header h1{ font-size: 1.2rem; margin: 0; } body.page-portal > header p { font-size: 0.85rem; margin: 0; } /* Banner topo (Planos) — mesma largura/margens dos cards */ .plan-banner{ max-width: 1200px; /* igual à .pricing-section */ margin: 12px auto 24px; /* respiro entre header e cards */ padding: 0 20px; /* igual ao padding lateral dos cards */ } .plan-banner-img{ display: block; width: 100%; height: auto; border-radius: 20px; /* combina com os cards */ box-shadow: 0 4px 20px var(--shadow); background: var(--surface-1); } @media (max-width: 576.98px){ .plan-banner{ margin: 8px auto 16px; } } /* ===== Steps (3 passos) — versão consolidada ===== */ .steps3{ max-width: 1200px; margin: 28px auto 8px; padding: 0 20px; } /* MOBILE-FIRST: texto em cima, imagem embaixo */ .steps3 .step{ display: grid; grid-template-columns: 1fr; grid-template-areas: "copy" "ill"; gap: 16px 24px; align-items: center; margin: clamp(12px, 1.6vw, 20px) 0; } /* NUNCA force a ordem aqui — isso quebrou a alternância */ /* (removido o order: 0 !important) */ .steps3 .step .copy{ grid-area: copy; } .steps3 .step .ill { grid-area: ill; justify-self: center; } /* Alternância no DESKTOP (≥ 992px): odd = copy|ill, even = ill|copy */ @media (min-width: 992px){ .steps3 .step{ grid-template-columns: 1fr 1fr; grid-template-areas: "copy ill"; } /* passos pares invertem */ .steps3 .step:nth-of-type(even){ grid-template-areas: "ill copy"; } /* pequenos ajustes de alinhamento lateral das ilustrações */ .steps3 .step:nth-of-type(odd) .ill{ justify-self: end; } .steps3 .step:nth-of-type(even) .ill{ justify-self: start; } } /* Tipografia e label */ .steps3 .eyebrow{ display:inline-flex; align-items:center; gap:.5rem; } .steps3 .badge-num{ width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; background: var(--accent); color: var(--accent-contrast); font-weight: 800; font-size: .95rem; } .steps3 .eyebrow-text{ color: var(--accent); font-weight: 800; } .steps3 .title{ font-weight: 800; font-size: clamp(1.1rem, 2.3vw, 1.45rem); margin: .4rem 0 .25rem; color: var(--text); } .steps3 .desc{ color: var(--muted); max-width: 62ch; } /* Ilustração sem “placa branca” (transparência real) */ .steps3 .ill .frame{ width: min(520px, 100%); background: transparent; border: 0; box-shadow: none; padding: 0; border-radius: 16px; } .steps3 .ill picture, .steps3 .ill img{ display: block; width: 100%; height: auto; background: transparent; object-fit: contain; } /* Mercado Pago (Bricks) — isolamento mínimo, sem interferir no conteúdo */ .mp-scope{ isolation: isolate; } /* === PDF Templates: lock/ribbon Premium === */ .tpl-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px; } .pdf-tpl{ position:relative; background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:12px; cursor:pointer; transition:transform .08s ease, box-shadow .12s ease; /* impede a ribbon de “vazar” para fora do card */ overflow:hidden; } .pdf-tpl .thumb{ aspect-ratio:4/3; display:grid; place-items:center; background:var(--surface-1); border:1px dashed var(--border); border-radius:10px; overflow:hidden; } .pdf-tpl .thumb svg{ width:100%; height:100%; display:block; } .pdf-tpl .name{ margin-top:8px; font-weight:600; } .pdf-tpl .desc{ font-size:.9rem; color:var(--muted); } .pdf-tpl.selected{ outline:2px solid var(--accent); box-shadow:0 0 0 2px color-mix(in oklab, var(--accent) 40%, transparent); } .pdf-tpl.locked{ filter:saturate(.5) opacity(.85); cursor:not-allowed; } /* Ribbon PREMIUM — justa ao card + fundo que vai “até o fim” */ .pdf-tpl .tpl-ribbon{ position:absolute; top:30px; right:-12px; /* encosta no canto do card */ transform:rotate(45deg); transform-origin:50% 50%; z-index:3; padding:4px 30px; /* largura do rótulo */ font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.5px; background:linear-gradient(90deg,#ffb703,#fb8500); color:#111; border-radius:4px; box-shadow:0 2px 8px rgba(0,0,0,.25); pointer-events:none; /* leve sombra nas bordas para dar impressão de “dobra” sem novos pseudos */ filter:drop-shadow(0 1px 0 rgba(0,0,0,.25)); } /* Extensores laterais: esticam o fundo e são cortados pelo overflow do card */ .pdf-tpl .tpl-ribbon::before, .pdf-tpl .tpl-ribbon::after{ --ribbon-length: 160vmax; /* suficiente para qualquer largura/zoom */ content:""; position:absolute; top:0; bottom:0; width:var(--ribbon-length); background:inherit; /* mesmo gradiente da faixa */ z-index:-1; /* atrás do conteúdo da ribbon */ } .pdf-tpl .tpl-ribbon::before{ left:calc(-1 * var(--ribbon-length)); border-radius:4px 0 0 4px; } .pdf-tpl .tpl-ribbon::after{ right:calc(-1 * var(--ribbon-length)); border-radius:0 4px 4px 0; } /* ===== Metas: utilitários reaproveitáveis ===== */ /* 2.1) page wrap global (reaproveitável) */ .page-wrap{ padding:16px; } /* 2.2) Lista de seleção reutilizável (usada no modal de membros) */ .member-list{ max-height:360px; overflow:auto; border: var(--stroke) solid var(--border); border-radius:12px; padding:6px; background: var(--surface-1); } .member-item{ display:flex; align-items:center; gap:.5rem; padding:.35rem .5rem; border-radius:8px; } .member-item:hover{ background: color-mix(in oklab, var(--surface-2) 80%, transparent); } /* 2.3) Ações no cabeçalho do accordion (ícones à direita do chevron) */ .accordion-button.has-actions{ /* reserva espaço p/ botões de ação à direita do chevron */ padding-right: 92px !important; } .accordion-actions{ position: absolute; top: 8px; right: 10px; display: inline-flex; gap: 8px; align-items: center; z-index: 2; } /* Botão-ícone redondo (mesmo padrão das outras páginas) */ .btn-icon{ width:34px; height:34px; padding:0 !important; line-height:1; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; } .btn-icon > svg, .btn-icon > i{ width:18px; height:18px; pointer-events:none; } /* ===== Equipe — ações do header do accordion (escopado) ===== */ #equipeAccordion .accordion-header{ position: relative; } #equipeAccordion .btn-icon.rounded-circle{ width: 32px; height: 32px; } #equipeAccordion .btn-icon.rounded-circle svg{ width: 16px; height: 16px; } /* Desktop: ações fixas no topo-direita, chevron padrão à direita */ @media (min-width: 577px){ #equipeAccordion .accordion-actions{ position: absolute !important; top: 8px; right: 10px; display: inline-flex; gap: 8px; align-items: center; z-index: 2; } /* padding dinâmico conforme nº de botões (requer :has, já suportado em navegadores atuais) */ #equipeAccordion .accordion-header:has(.accordion-actions .btn + .btn) .accordion-button.has-actions{ padding-right: 92px !important; /* 2+ botões */ } #equipeAccordion .accordion-header:has(.accordion-actions .btn):not(:has(.accordion-actions .btn + .btn)) .accordion-button.has-actions{ padding-right: 64px !important; /* só 1 botão */ } } /* Mobile: ações viram 2ª linha */ @media (max-width: 576px){ #equipeAccordion .accordion-actions{ position: static !important; width: 100% !important; display: flex; gap: .5rem; align-items: center; justify-content: flex-start; order: 2; margin: .1rem 0 .55rem; } #equipeAccordion .accordion-button.has-actions{ padding-right: 2.4rem !important; /* sem reserva extra no sm- */ } } /* === Equipe: corrigir chevron e wrap do header === */ /* 1) Chevron não sobrepor ações */ #equipeAccordion .accordion-button::after{ z-index: 1; } /* 1.1) Empurra o chevron para a esquerda do(s) botão(ões) */ @media (min-width: 577px){ /* só 1 botão (32px) */ #equipeAccordion .accordion-header:has(.accordion-actions .btn):not(:has(.accordion-actions .btn + .btn)) .accordion-button::after{ right: calc(10px + 32px + 8px) !important; } /* 2+ botões */ #equipeAccordion .accordion-header:has(.accordion-actions .btn + .btn) .accordion-button::after{ right: calc(10px + 32px + 8px + 32px + 8px) !important; } } /* 2) Cabeçalho (chip + Expandir/Recolher) pode quebrar linha sem vazar */ .card-dark:has(#equipeAccordion) > .d-flex.justify-content-between{ flex-wrap: wrap; gap: 8px; align-items: flex-start; } .card-dark:has(#equipeAccordion) > .d-flex.justify-content-between > h5{ flex: 1 1 auto; min-width: 160px; } .card-dark:has(#equipeAccordion) > .d-flex.justify-content-between > .d-flex{ flex: 0 1 100%; gap: 8px; justify-content: flex-start; } @media (min-width: 992px){ .card-dark:has(#equipeAccordion) > .d-flex.justify-content-between > .d-flex{ flex: 0 0 auto; } } /* Equipe: dá um respiro entre o chip "Progresso" e o nome */ #equipeAccordion .accordion-button{ display: flex; /* (já é flex no BS, mas garantimos) */ gap: .5rem; /* ajuste fino do espaço */ } /* ===== PORTAL: Logout do menu lateral — texto SEMPRE branco ===== */ body.page-portal #sidebar #logoutBtn{ /* garante branco em qualquer tema/estado */ --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; --bs-btn-disabled-color: rgba(255,255,255,.65); color: #fff !important; background: transparent !important; border-color: rgba(255,255,255,.65) !important; } body.page-portal #sidebar #logoutBtn:hover, body.page-portal #sidebar #logoutBtn:focus{ color: #fff !important; background: rgba(255,255,255,.12) !important; border-color: rgba(255,255,255,.85) !important; } body.page-portal #sidebar #logoutBtn:active{ color: #fff !important; background: rgba(255,255,255,.18) !important; border-color: rgba(255,255,255,.9) !important; } /* se um dia tiver ícone dentro do botão */ body.page-portal #sidebar #logoutBtn svg{ fill:#fff !important; } /* evita o texto ultrapassar o contorno quando a área encurta */ #btnGoogleConnect { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }