/* VLP Gestão — estilos */
:root {
  --chao: #F3F5F2;
  --tinta: #0F1F1C;
  --tinta-2: #2F3E3A;
  --cinza: #56645F;
  --linha: #DFE5E1;
  --linha-2: #CBD4CF;
  --branco: #FFFFFF;
  --amarelo: #3DD39B;
  --amarelo-claro: #D7F5E8;
  --ambar: #F5B83D;
  --ambar-claro: #FDF1D6;
  --azul: #1E3A8A;
  --azul-claro: #DCE4F7;
  --verde: #166534;
  --verde-claro: #DCFCE7;
  --vermelho: #991B1B;
  --vermelho-claro: #FEE2E2;
  --raio: 16px;
  --larg: 560px;
  --titulo: 'Bricolage Grotesque', system-ui, sans-serif;
  --texto: 'Manrope', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--chao); color: var(--tinta);
  font-family: var(--texto); font-size: 16px; line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--titulo); margin: 0; line-height: 1.15; }
h2 { font-size: 20px; font-weight: 700; }
h3 { font-size: 17px; font-weight: 700; }
p { margin: 0; }
a { color: var(--azul); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
small { font-size: 13px; color: var(--cinza); }
code { background: var(--linha); padding: 2px 6px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.esconder { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }

/* ---------- estrutura ---------- */
.pagina { min-height: 100vh; min-height: 100dvh; padding-bottom: calc(32px + env(safe-area-inset-bottom)); max-width: var(--larg); margin: 0 auto; background: var(--chao); position: relative; }
.pagina-escura { background: var(--tinta); color: var(--chao); padding-bottom: 32px; max-width: none; }
.pagina-chat { display: flex; flex-direction: column; height: 100vh; height: 100dvh; padding-bottom: 0; }
.conteudo { padding: 16px 20px 24px; display: flex; flex-direction: column; gap: 14px; }
.conteudo-centro { min-height: 100vh; min-height: 100dvh; justify-content: center; max-width: 440px; margin: 0 auto; text-align: left; }
.conteudo.sobe { margin-top: -22px; background: var(--chao); border-radius: 24px 24px 0 0; position: relative; z-index: 500; }
.secao { display: flex; flex-direction: column; gap: 10px; }
.cartao { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px; display: flex; flex-direction: column; gap: 10px; color: var(--tinta); }
.linha-entre { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sub { color: var(--cinza); font-size: 14px; }
.miudo { font-size: 12px; color: var(--cinza); text-align: center; }
.forte { font-weight: 800; color: var(--tinta); }
.azul { color: var(--azul); }
.corta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }

/* ---------- topo ---------- */
.topo { display: flex; align-items: center; gap: 12px; padding: 14px 20px; position: sticky; top: 0; background: var(--chao); z-index: 600; border-bottom: 1px solid transparent; }
.pagina-chat .topo { background: var(--branco); border-bottom-color: var(--linha); }
.topo-titulo { flex: 1; min-width: 0; font-size: 19px; font-weight: 800; display: flex; flex-direction: column; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topo-titulo small { font-family: var(--texto); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.topo-titulo.grande { font-size: 28px; padding-top: 6px; }
.hero { background: var(--tinta); color: var(--chao); padding: 18px 20px 24px; border-radius: 0 0 24px 24px; display: flex; flex-direction: column; gap: 14px; }
.hero h1 { font-size: 28px; font-weight: 800; }
.hero small, .hero p { color: #D5D7DC; }
.hero-azul { background: var(--azul); }
.hero-azul small { color: #C7D2EE; }
.local { display: inline-flex; align-items: center; gap: 6px; color: var(--chao); font-weight: 700; font-size: 14px; }
.local svg { color: var(--amarelo); flex-shrink: 0; }
.hero-perfil { gap: 16px; }
.perfil-linha { display: flex; gap: 14px; align-items: center; }
.perfil-linha h1 { font-size: 24px; }
.perfil-linha p { font-size: 14px; margin: 2px 0 6px; }
.numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.numeros div { background: rgba(255,255,255,0.08); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.numeros b { font-size: 17px; }
.numeros small { font-size: 12px; }
.marca-grande { display: flex; align-items: center; gap: 12px; font-family: var(--titulo); font-weight: 800; font-size: 34px; margin-bottom: 8px; }
.marca-grande svg { background: var(--amarelo); color: var(--tinta); border-radius: 14px; padding: 8px; width: 52px; height: 52px; }
.slogan { color: #D5D7DC; margin-bottom: 18px; font-size: 15px; }

/* ---------- botões ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 18px; border-radius: 14px; border: 0; font-weight: 800; font-size: 16px; cursor: pointer; text-align: center; color: var(--tinta); background: var(--branco); width: 100%; }
.btn-primario { background: var(--amarelo); color: var(--tinta); }
.btn-primario:hover { background: #2BBF88; }
.btn-contorno { background: var(--branco); border: 2px solid var(--tinta); }
.btn-perigo-leve { background: transparent; color: var(--vermelho); border: 1px solid #FECACA; min-height: 46px; font-size: 15px; }
.btn[aria-busy="true"], .btn-mini[aria-busy="true"], .chip[aria-busy="true"] { opacity: 0.6; pointer-events: none; }
.btn[aria-busy="true"]::after { content: ''; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: gira 0.8s linear infinite; }
.btn-redondo { width: 44px; height: 44px; border-radius: 22px; border: 1px solid var(--linha); background: var(--branco); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--tinta); cursor: pointer; }
.btn-redondo.escuro { background: transparent; border-color: #3A3D45; color: var(--chao); }
.btn-redondo.claro { box-shadow: 0 2px 10px rgba(0,0,0,0.15); border: 0; }
.btn-redondo.amarelo { background: var(--amarelo); border: 0; }
.btn-mini { min-height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--linha-2); background: var(--branco); font-weight: 700; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.btn-mini.perigo { color: var(--vermelho); border-color: #FECACA; }
.link { background: none; border: 0; padding: 8px 0; color: var(--azul); font-weight: 700; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; text-align: left; }
.pagina-escura .link { color: #AFC3F5; }
.pagina-escura .cartao .link { color: var(--azul); }
.link-bloco { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 14px; border: 1px solid var(--linha-2); background: var(--branco); font-weight: 700; font-size: 14px; color: var(--tinta); }
.acoes-duplas { display: flex; gap: 10px; }
.acoes-duplas .btn { flex: 1; }
.rodape-acoes { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: var(--larg); background: var(--branco); border-top: 1px solid var(--linha); padding: 12px 20px calc(14px + env(safe-area-inset-bottom)); display: flex; gap: 10px; z-index: 700; }
.rodape-acoes .btn { flex: 1; }

/* ---------- formulários ---------- */
.form { display: flex; flex-direction: column; gap: 14px; }
.campo { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 700; }
.campo small { font-weight: 500; }
.campo-curto { max-width: 280px; }
.campo input, .campo select, .campo textarea, .escrever input {
  min-height: 50px; border-radius: 14px; border: 1px solid var(--linha-2); padding: 12px 14px;
  font-size: 16px; font-weight: 500; background: var(--branco); color: var(--tinta); width: 100%;
}
.campo textarea { resize: vertical; min-height: 90px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--tinta); outline: 2px solid var(--amarelo); outline-offset: 0; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { font-weight: 800; font-size: 15px; margin-bottom: 8px; padding: 0; }
.escolha { display: grid; gap: 8px; }
.opcao { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 14px; border-radius: 14px; border: 2px solid var(--linha); font-weight: 700; cursor: pointer; }
.opcao.marcada { border-color: var(--tinta); background: var(--amarelo-claro); }
.opcao input { accent-color: var(--tinta); width: 18px; height: 18px; }
.lista-opcoes { display: flex; flex-direction: column; gap: 8px; }
.opcao-servico { display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 56px; border-radius: 14px; border: 2px solid var(--linha); background: var(--branco); cursor: pointer; }
.opcao-servico:has(input:checked) { border-color: var(--tinta); background: var(--amarelo-claro); }
.opcao-servico input { accent-color: var(--tinta); width: 20px; height: 20px; flex-shrink: 0; }
.opcao-servico span { flex: 1; display: flex; flex-direction: column; }
.chip-radio { position: relative; }
.chip-radio input { position: absolute; opacity: 0; }
.chip-radio span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 20px; border: 1px solid var(--linha-2); background: var(--branco); font-weight: 700; font-size: 14px; cursor: pointer; }
.chip-radio input:checked + span { background: var(--tinta); color: var(--chao); border-color: var(--tinta); }
.chip-radio input:focus-visible + span { outline: 3px solid var(--azul); }
.rodape-form { display: flex; flex-direction: column; gap: 8px; padding-top: 6px; }
.total { display: flex; justify-content: space-between; font-size: 16px; }
.info { background: var(--azul-claro); color: var(--azul); border-radius: 14px; padding: 12px 14px; font-size: 14px; font-weight: 600; }
.alerta { background: var(--ambar-claro); border: 1px solid #F3D48E; border-radius: var(--raio); padding: 14px; display: flex; flex-direction: column; gap: 10px; color: var(--tinta); }
.alerta-erro { background: var(--vermelho-claro); border-color: #FECACA; }

/* ---------- abas e chips ---------- */
.abas, .segmentado { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; background: #E3E9E5; border-radius: 14px; padding: 4px; }
.abas { margin-bottom: 6px; }
.aba, .segmentado button { min-height: 44px; border: 0; border-radius: 11px; background: transparent; font-weight: 800; font-size: 14px; cursor: pointer; color: var(--tinta); }
.segmentado.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.segmentado a { min-height: 44px; border-radius: 11px; font-weight: 800; font-size: 14px; color: var(--tinta); text-decoration: none; display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.1; }
.aba.ativa, .segmentado .ativo { background: var(--branco); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 38px; padding: 0 14px; border-radius: 19px; border: 1px solid var(--linha-2); background: var(--branco); font-weight: 700; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; color: var(--tinta); }
.chip.ativo { background: var(--tinta); color: var(--chao); border-color: var(--tinta); }
.chip.apagado { color: var(--cinza); background: transparent; border-style: dashed; cursor: default; }

/* ---------- listas ---------- */
.item { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--raio); background: var(--branco); border: 1px solid var(--linha); color: var(--tinta); }
.item > svg { color: var(--cinza); flex-shrink: 0; }
.item-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.item-corpo b { display: flex; align-items: center; gap: 6px; }
.avatar { border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: var(--tinta); flex-shrink: 0; }
.pont-online { width: 9px; height: 9px; border-radius: 50%; background: #22C55E; display: inline-block; }
.grade-cat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cat { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px 6px; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--tinta); text-align: center; min-height: 96px; }
.cat-ic { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.destaque { background: var(--amarelo); border-radius: 18px; padding: 16px; display: flex; align-items: center; gap: 14px; color: var(--tinta); }
.destaque > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.destaque small { color: var(--tinta); }
.destaque-ic { width: 46px; height: 46px; border-radius: 12px; background: var(--tinta); color: var(--amarelo); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.vazio { text-align: center; padding: 28px 16px; color: var(--cinza); display: flex; flex-direction: column; gap: 14px; align-items: center; background: var(--branco); border: 1px dashed var(--linha-2); border-radius: var(--raio); }
.fora summary { cursor: pointer; font-weight: 700; color: var(--cinza); padding: 8px 0; }
.fora[open] { display: flex; flex-direction: column; gap: 10px; }
.tag { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; padding: 4px 9px; border-radius: 8px; white-space: nowrap; align-self: flex-start; }
.tag-cinza { background: #E9E7E0; color: var(--tinta); }
.tag-azul { background: var(--azul-claro); color: var(--azul); }
.tag-amarelo { background: var(--ambar-claro); color: #7A5200; }
.tag-verde { background: var(--verde-claro); color: var(--verde); }
.tag-vermelho { background: var(--vermelho-claro); color: var(--vermelho); }
.bio { font-size: 15px; color: var(--tinta-2); }
.tabela-precos { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.linha-preco { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-bottom: 1px solid #EFEDE6; flex-wrap: wrap; }
.linha-preco:last-child { border-bottom: 0; }
.linha-preco > span:first-child { flex: 1; min-width: 160px; display: flex; flex-direction: column; }
.linha-preco.inativo { opacity: 0.55; }
.mini-acoes { display: flex; gap: 6px; width: 100%; justify-content: flex-end; }
.aval { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.estrelas { display: inline-flex; gap: 2px; vertical-align: middle; }

/* ---------- menu lateral (☰) ---------- */
.menu-check { position: fixed; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.btn-menu { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: var(--tinta); cursor: pointer; margin-left: -8px; }
.btn-menu:active { background: var(--linha); }
.btn-menu:focus-visible { outline: 3px solid var(--amarelo); }
.topo-marca { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.menu-fundo { position: fixed; inset: 0; background: rgba(15, 31, 28, 0.45); opacity: 0; pointer-events: none; transition: opacity 0.2s; z-index: 900; }
.gaveta { position: fixed; top: 0; bottom: 0; right: 0; width: min(300px, 84vw); background: var(--branco); z-index: 901; transform: translateX(105%); transition: transform 0.22s ease-out;
  display: flex; flex-direction: column; gap: 4px; padding: calc(14px + env(safe-area-inset-top)) 12px calc(16px + env(safe-area-inset-bottom)); overflow-y: auto; box-shadow: -6px 0 24px rgba(0,0,0,0.15); }
.menu-check:checked ~ .menu-fundo { opacity: 1; pointer-events: auto; }
.menu-check:checked ~ .gaveta { transform: none; }
.gaveta-topo { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 12px; }
.gaveta-item { display: flex; align-items: center; gap: 14px; padding: 13px 12px; border-radius: 12px; color: var(--tinta-2); font-weight: 600; font-size: 16px; }
.gaveta-item.ativo { background: var(--amarelo-claro); color: var(--tinta); font-weight: 800; }
.gaveta-lancar svg { background: var(--amarelo); border-radius: 50%; padding: 3px; }
.gaveta-rodape { margin-top: auto; padding: 12px; color: var(--cinza); }
@media (prefers-reduced-motion: reduce) { .gaveta, .menu-fundo { transition: none; } }

/* ---------- admin ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.kpi { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.kpi b { font-family: var(--titulo); font-size: 26px; font-weight: 800; }
.tabela-rolagem { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
.tabela th { text-align: left; font-size: 12px; color: var(--cinza); font-weight: 800; padding: 0 8px 10px; border-bottom: 1px solid #EFEDE6; }
.tabela td { padding: 11px 8px; border-bottom: 1px solid #EFEDE6; vertical-align: middle; }
.tabela .dir { text-align: right; }
.tabela a { color: var(--tinta); font-weight: 700; }
/* ---------- avisos e carregamento ---------- */
.carregando { min-height: 50vh; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--cinza); font-weight: 600; }
.spinner { width: 22px; height: 22px; border: 3px solid var(--linha-2); border-top-color: var(--tinta); border-radius: 50%; animation: gira 0.8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.toast { position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 20px); max-width: min(92vw, 480px); padding: 12px 16px; border-radius: 14px; background: var(--tinta); color: var(--chao); font-weight: 700; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 2000; box-shadow: 0 8px 24px rgba(0,0,0,0.2); }
.toast.visivel { opacity: 1; transform: translate(-50%, 0); }
.toast-erro { background: var(--vermelho); color: #fff; }
.toast-ok { background: var(--verde); color: #fff; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation-duration: 0.01ms !important; } }


/* =================== VLP Gestão =================== */
.pos { color: var(--verde); }
.neg { color: var(--vermelho); }
.pagina-larga { max-width: 1040px; }
a.alerta, a.info { display: flex; flex-direction: column; gap: 4px; }

/* marca */
.marca { display: inline-flex; align-items: center; gap: 10px; color: inherit; }
.marca-simbolo { display: inline-flex; align-items: flex-end; gap: 3px; height: 26px; padding: 5px 6px; border-radius: 9px; background: var(--tinta); }
.marca-simbolo i { display: block; width: 5px; border-radius: 2px; background: var(--amarelo); }
.marca-simbolo i:nth-child(1) { height: 7px; } .marca-simbolo i:nth-child(2) { height: 11px; } .marca-simbolo i:nth-child(3) { height: 16px; background: var(--ambar); }
.marca-texto { font-family: var(--titulo); font-size: 18px; font-weight: 600; display: inline-flex; align-items: baseline; gap: 5px; letter-spacing: -0.01em; }
.marca-texto b { font-weight: 800; }
.marca-texto small { font-family: var(--texto); font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cinza); align-self: flex-end; margin-bottom: 2px; }
.marca-grande .marca-simbolo { height: 46px; padding: 9px 10px; border-radius: 14px; gap: 5px; background: var(--amarelo); }
.marca-grande .marca-simbolo i { width: 8px; background: var(--tinta); }
.marca-grande .marca-simbolo i:nth-child(1) { height: 10px; } .marca-grande .marca-simbolo i:nth-child(2) { height: 18px; } .marca-grande .marca-simbolo i:nth-child(3) { height: 28px; background: var(--tinta); }
.marca-grande .marca-texto { font-size: 34px; }
.marca-grande .marca-texto small { font-size: 11px; color: #9FB1AA; margin-bottom: 6px; }

/* topo */
.topo-app { flex-direction: column; align-items: stretch; gap: 6px; padding: 12px 20px 8px; }
.topo-linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.empresa-atual { display: inline-flex; align-items: center; gap: 6px; max-width: 60%; padding: 6px 10px; border-radius: 10px; background: var(--branco); border: 1px solid var(--linha); color: var(--tinta); font-weight: 700; font-size: 13px; }
.empresa-atual span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-auto { width: auto; min-height: 44px; font-size: 14px; }
.btn-escuro { background: var(--tinta); color: var(--branco); }
.btn-mini.ok { color: var(--verde); border-color: #A7E3C4; }
.arquivo { position: relative; cursor: pointer; }

/* consultor */
.grade-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.mini-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mini-kpis div { background: var(--branco); border: 1px solid var(--linha); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.empresa-card .mini-kpis div { background: var(--chao); border: 0; }
.mini-kpis b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-kpis.grande b { font-size: 17px; }
.mini-kpis small { font-size: 12px; }

/* navegação de mês */
.mes-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mes-nav b { font-family: var(--titulo); font-size: 18px; }
.mes-nav b::first-letter { text-transform: uppercase; }

/* contas a pagar */
.resumo-linha { display: flex; justify-content: space-between; padding: 0 4px; font-weight: 700; }
.conta-linha { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.conta-linha.atrasada { border-color: #F5B5B5; box-shadow: inset 4px 0 0 var(--vermelho); }
.conta-corpo { display: flex; align-items: center; gap: 12px; color: var(--tinta); }
.conta-ic { width: 40px; height: 40px; border-radius: 12px; background: var(--chao); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.conta-valor { font-size: 16px; white-space: nowrap; }
.conta-acoes { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.pagar-form { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--linha); padding-top: 10px; }

/* caixa */
.dia-bloco { display: flex; flex-direction: column; gap: 8px; }
.dia-bloco h3 { font-size: 14px; color: var(--cinza); font-family: var(--texto); font-weight: 800; padding: 4px 4px 0; }
.lanc { background: var(--branco); border: 1px solid var(--linha); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.lanc.neutro { opacity: 0.6; }
.lanc-topo { display: flex; gap: 10px; align-items: flex-start; }
.lanc-topo > b { white-space: nowrap; }
.lanc-baixo { display: flex; gap: 8px; align-items: center; }
.sel-cat { flex: 1; min-height: 38px; border-radius: 10px; border: 1px solid var(--linha-2); background: var(--chao); padding: 0 10px; font-size: 14px; font-weight: 600; min-width: 0; }
.sel-cat.falta { border-color: #F3D48E; background: var(--ambar-claro); }
.seg-op { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; border-radius: 11px; font-weight: 800; font-size: 14px; cursor: pointer; }
.seg-op:has(input:checked) { background: var(--branco); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.seg-op input { accent-color: var(--tinta); }
select.chip { appearance: auto; }

/* listas simples */
.lista-simples { padding: 4px 0; gap: 0; }
.lista-simples > .linha-entre { padding: 10px 16px; border-bottom: 1px solid var(--linha); }
.lista-simples > :last-child { border-bottom: 0; }
.linha-prod { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 16px; background: none; border: 0; border-bottom: 1px solid var(--linha); text-align: left; cursor: pointer; color: var(--tinta); }
.linha-prod:last-child { border-bottom: 0; }
.linha-prod[disabled] { cursor: default; }
.saldo { font-weight: 800; white-space: nowrap; }
.linha-campo { display: flex; gap: 8px; align-items: center; }
.linha-campo input { flex: 1; }
.btn-bipar { min-height: 76px; font-size: 20px; border-radius: 18px; }

/* folha (janela que sobe de baixo) */
.folha-fundo { position: fixed; inset: 0; background: rgba(15,31,28,0.45); z-index: 900; }
.folha { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; max-width: var(--larg); background: var(--branco); border-radius: 22px 22px 0 0; padding: 20px 20px calc(20px + env(safe-area-inset-bottom)); z-index: 901; display: flex; flex-direction: column; gap: 14px; max-height: 92vh; overflow-y: auto; box-shadow: 0 -10px 30px rgba(0,0,0,0.2); }
.contador { display: flex; align-items: center; gap: 10px; }
.contador input { flex: 1; min-width: 0; min-height: 64px; border-radius: 16px; border: 2px solid var(--tinta); text-align: center; font-size: 30px; font-weight: 800; font-family: var(--titulo); }
.contador .un { font-weight: 800; color: var(--cinza); min-width: 28px; }
.btn-redondo.grande { width: 56px; height: 56px; border-radius: 28px; }
.check-linha { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.check-linha input { width: 20px; height: 20px; accent-color: var(--tinta); }

/* gráficos */
.grafico { width: 100%; height: auto; }
.grafico text { font-size: 11px; fill: var(--cinza); font-family: var(--texto); }
.grafico text.forte { fill: var(--tinta); font-weight: 800; }
.grafico .eixo { stroke: var(--linha-2); }
.b-ent, .l-ent { fill: #1F9D6B; background: #1F9D6B; }
.b-sai, .l-sai { fill: #E07A5F; background: #E07A5F; }
.legenda { display: flex; gap: 16px; font-size: 13px; color: var(--cinza); }
.legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }
.barra-h { display: flex; flex-direction: column; gap: 6px; }
.barra-h small { font-weight: 600; }
.trilho-h { height: 8px; background: var(--chao); border-radius: 4px; overflow: hidden; }
.trilho-h i { display: block; height: 100%; background: #E07A5F; border-radius: 4px; }

/* scanner */
.scanner { position: fixed; inset: 0; background: #000; z-index: 3000; display: flex; flex-direction: column; }
.scanner video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scanner-mira { position: absolute; left: 50%; top: 45%; width: 70vw; max-width: 340px; height: 160px; transform: translate(-50%, -50%); border: 3px solid var(--amarelo); border-radius: 18px; box-shadow: 0 0 0 100vmax rgba(0,0,0,0.45); }
.scanner-mira.larga { width: 92vw; max-width: 720px; height: 110px; }
.scanner-mira::after { content: ''; position: absolute; left: 8%; right: 8%; top: 50%; height: 2px; background: #FF4D4D; animation: varre 1.6s ease-in-out infinite alternate; }
@keyframes varre { from { transform: translateY(-40px); } to { transform: translateY(40px); } }
.scanner-topo { position: relative; display: flex; justify-content: space-between; align-items: center; padding: calc(14px + env(safe-area-inset-top)) 16px 14px; color: #fff; z-index: 2; }
.scanner-rodape { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 20px calc(24px + env(safe-area-inset-bottom)); color: #fff; text-align: center; font-weight: 600; z-index: 2; }
@media (orientation: landscape) { .scanner-mira.larga { height: 140px; } }

@media (min-width: 900px) {
  .pagina-larga .conteudo { padding: 20px 28px 40px; }
}

/* Lançar: botões grandes (tela inicial e tela Lançar) */
.lancar-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lancar-btn { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px; display: flex; flex-direction: column; gap: 2px; color: var(--tinta); cursor: pointer; min-height: 104px; }
.lancar-btn:active { transform: scale(0.98); }
.lancar-btn b { font-size: 16px; }
.lancar-btn small { color: var(--cinza); font-size: 12px; line-height: 1.3; }
.lancar-btn.principal { grid-column: 1 / -1; background: var(--tinta); color: #fff; border-color: var(--tinta); min-height: 0; padding: 18px; }
.lancar-btn.principal small { color: #C9D6D1; }
.lancar-btn.principal b { font-size: 19px; }
.lancar-ic { font-size: 26px; line-height: 1; margin-bottom: 4px; }
.lancar-btn:focus-within, .lancar-btn:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 2px; }
.centro-col { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 22px 16px; }
.grav-btn { width: 96px; height: 96px; border-radius: 50%; border: 0; background: var(--vermelho); display: flex; align-items: center; justify-content: center; cursor: pointer; animation: pulsa 1.4s ease-in-out infinite; }
.grav-btn span { width: 30px; height: 30px; border-radius: 6px; background: #fff; }
@keyframes pulsa { 0%, 100% { box-shadow: 0 0 0 0 rgba(153, 27, 27, 0.45); } 50% { box-shadow: 0 0 0 16px rgba(153, 27, 27, 0); } }
.ia-preview { max-width: 100%; max-height: 220px; border-radius: 12px; object-fit: contain; }
.ok-grande { width: 64px; height: 64px; border-radius: 50%; background: var(--verde-claro); color: var(--verde); display: flex; align-items: center; justify-content: center; }
.titulo-secao { margin: 8px 0 0; }
.centro-col .btn { width: 100%; }
.lancar-btn.largo { grid-column: 1 / -1; min-height: 0; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; }
.lancar-btn.largo .lancar-ic { grid-row: span 2; margin: 0; }
.kpis-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kpis-2 .kpi b { font-size: clamp(17px, 5vw, 24px); }
/* carregamento: esqueleto no lugar dos números */
.esqueleto { background: linear-gradient(90deg, #E7ECE9 25%, #F4F7F5 50%, #E7ECE9 75%); background-size: 200% 100%; animation: brilho 1.2s ease-in-out infinite; border: 0; min-height: 86px; }
.esqueleto.alto { min-height: 180px; }
.esqueleto-titulo { height: 22px; width: 40%; border-radius: 8px; background: #E7ECE9; }
@keyframes brilho { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.spinner.mini { display: inline-block; width: 14px; height: 14px; border-width: 2px; vertical-align: middle; margin-left: 6px; }
/* IA lendo: comprovante com linha de leitura e passos */
.ia-scan { position: relative; overflow: hidden; border-radius: 12px; }
.ia-scan i { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--amarelo); box-shadow: 0 0 14px 4px rgba(61, 211, 155, 0.6); animation: scan 1.6s ease-in-out infinite alternate; }
@keyframes scan { from { top: 0; } to { top: calc(100% - 3px); } }
.ia-pulso { font-size: 40px; animation: pulsa-ia 1.2s ease-in-out infinite; }
@keyframes pulsa-ia { 50% { transform: scale(1.18); opacity: 0.7; } }
.ia-passos { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; text-align: left; width: 100%; max-width: 300px; }
.ia-passos li { color: var(--cinza); padding-left: 26px; position: relative; }
.ia-passos li::before { content: ''; position: absolute; left: 4px; top: 5px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--linha-2); }
.ia-passos li.atual { color: var(--tinta); font-weight: 700; }
.ia-passos li.atual::before { border-color: var(--tinta); border-top-color: transparent; animation: gira 0.8s linear infinite; }
.ia-passos li.feito::before { background: var(--amarelo); border-color: var(--amarelo); }
@media (prefers-reduced-motion: reduce) { .ia-scan i, .ia-pulso, .esqueleto, .grav-btn { animation: none; } }
/* no topo, só o símbolo ao lado do ☰ (o nome aparece no menu) */
@media (max-width: 480px) { .topo-marca .marca-texto { display: none; } .empresa-atual { max-width: 72%; } }

/* menu ao alcance do polegar: botão flutuante embaixo à direita; itens começam de baixo */
.menu-flutuante { position: fixed; right: max(16px, calc(50vw - var(--larg) / 2 + 16px)); bottom: calc(28px + env(safe-area-inset-bottom)); width: 56px; height: 56px; margin: 0; border-radius: 50%;
  background: var(--tinta); color: #fff; box-shadow: 0 6px 18px rgba(15, 31, 28, 0.35); z-index: 800; }
.menu-flutuante:active { background: var(--tinta-2); transform: scale(0.96); }
.menu-check:checked ~ .menu-flutuante { opacity: 0; pointer-events: none; }
.gaveta-topo { order: 99; padding: 12px 4px 0; }
.gaveta-rodape { order: -1; margin: 0 0 auto; }
.pagina { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }

/* ================= Painel do computador ================= */
.pc { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; background: var(--chao); }
.pc-menu { position: sticky; top: 0; height: 100vh; background: var(--tinta); color: #DDE7E3; padding: 20px 12px; display: flex; flex-direction: column; gap: 4px; }
.pc-menu .marca { color: #fff; }
.pc-marca { padding: 0 8px; }
.pc-empresa { padding: 2px 10px 18px; color: #9FB3AC; }
.pc-item { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 10px; color: #DDE7E3; font-weight: 600; }
.pc-item:hover { background: rgba(255,255,255,0.07); }
.pc-item.ativo { background: var(--amarelo); color: var(--tinta); font-weight: 800; }
.pc-voltar { margin-top: auto; color: #9FB3AC; }
.pc-corpo { padding: 24px 32px 48px; min-width: 0; display: flex; flex-direction: column; gap: 16px; max-width: 1400px; }
.pc-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.pc-topo h1 { font-family: var(--titulo); font-size: 30px; margin: 0; }
.pc-topo .sub { margin: 4px 0 0; max-width: 720px; }
.pc-acoes { display: flex; gap: 8px; flex-shrink: 0; }
.pc-aviso-celular { display: none; }
.pc-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pc-kpis .kpi b { font-size: 24px; }
.pc-filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pc-filtros select, .pc-busca, .pc-datas input, .pc-add input, .pc-add select, .pc-novo input, .pc-novo select { height: 40px; border: 1px solid var(--linha-2); border-radius: 10px; padding: 0 12px; font: inherit; font-size: 14px; background: var(--branco); }
.pc-busca { min-width: 260px; flex: 1; max-width: 380px; }
.pc-datas { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--cinza); }
.pc-filtros .chips { margin: 0; }
.pc-tabela { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); overflow: auto; max-height: calc(100vh - 220px); }
.pc-tabela .tabela { min-width: 760px; }
.pc-tabela thead th { position: sticky; top: 0; background: var(--branco); z-index: 1; padding: 10px 8px; }
.pc-tabela tfoot td { position: sticky; bottom: 0; background: #F7F9F8; font-weight: 700; border-top: 2px solid var(--linha); }
.tabela .num { text-align: right; white-space: nowrap; }
.tabela tbody tr:hover { background: #F7FAF8; }
.th-ord { background: none; border: 0; font: inherit; font-weight: 800; font-size: 12px; color: var(--cinza); cursor: pointer; padding: 0; text-align: inherit; width: 100%; }
th.num .th-ord { text-align: right; }
.planilha td { padding: 4px 6px; }
.cel { width: 100%; min-width: 60px; height: 34px; border: 1px solid transparent; border-radius: 8px; padding: 0 8px; font: inherit; font-size: 14px; background: transparent; color: var(--tinta); }
.cel:hover { border-color: var(--linha); }
.cel:focus { border-color: var(--tinta); background: var(--branco); outline: none; }
.cel.num { text-align: right; max-width: 120px; margin-left: auto; display: block; }
.cel-sub { display: block; padding-left: 9px; color: var(--cinza); font-size: 11px; }
td.salvo .cel { animation: salvou 1.2s ease-out; }
td.erro-cel .cel { border-color: var(--vermelho); background: var(--vermelho-claro); }
@keyframes salvou { 0% { background: var(--verde-claro); border-color: var(--verde); } 100% { background: transparent; border-color: transparent; } }
tr.falta-custo td:first-child { box-shadow: inset 3px 0 0 var(--ambar); }
tr.inativo { opacity: 0.5; }
.pc-novo { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px; }
.pc-novo input[name=nome] { flex: 1; min-width: 220px; }
.pc-duas { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: 20px; align-items: start; }
.pc-lista { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - 140px); }
.pc-lista .pc-busca { max-width: none; }
.pc-lista-itens { overflow-y: auto; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: 6px; }
.pc-lista-item { display: flex; width: 100%; justify-content: space-between; gap: 10px; text-align: left; background: none; border: 0; border-radius: 10px; padding: 9px 10px; font: inherit; cursor: pointer; color: var(--tinta); }
.pc-lista-item:hover { background: #F3F6F4; }
.pc-lista-item.ativo { background: var(--amarelo-claro); }
.pc-lista-item b { display: block; font-size: 14px; }
.pc-lista-item small { display: block; color: var(--cinza); font-size: 12px; }
.pc-lista-item .num { text-align: right; font-weight: 700; font-size: 14px; white-space: nowrap; }
.pc-editor { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: 20px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pc-editor .pc-tabela { max-height: none; }
.pc-editor .pc-kpis .kpi { background: var(--chao); }
.pc-editor-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pc-titulo-edit { font-family: var(--titulo); font-size: 24px; font-weight: 800; border: 1px solid transparent; border-radius: 10px; padding: 4px 8px; flex: 1; min-width: 0; background: transparent; color: var(--tinta); }
.pc-titulo-edit:hover, .pc-titulo-edit:focus { border-color: var(--linha-2); outline: none; }
.pc-campos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pc-add { display: flex; gap: 8px; flex-wrap: wrap; }
.pc-add input[name=insumo] { flex: 1; min-width: 240px; }
.pc-add input[name=qtd] { width: 160px; }
.abc { display: inline-block; width: 24px; text-align: center; border-radius: 6px; font-weight: 800; font-size: 12px; padding: 2px 0; }
.abc-A { background: var(--verde-claro); color: var(--verde); }
.abc-B { background: var(--ambar-claro); color: #8A5A00; }
.abc-C { background: #EEF1EF; color: var(--cinza); }
.pc-convite { display: none; }
@media (min-width: 900px) { .pc-convite { display: flex; } }
@media (max-width: 899px) {
  .pc { grid-template-columns: 1fr; }
  .pc-menu { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .pc-empresa, .pc-marca { display: none; }
  .pc-voltar { margin: 0; }
  .pc-corpo { padding: 16px; }
  .pc-aviso-celular { display: block; background: var(--ambar-claro); padding: 10px 12px; border-radius: 10px; margin: 0; }
  .pc-kpis, .pc-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pc-duas { grid-template-columns: 1fr; }
  .pc-lista { position: static; max-height: 50vh; }
}
.pc .pc-busca, .pc-lista select { height: 40px; border: 1px solid var(--linha-2); border-radius: 10px; padding: 0 12px; font: inherit; font-size: 14px; background: var(--branco); width: 100%; }
.pc-filtros .pc-busca { width: auto; }
.pc-editor .tabela { min-width: 0; }
.pc-editor td:last-child { width: 40px; }
.pc-lista > :not(.pc-lista-itens) { flex-shrink: 0; }
/* visão geral no computador: grade de duas colunas */
.pc-geral { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.pc-geral > .alerta, .pc-geral > .info, .pc-geral > .mes-nav, .pc-geral > .secao, .pc-geral > .titulo-secao, .pc-geral > .kpis { grid-column: 1 / -1; }
.pc-geral .mes-nav { max-width: 420px; }
.pc-geral .secao { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pc-geral .secao > .linha-entre, .pc-geral .secao > .kpis, .pc-geral .secao > p, .pc-geral .secao > .cartao:first-of-type { grid-column: 1 / -1; }
.pc-geral .kpis-2 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 899px) { .pc-geral, .pc-geral .secao { grid-template-columns: 1fr; } .pc-geral .kpis-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pc-geral .grafico { max-height: 240px; width: 100%; }

/* ===== telas do app abertas no computador (moldura .pc-app) ===== */
.pc-grupo { display: block; padding: 14px 12px 4px; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #7F958D; }
a.pc-empresa { display: block; color: #9FB3AC; }
a.pc-empresa:hover { color: #fff; }
.pc-app .pagina { max-width: 1100px; margin: 0; padding: 0 0 32px; min-height: 0; background: transparent; }
.pc-app .topo { position: static; background: transparent; padding: 0 0 8px; }
.pc-app .topo-app > .topo-linha:first-child { display: none; }
.pc-app .topo-titulo { font-size: 30px; }
.pc-app .conteudo { padding: 0; gap: 16px; }
.pc-app .menu-flutuante, .pc-app .menu-check, .pc-app .menu-fundo, .pc-app .gaveta, .pc-app .btn-menu { display: none !important; }
.pc-app .folha { left: calc(50% + 116px); border-radius: 22px; bottom: 24px; max-height: calc(100vh - 48px); }
.pc-app .kpis-2 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pc-app .lancar-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pc-app .lancar-btn.principal, .pc-app .lancar-btn.largo { grid-column: auto; }
.pc-app .lancar-btn.largo { display: flex; }
/* gráficos do computador */
.pc-graficos { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: start; }
.pc-graficos .pc-largo { grid-column: 1 / -1; }
.pc-graficos .cartao { gap: 10px; }
.rosca { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.rosca svg { width: 120px; height: 120px; }
.rosca .fatia { stroke: var(--branco); stroke-width: 1.5; cursor: pointer; transition: opacity 0.15s, transform 0.15s; transform-origin: 60px 60px; }
.rosca .fatia:hover { opacity: 0.8; }
.rosca .fatia.apagada { opacity: 0.25; }
.rosca .fatia.escolhida { transform: scale(1.06); }
.rosca-centro { font-family: var(--titulo); font-weight: 800; font-size: 12px; fill: var(--tinta); }
.rosca-sub { font-size: 8px; fill: var(--cinza); }
.legenda-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; width: 100%; }
.legenda-lista li { display: grid; grid-template-columns: 10px 1fr auto; column-gap: 8px; align-items: center; padding: 4px 6px; border-radius: 8px; cursor: pointer; }
.legenda-lista li:hover { background: #F3F6F4; }
.legenda-lista li.escolhida { background: var(--amarelo-claro); font-weight: 700; }
.legenda-lista li.apagada { opacity: 0.55; }
.legenda-lista i { width: 10px; height: 10px; border-radius: 3px; }
.legenda-lista span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tinta-2); }
.legenda-lista b { font-weight: 800; }
.det { border-top: 1px solid var(--linha); padding-top: 10px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.det-linha { display: flex; justify-content: space-between; gap: 8px; }
.det-linha span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: none; }
.det-linha small { color: var(--cinza); }
.dica-clique { font-size: 12px; text-align: center; margin: 0; }
.aneis { display: flex; flex-direction: column; gap: 10px; text-align: center; }
.anel { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.anel svg { width: 84px; height: 84px; }
.anel b { font-size: 13px; line-height: 1.2; }
.anel small { font-size: 11px; color: var(--cinza); }
.anel-trilho { fill: none; stroke: #E7ECE9; stroke-width: 12; }
.anel-valor { fill: none; stroke: #2a78d6; stroke-width: 12; stroke-linecap: round; transition: stroke-dasharray 0.6s; }
.anel-alerta .anel-valor { stroke: var(--ambar); }
.anel-ruim .anel-valor { stroke: #D64545; }
.anel-ok .anel-valor { stroke: #1baf7a; }
.anel-limite { stroke: var(--tinta); stroke-width: 2.5; }
.anel-num { font-family: var(--titulo); font-weight: 800; font-size: 22px; fill: var(--tinta); }
.barras-v { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; height: 160px; align-items: end; }
.barra-v { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.barra-v span { width: 70%; max-width: 46px; background: #9DBFE8; border-radius: 4px 4px 0 0; min-height: 2px; }
.barra-v.melhor span { background: #2a78d6; }
.barra-v small { font-size: 11px; color: var(--cinza); white-space: nowrap; }
.barra-v b { font-size: 12px; }
@media (max-width: 1200px) { .pc-graficos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pc-geral .cartao .grafico { height: 220px; max-height: none; }

/* ===== Visão geral do computador: quadros clicáveis ===== */
.pc-visao { display: flex; flex-direction: column; gap: 16px; }
.pc-barra-mes { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pc-barra-mes .mes-nav { min-width: 380px; }
.pc-grade { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; align-items: start; }
.pc-grade > .pc-card { grid-column: span 2; }
.pc-grade > .pc-largo { grid-column: 1 / -1; }
.pc-grade > .pc-meio { grid-column: span 3; }
.pc-card { gap: 10px; }
.pc-card-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pc-card-topo h2 { margin: 0; }
.chip-mini { border: 1px solid var(--linha-2); background: var(--branco); border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 12px; font-weight: 700; color: var(--tinta-2); cursor: pointer; white-space: nowrap; }
.chip-mini:hover { border-color: var(--tinta); color: var(--tinta); }
.kpi-clic { text-align: left; font: inherit; color: inherit; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
.kpi-clic:hover { border-color: var(--tinta-2); box-shadow: 0 2px 10px rgba(15,31,28,0.08); }
.kpi-clic.escolhida { border-color: var(--tinta); box-shadow: inset 0 -3px 0 var(--amarelo); }
.tabela-cartao { max-height: 380px; overflow: auto; }
.tabela-cartao .tabela { min-width: 0; }
.tabela-cartao thead th { position: sticky; top: 0; background: var(--branco); }
.tabela-cartao tfoot td { font-weight: 800; border-top: 2px solid var(--linha); }
.recuo { padding-left: 14px; color: var(--cinza); }
.colunas { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; height: 170px; align-items: end; }
.coluna { display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; height: 100%; cursor: pointer; }
.coluna span { background: #1baf7a; border-radius: 3px 3px 0 0; min-height: 2px; }
.coluna:hover span { background: #128a5f; }
.coluna.vazia { cursor: default; }
.coluna.vazia span { background: #E7ECE9; }
.coluna small { font-size: 10px; color: var(--cinza); text-align: center; height: 14px; }
.coluna.apagada span, .barra-v.apagada span { opacity: 0.3; }
.coluna.escolhida span { background: var(--tinta); }
.barra-v { cursor: pointer; }
.barra-v:hover span { background: #2a78d6; }
.barra-v.escolhida span { background: var(--tinta); }
.hbarras { display: flex; flex-direction: column; gap: 4px; }
.hbarra { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 5px 8px; border-radius: 8px; cursor: pointer; }
.hbarra:hover { background: #F3F6F4; }
.hbarra.escolhida { background: var(--amarelo-claro); }
.hbarra.apagada { opacity: 0.45; }
.hb-nome { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: lowercase; }
.hb-nome::first-letter { text-transform: uppercase; }
.hb-nome small { display: inline-block; width: 18px; color: var(--cinza); font-weight: 700; }
.hb-nome em { font-style: normal; color: var(--cinza); font-size: 12px; }
.hbarra b { font-size: 13px; }
.hb-trilho { grid-column: 1 / -1; height: 6px; background: #EEF1EF; border-radius: 3px; overflow: hidden; }
.hb-trilho i { display: block; height: 100%; background: #eb6834; border-radius: 3px; }
.anel-btn { background: none; border: 0; border-radius: 12px; padding: 4px; cursor: pointer; font: inherit; color: inherit; }
.anel-btn:hover { background: #F3F6F4; }
.anel-btn.escolhida { background: var(--amarelo-claro); }
.pc-visao .aneis { flex-direction: row; justify-content: space-around; }
.meses-barras { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; height: 170px; }
.mes-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; background: none; border: 0; border-radius: 10px; cursor: pointer; font: inherit; padding: 4px 0; }
.mes-col:hover { background: #F3F6F4; }
.mes-col.escolhida small { font-weight: 800; color: var(--tinta); }
.mc-barras { display: flex; align-items: flex-end; gap: 3px; height: 100%; width: 70%; justify-content: center; }
.mc-barras i { width: 40%; max-width: 18px; border-radius: 3px 3px 0 0; min-height: 2px; }
.mes-col small { font-size: 11px; color: var(--cinza); }
@media (max-width: 1250px) { .pc-grade > .pc-card { grid-column: span 3; } .pc-grade > .pc-largo { grid-column: 1 / -1; } }

/* ===== Equipe do dia ===== */
.data-dia { position: relative; display: flex; flex-direction: column; align-items: center; cursor: pointer; text-transform: capitalize; }
.data-dia input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.lista-equipe { gap: 6px; }
.pessoa-dia { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: start; padding: 10px 4px; border-top: 1px solid var(--linha); }
.pd-check { width: 34px; height: 34px; border-radius: 10px; border: 2px solid var(--linha-2); background: var(--branco); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--tinta); }
.presente .pd-check { background: var(--amarelo); border-color: var(--amarelo); }
.pd-corpo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pd-corpo small { color: var(--cinza); }
.pessoa-dia:not(.presente) .pd-corpo b { color: var(--cinza); }
.pd-extra { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pd-valor { height: 36px; border: 1px solid var(--linha-2); border-radius: 10px; padding: 0 10px; font: inherit; width: 170px; }
.pd-sugestao { text-align: left; background: var(--ambar-claro); border: 1px solid var(--ambar); border-radius: 10px; padding: 6px 10px; font: inherit; font-size: 13px; cursor: pointer; color: var(--tinta); }
.pd-valor-dia { text-align: right; display: flex; flex-direction: column; gap: 2px; }
.pd-valor-dia b { font-size: 17px; }
.pd-valor-dia small { color: var(--cinza); font-size: 12px; }
/* cadastro da equipe */
.pc-config { display: grid; grid-template-columns: repeat(3, minmax(0, 220px)) 1fr; gap: 14px; align-items: end; }
.pc-config .sub { margin: 0; }
.com-sufixo { display: flex; align-items: center; gap: 6px; }
.com-sufixo i { font-style: normal; color: var(--cinza); }
.folgas { display: flex; gap: 3px; }
.folgas label { cursor: pointer; }
.folgas input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.folgas span { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 7px; border: 1px solid var(--linha-2); font-size: 12px; font-weight: 700; color: var(--cinza); }
.folgas input:checked + span { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.folgas input:focus-visible + span { outline: 3px solid var(--amarelo); }
.folgas.salvo span { animation: salvou 1.2s ease-out; }
@media (max-width: 899px) { .pc-config { grid-template-columns: 1fr; } }
.cartao.pc-novo { flex-direction: row; flex-wrap: wrap; align-items: center; }
.cartao.pc-novo input, .cartao.pc-novo select { height: 40px; }
.planilha select.cel { min-width: 150px; }
/* abas Mês | Ano e visão do ano */
.abas-visao { display: inline-flex; background: #E7ECE9; border-radius: 12px; padding: 4px; gap: 4px; align-self: flex-start; }
.aba { border: 0; background: none; border-radius: 9px; padding: 8px 22px; font: inherit; font-weight: 700; color: var(--tinta-2); cursor: pointer; }
.aba.ativa { background: var(--branco); color: var(--tinta); box-shadow: 0 1px 4px rgba(15,31,28,0.12); }
.meses-barras.doze { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; }
.b-ant, .l-ant { background: #C9D3CF; }
.mes-col.apagada { opacity: 0.4; }
/* pagamentos da equipe */
.pessoa-pag { gap: 10px; }
.pp-falta { display: flex; flex-direction: column; align-items: flex-end; }
.pp-falta small { font-size: 11px; color: var(--cinza); }
.pp-falta b { font-family: var(--titulo); font-size: 22px; }
.pp-numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; background: var(--chao); border-radius: 12px; padding: 10px; }
.pp-numeros div { display: flex; flex-direction: column; }
.pp-numeros small { font-size: 11px; color: var(--cinza); }
.pp-detalhe { margin: 0; font-size: 12px; }
.pp-hist { border-top: 1px solid var(--linha); padding-top: 8px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.pc-app .pessoa-pag { max-width: none; }
.pc-app .pagina:has(.pessoa-pag) .conteudo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.pc-app .pagina:has(.pessoa-pag) .conteudo > .kpis, .pc-app .pagina:has(.pessoa-pag) .conteudo > p { grid-column: 1 / -1; }
fieldset.modulos { border: 1px solid var(--linha); border-radius: 12px; padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; }
fieldset.modulos legend { font-weight: 800; padding: 0 6px; }
/* campos do lançamento pessoal só aparecem quando "De quem é" = Pessoal */
.so-pessoal { display: none; }
form:has(#f-lcentro option[value="Pessoal"]:checked) .so-pessoal { display: grid; }
form:has(#f-lcentro option[value="Pessoal"]:checked) #f-lcat { opacity: 0.4; }
/* finanças pessoais */
.acoes-pessoal { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; }
.acoes-pessoal .btn { min-height: 46px; font-size: 14px; padding: 0 8px; }
.conta-p { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--linha); }
.conta-p.atrasada b { color: var(--vermelho); }
.cp-dir { display: flex; align-items: center; gap: 8px; text-align: right; }
.cp-dir small { display: block; }
.barra-h.orc .trilho-h i.quase { background: var(--ambar); }
.barra-h.orc .trilho-h i.estourou { background: #D64545; }
.orc-input { width: 110px; height: 30px; border: 1px solid var(--linha-2); border-radius: 8px; padding: 0 8px; font: inherit; text-align: right; }
@media (max-width: 420px) { .acoes-pessoal { grid-template-columns: 1fr 1fr; } .acoes-pessoal .btn-primario { grid-column: 1 / -1; } }
.linha-form { display: flex; gap: 8px; }
.linha-form input { flex: 1; min-width: 0; height: 44px; border: 1px solid var(--linha-2); border-radius: 10px; padding: 0 12px; font: inherit; }
/* menu do computador: cabe na altura da janela (rola se precisar) e fica mais compacto */
.pc-menu { height: 100vh; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; padding: 14px 10px 12px; gap: 1px; scrollbar-width: thin; scrollbar-color: #3A4D47 transparent; }
.pc-menu .pc-item { padding: 7px 12px; font-size: 14px; border-radius: 9px; }
.pc-menu .pc-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.pc-menu .pc-grupo { padding: 10px 12px 2px; }
.pc-menu .pc-empresa { padding: 2px 10px 8px; font-size: 13px; }
.pc-menu .pc-voltar { margin-top: auto; border-top: 1px solid #23362F; padding-top: 10px; border-radius: 0; }
@media (max-height: 760px) { .pc-menu .pc-item { padding: 5px 12px; } .pc-menu .pc-grupo { padding: 6px 12px 1px; } .pc-menu .pc-marca { display: none; } }
/* finanças pessoais: contas e importação de extrato */
.conta-banco .pp-falta { text-align: right; }
.conta-banco .pp-falta small { display: block; color: var(--tinta-2); font-size: 12px; }
.conta-banco .acoes-duplas { margin-top: 10px; }
.lanc.neutro { opacity: .7; }
.lista-imp { display: flex; flex-direction: column; gap: 6px; }
.imp-linha { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: start; background: #fff; border: 1px solid var(--linha); border-radius: 12px; padding: 10px; }
.imp-linha.pulada { opacity: .55; }
.imp-linha .item-corpo b { font-size: 14px; word-break: break-word; }
.imp-linha .sel-cat { margin-top: 6px; max-width: 100%; }
.imp-check input { width: 20px; height: 20px; accent-color: var(--tinta); margin-top: 2px; }
.pc-app .lista-imp { max-width: 980px; }
/* ===== áreas do app (sistema, negócio, pessoal) ===== */
.tela-areas { min-height: 100vh; min-height: 100dvh; background: var(--tinta); color: var(--chao); display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.areas-caixa { width: 100%; max-width: 520px; }
.areas-marca { margin-bottom: 18px; }
.tela-areas h1 { font-family: var(--titulo); font-size: 26px; line-height: 1.2; margin: 0 0 18px; }
.areas-lista { display: flex; flex-direction: column; gap: 12px; }
.area-btn { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 18px 16px; border-radius: 18px; border: 1px solid #2C403A; background: #17302A; color: var(--chao); font: inherit; cursor: pointer; transition: transform .12s, border-color .12s, background .12s; }
.area-btn:hover, .area-btn:focus-visible { border-color: var(--amarelo); background: #1C3A33; transform: translateY(-1px); }
.area-btn.atual { border-color: var(--amarelo); }
.area-ic { width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; background: var(--amarelo); color: var(--tinta); flex-shrink: 0; }
.area-pessoal .area-ic { background: #F5B83D; }
.area-sistema .area-ic { background: #AFC3F5; }
.area-txt { flex: 1; min-width: 0; }
.area-txt b { display: block; font-size: 18px; }
.area-txt small { color: #9FB3AC; font-size: 13px; }
.areas-rodape { display: flex; justify-content: space-between; margin-top: 22px; }
.tela-areas .link { color: #AFC3F5; background: none; border: 0; font: inherit; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.gaveta-area { display: block; padding: 0 12px 8px; color: var(--cinza); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.gaveta-troca { margin-top: 8px; border-top: 1px solid var(--linha); border-radius: 0; color: var(--azul); }
.pc-menu .pc-troca { margin-top: auto; border-top: 1px solid #23362F; padding-top: 10px; border-radius: 0; color: #AFC3F5; }
.pc-menu .pc-troca + .pc-voltar { margin-top: 0; border-top: 0; padding-top: 7px; }
/* pessoal: atalhos do início */
.atalhos-p { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.atalho-p { display: flex; gap: 10px; align-items: flex-start; padding: 14px 12px; background: var(--branco); border: 1px solid var(--linha); border-radius: 14px; color: var(--tinta); text-decoration: none; }
.atalho-p:hover { border-color: var(--tinta-2); }
.atalho-p.atalho-alerta { border-color: #E9A3A3; background: var(--vermelho-claro); }
.atalho-ic { width: 38px; height: 38px; border-radius: 10px; background: var(--amarelo-claro); display: grid; place-items: center; flex-shrink: 0; }
.atalho-p b { display: block; font-size: 14px; }
.atalho-p small { display: block; font-size: 12px; }
a.kpi { color: inherit; text-decoration: none; }
.pc-app .atalhos-p { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* acessos ao app */
table.acessos th.centro, table.acessos td.centro { text-align: center; }
table.acessos th { font-size: 12px; white-space: normal; max-width: 110px; }
table.acessos select { height: 34px; border: 1px solid var(--linha-2); border-radius: 8px; padding: 0 6px; font: inherit; }
.chk-tela { width: 20px; height: 20px; accent-color: var(--tinta); cursor: pointer; }
.linha-cinza td { color: var(--cinza); }
.telas-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chip-tela { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--linha-2); border-radius: 18px; font-size: 13px; font-weight: 700; background: var(--branco); }
.chip-tela input { accent-color: var(--tinta); }
/* gestão do sistema */
.chips-rolar { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
.chips-rolar .chip { white-space: nowrap; }
.sis-kpis { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.sis-graficos { display: grid; grid-template-columns: 1fr; gap: 14px; }
.pc-app .sis-graficos { grid-template-columns: 1fr 1fr; }
.lista-alertas { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.sis-graficos .hb-nome { text-transform: none; }
.acoes-mini { display: inline-flex; gap: 6px; align-items: center; }
.cliente-card .linha-entre + .linha-entre { margin-top: 8px; }
/* fechamento do dia */
.separar { display: flex; flex-direction: column; gap: 2px; background: var(--ambar-claro); border: 1px solid #F0D48A; border-radius: 14px; padding: 12px 14px; margin: 8px 0 12px; }
.separar b { font-family: var(--titulo); font-size: 26px; }
.separar span, .separar small { font-size: 13px; color: var(--tinta-2); }
.lista-simples .linha-entre.total { border-top: 1px solid var(--linha); padding-top: 8px; margin-top: 4px; font-weight: 800; }
.tabela-clic tbody tr { cursor: pointer; }
.tabela-clic tbody tr:hover td { background: var(--chao); }
.tabela-clic tbody tr.escolhida td { background: var(--amarelo-claro); }
.inp-mini { width: 80px; height: 34px; border: 1px solid var(--linha-2); border-radius: 8px; padding: 0 8px; font: inherit; text-align: right; }
.inp-conta { width: 100%; min-width: 120px; height: 34px; border: 1px solid var(--linha-2); border-radius: 8px; padding: 0 8px; font: inherit; }
.folha-larga { max-width: 760px; }
button.alerta { width: 100%; text-align: left; font: inherit; cursor: pointer; }
/* a receber */
.grupo-cli { width: 100%; background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.linha-receber { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--linha); }
.linha-receber input { width: 20px; height: 20px; accent-color: var(--tinta); }
.barra-selecao { position: sticky; top: 8px; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--tinta); color: var(--chao); border-radius: 14px; padding: 10px 12px; }
.barra-selecao .btn-mini { background: transparent; color: var(--chao); border-color: #3A4D47; }
.barra-selecao { flex-wrap: wrap; } .barra-selecao .acoes-mini { flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
/* botões de lançar: áudio em destaque, o último sozinho ocupa a linha toda */
.lancar-grade > .lancar-btn:last-child:nth-child(even) { grid-column: 1 / -1; min-height: 0; }
.lancar-btn.principal { padding: 22px 18px; }
.lancar-btn.principal .lancar-ic { font-size: 34px; }
.lancar-btn.principal b { font-size: 22px; }
.pc-app .lancar-grade { grid-template-columns: 2fr repeat(4, minmax(0, 1fr)); }
.pc-app .lancar-grade > .lancar-btn:last-child:nth-child(even) { grid-column: auto; }
/* retiradas ligadas a gastos pessoais */
.ret-linha { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-top: 1px solid var(--linha); }
.ret-linha .acoes-mini { justify-content: flex-start; }
.lista-ligar { max-height: 50vh; overflow-y: auto; }
.total-ligar { padding: 10px 0; border-top: 1px solid var(--linha); }
/* possíveis duplicados no caixa */
.cartao-alerta { border-color: #F0D48A; background: var(--ambar-claro); }
.par-dup { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid #F0D48A; }
.par-linhas { display: flex; flex-direction: column; gap: 2px; font-size: 14px; min-width: 0; }
@media (max-width: 600px) { .par-dup { grid-template-columns: 1fr; } }
.tabela-imp tr.pulada td { opacity: .5; }
.saldo-contas .saldo-linha{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 0;border-top:1px solid var(--borda,#e5e5e5);flex-wrap:wrap}
.saldo-contas .saldo-linha small{display:block}
.saldo-contas .form-linha{display:grid;gap:8px;padding:8px 0}
.saldo-contas .confere{background:#fff7e0;border-radius:10px;padding:10px;margin:4px 0 8px;font-size:14px}
.saldo-contas .confere.bateu{background:#e6f7ee}
.saldo-contas .confere small{display:block;margin-top:6px}
/* cadastro: para que vai usar */
.uso-escolha{border:0;padding:0;margin:0 0 4px;display:grid;gap:8px}
.uso-escolha legend{font-weight:600;font-size:14px;margin-bottom:8px;padding:0}
.uso-op{display:flex;gap:10px;align-items:flex-start;border:1.5px solid var(--linha-2);border-radius:12px;padding:10px 12px;cursor:pointer}
.uso-op input{margin-top:3px;accent-color:var(--amarelo)}
.uso-op span{display:grid;gap:2px}
.uso-op small{color:var(--cinza);font-size:13px}
.uso-op.ativo{border-color:var(--amarelo);background:var(--amarelo-claro)}
.obs-lanc,.motivo-aporte{display:block;color:var(--tinta-2);font-size:13px;margin-top:2px}
/* atendimento no WhatsApp */
.grade-2-larga{display:grid;gap:16px}
@media (min-width:1000px){.grade-2-larga{grid-template-columns:1fr 1fr;align-items:start}}
.chat{display:flex;flex-direction:column;gap:6px;max-height:420px;overflow:auto;padding:8px;background:var(--chao);border-radius:12px;margin:8px 0}
.bolha{max-width:85%;padding:8px 12px;border-radius:14px;font-size:14px;line-height:1.35;white-space:pre-wrap;background:var(--branco);border:1px solid var(--linha)}
.bolha small{display:block;font-size:11px;color:var(--cinza);margin-top:3px}
.bolha-cli{align-self:flex-end;background:var(--amarelo-claro);border-color:transparent}
.bolha-equipe{align-self:flex-start;background:var(--azul-claro);border-color:transparent}
.passos-lista{padding-left:18px;display:grid;gap:8px;font-size:14px}
.passos-lista code,.conteudo code{background:var(--chao);padding:1px 5px;border-radius:6px;font-size:12px;word-break:break-all}
.tags-linha{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.conversa-item{width:100%;text-align:left;padding:10px 6px;border:0;border-top:1px solid var(--linha);border-radius:0;background:none;color:inherit;font:inherit;cursor:pointer}
.conversa-item.ativa{background:var(--chao)}
.conversa-aberta{border-top:2px solid var(--linha-2);margin-top:8px;padding-top:10px}
.cel-presenca{border:1px dashed var(--linha-2);background:none;border-radius:8px;padding:3px 8px;min-width:64px;cursor:pointer;color:var(--cinza);font:inherit}
.cel-presenca.sim{border:1px solid transparent;color:inherit}
.cel-presenca:hover{border-color:var(--amarelo);background:var(--amarelo-claro)}

/* lançamento: "De quem é → Pessoal — minhas finanças" e conta com opção "Outra…" */
.so-minhas { display: none; }
form:has(#f-lcentro option[value="__pessoal"]:checked) .so-minhas { display: block; }
form:has(#f-lcentro option[value="__pessoal"]:checked) .campo:has(#f-lcat),
form:has(#f-lcentro option[value="__pessoal"]:checked) .campo-conta,
form:has(#f-lcentro option[value="__pessoal"]:checked) .so-empresa { display: none; }
.conta-outra { display: none; margin-top: 6px; }
.campo-conta:has(option[value="__outra"]:checked) .conta-outra { display: block; }

/* finanças pessoais: gráficos do início */
.dash-p { display: grid; gap: 12px; }
.pc-app .dash-p { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.cat-pesos { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.cat-peso { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; }
.cat-peso .cp-dir { display: flex; flex-direction: column; align-items: flex-end; }
.cat-peso .trilho-h { grid-column: 1 / -1; }
.mm-graf { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; align-items: end; margin-top: 8px; }
.mm-col { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.mm-col b { font-size: 0.78rem; text-transform: capitalize; }
.mm-col small { font-size: 0.68rem; white-space: nowrap; }
.mm-col.atual b { text-decoration: underline; }
.mm-barras { height: 130px; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.mm-barras span { width: 40%; max-width: 18px; border-radius: 4px 4px 0 0; min-height: 2px; }
.mm-ent { background: #3DD39B; }
.mm-gas { background: #E07A5F; }
.mm-legenda { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; font-size: 0.8rem; align-items: center; }
.mm-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: -1px; }
.sub-titulo { font-size: 0.95rem; margin: 14px 0 6px; }
.dash-p .hb-nome { text-transform: none; }

/* troca de aba: a tela anterior fica (meio apagada) e uma barrinha corre no topo até a nova ficar pronta */
body.navegando #app { pointer-events: none; }
body.navegando #app > * { opacity: 0.55; transition: opacity 0.15s 0.12s; }
body.navegando::before { content: ''; position: fixed; top: 0; left: 0; height: 3px; width: 35%; z-index: 9999; background: #3DD39B; border-radius: 0 3px 3px 0; animation: barra-nav 0.9s ease-in-out infinite; }
@keyframes barra-nav { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }
@media (prefers-reduced-motion: reduce) { body.navegando::before { animation: none; width: 100%; opacity: 0.6; } }
/* campo de senha com botão de mostrar */
.senha-caixa { position: relative; display: block; }
.senha-caixa input { width: 100%; padding-right: 46px; }
.senha-olho { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; display: grid; place-items: center; background: none; border: 0; color: var(--cinza, #666); cursor: pointer; border-radius: 8px; }
.senha-olho:hover, .senha-olho:focus-visible { color: inherit; background: rgba(0,0,0,0.05); }

/* site da empresa (editor) */
.site-links { margin: 4px 0 12px; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; word-break: break-all; }
.temas { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-bottom: 12px; }
.tema-op { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 2px solid var(--linha, #e5e5e5); border-radius: 12px; cursor: pointer; font-weight: 700; font-size: 14px; }
.tema-op:has(input:checked) { border-color: var(--tinta); }
.tema-op input { position: absolute; opacity: 0; pointer-events: none; }
.tema-cores { display: flex; height: 22px; border-radius: 6px; overflow: hidden; border: 1px solid rgba(0,0,0,0.08); }
.tema-cores i { flex: 1; }
.site-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.site-foto { display: flex; flex-direction: column; gap: 6px; }
.site-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; background: #eee; }
.site-foto input { font-size: 13px; padding: 6px 8px; border: 1px solid #ddd; border-radius: 8px; }
.site-foto.nova { aspect-ratio: 4 / 3; border: 2px dashed #ccc; border-radius: 10px; align-items: center; justify-content: center; cursor: pointer; color: var(--cinza); font-weight: 700; font-size: 14px; text-align: center; padding: 8px; }
.barra-salvar { position: sticky; bottom: 76px; z-index: 3; }
.pc-app .barra-salvar { bottom: 12px; }
.previa-site { position: fixed; inset: 3vh 3vw; z-index: 1001; background: #fff; border-radius: 16px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.35); }
.previa-site > .linha-entre { padding: 8px 8px 8px 16px; border-bottom: 1px solid #eee; }
.previa-site iframe { flex: 1; width: 100%; border: 0; }