/* /Components/CupomWhatsAppModal.razor.rz.scp.css */ [b-zbh92w211u] .cb-modal-wpp { max-width: 640px; } /* /Components/Etiquetas/EtiquetaView.razor.rz.scp.css */ /* ============================================================= EtiquetaView — CSS escopado. Estratégia: - Em tela (preview), cada etiqueta é um "cartão" com bordas e padding. - Em @media print, o inteiro vira a etiqueta (ou folha Pimaco), com @page definindo tamanho exato do papel térmico. - 3 variações: .t50 (50x30mm), .t60 (60x40mm), .a4 (Pimaco 6281). ============================================================= */ .cb-etq[b-i968rh830v] { --etq-fg: #111; --etq-muted: #6b7280; --etq-border: #d1d5db; --etq-bg: #fff; color: var(--etq-fg); background: var(--etq-bg); box-sizing: border-box; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; overflow: hidden; position: relative; border: 1px dashed var(--etq-border); padding: 2mm; display: flex; flex-direction: column; } .cb-etq-empty[b-i968rh830v] { color: var(--etq-muted); font-size: 10px; text-align: center; padding: 8mm; } /* ---------- Tamanhos em preview ---------- Medidas REAIS aferidas no papel físico (LINK 8018 e similares). O A4Trinta NÃO é 66,7×25,4 do datasheet teórico — varia de fabricante. Importante: o A4Trinta vem em folha CARTA (216×280mm), não A4 — o @page correspondente está em cb-etiquetas-print.css. */ .cb-etq--t50[b-i968rh830v] { width: 50mm; height: 30mm; } .cb-etq--t60[b-i968rh830v] { width: 60mm; height: 40mm; } .cb-etq--a4[b-i968rh830v] { width: 66.7mm; height: 33.9mm; } .cb-etq--a4t[b-i968rh830v] { width: 66.7mm; height: 25.4mm; } /* LINK 8018 medido com régua */ /* ---------- Header (logo/loja) ---------- */ .cb-etq-head[b-i968rh830v] { display: flex; align-items: center; justify-content: center; gap: 2mm; max-height: 5mm; overflow: hidden; } .cb-etq-logo[b-i968rh830v] { max-height: 4mm; max-width: 100%; object-fit: contain; } .cb-etq-loja-nome[b-i968rh830v] { font-size: 8px; font-weight: 700; letter-spacing: 0.2px; color: var(--etq-muted); text-transform: uppercase; } /* ---------- Corpo ---------- */ .cb-etq-body[b-i968rh830v] { display: flex; flex-direction: column; gap: 0.8mm; flex: 1; min-height: 0; } .cb-etq-produto[b-i968rh830v] { font-weight: 700; line-height: 1.1; font-size: 9px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .cb-etq-atributos[b-i968rh830v] { display: flex; gap: 2mm; font-size: 7.5px; color: var(--etq-muted); } .cb-etq-attr[b-i968rh830v] { display: inline-flex; align-items: center; gap: 1mm; } .cb-etq-attr i[b-i968rh830v] { font-size: 8px; } .cb-etq-preco[b-i968rh830v] { font-weight: 800; font-size: 11px; letter-spacing: 0.2px; } /* ---------- Códigos (CODE128 + QR) ---------- Dois "blocos" lado a lado, cada um com a imagem em cima e o texto em baixo. align-items: center faz os dois blocos centralizarem verticalmente relativo ao bloco mais alto — evita o QR ficar "flutuando" acima do barcode. */ .cb-etq-codes[b-i968rh830v] { display: flex; align-items: center; justify-content: space-between; gap: 2mm; flex: 1; min-height: 0; } .cb-etq-code128-wrap[b-i968rh830v] { flex: 1; display: flex; flex-direction: column; align-items: stretch; justify-content: center; min-width: 0; } .cb-etq-code128[b-i968rh830v] { width: 100%; height: 10mm; display: block; } .cb-etq-sku[b-i968rh830v] { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 6.5px; text-align: center; color: var(--etq-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 0.3mm; } /* Bloco do QR espelha o bloco do barcode: imagem + código abaixo */ .cb-etq-qr-wrap[b-i968rh830v] { display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; gap: 0.3mm; } .cb-etq-qr[b-i968rh830v] { width: 14mm; height: 14mm; flex-shrink: 0; object-fit: contain; display: block; } .cb-etq-codigo[b-i968rh830v] { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 6.5px; color: var(--etq-muted); text-align: center; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } /* ---------- Ajustes por formato ---------- */ /* Térmica 50x30: versão mais enxuta */ .cb-etq--t50 .cb-etq-qr[b-i968rh830v] { width: 12mm; height: 12mm; } .cb-etq--t50 .cb-etq-code128[b-i968rh830v] { height: 8mm; } .cb-etq--t50 .cb-etq-produto[b-i968rh830v] { -webkit-line-clamp: 1; font-size: 8.5px; } /* Térmica 60x40: respira mais */ .cb-etq--t60 .cb-etq-qr[b-i968rh830v] { width: 16mm; height: 16mm; } .cb-etq--t60 .cb-etq-code128[b-i968rh830v] { height: 12mm; } .cb-etq--t60 .cb-etq-produto[b-i968rh830v] { font-size: 10px; } .cb-etq--t60 .cb-etq-preco[b-i968rh830v] { font-size: 12px; } /* A4 Pimaco 6281 */ .cb-etq--a4 .cb-etq-qr[b-i968rh830v] { width: 15mm; height: 15mm; } .cb-etq--a4 .cb-etq-code128[b-i968rh830v] { height: 11mm; } /* Carta Trinta (LINK 8018) — 66,7 × 25,4mm (medida real do papel com régua), em folha tamanho Carta (216×280mm) — NÃO A4. CENTRALIZAÇÃO: o conteúdo do adesivo (logo + nome + preço + barcode/QR) é centralizado *vertical e horizontalmente* dentro do retângulo de 66,7×25,4mm. Mecanismo: o .cb-etq vira um flex column com justify-content:center e os filhos head/body deixam de usar flex:1 (que esticaria e empurraria o conteúdo pra borda superior). Padding de 1mm × 2mm faz a "safe-zone" interna pra não cortar o desenho na borda do adesivo. Largura interna útil: 66,7 - 4 = 62,7mm. Altura interna útil: 25,4 - 2 = 23,4mm. Atributos (cor/tamanho) ficam escondidos pra dar respiro — esses dados já estão no SKU legível abaixo do barcode e no CLZ abaixo do QR. */ .cb-etq--a4t[b-i968rh830v] { padding: 1mm 2mm; /* safe-zone interna do adesivo */ justify-content: center; /* centraliza verticalmente o bloco inteiro */ align-items: stretch; gap: 0.4mm; /* respiro entre header/body sem inflar */ } .cb-etq--a4t .cb-etq-head[b-i968rh830v] { max-height: 2.8mm; flex: 0 0 auto; /* não estica — só ocupa o necessário */ } .cb-etq--a4t .cb-etq-logo[b-i968rh830v] { max-height: 2.6mm; } .cb-etq--a4t .cb-etq-loja-nome[b-i968rh830v] { font-size: 6.5px; } .cb-etq--a4t .cb-etq-body[b-i968rh830v] { flex: 0 0 auto; /* idem — sem esticar; o "centro" é dado pelo justify-content do pai */ gap: 0.5mm; } .cb-etq--a4t .cb-etq-produto[b-i968rh830v] { -webkit-line-clamp: 1; font-size: 8px; text-align: center; } .cb-etq--a4t .cb-etq-atributos[b-i968rh830v] { display: none; } .cb-etq--a4t .cb-etq-preco[b-i968rh830v] { font-size: 10px; text-align: center; } /* Bloco de códigos: barcode + QR centralizados HORIZONTALMENTE como uma unidade dentro dos 66,7mm da etiqueta. NÃO usar space-between aqui — isso jogaria o QR contra a borda direita do adesivo, encostando ou saindo do corte. justify-content:center mantém o par como um bloco coeso no meio da etiqueta. */ .cb-etq--a4t .cb-etq-codes[b-i968rh830v] { flex: 0 0 auto; gap: 1.5mm; align-items: center; justify-content: center; } /* O barcode-wrap não estica horizontalmente em a4t — fica do tamanho do barcode (largura fixa abaixo), pra que o conjunto barcode+QR seja centralizado junto pelo justify-content:center do pai. */ .cb-etq--a4t .cb-etq-code128-wrap[b-i968rh830v] { flex: 0 1 auto; min-width: 0; } .cb-etq--a4t .cb-etq-qr-wrap[b-i968rh830v] { gap: 0.3mm; } .cb-etq--a4t .cb-etq-qr[b-i968rh830v] { width: 10.5mm; height: 10.5mm; } .cb-etq--a4t .cb-etq-code128[b-i968rh830v] { width: 36mm; /* barcode com largura fixa pra centralização funcionar */ height: 8mm; } .cb-etq--a4t .cb-etq-sku[b-i968rh830v], .cb-etq--a4t .cb-etq-codigo[b-i968rh830v] { font-size: 5.5px; line-height: 1; } /* ============================================================= IMPRESSÃO — regras só aplicadas quando a página-hospedeira declarar o modo de impressão adequado. As páginas que usam este componente devem aplicar .cb-print-t50 / .cb-print-t60 / .cb-print-a4 no (ou num contêiner raiz) antes de disparar cbEtiquetas.imprimir(). ============================================================= */ @media print { .cb-etq[b-i968rh830v] { border: none !important; page-break-inside: avoid; break-inside: avoid; } } /* @page e regras globais de impressão ficam em wwwroot/css/cb-etiquetas-print.css */ /* /Components/Manifesto/ManifestoBagView.razor.rz.scp.css */ /* =================================================== ManifestoBagView — 1 folha A4 portrait (Bloco 6D). Mesma view serve pra impressão e pra exportação PNG. =================================================== */ [b-ujqn3dxlm2] .cb-manifesto-folha { background: #fff; color: #222; width: 210mm; /* A4 portrait */ min-height: 297mm; padding: 12mm 14mm; margin: 0 auto; box-shadow: 0 1px 8px rgba(0,0,0,0.08); font-family: -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif; font-size: 11pt; line-height: 1.35; box-sizing: border-box; display: flex; flex-direction: column; gap: 10mm; } /* ===== Header ===== */ [b-ujqn3dxlm2] .cb-manifesto-header { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #222; padding-bottom: 6mm; } [b-ujqn3dxlm2] .cb-manifesto-loja { display: flex; gap: 8mm; align-items: center; } [b-ujqn3dxlm2] .cb-manifesto-logo { max-height: 22mm; max-width: 50mm; } [b-ujqn3dxlm2] .cb-manifesto-loja-meta { display: flex; flex-direction: column; line-height: 1.4; } [b-ujqn3dxlm2] .cb-manifesto-loja-nome { font-size: 16pt; color: #222; } [b-ujqn3dxlm2] .cb-manifesto-loja-meta span { font-size: 9pt; color: #555; } [b-ujqn3dxlm2] .cb-manifesto-titulo { text-align: right; } [b-ujqn3dxlm2] .cb-manifesto-bag-numero { font-size: 18pt; font-weight: 700; color: #222; } [b-ujqn3dxlm2] .cb-manifesto-data { font-size: 9pt; color: #666; margin-top: 2mm; } /* ===== Cliente ===== */ [b-ujqn3dxlm2] .cb-manifesto-cliente { background: #f7f5fa; border-left: 3px solid #6f42c1; padding: 4mm 5mm; border-radius: 2mm; } [b-ujqn3dxlm2] .cb-manifesto-cliente h3 { margin: 0 0 1mm 0; font-size: 9pt; color: #6f42c1; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; } [b-ujqn3dxlm2] .cb-manifesto-cliente-nome { font-size: 14pt; font-weight: 600; margin-bottom: 1.5mm; } [b-ujqn3dxlm2] .cb-manifesto-cliente-linha { font-size: 10pt; color: #444; margin: 0.5mm 0; } /* ===== Itens ===== */ [b-ujqn3dxlm2] .cb-manifesto-itens h3 { margin: 0 0 3mm 0; font-size: 11pt; color: #6f42c1; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; border-bottom: 1px solid #ddd; padding-bottom: 1.5mm; } [b-ujqn3dxlm2] .cb-manifesto-tabela { width: 100%; border-collapse: collapse; font-size: 10pt; } [b-ujqn3dxlm2] .cb-manifesto-tabela th { text-align: left; padding: 2mm; background: #fafafa; border-bottom: 1px solid #ddd; font-size: 9pt; color: #666; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; } [b-ujqn3dxlm2] .cb-manifesto-tabela td { padding: 2.5mm 2mm; border-bottom: 1px solid #eee; vertical-align: middle; } [b-ujqn3dxlm2] .col-foto { width: 18mm; } [b-ujqn3dxlm2] .col-foto img { width: 14mm; height: 14mm; object-fit: cover; border-radius: 2mm; background: #eee; display: block; } [b-ujqn3dxlm2] .col-peca strong { display: block; font-size: 10pt; color: #222; } [b-ujqn3dxlm2] .col-peca small { color: #888; font-size: 8pt; display: block; font-family: "Courier New", monospace; } [b-ujqn3dxlm2] .col-cor, [b-ujqn3dxlm2] .col-tam { color: #555; font-size: 10pt; } [b-ujqn3dxlm2] .col-qtd { text-align: center; font-weight: 600; } [b-ujqn3dxlm2] .col-preco { text-align: right; font-variant-numeric: tabular-nums; color: #222; } [b-ujqn3dxlm2] .cb-manifesto-tabela tfoot td { font-weight: 700; border-top: 2px solid #222; border-bottom: 0; padding-top: 3mm; padding-bottom: 0; font-size: 11pt; } [b-ujqn3dxlm2] .cb-total-label { text-align: right; color: #555; } [b-ujqn3dxlm2] .cb-total-valor { text-align: right; color: #6f42c1; font-size: 13pt; } [b-ujqn3dxlm2] .cb-manifesto-vazio { color: #999; font-style: italic; text-align: center; padding: 4mm; } /* ===== Checkout / QR ===== */ [b-ujqn3dxlm2] .cb-manifesto-checkout { margin-top: auto; display: flex; align-items: center; gap: 8mm; background: #fff8f0; border: 1px dashed #f0a04b; padding: 5mm 6mm; border-radius: 3mm; } [b-ujqn3dxlm2] .cb-manifesto-checkout-text { flex: 1; } [b-ujqn3dxlm2] .cb-manifesto-checkout h3 { margin: 0 0 1.5mm 0; font-size: 11pt; color: #c47a26; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; } [b-ujqn3dxlm2] .cb-manifesto-checkout p { margin: 0 0 1.5mm 0; font-size: 10pt; color: #444; } [b-ujqn3dxlm2] .cb-manifesto-checkout small { font-size: 8pt; color: #888; word-break: break-all; font-family: "Courier New", monospace; } [b-ujqn3dxlm2] .cb-manifesto-qr { width: 32mm; height: 32mm; flex-shrink: 0; background: #fff; border: 1px solid #ddd; display: flex; align-items: center; justify-content: center; } [b-ujqn3dxlm2] .cb-manifesto-qr canvas, [b-ujqn3dxlm2] .cb-manifesto-qr img { width: 100% !important; height: 100% !important; } /* ===== Footer ===== */ [b-ujqn3dxlm2] .cb-manifesto-footer { text-align: center; color: #888; font-size: 8.5pt; border-top: 1px solid #eee; padding-top: 3mm; } /* ===== Print ===== */ @media print { @page { size: A4 portrait; margin: 0; } [b-ujqn3dxlm2] .cb-manifesto-folha { margin: 0; box-shadow: none; page-break-inside: avoid; } /* Esconde elementos da app que não devem ir pro papel. O pai (página) cuida disso, mas reforço aqui. */ } /* ===== Mobile preview ===== */ @media (max-width: 720px) { [b-ujqn3dxlm2] .cb-manifesto-folha { width: 100%; min-height: auto; padding: 8mm; font-size: 10pt; } [b-ujqn3dxlm2] .cb-manifesto-header { flex-direction: column; gap: 4mm; } [b-ujqn3dxlm2] .cb-manifesto-titulo { text-align: left; } } /* /Pages/Cliente/Confirmar.razor.rz.scp.css */ /* =================================================== /cliente/confirmar/{token} Página pública mobile-first refatorada no Bloco 6A. =================================================== */ [b-xcik8s9898] .cb-publica-wrap { max-width: 720px; margin: 0 auto; padding: 1rem; } [b-xcik8s9898] .cb-publica-loading { text-align: center; padding: 3rem 1rem; } [b-xcik8s9898] .cb-publica-hero { padding: 1.5rem 0 1rem; text-align: center; } [b-xcik8s9898] .cb-publica-hero h2 { margin-bottom: 0.5rem; color: var(--cb-color-primary, #6f42c1); } [b-xcik8s9898] .cb-publica-section { background: #fff; border-radius: 14px; padding: 1.25rem; margin-bottom: 1rem; box-shadow: 0 1px 4px rgba(0,0,0,0.04); } [b-xcik8s9898] .cb-publica-section header { margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid #f0f0f0; } [b-xcik8s9898] .cb-publica-section h4 { margin: 0 0 0.25rem 0; font-size: 1.1rem; font-weight: 600; } [b-xcik8s9898] .cb-empty-card { background: #f8f9fa; border-radius: 10px; padding: 1rem; text-align: center; border: 1px dashed #dee2e6; } [b-xcik8s9898] .cb-acompanhante-card { background: #f8f9fa; border-radius: 10px; padding: 1rem; margin-bottom: 0.75rem; border-left: 3px solid transparent; } [b-xcik8s9898] .cb-acompanhante-card.is-principal { border-left-color: var(--cb-color-primary, #6f42c1); background: #faf6ff; } [b-xcik8s9898] .cb-termo-card { background: #fafafa; border-radius: 10px; padding: 0.85rem 1rem; margin-bottom: 0.5rem; border: 1px solid #eee; } [b-xcik8s9898] .cb-termo-card.cb-termo-opcional { opacity: 0.85; } [b-xcik8s9898] .cb-termo-card .form-check-label { cursor: pointer; margin-left: 0.25rem; } [b-xcik8s9898] .cb-publica-actions { margin-top: 1.5rem; padding-bottom: 2rem; } [b-xcik8s9898] .cb-termo-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1050; padding: 1rem; } [b-xcik8s9898] .cb-termo-modal { background: #fff; border-radius: 12px; padding: 1.5rem; max-width: 600px; width: 100%; max-height: 80vh; overflow-y: auto; } @media (max-width: 576px) { [b-xcik8s9898] .cb-publica-wrap { padding: 0.5rem; } [b-xcik8s9898] .cb-publica-section { padding: 1rem; } } /* /Pages/Cliente/Escolher.razor.rz.scp.css */ /* =================================================== /cliente/confirmar/{token}/escolher Vitrine pública mobile-first (Bloco 6B). Grid 2 colunas com modal de variantes ao toque. =================================================== */ [b-rwg5cw92ow] .cb-escolher-wrap { max-width: 720px; margin: 0 auto; padding: 0.75rem 0.75rem 6rem; /* espaço pro footer fixo */ } [b-rwg5cw92ow] .cb-escolher-loading { text-align: center; padding: 4rem 1rem; } /* ===== Header ===== */ [b-rwg5cw92ow] .cb-escolher-header { background: #fff; border-radius: 14px; padding: 1rem; margin-bottom: 1rem; box-shadow: 0 1px 4px rgba(0,0,0,0.04); text-align: center; } [b-rwg5cw92ow] .cb-escolher-loja { margin-bottom: 0.5rem; } [b-rwg5cw92ow] .cb-escolher-logo { max-height: 36px; max-width: 180px; } [b-rwg5cw92ow] .cb-escolher-loja-nome { font-weight: 600; color: var(--cb-color-primary, #6f42c1); font-size: 1rem; } [b-rwg5cw92ow] .cb-escolher-titulo h2 { margin: 0.25rem 0 0.25rem; font-size: 1.4rem; color: var(--cb-color-primary, #6f42c1); } [b-rwg5cw92ow] .cb-escolher-titulo p { margin: 0; color: #666; font-size: 0.95rem; } [b-rwg5cw92ow] .cb-escolher-contador { margin-top: 0.75rem; padding: 0.5rem; background: #f8f9fa; border-radius: 10px; font-size: 0.95rem; } /* ===== Filtros ===== */ [b-rwg5cw92ow] .cb-escolher-filtros { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 1rem; } [b-rwg5cw92ow] .cb-escolher-filtros-row { display: flex; flex-direction: column; gap: 0.25rem; } [b-rwg5cw92ow] .cb-filtro-label { font-size: 0.75rem; color: #666; font-weight: 500; text-transform: uppercase; letter-spacing: 0.03em; } /* ===== Grid de produtos ===== */ [b-rwg5cw92ow] .cb-escolher-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } @media (min-width: 720px) { [b-rwg5cw92ow] .cb-escolher-grid { grid-template-columns: repeat(3, 1fr); } } [b-rwg5cw92ow] .cb-produto-card { background: #fff; border: 2px solid transparent; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.05); text-align: left; cursor: pointer; padding: 0; display: flex; flex-direction: column; transition: transform .12s, border-color .12s; } [b-rwg5cw92ow] .cb-produto-card:active { transform: scale(0.98); } [b-rwg5cw92ow] .cb-produto-card.tem-marcadas { border-color: var(--cb-color-primary, #6f42c1); box-shadow: 0 2px 8px rgba(111, 66, 193, 0.15); } [b-rwg5cw92ow] .cb-produto-foto-wrap { position: relative; aspect-ratio: 1 / 1; background: #f0f0f0; overflow: hidden; } [b-rwg5cw92ow] .cb-produto-foto { width: 100%; height: 100%; object-fit: cover; display: block; } [b-rwg5cw92ow] .cb-produto-foto-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #ccc; font-size: 2rem; } [b-rwg5cw92ow] .cb-produto-badge { position: absolute; top: 8px; right: 8px; background: var(--cb-color-primary, #6f42c1); color: #fff; font-size: 0.72rem; padding: 3px 8px; border-radius: 999px; font-weight: 600; } [b-rwg5cw92ow] .cb-produto-nome { font-size: 0.92rem; font-weight: 500; padding: 0.5rem 0.75rem 0.1rem; line-height: 1.25; color: #333; /* clamp 2 linhas */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } [b-rwg5cw92ow] .cb-produto-disp { font-size: 0.78rem; color: #888; padding: 0 0.75rem 0.6rem; } /* ===== Vazio ===== */ [b-rwg5cw92ow] .cb-escolher-vazio { text-align: center; color: #999; padding: 3rem 1rem; } [b-rwg5cw92ow] .cb-escolher-vazio i { font-size: 2.5rem; display: block; margin-bottom: 0.5rem; color: #ccc; } /* ===== Footer fixo ===== */ [b-rwg5cw92ow] .cb-escolher-footer { position: fixed; bottom: 0; left: 0; right: 0; padding: 0.75rem; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(8px); border-top: 1px solid #eee; z-index: 50; } [b-rwg5cw92ow] .cb-escolher-footer .btn-primary { background: var(--cb-color-primary, #6f42c1); border-color: var(--cb-color-primary, #6f42c1); } /* ===== Modal de variantes ===== */ [b-rwg5cw92ow] .cb-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 100; animation: cb-fade-in-b-rwg5cw92ow .15s; } [b-rwg5cw92ow] .cb-modal { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-radius: 18px 18px 0 0; padding: 1.25rem 1rem 1.5rem; z-index: 101; max-height: 88vh; overflow-y: auto; animation: cb-slide-up-b-rwg5cw92ow .2s; box-shadow: 0 -2px 20px rgba(0,0,0,0.2); } @media (min-width: 720px) { [b-rwg5cw92ow] .cb-modal { bottom: 50%; left: 50%; right: auto; transform: translate(-50%, 50%); width: 640px; max-width: 95vw; border-radius: 18px; } } [b-rwg5cw92ow] .cb-modal-fechar { position: absolute; top: 0.75rem; right: 0.75rem; background: #f0f0f0; border: none; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; } [b-rwg5cw92ow] .cb-modal-header { margin-bottom: 1rem; padding-right: 2rem; /* espaço pro X */ } [b-rwg5cw92ow] .cb-modal-header h4 { margin: 0 0 0.5rem 0; font-size: 1.15rem; color: var(--cb-color-primary, #6f42c1); } [b-rwg5cw92ow] .cb-modal-descricao { color: #555; font-size: 0.9rem; margin: 0 0 0.5rem 0; } [b-rwg5cw92ow] .cb-modal-hint { color: #888; font-size: 0.85rem; margin: 0; } /* ===== Grid de variantes (no modal) ===== */ [b-rwg5cw92ow] .cb-variantes-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; } @media (min-width: 480px) { [b-rwg5cw92ow] .cb-variantes-grid { grid-template-columns: repeat(3, 1fr); } } [b-rwg5cw92ow] .cb-variante-card { background: #fafafa; border: 2px solid transparent; border-radius: 12px; overflow: hidden; text-align: center; padding: 0; cursor: pointer; transition: transform .12s, border-color .12s; } [b-rwg5cw92ow] .cb-variante-card.selecionada { border-color: var(--cb-color-primary, #6f42c1); background: #f4eef9; } [b-rwg5cw92ow] .cb-variante-card:active { transform: scale(0.97); } [b-rwg5cw92ow] .cb-variante-card:disabled { opacity: 0.6; cursor: progress; } [b-rwg5cw92ow] .cb-variante-foto-wrap { position: relative; aspect-ratio: 1 / 1; background: #fff; overflow: hidden; } [b-rwg5cw92ow] .cb-variante-foto { width: 100%; height: 100%; object-fit: cover; } [b-rwg5cw92ow] .cb-variante-foto-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #ccc; font-size: 1.6rem; } [b-rwg5cw92ow] .cb-variante-check { position: absolute; inset: 0; background: rgba(111, 66, 193, 0.18); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 2.4rem; text-shadow: 0 0 6px rgba(0,0,0,0.3); } [b-rwg5cw92ow] .cb-variante-loading { position: absolute; inset: 0; background: rgba(255,255,255,0.8); display: flex; align-items: center; justify-content: center; } [b-rwg5cw92ow] .cb-variante-info { padding: 0.4rem; font-size: 0.82rem; line-height: 1.25; display: flex; flex-direction: column; gap: 0.1rem; } [b-rwg5cw92ow] .cb-variante-cor { font-weight: 500; color: #333; } [b-rwg5cw92ow] .cb-variante-tamanho { color: #888; font-size: 0.78rem; } /* ===== Toast ===== */ [b-rwg5cw92ow] .cb-toast { position: fixed; left: 50%; bottom: 5.5rem; transform: translateX(-50%); background: #333; color: #fff; padding: 0.75rem 1.25rem; border-radius: 8px; font-size: 0.92rem; z-index: 200; max-width: 90vw; text-align: center; box-shadow: 0 4px 16px rgba(0,0,0,0.25); animation: cb-fade-in-b-rwg5cw92ow .2s; } [b-rwg5cw92ow] .cb-toast.aviso { background: #f0ad4e; } [b-rwg5cw92ow] .cb-toast.erro { background: #d9534f; } /* ===== Animações ===== */ @keyframes cb-fade-in-b-rwg5cw92ow { from { opacity: 0; } to { opacity: 1; } } @keyframes cb-slide-up-b-rwg5cw92ow { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* /Pages/Cliente/Obrigado.razor.rz.scp.css */ /* =================================================== /cliente/confirmar/{token}/obrigado Tela final do fluxo público (Bloco 6B). =================================================== */ [b-gp4f6xfod2] .cb-obrigado-wrap { max-width: 480px; margin: 0 auto; padding: 2rem 1rem 3rem; } [b-gp4f6xfod2] .cb-obrigado-card { background: #fff; border-radius: 16px; padding: 2.5rem 1.5rem; text-align: center; box-shadow: 0 2px 12px rgba(0,0,0,0.06); } [b-gp4f6xfod2] .cb-obrigado-icon { font-size: 4.5rem; color: #28a745; margin-bottom: 1rem; line-height: 1; } [b-gp4f6xfod2] .cb-obrigado-card h2 { color: var(--cb-color-primary, #6f42c1); margin-bottom: 1rem; font-size: 1.5rem; } [b-gp4f6xfod2] .cb-obrigado-resumo { color: #555; font-size: 1rem; margin-bottom: 1rem; } [b-gp4f6xfod2] .cb-obrigado-mensagem { color: #777; font-size: 0.95rem; margin-bottom: 2rem; line-height: 1.5; } [b-gp4f6xfod2] .cb-obrigado-whatsapp { margin-bottom: 0.25rem; background: #25d366; border-color: #25d366; } [b-gp4f6xfod2] .cb-obrigado-whatsapp:hover { background: #1ea952; border-color: #1ea952; } /* /Pages/Loja/Bags/Manifesto.razor.rz.scp.css */ /* =================================================== /loja/bags/{id}/manifesto Container/ações da página + regras print do app shell. =================================================== */ [b-5wsn9rsztq] .cb-manifesto-actions { display: flex; align-items: center; gap: 0.5rem; padding: 1rem; max-width: 220mm; margin: 0 auto; } @media print { /* Esconde toda a UI exceto o conteúdo do manifesto. */ [b-5wsn9rsztq] .cb-no-print, [b-5wsn9rsztq] .cb-manifesto-actions { display: none !important; } } /* /Pages/Loja/Bags/Preparo.razor.rz.scp.css */ /* =================================================== /loja/bags/{id}/preparo Estilos do destaque "Preferências do cliente" (Bloco 6B). =================================================== */ [b-72s6cctfp7] .cb-preferencias-card { border-left: 3px solid #d63384; background: linear-gradient(to right, #fef8fb, #fff); } [b-72s6cctfp7] .cb-preferencias-list { display: flex; flex-direction: column; gap: 0.5rem; } [b-72s6cctfp7] .cb-preferencia-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem; background: #fff; border: 1px solid #f1d1e2; border-radius: 8px; } [b-72s6cctfp7] .cb-preferencia-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; } [b-72s6cctfp7] .cb-preferencia-nome { font-weight: 500; font-size: 0.9rem; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [b-72s6cctfp7] .cb-preferencia-meta { font-size: 0.8rem; color: #888; } /* /Pages/Loja/Clientes/Detalhe.razor.rz.scp.css */ /* Bloco 10c — chips de tag na página do cliente */ [b-b4854r7krz] .cb-tag-chip-detail { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px 4px 12px; border-radius: 999px; font-size: 0.85rem; font-weight: 600; line-height: 1; } [b-b4854r7krz] .cb-tag-x { background: rgba(255, 255, 255, 0.25); border: 0; border-radius: 50%; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; color: inherit; cursor: pointer; font-size: 0.7rem; padding: 0; line-height: 1; } [b-b4854r7krz] .cb-tag-x:hover { background: rgba(255, 255, 255, 0.4); } /* /Pages/Loja/Crm/Index.razor.rz.scp.css */ /* Tabs do CRM — quebra em 2 linhas no mobile. */ [b-ogy8s7moai] .cb-crm-tabs { flex-wrap: wrap; gap: 4px; } [b-ogy8s7moai] .cb-crm-tabs .nav-link { font-size: 0.875rem; padding: 0.4rem 0.75rem; } /* Grid de cards de tag (gerenciar). */ [b-ogy8s7moai] .cb-tags-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; } [b-ogy8s7moai] .cb-tag-card { border: 1px solid #e9ecef; border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 6px; background: #fff; } /* Chip de tag (lista grande, no card). */ [b-ogy8s7moai] .cb-tag-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 0.85rem; font-weight: 600; width: fit-content; } /* Chip pequeno, na tabela de clientes. */ [b-ogy8s7moai] .cb-tag-chip-sm { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; } /* Botões de cor sugerida no modal de tag. */ [b-ogy8s7moai] .cb-cor-chip { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: transform 0.1s; } [b-ogy8s7moai] .cb-cor-chip:hover { transform: scale(1.1); } [b-ogy8s7moai] .cb-cor-chip.selected { border-color: #1f2937; box-shadow: 0 0 0 2px #fff inset; } /* /Pages/Loja/Cupons/Index.razor.rz.scp.css */ /* Modal de cupom — largura confortável pra todos os campos. */ [b-rrbtannzgl] .cb-modal-cupom { max-width: 720px; } /* Bloco visual dos atalhos rápidos. */ [b-rrbtannzgl] .cb-atalhos { background: #f8f9fa; border: 1px dashed #dee2e6; border-radius: 8px; padding: 0.5rem 0.75rem; } /* Código do cupom em destaque, monoespaçado. */ [b-rrbtannzgl] .cb-codigo-cupom { font-size: 0.95rem; background: #fff8e1; border: 1px solid #ffe082; color: #b45309; padding: 0.15rem 0.5rem; border-radius: 4px; } /* Lista de resultados da busca de cliente (cupom dirigido). */ [b-rrbtannzgl] .cb-busca-resultados { border: 1px solid #dee2e6; border-radius: 6px; max-height: 220px; overflow-y: auto; background: #fff; margin-bottom: 0.5rem; } [b-rrbtannzgl] .cb-busca-item { width: 100%; text-align: left; background: transparent; border: 0; border-bottom: 1px solid #f1f3f5; padding: 0.5rem 0.75rem; cursor: pointer; transition: background 0.15s; } [b-rrbtannzgl] .cb-busca-item:last-child { border-bottom: 0; } [b-rrbtannzgl] .cb-busca-item:hover { background: #f8f9fa; } /* /Pages/Loja/Dashboard.razor.rz.scp.css */ /* =================================================== /loja/dashboard — atalho do módulo financeiro (Bloco 8.8) =================================================== */ [b-fevr2q258d] .cb-fin-shortcut { background: linear-gradient(135deg, #f8f9ff 0%, #ede5f8 100%); border-left: 4px solid #6f42c1 !important; } [b-fevr2q258d] .cb-fin-shortcut-icon { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--cb-color-primary, #6f42c1); color: #fff; font-size: 1.6rem; flex-shrink: 0; } /* =================================================== Bloco 10c — cards CRM no dashboard (clicáveis). =================================================== */ [b-fevr2q258d] .cb-crm-card { transition: transform 0.12s, box-shadow 0.12s; cursor: pointer; } [b-fevr2q258d] .cb-crm-card:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08) !important; } /* /Pages/Loja/Financeiro/Dashboard.razor.rz.scp.css */ /* =================================================== /loja/financeiro/dashboard (Bloco 8.7) KPIs gradiente + barras CSS pra série mensal. =================================================== */ [b-wf1e3wjnrq] .cb-fin-kpi { padding: 1rem; border: 0; border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); height: 100%; display: flex; flex-direction: column; gap: 0.2rem; color: #fff; transition: transform .12s; } [b-wf1e3wjnrq] .cb-fin-kpi:hover { transform: translateY(-2px); } [b-wf1e3wjnrq] .cb-fin-kpi small { opacity: 0.85; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 500; } [b-wf1e3wjnrq] .cb-fin-kpi strong { font-size: 1.6rem; font-weight: 700; line-height: 1.1; } [b-wf1e3wjnrq] .cb-fin-meta { font-size: 0.72rem; opacity: 0.8; text-transform: none; letter-spacing: 0; } [b-wf1e3wjnrq] .cb-fin-azul { background: linear-gradient(135deg, #0d6efd 0%, #084ab2 100%); } [b-wf1e3wjnrq] .cb-fin-verde { background: linear-gradient(135deg, #28a745 0%, #167432 100%); } [b-wf1e3wjnrq] .cb-fin-laranja { background: linear-gradient(135deg, #fd7e14 0%, #c1530b 100%); } [b-wf1e3wjnrq] .cb-fin-vermelho { background: linear-gradient(135deg, #dc3545 0%, #962b35 100%); } [b-wf1e3wjnrq] .cb-fin-roxo { background: linear-gradient(135deg, #7e3aed 0%, #5821b8 100%); } /* ===== Barras CSS ===== */ [b-wf1e3wjnrq] .cb-bars-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.75rem; align-items: end; min-height: 180px; padding: 0.5rem 0; } [b-wf1e3wjnrq] .cb-bar-col { text-align: center; } [b-wf1e3wjnrq] .cb-bar-pair { display: flex; align-items: end; justify-content: center; gap: 4px; height: 165px; } [b-wf1e3wjnrq] .cb-bar { width: 14px; border-radius: 3px 3px 0 0; min-height: 2px; transition: height .25s ease; } [b-wf1e3wjnrq] .cb-bar.receita { background: linear-gradient(to top, #28a745, #46c95f); } [b-wf1e3wjnrq] .cb-bar.despesa { background: linear-gradient(to top, #dc3545, #f06070); } [b-wf1e3wjnrq] .cb-bar-label { margin-top: 0.4rem; font-size: 0.75rem; color: #666; } [b-wf1e3wjnrq] .cb-bars-legend { text-align: center; margin-top: 0.5rem; font-size: 0.85rem; color: #555; } [b-wf1e3wjnrq] .cb-legend-box { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: 4px; vertical-align: middle; } [b-wf1e3wjnrq] .cb-legend-box.receita { background: #28a745; } [b-wf1e3wjnrq] .cb-legend-box.despesa { background: #dc3545; } /* /Pages/Loja/Financeiro/Despesas.razor.rz.scp.css */ /* =================================================== /loja/financeiro/despesas (Bloco 8.6) Modal compartilhado entre 3 abas (categorias, recorrentes, lançamentos). =================================================== */ [b-gos7inoefk] .cb-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 100; animation: cb-fade-in-b-gos7inoefk .15s; } [b-gos7inoefk] .cb-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; border-radius: 12px; padding: 1.5rem; width: 560px; max-width: 92vw; max-height: 90vh; overflow-y: auto; z-index: 101; box-shadow: 0 6px 24px rgba(0,0,0,0.18); } @keyframes cb-fade-in-b-gos7inoefk { from { opacity: 0; } to { opacity: 1; } } /* /Pages/Loja/Promocoes/Index.razor.rz.scp.css */ /* Modal mais largo para acomodar atalhos + alvos múltiplos. */ [b-r0lxpkwen5] .cb-modal-lg { max-width: 720px; } /* Bloco visual dos atalhos rápidos. */ [b-r0lxpkwen5] .cb-atalhos { background: #f8f9fa; border: 1px dashed #dee2e6; border-radius: 8px; padding: 0.5rem 0.75rem; } /* Linha de configuração de alvo. */ [b-r0lxpkwen5] .cb-alvo-row { background: #fafbfc; border: 1px solid #eef0f2; border-radius: 6px; padding: 0.4rem 0.5rem; } /* /Pages/Loja/Vendedores/Index.razor.rz.scp.css */ /* =================================================== /loja/vendedores Modal compartilhado + bloco de credenciais (Bloco 7.5). =================================================== */ [b-55bquwmrb9] .cb-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 100; animation: cb-fade-in-b-55bquwmrb9 .15s; } [b-55bquwmrb9] .cb-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; border-radius: 12px; padding: 1.5rem; width: 560px; max-width: 92vw; max-height: 90vh; overflow-y: auto; z-index: 101; box-shadow: 0 6px 24px rgba(0,0,0,0.18); } [b-55bquwmrb9] .cb-modal-fechar { position: absolute; top: 0.75rem; right: 0.75rem; } [b-55bquwmrb9] .cb-modal-senha { width: 480px; } [b-55bquwmrb9] .cb-credencial-bloco { background: #f8f9fa; padding: 0.75rem; border-radius: 8px; border: 1px solid #e9ecef; } @keyframes cb-fade-in-b-55bquwmrb9 { from { opacity: 0; } to { opacity: 1; } } /* ============================================ Bloco 11c — Card de aniversariantes da equipe ============================================ */ [b-55bquwmrb9] .cb-card-aniv { background: linear-gradient(135deg, #faf5ff 0%, #fdf2f8 100%); border-left: 4px solid #a855f7 !important; } [b-55bquwmrb9] .cb-aniv-chip { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #e9d5ff; border-radius: 999px; padding: 4px 12px; font-size: 0.85rem; color: #6b21a8; } [b-55bquwmrb9] .cb-aniv-chip.hoje { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); border-color: #fbbf24; color: #92400e; font-weight: 600; animation: cb-pulse-b-55bquwmrb9 1.5s ease-in-out infinite; } [b-55bquwmrb9] .cb-aniv-chip small { color: #94a3b8; font-variant-numeric: tabular-nums; } [b-55bquwmrb9] .cb-aniv-chip.hoje small { color: #b45309; } @keyframes cb-pulse-b-55bquwmrb9 { 0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.5); } 50% { box-shadow: 0 0 0 6px rgba(251, 191, 36, 0); } } /* /Pages/Vendedor/Dashboard.razor.rz.scp.css */ /* =================================================== /vendedor/dashboard (Bloco 7.8) KPIs coloridos + listas de bags/vendas recentes. =================================================== */ [b-j6oqm804tt] .cb-kpi { padding: 1rem; border: 0; border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); height: 100%; display: flex; flex-direction: column; gap: 0.25rem; color: #fff; } [b-j6oqm804tt] .cb-kpi small { opacity: 0.85; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 500; } [b-j6oqm804tt] .cb-kpi strong { font-size: 1.5rem; font-weight: 700; line-height: 1.1; } [b-j6oqm804tt] .cb-kpi-meta { font-size: 0.72rem; opacity: 0.8; margin-top: 0.1rem; } [b-j6oqm804tt] .cb-kpi-roxo { background: linear-gradient(135deg, #7e3aed 0%, #5821b8 100%); } [b-j6oqm804tt] .cb-kpi-verde { background: linear-gradient(135deg, #28a745 0%, #167432 100%); } [b-j6oqm804tt] .cb-kpi-azul { background: linear-gradient(135deg, #0d6efd 0%, #084ab2 100%); } [b-j6oqm804tt] .cb-kpi-laranja { background: linear-gradient(135deg, #fd7e14 0%, #c1530b 100%); } /* /Pages/Vendedor/Financeiro.razor.rz.scp.css */ /* =================================================== /vendedor/financeiro (Bloco 7.12) Reusa estilos KPI do Dashboard via classes globais. =================================================== */ [b-ssqkk81sc3] .cb-kpi { padding: 1rem; border: 0; border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); height: 100%; display: flex; flex-direction: column; gap: 0.25rem; color: #fff; } [b-ssqkk81sc3] .cb-kpi small { opacity: 0.85; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 500; } [b-ssqkk81sc3] .cb-kpi strong { font-size: 1.5rem; font-weight: 700; line-height: 1.1; } [b-ssqkk81sc3] .cb-kpi-roxo { background: linear-gradient(135deg, #7e3aed 0%, #5821b8 100%); } [b-ssqkk81sc3] .cb-kpi-verde { background: linear-gradient(135deg, #28a745 0%, #167432 100%); } [b-ssqkk81sc3] .cb-kpi-azul { background: linear-gradient(135deg, #0d6efd 0%, #084ab2 100%); } /* /Pages/Vendedor/PrimeiroAcesso.razor.rz.scp.css */ /* =================================================== /vendedor/primeiro-acesso (Bloco 7.7) Tela de boas-vindas — gate antes do dashboard. =================================================== */ [b-eyr7wlxgae] .cb-pa-wrap { min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; background: linear-gradient(135deg, #f8f9fa 0%, #ede5f8 100%); padding: 2rem 1rem 3rem; } [b-eyr7wlxgae] .cb-pa-card { background: #fff; border-radius: 16px; box-shadow: 0 4px 24px rgba(0,0,0,0.08); padding: 2rem 2rem 2.5rem; width: 720px; max-width: 95vw; } [b-eyr7wlxgae] .cb-pa-hero { text-align: center; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid #eee; } [b-eyr7wlxgae] .cb-pa-hero i { font-size: 3rem; color: var(--cb-color-primary, #6f42c1); } [b-eyr7wlxgae] .cb-pa-hero h2 { margin: 0.5rem 0 0.25rem; color: var(--cb-color-primary, #6f42c1); } [b-eyr7wlxgae] .cb-pa-hero p { color: #555; margin: 0; font-size: 0.95rem; } [b-eyr7wlxgae] .cb-pa-section { color: var(--cb-color-primary, #6f42c1); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; border-bottom: 1px solid #eee; padding-bottom: 0.4rem; margin-bottom: 0.75rem; } /* ============================================ Bloco 11 — Termo de Parceria ============================================ */ [b-eyr7wlxgae] .cb-termo-bloco { background: #fafbfc; border: 1px solid #eef0f2; border-radius: 8px; padding: 12px 14px; } [b-eyr7wlxgae] .cb-modal-termo { max-width: 720px; max-height: 85vh; display: flex; flex-direction: column; } [b-eyr7wlxgae] .cb-termo-conteudo { overflow-y: auto; flex: 1; background: #fff; border: 1px solid #e9ecef; border-radius: 6px; padding: 14px 16px; margin-top: 8px; } [b-eyr7wlxgae] .cb-termo-conteudo pre { font-family: system-ui, -apple-system, sans-serif; white-space: pre-wrap; word-wrap: break-word; font-size: 0.9rem; line-height: 1.55; color: #1f2937; margin: 0; }