/* Identidade Flui: petróleo, eucalipto e cal. */
:root {
  --petroleo: #0E2830;
  --petroleo-medio: #1C3A44;
  --eucalipto: #79A69C;
  --cal: #EDEBE6;
  --texto: #0E2830;
  --texto-suave: #5B6B6C;
  --erro: #9B2C2C;
  --fundo: #F7F6F3;
  --cartao: #FFFFFF;
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); color: var(--texto); font-size: 17px; line-height: 1.5; }
.topo { display: flex; align-items: center; gap: 16px; padding: 12px 16px; background: var(--petroleo); color: var(--cal); flex-wrap: wrap; }
.marca { font-weight: 600; letter-spacing: 0.02em; }
.quem { margin-left: auto; color: var(--eucalipto); font-size: 15px; }
.conteudo { max-width: 720px; margin: 24px auto; padding: 0 16px; }
.cartao { background: var(--cartao); border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(14, 40, 48, 0.12); }
h1 { font-size: 26px; margin: 0 0 12px; }
label { display: block; margin: 12px 0 4px; font-weight: 500; }
input[type="email"], input[type="password"], input[type="text"] { width: 100%; padding: 12px; font-size: 17px; border: 1px solid #C9CFCF; border-radius: 8px; }
/* Todo campo de digitar com o mesmo tamanho, mesmo fora de um formulário (revisão do QA, Q32: sala por hora, preço da
   concorrente e data do convênio ficavam com uns 18 px de altura). */
input:not([type]), input[type="number"], input[type="date"], input[type="month"], input[type="time"], input[type="tel"], select, textarea {
  min-height: 44px; max-width: 100%; padding: 10px 12px; font-size: 17px; font-family: inherit; border: 1px solid #C9CFCF; border-radius: 8px; background: #fff; color: var(--texto);
}
.campo input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]), .campo select { width: 100%; }
button, .botao { display: inline-block; margin-top: 16px; padding: 12px 20px; font-size: 17px; border: 0; border-radius: 8px; background: var(--petroleo); color: var(--cal); cursor: pointer; }
.botao-texto { margin: 0; padding: 6px 10px; background: transparent; color: var(--cal); border: 1px solid var(--eucalipto); font-size: 15px; }
.em-linha { display: inline; margin: 0; }
.aviso { padding: 12px; border-radius: 8px; }
.aviso-erro { background: #FBEAEA; color: var(--erro); }
.aviso-info { background: #E8F1EF; color: var(--petroleo-medio); }
.lista-empresas { list-style: none; padding: 0; }
.lista-empresas li { margin: 8px 0; }
.suave { color: var(--texto-suave); }

/* Relatórios (modo completo). */
.conteudo:has(.largo) { max-width: 1120px; }
h2 { font-size: 20px; margin: 28px 0 8px; }
.abas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.aba { padding: 8px 14px; border-radius: 8px; background: var(--cal); color: var(--petroleo); text-decoration: none; font-size: 15px; }
.aba.ativa { background: var(--petroleo); color: var(--cal); }
.seletor-mes { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.seletor-mes label { margin: 0 0 4px; }
.seletor-mes input[type="month"] { padding: 10px; font-size: 16px; border: 1px solid #C9CFCF; border-radius: 8px; }
.seletor-mes button { margin-top: 0; padding: 10px 16px; }
.rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.relatorio { width: 100%; border-collapse: collapse; font-size: 15px; }
.relatorio th, .relatorio td { padding: 8px 10px; border-bottom: 1px solid #E3E6E5; text-align: left; vertical-align: top; }
.relatorio thead th { font-size: 13px; color: var(--texto-suave); font-weight: 600; white-space: nowrap; }
.relatorio th[scope="row"] { font-weight: 400; }
.relatorio .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.relatorio .subtotal th, .relatorio .subtotal td { font-weight: 600; background: #F3F5F4; }
.tecnico { display: block; }
.traducao { display: block; font-size: 13px; color: var(--texto-suave); }
.termo { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
.glossario > div { padding: 10px 0; border-bottom: 1px solid var(--cal); scroll-margin-top: 16px; }
.glossario > div:target { background: var(--cal); }
.glossario dt { font-weight: 600; }
.glossario dd { margin: 4px 0 0; }
.col-origem { width: 28px; padding-left: 0; }
.origem { display: inline-block; width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 50%; background: var(--cal); color: var(--petroleo); text-decoration: none; font-size: 13px; }
.selo { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 6px; background: #E8F1EF; color: var(--petroleo-medio); font-size: 12px; }
.selo.alerta { background: #FBEAEA; color: var(--erro); }
.semaforo-verde { color: #2F6B4F; }
.semaforo-amarelo { color: #8A6A12; }
.semaforo-vermelho { color: var(--erro); font-weight: 600; }
@media (max-width: 600px) {
  .relatorio { font-size: 14px; }
  .relatorio th, .relatorio td { padding: 6px; }
}
/* Tabelas largas no celular: o nome da linha fica parado enquanto os números rolam. */
.rolagem .relatorio tbody th[scope="row"], .rolagem .relatorio thead th:first-child { position: sticky; left: 0; background: var(--cartao); z-index: 1; }
.rolagem .relatorio .subtotal th[scope="row"] { background: #F3F5F4; }

/* Navegação e modo de ver. */
.navegacao { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 8px 16px; background: var(--petroleo-medio); }
.navegacao ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.navegacao a { display: inline-block; padding: 8px 12px; border-radius: 8px; color: var(--cal); text-decoration: none; font-size: 16px; }
.navegacao a.ativa { background: var(--cal); color: var(--petroleo); font-weight: 600; }
.navegacao .modo { display: flex; align-items: center; gap: 6px; color: var(--cal); font-size: 14px; }
.navegacao .modo .suave { color: var(--eucalipto); }
.botao-modo { margin: 0; padding: 6px 10px; font-size: 14px; background: transparent; border: 1px solid var(--eucalipto); color: var(--cal); }
.conteudo:has(.perguntas) { max-width: 980px; }

/* Modo simples: números grandes, frases e cartões. */
.grande { font-size: 20px; }
.pequeno { font-size: 14px; }
.valor { font-variant-numeric: tabular-nums; white-space: nowrap; }
section.cartao + section.cartao, .perguntas .cartao, .cartao + .cartao { margin-top: 16px; }
.perguntas { display: grid; gap: 16px; }
.pergunta h2 { margin-top: 0; font-size: 22px; }
.tabela-simples { width: 100%; border-collapse: collapse; }
.tabela-simples th, .tabela-simples td { padding: 10px 8px; border-bottom: 1px solid #E3E6E5; text-align: left; vertical-align: middle; }
.tabela-simples thead th { font-size: 13px; color: var(--texto-suave); font-weight: 600; }
.tabela-simples .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabela-simples tfoot th, .tabela-simples tfoot td { font-weight: 600; border-bottom: 0; }
.tabela-simples a { color: var(--petroleo); }
.semaforo { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; }
.semaforo .icone { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font-size: 13px; font-weight: 700; }
.semaforo-verde .icone { background: #2F6B4F; }
.semaforo-amarelo .icone { background: #B88A16; }
.semaforo-vermelho .icone { background: var(--erro); }
.semaforo-nenhum .icone { background: var(--texto-suave); }
.alertas { border-left: 6px solid var(--erro); }
.alertas ul, .dicas { padding-left: 18px; }
.alertas li, .dicas li { margin: 8px 0; }
.dicas { background: #F3F5F4; border-radius: 8px; padding: 12px 12px 12px 30px; }
.extrato .lista-saidas { list-style: none; padding: 0; margin: 4px 0 12px; }
.extrato .lista-saidas li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed #E3E6E5; }
.lista-servicos, .lista-meses, .lista-contas { list-style: none; padding: 0; }
.cartao-link { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 14px 16px; margin: 8px 0; background: var(--cartao); border-radius: 12px; box-shadow: 0 1px 3px rgba(14, 40, 48, 0.12); color: var(--texto); text-decoration: none; }
.cartao-link .nome { font-weight: 600; }
.cartao-link .semaforo { grid-column: 1 / -1; }
.lista-meses li { display: inline-block; margin: 4px 8px 4px 0; }
.vazio { border: 2px dashed #C9CFCF; box-shadow: none; }
.destaque-sobra { background: #E8F1EF; padding: 10px 12px; border-radius: 8px; }
.seletor-mes { margin-bottom: 12px; }

/* "Para onde vai o dinheiro": barra em SVG (largura por atributo; a cor vem daqui). */
.barra { width: 100%; height: 40px; display: block; border-radius: 8px; overflow: hidden; }
.barra-impostos { fill: #8C6D9E; background: #8C6D9E; }
.barra-maquininha { fill: #C27C4E; background: #C27C4E; }
.barra-produtos { fill: #4E7FA6; background: #4E7FA6; }
.barra-retoques { fill: #7FA6C9; background: #7FA6C9; }
.barra-repasse { fill: #A6764E; background: #A6764E; }
.barra-sala { fill: #9A9A6B; background: #9A9A6B; }
.barra-fixas { fill: #5B6B6C; background: #5B6B6C; }
.barra-lucro { fill: #2F6B4F; background: #2F6B4F; }
.barra-falta { fill: #9B2C2C; background: #9B2C2C; }
.legenda { list-style: none; padding: 0; display: grid; gap: 6px; margin: 12px 0; }
.legenda li { display: flex; align-items: center; gap: 8px; }
.legenda .num { margin-left: auto; font-variant-numeric: tabular-nums; }
.marcador { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }
.frase { font-size: 18px; }

/* Lançar: botões grandes e formulários de uma pergunta por campo. */
.botoes-grandes { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.botao-grande { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 2px 12px; align-items: center; padding: 18px; min-height: 92px; background: var(--cartao); border-radius: 14px; box-shadow: 0 1px 3px rgba(14, 40, 48, 0.12); color: var(--texto); text-decoration: none; border: 2px solid transparent; }
.botao-grande:hover, .botao-grande:focus { border-color: var(--eucalipto); }
.botao-grande .icone { grid-row: 1 / 3; font-size: 34px; }
.botao-grande .titulo { font-size: 20px; font-weight: 600; }
.botao-grande .texto { font-size: 14px; color: var(--texto-suave); }
.formulario .campo { margin-bottom: 4px; }
.formulario input[type="date"], .formulario input[type="number"], .formulario select, .formulario input[type="text"] { width: 100%; padding: 12px; font-size: 17px; border: 1px solid #C9CFCF; border-radius: 8px; background: #fff; }
.ajuda { margin: 4px 0 8px; font-size: 14px; color: var(--texto-suave); }
.escolha { border: 0; padding: 0; margin: 12px 0; }
.escolha legend { font-weight: 500; margin-bottom: 6px; }
.escolha { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.escolha legend { grid-column: 1 / -1; }
.opcao { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px; border: 1px solid #C9CFCF; border-radius: 10px; font-weight: 400; cursor: pointer; background: #fff; }
.opcao:has(input:checked) { border-color: var(--petroleo); background: #E8F1EF; }
.opcao .icone { font-size: 22px; }
.grupo-novo { border: 1px dashed #C9CFCF; border-radius: 10px; margin: 12px 0; padding: 4px 12px 12px; }
.lista-contas li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 0; border-bottom: 1px solid #E3E6E5; }
.lista-contas li > span { flex: 1 1 220px; }
.botao-pequeno { margin: 0; padding: 8px 14px; font-size: 15px; }
.botao-alerta { background: var(--erro); }
@media (max-width: 600px) {
  .grande { font-size: 18px; }
  .botao-grande { min-height: 80px; padding: 14px; }
  .navegacao .modo { width: 100%; }
}
.cartao > h2:first-child, .cartao > div > h2:first-child { margin-top: 0; }
.seletor-mes input[type="number"] { width: 100px; padding: 10px; font-size: 16px; border: 1px solid #C9CFCF; border-radius: 8px; }
.extrato .lista-saidas li > span:first-child { flex: 1; }
#contas-em-aberto form:not(.em-linha) { margin-bottom: 8px; }
a.botao { text-decoration: none; }

/* Revisão da Fase 2 (QA): mensagens junto do campo, troca de mês, alvos de toque e celular. */
.pular { position: absolute; left: -9999px; top: 0; padding: 12px 16px; background: var(--cal); color: var(--petroleo); z-index: 100; }
.pular:focus { left: 8px; top: 8px; }
.erro-campo { margin: 6px 0 4px; color: var(--erro); font-weight: 500; }
.alerta-campo { margin: 6px 0 4px; padding: 10px 12px; border-radius: 8px; background: #FFF4D6; color: #6B4F00; }
.campo.destacado input, .campo.destacado select, .escolha.destacado .opcao { border-color: var(--erro); border-width: 2px; }
.troca-mes { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin: 4px 0 16px; }
.troca-mes .seletor-mes { margin: 0; }
.seta-mes { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; border-radius: 8px; background: var(--cal); color: var(--petroleo); text-decoration: none; font-size: 15px; }
.subtitulo { margin: 12px 0 4px; font-weight: 600; }
.linha-outros th, .linha-outros td { color: var(--texto-suave); font-style: italic; }
td.vazia { color: var(--texto-suave); }
.voltar { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 0; }
.avisos { border-left: 6px solid #B88A16; }
.botao-secundario { display: inline-flex; align-items: center; min-height: 44px; background: var(--cal); color: var(--petroleo); border: 1px solid var(--petroleo); text-decoration: none; border-radius: 8px; }
.botao-pequeno { min-height: 44px; }
.origem { width: 32px; height: 32px; line-height: 32px; font-size: 15px; }
.navegacao a, .botao-modo, .botao-texto { min-height: 44px; display: inline-flex; align-items: center; }
.navegacao .modo button { margin: 0; }

@media (max-width: 600px) {
  body.com-menu { padding-bottom: 72px; }
  .conteudo { margin-top: 12px; }
  h1 { font-size: 22px; }
  /* Topo compacto (revisão do QA, Q31): nome numa linha só; o menu vai para baixo da tela, fixo. */
  .topo { gap: 8px; padding: 8px 12px; flex-wrap: nowrap; }
  .quem { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
  .navegacao { padding: 6px 12px; }
  .navegacao ul { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0;
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); background: var(--petroleo); box-shadow: 0 -1px 4px rgba(14, 40, 48, 0.25); }
  .navegacao ul a { display: flex; justify-content: center; width: 100%; padding: 8px 2px; font-size: 13px; text-align: center; }
  .navegacao .modo { width: auto; margin-left: auto; }
  .botao-modo { font-size: 13px; }
  .origem { width: 44px; height: 44px; line-height: 44px; }
  /* Tabelas do modo simples viram cartões: cada célula mostra o próprio rótulo (data-rotulo). */
  .tabela-simples thead { display: none; }
  .tabela-simples, .tabela-simples tbody, .tabela-simples tfoot, .tabela-simples tr { display: block; width: 100%; }
  .tabela-simples tr { padding: 10px 0; border-bottom: 1px solid #E3E6E5; }
  .tabela-simples th, .tabela-simples td { display: block; border: 0; padding: 2px 0; }
  .tabela-simples th[scope="row"] { font-size: 17px; font-weight: 600; }
  .tabela-simples td[data-rotulo] { display: flex; justify-content: space-between; gap: 12px; text-align: right; }
  .tabela-simples td[data-rotulo]::before { content: attr(data-rotulo); color: var(--texto-suave); font-size: 14px; text-align: left; }
  .tabela-simples td.vazia { display: none; }
  .tabela-simples tfoot tr { border-bottom: 0; }
  /* Tabelas largas dos relatórios também (revisão do QA, Q22): sem rolar para o lado. */
  .relatorio.cartoes thead { display: none; }
  .relatorio.cartoes, .relatorio.cartoes tbody, .relatorio.cartoes tfoot, .relatorio.cartoes tr { display: block; width: 100%; }
  .relatorio.cartoes tr { padding: 8px 0; border-bottom: 1px solid #E3E6E5; }
  .relatorio.cartoes th, .relatorio.cartoes td { display: block; border: 0; padding: 2px 0; }
  .relatorio.cartoes th[scope="row"] { position: static; font-weight: 600; }
  .relatorio.cartoes td[data-rotulo] { display: flex; justify-content: space-between; gap: 12px; text-align: right; white-space: normal; }
  .relatorio.cartoes td[data-rotulo]::before { content: attr(data-rotulo); color: var(--texto-suave); font-size: 13px; text-align: left; }
  .relatorio.cartoes td:empty { display: none; }
  .troca-mes { align-items: stretch; }
  .troca-mes .seletor-mes { order: 3; width: 100%; }
  .seta-mes { flex: 1 1 40%; justify-content: center; }
}
a.botao-texto { text-decoration: none; }
.lembrar { margin-top: 12px; }

/* Tela Hoje (PLANO.md 13.2): um cartão por atendimento, pagamento em um toque. */
.leitura-agenda { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.leitura-agenda p { margin: 0; }
.lista-hoje { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 12px; }
.item-hoje { background: var(--cartao); border-radius: 12px; padding: 14px 16px; box-shadow: 0 1px 3px rgba(14, 40, 48, 0.12); border-left: 6px solid var(--eucalipto); }
.item-hoje.situacao-feito { border-left-color: #B88A16; }
.item-hoje.situacao-faltou, .item-hoje.situacao-desmarcado { border-left-color: #C9CFCF; opacity: 0.85; }
.item-hoje:target { outline: 3px solid var(--eucalipto); }
.item-topo { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.item-topo .hora { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 18px; }
.item-topo .nome { font-size: 18px; }
.item-topo .valor { margin-left: auto; }
.item-situacao { margin: 6px 0 4px; }
.selo-ok { background: #E3F0E8; color: #2F6B4F; }
.botoes-pagamento { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-top: 8px; }
.botoes-pagamento button { margin: 0; min-height: 48px; font-size: 17px; }
.detalhes-pagamento { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 4px 12px; margin-top: 8px; }
.detalhes-pagamento label { margin: 6px 0 0; font-weight: 400; }
.detalhes-pagamento select, .detalhes-pagamento input { display: block; width: 100%; margin-top: 4px; padding: 10px; font-size: 16px; border: 1px solid #C9CFCF; border-radius: 8px; background: #fff; }
.detalhes-pagamento .ajuda { margin: 0; align-self: end; }
details.outras { margin-top: 8px; }
details.outras summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--petroleo-medio); font-weight: 500; }
.item-hoje form.em-linha { display: inline-block; margin: 8px 8px 0 0; }
.conferir { background: #FFF4D6; border-radius: 8px; padding: 8px 12px; margin-top: 8px; }
.conferir p { margin: 4px 0; }
.conferir button { margin: 4px 8px 4px 0; }
.passos { padding-left: 20px; }
.passos li { margin: 8px 0; }
@media (max-width: 600px) {
  .botoes-pagamento { grid-template-columns: 1fr 1fr; }
  .item-topo .valor { margin-left: 0; width: 100%; }
}
/* O primeiro botão do formulário de pagamento só segura o Enter (fica desligado e invisível). */
form.marcar > button[hidden] { display: none; }
/* Conferir com o banco (PLANO.md 13.3) */
.recuado { margin-left: 32px; }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.titulo-secao { margin-top: 24px; font-size: 20px; }
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 12px 0; }
.numeros div { background: #F4F7F6; border-radius: 10px; padding: 10px 12px; }
.numeros dt { font-size: 14px; color: var(--texto-suave); }
.numeros dd { margin: 4px 0 0; font-size: 20px; font-weight: 600; }
.pergunta .formulario + .em-linha { margin-top: 8px; }
.escolha > .campo, .escolha > .ajuda { grid-column: 1 / -1; }
.escolha > .subtitulo-escolha, .escolha > .opcao-link { grid-column: 1 / -1; margin: 4px 0 0; }
.subtitulo-escolha { font-weight: 600; }
/* Caixa dos próximos meses (PLANO.md 13.7) */
.negativo { color: var(--erro); }
.lista-calendario { list-style: none; padding: 0; }
.lista-calendario > li { padding: 10px 0; border-bottom: 1px solid #E3E6E5; }
.lista-calendario > li > p { margin: 4px 0; }
.lista-calendario ul { list-style: none; padding: 0; margin: 4px 0; }
.lista-calendario ul li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; }
.lista-fechamento { list-style: none; padding: 0; margin: 0 0 16px; }
.lista-fechamento li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--cal); }
.lista-fechamento .marca { flex: 0 0 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; background: var(--cal); }
.lista-fechamento li[data-situacao="ok"] .marca { background: var(--eucalipto); color: #fff; }
.lista-fechamento li[data-situacao="bloqueia"] .marca, .lista-fechamento li[data-situacao="atencao"] .marca { background: var(--erro); color: #fff; }
.baixar { display: flex; gap: 16px; flex-wrap: wrap; margin: 8px 0; font-size: 14px; }

/* Perfis (D69 e D70): quem usa o sistema e o selo do contador. */
.visualmente-oculto { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.formulario input[type="email"], .formulario input[type="password"], .formulario textarea { width: 100%; padding: 12px; font-size: 17px; border: 1px solid #C9CFCF; border-radius: 8px; background: #fff; font-family: inherit; }
.escolha-perfil { grid-template-columns: 1fr; }
.selo-contador { display: inline-block; margin: 4px 0; padding: 8px 12px; border-radius: 8px; background: #E3F0E8; color: #2F6B4F; font-weight: 500; }
.lista-contas li form.em-linha { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.lista-contas li select { padding: 10px; font-size: 16px; border: 1px solid #C9CFCF; border-radius: 8px; background: #fff; }
button.secundario { background: var(--cal); color: var(--petroleo); border: 1px solid var(--petroleo); }
/* Código do celular (D72): o QR cabe na largura do celular e a chave quebra em grupos. */
.qr { max-width: 260px; margin: 12px 0; }
.qr .codigo-qr { display: block; width: 100%; height: auto; border-radius: 8px; }
[data-bloco="chave"] { word-break: break-word; letter-spacing: 1px; }
.codigos-recuperacao { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.codigos-recuperacao code { font-size: 18px; letter-spacing: 1px; }

/* Bloco F (D78): "E se…?" e as tabelas de imposto. */
.lista-e-se { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin: 12px 0; }
.lista-e-se .opcao { color: var(--texto); text-decoration: none; min-height: 44px; }
.lista-e-se .opcao.ativa { border: 2px solid var(--petroleo); font-weight: 600; }
.campo select { width: 100%; padding: 12px; font-size: 17px; border: 1px solid #C9CFCF; border-radius: 8px; background: #fff; }
.formulario-e-se { margin: 16px 0; }
.tabela-imposto { margin: 8px 0; padding: 8px 12px; border: 1px solid #C9CFCF; border-radius: 10px; }
.tabela-imposto summary { cursor: pointer; font-weight: 500; min-height: 44px; display: flex; align-items: center; }
.e-se { margin-top: 16px; }
.e-se .cartao-link { grid-template-columns: 1fr; } /* o título "E se…?" não fica espremido numa coluna (Q35) */