/* BLUHUB · componentes e telas. Usa só os tokens de css/tokens.css. */

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--fonte-texto); font-size: var(--tam-md); line-height: 1.5;
  background: var(--fundo-app); color: var(--texto);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
[hidden] { display: none !important; }
h1, h2, h3, h4 { font-family: var(--fonte-titulo); font-weight: var(--peso-titulo); margin: 0; line-height: 1.2; color: var(--texto); }
p { margin: 0; }
a { color: var(--cor-marca-texto); }
svg.ic { width: 20px; height: 20px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.suave { color: var(--texto-apoio); font-size: var(--tam-sm); }
.item .texto .suave { display: block; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-family: var(--fonte-titulo); font-weight: var(--peso-numero); font-variant-numeric: tabular-nums; }

/* ---------- Botões (pílula) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2);
  min-height: 44px; padding: 0 var(--esp-5); border-radius: var(--raio-pilula); border: 1.5px solid transparent;
  font: 500 var(--tam-md)/1 var(--fonte-titulo); cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform var(--transicao), box-shadow var(--transicao), background var(--transicao);
  background: transparent; color: var(--texto);
}
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .6; cursor: progress; }
.btn-primario { background: var(--cor-botao); color: var(--cor-botao-texto); box-shadow: var(--sombra-cor); }
.btn-primario:hover { filter: brightness(1.05); }
.btn-contorno { border-color: var(--linha); background: var(--superficie); color: var(--texto); }
.btn-contorno:hover { border-color: var(--cor-300); background: var(--cor-50); }
.btn-texto { color: var(--cor-marca-texto); padding: 0 var(--esp-2); min-height: 36px; }
.btn-perigo { border-color: var(--sel-vermelho-fundo); color: var(--sel-vermelho-texto); background: var(--superficie); }
.btn-pequeno { min-height: 36px; padding: 0 var(--esp-4); font-size: var(--tam-sm); }
.btn svg.seta { width: 16px; height: 16px; stroke-width: 2; margin-right: -4px; }
.btn-redondo { width: 38px; height: 38px; min-height: 38px; padding: 0; border-radius: 50%; }
.btn-icone { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--superficie); color: var(--texto); display: grid; place-items: center; cursor: pointer; box-shadow: var(--sombra-1); }
:is(.btn, .btn-icone, input, select, textarea, a, button):focus-visible { outline: 2.5px solid var(--cor-primaria); outline-offset: 2px; }

/* ---------- Selos (pílulas pastel) ---------- */
.selo { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--raio-pilula); font: 600 var(--tam-xs)/1.5 var(--fonte-texto); white-space: nowrap; }
.selo-vermelho { background: var(--sel-vermelho-fundo); color: var(--sel-vermelho-texto); }
.selo-laranja { background: var(--sel-laranja-fundo); color: var(--sel-laranja-texto); }
.selo-verde { background: var(--sel-verde-fundo); color: var(--sel-verde-texto); }
.selo-cinza { background: var(--sel-cinza-fundo); color: var(--sel-cinza-texto); }
.selo-cor { background: var(--cor-100); color: var(--cor-marca-texto); }

/* ---------- Ícone em círculo pastel ---------- */
.ic-circulo { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--cor-100); color: var(--cor-marca-texto); flex-shrink: 0; }
.ic-circulo.verde { background: var(--sel-verde-fundo); color: var(--sel-verde-texto); }
.ic-circulo.laranja { background: var(--sel-laranja-fundo); color: var(--sel-laranja-texto); }
.ic-circulo.vermelho { background: var(--sel-vermelho-fundo); color: var(--sel-vermelho-texto); }

/* ---------- Campos ---------- */
label { display: grid; gap: 6px; font: 500 var(--tam-sm)/1.3 var(--fonte-titulo); color: var(--texto-apoio); }
input, select, textarea {
  width: 100%; min-height: 48px; padding: 12px 18px; border: 1.5px solid var(--linha); border-radius: var(--raio-md);
  background: var(--superficie-2); color: var(--texto); font: 400 var(--tam-md)/1.4 var(--fonte-texto);
  transition: border-color var(--transicao), background var(--transicao);
}
input:focus, select:focus, textarea:focus { border-color: var(--cor-primaria); background: var(--superficie); outline: none; box-shadow: 0 0 0 4px var(--cor-100); }
textarea { min-height: 90px; resize: vertical; border-radius: var(--raio-md); }
label.check { display: flex; align-items: center; gap: var(--esp-3); font-family: var(--fonte-texto); color: var(--texto); }
/* radio e checkbox: tamanho padrão do sistema, na cor da empresa (nunca herdam o tamanho dos campos de texto) */
input[type="radio"], input[type="checkbox"] { width: 20px; min-height: 20px; height: 20px; padding: 0; margin: 0; flex: none; border-radius: 50%; accent-color: var(--cor-botao); box-shadow: none; }
input[type="checkbox"] { border-radius: 6px; }
/* Opção em cartão: o cartão inteiro é clicável; o escolhido fica na cor da empresa */
label.opcao { display: flex; align-items: center; gap: var(--esp-3); cursor: pointer; font-family: var(--fonte-texto); color: var(--texto); border: 1.5px solid transparent; transition: border-color .15s, background .15s; }
label.opcao:hover { border-color: var(--linha); }
label.opcao:has(input:checked) { background: var(--cor-50); border-color: var(--cor-primaria); }
label.opcao .texto { flex: 1; min-width: 0; display: grid; gap: 2px; }
label.opcao strong { white-space: normal; }
label.opcao .preco { flex: none; text-align: right; font: 500 var(--tam-md)/1.2 var(--fonte-titulo); }
label.opcao .duracao { white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
label.opcao .duracao svg.ic { width: 14px; height: 14px; }
.campo-busca { position: relative; }
.campo-busca svg.ic { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--texto-suave); }
.campo-busca input { padding-left: 46px; border-radius: var(--raio-pilula); background: var(--superficie); }
.erro { color: var(--sel-vermelho-texto); font-size: var(--tam-sm); }
.aviso-ok { margin: 0; padding: 10px 12px; border-radius: var(--raio-md); background: var(--sel-verde-fundo); color: var(--sel-verde-texto); font-size: var(--tam-sm); }
/* variações com preço (tamanhos/fatias) no cadastro do produto */
.var-editor summary, .custo-ajuste summary { cursor: pointer; }
.custo-ajuste { padding: 10px 12px; border-radius: var(--raio-md); background: var(--superficie-2); }
.var-linha { display: grid; grid-template-columns: minmax(0, 1fr) 110px auto auto; gap: 8px; align-items: center; }
/* itens do kit: quantidade · produto (ou item livre) · remover */
.kit-linha { display: grid; grid-template-columns: 76px minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.kit-linha [hidden] { display: none; }
@media (max-width: 560px) { .kit-linha { grid-template-columns: 76px minmax(0, 1fr) auto; } .kit-linha > [name="kd"] { grid-column: 1 / -1; grid-row: 2; } }
/* leitor de código pela câmera */
.camera-leitor .camera-caixa { display: grid; gap: var(--esp-3); padding: var(--esp-5); }
.camera-video { position: relative; border-radius: var(--raio-md); overflow: hidden; background: #000; aspect-ratio: 4 / 3; }
.camera-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.camera-mira { position: absolute; inset: 30% 10%; border: 3px solid rgba(255, 255, 255, .9); border-radius: var(--raio-sm); box-shadow: 0 0 0 999px rgba(0, 0, 0, .25); }
.campo-com-botao { display: flex; gap: var(--esp-2); align-items: center; }
.campo-com-botao > input { flex: 1; min-width: 0; }
/* "Tirar foto" (câmera) só faz sentido em aparelho de toque */
@media (hover: hover) and (pointer: fine) { .so-toque { display: none !important; } }
.enc-arquivos { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--esp-2); }
.enc-arquivo { display: grid; gap: 4px; justify-items: center; text-align: center; text-decoration: none; color: inherit; min-width: 0; }
.enc-arquivo img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--raio-md, 12px); background: var(--superficie-2); }
.enc-arquivo .suave { font-size: 12px; overflow-wrap: anywhere; }
@media (max-width: 600px) { .item.passo { flex-wrap: wrap; } .item.passo > .texto { flex: 1 1 calc(100% - 60px); } .item.passo > :last-child:not(.texto) { margin-left: 52px; } }
@media (max-width: 560px) { .var-linha { grid-template-columns: minmax(0, 1fr) 96px; } .var-linha .check, .var-linha .linha-botoes { grid-column: span 1; } }
/* campo com problema: borda vermelha + explicação logo abaixo */
.campo-invalido, .campo-invalido:focus { border-color: var(--sel-vermelho-texto) !important; background: var(--sel-vermelho-fundo); box-shadow: 0 0 0 3px var(--sel-vermelho-fundo); }
.erro-campo { display: block; margin-top: 4px; color: var(--sel-vermelho-texto); font: 500 var(--tam-xs)/1.35 var(--fonte-texto); }

/* ---------- Abas segmentadas (pílula) ---------- */
.segmentado { display: inline-flex; padding: 4px; gap: 2px; border-radius: var(--raio-pilula); background: var(--superficie); box-shadow: var(--sombra-1); }
.segmentado button { border: 0; background: transparent; color: var(--texto-apoio); font: 500 var(--tam-sm)/1 var(--fonte-titulo); padding: 10px 18px; border-radius: var(--raio-pilula); cursor: pointer; }
.segmentado button[aria-pressed="true"] { background: var(--cor-botao); color: var(--cor-botao-texto); }
.segmentado { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.segmentado button { white-space: nowrap; flex-shrink: 0; }
/* abas do editor de landing pages: quebram linha em vez de rolar (cabem todas à vista) */
.abas-editor { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.abas-editor button { border: 1px solid var(--borda, rgba(0,0,0,.08)); background: var(--superficie); color: var(--texto-apoio); font: 500 var(--tam-sm)/1.1 var(--fonte-titulo); padding: 8px 14px; border-radius: var(--raio-pilula); cursor: pointer; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: var(--toque-min, 44px); justify-content: center; }
.abas-editor button small { font: 400 var(--tam-xs)/1.1 var(--fonte-texto); opacity: .8; max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.abas-editor button[aria-selected="true"] { background: var(--cor-botao); color: var(--cor-botao-texto); border-color: transparent; }
.abas-editor .aba-nova { border-style: dashed; }
/* editor de landing pages + prévia ao lado (telas largas) ou por cima (botão "Prévia") */
.ed-site { display: grid; gap: 14px; grid-template-columns: minmax(0, 900px); align-items: start; }
.ed-previa { display: none; }
.ed-previa.aberta { display: grid; position: fixed; inset: 0 0 0 auto; width: min(520px, 100vw); z-index: 50; padding: 12px; background: var(--fundo, #eef3fb); box-shadow: -8px 0 32px rgba(0,0,0,.18); }
.ed-previa { grid-template-rows: auto 1fr; gap: 8px; }
.ed-previa-barra { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.ed-previa-barra > div:first-child { display: grid; gap: 2px; }
.ed-previa-barra .suave { font-size: var(--tam-xs); }
.ed-previa-tela { position: relative; overflow: hidden; border-radius: 16px; background: #fff; box-shadow: var(--sombra-1); min-height: 0; }
.ed-previa-tela iframe { border: 0; position: absolute; top: 0; left: 0; transform-origin: 0 0; background: #fff; }
@media (min-width: 1400px) {
  .ed-site { grid-template-columns: minmax(0, 820px) minmax(420px, 1fr); }
  .ed-previa, .ed-previa.aberta { display: grid; position: sticky; top: 8px; height: calc(100vh - 16px); inset: auto; width: auto; padding: 0; background: none; box-shadow: none; z-index: auto; }
  .ed-previa-abrir, .ed-previa-fechar { display: none; }
}
.conteudo-modulo { display: grid; gap: var(--esp-5); align-content: start; }
/* filtros e abas largos rolam dentro do próprio bloco, sem alargar a página */
.conteudo-modulo > *, .barra-ferramentas > * { min-width: 0; max-width: 100%; }
.linha-botoes { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.modal h4 { font-size: var(--tam-md); }
.item .num { font-size: var(--tam-md); white-space: nowrap; }

/* ---------- Agenda (grade do dia) ---------- */
.ag-grade { display: flex; overflow-x: auto; padding: var(--esp-3) var(--esp-3) var(--esp-4); }
.ag-coluna-horas { position: relative; width: 52px; flex-shrink: 0; margin-top: 44px; }
.ag-hora { position: absolute; left: 0; font: 500 var(--tam-xs)/1 var(--fonte-titulo); color: var(--texto-suave); transform: translateY(-50%); }
.ag-coluna { flex: 1 0 190px; min-width: 190px; border-left: 1px solid var(--linha); }
.ag-cab { height: 44px; display: flex; align-items: center; gap: var(--esp-2); padding: 0 var(--esp-3); }
.ag-cab .avatar { width: 28px; height: 28px; font-size: 11px; }
.ag-cab strong { font: 600 var(--tam-sm)/1.2 var(--fonte-titulo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-trilho { position: relative; cursor: copy; }
.ag-linha { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--linha); }
.ag-fora { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in oklch, var(--texto-suave) 10%, transparent) 6px 7px); }
.ag-folga { background-color: var(--sel-laranja-fundo); opacity: .8; }
.ag-folga span { display: block; padding: 4px 8px; font: 500 var(--tam-xs)/1.2 var(--fonte-titulo); color: var(--sel-laranja-texto); }
.ag-bloco {
  position: absolute; left: 4px; right: 4px; z-index: 1; border: 0; border-left: 4px solid var(--c); border-radius: 12px; padding: 5px 8px;
  background: color-mix(in oklch, var(--c) 16%, var(--superficie)); color: var(--texto); text-align: left; cursor: pointer; overflow: hidden;
  display: flex; flex-direction: column; gap: 1px; font: 400 var(--tam-xs)/1.25 var(--fonte-texto); box-shadow: var(--sombra-1);
}
.ag-bloco:hover { filter: brightness(.98); z-index: 2; }
/* encaixe: divide o horário com o atendimento que já estava lá (metade cada) */
.ag-bloco.ag-meia { right: calc(50% + 2px); }
.ag-bloco.ag-encaixe { left: calc(50% + 2px); z-index: 2; border-left-style: dashed; }
.ag-bloco strong { font: 600 var(--tam-sm)/1.2 var(--fonte-titulo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-bloco .ag-h, .ag-bloco .ag-s { color: var(--texto-apoio); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-bloco .selo { align-self: flex-start; font-size: 10px; padding: 1px 7px; }
/* compromisso pessoal da profissional: listrado e com borda tracejada, para não parecer cliente */
.ag-bloco.ag-compromisso {
  border-left-style: dashed; box-shadow: none;
  background: repeating-linear-gradient(135deg, color-mix(in oklch, var(--c) 10%, var(--superficie)) 0 8px, color-mix(in oklch, var(--c) 18%, var(--superficie)) 8px 10px);
}
.ag-bloco.ag-compromisso .ag-h { font-weight: 600; }
.ag-apagado { opacity: .55; }
.ag-apagado strong { text-decoration: line-through; }

/* ---------- Comandas ---------- */
.cmd-card { display: grid; gap: 2px; text-align: left; border: 0; cursor: pointer; font: inherit; color: var(--texto); }
.cmd-card:hover { box-shadow: var(--sombra-2); }

/* ---------- Produtos e portfólio ---------- */
.prod-card { display: grid; gap: 4px; text-align: left; border: 0; cursor: pointer; font: inherit; color: var(--texto); padding: var(--esp-3); }
.prod-card:hover { box-shadow: var(--sombra-2); }
.prod-card.inativo { opacity: .55; }
/* grade de cartões (produtos, comandas, contas): colunas iguais, nunca passa da tela */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: var(--esp-4); }
.cards > * { min-width: 0; }
.cards > .prod-card { align-content: start; }
@media (max-width: 600px) { .cards:has(> .prod-card) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-3); } }
.prod-foto { aspect-ratio: 4 / 3; border-radius: var(--raio-md); background: var(--cor-50); color: var(--cor-marca-texto); display: grid; place-items: center; overflow: hidden; margin-bottom: 6px; }
.prod-foto img { width: 100%; height: 100%; object-fit: cover; }
.prod-foto svg.ic { width: 36px; height: 36px; }
.prod-foto-grande { max-width: 320px; }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--esp-3); }
.galeria-item { position: relative; aspect-ratio: 1; border: 0; padding: 0; border-radius: var(--raio-md); overflow: hidden; cursor: pointer; background: var(--superficie-2); }
.galeria-item img { width: 100%; height: 100%; object-fit: cover; }
.galeria-item span { position: absolute; left: 8px; right: 8px; bottom: 8px; padding: 4px 10px; border-radius: var(--raio-pilula); background: rgba(11, 27, 51, .6); color: #fff; font: 500 var(--tam-xs)/1.3 var(--fonte-titulo); text-align: left; }
.galeria-item.inativo { opacity: .45; }

/* ---------- Vendas (PDV) ---------- */
.pdv { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--esp-5); align-items: start; }
.pdv-produtos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--esp-3); }
.pdv-carrinho { position: sticky; top: var(--esp-4); display: grid; gap: var(--esp-3); }
.pdv-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--esp-3); padding: 10px 0; border-bottom: 1px solid var(--linha); }
.pdv-linha:last-child { border-bottom: 0; }
.pdv-linha .pdv-ctrl { display: flex; align-items: center; gap: 6px; }
.pdv-linha .pdv-ctrl input { width: 64px; text-align: center; padding: 6px 8px; }
.pdv-total { display: flex; justify-content: space-between; align-items: baseline; font: 600 var(--tam-lg)/1.2 var(--fonte-titulo); }
.pdv-total .num { font-size: 26px; }
/* ---------- Página pública (cardápio / agendamento) ---------- */
body.publica { background: var(--fundo-app); }
.pp-pagina { max-width: 1040px; margin: 0 auto; padding: var(--esp-5) var(--esp-4) 96px; display: grid; gap: var(--esp-4); align-content: start; }
.pp-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); flex-wrap: wrap; }
.pp-marca { display: flex; align-items: center; gap: var(--esp-3); }
.pp-marca img, .pp-marca .avatar { width: 56px; height: 56px; border-radius: var(--raio-md); object-fit: cover; flex: none; }
.pp-marca .pp-avatar { border-radius: 50%; background: var(--cor-botao); color: #fff; font: 600 var(--tam-lg)/1 var(--fonte-titulo); letter-spacing: .5px; }
.pp-marca { min-width: 0; }
.pp-marca h1 { overflow-wrap: anywhere; }
.pp-marca h1 { margin: 0; font: 600 var(--tam-xl)/1.2 var(--fonte-titulo); }
.pp-marca p { margin: 0; }
.pp-boas-vindas { margin: 0; color: var(--texto-apoio); white-space: pre-wrap; }
.pp-titulo { margin: 0 0 var(--esp-2); font: 600 var(--tam-lg)/1.3 var(--fonte-titulo); }
.pp-abas { overflow-x: auto; }
.pp-pagina .pdv-produtos { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--esp-4); }
.pp-pagina .prod-card { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pp-pagina .prod-card > strong { overflow-wrap: anywhere; }
.pp-linha { display: grid; gap: 8px; margin-top: auto; padding-top: 8px; }
.pp-linha .num { font-size: var(--tam-md); }
.pp-linha > .btn { width: 100%; justify-content: center; }
.pp-qtd { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; text-align: center; gap: 6px; }
.pp-qtd .btn { padding: 0; min-height: 36px; justify-content: center; }
.pp-sacola { position: fixed; left: 50%; bottom: var(--esp-4); transform: translateX(-50%); width: min(560px, calc(100% - 32px)); display: flex; justify-content: space-between; align-items: center;
  gap: var(--esp-3); padding: 14px var(--esp-5); border: 0; border-radius: var(--raio-pilula); background: var(--cor-botao); color: #fff; font: 500 var(--tam-md)/1 var(--fonte-titulo); box-shadow: var(--sombra-2); cursor: pointer; z-index: 5; }
.pp-sacola svg.ic { width: 18px; height: 18px; }
.pp-avisos { margin: 0 0 var(--esp-4); padding: var(--esp-3) var(--esp-4) var(--esp-3) 34px; background: var(--cor-50); border-radius: var(--raio-md); font-size: var(--tam-sm); display: grid; gap: 2px; }
/* Tema da página pública (Painel BLU) */
body.pp-tema { background-color: var(--pp-fundo, var(--fundo)); font-family: var(--pp-fonte-texto, var(--fonte-texto)); }
.pp-tema .pp-marca h1 { font-family: var(--pp-fonte-titulo, var(--fonte-titulo)); font-weight: 400; font-size: clamp(26px, 6vw, 38px); color: var(--cor-primaria); }
.pp-tema h2, .pp-tema h3, .pp-tema .pp-titulo, .pp-tema .segmentado button, .pp-tema .prod-card > strong, .pp-tema .btn { font-family: var(--pp-fonte-subtitulo, var(--fonte-titulo)); }
.pp-toldo { height: 54px; background: repeating-linear-gradient(90deg, var(--cor-primaria) 0 46px, #fff 46px 92px);
  -webkit-mask: radial-gradient(23px at 23px 31px, #000 98%, transparent) 0 0 / 46px 54px repeat-x, linear-gradient(#000 0 0) top / 100% 31px no-repeat;
  mask: radial-gradient(23px at 23px 31px, #000 98%, transparent) 0 0 / 46px 54px repeat-x, linear-gradient(#000 0 0) top / 100% 31px no-repeat; }
body.pp-confeitos { background-image: radial-gradient(circle at 20px 30px, rgba(232, 99, 107, .35) 3px, transparent 4px), radial-gradient(circle at 92px 84px, rgba(255, 196, 77, .5) 3px, transparent 4px),
  radial-gradient(circle at 142px 22px, rgba(96, 200, 230, .45) 3px, transparent 4px), radial-gradient(circle at 58px 142px, rgba(160, 120, 240, .4) 3px, transparent 4px);
  background-size: 170px 170px; }
.pp-ondas .pp-pagina .card { padding-bottom: calc(var(--esp-4) + 8px);
  background: radial-gradient(circle at 9px 100%, var(--pp-fundo, var(--fundo)) 8px, transparent 8.5px) bottom / 18px 9px repeat-x, var(--superficie); }
@keyframes pp-sobe { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.pp-anima .pp-pagina .card, .pp-anima .pp-topo, .pp-anima .pp-boas-vindas { animation: pp-sobe .5s ease both; }
.pp-anima .pp-pagina .prod-card:nth-child(2) { animation-delay: .06s; } .pp-anima .pp-pagina .prod-card:nth-child(3) { animation-delay: .12s; } .pp-anima .pp-pagina .prod-card:nth-child(n+4) { animation-delay: .18s; }
@media (prefers-reduced-motion: reduce) { .pp-anima .pp-pagina .card, .pp-anima .pp-topo, .pp-anima .pp-boas-vindas { animation: none; } }
button.pp-foto { border: 0; padding: 0; cursor: zoom-in; width: 100%; }
.pp-zoom { width: min(960px, calc(100% - 24px)); padding: var(--esp-3); display: none; gap: var(--esp-2); justify-items: center; }
.pp-zoom[open] { display: grid; }
.pp-zoom img { width: 100%; max-height: 78vh; object-fit: contain; border-radius: var(--raio-md); background: var(--superficie-2); }
.pp-zoom p:empty { display: none; }
/* "Como funciona" (regras curtas antes do pedido) */
.pp-como { margin: 0 0 var(--esp-4); padding: var(--esp-4) var(--esp-5); }
.pp-como ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: var(--tam-sm); color: var(--texto-apoio); }
/* Confirmação do pedido: simples e direta */
/* a janela não tem espaçamento próprio (quem tem é o formulário): a confirmação traz o dela */
.pp-confirmado { display: grid; gap: var(--esp-4); text-align: center; justify-items: center;
  padding: var(--esp-8) var(--esp-6) var(--esp-5); max-height: 88vh; overflow-y: auto; }
.pp-confirmado > * { width: 100%; }
.pp-confirmado > .pp-confirmado-ic { width: 64px !important; height: 64px; margin-bottom: var(--esp-1); }
.pp-confirmado-ic svg.ic { width: 28px; height: 28px; }
.pp-confirmado h3 { margin: 0; }
.pp-confirmado > p { margin: 0; line-height: 1.5; }
.pp-resumo { margin: 0; color: var(--texto-apoio); }
.pp-confirmado .pp-btn-grande { margin-top: var(--esp-2); }
.pp-confirmado > .btn-texto { width: auto; justify-self: center; min-height: var(--toque-min); padding: 0 var(--esp-5); }
@media (max-width: 600px) {
  /* celular: janela em tela cheia → confirmação centrada na altura, botões ao alcance do polegar */
  .pp-confirmado { height: 100dvh; max-height: 100dvh; align-content: center;
    padding: calc(var(--esp-6) + env(safe-area-inset-top)) var(--esp-5) calc(var(--esp-6) + env(safe-area-inset-bottom)); }
}
.pp-destaque { display: flex; gap: var(--esp-3); align-items: flex-start; text-align: left; padding: var(--esp-4); border-radius: var(--raio-md);
  background: var(--sel-laranja-fundo); color: var(--sel-laranja-texto); border: 1px solid color-mix(in oklch, var(--sel-laranja-texto) 25%, transparent); }
.pp-destaque svg.ic { width: 24px; height: 24px; flex: none; margin-top: 1px; }
.pp-destaque > div > strong { font: 600 var(--tam-md)/1.35 var(--fonte-titulo); display: block; }
.pp-destaque p strong { white-space: nowrap; }
.pp-destaque p { margin: 4px 0 0; font-size: var(--tam-sm); }
.pp-btn-grande { min-height: 54px; font-size: var(--tam-md); }
.pp-info p { display: flex; gap: 8px; align-items: center; overflow-wrap: anywhere; }
.pp-info svg.ic { width: 18px; height: 18px; flex: none; color: var(--cor-marca-texto); }
.pp-aviso-item { margin: 0; padding: 6px 10px; border-radius: var(--raio-sm); background: var(--sel-laranja-fundo); color: var(--sel-laranja-texto); font-size: var(--tam-sm); }
/* dados da empresa: logo e horário */
.logo-empresa { width: 80px; height: 48px; padding: 3px; border: 1px solid var(--linha); border-radius: var(--raio-md); object-fit: contain; background: var(--superficie); flex: none; }
.logo-edicao { display: flex; align-items: center; gap: var(--esp-4); flex-wrap: wrap; }
.logo-previa { width: 176px; max-width: 100%; height: 96px; border-radius: var(--raio-lg); background: var(--cor-50); color: var(--cor-marca-texto); display: grid; place-items: center;
  font: 600 28px/1 var(--fonte-titulo); overflow: hidden; flex: none; }
.logo-previa img { width: 100%; height: 100%; object-fit: contain; padding: 6px; background: #fff; }
.horario-grade { display: grid; gap: 8px; }
.horario-dia { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: center; }
.horario-dia strong { font: 500 var(--tam-sm)/1.2 var(--fonte-titulo); }
.horario-dia input:disabled { opacity: .35; }
@media (max-width: 600px) { .horario-dia { grid-template-columns: minmax(0, 1fr) auto; } .horario-dia input[type=time] { grid-column: span 1; } }
.campo-cor { width: 56px; height: 44px; min-height: 44px; padding: 4px; border-radius: var(--raio-md); flex: none; }
/* categorias (estoque): nome · ativa · ordem */
.cat-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; }
.cat-linha:has(> select) { grid-template-columns: minmax(0, 1fr) auto minmax(0, 220px) auto; }
@media (max-width: 600px) { .cat-linha, .cat-linha:has(> select) { grid-template-columns: minmax(0, 1fr) auto; } .cat-linha > input, .cat-linha > select { grid-column: 1 / -1; } }
/* tabela de serviços da assistência: nome · preço · garantia · ativo */
.serv-linha { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.serv-linha:has(> select) { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto auto minmax(0, 1.4fr); }
@media (max-width: 600px) { .serv-linha, .serv-linha:has(> select) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-bottom: var(--esp-3); border-bottom: 1px solid var(--linha); } .serv-linha > input:first-child { grid-column: 1 / -1; } }
.avatar-cliente { flex: none; border-radius: 50%; display: block; }
.avatar.avatar-iniciais { flex: none; background: var(--cor-100); color: var(--cor-marca-texto); }
.avatar.avatar-foto { overflow: hidden; padding: 0; background: var(--cor-100); }
.avatar.avatar-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.conta-topo { display: flex; align-items: center; gap: var(--esp-4); flex-wrap: wrap; }
.avatar-link { display: inline-flex; border-radius: 50%; text-decoration: none; flex: none; }
.lateral-topo .avatar.avatar-iniciais, .avatar.avatar-topo.avatar-iniciais { background: #fff; color: var(--cor-botao); }
/* campo de foto dos cadastros (prévia 4:3 + botões) */
.campo-foto { display: flex; align-items: center; gap: var(--esp-4); flex-wrap: wrap; }
.campo-foto-previa { width: 120px; aspect-ratio: 4 / 3; border-radius: var(--raio-md); background: var(--cor-50); color: var(--cor-marca-texto); display: grid; place-items: center; overflow: hidden; flex: none; }
.campo-foto-previa img { width: 100%; height: 100%; object-fit: cover; }
.campo-foto-previa svg.ic { width: 32px; height: 32px; }
.campo-foto.redonda .campo-foto-previa { width: 96px; aspect-ratio: 1; border-radius: 50%; }
.resumo-quebra .item strong { white-space: normal; }
.fiscal-produto { border: 1px solid var(--linha); border-radius: var(--raio-md); padding: var(--esp-3); }
.fiscal-produto summary { cursor: pointer; font: 500 var(--tam-sm)/1.3 var(--fonte-titulo); color: var(--texto-apoio); }
.fiscal-produto[open] { display: grid; gap: var(--esp-3); }
/* histórico de alterações */
.hist-item { align-items: flex-start; }
.hist-item .texto strong { white-space: normal; }
.hist-mudancas { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: var(--tam-sm); color: var(--texto); overflow-wrap: anywhere; }
.hist-mudancas span { color: var(--texto-apoio); }
.hist-mudancas s { color: var(--texto-apoio); }
/* opções do item (recheio, massa, sabores…) */
.op-sabores { border: 1px solid var(--linha); border-radius: var(--raio-md); padding: var(--esp-3); margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; min-width: 0; }
.op-sabores legend { padding: 0 6px; font-size: var(--tam-sm); font-weight: 600; }
.op-sabores label { font-size: var(--tam-sm); }
/* editor de regras do produto/categoria */
.rg-campo { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; align-items: end; padding: var(--esp-3); border-radius: var(--raio-md); border: 1px solid var(--linha); background: var(--superficie); }
.rg-linha-opcao { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) auto auto auto; gap: 8px; align-items: center; }
@media (max-width: 600px) {
  .rg-linha-opcao { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; padding-bottom: var(--esp-3); border-bottom: 1px solid var(--linha); }
  .rg-linha-opcao > input { grid-column: 1 / -1; }
}
.pp-item-pedido { display: grid; gap: var(--esp-2); padding: 10px 0 var(--esp-3); border-bottom: 1px solid var(--linha); }
.pp-item-topo { display: flex; justify-content: space-between; align-items: start; gap: var(--esp-3); }
.pp-item-topo > strong:first-child { flex: 1 1 auto; min-width: 0; }
.pp-item-topo .linha-botoes { flex: none; align-items: center; gap: 4px; }
.pp-item-topo .num { white-space: nowrap; }
/* nada da página pode passar da largura da tela: filhos de grade podem encolher */
.pp-pagina > *, .pp-pagina .card > *, .pp-etapa > * { min-width: 0; max-width: 100%; }
.pp-pagina .card { overflow: hidden; }
.pp-etapa { display: grid; gap: var(--esp-2); min-width: 0; }
.pp-dias { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 2px 2px 8px; margin: 0 -2px; -webkit-overflow-scrolling: touch; }
.pp-dias .btn { flex: none; scroll-snap-align: start; min-width: 92px; justify-content: center; text-transform: capitalize; }
.pp-dias .btn:disabled { opacity: .38; cursor: not-allowed; box-shadow: none; }
.pp-dias .btn[aria-pressed="true"], .pp-horas .btn[aria-pressed="true"] { background: var(--cor-botao); color: #fff; border-color: var(--cor-botao); }
.pp-horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.pp-horas .btn { justify-content: center; }
@media (max-width: 600px) {
  .pp-pagina { padding: var(--esp-4) var(--esp-4) 96px; }
  .pp-marca h1 { font-size: var(--tam-lg); }
  .pp-pagina .pdv-produtos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Aviso de vencimento (só gerentes) ---------- */
.faixa-aviso { margin: var(--esp-3) var(--esp-4) 0; padding: 10px var(--esp-4); border-radius: var(--raio-pilula); background: color-mix(in oklch, #F59E0B 14%, var(--superficie)); color: var(--texto); font-size: var(--tam-sm); display: flex; gap: var(--esp-2); align-items: center; }
.faixa-aviso.atrasado { background: color-mix(in oklch, #DC2626 12%, var(--superficie)); }

/* ---------- CRM (funil) ---------- */
.funil { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: var(--esp-3); overflow-x: auto; padding-bottom: var(--esp-2); }
.funil-coluna { display: grid; gap: var(--esp-2); align-content: start; background: var(--superficie-2); border-radius: var(--raio-md); padding: var(--esp-3); min-height: 160px; }
.funil-coluna h3 { margin: 0; font: 600 var(--tam-sm)/1.3 var(--fonte-titulo); display: flex; justify-content: space-between; }
.funil-card { display: grid; gap: 2px; text-align: left; border: 0; cursor: pointer; font: inherit; color: var(--texto); padding: var(--esp-3); }
.funil-card:hover { box-shadow: var(--sombra-2); }
@media (max-width: 1023px) {
  .pdv { grid-template-columns: 1fr; }
  .pdv-carrinho { position: static; }
}

/* ---------- Cartões ---------- */
.card { background: var(--superficie); border-radius: var(--raio-lg); padding: var(--esp-6); box-shadow: var(--sombra-1); }
.card-titulo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-3); margin-bottom: var(--esp-4); }
/* abas no título do cartão nunca encolhem escondendo opções: se não couberem ao lado do texto, descem para a linha de baixo */
.card-titulo > .segmentado { flex: none; }
.card-titulo > div:first-child:has(> p) { flex: 1 1 260px; min-width: 0; }
.card-titulo h3 { font-size: var(--tam-lg); }
/* título + um botão ("Ver", "Ver todas"): o botão fica na mesma linha do título, à direita (não cai para baixo no celular) */
.card-titulo:has(> h3 + .btn:last-child) { flex-wrap: nowrap; align-items: baseline; }
.card-titulo:has(> h3 + .btn:last-child) > h3 { flex: 1 1 auto; min-width: 0; }
.card-titulo:has(> h3 + .btn:last-child) > .btn { flex: none; }

/* ---------- Telas cheias ---------- */
.tela-cheia { min-height: 100vh; display: grid; place-items: center; padding: var(--esp-6) var(--esp-4); }
.spinner { width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--cor-200); border-top-color: var(--cor-primaria); animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

/* ---------- Login (identidade BLU fixa) ---------- */
.login-fundo {
  background:
    radial-gradient(60% 50% at 15% 20%, #5FB2FF 0%, transparent 60%),
    radial-gradient(50% 45% at 85% 15%, #0A7CFF 0%, transparent 65%),
    radial-gradient(55% 60% at 75% 90%, #63D1FF 0%, transparent 60%),
    radial-gradient(60% 60% at 20% 95%, #0052CC 0%, transparent 60%),
    linear-gradient(135deg, #0A5BD6, #0A7CFF 55%, #49A8FF);
}
.login-cartao {
  width: 100%; max-width: 420px; background: #FFFFFF; color: #1B2B44; border-radius: var(--raio-xl);
  padding: var(--esp-10) var(--esp-8); display: grid; gap: var(--esp-5);
  box-shadow: 0 30px 80px rgba(5, 40, 100, .28);
  --texto: #1B2B44; --texto-apoio: #415D80; --superficie: #FFFFFF; --superficie-2: #F4F8FD; --linha: #E2EAF4;
  --cor-botao: #0A7CFF; --cor-botao-texto: #FFFFFF; --cor-primaria: #0A7CFF; --cor-100: #E3F0FF; --cor-marca-texto: #0A6FE6;
  --sombra-cor: 0 10px 28px rgba(10, 124, 255, .3); color-scheme: light;
}
.login-cartao h1 { font-size: var(--tam-xl); }
.login-cartao .btn-primario { width: 100%; min-height: 52px; }
.logo-bluhub { display: flex; align-items: center; gap: var(--esp-3); font: 600 22px/1 var(--fonte-titulo); color: #1B2B44; letter-spacing: -.2px; }
.logo-bluhub .marca { width: 36px; height: 36px; border-radius: 50%; flex: none; background: var(--blu-azul); }
.logo-bluhub small { display: block; font: 400 var(--tam-xs)/1.4 var(--fonte-texto); color: #415D80; letter-spacing: 0; margin-top: 2px; }
.login-rodape { text-align: center; color: #415D80; font-size: var(--tam-xs); }
.lista-empresas { display: grid; gap: var(--esp-3); }
.empresa-opcao { display: flex; align-items: center; gap: var(--esp-3); padding: var(--esp-3); border: 1.5px solid var(--linha); border-radius: var(--raio-md); background: #fff; color: #1B2B44; font: inherit; cursor: pointer; text-align: left; }
.empresa-opcao:hover { border-color: #0A7CFF; background: #F4F8FD; }

/* ---------- Estrutura do sistema ---------- */
.app { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: var(--esp-5); padding: var(--esp-4); min-height: 100vh; }
.lateral {
  position: sticky; top: var(--esp-4); height: calc(100vh - 2 * var(--esp-4));
  background: var(--superficie); border-radius: var(--raio-xl); box-shadow: var(--sombra-1);
  display: flex; flex-direction: column; padding: var(--esp-3); overflow: hidden;
}
.lateral-topo {
  display: flex; align-items: center; gap: var(--esp-3); padding: 10px 10px 10px 10px;
  background: var(--cor-botao); color: var(--cor-botao-texto); border-radius: var(--raio-pilula); box-shadow: var(--sombra-cor);
}
.empresa-logo { width: 40px; height: 40px; border-radius: 50%; background: color-mix(in oklch, var(--cor-botao-texto) 20%, transparent); display: grid; place-items: center; font: 600 15px/1 var(--fonte-titulo); overflow: hidden; flex-shrink: 0; }
.empresa-logo img { width: 100%; height: 100%; object-fit: contain; }
/* logo enviada: área retangular de cantos arredondados, com fundo branco (logos horizontais cabem inteiras) */
.empresa-logo.com-imagem { width: 56px; height: 40px; border-radius: var(--raio-md); background: #fff; padding: 3px; }
.empresa-nome { flex: 1; min-width: 0; font: 600 var(--tam-md)/1.2 var(--fonte-titulo); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.empresa-nome.longo { font-size: 12px; line-height: 1.25; }
.lateral-topo { border-radius: var(--raio-lg); }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 600 13px/1 var(--fonte-titulo); background: var(--superficie); color: var(--cor-marca-texto); flex-shrink: 0; }
.lateral-topo .avatar { background: #fff; color: var(--cor-botao); }
.menu { flex: 1; overflow-y: auto; display: grid; align-content: start; gap: 2px; padding: var(--esp-4) var(--esp-1); }
.menu-grupo { font: 500 11px/1 var(--fonte-titulo); text-transform: uppercase; letter-spacing: .09em; color: var(--texto-suave); padding: var(--esp-4) var(--esp-3) var(--esp-2); }
.menu a {
  position: relative; display: flex; align-items: center; gap: var(--esp-3); padding: 11px var(--esp-3); border-radius: var(--raio-md);
  color: var(--texto-apoio); text-decoration: none; font: 500 var(--tam-md)/1.2 var(--fonte-titulo);
  transition: background var(--transicao), color var(--transicao);
}
.menu a > span:not(.em-breve) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu a:hover { background: var(--superficie-2); color: var(--texto); }
.menu a.ativo { background: var(--item-ativo); color: var(--cor-marca-texto); }
.menu a.ativo::after { content: ""; position: absolute; right: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--cor-primaria); }
.menu a.disponivel { color: var(--texto-suave); }
.menu a.disponivel .ic { opacity: .55; }
.menu a.disponivel.ativo { background: var(--superficie-2); color: var(--texto-apoio); }
.menu a.disponivel.ativo::after { background: var(--texto-suave); }
.vitrine { max-width: 640px; display: grid; gap: var(--esp-4); }
.vitrine-topo { display: flex; gap: var(--esp-4); align-items: center; }
.vitrine-topo .ic-circulo { width: 56px; height: 56px; flex: none; background: var(--superficie-2); color: var(--texto-apoio); }
.vitrine-topo h3 { margin: 0; }
.vitrine ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.vitrine .acoes { display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: center; }
.menu .em-breve { margin-left: auto; font: 500 10px/1 var(--fonte-texto); padding: 3px 7px; border-radius: var(--raio-pilula); background: var(--sel-cinza-fundo); color: var(--sel-cinza-texto); }
.lateral-rodape { display: grid; gap: var(--esp-3); padding: var(--esp-2) var(--esp-1) var(--esp-1); }
.status-card { display: grid; gap: 6px; padding: var(--esp-4); border-radius: var(--raio-md); background: var(--superficie-2); }
.status-card .ic-circulo { width: 34px; height: 34px; }
.status-card strong { display: block; font: 500 var(--tam-lg)/1.25 var(--fonte-titulo); }
.status-card span { font-size: var(--tam-xs); color: var(--texto-apoio); }
/* Painel de indicadores do Início (gráficos em SVG próprio) */
.indicadores { display: grid; gap: var(--esp-4); min-width: 0; }
.ind-topo { flex-wrap: wrap; gap: var(--esp-2); }
.ind-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-4); min-width: 0; }
@media (min-width: 768px) { .ind-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ind-largo { grid-column: 1 / -1; } }
@media (min-width: 1280px) { .ind-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ind-largo { grid-column: span 2; } }
.ind-card { display: grid; gap: var(--esp-3); align-content: start; min-width: 0; }
.ind-card .card-titulo h3 { margin: 0; }
.ind-svg { width: 100%; height: auto; display: block; overflow: visible; }
.ind-rolar { overflow-x: auto; scrollbar-width: thin; }
.ind-eixo { font: 400 10px/1 var(--fonte-texto); fill: var(--texto-suave); }
.ind-valor { font: 600 10px/1 var(--fonte-titulo); fill: var(--texto-apoio); }
.ind-total { font: 600 18px/1 var(--fonte-titulo); fill: var(--texto); }
.ind-legenda { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; font-size: 12px; color: var(--texto-suave); align-items: center; }
.ind-legenda i, .ind-lista i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: middle; }
.ind-legenda i.claro { background: var(--cor-botao); opacity: .35; }
.ind-rosca { display: grid; grid-template-columns: minmax(110px, 140px) minmax(0, 1fr); gap: var(--esp-3); align-items: center; }
.ind-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.ind-lista li { display: flex; align-items: center; gap: 4px; }
.ind-lista strong { margin-left: auto; }
.ind-pessoas { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ind-pessoas li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.ind-pessoa { display: grid; gap: 4px; min-width: 0; }
.ind-pessoa strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ind-trilho { height: 8px; border-radius: var(--raio-pilula); background: var(--superficie-2); overflow: hidden; }
.ind-barra-h { display: block; height: 100%; width: var(--p); border-radius: inherit; background: var(--cor-botao); }
.ind-calor { border-collapse: separate; border-spacing: 3px; font-size: 11px; color: var(--texto-suave); }
.ind-calor th { font-weight: 500; padding: 0 2px; }
.ind-calor td { width: 22px; height: 22px; border-radius: 5px; background: color-mix(in srgb, var(--cor-botao) calc(var(--a) * 100%), var(--superficie-2)); cursor: pointer; }
.ind-balanco { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-3); }
.ind-balanco > div { display: grid; gap: 4px; align-content: start; }
.ind-balanco strong { font: 600 18px/1.2 var(--fonte-titulo); }
@media (max-width: 600px) { .ind-balanco { grid-template-columns: 1fr; } }
.ind-proximos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.ind-proximos li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ind-vazio { margin: 0; padding: var(--esp-4) 0; text-align: center; }
.ind-dica { margin: 0; padding: 8px 10px; border-radius: var(--raio-md); background: var(--superficie-2); font-size: 13px; }
.ind-alvo { cursor: pointer; }
.ind-barra { transform-box: fill-box; transform-origin: bottom; }
.ind-barra-h, .ind-arco, .ind-linha { transition: none; }
@media (prefers-reduced-motion: no-preference) {
  .ind-grade:not(.ind-pronto) .ind-barra { transform: scaleY(0); }
  .ind-barra { transition: transform var(--dur-media, .45s) var(--curva-saida, ease-out); }
  .ind-grade:not(.ind-pronto) .ind-barra-h { width: 0; }
  .ind-barra-h { transition: width var(--dur-media, .45s) var(--curva-saida, ease-out); }
  .ind-grade:not(.ind-pronto) .ind-arco { opacity: 0; }
  .ind-arco { transition: opacity var(--dur-media, .45s) ease; }
}
.lateral-rodape { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.suporte-atalhos { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.suporte-atalhos .btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px; border-radius: var(--raio-pilula);
  font-size: var(--tam-xs); color: var(--texto-apoio); white-space: normal; text-align: left; }
.suporte-atalhos .btn svg.ic { width: 16px; height: 16px; flex: none; }
.suporte-atalhos .btn:hover { background: var(--superficie-2); color: var(--texto); }
.opcoes-escolha { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.opcoes-escolha legend { margin-bottom: 4px; font: 600 14px/1 var(--fonte-titulo); }
.opcoes-escolha label { display: flex; align-items: center; gap: 10px; min-height: var(--toque-min, 44px); padding: 8px 12px; border: 1px solid var(--linha); border-radius: var(--raio-md); cursor: pointer; }
.opcoes-escolha label:has(input:checked) { border-color: var(--cor-botao); background: var(--superficie-2); }
.chamado > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; cursor: pointer; min-height: var(--toque-min, 44px); }
.chamado-msg { margin: 8px 0; padding: 10px 12px; border-radius: var(--raio-md); background: var(--superficie-2); }
.chamado-msg.da-blu { border-left: 3px solid var(--cor-botao); }
.chamado-msg p { margin: 4px 0 0; white-space: pre-line; }
@media (pointer: coarse) { .suporte-atalhos .btn { min-height: var(--toque-min, 44px); } }
.menu .menu-selo { margin-left: auto; }
.rodape-acoes { display: flex; justify-content: space-between; align-items: center; gap: var(--esp-2); padding: var(--esp-2) var(--esp-2) 0; border-top: 1px solid var(--linha); }
.rodape-botoes { display: flex; align-items: center; gap: 4px; flex: none; }
.rodape-botoes .btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px; border-radius: var(--raio-pilula); font-size: var(--tam-xs); color: var(--texto-apoio); }
.rodape-botoes .btn svg.ic { width: 16px; height: 16px; }
.rodape-botoes .btn:hover { background: var(--superficie-2); color: var(--texto); }
.rodape-botoes .btn-sair { width: 36px; padding: 0; justify-content: center; }
.rodape-botoes .btn-sair:hover { background: var(--sel-vermelho-fundo); color: var(--sel-vermelho-texto); }
.assinatura { font: 500 11px/1 var(--fonte-titulo); color: var(--texto-suave); letter-spacing: .02em; white-space: nowrap; }
.assinatura b { color: var(--blu-azul); font-weight: 600; }

.principal { min-width: 0; display: flex; flex-direction: column; gap: var(--esp-5); padding: var(--esp-2) var(--esp-2) var(--esp-8); }
.topo { display: flex; align-items: center; gap: var(--esp-3); }
.topo h2 { font-size: var(--tam-xl); flex: 1; }
.topo .data { color: var(--texto-apoio); font-size: var(--tam-sm); }
.topo-mobile { display: none; }
/* busca geral (Ctrl+K) e "+" rápido no topo */
.busca-acoes { display: flex; gap: var(--esp-2); align-items: center; flex: none; }
.topo-mobile .busca-acoes { margin-left: auto; gap: var(--esp-1); }
.topo-mobile .busca-btn { background: transparent; color: inherit; box-shadow: none; }
.topo .busca-mais { background: var(--cor-botao); color: var(--cor-botao-texto); }
/* Início: o topo some (a saudação faz o papel), ficam só os botões no canto, sem ocupar linha */
.topo.so-acoes { position: relative; height: 0; margin-bottom: calc(-1 * var(--esp-5)); z-index: 3; }
.topo.so-acoes h2, .topo.so-acoes .data { display: none; }
.topo.so-acoes .busca-acoes { position: absolute; right: 0; top: var(--esp-2); }
.busca-campo { width: 100%; min-height: var(--toque-min); font-size: max(16px, var(--tam-md)); border-radius: var(--raio-pilula); }
.busca-res { display: grid; gap: var(--esp-4); margin-top: var(--esp-3); min-height: 120px; }
.busca-grupo h4 { margin: 0 0 var(--esp-2); font: var(--peso-titulo) var(--tam-xs)/1.2 var(--fonte-titulo); color: var(--texto-apoio); text-transform: uppercase; letter-spacing: .04em; }
.busca-item { text-decoration: none; color: inherit; min-height: var(--toque-min); }
.busca-novo { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--esp-2); }
.busca-novo-item { display: flex; flex-direction: column; align-items: center; gap: var(--esp-2); min-height: 96px; padding: var(--esp-3); border: 1px solid var(--linha);
  border-radius: var(--raio-lg); background: var(--superficie); color: var(--texto); font: var(--peso-titulo) var(--tam-sm)/1.2 var(--fonte-titulo); cursor: pointer; justify-content: center; }
.busca-novo-item:hover, .busca-novo-item:focus-visible { border-color: var(--cor-300); background: var(--cor-50); }
.conteudo { display: grid; gap: var(--esp-5); align-content: start; max-width: 1240px; width: 100%; }
.conteudo > * { min-width: 0; max-width: 100%; }
.conteudo:focus { outline: none; }

/* ---------- Início ---------- */
.saudacao h1 { font-size: 34px; font-weight: 600; letter-spacing: -.5px; }
.saudacao p { color: var(--texto-apoio); margin-top: 6px; }
.inicio-grade { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--esp-5); align-items: start; }
.inicio-col { display: grid; gap: var(--esp-5); min-width: 0; }
.destaques { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-4); }
/* Degradê vertical de UM tom só (a cor da empresa): mais intenso em cima, mais claro embaixo,
   sem textura e sem girar o matiz. A luz é limitada para o texto branco continuar legível em qualquer cor. */
.destaque {
  /* s = 0 para cor escura/média (texto branco) e 1 para cor clara, ex. amarelo (texto escuro, cor viva) */
  --d-topo: var(--cor-700); --d-base: var(--cor-primaria); --d-filete: rgba(255, 255, 255, .28); --d-texto: #fff;
  --d-topo: oklch(from var(--cor-primaria)
    calc(clamp(0, (l - 0.72) * 1000, 1) * (l - 0.07) + (1 - clamp(0, (l - 0.72) * 1000, 1)) * clamp(0.4, calc(l - 0.06), 0.52)) clamp(0.06, c, 0.22) h);
  --d-base: oklch(from var(--cor-primaria)
    calc(clamp(0, (l - 0.72) * 1000, 1) * min(0.95, l + 0.05) + (1 - clamp(0, (l - 0.72) * 1000, 1)) * clamp(0.5, calc(l + 0.06), 0.62)) clamp(0.05, calc(c * 0.8), 0.18) h);
  --d-filete: oklch(from var(--cor-primaria) clamp(0.72, calc(l + 0.25), 0.92) clamp(0.04, calc(c * 0.6), 0.12) h / 0.55);
  --d-texto: oklch(from var(--cor-primaria) clamp(0.2, calc((0.72 - l) * 1000), 1) clamp(0, calc((l - 0.72) * 1000 * 0.04), 0.04) h);
  position: relative; overflow: hidden; isolation: isolate; border-radius: var(--raio-lg); padding: var(--esp-5) var(--esp-5) var(--esp-6);
  color: var(--d-texto); min-height: 150px; display: grid; align-content: space-between; gap: var(--esp-4);
  background: linear-gradient(180deg, var(--d-topo) 0%, var(--d-base) 100%);
  box-shadow: inset 0 0 0 1px var(--d-filete), inset 0 1px 0 rgba(255, 255, 255, .22), var(--sombra-cor);
}
.destaques:has(> :nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* destaque que filtra a lista (ex.: OS): é um botão; o selecionado ganha um contorno */
button.destaque { border: 0; font: inherit; text-align: left; cursor: pointer; width: 100%; }
.destaque-filtro.ativo { outline: 3px solid var(--cor-botao); outline-offset: 3px; }
.destaque-filtro:focus-visible { outline: 3px solid var(--cor-300); outline-offset: 3px; }
/* cor da empresa neutra (preto/cinza): "seda" em grafite, sem inventar matiz (tema.js marca data-cor-neutra) */
:root[data-cor-neutra] .destaque {
  --d-topo: oklch(0.3 0.008 260); --d-base: oklch(0.46 0.01 260); --d-filete: oklch(0.7 0.01 260 / 0.45);
}
.destaque .ic-circulo { position: absolute; top: var(--esp-4); right: var(--esp-4); background: rgba(255, 255, 255, .22); color: inherit; backdrop-filter: blur(4px); }
.destaque .rotulo { font: 500 var(--tam-sm)/1.3 var(--fonte-titulo); opacity: .92; padding-right: 48px; text-shadow: 0 1px 2px rgba(0,0,0,.12); }
.destaque .valor { font: var(--peso-numero) 40px/1 var(--fonte-titulo); letter-spacing: -.5px; text-shadow: 0 1px 2px rgba(0,0,0,.12); }
.destaque .variacao { justify-self: start; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--raio-pilula); background: rgba(255, 255, 255, .92); color: #1B2B44; font: 600 var(--tam-xs)/1.3 var(--fonte-texto); position: relative; z-index: 1; }
.destaque .variacao.alta svg { color: #17803F; } .destaque .variacao.queda svg { color: #C62A36; }
.destaque .variacao svg.ic { width: 14px; height: 14px; stroke-width: 2.2; }

/* Resumo do dia: mesmo estilo dos outros cartões (a borda em degradê ficava grossa e escura com cor de empresa preta) */
.resumo { position: relative; border-radius: var(--raio-lg); background: var(--superficie); box-shadow: var(--sombra-1); }
.resumo-dentro { border-radius: var(--raio-lg); padding: var(--esp-5); display: flex; gap: var(--esp-4); align-items: center; }
.resumo-dentro .ic-circulo { width: 52px; height: 52px; background: var(--gradiente); color: #fff; }
.resumo-dentro .ic-circulo svg.ic { width: 24px; height: 24px; }
.resumo-dentro .texto { flex: 1; min-width: 0; }
.resumo-dentro h3 { font-size: var(--tam-lg); margin-bottom: 4px; }

.itens { display: grid; gap: var(--esp-3); }
.itens > * { min-width: 0; }
.item { display: flex; align-items: center; gap: var(--esp-3); padding: var(--esp-3) var(--esp-4); border-radius: var(--raio-md); background: var(--superficie-2); }
.item .texto { flex: 1; min-width: 0; }
.item strong { display: block; font: 500 var(--tam-md)/1.3 var(--fonte-titulo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .meta { display: flex; gap: var(--esp-2); align-items: center; flex-wrap: wrap; margin-top: 3px; }
/* Ficha da OS (detalheOS em os.js): etapas, cartões, defeito, checklist, valores, "Mais ações" */
.selo-grande { padding: 6px 14px; font-size: var(--tam-sm); }
.os-ficha-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-2); flex-wrap: wrap; }
.os-etapas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.os-etapas li { position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; min-width: 0; }
.os-etapas li::before { content: ''; position: absolute; top: 14px; right: 50%; width: 100%; height: 3px; background: var(--linha); z-index: 0; }
.os-etapas li:first-child::before { display: none; }
.os-etapas li.feita::before, .os-etapas li.atual::before { background: var(--cor-marca-texto); }
.os-etapa-ponto { position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 600 var(--tam-xs)/1 var(--fonte-titulo);
  background: var(--superficie-2); color: var(--texto-apoio); border: 2px solid var(--linha); }
.os-etapa-ponto svg.ic { width: 16px; height: 16px; }
.os-etapas .feita .os-etapa-ponto { background: var(--cor-marca-texto); border-color: var(--cor-marca-texto); color: var(--superficie); }
.os-etapas .atual .os-etapa-ponto { background: var(--cor-100); border-color: var(--cor-marca-texto); color: var(--cor-marca-texto); box-shadow: 0 0 0 4px color-mix(in oklch, var(--cor-marca-texto) 15%, transparent); }
.os-etapas .recusada .os-etapa-ponto { background: var(--sel-vermelho-fundo); border-color: var(--sel-vermelho-texto); color: var(--sel-vermelho-texto); box-shadow: none; }
.os-etapa-nome { font-size: var(--tam-xs); color: var(--texto-apoio); line-height: 1.2; overflow-wrap: anywhere; }
.os-etapas .atual .os-etapa-nome { color: var(--texto); font-weight: 600; }
.os-etapas.encerrada { opacity: .5; }
.os-sec { display: grid; gap: var(--esp-4); min-width: 0; }
.os-sec[hidden] { display: none; }
.os-cartoes { display: grid; gap: var(--esp-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.os-cartao { display: grid; gap: 4px; align-content: start; padding: var(--esp-3) var(--esp-4); border-radius: var(--raio-md); background: var(--superficie-2); min-width: 0; overflow-wrap: anywhere; }
.os-cartao h4 { margin: 0 0 4px; display: flex; align-items: center; gap: 6px; font-size: var(--tam-sm); color: var(--texto-apoio); font-weight: 600; }
.os-cartao h4 svg.ic { width: 16px; height: 16px; color: var(--cor-marca-texto); }
.os-cartao a { display: inline-flex; align-items: center; gap: 6px; min-height: var(--toque-min); }
.os-cartao a svg.ic { width: 16px; height: 16px; }
.os-cartao .btn { justify-self: start; padding-left: 0; }
.os-defeito { margin: 0; padding: var(--esp-3) var(--esp-4); border-left: 4px solid var(--cor-marca-texto); border-radius: 0 var(--raio-md) var(--raio-md) 0;
  background: var(--cor-100); font: 500 var(--tam-md)/1.45 var(--fonte-texto); display: grid; gap: 4px; overflow-wrap: anywhere; }
.os-defeito .suave { font-size: var(--tam-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.os-checklist { border-radius: var(--raio-md); background: var(--superficie-2); padding: 0 var(--esp-4); }
.os-checklist summary { min-height: var(--toque-min); display: flex; align-items: center; justify-content: space-between; gap: var(--esp-2); cursor: pointer; flex-wrap: wrap; }
.os-checklist .etiquetas { padding-bottom: var(--esp-3); }
.etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }
.os-bloco { display: grid; gap: var(--esp-2); }
.os-sec .card-titulo h3 { font-size: var(--tam-md); }
.os-valores { display: grid; gap: 2px; padding: var(--esp-3) var(--esp-4); border-radius: var(--raio-md); border: 1px solid var(--linha); }
.os-valor { display: flex; justify-content: space-between; gap: var(--esp-3); padding: 4px 0; font-size: var(--tam-sm); }
.os-valor.neg .num { color: var(--texto-apoio); }
.os-valor.total { border-top: 1px solid var(--linha); margin-top: 4px; padding-top: 8px; font: 600 var(--tam-md)/1.3 var(--fonte-titulo); }
.os-valor.falta { font: 700 var(--tam-lg)/1.3 var(--fonte-titulo); color: var(--sel-laranja-texto); }
.os-valor.quitado { color: var(--sel-verde-texto); font-weight: 600; }
.menu-acoes { position: relative; margin-right: auto; }
.menu-acoes > summary { list-style: none; cursor: pointer; }
.menu-acoes > summary::-webkit-details-marker { display: none; }
.menu-acoes-lista { position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 5; min-width: 260px; max-width: calc(100vw - 32px); display: grid; gap: 2px; padding: var(--esp-2);
  border-radius: var(--raio-md); background: var(--superficie); box-shadow: var(--sombra-2); border: 1px solid var(--linha); }
.menu-acoes-lista button { min-height: var(--toque-min); padding: 0 var(--esp-3); border: 0; border-radius: var(--raio-sm); background: transparent; color: var(--texto); font: inherit; text-align: left; cursor: pointer;
  display: flex; align-items: center; gap: 8px; }
.menu-acoes-lista button svg.ic { width: 16px; height: 16px; }
.menu-acoes-lista button:hover, .menu-acoes-lista button:focus-visible { background: var(--superficie-2); }
.menu-acoes-lista button.perigo { color: var(--sel-vermelho-texto); }
@media (max-width: 600px) {
  .os-etapas li:not(.atual) .os-etapa-nome { display: none; }   /* celular: só o nome da etapa atual */
  .os-etapas .atual .os-etapa-nome { white-space: nowrap; }
  .modal-acoes .so-largo { display: none; }
  .modal-acoes .menu-acoes { flex: 0 0 auto; }
  .modal-acoes .menu-acoes > summary { padding: 0 var(--esp-4); }
  .modal-acoes > a.btn-contorno { flex: 0 0 auto; padding: 0 var(--esp-3); }
  .modal-acoes > .btn-primario { flex: 1 1 auto; }
  .os-sec, .os-ficha-topo, .os-etapas { min-width: 0; }
}
.so-celular { display: none; }
@media (max-width: 600px) { .so-celular { display: inline; } }
/* abas dentro de janelas: rolam de lado no celular em vez de alargar a janela */
.modal .segmentado { max-width: 100%; overflow-x: auto; scrollbar-width: none; min-height: max-content; flex-shrink: 0; }
.modal .segmentado button { flex: none; }
/* Cashback de indicação (cashback.js): oferta no caixa e bloco na ficha do cliente */
.cb-oferta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3); padding: var(--esp-3) var(--esp-4); border-radius: var(--raio-md);
  background: var(--sel-verde-fundo); color: var(--sel-verde-texto); }
.cb-oferta .texto { flex: 1 1 180px; display: grid; min-width: 0; }
.cb-oferta .texto .suave { color: inherit; opacity: .85; }
.cb-oferta .linha-botoes { flex: 1 1 100%; }
/* Presente de aniversário (presente.js): mesma caixa, em laranja; linhas extras do comprovante (comprovante.js) */
.cb-oferta.presente { background: var(--sel-laranja-fundo); color: var(--sel-laranja-texto); }
.cb-oferta + .cb-oferta { margin-top: calc(-1 * var(--esp-2)); }
.linhas-extra { display: grid; gap: 2px; margin: 0; }
.linhas-extra .presente { color: var(--sel-laranja-texto); font-weight: 600; }
.linhas-extra .cashback { color: var(--sel-verde-texto); }
.cb-ficha { display: grid; gap: var(--esp-3); }
.cb-saldo { display: grid; gap: 2px; padding: var(--esp-4); border-radius: var(--raio-md); background: var(--sel-verde-fundo); color: var(--sel-verde-texto); }
.cb-saldo strong { font: 700 var(--tam-2xl)/1.1 var(--fonte-titulo); }
.cb-saldo .suave { color: inherit; opacity: .85; }
.cb-saldo.zerado { background: var(--superficie-2); color: var(--texto-apoio); }
.cb-det { border-radius: var(--raio-md); background: var(--superficie-2); padding: 0 var(--esp-4); }
.cb-det summary { min-height: var(--toque-min); display: flex; align-items: center; font-weight: 600; cursor: pointer; }
.cb-det .itens { padding-bottom: var(--esp-3); }
.cb-det .item { background: var(--superficie); }
.cb-verde { color: var(--sel-verde-texto); } .cb-vermelho { color: var(--sel-vermelho-texto); } .cb-laranja { color: var(--sel-laranja-texto); }
/* Configurações → "Seu plano" (compacto) */
.plano .etiquetas .selo { padding: 5px 12px; font-size: var(--tam-sm); }
.plano .etiquetas .selo svg.ic { width: 15px; height: 15px; }
.plano-mais { margin: var(--esp-3) 0 0; font-size: var(--tam-sm); color: var(--texto-apoio); line-height: 1.9; }
.plano-mais a { color: var(--cor-marca-texto); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.plano-mais a:hover { text-decoration: underline; }
.plano-mais svg.ic { width: 15px; height: 15px; }
/* Escolher cliente (componente único: campoClienteHTML/ligarCampoCliente em contexto.js) */
.cli-campo { display: grid; gap: var(--esp-2); min-width: 0; }
.cli-rotulo { font-size: var(--tam-sm); font-weight: 500; color: var(--texto-apoio); }
.cli-escolhido { display: flex; align-items: center; gap: var(--esp-3); padding: var(--esp-2) var(--esp-3); border-radius: var(--raio-md); background: var(--superficie-2); min-width: 0; }
.cli-escolhido[hidden], .cli-buscar[hidden], .cli-novo[hidden] { display: none; }
.cli-escolhido .texto { flex: 1; min-width: 0; display: grid; }
.cli-escolhido strong { overflow-wrap: anywhere; line-height: 1.3; }
.cli-escolhido .ic-circulo { width: 36px; height: 36px; }
.cli-buscar { display: grid; gap: var(--esp-1); min-width: 0; }
.cli-resultados { display: grid; gap: 2px; max-height: 280px; overflow-y: auto; }
.cli-resultados:empty { display: none; }
.cli-opcao { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-2); width: 100%; min-height: var(--toque-min); padding: var(--esp-2) var(--esp-3);
  border: 0; border-radius: var(--raio-sm); background: var(--superficie-2); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.cli-opcao strong { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cli-opcao .suave { flex: none; font-size: var(--tam-sm); }
.cli-opcao:hover, .cli-opcao:focus-visible { background: var(--cor-100); }
.cli-criar { justify-content: flex-start; color: var(--cor-marca-texto); font-weight: 600; }
.cli-criar svg.ic { width: 18px; height: 18px; }
.cli-nada { margin: var(--esp-1) var(--esp-1) 0; font-size: var(--tam-sm); }
.cli-novo { display: grid; gap: var(--esp-3); padding: var(--esp-3) var(--esp-4); border-radius: var(--raio-md); border: 1px dashed color-mix(in oklch, var(--cor-marca-texto) 40%, transparent); }
/* Blocos: cartões retangulares em grade (como os cartões do catálogo/página pública) — ícone em cima, título e texto;
   <a class="bloco"> = o cartão inteiro é clicável. 2 por linha no celular, 3–4 no computador. */
.blocos { display: grid; gap: var(--esp-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
.bloco { position: relative; display: flex; flex-direction: column; gap: var(--esp-2); min-width: 0; min-height: 132px; padding: var(--esp-4);
  border-radius: var(--raio-lg); background: var(--superficie-2); border: 1px solid transparent; color: inherit; text-decoration: none;
  transition: border-color var(--dur-rapida), transform var(--dur-rapida), box-shadow var(--dur-rapida); }
.bloco .ic-circulo { width: 44px; height: 44px; }
.bloco strong { font: 600 var(--tam-md)/1.3 var(--fonte-titulo); overflow-wrap: anywhere; }
.bloco .suave { font-size: var(--tam-sm); line-height: 1.4; overflow-wrap: anywhere; }
.bloco .bloco-pe { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--esp-2); font-size: var(--tam-sm); font-weight: 600; color: var(--cor-marca-texto); }
.bloco .bloco-pe svg.ic { width: 16px; height: 16px; }
.bloco > .selo { margin-top: auto; align-self: flex-start; }
.bloco .logo-empresa { max-width: 96px; max-height: 44px; align-self: flex-start; border-radius: var(--raio-sm); padding: 4px; }
a.bloco:hover { border-color: color-mix(in oklch, var(--cor-marca-texto) 35%, transparent); box-shadow: var(--sombra-1); transform: translateY(-2px); }
a.bloco:focus-visible { outline: 2px solid var(--cor-marca-texto); outline-offset: 2px; }
@media (max-width: 600px) {
  .blocos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-2); }
  .bloco { min-height: 120px; padding: var(--esp-3); }
  .bloco .ic-circulo { width: 38px; height: 38px; }
  .bloco strong { font-size: var(--tam-sm); }
  .bloco .suave { font-size: var(--tam-xs); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) { a.bloco:hover { transform: none; } }
/* configuração da página pública em abas */
.pp-cfg-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2); }
.pp-cfg-topo .segmentado { max-width: 100%; overflow-x: auto; }
.pp-cfg-sec { display: grid; gap: var(--esp-3); min-width: 0; }
.pp-cfg-sec[hidden] { display: none; }
.pp-cfg-lista { display: grid; gap: 2px; padding: var(--esp-2) var(--esp-3); border-radius: var(--raio-md); background: var(--superficie-2); }
.pp-cfg-lista .check { padding: 8px 0; border-bottom: 1px solid var(--linha); }
.pp-cfg-lista .check:last-child { border-bottom: 0; }
.pp-cfg-lista .check[hidden] { display: none; }
.pp-cfg-prof { display: grid; gap: var(--esp-2); padding: var(--esp-3); border: 1px solid var(--linha); border-radius: var(--raio-md); min-width: 0; }
.pp-cfg-prof summary { cursor: pointer; min-height: var(--toque-min); display: flex; align-items: center; font-weight: 600; }
.pp-cfg-prof details[open] > summary { margin-bottom: var(--esp-2); }
.pp-cfg-prof .pp-cfg-lista { max-height: 320px; overflow-y: auto; }
/* lançamento estornado: riscado e apagado (fica fora dos totais) */
.item.estornado { opacity: .62; }
.item.estornado > strong.num, .item.estornado .texto > .suave { text-decoration: line-through; }

.checklist { display: grid; gap: var(--esp-2); }
.check-linha { display: flex; align-items: center; gap: var(--esp-3); padding: var(--esp-3); border-radius: var(--raio-pilula); background: var(--superficie-2); }
.check-linha .texto { flex: 1; min-width: 0; font: 500 var(--tam-sm)/1.3 var(--fonte-titulo); }
.check-linha.feito .texto { color: var(--texto-suave); text-decoration: line-through; }
.check-linha .ic-circulo { width: 36px; height: 36px; }
.progresso { height: 8px; border-radius: var(--raio-pilula); background: var(--trilho); overflow: hidden; margin: var(--esp-2) 0 var(--esp-4); }
.progresso span { display: block; height: 100%; border-radius: inherit; background: var(--gradiente); }

/* Gráfico de barras */
.barras { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--esp-3); height: 180px; align-items: end; min-width: 0; }
.inicio-col > *, .barra { min-width: 0; }
.barra .rot, .barra .val { max-width: 100%; overflow: hidden; text-overflow: clip; white-space: nowrap; }
/* muitas barras (ex.: 30 dias) num celular: o gráfico rola de lado em vez de alargar a página */
@media (max-width: 600px) { .barras:has(> .barra:nth-child(13)) { grid-auto-columns: 22px; gap: 6px; overflow-x: auto; scrollbar-width: thin; } }
.barra { display: grid; grid-template-rows: auto 1fr auto; gap: 6px; height: 100%; text-align: center; justify-items: center; }
.barra .trilho { position: relative; width: 100%; max-width: 44px; border-radius: 14px; background: color-mix(in oklch, var(--trilho) 45%, transparent); overflow: hidden; }
.barra.zero .trilho { background: color-mix(in oklch, var(--trilho) 22%, transparent); }
.barra .trilho span { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 14px; background: linear-gradient(180deg, var(--grad-c), var(--cor-primaria)); }
/* período sem valor: só um traço mínimo e claro (não parece "um pouco de faturamento") */
.barra.zero .trilho span { height: 4px !important; opacity: .5; }
.barra.zero .val { color: var(--texto-suave); }
.barra .rot { font-size: var(--tam-xs); color: var(--texto-apoio); }
.barra .val { font: 500 var(--tam-xs)/1 var(--fonte-titulo); color: var(--texto); }

/* ---------- Tabelas ---------- */
.tabela-caixa { background: var(--superficie); border-radius: var(--raio-lg); box-shadow: var(--sombra-1); padding: var(--esp-2) var(--esp-3); overflow-x: auto; }
.tabela { width: 100%; border-collapse: separate; border-spacing: 0 6px; }
.tabela th { text-align: left; font: 500 var(--tam-xs)/1 var(--fonte-titulo); text-transform: uppercase; letter-spacing: .07em; color: var(--texto-suave); padding: var(--esp-3) var(--esp-4) var(--esp-1); }
.tabela td { padding: var(--esp-3) var(--esp-4); background: var(--superficie-2); vertical-align: middle; }
.tabela td:first-child { border-radius: var(--raio-md) 0 0 var(--raio-md); }
.tabela td:last-child { border-radius: 0 var(--raio-md) var(--raio-md) 0; }
.tabela tr.inativo td { opacity: .6; }
.tabela .n { text-align: right; font-family: var(--fonte-titulo); font-variant-numeric: tabular-nums; }
.tabela .acoes { text-align: right; white-space: nowrap; }
.var-alta { color: var(--alta); font-weight: 600; } .var-queda { color: var(--queda); font-weight: 600; }
.pessoa { display: flex; align-items: center; gap: var(--esp-3); min-width: 0; }
.pessoa .avatar { background: var(--cor-100); }
.pessoa strong { font: 500 var(--tam-md)/1.3 var(--fonte-titulo); }

.barra-ferramentas { display: flex; flex-wrap: wrap; gap: var(--esp-3); align-items: center; }
.barra-ferramentas .campo-busca { flex: 1; min-width: 220px; }
.vazio { text-align: center; color: var(--texto-apoio); padding: var(--esp-10) var(--esp-4); display: grid; gap: var(--esp-3); justify-items: center; }

/* ---------- Modal e aviso ---------- */
.modal { border: 0; padding: 0; border-radius: var(--raio-xl); width: min(580px, calc(100% - 32px)); background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-2); }
.modal::backdrop { background: rgba(11, 27, 51, .45); backdrop-filter: blur(3px); }
.modal form { display: grid; gap: var(--esp-4); padding: var(--esp-6); max-height: 88vh; overflow-y: auto; }
.modal h3 { font-size: var(--tam-xl); }
.grade-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--esp-3); align-items: start; }
/* campos nunca alargam o formulário (select com opção de texto longo esticava a tela no celular) */
label, .grade-2 > *, #form-modal > *, .enc-item > * { min-width: 0; }
select { min-width: 0; max-width: 100%; }
.modal-acoes { display: flex; justify-content: flex-end; gap: var(--esp-2); flex-wrap: wrap; padding-top: var(--esp-2); }
/* Pix com QR (abre por cima do recebimento) */
#modal-pix { width: min(440px, calc(100% - 32px)); }
#modal-pix > div { display: grid; gap: var(--esp-3); padding: var(--esp-6); max-height: 88vh; overflow-y: auto; }
.pix-valor { font: 600 28px/1.1 var(--fonte-titulo); text-align: center; }
.pix-qr { width: min(240px, 100%); margin: 0 auto; background: #fff; border-radius: var(--raio-md); padding: 8px; }
.pix-qr svg { width: 100%; height: auto; display: block; }
.pix-codigo { font: 500 12px/1.4 ui-monospace, monospace; word-break: break-all; resize: none; }
.aviso-comprovante { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--raio-md); background: var(--sel-laranja-fundo);
  color: var(--sel-laranja-texto); font-weight: 700; line-height: 1.35; }
.aviso-comprovante svg.ic { flex: none; width: 20px; height: 20px; }
/* dica abaixo de cada forma de pagamento (Pix, taxa do cartão) */
.pag-dica { grid-column: 1 / -1; font-size: var(--tam-sm); display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.pag-dica:empty { display: none; }
.aviso { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: #1B2B44; color: #fff; padding: 12px 20px; border-radius: var(--raio-pilula); box-shadow: var(--sombra-2); z-index: 60; font: 500 var(--tam-sm)/1.3 var(--fonte-titulo); max-width: calc(100% - 32px); }
.aviso.erro-aviso { background: var(--sel-vermelho-texto); }
/* o aviso vira popover (camada de cima, acima das janelas): desfaz o posicionamento padrão do navegador */
.aviso[popover] { inset: auto auto 28px 50%; margin: 0; border: 0; overflow: visible; color: #fff; width: max-content; }
.aviso { display: flex; align-items: center; gap: var(--esp-3); }
.aviso[hidden] { display: none; }
.aviso-acao { flex: none; border: 0; border-radius: var(--raio-pilula); background: rgba(255, 255, 255, .18); color: #fff; padding: 6px 14px;
  min-height: 32px; font: 600 var(--tam-sm)/1 var(--fonte-titulo); cursor: pointer; }
.aviso-acao:hover { background: rgba(255, 255, 255, .28); }
@media (pointer: coarse) { .aviso-acao { min-height: var(--toque-min); } }

/* ---------- Navegação inferior (celular) ---------- */
.nav-inferior { display: none; }
.fundo-menu { display: none; }

@media (max-width: 1100px) {
  .inicio-grade { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); padding: var(--esp-3) var(--esp-4) 110px; gap: var(--esp-4); }
  .resumo-dentro { flex-wrap: wrap; }
  .resumo-dentro .texto { flex-basis: calc(100% - 70px); }
  .item { flex-wrap: wrap; }
  /* o título não espreme: se o selo/valor não cabem ao lado, descem para a linha de baixo */
  .item > .texto { flex: 1 1 auto; width: max-content; }
  .item > .texto:not(:first-child) { max-width: calc(100% - var(--item-icone-reserva)); }
  .item > .texto:has(+ .btn:last-child) { flex-basis: 0; width: auto; } /* só um botão depois: ele fica ao lado */
  .item:has(> .texto) { justify-content: flex-end; }
  .item .btn { margin-left: auto; }
  .card-titulo { flex-wrap: wrap; }
  .barras { gap: 6px; }
  .lateral { position: fixed; z-index: 40; left: var(--esp-3); top: var(--esp-3); bottom: var(--esp-3); height: auto; width: min(300px, calc(100% - 24px)); transform: translateX(-115%); transition: transform .25s ease; box-shadow: var(--sombra-2); }
  .app.menu-aberto .lateral { transform: none; }
  .app.menu-aberto .fundo-menu { display: block; position: fixed; inset: 0; z-index: 30; background: rgba(11, 27, 51, .4); }
  .principal { padding: 0; }
  .topo { display: none; }
  .topo-mobile { display: flex; align-items: center; gap: var(--esp-3); background: var(--cor-botao); color: var(--cor-botao-texto); border-radius: var(--raio-pilula); padding: 8px 8px 8px 8px; box-shadow: var(--sombra-cor); }
  .topo-mobile .empresa-nome { font-size: var(--tam-md); }
  .topo-mobile .empresa-nome.longo { font-size: 12px; line-height: 1.25; }
  .topo-mobile { border-radius: var(--raio-lg); }
  .saudacao h1 { font-size: 26px; }
  .destaques { grid-template-columns: 1fr; }
  .destaque { min-height: 128px; }
  .grade-2 { grid-template-columns: minmax(0, 1fr); }
  .card { padding: var(--esp-5); }
  .nav-inferior {
    display: flex; position: fixed; z-index: 35; left: 50%; transform: translateX(-50%); bottom: max(14px, env(safe-area-inset-bottom));
    width: min(440px, calc(100% - 24px)); padding: 6px; gap: 4px; border-radius: var(--raio-pilula);
    background: var(--superficie); box-shadow: var(--sombra-2);
  }
  .nav-inferior a, .nav-inferior button {
    flex: 1; display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border-radius: var(--raio-pilula); border: 0; background: none;
    color: var(--texto-apoio); text-decoration: none; font: 500 11px/1.1 var(--fonte-titulo); cursor: pointer;
  }
  .nav-inferior .ativo { background: var(--item-ativo); color: var(--cor-marca-texto); }
  /* Tabela vira cartões */
  .tabela thead { display: none; }
  .tabela, .tabela tbody, .tabela tr, .tabela td { display: block; width: 100%; }
  .tabela tr { background: var(--superficie-2); border-radius: var(--raio-md); margin-bottom: var(--esp-2); padding: var(--esp-2) 0; }
  .tabela td { background: none; padding: 6px var(--esp-4); border-radius: 0 !important; }
  .tabela td[data-rotulo]::before { content: attr(data-rotulo); display: block; font-size: var(--tam-xs); color: var(--texto-suave); }
  .tabela .acoes, .tabela .n { text-align: left; }
  .tabela-caixa { padding: var(--esp-2); }
}

/* =====================================================================
   CELULAR PRIMEIRO (16/10): toque, janelas em tela cheia, ação ao alcance do polegar
   ===================================================================== */
.modal-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); }
.modal-topo h3 { min-width: 0; overflow-wrap: anywhere; }
.modal-x { flex: none; box-shadow: none; background: var(--superficie-2); }
/* aparelhos de toque: nenhum alvo menor que 44px */
@media (pointer: coarse) {
  .btn, .btn-pequeno, .btn-texto { min-height: var(--toque-min); }
  .btn-redondo { width: var(--toque-min); height: var(--toque-min); min-height: var(--toque-min); }
  .linha-botoes, .acoes, .modal-acoes { gap: var(--esp-2); }
  input[type="radio"], input[type="checkbox"] { width: 24px; height: 24px; min-height: 24px; }
  label.check { min-height: var(--toque-min); }
  .segmentado button { min-height: var(--toque-min); }
  .tabela td a:not(.btn), .itens .item a:not(.btn) { display: inline-flex; align-items: center; min-height: var(--toque-min); }
}
@media (max-width: 600px) {
  /* campos com 16px: o iPhone não dá zoom ao tocar */
  input, select, textarea { font-size: var(--tam-campo-celular); }
  /* janela = tela cheia; título com o X no topo e Salvar/Cancelar fixos embaixo */
  /* !important: algumas janelas recebem largura do código (abrirModal({largura})) que só vale no computador */
  .modal, #modal-pix { width: 100% !important; max-width: 100% !important; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  .modal form, #modal-pix > div { max-height: 100dvh; height: 100dvh; padding: calc(var(--esp-4) + env(safe-area-inset-top)) var(--esp-4) 0; align-content: start;
    scroll-padding-bottom: calc(var(--altura-barra-acao) + var(--esp-4)); }
  .modal-topo { position: sticky; top: calc(-1 * (var(--esp-4) + env(safe-area-inset-top))); z-index: 2; background: var(--superficie);
    margin: calc(-1 * (var(--esp-4) + env(safe-area-inset-top))) calc(-1 * var(--esp-4)) 0; padding: calc(var(--esp-3) + env(safe-area-inset-top)) var(--esp-4) var(--esp-3);
    border-bottom: 1px solid var(--linha); }
  .modal h3 { font-size: var(--tam-lg); }
  .modal-acoes { position: sticky; bottom: 0; z-index: 2; margin: 0 calc(-1 * var(--esp-4)); padding: var(--esp-3) var(--esp-4) calc(var(--esp-3) + env(safe-area-inset-bottom));
    background: var(--superficie); border-top: 1px solid var(--linha); flex-wrap: nowrap; }
  .modal-acoes .btn { flex: 1 1 0; min-width: 0; padding: 0 var(--esp-3); }
  .modal-acoes .btn-perigo { flex: 0 1 auto; margin-right: 0 !important; }
  /* aviso acima da barra inferior */
  .aviso, .aviso[popover] { bottom: calc(96px + env(safe-area-inset-bottom)); }
}
/* Pergunta curta (confirmar / motivo): janela pequena por cima de outra; no celular, folha presa embaixo */
.modal.dialogo-pergunta { width: min(440px, calc(100% - 32px)); }
.pergunta-texto { margin: 0; color: var(--texto-apoio); line-height: 1.45; white-space: pre-line; }
@media (max-width: 600px) {
  .modal.dialogo-pergunta { height: fit-content !important; max-height: 90dvh; margin: auto 0 0; border-radius: var(--raio-xl) var(--raio-xl) 0 0; }
  .modal.dialogo-pergunta form { height: auto; max-height: 90dvh; padding-top: var(--esp-5); }
  .modal.dialogo-pergunta .modal-topo { position: static; margin: 0; padding: 0; border: 0; }
}
/* tour do primeiro acesso: cartão embaixo (alcance do polegar) no celular, centralizado no computador */
.tour { border: 0; padding: 0; background: transparent; max-width: 100%; width: min(460px, calc(100% - 24px)); margin: auto auto max(16px, env(safe-area-inset-bottom)); }
.tour::backdrop { background: rgba(11, 27, 51, .45); }
.tour[open] { animation: mov-modal var(--dur-padrao) var(--curva-entrada); }
.tour-cartao { display: grid; gap: var(--esp-3); background: var(--superficie); color: var(--texto); border-radius: var(--raio-xl); padding: var(--esp-5); box-shadow: var(--sombra-2); }
.tour-texto strong { font: 600 var(--tam-lg)/1.25 var(--fonte-titulo); }
.tour-texto p { margin: 6px 0 0; color: var(--texto-apoio); }
.tour-pontos { display: flex; gap: 6px; }
.tour-pontos span { width: 8px; height: 8px; border-radius: 50%; background: var(--trilho); }
.tour-pontos span.ativo { background: var(--cor-primaria); width: 20px; border-radius: var(--raio-pilula); }
.tour-acoes { display: flex; justify-content: space-between; align-items: center; gap: var(--esp-2); }
@media (min-width: 861px) { .tour { margin: auto; } }
/* módulos no celular: os cartões de resumo viram uma faixa compacta que rola de lado (a lista/ação aparece logo);
   no Início continuam grandes (desenho aprovado); no PDV somem no celular (vender primeiro) */
@media (max-width: 600px) {
  #conteudo:not(.rota-inicio) .destaques { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--esp-3);
    max-width: 100%; min-width: 0; padding: 2px 0 6px; scrollbar-width: none; overscroll-behavior-x: contain; }
  #conteudo:not(.rota-inicio) .destaques > .destaque { flex: 0 0 min(78%, 300px); min-height: 0; padding: var(--esp-4); scroll-snap-align: start; }
  #conteudo:not(.rota-inicio) .destaque .valor { font-size: var(--tam-xl); }
  #conteudo:not(.rota-inicio) .destaque .ic-circulo { width: 32px; height: 32px; }
}
@media (max-width: 860px) { .destaques.esconder-celular { display: none; } }
/* barra de ação fixa no rodapé (PDV, nova comanda, nova OS…) */
.barra-acao-fixa { display: none; }
@media (max-width: 860px) {
  .barra-acao-fixa { display: flex; gap: var(--esp-2); align-items: center; position: fixed; z-index: 36; left: var(--esp-3); right: var(--esp-3);
    bottom: calc(84px + env(safe-area-inset-bottom)); padding: var(--esp-2) var(--esp-2) var(--esp-2) var(--esp-4); border-radius: var(--raio-pilula);
    background: var(--superficie); box-shadow: var(--sombra-2); }
  .barra-acao-fixa .total { flex: 1; min-width: 0; font: 600 var(--tam-lg)/1.1 var(--fonte-titulo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .barra-acao-fixa .btn { flex: none; }
  .tem-barra-acao { padding-bottom: 90px; }
}
.barra-acao-fixa.vazia { display: none !important; }
/* paisagem no celular: nada de tela cheia "espremida" */
@media (max-height: 480px) and (orientation: landscape) {
  .nav-inferior { bottom: 6px; padding: 4px; }
  .barra-acao-fixa { bottom: 70px; }
}

/* Janela do agendamento (toque numa marcação da agenda) */
.ag-janela-cli { display: flex; align-items: center; gap: var(--esp-3); margin-bottom: var(--esp-3); }
.ag-janela-cli .texto { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ag-janela-cli .texto strong { font-family: var(--fonte-titulo, inherit); font-size: 1.1rem; overflow-wrap: anywhere; }
.ag-janela-dados { border-top: 1px solid var(--linha); padding-top: var(--esp-3); }
.ag-janela-dados p { margin: 0 0 var(--esp-1); overflow-wrap: anywhere; }
.ag-hora-cor { color: var(--cor-marca-texto); }
.ag-whats { width: 100%; justify-content: center; margin-top: var(--esp-3); min-height: var(--toque-min);
  background: var(--sel-verde-fundo); color: var(--sel-verde-texto); border-color: transparent; }
.ag-janela-rotulo { font-weight: 600; margin: var(--esp-4) 0 var(--esp-2); }
.ag-status-grade { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-2); }
.ag-status { min-height: var(--toque-min); border-radius: var(--raio-md); border: 1px solid var(--linha); background: var(--superficie);
  color: var(--texto); font: inherit; font-weight: 500; cursor: pointer; transition: background var(--dur-rapida, .15s), color var(--dur-rapida, .15s); }
.ag-status:hover { border-color: var(--cor-300); }
.ag-status.ativo { background: var(--cor-botao); color: var(--cor-botao-texto); border-color: transparent; }
.ag-rodape { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-2); margin-top: var(--esp-4); }
.ag-acao { min-height: var(--toque-min); border-color: transparent; justify-content: center; font-weight: 600; }
.ag-acao-verde { background: var(--sel-verde-fundo); color: var(--sel-verde-texto); }
.ag-acao-laranja { background: var(--sel-laranja-fundo); color: var(--sel-laranja-texto); }
.ag-acao-vermelho { background: var(--sel-vermelho-fundo); color: var(--sel-vermelho-texto); }
.ag-acao-cor { background: var(--cor-100); color: var(--cor-marca-texto); }

/* Prévia da mensagem de WhatsApp (balão verde) — mensagens.js */
.wa-previa { display: grid; gap: 6px; padding: 12px; border-radius: var(--raio-md); background: var(--wa-fundo); }
.wa-previa-rotulo { font: 600 var(--tam-xs)/1.2 var(--fonte-titulo); color: var(--wa-hora); }
.wa-balao { position: relative; justify-self: end; max-width: min(100%, 420px); padding: 8px 10px 20px; border-radius: 10px 2px 10px 10px;
  background: var(--wa-balao); color: var(--wa-texto); font: 400 14.5px/1.4 var(--fonte-texto); overflow-wrap: anywhere; box-shadow: 0 1px 0.5px rgb(0 0 0 / 0.13); }
.wa-balao strong { font-weight: 700; }
.wa-hora { position: absolute; right: 8px; bottom: 4px; font-size: 11px; color: var(--wa-hora); }
.wa-vazio { color: var(--wa-hora); font-style: italic; }

/* Recorte de foto de perfil e logo (recorte.js) */
.recorte-modal { width: min(440px, calc(100% - 32px)); }
.recorte { display: grid; gap: var(--esp-3); padding: var(--esp-5); }
.recorte-cab h3 { margin: 0; }
.recorte-dica { margin: 0; }
.recorte-formatos { justify-self: start; }
.recorte-palco { position: relative; width: 100%; aspect-ratio: 1; border-radius: var(--raio-md); overflow: hidden; touch-action: none;
  background: repeating-conic-gradient(var(--superficie-2) 0 25%, var(--superficie) 0 50%) 0 0 / 20px 20px; }
.recorte-palco canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.recorte-palco canvas:active { cursor: grabbing; }
.recorte-mascara { position: absolute; inset: 0; pointer-events: none; border-radius: var(--raio-md); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85); }
.recorte-mascara.redonda { inset: 0; border-radius: 50%; box-shadow: 0 0 0 9999px rgba(15, 23, 42, .55), inset 0 0 0 2px rgba(255, 255, 255, .85); }
.recorte-zoom { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--esp-3); font: 600 var(--tam-lg)/1 var(--fonte-titulo); color: var(--texto-apoio); }
.recorte-zoom input { width: 100%; accent-color: var(--cor-botao); min-height: var(--toque-min, 44px); }
@media (max-width: 600px) { .recorte-modal { width: 100%; } }

/* Início em GRUPOS (Hoje · Financeiro · Movimento · Clientes): só o grupo escolhido na tela.
   No computador o painel ocupa o que sobra da tela (--ini-altura, calculado em app.js) e cada cartão rola por dentro. */
.ini-barra { display: flex; align-items: center; gap: var(--esp-3); flex-wrap: wrap; min-width: 0; }
.ini-barra .segmentado { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.ini-painel { min-width: 0; }
.ini-painel .indicadores { gap: var(--esp-3); }
.ini-painel .ind-topo { display: flex; align-items: center; justify-content: flex-end; gap: var(--esp-2); }
.ini-numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-3); }
.ini-numeros > div { display: grid; gap: 2px; }
.ini-numeros .num { font: var(--peso-numero) var(--tam-xl)/1.1 var(--fonte-titulo); }
@media (min-width: 1024px) {
  #conteudo.rota-inicio { gap: var(--esp-4); }
  .rota-inicio .saudacao h1 { font-size: 28px; }
  .rota-inicio .destaque { min-height: 112px; padding: var(--esp-4) var(--esp-5); gap: var(--esp-2); }
  .rota-inicio .destaque .valor { font-size: 32px; }
  .ini-painel { height: var(--ini-altura, auto); min-height: 0; }
  .ini-painel > .inicio-grade { height: 100%; align-items: stretch; }
  .ini-painel > .inicio-grade > .inicio-col { min-height: 0; overflow-y: auto; align-content: start; gap: var(--esp-4); scrollbar-width: thin; padding-right: 2px; }
  .ini-painel > .indicadores, .ini-painel .ini-clientes .indicadores { height: 100%; min-height: 0; grid-template-rows: auto minmax(0, 1fr); }
  .ini-painel .ind-grade { min-height: 0; height: 100%; grid-auto-rows: minmax(0, 1fr); grid-auto-flow: row dense; }
  .ini-painel .ind-card { min-height: 0; overflow: auto; grid-template-rows: auto minmax(0, 1fr); scrollbar-width: thin; }
  .ini-painel .ind-card > :last-child { min-height: 0; }
  .ini-painel .ind-svg { height: 100%; max-height: 100%; }
  .ini-painel .ind-grade[data-n="1"] { grid-template-columns: minmax(0, 1fr); }
  .ini-painel .ind-grade[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ini-painel .ini-clientes .ind-grade { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1023px) {
  .ini-painel .ind-topo { justify-content: flex-start; flex-wrap: wrap; }
}
@media (max-width: 860px) {
  /* celular: os cartões do Início viram uma faixa que rola de lado (como nos módulos) para sobrar tela para os grupos */
  #conteudo.rota-inicio .destaques { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--esp-3); scrollbar-width: none; }
  #conteudo.rota-inicio .destaques > .destaque { flex: 0 0 min(78%, 300px); min-height: 0; padding: var(--esp-4); scroll-snap-align: start; }
  #conteudo.rota-inicio .destaque .valor { font-size: var(--tam-xl); }
  .ini-numeros .num { font-size: var(--tam-lg); }
}
@media (min-width: 1024px) {
  /* lugar fixo de cada gráfico no grupo (sem buracos); o gráfico encolhe para caber no cartão */
  .ini-painel .ind-k-balanco { grid-area: balanco; } .ini-painel .ind-k-fluxo { grid-area: fluxo; } .ini-painel .ind-k-fat { grid-area: fat; }
  .ini-painel .ind-k-pessoas { grid-area: pessoas; } .ini-painel .ind-k-dias { grid-area: dias; } .ini-painel .ind-k-status { grid-area: status; } .ini-painel .ind-k-calor { grid-area: calor; }
  .ini-painel .ind-grade[data-g="financeiro"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); grid-template-rows: repeat(2, minmax(0, 1fr)); grid-template-areas: "balanco fluxo" "fat fluxo"; }
  .ini-painel .ind-grade[data-g="financeiro"]:not(:has(.ind-k-fat)) { grid-template-areas: "balanco fluxo" "balanco fluxo"; }
  .ini-painel .ind-grade[data-g="movimento"] { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-areas: "pessoas dias status" "calor calor calor"; }
  .ini-painel .ind-grade[data-g="movimento"]:not(:has(.ind-k-pessoas)) { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "dias status" "calor calor"; }
  .ini-painel .ind-grade[data-g="movimento"]:not(:has(.ind-k-calor)) { grid-template-rows: minmax(0, 1fr); grid-template-areas: "pessoas dias status"; }
  .ini-painel .ind-k-fluxo { grid-template-rows: auto minmax(0, 1fr) auto; }
  .ini-painel .ind-k-fluxo .ind-rolar { min-height: 0; height: 100%; overflow: hidden; }
  .ini-painel .ind-k-fluxo .ind-svg { min-width: 0 !important; height: 100%; }   /* o SVG vem com largura mínima para o celular */
  .ini-painel .ind-k-calor .ind-rolar { overflow: auto; }
  .ini-painel .ind-calor { width: 100%; }
  .ini-painel .ind-rosca { height: 100%; grid-template-columns: minmax(90px, 40%) minmax(0, 1fr); }
  .ini-painel .ind-rosca .ind-svg { max-height: 100%; }
}
@media (min-width: 1024px) {
  .ini-painel .ind-balanco { gap: var(--esp-4); }
  .ini-painel .ind-balanco strong { font-size: var(--tam-md); overflow-wrap: anywhere; }
  .ini-painel .ind-k-fluxo .ind-eixo { font-size: 15px; }
  .ini-painel .ind-k-fat .ind-svg, .ini-painel .ind-k-dias .ind-svg { height: 100%; }
}
.ini-barra-extra { margin-left: auto; display: flex; align-items: center; gap: var(--esp-2); min-width: 0; }
.ini-barra-extra .segmentado { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
@media (min-width: 1024px) {
  .ini-painel .ind-k-calor .ind-calor { border-spacing: 2px; }
  .ini-painel .ind-k-calor .ind-calor td { height: 12px; }
  .ini-painel .ind-k-calor .ind-calor th { font-size: 10px; line-height: 1; padding: 0 2px; }
}
@media (min-width: 1024px) { .ini-painel .indicadores:not(:has(> .ind-topo)) { grid-template-rows: minmax(0, 1fr); } }
@media (min-width: 1024px) {
  .ini-painel .ind-k-calor .ind-calor { table-layout: fixed; }
  .ini-painel .ind-k-calor .ind-calor tr > :first-child { width: 40px; text-align: right; padding-right: 6px; }
}

/* Agendar vários serviços de uma vez (agenda.js) */
.ag-mais { display: grid; gap: var(--esp-2); }
.ag-mais-linha { padding: var(--esp-3); border-radius: var(--raio-md); background: var(--superficie-2); }
.ag-mais-prof { display: flex; gap: var(--esp-1); align-items: center; }
.ag-mais-prof select { flex: 1; min-width: 0; }
#ag-sequencia { margin: 0; padding: var(--esp-3); border-radius: var(--raio-md); background: var(--cor-50, var(--superficie-2)); font-size: var(--tam-sm); line-height: 1.6; }

/* etiquetas de clientes (VIP, Pacote ativo…) e seleção em lote na lista de clientes */
.etiquetas { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.selo.etiqueta { font-size: var(--tam-xs); }
.barra-lote { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); position: sticky; top: var(--esp-2); z-index: 5; box-shadow: var(--sombra-2); }
.barra-lote select { flex: 1 1 140px; width: auto; min-width: 0; }
.col-sel { width: 48px; }
.check-sel { display: inline-grid; place-items: center; min-width: var(--toque-min); min-height: var(--toque-min); cursor: pointer; }
.check-sel input { width: 22px; height: 22px; margin: 0; }
tr.selecionado > td { background: var(--cor-50); }

/* ficha de materiais do serviço (Agenda → Editar serviço) */
.ag-mat { display: grid; gap: var(--esp-2); margin: 0; padding: var(--esp-3) 0 0; border: 0; border-top: 1px solid var(--linha); min-width: 0; }
.ag-mat legend { padding: 0 0 var(--esp-2); font: var(--peso-titulo) var(--tam-sm)/1.3 var(--fonte-titulo); color: var(--texto); }

/* botão que vira só o ícone no celular (ex.: WhatsApp nas listas de "A enviar hoje"); o rótulo fica para leitor de tela */
@media (max-width: 600px) {
  .btn-icone-celular { min-width: var(--toque-min); min-height: var(--toque-min); padding: 0; justify-content: center; flex: none; }
  .btn-icone-celular .rotulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Lavanderia (modulos/lavanderia.js): rol de peças com quantidade, checklist por peça, fotos numeradas */
.lav-rol { display: grid; gap: var(--esp-3); padding: 2px; border-radius: var(--raio-md); }
@media (min-width: 768px) { .lav-rol { max-height: min(52vh, 520px); overflow-y: auto; } }
.lav-cat { display: grid; gap: 6px; }
.lav-cat h5 { margin: 0; font: var(--peso-titulo) var(--tam-xs)/1.3 var(--fonte-titulo); color: var(--texto-apoio); text-transform: uppercase; letter-spacing: .04em; }
.lav-peca { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px var(--esp-2); padding: 6px var(--esp-2); border-radius: var(--raio-md); background: var(--superficie-2); }
.lav-peca.tem { background: var(--cor-100); }
.lav-peca-nome { display: grid; min-width: 0; }
.lav-peca-nome strong { font-size: var(--tam-sm); overflow-wrap: anywhere; }
.lav-peca-nome .suave { font-size: var(--tam-xs); }
.lav-qtd { display: flex; align-items: center; gap: 4px; }
.lav-qtd .btn-icone { width: var(--toque-min); height: var(--toque-min); font-size: 20px; line-height: 1; }
.lav-qtd input { width: 56px; text-align: center; padding-inline: 4px; }
.lav-extra { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--esp-2); align-items: end; }
.lav-extra[hidden] { display: none; }
.lav-preco { display: grid; gap: 2px; font-size: var(--tam-xs); }
.lav-preco input { width: 110px; }
.lav-medidas { grid-column: 1 / -1; display: grid; gap: 6px; }
.lav-medida { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto auto; align-items: center; gap: 6px; }
.lav-medida input { min-width: 0; text-align: center; }
.lav-medida .lav-m2 { white-space: nowrap; font-size: var(--tam-xs); }
.lav-medida .btn-icone { width: 36px; height: 36px; }
.lav-m2-total { font: var(--peso-titulo) var(--tam-sm)/1 var(--fonte-titulo); white-space: nowrap; }
.lav-avulso { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, .7fr) minmax(0, 1fr); gap: var(--esp-2); }
.lav-cab { display: flex; gap: var(--esp-3); align-items: center; padding: var(--esp-3); border-radius: var(--raio-md); background: var(--superficie-2); }
.lav-cab .texto { display: grid; gap: 2px; min-width: 0; }
.lav-num { flex: none; min-width: 56px; height: 56px; padding: 0 8px; border-radius: var(--raio-md); display: grid; place-items: center; background: var(--cor-botao); color: var(--cor-botao-texto); font: 700 var(--tam-lg)/1 var(--fonte-titulo); }
.lav-sec { display: grid; gap: var(--esp-2); padding-top: var(--esp-3); border-top: 1px solid var(--linha); }
.lav-check { display: grid; gap: 6px; }
.lav-check-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px var(--esp-2); }
.lav-check-item .texto { display: grid; min-width: 0; }
.lav-etapas { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.lav-etapa { min-height: 36px; padding: 0 10px; border-radius: var(--raio-pilula); border: 1px solid var(--linha); background: var(--superficie); color: var(--texto-apoio); font: 500 var(--tam-xs)/1 var(--fonte-texto); cursor: pointer; }
.lav-etapa.ok { background: var(--sel-verde-fundo); border-color: transparent; color: var(--sel-verde-texto); font-weight: 600; }
.lav-etapa:disabled { cursor: default; }
.lav-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--esp-2); }
.lav-foto { position: relative; margin: 0; display: grid; gap: 2px; min-width: 0; }
.lav-foto-abrir { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; border-radius: var(--raio-md); cursor: zoom-in; }
.lav-foto-abrir:focus-visible { outline: 3px solid var(--cor-botao); outline-offset: 2px; }
.lav-foto img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--raio-md); background: var(--superficie-2); display: block; }
.lav-foto-num { position: absolute; left: 6px; bottom: 6px; padding: 2px 8px; border-radius: var(--raio-pilula); background: var(--cor-botao); color: var(--cor-botao-texto); font: 700 var(--tam-xs)/1.4 var(--fonte-titulo); }
.lav-foto figcaption { font-size: 11px; overflow-wrap: anywhere; }
.lav-foto-tirar { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; font-size: 18px; }
.lav-foto-vazia { display: grid; place-items: center; gap: 6px; min-height: 120px; padding: var(--esp-3); border: 2px dashed var(--linha); border-radius: var(--raio-md); color: var(--texto-apoio); text-align: center; cursor: pointer; }
.lav-foto-vazia svg { width: 28px; height: 28px; }
@media (hover: none) { .lav-etapa { min-height: var(--toque-min); } .lav-foto-tirar { width: var(--toque-min); height: var(--toque-min); } }
@media (max-width: 560px) { .lav-check-item { grid-template-columns: 1fr; } .lav-etapas { justify-content: flex-start; } .lav-avulso { grid-template-columns: minmax(0, 1fr) 72px; } .lav-avulso label:first-child { grid-column: 1 / -1; } }

/* Visor de fotos (janela por cima de tudo, X para fechar; nunca abre nova aba) */
.visor-foto { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: rgb(0 0 0 / .92); color: #fff; overflow: hidden; }
.visor-foto::backdrop { background: rgb(0 0 0 / .6); }
.visor-topo { position: absolute; inset: 0 0 auto 0; display: flex; align-items: center; gap: var(--esp-3); padding: var(--esp-3) var(--esp-4); padding-top: max(var(--esp-3), env(safe-area-inset-top)); background: linear-gradient(rgb(0 0 0 / .7), transparent); z-index: 2; }
.visor-rotulo { font: var(--peso-titulo) var(--tam-md)/1.2 var(--fonte-titulo); white-space: nowrap; }
.visor-legenda { flex: 1; min-width: 0; font-size: var(--tam-sm); opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.visor-fechar { margin-left: auto; flex: none; width: var(--toque-min); height: var(--toque-min); background: rgb(255 255 255 / .16); color: #fff; box-shadow: none; }
.visor-palco { position: absolute; inset: 0; display: grid; place-items: center; padding: 64px var(--esp-3) var(--esp-4); }
.visor-palco img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--raio-md); user-select: none; -webkit-user-drag: none; }
.visor-seta { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: var(--toque-min); height: var(--toque-min); background: rgb(255 255 255 / .16); color: #fff; font-size: 28px; line-height: 1; box-shadow: none; }
.visor-seta.ant { left: var(--esp-3); } .visor-seta.prox { right: var(--esp-3); }
@media (prefers-reduced-motion: no-preference) { .visor-foto[open] { animation: visor-entra .18s ease-out; } }
@keyframes visor-entra { from { opacity: 0; } to { opacity: 1; } }

/* N1 · Painel BLU → Nova empresa: tipos agrupados por área, busca e prévia do que vem pronto */
.ne-escolha { display: grid; gap: var(--esp-3); min-width: 0; }
.ne-rotulo { font-family: var(--fonte-texto); font-size: var(--tam-sm); color: var(--texto-apoio); }
.ne-lista { display: grid; gap: var(--esp-4); max-height: 340px; overflow: auto; padding-right: var(--esp-1); }
.ne-area h4 { margin: 0 0 var(--esp-2); font-family: var(--fonte-titulo); font-size: var(--tam-sm); color: var(--texto-suave); text-transform: uppercase; letter-spacing: .04em; }
.ne-tipos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: var(--esp-2); }
.ne-tipo { display: flex; align-items: flex-start; gap: var(--esp-3); min-height: var(--toque-min); padding: var(--esp-3); border: 1px solid var(--linha); border-radius: var(--raio-md); background: var(--superficie); cursor: pointer; min-width: 0; }
.ne-tipo input { margin-top: 3px; flex: none; }
.ne-tipo > span { display: grid; gap: 2px; min-width: 0; }
.ne-tipo strong { font-size: var(--tam-sm); }
.ne-tipo .suave { font-size: var(--tam-xs); line-height: 1.35; }
.ne-tipo:has(input:checked) { border-color: var(--cor-botao); background: var(--cor-50); box-shadow: inset 0 0 0 1px var(--cor-botao); }
.ne-previa-caixa { padding: var(--esp-3); border-radius: var(--raio-md); background: var(--superficie); border: 1px dashed var(--linha); display: grid; gap: var(--esp-2); min-width: 0; }
.ne-previa { display: grid; grid-template-columns: max-content 1fr; gap: var(--esp-1) var(--esp-3); margin: 0; font-size: var(--tam-sm); }
.ne-previa dt { color: var(--texto-suave); }
.ne-previa dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { .ne-previa { grid-template-columns: 1fr; } .ne-previa dd { margin-bottom: var(--esp-2); } .ne-lista { max-height: none; } }

/* Quadro de diárias da equipe (modulos/diarias.js) */
.diar-barra { align-items: center; }
.diar-periodo { font-family: var(--fonte-titulo); }
.diar-esq { display: inline-flex; transform: scaleX(-1); }
.diar-ajuda { margin: 0; }
.diar-cartao { display: grid; gap: var(--esp-3); }
.diar-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); }
.diar-topo .texto { display: grid; min-width: 0; }
.diar-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--esp-2); }
.diar-dia { display: grid; justify-items: center; gap: 2px; min-height: calc(var(--toque-min) + 20px); padding: var(--esp-2) 0;
  border: 1px solid var(--linha); border-radius: var(--raio-md); background: var(--superficie); color: var(--texto); cursor: pointer;
  font: 500 var(--tam-xs)/1.2 var(--fonte-texto); transition: background var(--dur-rapida) var(--curva-saida); }
.diar-dia .diar-num { font: var(--peso-numero) var(--tam-md)/1 var(--fonte-titulo); }
.diar-dia .diar-marca { min-height: 1.2em; font: var(--peso-titulo) var(--tam-md)/1 var(--fonte-titulo); }
.diar-dia.hoje { border-color: var(--cor-primaria); }
.diar-dia.ok { background: var(--cor-primaria); border-color: var(--cor-primaria); color: var(--cor-botao-texto); }
.diar-dia.pendente { background: var(--sel-laranja-fundo); color: var(--sel-laranja-texto); border-style: dashed; border-color: var(--sel-laranja-texto); }
.diar-dia.pago { background: var(--sel-verde-fundo); color: var(--sel-verde-texto); border-color: transparent; }
.diar-dia:disabled { cursor: default; }
.diar-dia.vazio:disabled { opacity: .45; }
.diar-rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2); }
.diar-acoes { display: flex; gap: var(--esp-2); }
@media (max-width: 400px) { .diar-semana { gap: 4px; } .diar-dia .diar-nome { font-size: 10px; } }

/* Custos: controle do mês e grupo "Custos" do Início (modulos/custos.js) */
.cu-mes-barra { align-items: center; }
.cu-mes-nome { font-family: var(--fonte-titulo); }
.cu-aviso { margin: 0; }
.cu-mes-grade { display: grid; gap: var(--esp-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .cu-mes-grade { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.cu-barras { display: grid; gap: var(--esp-3); }
.cu-barra { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; align-items: center; gap: var(--esp-3); font-size: var(--tam-sm); }
.cu-barra > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cu-trilho { display: block; height: 8px; border-radius: var(--raio-pilula); background: var(--trilho); overflow: hidden; }
.cu-trilho > span { display: block; height: 100%; border-radius: inherit; background: var(--cor-botao); }
.cu-valor { display: grid; justify-items: end; gap: 4px; }
.ini-custos .ini-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cu-lavagem { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-3); }
.cu-lavagem > div { display: grid; gap: 2px; }
@media (min-width: 700px) { .cu-lavagem { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lav-custo-linha { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 0.7fr); gap: var(--esp-2); align-items: end; }
@media (max-width: 480px) { .lav-custo-linha { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .lav-custo-linha > label:first-child { grid-column: 1 / -1; } }
.lav-custo-total { display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-4); align-items: baseline; }

/* comanda: valor do item editável direto na linha (o preço varia, ex.: tipo de cabelo) */
.cmd-item-fim { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; margin-left: auto; }
.cmd-valor { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; color: var(--texto-apoio); font-weight: 600; }
.cmd-valor input { width: 7.5em; min-height: var(--toque-min, 44px); text-align: right; font: 600 var(--tam-md) var(--fonte-titulo); color: var(--texto); padding: 6px 10px; }
/* ---------- Gestão BLU (Painel BLU → tarefas e clientes da BLU) ---------- */
.gb-tarefa { align-items: center; }
.gb-concluir { flex: none; display: inline-grid; place-items: center; width: var(--toque-min); height: var(--toque-min); margin: -6px 0 -6px -6px;
  border: 0; background: none; cursor: pointer; border-radius: 50%; color: transparent; }
.gb-concluir svg.ic { width: 26px; height: 26px; padding: 3px; border-radius: 50%; border: 2px solid var(--cor-300); transition: background var(--dur-rapida), color var(--dur-rapida); }
.gb-concluir:hover svg.ic { color: var(--cor-700); background: var(--cor-50); }
.gb-concluir.feito svg.ic { background: var(--sel-verde-texto); border-color: var(--sel-verde-texto); color: #fff; }
.gb-concluir:focus-visible { outline: 3px solid var(--cor-300); outline-offset: 1px; }
.gb-feita .texto strong { color: var(--texto-suave); text-decoration: line-through; }
.gb-extras { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-1); margin-top: 2px; }
.gb-grupo { margin: var(--esp-4) 0 var(--esp-2); font: var(--peso-titulo) var(--tam-sm)/1.2 var(--fonte-titulo); color: var(--texto-apoio); }
.gb-grupo:first-child { margin-top: 0; }
.gb-atraso { color: var(--sel-vermelho-texto); font-weight: 500; }
.gb-form fieldset { border: 1px solid var(--linha); border-radius: var(--raio-md); padding: var(--esp-3); margin: var(--esp-2) 0; min-width: 0; }
.gb-form fieldset legend { padding: 0 var(--esp-1); font: 500 var(--tam-sm)/1.2 var(--fonte-titulo); color: var(--texto-apoio); }
.gb-check-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--esp-2); margin-bottom: var(--esp-2); }
.gb-check-item input[type=checkbox] { width: 22px; height: 22px; margin: 0 var(--esp-1); }
.gb-caixas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 0 var(--esp-3); }
.gb-historico { margin-top: var(--esp-3); }
.gb-historico summary { cursor: pointer; min-height: var(--toque-min); display: flex; align-items: center; font: 500 var(--tam-sm)/1.2 var(--fonte-titulo); color: var(--cor-marca-texto); }
.gb-historico p { margin: var(--esp-1) 0; font-size: var(--tam-sm); }
@media (max-width: 860px) { .gb-tarefa .avatar { display: none; } }.destaque .valor.gb-valor-dinheiro { font-size: clamp(24px, 2.2vw, 34px); overflow-wrap: anywhere; }
.gb-filtros-pauta { display: flex; flex-wrap: wrap; gap: var(--esp-3); justify-content: space-between; }
.gb-quadro { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: var(--esp-3); overflow-x: auto; padding-bottom: var(--esp-2); }
.gb-coluna { min-width: 0; background: var(--superficie-2); border-radius: var(--raio-md); padding: var(--esp-3); }
.gb-coluna .gb-grupo { margin-top: 0; }
.gb-coluna .item { background: var(--superficie); flex-wrap: wrap; }
.gb-coluna-vazia { margin: var(--esp-2) 0; font-size: var(--tam-sm); }
.gb-mover { margin-left: auto; }
.gb-conteudo { align-items: center; }
@media (max-width: 860px) { .gb-conteudo .avatar { display: none; } .gb-quadro { grid-auto-columns: minmax(78%, 1fr); } }.gb-coluna .item { flex-direction: column; align-items: stretch; gap: var(--esp-2); }
.gb-coluna .item .texto, .gb-coluna .item .texto strong { width: auto; max-width: none; white-space: normal; overflow: visible; text-overflow: clip; }
.gb-coluna .item > .selo, .gb-coluna .gb-mover { align-self: flex-start; margin-left: 0; }
.gb-cliente-pauta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); margin-top: var(--esp-3); }
.gb-cliente-pauta select { flex: 1 1 220px; }
.gb-feed { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; max-width: 520px; border-radius: var(--raio-md); overflow: hidden; }
.gb-feed-item { position: relative; aspect-ratio: 4 / 5; border: 0; padding: 0; cursor: pointer; background: var(--cor-100); color: var(--cor-800); display: grid; place-items: center; overflow: hidden; }
.gb-feed-item img { width: 100%; height: 100%; object-fit: cover; }
.gb-feed-item > span:first-child { padding: var(--esp-2); font: 500 var(--tam-xs)/1.25 var(--fonte-titulo); text-align: center; }
.gb-feed-item:focus-visible { outline: 3px solid var(--cor-300); outline-offset: -3px; }
.gb-feed-varias { position: absolute; top: 6px; right: 8px; color: #fff; font-size: 16px; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.gb-feed-data { position: absolute; left: 6px; bottom: 6px; padding: 1px 6px; border-radius: var(--raio-pilula); background: rgba(0,0,0,.55); color: #fff; font: 500 11px/1.4 var(--fonte-texto); }
.gb-feed-aprov { position: absolute; right: 6px; bottom: 6px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; }
.gb-feed-aprov.pendente { background: var(--sel-laranja-texto); } .gb-feed-aprov.aprovado { background: var(--sel-verde-texto); } .gb-feed-aprov.ajuste { background: var(--sel-vermelho-texto); }
.gb-midias { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--esp-2); margin-bottom: var(--esp-3); }
.gb-midia { position: relative; border-radius: var(--raio-sm); overflow: hidden; background: var(--superficie-2); }
.gb-midia img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.gb-midia-capa { position: absolute; top: 4px; left: 4px; padding: 1px 6px; border-radius: var(--raio-pilula); background: var(--cor-botao); color: var(--cor-botao-texto); font: 500 11px/1.4 var(--fonte-texto); }
.gb-midia-acoes { position: absolute; top: 2px; right: 2px; display: flex; gap: 2px; }
.gb-midia-acoes .btn-icone { background: rgba(255,255,255,.9); }
.gb-midia-acoes [data-gb-midia-esq] svg { transform: rotate(180deg); }
.gb-midia-add { cursor: pointer; }
.gb-midia-dica { margin: var(--esp-2) 0 0; font-size: var(--tam-xs); }
.gb-aprov-info { margin: var(--esp-3) 0 0; padding: var(--esp-3); border-radius: var(--raio-md); font-size: var(--tam-sm); }
.gb-aprov-info.selo-laranja { background: var(--sel-laranja-fundo); color: var(--sel-laranja-texto); }
.gb-aprov-info.selo-verde { background: var(--sel-verde-fundo); color: var(--sel-verde-texto); }
.gb-aprov-info.selo-vermelho { background: var(--sel-vermelho-fundo); color: var(--sel-vermelho-texto); }
.gb-link-caixa { padding: var(--esp-3); border-radius: var(--raio-md); background: var(--superficie-2); overflow-wrap: anywhere; margin: var(--esp-3) 0; }
.gb-link-acoes { display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: center; }.gb-feed-item > span:first-child { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 18px; }
#gb-abas { overflow-x: auto; max-width: 100%; }
.gb-mes-nav { display: flex; align-items: center; justify-content: center; gap: var(--esp-3); }
.gb-mes-nav strong { min-width: 180px; text-align: center; font: var(--peso-titulo) var(--tam-md)/1.2 var(--fonte-titulo); }
.gb-mes-nav [data-gb-mes="-1"] svg { transform: rotate(180deg); }
.gb-fin-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: var(--esp-3); }
.gb-fin-numeros > div { display: grid; gap: 2px; padding: var(--esp-3); border-radius: var(--raio-md); background: var(--superficie-2); min-width: 0; }
.gb-fin-numeros .suave { font-size: var(--tam-xs); }
.gb-valor { font: var(--peso-numero) var(--tam-lg)/1.2 var(--fonte-titulo); white-space: nowrap; }
.gb-valor.receita { color: var(--sel-verde-texto); } .gb-valor.despesa { color: var(--sel-vermelho-texto); }
.item .gb-valor { font-size: var(--tam-md); }
.gb-fin-gerar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2); margin-top: var(--esp-3);
  padding: var(--esp-3); border-radius: var(--raio-md); background: var(--sel-laranja-fundo); color: var(--sel-laranja-texto); font-size: var(--tam-sm); }
.gb-fin-grafico { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--esp-2); margin-top: var(--esp-4); align-items: end; }
.gb-fin-mes { display: grid; justify-items: center; gap: var(--esp-1); }
.gb-fin-mes .barras { display: flex; align-items: flex-end; gap: 3px; height: 90px; width: 100%; justify-content: center; }
.gb-fin-mes .barras span { width: min(16px, 40%); min-height: 2px; border-radius: 4px 4px 0 0; }
.gb-fin-mes .barras .receita { background: var(--sel-verde-texto); } .gb-fin-mes .barras .despesa { background: var(--sel-vermelho-texto); opacity: .75; }
.gb-fin-mes.atual .suave { color: var(--texto); font-weight: 600; }
.gb-fin-mes .suave { font-size: var(--tam-xs); text-transform: capitalize; }
.gb-fin-nota { margin: var(--esp-3) 0 0; font-size: var(--tam-xs); }

/* Gestão BLU · CRM (painel, funil com valores, visão geral) e arquivos no Drive */
.gb-crm-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); grid-auto-flow: dense; gap: var(--esp-3); }
.gb-crm-geral { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); grid-auto-flow: dense; gap: var(--esp-3); }
.gb-kpi { display: flex; flex-direction: column; gap: var(--esp-1); min-width: 0; padding: var(--esp-4); border-radius: var(--raio-md); background: var(--superficie-2); }
.gb-kpi h4 { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font: var(--peso-titulo) var(--tam-xs)/1.2 var(--fonte-titulo); text-transform: uppercase; letter-spacing: .04em; color: var(--texto-apoio); }
.gb-kpi h4 .selo { text-transform: none; letter-spacing: 0; }
.gb-kpi-num { font: 700 var(--tam-2xl)/1.1 var(--fonte-titulo); color: var(--texto); }
.gb-kpi.verde .gb-kpi-num { color: var(--sel-verde-texto); }
.gb-kpi.cor .gb-kpi-num { color: var(--cor-marca-texto); }
.gb-kpi.alerta .gb-kpi-num { color: var(--sel-vermelho-texto); }
.gb-kpi .suave { font-size: var(--tam-xs); }
@media (min-width: 700px) { .gb-crm-grade .gb-kpi-largo, .gb-crm-grade .gb-kpi-fontes { grid-column: span 2; } .gb-crm-geral .gb-kpi-largo { grid-column: span 2; } }
.gb-barras { list-style: none; margin: var(--esp-2) 0 0; padding: 0; display: grid; gap: var(--esp-2); }
.gb-barras li { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--esp-2); font-size: var(--tam-sm); }
.gb-barras li i { grid-column: 1 / -1; display: block; height: 6px; border-radius: 99px; background: var(--cor-primaria); min-width: 4px; }
.gb-aneis { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3); }
.gb-aneis svg { width: 120px; height: 120px; flex: 0 0 auto; }
.gb-rosca-num { font: 700 20px var(--fonte-titulo); fill: var(--texto); }
.gb-rosca-rot { font: 500 9px var(--fonte-texto); fill: var(--texto-apoio); }
.gb-legenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; min-width: 0; flex: 1 1 140px; font-size: var(--tam-sm); }
.gb-legenda li { display: flex; align-items: center; gap: 6px; min-width: 0; }
.gb-legenda li span { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.gb-legenda li strong { margin-left: auto; }
.gb-legenda-linha { display: flex; flex: none; flex-wrap: wrap; gap: var(--esp-3); margin-top: var(--esp-2); }
.gb-legenda-linha li strong { margin-left: 4px; }
.gb-linha { width: 100%; height: 150px; }
.gb-mini-lista { list-style: none; margin: var(--esp-2) 0 0; padding: 0; display: grid; gap: var(--esp-2); }
.gb-mini-lista li { display: flex; align-items: center; gap: var(--esp-2); min-width: 0; }
.gb-mini-lista li > div { display: grid; min-width: 0; flex: 1 1 auto; }
.gb-mini-lista li > div strong, .gb-mini-lista li > div .suave { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gb-mini-ic { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--cor-100); color: var(--cor-marca-texto); font: 600 var(--tam-xs) var(--fonte-titulo); }
.gb-col-topo { display: grid; gap: 2px; margin-bottom: var(--esp-2); }
.gb-col-topo h4 { margin: 0; font: var(--peso-titulo) var(--tam-sm)/1.2 var(--fonte-titulo); }
.gb-col-topo .suave { font-size: var(--tam-xs); }
.gb-coluna-leads { background: var(--cor-50); }
.gb-funil-total { margin: 0 0 var(--esp-3); color: var(--texto-apoio); }
.gb-funil-total strong { color: var(--texto); font: 700 var(--tam-lg) var(--fonte-titulo); }
.gb-drive-topo { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin-bottom: var(--esp-3); }

/* complementos do delivery no cadastro do produto (complementos.js) */
.cp-grupo { border: 1px solid var(--linha); border-radius: var(--raio-md); background: var(--superficie); }
.cp-grupo > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: var(--toque-min, 44px); padding: 8px 12px; cursor: pointer; }
.cp-grupo > summary .suave { font-size: var(--tam-xs); }
.cp-grupo-corpo { display: grid; gap: 10px; padding: 0 12px 12px; }

/* quadro de pedidos do delivery (Encomendas → Quadro): colunas por etapa; no celular rolam de lado */
.cz-dica { margin: 0 0 12px; }
.cz-quadro { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: var(--esp-3); overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; }
.cz-coluna { display: grid; gap: var(--esp-2); align-content: start; min-width: 0; padding: var(--esp-3); border-radius: var(--raio-lg); background: var(--superficie-2); scroll-snap-align: start; }
.cz-coluna h3 { display: flex; align-items: center; gap: 8px; font-size: var(--tam-md); }
.cz-lista { display: grid; gap: var(--esp-2); }
.cz-vazio { margin: 4px 0; font-size: var(--tam-sm); }
.cz-cartao { display: grid; gap: 6px; padding: var(--esp-3); border: 1px solid var(--linha); border-left: 4px solid var(--cor-300); border-radius: var(--raio-md); background: var(--superficie); cursor: pointer; }
.cz-cartao.atencao { border-left-color: var(--sel-laranja-texto); }
.cz-cartao.atrasado { border-left-color: var(--sel-vermelho-texto); }
.cz-cartao header { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-family: var(--fonte-titulo); }
.cz-tempo { display: inline-flex; align-items: center; gap: 4px; color: var(--texto-apoio); font-size: var(--tam-xs); }
.cz-cartao.atencao .cz-tempo { color: var(--sel-laranja-texto); }
.cz-cartao.atrasado .cz-tempo { color: var(--sel-vermelho-texto); font-weight: 600; }
.cz-tempo svg.ic, .cz-modo svg.ic { width: 14px; height: 14px; }
.cz-cliente { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.cz-modo { display: flex; align-items: center; gap: 4px; margin: 0; color: var(--texto-apoio); font-size: var(--tam-sm); }
.cz-itens { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--tam-sm); }
.cz-itens small { display: block; color: var(--texto-apoio); font-size: var(--tam-xs); }
.cz-pag { margin: 0; font-size: var(--tam-sm); color: var(--texto-apoio); }
.cz-pag strong { color: var(--texto); }
.cz-acoes { display: flex; gap: 6px; flex-wrap: wrap; }
.cz-acoes .btn-primario { flex: 1; justify-content: center; }
@media (max-width: 860px) { .cz-quadro { grid-auto-columns: 86%; margin: 0 calc(-1 * var(--esp-4)); padding: 0 var(--esp-4) 8px; } }
/* som desligado (o navegador só libera depois de um toque) e destaque visual do pedido novo — vale com ou sem som */
.cz-som { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 0 0 12px; padding: 10px 14px; border-radius: var(--raio-md); background: var(--sel-laranja-fundo); color: var(--sel-laranja-texto); font-size: var(--tam-sm); }
.cz-som span { display: inline-flex; align-items: center; gap: 6px; }
.cz-cartao.chegou { box-shadow: 0 0 0 3px var(--cor-300); animation: cz-chegou 1.2s var(--curva-saida, ease) 1; }
@keyframes cz-chegou { 0% { transform: scale(.97); box-shadow: 0 0 0 0 var(--cor-300); } 40% { transform: scale(1.02); box-shadow: 0 0 0 8px var(--cor-100); } 100% { transform: none; box-shadow: 0 0 0 3px var(--cor-300); } }
@media (prefers-reduced-motion: reduce) { .cz-cartao.chegou { animation: none; } }
/* aviso curto dentro de um formulário (ex.: limite do cupom por WhatsApp) */
.aviso-campo { margin: -4px 0 0; padding: 8px 12px; border-radius: var(--raio-md); background: var(--sel-laranja-fundo); color: var(--sel-laranja-texto); font-size: var(--tam-sm); line-height: 1.4; }

/* Minhas entregas (entregador do delivery) */
.en-dica { margin: 0 0 12px; }
.en-lista { display: grid; gap: var(--esp-3); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.en-cartao { display: grid; gap: 8px; }
.en-cartao.en-feita { opacity: .75; }
.en-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-family: var(--fonte-titulo); font-size: var(--tam-lg); }
.en-chegou { display: flex; align-items: center; gap: 6px; margin: 0; padding: 8px 12px; border-radius: var(--raio-md); background: var(--sel-verde-fundo); color: var(--sel-verde-texto); font-size: var(--tam-sm); }
.en-cliente { margin: 0; font-weight: 600; font-size: var(--tam-md); }
.en-endereco { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: var(--tam-md); line-height: 1.4; }
.en-endereco svg.ic { flex: none; margin-top: 2px; color: var(--cor-marca-texto); }
.en-itens { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--tam-sm); color: var(--texto-apoio); }
.en-itens small { display: block; font-size: var(--tam-xs); }
.en-pag { margin: 0; font-size: var(--tam-sm); color: var(--texto-apoio); }
.en-pag strong { color: var(--texto); }
.en-acoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.en-acoes .btn { justify-content: center; min-height: var(--toque-min, 44px); }
.en-espera { margin: 0; grid-column: 1 / -1; }
.en-gerencia { justify-self: start; }
.en-sub { margin: var(--esp-5) 0 var(--esp-3); font-size: var(--tam-md); color: var(--texto-apoio); }
.cz-entregador { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--tam-sm); }
.cz-entregador select { flex: 1; min-width: 0; min-height: 36px; padding: 4px 8px; font-size: var(--tam-sm); }
.cz-chegou { color: var(--sel-verde-texto); font-weight: 600; }

/* N4 Planos e mensalidades (0125): ações da linha do assinante */
.pl-acoes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 640px) {
  .pl-item { flex-wrap: wrap; }
  .pl-item .pl-acoes { flex-basis: 100%; justify-content: flex-start; }
}