/* ---- temas: o app escolhe (claro/escuro e a cor) em tema.js e grava em <html data-tema data-cor> ---- */


:root {


  color-scheme: light;


  --verde: #15803d;                                              /* cor de destaque (botoes) */


  --verde-claro: color-mix(in srgb, var(--verde) 14%, #ffffff);  /* fundo suave da cor */


  --verde-texto: var(--verde);                                   /* a cor quando usada como TEXTO */


  --sobre-acento: #ffffff;                                       /* texto em cima da cor de destaque */


  --fundo: #f4f7f5;


  --cartao: #ffffff;


  --campo: #ffffff;


  --campo-off: #eef2ef;


  --texto: #1d2b24;


  --texto-suave: #5b6b63;


  --borda: #d6e0da;


  --erro: #b3261e;


  --erro-fundo: #fdecea;


  --ok: #1a9c4a;


  --ponto-off: #aab5af;


}


html[data-cor="azul"] { --verde: #1e4fd8; }


html[data-cor="roxo"] { --verde: #7c3aed; }


html[data-cor="laranja"] { --verde: #c2410c; }


html[data-cor="rosa"] { --verde: #be185d; }





html[data-tema="escuro"] {


  color-scheme: dark;


  --verde-claro: color-mix(in srgb, var(--verde) 30%, #18211c);


  --verde-texto: color-mix(in srgb, var(--verde) 42%, #ffffff);


  --fundo: #0e1512;


  --cartao: #18211c;


  --campo: #101814;


  --campo-off: #1a241e;


  --texto: #e8f0eb;


  --texto-suave: #9fb2a7;


  --borda: #2b3a32;


  --erro: #ff8a80;


  --erro-fundo: #3a1d1b;


  --ok: #4ade80;


  --ponto-off: #5a6a61;


}





* { box-sizing: border-box; }





html, body { margin: 0; min-height: 100%; }





body {


  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;


  background: var(--fundo);


  color: var(--texto);


  -webkit-text-size-adjust: 100%;


  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);


}





#app { max-width: 480px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }





h1 { font-size: 1.5rem; margin: 0 0 4px; }


h2 { font-size: 1.1rem; margin: 0 0 8px; }


p { margin: 0 0 12px; }





.tela { flex: 1; padding: 20px 16px 96px; }


.centro { text-align: center; }


.logo { width: 88px; height: 88px; display: block; margin: 8px auto 8px; }


.suave { color: var(--texto-suave); font-size: 0.9rem; }





/* campos */


.campo { margin-bottom: 14px; }


.campo label { display: block; font-weight: 600; font-size: 0.92rem; margin-bottom: 4px; }


.campo input[type="text"], .campo input[type="email"], .campo input[type="tel"], .campo input[type="password"] {


  width: 100%; font: inherit; font-size: 16px; /* 16px: o iPhone nao da zoom ao tocar */


  padding: 12px; border: 1px solid var(--borda); border-radius: 10px; background: var(--campo); color: var(--texto);


}


.campo input:focus { outline: 2px solid var(--verde); outline-offset: 0; border-color: var(--verde); }


.campo input:disabled { background: var(--campo-off); color: var(--texto-suave); }


.campo .dica { display: block; margin-top: 4px; font-size: 0.82rem; color: var(--texto-suave); }


.prefixo { display: flex; align-items: center; border: 1px solid var(--borda); border-radius: 10px; background: var(--campo); }


.prefixo:focus-within { outline: 2px solid var(--verde); border-color: var(--verde); }


.prefixo span { padding-left: 12px; font-weight: 700; color: var(--texto-suave); }


.prefixo input { border: 0 !important; outline: none !important; border-radius: 0 10px 10px 0 !important; }





/* botoes */


.botao {


  display: block; width: 100%; font: inherit; font-weight: 700; font-size: 1rem; min-height: 48px;


  padding: 12px 16px; border: 0; border-radius: 12px; background: var(--verde); color: var(--sobre-acento); cursor: pointer;


}


.botao:disabled { opacity: 0.6; cursor: default; }


.botao.claro { background: var(--verde-claro); color: var(--verde-texto); }


.botao.perigo { background: var(--cartao); color: var(--erro); border: 1px solid var(--erro); }


.link { background: none; border: 0; padding: 12px 0; font: inherit; color: var(--verde-texto); font-weight: 700; cursor: pointer; width: 100%; }





.erro { background: var(--erro-fundo); color: var(--erro); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; font-size: 0.92rem; }


.aviso-ok { background: var(--verde-claro); color: var(--verde-texto); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; font-size: 0.92rem; }





/* foto */


.avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--verde-claro); border: 2px solid var(--borda); }


.avatar.grande { width: 96px; height: 96px; }


.foto-escolha { display: flex; align-items: center; gap: 14px; }


.foto-escolha input[type="file"] { font-size: 0.9rem; max-width: 100%; }





/* cartoes */


.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: 16px; padding: 16px; margin-bottom: 14px; }


.codigo { font-size: 2.4rem; font-weight: 800; letter-spacing: 0.12em; color: var(--verde-texto); text-align: center; margin: 6px 0; font-variant-numeric: tabular-nums; }





.topo { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--cartao); border-bottom: 1px solid var(--borda); }


.topo .quem { font-weight: 700; }


.topo .quem small { display: block; font-weight: 400; color: var(--texto-suave); }





/* barra de baixo */


.abas { position: fixed; left: 0; right: 0; bottom: 0; background: var(--cartao); border-top: 1px solid var(--borda); display: flex; justify-content: center; padding-bottom: env(safe-area-inset-bottom); }


.abas .grupo { display: flex; width: 100%; max-width: 480px; }


.abas button { flex: 1; font: inherit; background: none; border: 0; padding: 12px 8px; min-height: 56px; color: var(--texto-suave); font-weight: 600; cursor: pointer; }


.abas button.ativa { color: var(--verde-texto); box-shadow: inset 0 3px 0 var(--verde); }





/* servidor online */


.servidor { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--texto-suave); margin: 14px 0; }


.bolinha { width: 10px; height: 10px; border-radius: 50%; background: var(--ponto-off); }


.bolinha.on { background: var(--ok); }


.bolinha.off { background: var(--erro); }





.bloqueado { opacity: 0.6; pointer-events: none; }





/* ---- etapa 2: conectados e pedidos ---- */


.painel { background: var(--cartao); border: 3px solid var(--borda); border-radius: 16px; padding: 14px; margin-bottom: 14px; }


.painel.verde { border-color: var(--ok); }


.painel.vermelho { border-color: var(--erro); }


.painel h2 { margin-bottom: 4px; }





.pessoa { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 12px 0; border-top: 1px solid var(--borda); }


.painel h2 + .pessoa { border-top: 0; }


.pessoa .nome { flex: 1; min-width: 0; font-weight: 700; word-break: break-all; }


.pessoa .nome small { display: block; font-weight: 400; color: var(--texto-suave); word-break: normal; }


.pessoa .acoes { display: flex; flex-wrap: wrap; gap: 8px; flex-basis: 100%; }


.pessoa .conferencia { flex-basis: 100%; }


.conferencia small { display: block; color: var(--texto-suave); font-size: 0.82rem; margin-top: 4px; }





.avatar-box { position: relative; width: 44px; height: 44px; flex: none; }


.avatar-box .avatar { display: block; }


.ponto { position: absolute; right: -1px; bottom: -1px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--cartao); background: var(--ponto-off); }


.ponto.on { background: var(--ok); }
.ponto.off { background: var(--erro); }   /* conectado, mas fora do app agora: vermelho */





.botao.mini { display: inline-block; width: auto; min-height: 40px; padding: 8px 14px; font-size: 0.9rem; }


.botao.verde { background: var(--verde); color: var(--sobre-acento); }


.botao.espaco { margin-bottom: 10px; }


.botao.perigo.mini { background: var(--cartao); }





.marca { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; font-size: 0.92rem; font-weight: 600; cursor: pointer; }


.marca input { width: 22px; height: 22px; flex: none; margin: 1px 0 0; accent-color: var(--verde); }


.marca small { display: block; font-weight: 400; color: var(--texto-suave); font-size: 0.82rem; margin-top: 2px; }





.campo-conferencia { width: 100%; font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 10px; letter-spacing: 0.2em; background: var(--campo); color: var(--texto); }


.conf-numero { font-size: 1.8rem; font-weight: 800; letter-spacing: 0.25em; color: var(--verde-texto); margin-top: 6px; font-variant-numeric: tabular-nums; }





/* ---- etapa 3: envio e recebimento ---- */


.anel { position: absolute; left: -6px; top: -6px; width: calc(100% + 12px); height: calc(100% + 12px); pointer-events: none; }


.anel-fundo { fill: none; stroke: rgba(37, 99, 235, 0.18); stroke-width: 3; }


.anel-valor { fill: none; stroke: #2563eb; stroke-width: 3; stroke-linecap: round; transition: stroke-dashoffset 0.15s linear; }


.anel-check { fill: none; stroke: #fff; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }


.anel.pronto .anel-fundo { fill: rgba(37, 99, 235, 0.7); stroke: #2563eb; }


.anel.pronto .anel-check { opacity: 1; }





.estado { display: block; margin-top: 4px; font-weight: 600; color: #2563eb; word-break: normal; }


.estado.ok { color: var(--ok); }


.estado.erro { color: var(--erro); }


.controle { margin-top: 6px; }


.controle:empty { display: none; }





.selo { display: inline-block; min-width: 20px; margin-left: 6px; padding: 1px 6px; border-radius: 10px; background: #d92d20; color: #fff; font-size: 0.78rem; line-height: 18px; text-align: center; }


.selo[hidden] { display: none; }





.estado[hidden] { display: none; }





/* ---- ajuste da foto (recorte com zoom) ---- */


.avatar.clicavel { cursor: pointer; }


.recorte-fundo { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; padding: 16px; overflow-y: auto; }


.recorte-caixa { background: var(--cartao); border-radius: 16px; padding: 18px 16px; width: 100%; max-width: 360px; text-align: center; }


.recorte-caixa h2 { margin-bottom: 4px; }


.recorte-janela { position: relative; width: min(300px, 100%); aspect-ratio: 1 / 1; margin: 12px auto; overflow: hidden; background: #222; border-radius: 12px; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }


.recorte-janela:active { cursor: grabbing; }


.recorte-img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; -webkit-user-drag: none; }


.recorte-mascara { position: absolute; left: 20px; top: 20px; width: 260px; height: 260px; border-radius: 50%; /* tamanho real ajustado pelo app */ border: 2px solid #fff; box-shadow: 0 0 0 400px rgba(0, 0, 0, 0.55); pointer-events: none; }


.recorte-zoom-linha { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-weight: 800; font-size: 1.3rem; color: var(--texto-suave); }


.recorte-zoom { flex: 1; accent-color: var(--verde); height: 32px; }


.recorte-botoes { display: flex; gap: 10px; }


.recorte-botoes .botao { flex: 1; }





/* ---- etapa 4: logo, aparencia e instalar ---- */


.topo .logo-mini { width: 30px; height: 30px; margin-left: auto; flex: none; }


.logo-grande { width: 96px; height: 96px; display: block; margin: 8px auto; }
.aviso-mudanca { background: var(--verde-claro); border: 1px solid var(--verde); border-radius: 14px; padding: 12px 14px; margin: 0 0 12px; font-size: 0.9rem; }
.aviso-mudanca p { margin: 4px 0 10px; }
.aviso-mudanca .botao { display: inline-block; width: auto; text-decoration: none; text-align: center; }
.aviso-mudanca details { margin-top: 10px; }
.aviso-mudanca summary { cursor: pointer; font-weight: 700; color: var(--verde-texto); padding: 4px 0; }
.aviso-mudanca .mudanca-grupo { margin-top: 8px; }
.aviso-mudanca ol { margin: 4px 0 0; padding-left: 20px; }
.aviso-mudanca li { margin: 4px 0; }
.logo-completo { display: block; width: min(260px, 80%); height: auto; margin: 8px auto 14px; }





.tema-botoes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }


.botao.ativo { box-shadow: 0 0 0 3px var(--verde-texto); }


.cores { display: flex; flex-wrap: wrap; gap: 12px; }


.cor-bolinha { width: 40px; height: 40px; border-radius: 50%; border: 3px solid transparent; padding: 0; cursor: pointer; background: var(--verde); }


.cor-bolinha.ativa { border-color: var(--texto); }


.cor-verde { background: #15803d; }


.cor-azul { background: #1e4fd8; }


.cor-roxo { background: #7c3aed; }


.cor-laranja { background: #c2410c; }


.cor-rosa { background: #be185d; }





.passos { margin: 0 0 12px; padding-left: 22px; }


.passos li { margin-bottom: 8px; line-height: 1.4; }


.chave-caixa { word-break: break-all; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.85rem; background: var(--campo-off); border-radius: 10px; padding: 10px 12px; margin: 8px 0; user-select: all; }





.senha-com-olho { position: relative; }


.senha-com-olho input { padding-right: 48px; }


.senha-com-olho .olho { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; background: transparent; font-size: 1.3rem; cursor: pointer; opacity: 0.55; border-radius: 8px; }


.senha-com-olho .olho.ligado { opacity: 1; background: color-mix(in srgb, var(--verde) 18%, transparent); }


.senha-com-olho .olho:focus-visible { outline: 2px solid var(--verde); }





.versao { text-align: center; font-size: 0.75rem; color: var(--texto-suave); margin: 12px 0 90px; opacity: 0.8; }



/* ---- enviar/receber link ou texto ---- */

.texto-caixa { max-width: 420px; text-align: left; }

.texto-campo { display: block; width: 100%; min-height: 120px; margin: 8px 0 4px; padding: 10px 12px; font: inherit; font-size: 16px; border: 1px solid var(--borda); border-radius: 10px; background: var(--campo); color: var(--texto); resize: vertical; }

.texto-campo:focus { outline: 2px solid var(--verde); outline-offset: 0; border-color: var(--verde); }

.texto-recebido { flex-basis: 100%; white-space: pre-wrap; overflow-wrap: anywhere; padding: 10px 12px; font-weight: 400; background: var(--campo); border: 1px solid var(--borda); border-radius: 10px; }

.texto-caixa .recorte-botoes { margin-top: 12px; }

.texto-oculto { position: fixed; left: -9999px; top: 0; font-size: 16px; }
.previa-enviado { display: block; flex-basis: 100%; max-width: 100%; max-height: 320px; object-fit: contain; border-radius: 10px; background: var(--campo); }
.pessoa .nome small { overflow-wrap: anywhere; }

/* ---- Wiki-Acessor (assessor financeiro) ---- */
.ponto.cinza { background: var(--ponto-off); }
.pessoa.assessor { background: var(--verde-claro); border-radius: 12px; padding: 12px; border-top: 0; margin: 6px 0; }
.campo select, .campo input[type="date"], .campo input[type="time"], .campo input[type="month"], .filtros select, .filtros input {
  width: 100%; font: inherit; font-size: 16px; padding: 12px; border: 1px solid var(--borda); border-radius: 10px; background: var(--campo); color: var(--texto);
}
.linha-botoes { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.link-curto { background: none; border: 0; padding: 4px 0; font: inherit; font-weight: 700; color: var(--verde-texto); cursor: pointer; text-decoration: underline; }
a.botao.mini { text-decoration: none; text-align: center; }

.subabas { display: flex; gap: 6px; margin-bottom: 14px; overflow-x: auto; }
.subabas button { flex: 1 1 0; min-width: 0; font: inherit; font-size: 0.82rem; font-weight: 700; padding: 10px 2px; min-height: 44px; border: 1px solid var(--borda); border-radius: 12px; background: var(--cartao); color: var(--texto-suave); cursor: pointer; white-space: nowrap; }
.subabas button.ativa { background: var(--verde); border-color: var(--verde); color: var(--sobre-acento); }

.status-assessor { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; margin-bottom: 14px; font-weight: 600; font-size: 0.92rem; background: var(--campo-off); color: var(--texto-suave); }
.status-assessor.ligado { background: var(--verde-claro); color: var(--verde-texto); }
.ponto-inline { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--ponto-off); }
.ponto-inline.on { background: var(--ok); }

.grupo-catalogo { border: 0; padding: 0; margin: 0 0 12px; }
.grupo-catalogo legend { font-weight: 700; font-size: 0.92rem; color: var(--verde-texto); padding: 0; margin-bottom: 6px; }
.grade-marcas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.marca-item { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; padding: 8px 10px; border: 1px solid var(--borda); border-radius: 10px; background: var(--campo); cursor: pointer; }
.marca-item input { width: 20px; height: 20px; flex: none; accent-color: var(--verde); }

.filtros { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.filtros .botao { grid-column: 1 / -1; }
.resumo { display: flex; justify-content: space-between; gap: 8px; text-align: center; }
.resumo small { display: block; color: var(--texto-suave); }
.pos { color: var(--ok); }
.neg { color: var(--erro); }
.lanc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 12px 0; border-top: 1px solid var(--borda); }
.lanc-info { flex: 1 1 140px; min-width: 0; }
.lanc-nome { font-weight: 700; }
.lanc-info small { display: block; color: var(--texto-suave); overflow-wrap: anywhere; }
.lanc-valor { font-weight: 800; font-variant-numeric: tabular-nums; }
.lanc-acoes { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px; }
.titulo-conta { margin: 4px 0 8px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rotulo-conta { display: inline-block; padding: 6px 14px; border-radius: 99px; background: var(--verde); color: var(--sobre-acento); font-size: 0.9rem; font-weight: 700; }
.tag { margin-left: 8px; font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--erro-fundo); color: var(--erro); vertical-align: middle; }
.aviso-ok.conferir { background: var(--erro-fundo); color: var(--erro); margin-top: 10px; }

.barra-ano { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.barra-ano strong { font-size: 1.1rem; }
.barra-ano .verde { margin-left: auto; }
.planilha-rolagem { overflow: auto; max-height: calc(100vh - 260px); max-height: calc(100dvh - 260px); min-height: 220px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; border: 1px solid var(--borda); border-radius: 12px; }
table.planilha { border-collapse: collapse; width: max-content; min-width: 100%; font-size: 0.76rem; font-variant-numeric: tabular-nums; }
table.planilha th, table.planilha td { padding: 5px 7px; border-bottom: 1px solid var(--borda); white-space: nowrap; }
table.planilha thead th { background: var(--verde); color: var(--sobre-acento); text-align: center; position: sticky; top: 0; }
table.planilha tbody th { text-align: left; font-weight: 600; position: sticky; left: 0; background: var(--cartao); min-width: 120px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
table.planilha td.num { text-align: right; }
table.planilha td.total { font-weight: 800; border-left: 1px solid var(--borda); }
table.planilha td.neg { color: var(--erro); }
table.planilha tbody tr:nth-child(even) > * { background: color-mix(in srgb, var(--texto) 4%, var(--cartao)); }
table.planilha tr.bloco th { background: var(--verde-claro); color: var(--verde-texto); letter-spacing: 0.06em; font-size: 0.78rem; }
table.planilha tr.grupo th, table.planilha tr.grupo td { background: color-mix(in srgb, var(--verde) 9%, var(--cartao)); font-weight: 700; }
table.planilha tr.item th { padding-left: 22px; font-weight: 400; }
table.planilha tr.soma th, table.planilha tr.soma td, table.planilha tr.resultado th, table.planilha tr.resultado td { background: var(--verde-claro); font-weight: 800; }

/* ---- Wiki-Acessor: agenda pessoal ---- */
.cal-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cal-nav strong { flex: 1; text-align: center; }
.cal-grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-semana { text-align: center; font-size: 0.75rem; font-weight: 700; color: var(--texto-suave); padding: 4px 0; }
.cal-dia { font: inherit; aspect-ratio: 1 / 1; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 1px solid var(--borda); border-radius: 10px; background: var(--campo); color: var(--texto); cursor: pointer; padding: 2px; }
.cal-dia.hoje { border-color: var(--verde); font-weight: 800; }
.cal-dia.sel { background: var(--verde); border-color: var(--verde); color: var(--sobre-acento); }
.cal-pontos { display: flex; gap: 2px; min-height: 6px; }
.cal-pontos i { width: 6px; height: 6px; border-radius: 50%; background: var(--verde); }
.cal-dia.sel .cal-pontos i { box-shadow: 0 0 0 1.5px var(--sobre-acento); }
i.cor-verde, .cor-opcao.cor-verde { background: #15803d; } i.cor-azul, .cor-opcao.cor-azul { background: #1e4fd8; } i.cor-roxo, .cor-opcao.cor-roxo { background: #7c3aed; }
i.cor-laranja, .cor-opcao.cor-laranja { background: #c2410c; } i.cor-rosa, .cor-opcao.cor-rosa { background: #be185d; } i.cor-vermelho, .cor-opcao.cor-vermelho { background: #b3261e; }
.comp { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 0 10px 12px; border-top: 1px solid var(--borda); border-left: 5px solid var(--verde); margin-top: 6px; }
.comp.cor-borda-azul { border-left-color: #1e4fd8; } .comp.cor-borda-roxo { border-left-color: #7c3aed; } .comp.cor-borda-laranja { border-left-color: #c2410c; }
.comp.cor-borda-rosa { border-left-color: #be185d; } .comp.cor-borda-vermelho { border-left-color: #b3261e; }
.comp-info { flex: 1 1 160px; min-width: 0; }
.comp-hora { font-size: 0.8rem; font-weight: 700; color: var(--texto-suave); }
.comp-titulo { font-weight: 700; overflow-wrap: anywhere; }
.comp-info small { display: block; color: var(--texto-suave); overflow-wrap: anywhere; }
.comp-acoes { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px; }
.linha-botoes.cores { gap: 10px; }
.botao.mini.cor-opcao { width: 38px; height: 38px; min-height: 38px; padding: 0; flex: none; border-radius: 50%; color: #fff; }
.cor-opcao.marcada { box-shadow: 0 0 0 3px var(--cartao), 0 0 0 5px var(--texto); }

/* ---- campo de escolher foto nao pode ser mais largo que a tela (Meus dados e Configurar do assessor) ---- */
.foto-escolha { min-width: 0; }
.foto-escolha input[type="file"] { min-width: 0; flex: 1 1 0; width: 0; }

/* =====================================================================================================================
   COMPUTADOR: tela larga E mouse => layout de sistema (abas no topo, varias colunas, planilha e agenda grandes).
   Celular e tablet (toque) NAO entram aqui, mesmo com tela grande: continuam exatamente como antes. Largura estreita tambem nao.
   ===================================================================================================================== */
.agenda-duas { display: block; }
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  #app { max-width: 1280px; }
  #app:not(:has(nav.abas)) { max-width: 480px; }                 /* entrar, cadastrar, atalho: continuam na coluna estreita */
  .topo { padding: 14px 24px; }
  .tela { padding: 24px 24px 48px; }
  /* menu: abas no topo, como na clinica */
  .abas { position: sticky; top: 0; bottom: auto; order: -1; z-index: 20; justify-content: flex-start; border-top: 0; border-bottom: 1px solid var(--borda); padding-bottom: 0; }
  .abas .grupo { width: auto; max-width: none; padding: 0 16px; gap: 4px; }
  .abas button { flex: 0 0 auto; min-height: 54px; padding: 12px 24px; }
  .abas button:hover { background: var(--verde-claro); }
  .abas button.ativa { box-shadow: inset 0 -3px 0 var(--verde); }
  /* telas comuns (Inicio, Arquivos, Meus dados): cartoes em duas colunas */
  #app:has(nav.abas) main.tela:not(.largo) { column-count: 2; column-gap: 24px; }
  #app:has(nav.abas) main.tela:not(.largo) > * { break-inside: avoid; }
  /* assessor: largura total */
  .subabas { max-width: 720px; }
  .subabas button { font-size: 0.95rem; padding: 10px 14px; }
  table.planilha { font-size: 0.9rem; }
  table.planilha th, table.planilha td { padding: 9px 12px; }
  table.planilha tbody th { min-width: 230px; max-width: 280px; }
  .agenda-duas { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; align-items: start; }
  .cal-grade { gap: 6px; }
  .cal-dia { aspect-ratio: auto; min-height: 76px; font-size: 1rem; }
  .filtros { grid-template-columns: 240px 240px auto; }
  .filtros .botao { grid-column: auto; }
  .grade-marcas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lanc { flex-wrap: nowrap; }
  .lanc-info { flex: 1 1 auto; }
  .lanc-acoes { flex-basis: auto; flex-wrap: nowrap; }
  .comp-acoes { flex-basis: 100%; }
}

/* ---- assistente de voz do assessor (assessor-voz.js) */
.voz-abrir { width: 100%; margin: 0 0 12px; padding: 14px; font-size: 1.05rem; }
.voz-caixa { max-width: 520px; }
.voz-fala { font-size: 1.1rem; line-height: 1.4; margin: 6px 0 12px; font-weight: 600; }
.voz-opcoes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; max-height: 32vh; overflow-y: auto; }
.voz-opcao { flex: 0 1 auto; }
.voz-mic { width: 100%; padding: 16px; font-size: 1.1rem; margin: 4px 0; }
.voz-mic.ouvindo { animation: voz-pulso 1.2s ease-in-out infinite; }
.voz-mic.chamando { animation: voz-pulso 1.2s ease-in-out infinite; font-size: 1.25rem; padding: 20px; }   /* iPhone: pede o toque para ligar o microfone */
@keyframes voz-pulso { 0%, 100% { box-shadow: 0 0 0 0 rgba(21, 128, 61, 0.55); } 50% { box-shadow: 0 0 0 12px rgba(21, 128, 61, 0); } }
.voz-dica { min-height: 1.2em; margin: 6px 0; }
.voz-digitar { display: flex; gap: 8px; margin: 10px 0; }
.voz-texto { flex: 1; min-width: 0; padding: 10px; font-size: 16px; border: 1px solid var(--borda, #cbd5d0); border-radius: 10px; background: var(--fundo-campo, #fff); color: inherit; }
.voz-resultado[hidden] { display: none; }

/* app Assessor (/assessor/): opcoes escritas na tela inicial do app */
.assessor-app { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.assessor-opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.assessor-opcoes .botao { margin: 0; padding: 14px 8px; }
.assessor-instalar { border-top: 1px solid var(--borda, #cbd5d0); padding-top: 12px; }
.voz-ouvi { min-height: 1.2em; margin: 0 0 8px; font-size: 0.9rem; }
.assessor-login { display: flex; flex-direction: column; gap: 10px; }
.assessor-login input { width: 100%; font-size: 16px; padding: 12px; }
.voz-mic[hidden] { display: none; }
.voz-digitar[hidden] { display: none; }
.voz-ouvir-de-novo { align-self: flex-start; margin: 0 0 8px; }
.voz-ouvir-de-novo[hidden] { display: none; }

/* busca por telefone (v74) */
.resultado-busca { background: var(--verde-claro); color: var(--verde-texto); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; font-size: 0.92rem; }
.resultado-busca p { margin: 0 0 8px; }
a.botao { display: block; text-align: center; text-decoration: none; box-sizing: border-box; }

/* passo a passo dos atalhos (v75): "telas" desenhadas em CSS */
.guia-titulo { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.guia-titulo h2 { margin: 0; }
.guia-num { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--verde); color: var(--sobre-acento); font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.guia-tela { border: 2px solid var(--borda); border-radius: 18px; background: var(--fundo); padding: 0 0 10px; margin: 10px 0 12px; overflow: hidden; max-width: 340px; margin-left: auto; margin-right: auto; }
.guia-barra { background: var(--campo-off); color: var(--texto-suave); font-size: 0.78rem; font-weight: 700; text-align: center; padding: 8px 10px; margin-bottom: 8px; }
.guia-linha { position: relative; background: var(--cartao); border: 1px solid var(--borda); border-radius: 10px; margin: 6px 10px; padding: 9px 12px; font-size: 0.9rem; }
.guia-linha.fraco { background: transparent; border-color: transparent; color: var(--texto-suave); font-size: 0.8rem; }
.guia-linha.campo { font-family: ui-monospace, Menlo, Consolas, monospace; background: var(--campo-off); }
.guia-linha.alvo { border: 2px solid var(--verde); background: var(--verde-claro); color: var(--verde-texto); font-weight: 700; animation: guia-pulsa 1.6s ease-in-out infinite; }
.guia-dica { display: block; font-size: 0.72rem; font-weight: 700; margin-top: 2px; }
@keyframes guia-pulsa { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--verde) 45%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--verde) 0%, transparent); } }
@media (prefers-reduced-motion: reduce) { .guia-linha.alvo { animation: none; } }

/* assinatura: escolha mensal/anual lado a lado */
.grupo-botoes { display: flex; gap: 8px; margin: 10px 0; }
.grupo-botoes .botao { flex: 1; }

/* ---------- conversa (estilo WhatsApp): o que eu mando a direita, o que recebo a esquerda ---------- */
.clicavel { cursor: pointer; }
.chat { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; overscroll-behavior: none; }
.chat-topo { flex: none; z-index: 5; }
.chat-voltar { background: none; border: 0; font-size: 1.5rem; line-height: 1; padding: 4px 8px; color: var(--texto); cursor: pointer; }
.chat-corpo { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 12px 12px 8px; max-width: 640px; width: 100%; margin: 0 auto; }
.chat-lista { display: flex; flex-direction: column; gap: 6px; }
.chat-dia { align-self: center; font-size: .75rem; color: var(--texto-suave); background: var(--cartao); border: 1px solid var(--borda); border-radius: 10px; padding: 2px 10px; margin: 8px 0 2px; }
.chat-linha { display: flex; }
.chat-linha.meu { justify-content: flex-end; }
.chat-linha.dele { justify-content: flex-start; }
.chat-balao { max-width: 82%; padding: 8px 10px; border-radius: 14px; border: 1px solid var(--borda); background: var(--cartao); overflow-wrap: anywhere; }
.chat-linha.meu .chat-balao { background: var(--verde-claro); border-top-right-radius: 4px; }
.chat-linha.dele .chat-balao { border-top-left-radius: 4px; }
.chat-texto { white-space: pre-wrap; }
.chat-acoes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; margin-bottom: 6px; justify-content: flex-end; }
.chat-mini { font: inherit; font-size: .68rem; line-height: 1; padding: 4px 7px; border-radius: 10px; border: 1px solid var(--borda); background: var(--fundo); color: var(--texto-suave); cursor: pointer; text-decoration: none; }
.chat-mini.verde { color: var(--ok); border-color: var(--ok); }
.chat-audio audio { width: 100%; max-width: 260px; margin-top: 4px; display: block; }
.chat-arq small { color: var(--texto-suave); }
.chat-rodape { display: flex; align-items: center; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.chat-hora { color: var(--texto-suave); font-size: .72rem; }
.chat-cancelar { background: none; border: 0; color: var(--erro); font-size: .72rem; text-decoration: underline; cursor: pointer; padding: 0; }
.chat-rodape-fixo { flex: none; background: var(--cartao); border-top: 1px solid var(--borda); padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); }
.chat-andamento .pessoa { padding: 6px 0; }
.chat-barra { display: flex; align-items: flex-end; gap: 6px; max-width: 640px; margin: 0 auto; }
.chat-barra[hidden] { display: none; }
.chat-barra.gravando { align-items: center; }
.chat-campo { flex: 1; min-width: 0; resize: none; border: 1px solid var(--campo, var(--borda)); border-radius: 18px; padding: 9px 12px; font: inherit; background: var(--fundo); color: var(--texto); max-height: 120px; }
.chat-icone, .chat-mic { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--borda); background: var(--fundo); font-size: 1.05rem; cursor: pointer; color: var(--texto); padding: 0; }
.chat-mic.envia { background: var(--verde); border-color: var(--verde); color: var(--sobre-acento, #fff); }
.chat-ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--erro); animation: pisca 1s infinite; }
.chat-relogio { font-variant-numeric: tabular-nums; font-weight: 700; }
.chat-barra.gravando .chat-mic { margin-left: auto; }
@keyframes pisca { 50% { opacity: .25; } }

/* conversa: a pagina inteira fica travada (iOS ainda 'puxa' o documento mesmo com overscroll-behavior) */
html:has(.chat), body:has(.chat) { position: fixed; inset: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; }
.chat-topo, .chat-rodape-fixo { touch-action: none; }
.chat-rodape-fixo textarea, .chat-rodape-fixo input { touch-action: auto; }

/* planilha no celular: cabe na largura (sem rolagem lateral) e a tela inteira cabe sem a pagina balancar; so rola dentro, se precisar */
@media not all and (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .planilha-rolagem { overflow-x: hidden; overflow-y: auto; height: calc(100vh - 440px); height: calc(100dvh - 440px); max-height: none; min-height: 180px; }
  table.planilha { width: 100%; min-width: 0; table-layout: fixed; font-size: 0.7rem; }
  table.planilha th, table.planilha td { padding: 3px 3px; }
  table.planilha tbody th { position: static; width: 34%; min-width: 0; max-width: none; overflow: hidden; text-overflow: ellipsis; }
  table.planilha tr.item th { padding-left: 8px; }
  table.planilha thead th:first-child { width: 34%; }
  .barra-ano + p.suave { font-size: 0.7rem; margin: 4px 0; line-height: 1.25; }
}
/* celular na planilha: a pagina fica TRAVADA no tamanho da tela; so' a planilha rola (assessor.js ajustaPlanilha mede a altura) */
@media not all and (min-width: 900px) and (hover: hover) and (pointer: fine) {
  html:has(body.planilha-fixa), body.planilha-fixa { overflow: hidden; height: 100%; overscroll-behavior: none; }
  body.planilha-fixa .planilha-rolagem { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
}
.online-txt { color: var(--ok); font-weight: 600; }
.filtros-planilha { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.filtro-planilha { display: flex; flex-direction: column; font-size: 0.72rem; color: var(--texto-suave); min-width: 0; }
.filtro-planilha select { width: 100%; min-width: 0; font-size: 0.8rem; padding: 5px 4px; }
@media not all and (min-width: 900px) and (hover: hover) and (pointer: fine) { .planilha-rolagem { height: calc(100vh - 500px); height: calc(100dvh - 500px); min-height: 160px; } }

.aceite-linha { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: .92rem; line-height: 1.4; }
.aceite-linha input { flex: none; width: 22px; height: 22px; margin-top: 1px; }
.termos h2 { font-size: 1.05rem; margin: 18px 0 6px; }
.termos ul { padding-left: 20px; }
.termos li { margin-bottom: 6px; }

/* Bloco A (v96): icones nos botoes do balao, resposta citando, destaque */
.chat-mini .ico { display: inline-flex; vertical-align: middle; }
.chat-mini.ico-so { padding: 5px 8px; min-width: 32px; min-height: 28px; display: inline-flex; align-items: center; justify-content: center; }
.chat-mini.com-texto { display: inline-flex; align-items: center; gap: 3px; }
.chat-resposta-faixa { display: flex; align-items: center; gap: 8px; max-width: 640px; margin: 0 auto 6px; padding: 6px 8px; border-left: 4px solid var(--verde); background: var(--fundo); border-radius: 8px; }
.chat-resposta-faixa[hidden] { display: none; }
.chat-citacao { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: .8rem; }
.chat-citacao b { color: var(--verde); }
.chat-citacao span { color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-citada { display: flex; flex-direction: column; width: 100%; text-align: left; font: inherit; font-size: .78rem; border: 0; border-left: 3px solid var(--verde); background: rgba(0,0,0,.05); border-radius: 6px; padding: 4px 8px; margin-bottom: 6px; cursor: pointer; color: var(--texto); }
.chat-citada b { color: var(--verde); }
.chat-citada span { color: var(--texto-suave); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.chat-linha.destaque .chat-balao, .pessoa.destaque { animation: destacar 1.6s ease; }
@keyframes destacar { 0%, 60% { box-shadow: 0 0 0 3px var(--verde); } 100% { box-shadow: 0 0 0 0 transparent; } }

/* Bloco B (v97): modo selecao, encaminhar, apagar */
.chat-linha { align-items: center; gap: 8px; }
.chat-linha.marcada .chat-balao { box-shadow: 0 0 0 2px var(--verde); }
.chat-sel { flex: none; width: 22px; height: 22px; accent-color: var(--verde); }
.chat-linha.meu .chat-sel { margin-right: auto; }
.chat-selbarra { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--cartao); border-bottom: 1px solid var(--borda); max-width: 640px; width: 100%; margin: 0 auto; }
.chat-selbarra[hidden] { display: none; }
.chat-selbarra b { flex: 1; }
.chat-selbarra .botao .ico { display: inline-flex; vertical-align: middle; }
.chat-janela-fundo { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: flex-end; justify-content: center; z-index: 50; }
.chat-janela { width: 100%; max-width: 520px; max-height: 80vh; overflow-y: auto; background: var(--cartao); border-radius: 16px 16px 0 0; padding: 16px; }
.chat-janela h3 { margin: 0 0 8px; }
.chat-escolha { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--borda); cursor: pointer; }
.chat-escolha input { width: 22px; height: 22px; accent-color: var(--verde); }
.chat-escolha .avatar { width: 36px; height: 36px; }
@media (min-width: 640px) { .chat-janela-fundo { align-items: center; } .chat-janela { border-radius: 16px; } }

/* Bloco C (v98): reagir, mensagens que somem */
.chat-emojis { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; margin: 4px 0; padding: 4px; background: var(--fundo); border: 1px solid var(--borda); border-radius: 18px; }
.chat-emoji { font-size: 1.25rem; line-height: 1; border: 0; background: none; cursor: pointer; padding: 4px 5px; border-radius: 50%; }
.chat-emoji:active { background: var(--borda); }
.chat-reacoes { font-size: .85rem; background: var(--fundo); border: 1px solid var(--borda); border-radius: 12px; padding: 0 6px; margin-right: auto; }
.chat-tempo { flex: none; text-align: center; font-size: .78rem; color: var(--texto-suave); background: var(--cartao); border-bottom: 1px solid var(--borda); padding: 4px 8px; }
.chat-tempo[hidden] { display: none; }

/* Bloco D (v99): buscar na conversa */
.chat-busca { flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--cartao); border-bottom: 1px solid var(--borda); max-width: 640px; width: 100%; margin: 0 auto; }
.chat-busca[hidden] { display: none; }
.chat-busca-campo { flex: 1; min-width: 0; border: 1px solid var(--borda); border-radius: 18px; padding: 8px 12px; font: inherit; background: var(--fundo); color: var(--texto); }

/* v101: previa reduzida da foto dentro da conversa */
.chat-previa { display: block; max-width: 100%; width: 240px; height: auto; border-radius: 10px; margin-bottom: 6px; cursor: zoom-in; background: var(--fundo); }
.chat-previa-grande { background: var(--cartao); border-radius: 12px; padding: 12px; max-width: 94vw; max-height: 92vh; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.chat-previa-grande img { max-width: 100%; max-height: 70vh; object-fit: contain; border-radius: 8px; }

/* ---- contraste (2026-11-02): conferido por tests/teste_contraste.js em TODAS as combinacoes de tema, estilo e cor ---- */
/* tema claro: o destaque usado como TEXTO fica um pouco mais escuro (verde e laranja ficavam abaixo de 4,5:1 sobre o destaque suave) */
:root { --verde-texto: color-mix(in srgb, var(--verde) 80%, #000000); }
/* tema escuro: azul, roxo e rosa viram tons mais claros com texto escuro em cima (o botao escuro some contra o cartao escuro) */
html[data-tema="escuro"][data-cor="azul"] { --verde: #5b84ff; --sobre-acento: #0b1210; }
html[data-tema="escuro"][data-cor="roxo"] { --verde: #a78bfa; --sobre-acento: #0b1210; }
html[data-tema="escuro"][data-cor="rosa"] { --verde: #f472b6; --sobre-acento: #0b1210; }
html[data-tema="escuro"] .estado { color: #8fb1ff; }

/* ---- estilos (skins): Preto e Dourado, Madeira, Grafite. tema.js poe data-estilo no <html> e forca o tema escuro ---- */
html[data-estilo="ouro"] {
  --fundo: #0d0d0d; --cartao: #1a1a1a; --campo: #141414; --campo-off: #202020;
  --texto: #f2e9d0; --texto-suave: #b3a98c; --borda: #3d3522; --ponto-off: #6a634f;
  --verde-claro: color-mix(in srgb, var(--verde) 16%, #1a1a1a);
}
html[data-estilo="ouro"]:not([data-cor]) { --verde: #d4af37; --sobre-acento: #111111; }
html[data-estilo="madeira"] {
  --fundo: #2a1d14; --cartao: #3b2a1d; --campo: #2f2116; --campo-off: #44301f;
  --texto: #f3e3cf; --texto-suave: #c2a688; --borda: #5a4330; --ponto-off: #8a6f55;
  --verde-claro: color-mix(in srgb, var(--verde) 16%, #3b2a1d);
}
html[data-estilo="madeira"]:not([data-cor]) { --verde: #c8934f; --sobre-acento: #111111; }
html[data-estilo="grafite"] {
  --fundo: #1e2124; --cartao: #2a2e33; --campo: #23272b; --campo-off: #30353b;
  --texto: #edeff1; --texto-suave: #a9afb5; --borda: #3a3f45; --ponto-off: #6b7279;
  --verde-claro: color-mix(in srgb, var(--verde) 16%, #2a2e33);
}
html[data-estilo="grafite"]:not([data-cor]) { --verde: #e4572e; --sobre-acento: #111111; }
/* nos estilos, os cartoes sao mais claros que no tema escuro comum: verde e laranja escolhidos tambem viram tons claros com texto escuro */
html[data-tema="escuro"][data-estilo][data-cor="verde"] { --verde: #4ade80; --sobre-acento: #0b1210; }
html[data-tema="escuro"][data-estilo][data-cor="laranja"] { --verde: #fb923c; --sobre-acento: #0b1210; }

/* ---- mais estilos (2026-11-02): escuros = Turquesa, Azul, Pink, Verde Floresta; claros = Rosa, Menta ---- */
html[data-estilo="turquesa"] {
  --fundo: #07201f; --cartao: #0e302e; --campo: #0a2625; --campo-off: #123a38;
  --texto: #e3f7f4; --texto-suave: #8fc3bc; --borda: #1d4a46; --ponto-off: #4f817b;
  --verde-claro: color-mix(in srgb, var(--verde) 16%, #0e302e);
}
html[data-estilo="turquesa"]:not([data-cor]) { --verde: #2dd4bf; --sobre-acento: #062220; }
html[data-estilo="azul"] {
  --fundo: #0b1426; --cartao: #131f38; --campo: #0e1830; --campo-off: #1a2a4a;
  --texto: #e6eeff; --texto-suave: #9db0d6; --borda: #243659; --ponto-off: #566a93;
  --verde-claro: color-mix(in srgb, var(--verde) 16%, #131f38);
}
html[data-estilo="azul"]:not([data-cor]) { --verde: #60a5fa; --sobre-acento: #0a1428; }
html[data-estilo="pink"] {
  --fundo: #1f0a18; --cartao: #2e1224; --campo: #26101d; --campo-off: #3a1730;
  --texto: #ffe6f3; --texto-suave: #d9a0bf; --borda: #55203f; --ponto-off: #8d5575;
  --verde-claro: color-mix(in srgb, var(--verde) 16%, #2e1224);
}
html[data-estilo="pink"]:not([data-cor]) { --verde: #ff4fa3; --sobre-acento: #1a0612; }
html[data-estilo="floresta"] {
  --fundo: #0b1f14; --cartao: #123023; --campo: #0e281c; --campo-off: #17402e;
  --texto: #e4f5ea; --texto-suave: #98c4a8; --borda: #1f4a35; --ponto-off: #4f8068;
  --verde-claro: color-mix(in srgb, var(--verde) 16%, #123023);
}
html[data-estilo="floresta"]:not([data-cor]) { --verde: #4ade80; --sobre-acento: #06180e; }

/* estilos CLAROS (o tema.js mantem o tema claro): so' trocam o fundo e o destaque */
html[data-estilo="rosa"] {
  --fundo: #fff1f6; --cartao: #ffffff; --campo: #ffffff; --campo-off: #fbe3ec;
  --texto: #3a1526; --texto-suave: #7d4a62; --borda: #f2c9d9; --ponto-off: #c79bb0;
}
html[data-estilo="rosa"]:not([data-cor]) { --verde: #be185d; }
html[data-estilo="menta"] {
  --fundo: #effaf5; --cartao: #ffffff; --campo: #ffffff; --campo-off: #dff3ea;
  --texto: #123326; --texto-suave: #4b7561; --borda: #c3e6d6; --ponto-off: #92b8a5;
}
html[data-estilo="menta"]:not([data-cor]) { --verde: #0f766e; }

/* Mentor: abas + quadradinho dos creditos de IA ao lado direito de "Configurar" (no celular estreito o quadradinho desce, alinhado a direita) */
.barra-creditos { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin-bottom: 14px; }
.barra-creditos .subabas { flex: 1 1 300px; min-width: 0; margin-bottom: 0; }
.quadro-creditos { flex: none; margin-left: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 84px; min-height: 44px;
  padding: 4px 12px; border: 1px solid var(--borda); border-radius: 12px; background: var(--cartao); text-align: center; line-height: 1.15; }
.quadro-creditos[hidden] { display: none; }
.quadro-creditos strong { font-size: 1.05rem; color: var(--texto); }
.quadro-creditos small { font-size: 0.72rem; color: var(--texto-suave); white-space: nowrap; }
.quadro-creditos.acabou strong { color: var(--erro); }

/* botao ? de ajuda (explica como o sistema faz a conta) e aviso do cartao dentro da janela de lancar */
.ajuda-bolinha { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: 4px; padding: 0; border: 1.5px solid var(--borda); border-radius: 50%;
  background: var(--cartao); color: var(--texto-suave); font-family: inherit; font-weight: 700; font-size: 0.78rem; line-height: 1; cursor: pointer; vertical-align: middle; }
.ajuda-bolinha:hover, .ajuda-bolinha:focus-visible { border-color: var(--verde); color: var(--verde); }
.info-cartao { margin: 4px 0 10px; padding: 8px 10px; border: 1px solid var(--borda); border-radius: 10px; background: var(--campo, #f4f7f5); font-size: 0.88rem; }
.info-cartao[hidden] { display: none; }
@media (min-width: 640px) { .quadro-creditos { margin-left: 0; } }   /* tela larga: o quadradinho fica colado ao lado direito de "Configurar" */

/* ---- Painel (graficos): cores das series com passo proprio no tema escuro; texto sempre nas cores de texto */
:root { --g-ent: #1baf7a; --g-sai: #eb6834; --g-linha: #2a78d6; --g-neg: #e34948;
  --g-s1: #2a78d6; --g-s2: #eb6834; --g-s3: #1baf7a; --g-s4: #eda100; --g-s5: #e87ba4; --g-s6: #008300; --g-s7: #6250d6; --g-s8: #e34948; }
html[data-tema="escuro"] { --g-ent: #199e70; --g-sai: #d95926; --g-linha: #3987e5; --g-neg: #e66767;
  --g-s1: #3987e5; --g-s2: #d95926; --g-s3: #199e70; --g-s4: #c98500; --g-s5: #d55181; --g-s6: #2f9a2f; --g-s7: #9085e9; --g-s8: #e66767; }
.painel-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 12px; }
@media (min-width: 900px) { .painel-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.painel-grade .cartao.grafico { margin: 0; min-width: 0; }
.grafico-titulo { margin: 0 0 8px; font-size: 1rem; display: flex; align-items: center; gap: 4px; }
.grafico-vazio { margin: 24px 0; text-align: center; }
.grafico-detalhe { margin: 6px 0 0; font-size: 0.85rem; color: var(--texto-suave); min-height: 1.2em; }
.grafico svg { display: block; width: 100%; height: auto; overflow: visible; }
.g-s1 { fill: var(--g-s1); color: var(--g-s1); background: var(--g-s1); } .g-s2 { fill: var(--g-s2); color: var(--g-s2); background: var(--g-s2); }
.g-s3 { fill: var(--g-s3); color: var(--g-s3); background: var(--g-s3); } .g-s4 { fill: var(--g-s4); color: var(--g-s4); background: var(--g-s4); }
.g-s5 { fill: var(--g-s5); color: var(--g-s5); background: var(--g-s5); } .g-s6 { fill: var(--g-s6); color: var(--g-s6); background: var(--g-s6); }
.g-s7 { fill: var(--g-s7); color: var(--g-s7); background: var(--g-s7); } .g-s8 { fill: var(--g-s8); color: var(--g-s8); background: var(--g-s8); }
.g-fatia { stroke: var(--cartao); stroke-width: 2; }
.g-fatia:hover, .g-ent:hover, .g-sai:hover { opacity: 0.8; }
.g-rosca-caixa { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.g-rosca { max-width: 190px; flex: 0 0 auto; }
.g-centro-rotulo { font-size: 12px; fill: var(--texto-suave); }
.g-centro-valor { font-size: 16px; font-weight: 700; fill: var(--texto); }
.g-legenda { list-style: none; margin: 0; padding: 0; flex: 1 1 180px; min-width: 0; font-size: 0.88rem; }
.g-legenda li { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.g-legenda-nome { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-legenda-valor { color: var(--texto-suave); white-space: nowrap; }
.g-ponto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.g-ponto.g-ent { background: var(--g-ent); } .g-ponto.g-sai { background: var(--g-sai); }
.g-legenda-linha { display: flex; gap: 16px; font-size: 0.85rem; margin-bottom: 4px; }
.g-legenda-linha > span { display: inline-flex; align-items: center; gap: 6px; }
path.g-ent { fill: var(--g-ent); } path.g-sai { fill: var(--g-sai); }
.g-apagado { opacity: 0.3; }
.g-grade { stroke: var(--borda); stroke-width: 1; }
.g-zero { stroke: var(--texto-suave); stroke-width: 1; }
.g-eixo { font-size: 11px; fill: var(--texto-suave); }
.g-rotulo { font-size: 12px; font-weight: 700; fill: var(--texto); }
.g-linha { fill: none; stroke: var(--g-linha); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.g-marca { fill: var(--g-linha); stroke: var(--cartao); stroke-width: 2; }
.g-marca-neg { fill: var(--g-neg); }
.g-deitadas { list-style: none; margin: 0; padding: 0; }
.g-deitadas li { padding: 6px 0; }
.g-deitada-topo { display: flex; justify-content: space-between; gap: 8px; font-size: 0.9rem; margin-bottom: 4px; }
.g-deitada-topo strong { white-space: nowrap; }
.g-trilho { height: 12px; border-radius: 6px; background: color-mix(in srgb, var(--borda) 55%, transparent); overflow: hidden; }
.g-barra-deitada { height: 100%; border-radius: 6px; background: var(--g-linha); }

/* ---- celular em pe: Mentor compacto (microfone redondo e creditos no cabecalho, abas numa linha, filtros sob demanda) */
.filtros-planilha[hidden] { display: none; }
/* microfone, "como perguntar" e creditos no cabecalho do Mentor: em qualquer tela (celular e computador) */
.topo.com-acoes .logo-mini { margin-left: 0; }
.topo-acoes { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.topo-acoes .quadro-creditos { min-width: 0; min-height: 40px; padding: 2px 8px; margin-left: 0; }
.topo-acoes .quadro-creditos strong { font-size: 0.95rem; }
.topo-acoes .quadro-creditos small { font-size: 0.62rem; }
.voz-abrir.voz-redondo { width: 44px; height: 44px; min-height: 44px; margin: 0; padding: 0; border-radius: 50%; font-size: 1.25rem; flex: none; }
.ajuda-perguntar.voz-redondo { width: 44px; height: 44px; min-height: 44px; margin: 0; padding: 0; border-radius: 50%; font-size: 1.4rem; font-weight: 800; flex: none; border: 2px solid var(--verde); color: var(--verde); }
@media (max-width: 639px) {
  .subabas { flex-wrap: nowrap; overflow-x: auto; gap: 4px; }
  .subabas button { flex: 1 1 0; min-width: 0; padding: 8px 2px; min-height: 40px; font-size: 0.78rem; }
  .barra-creditos { margin-bottom: 8px; }
  .cartao-planilha { padding: 8px 8px 4px; margin-bottom: 8px; }
  .cartao-planilha .barra-ano { gap: 6px; margin-bottom: 8px; }
  .cartao-planilha .barra-ano .btn-filtros { margin-left: auto; }
  .cartao-planilha .barra-ano .btn-filtros ~ .verde { margin-left: 0; }
  body.planilha-fixa .tela { padding-top: 8px; }
  /* a barra de rolagem fina da tabela fica na folga da borda direita, nao por cima da coluna Total */
  .planilha-rolagem { scrollbar-width: thin; }
  table.planilha th:last-child, table.planilha td:last-child { padding-right: 12px; }
}

/* "Aprenda como perguntar": janela com as frases que o Mentor entende sem IA e a resposta de cada uma */
.como-perguntar { max-width: 460px; max-height: 88vh; overflow-y: auto; text-align: left; }
.como-perguntar h2 { text-align: center; }
.como-perguntar .cp-grupo { margin-top: 14px; }
.como-perguntar h3 { font-size: 1rem; margin: 0 0 6px; color: var(--verde); }
.como-perguntar .cp-item { border: 1px solid var(--borda); border-radius: 10px; padding: 8px 10px; margin-bottom: 6px; }
.como-perguntar .cp-diz { font-size: 0.95rem; }
.como-perguntar .cp-resp { font-size: 0.9rem; color: var(--suave, inherit); margin-top: 3px; }
.voz-caixa h2 .ajuda-bolinha { vertical-align: middle; }
.como-perguntar .cp-nota { font-size: 0.88rem; margin: 0 0 6px; }
.como-perguntar .cp-final { color: var(--verde); }
.como-perguntar-tela h3 { font-size: 1rem; margin: 12px 0 4px; color: var(--verde); }
.como-perguntar-tela ul { margin: 0; padding-left: 20px; }
.como-perguntar-tela li { margin: 2px 0; }
.ajuda-perguntar:not(.voz-redondo) { width: 100%; margin: 0 0 12px; padding: 12px; font-size: 1rem; }

/* Painel: caixinhas das formas de pagamento */
.filtro-formas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 10px; }
.filtro-formas-titulo { font-size: 0.85rem; color: var(--suave, inherit); }
.filtro-forma { display: inline-flex; align-items: center; gap: 4px; font-size: 0.92rem; cursor: pointer; }
.filtro-forma input { width: 18px; height: 18px; }
.grafico-nota { font-size: 0.85rem; line-height: 1.35; margin: 8px 0 0; }

/* cabecalho do Mentor: logo do tamanho dos botoes redondos e botoes mais afastados (dedo grosso nao clica nos dois) */
.topo.com-acoes .logo-mini { width: 44px; height: 44px; margin-left: 14px; }
.topo-acoes { gap: 14px; }

/* Painel: campos mais grossos e mais curtos; os dois campos acabam onde acaba a linha das formas de pagamento */
.painel-filtros { width: fit-content; max-width: 100%; }
.filtros-painel { display: flex; gap: 10px; margin-bottom: 10px; }
.filtros-painel .filtro-planilha { flex: 1; min-width: 0; font-size: 0.85rem; }
.filtros-painel select, .filtros-painel input[type=date] { width: 100%; min-width: 0; min-height: 44px; font-size: 1rem; padding: 10px 8px; }

/* celular estreito: com o quadro de creditos de IA ao lado dos botoes, o topo nao pode passar da tela (logo grande + botoes afastados) */
@media (max-width: 480px) {
  .topo.com-acoes { gap: 6px; padding: 10px 10px; }
  .topo.com-acoes .avatar { width: 38px; height: 38px; }
  .topo.com-acoes .quem { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* no celular: microfone, "?" e logo MENORES e do MESMO tamanho (36px), so' afastados entre si */
  .topo-acoes { gap: 12px; }
  .voz-abrir.voz-redondo, .ajuda-perguntar.voz-redondo { width: 36px; height: 36px; min-height: 36px; }
  .voz-abrir.voz-redondo { font-size: 1.05rem; }
  .ajuda-perguntar.voz-redondo { font-size: 1.2rem; }
  .topo.com-acoes .logo-mini { width: 36px; height: 36px; margin-left: 12px; }
  .topo-acoes .quadro-creditos { margin-right: -4px; }
}

/* campos de escolha do Painel e da Planilha (Ver por, Mes, De, Ate e as caixinhas das formas) nas cores do tema em uso: claro, escuro e cada estilo */
.filtro-planilha select, .filtros-painel input[type=date] {
  font-family: inherit; background: var(--campo); color: var(--texto); border: 1px solid var(--borda); border-radius: 10px;
}
.filtro-planilha select option { background: var(--campo); color: var(--texto); }
.filtro-planilha select:focus-visible, .filtros-painel input[type=date]:focus-visible { outline: 2px solid var(--verde); outline-offset: 1px; }
.filtro-forma, .filtro-formas-titulo { color: var(--texto); }
.filtro-forma input { accent-color: var(--verde); }

/* janela "Comprar creditos de IA": copia e cola do Pix na largura toda e QR no tamanho certo (estilo escrito no elemento e' bloqueado pela politica de seguranca) */
.como-perguntar input[readonly] { width: 100%; font: inherit; font-size: 16px; padding: 10px; border: 1px solid var(--borda); border-radius: 10px; background: var(--campo); color: var(--texto); }
.como-perguntar img[alt="QR Code do Pix"] { width: 220px; max-width: 100%; height: auto; }
.compra-ia { margin: 4px 0 8px; }