/* Orçamento Fácil — letras grandes, alto contraste, tudo cabendo na tela. */
@font-face { font-family: "Atkinson"; src: url("fontes/AtkinsonHyperlegible-Regular.ttf"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson"; src: url("fontes/AtkinsonHyperlegible-Bold.ttf"); font-weight: 700; font-display: swap; }

:root {
  --tinta: #17202B; --suave: #44505F; --linha: #D3D9E1; --campo: #5B6675;
  --erro: #B42318; --erro-claro: #FDECEA; --ok: #15703A; --ok-claro: #E3F3E8; --zap: #157A3A;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: #E9EDF2; color: var(--tinta);
  font-family: "Atkinson", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 19px; line-height: 1.35;
  -webkit-text-size-adjust: 100%;
}

/* ---------- Estrutura: topo e base fixos, só o meio rola se precisar ---------- */
.tela {
  height: 100vh; height: 100dvh; max-width: 520px; margin: 0 auto;
  display: flex; flex-direction: column; background: var(--fundo);
}
.topo { flex-shrink: 0; padding: 10px 18px 0; }
.meio { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 18px 14px; display: flex; flex-direction: column; gap: 14px; }
.base {
  flex-shrink: 0; padding: 12px 18px calc(14px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--linha); background: var(--fundo);
}
.base-mini { padding-top: 4px; padding-bottom: calc(6px + env(safe-area-inset-bottom)); align-items: center; }
.base form { display: flex; justify-content: center; }

h1 { margin: 0; font-size: 26px; line-height: 1.15; }
p { margin: 0; }
.sub { color: var(--suave); font-size: 18px; }
.dica { color: var(--suave); font-size: 16px; }
.centro { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding-top: 12px; }
.centro-texto { text-align: center; }
.vazio { color: var(--suave); text-align: center; padding: 16px 0; }
.perigo { color: var(--erro) !important; }

/* ---------- Topo ---------- */
.topo-linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; }
.topo-nome { font-weight: 700; font-size: 19px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topo-passo { font-weight: 700; color: var(--suave); font-size: 17px; }
.voltar { display: inline-flex; align-items: center; gap: 2px; min-height: 48px; padding-right: 10px; color: var(--cor); font-weight: 700; font-size: 20px; text-decoration: none; }
.progresso { display: flex; flex-direction: column; gap: 6px; padding-bottom: 4px; }
.progresso p { font-size: 16px; font-weight: 700; color: var(--suave); }
.barra { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 5px; }
.barra span { height: 8px; border-radius: 4px; background: var(--linha); }
.barra span.feito { background: var(--cor); }

/* ---------- Campos ---------- */
form { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
label { font-weight: 700; font-size: 18px; }
.etiqueta { font-size: 13px; font-weight: 700; padding: 1px 7px; border-radius: 99px; background: #EEF1F5; color: var(--suave); vertical-align: 2px; text-transform: uppercase; }
.etiqueta.obrig { background: #FFF1D6; color: #7A4B00; }
input[type="text"], input[type="tel"], input[type="email"], input[type="password"], select, textarea {
  width: 100%; height: 54px; padding: 0 14px; border: 2px solid var(--campo); border-radius: 10px;
  font: inherit; font-size: 21px; color: var(--tinta); background: #fff;
}
textarea { height: auto; padding: 10px 14px; resize: none; line-height: 1.35; }
select { appearance: none; -webkit-appearance: none; padding-right: 36px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%2317202B' stroke-width='2.5'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 10px center; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 3px solid #F59E0B; outline-offset: 2px; }
input[type="color"] { width: 100%; height: 54px; padding: 3px; border: 2px solid var(--campo); border-radius: 10px; background: #fff; }
.campo-grande { height: 72px !important; font-size: 34px !important; font-weight: 700; text-align: center; }
.linha { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.linha input { flex: 1; min-width: 0; }
.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grade-2-1 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 10px; }
.grade-2-1.grade-inv { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.dinheiro { display: flex; align-items: center; gap: 8px; height: 64px; padding: 0 14px; border: 2px solid var(--cor); border-radius: 12px; background: #fff; }
.dinheiro span { font-size: 24px; font-weight: 700; color: var(--suave); }
.dinheiro input { border: 0; height: 58px; padding: 0; font-size: 30px; font-weight: 700; }
.dinheiro input:focus { outline: none; }
.dinheiro:focus-within { outline: 3px solid #F59E0B; outline-offset: 2px; }
.marcar { display: flex; align-items: center; gap: 10px; font-weight: 400; min-height: 48px; }
.marcar input { width: 26px; height: 26px; accent-color: var(--cor); }
.marcar-mini { font-size: 17px; min-height: 44px; }

/* ---------- Botões ---------- */
.botao, .botao-texto, .botao-mini, .botao-gigante { font-family: inherit; cursor: pointer; text-decoration: none; }
.botao {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 60px; padding: 8px 16px;
  border: 0; border-radius: 14px; background: var(--cor); color: var(--cor-texto); font-size: 22px; font-weight: 700;
}
.botao:active { background: var(--cor-escura); }
.botao-contorno { background: #fff; color: var(--cor); border: 2px solid var(--cor); min-height: 56px; }
.botao-zap { background: var(--zap); color: #fff; }
.botao-texto { background: none; border: 0; min-height: 44px; padding: 0 10px; color: var(--cor); font-size: 19px; font-weight: 700; text-decoration: underline; }
.botao-mini {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 12px; flex-shrink: 0;
  border: 2px solid var(--cor); border-radius: 10px; background: #fff; color: var(--cor); font-size: 17px; font-weight: 700;
}
.botao-mini.perigo { border-color: var(--erro); }
.botao-gigante {
  width: 100%; min-height: 110px; display: flex; align-items: center; justify-content: center; gap: 14px;
  border: 0; border-radius: 18px; background: var(--cor); color: var(--cor-texto); font-size: 27px; font-weight: 700;
}
.botao-gigante .mais { width: 50px; height: 50px; border-radius: 25px; background: var(--cor-texto); color: var(--cor); font-size: 38px; line-height: 50px; text-align: center; }
.botao-arquivo { display: flex; align-items: center; justify-content: center; min-height: 64px; border: 2px dashed var(--cor); border-radius: 14px; color: var(--cor); cursor: pointer; }
.botao-arquivo input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.botao-arquivo:focus-within { outline: 3px solid #F59E0B; }

/* ---------- Escolhas grandes (radio / checkbox) ---------- */
.escolha-2, .escolha-3, .grade-formas { display: grid; gap: 8px; }
.escolha-2 { grid-template-columns: 1fr 1fr; }
.escolha-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade-formas { grid-template-columns: 1fr 1fr; }
.opcao { position: relative; display: block; cursor: pointer; }
.opcao input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.opcao span {
  display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 56px; padding: 6px 8px;
  border: 2px solid var(--campo); border-radius: 12px; background: #fff; font-size: 18px; font-weight: 700; text-align: center; line-height: 1.15;
}
.opcao small { font-size: 14px; font-weight: 400; color: var(--suave); }
.opcao-alta span { min-height: 76px; font-size: 28px; }
.opcao input:checked + span { border: 3px solid var(--cor); background: #EEF2F8; background: color-mix(in srgb, var(--cor) 12%, #fff); color: var(--cor-escura); }
.opcao input:focus-visible + span { outline: 3px solid #F59E0B; outline-offset: 2px; }
.opcao-marcar input:checked + span::before { content: "✓ "; }

/* Campos que aparecem conforme a escolha (sem JavaScript) */
form:not(:has(input[value="completo"]:checked)) .so-completo { display: none; }
form:not(:has(input[value="reais"]:checked)) .se-reais { display: none; }
form:not(:has(input[value="porcento"]:checked)) .se-porcento { display: none; }
form:not(:has(.credito input:checked)) .se-credito { display: none; }

/* ---------- Listas ---------- */
.titulo-secao { margin: 4px 0 0; font-size: 18px; color: var(--suave); }
.lista-rolavel { display: flex; flex-direction: column; gap: 8px; }
.item {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; min-height: 64px;
  border: 2px solid var(--linha); border-radius: 12px; background: #fff; color: var(--tinta); text-decoration: none;
}
.item-esq { display: flex; flex-direction: column; min-width: 0; }
.item-esq strong { overflow-wrap: anywhere; }
.item-esq small, .item-dir small { font-size: 15px; color: var(--suave); }
.item-dir { display: flex; flex-direction: column; align-items: flex-end; font-weight: 700; white-space: nowrap; }
.item-acoes { flex-wrap: wrap; }
.item-acoes .acoes { flex-basis: 100%; display: flex; gap: 8px; }
.item-acoes form { display: contents; }
.inativo { opacity: .55; }
.total-linha { display: flex; justify-content: space-between; align-items: baseline; font-size: 20px; }
.total-linha strong { font-size: 26px; }
.cartao-aviso { display: block; padding: 12px 14px; border-radius: 12px; background: #FFF4DB; border: 2px solid #E0A526; color: var(--tinta); text-decoration: none; }
.menu { display: flex; flex-direction: column; border: 2px solid var(--linha); border-radius: 14px; overflow: hidden; background: #fff; }
.menu a { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 58px; padding: 0 16px; color: var(--tinta); text-decoration: none; font-weight: 700; border-top: 1px solid var(--linha); }
.menu a:first-child { border-top: 0; }
.menu a span { color: var(--suave); font-weight: 400; font-size: 16px; white-space: nowrap; }

/* ---------- Resumo ---------- */
.resumo { display: flex; flex-direction: column; gap: 8px; }
.bloco { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 9px 12px; border: 2px solid var(--linha); border-radius: 12px; background: #fff; }
.bloco > div { min-width: 0; flex: 1; }
.bloco small { font-size: 13px; font-weight: 700; color: var(--suave); letter-spacing: .04em; }
.bloco p { font-size: 17px; overflow-wrap: anywhere; }
.linha-item { display: flex; justify-content: space-between; gap: 8px; }
.linha-item span:last-child { white-space: nowrap; font-weight: 700; }
.bloco .botao-mini { min-height: 40px; font-size: 15px; padding: 0 10px; }

/* ---------- Marca, avisos, imagens ---------- */
.marca { display: flex; align-items: center; gap: 12px; padding-top: 18px; }
.marca-icone { width: 56px; height: 56px; border-radius: 14px; background: var(--cor); color: var(--cor-texto); display: flex; align-items: center; justify-content: center; }
.marca-logo { max-height: 64px; max-width: 160px; }
.marca-nome { font-size: 25px; font-weight: 700; }
.aviso { padding: 10px 14px; border-radius: 10px; font-weight: 700; font-size: 17px; }
.aviso-erro { background: var(--erro-claro); color: var(--erro); }
.aviso-ok { background: var(--ok-claro); color: var(--ok); }
.previa-img { display: flex; justify-content: center; padding: 10px; border: 1px solid var(--linha); border-radius: 12px; background: #fff; }
.previa-img img { max-height: 120px; max-width: 100%; }
.previa-baixa img { max-height: 60px; }
.logo-mini { max-height: 44px; max-width: 100px; }
.quadro { width: 100%; aspect-ratio: 3 / 1; border: 2px dashed var(--campo); border-radius: 12px; background: #fff; touch-action: none; }
.selo-ok { width: 80px; height: 80px; border-radius: 40px; background: var(--ok-claro); color: var(--ok); display: flex; align-items: center; justify-content: center; }
.lista-ok { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 18px; }
.lista-ok li::before { display: inline-block; width: 28px; font-weight: 700; }
.lista-ok .ok::before { content: "✓"; color: var(--ok); }
.lista-ok .falta { color: var(--suave); }
.lista-ok .falta::before { content: "–"; }
.amostra-tema { display: flex; justify-content: center; padding: 14px; border-radius: 12px; border: 1px solid var(--linha); }
.amostra-tema span { padding: 12px 24px; border-radius: 12px; font-weight: 700; }

/* ---------- Visualizar (modal) ---------- */
.modal { width: 100%; max-width: 560px; height: 100%; max-height: 100dvh; margin: auto; padding: 0; border: 0; background: #2B323C; }
.modal::backdrop { background: rgba(0, 0, 0, .6); }
.modal[open] { display: flex; flex-direction: column; }
.modal-topo { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: #fff; }
.modal-paginas { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.modal-paginas img { width: 100%; height: auto; background: #fff; border-radius: 4px; }
.modal-paginas p { color: #fff; text-align: center; }

/* ---------- Área do administrador: visual próprio ---------- */
.modo-admin { --cor: #1F2937; --cor-escura: #111827; --cor-texto: #FFFFFF; --fundo: #F4F5F7; background: #CBD2DB; }
.faixa-admin { margin: -10px -18px 6px; padding: 8px 18px; background: #111827; color: #FBBF24; font-size: 15px; font-weight: 700; letter-spacing: .06em; }

/* Celulares pequenos */
@media (max-height: 680px) {
  body { font-size: 18px; }
  h1 { font-size: 23px; }
  input[type="text"], input[type="tel"], input[type="email"], input[type="password"], select { height: 48px; font-size: 19px; }
  .botao { min-height: 54px; font-size: 20px; }
  .meio { gap: 10px; }
  form { gap: 9px; }
  .botao-gigante { min-height: 90px; }
}

/* ajustes: itens compactos, resumo, zoom no modal, grades alinhadas */
.grade-2, .grade-2-1 { align-items: end; }
.item-compacto { gap: 8px; min-height: 60px; padding: 8px 10px 8px 14px; }
.item-compacto .item-esq { flex: 1; }
.item-compacto .item-esq strong { font-size: 17px; line-height: 1.2; }
.item-compacto .item-esq b { font-size: 17px; }
.item-compacto form { display: flex; }
.item-compacto .botao-mini { min-height: 44px; padding: 0 10px; font-size: 16px; }
.bloco { display: block; }
.bloco-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.link-alterar { color: var(--cor); font-weight: 700; font-size: 16px; min-height: 36px; display: inline-flex; align-items: center; padding: 0 4px; text-decoration: underline; }
.modal-paginas img { cursor: zoom-in; }
.modal-paginas.zoom { overflow-x: auto; }
.modal-paginas.zoom img { width: 220%; max-width: none; cursor: zoom-out; }
.dica-modal { color: #E5E7EB !important; font-size: 15px; }

/* ---------- Carregando ---------- */
.carregando { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .78); }
.carregando[hidden] { display: none; }
.carregando > div { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 28px; border-radius: 16px; background: #fff; box-shadow: 0 8px 30px rgba(0, 0, 0, .18); }
.carregando p { font-size: 20px; font-weight: 700; }
.girando { display: inline-block; width: 22px; height: 22px; border: 3px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: girar .8s linear infinite; vertical-align: -4px; margin-right: 8px; }
.girando.grande { width: 46px; height: 46px; border-width: 5px; color: var(--cor); margin: 0; }
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .girando { animation-duration: 2.4s; } }
.botao:disabled { opacity: .7; cursor: wait; }

/* ---------- Frases prontas ---------- */
.modal-claro { background: var(--fundo); max-height: 80dvh; height: auto; border-radius: 16px 16px 0 0; margin-bottom: 0; }
.lista-frases { overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.frase { min-height: 56px; padding: 10px 14px; border: 2px solid var(--campo); border-radius: 12px; background: #fff; font: inherit; font-size: 18px; font-weight: 700; text-align: left; cursor: pointer; }
.frase:active { border-color: var(--cor); }
#abrir-frases { align-self: flex-start; }
.titulo-secao { margin-top: 8px; }

/* ---------- Computador (telas largas) ---------- */
@media (min-width: 900px) {
  body { font-size: 20px; padding: 24px 0; }
  .tela { max-width: 820px; height: calc(100vh - 48px); height: calc(100dvh - 48px); border-radius: 20px; box-shadow: 0 10px 40px rgba(15, 23, 42, .15); overflow: hidden; }
  .topo { padding: 18px 40px 0; }
  .meio { padding: 12px 40px 20px; }
  .base { padding: 16px 40px 20px; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
  .base > .botao, .base > form, .base > .grade-2 { width: auto; min-width: 260px; }
  .base > .grade-2 { display: flex; gap: 10px; }
  .base > .grade-2 .botao { width: auto; min-width: 200px; }
  .base .total-linha { flex-basis: 100%; }
  .base-mini { justify-content: center; }
  .faixa-admin { margin: -18px -40px 8px; padding: 10px 40px; }
  .grade-desktop { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; align-items: end; }
  .escolha-3 .opcao span, .grade-formas .opcao span { min-height: 64px; }
  .botao-gigante { min-height: 140px; font-size: 32px; }
  .modal { max-width: 900px; border-radius: 16px; height: 92dvh; }
  .modal-claro { max-width: 640px; height: auto; border-radius: 16px; margin: auto; }
  .lista-rolavel { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .lista-rolavel > .vazio { grid-column: 1 / -1; }
}
.linha { flex-direction: row; }
.base .grade-2 .botao { font-size: 18px; padding: 8px 6px; min-height: 56px; }

/* ---------- Escolha do modelo (miniaturas) ---------- */
.escolha-modelo .opcao span { min-height: 230px; gap: 6px; font-size: 20px; }
.mini { display: flex; flex-direction: column; gap: 4px; width: 96px; height: 134px; padding: 8px; background: #fff; border: 1px solid #C9CED6; border-radius: 4px; box-shadow: 0 2px 6px rgba(0, 0, 0, .1); }
.mini b, .mini em, .mini u, .mini s { display: block; border-radius: 2px; }
.mini-classico b { height: 16px; border: 1.5px solid #333; border-radius: 4px; background: linear-gradient(90deg, #fff 65%, #E3E3E3 65%); }
.mini-classico em { height: 8px; border: 1px solid #555; border-radius: 3px; }
.mini-classico em + em { background: #E3E3E3; }
.mini-classico u { height: 7px; border-bottom: 1px solid #888; border-left: 1px solid #333; border-right: 1px solid #333; }
.mini-classico s { height: 12px; width: 50%; margin-left: auto; border: 1.5px solid #333; border-radius: 3px; background: #E3E3E3; }
.mini-moderno { padding-top: 0; overflow: hidden; }
.mini-moderno b { height: 4px; margin: 0 -8px 6px; background: var(--cor); border-radius: 0; }
.mini-moderno em { height: 7px; width: 70%; background: #D9DEE5; }
.mini-moderno em + em { width: 45%; margin-left: auto; }
.mini-moderno u { height: 7px; background: #F1F3F6; }
.mini-moderno u:nth-of-type(odd) { background: #E6E9EE; }
.mini-moderno s { height: 10px; width: 45%; margin-left: auto; background: var(--cor); }

/* ---------- Teclado: a tela ocupa só a área visível acima dele (celular) ---------- */
@media (max-width: 899px) {
  .tela { height: var(--altura-visivel, 100dvh); }
}

/* ---------- Assinatura: quadro maior com linha-guia ---------- */
.quadro-caixa { position: relative; }
.quadro-caixa .quadro { aspect-ratio: 900 / 420; display: block; }
.quadro-guia {
  position: absolute; left: 6%; right: 6%; top: 68%; border-top: 2px solid #9AA3AE; pointer-events: none;
  font-size: 13px; color: #6B7280; text-align: right; padding-top: 2px;
}

/* ---------- Abas (frases prontas) ---------- */
.abas { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; border-radius: 12px; background: #EEF1F5; }
.aba { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 9px; color: var(--suave); font-weight: 700; text-decoration: none; }
.aba.ativa { background: #fff; color: var(--cor); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }

/* ---------- Escolha do modelo: lista com miniatura ---------- */
.escolha-modelo { grid-template-columns: 1fr !important; }
.escolha-modelo .opcao span { min-height: 0; flex-direction: row; justify-content: flex-start; gap: 14px; padding: 10px 14px; text-align: left; font-size: 19px; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; }
.escolha-modelo .mini { grid-row: 1 / 3; width: 58px; height: 82px; padding: 5px; gap: 3px; }
.escolha-modelo small { align-self: start; }
.mini-celular { width: 40px !important; padding: 0 !important; overflow: hidden; margin: 0 9px; }
.mini-celular b { height: 4px; background: var(--cor); border-radius: 0; }
.mini-celular em { height: 8px; margin: 3px 4px; background: #D9DEE5; }
.mini-celular u { height: 6px; margin: 2px 4px; background: #EEF1F5; }
.mini-celular s { height: 9px; margin: 3px 0; background: var(--cor); border-radius: 0; }
@media (min-width: 900px) { .escolha-modelo { grid-template-columns: repeat(3, 1fr) !important; } .escolha-modelo .opcao span { min-height: 120px; } }

/* ---------- Cor do orçamento (na escolha do modelo) ---------- */
form:has(input[name="modelo"][value="classico"]:checked) .cor-orcamento { display: none; }
.cor-orcamento { margin: 4px 0 0; padding: 0; border: 0; }
.cor-orcamento legend { font-size: 18px; font-weight: 700; padding: 0; margin-bottom: 8px; }
.amostras-orc { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; }
.amostra-orc { position: relative; cursor: pointer; }
.amostra-orc > input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.amostra-orc > span { display: block; aspect-ratio: 1; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px var(--linha); }
.amostra-orc > input:checked + span { box-shadow: 0 0 0 3px var(--tinta); }
.amostra-orc > input:focus-visible + span { outline: 3px solid #F59E0B; outline-offset: 2px; }
.amostra-outra > span { background: conic-gradient(#e11d48, #f59e0b, #16a34a, #0ea5e9, #6d28d9, #e11d48); overflow: hidden; }
.amostra-outra input[type="color"] { opacity: 0; width: 100%; height: 100%; border: 0; padding: 0; cursor: pointer; }
.escolha-modelo .mini-moderno b, .escolha-modelo .mini-moderno s,
.escolha-modelo .mini-celular b, .escolha-modelo .mini-celular s { background: var(--cor-orc, var(--cor)); }
.so-leitor { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.amostra-orc > input { z-index: 1; }

/* ---------- Observações: uma frase por linha no resumo ---------- */
.quebra { white-space: pre-line; }

/* ---------- Selo obrigatório/opcional não quebra sozinho ---------- */
.etiqueta { white-space: nowrap; }

/* ---------- Dica: adicionar à Tela de Início ---------- */
.cartao-dica { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 14px; border-radius: 12px; background: #EEF2F8; border: 2px solid var(--linha); font-size: 17px; }
.cartao-dica[hidden] { display: none; }

/* ---------- Teclado aberto (celular): topo e botão compactos ---------- */
.so-teclado { display: none; }
@media (max-width: 899px) {
  .teclado .so-teclado { display: inline; }
  .teclado .topo { padding-top: 2px; }
  .teclado .topo-linha { min-height: 40px; }
  .teclado .voltar { min-height: 40px; font-size: 18px; }
  .teclado .voltar svg { width: 22px; height: 22px; }
  .teclado .topo-passo { font-size: 16px; }
  .teclado .progresso { gap: 0; padding-bottom: 2px; }
  .teclado .progresso p { display: none; }
  .teclado .barra span { height: 5px; }
  .teclado .meio { padding-top: 6px; }
  .teclado .meio > h1, .teclado .meio > .sub { display: none; }
  .teclado .base { padding-top: 6px; padding-bottom: 6px; gap: 6px; }
  .teclado .base .botao { min-height: 48px; font-size: 20px; }
  .teclado .base .total-linha { display: none; }
}

/* ---------- Modelo do orçamento: cartões compactos e cor em destaque ---------- */
.escolha-modelo { gap: 6px !important; }
.escolha-modelo .opcao span { padding: 6px 12px; gap: 0 12px; font-size: 18px; line-height: 1.15; }
.escolha-modelo .mini { width: 34px; height: 48px; padding: 3px; gap: 2px; }
.escolha-modelo .mini-celular { width: 24px !important; margin: 0 5px; }
.escolha-modelo small { font-size: 14px; }
.cor-orcamento { margin-top: 6px; padding: 8px 12px 12px; border: 2px solid var(--cor); border-radius: 12px; background: #fff; }
.cor-orcamento legend { padding: 0 6px; margin-bottom: 6px; }
@media (min-width: 900px) { .escolha-modelo .opcao span { min-height: 0; } }

/* ---------- Botão Novo orçamento com linha de apoio ---------- */
.botao-gigante-texto { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; text-align: left; }
.botao-gigante-texto small { font-size: 17px; font-weight: 400; opacity: .92; margin-top: 4px; }

/* ---------- Franquia e vencimento ---------- */
.aviso-atencao { background: #FFF4DB; color: #7A4B00; border: 2px solid #E0A526; font-weight: 700; }
.bloqueado { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 18px; background: #FDECEA; border: 2px solid var(--erro); color: var(--erro); font-size: 18px; }
.bloqueado span { color: var(--tinta); font-size: 16px; }
.bloco small + p { margin-bottom: 6px; }

/* ---------- Versão ---------- */
.versao { margin-top: auto; padding-top: 12px; text-align: center; font-size: 14px; color: var(--suave); }
.marca-nome { min-width: 0; overflow-wrap: anywhere; }
.marca-logo { max-width: min(160px, 40vw); }
input[type="date"] { width: 100%; height: 54px; padding: 0 14px; border: 2px solid var(--campo); border-radius: 10px; font: inherit; font-size: 21px; color: var(--tinta); background: #fff; }

/* ---------- Meu plano ---------- */
.plano-valor { font-size: 20px !important; font-weight: 700; margin-top: 2px; }
.plano-barra { height: 12px; margin: 8px 0 4px; border-radius: 6px; background: var(--linha); overflow: hidden; }
.plano-barra span { display: block; height: 100%; border-radius: 6px; background: var(--cor); }
.plano-barra.quase span { background: #E0A526; }
.plano-barra.cheia span { background: var(--erro); }
/* listas longas não encolhem: o meio da tela rola */
.meio > * { flex-shrink: 0; }