/* Diz o Preço · V3
   Paleta oficial Elisangela Baptista: #004987 · #2C79B1 · #61B3E4 · #B2B3B2 · #FFFFFF
   Assinatura visual: a etiqueta de preço, pendurada pelo cordão, que balança quando o preço muda. */

:root {
  --tinta: #004987;
  --tinta-escura: #00335F;
  --oceano: #2C79B1;
  /* mesmo azul, meio tom abaixo: existe para texto pequeno sobre o papel, onde o
     oceano não alcança os 4,5:1 exigidos. Medido: 5,2:1. */
  --oceano-escuro: #26699C;
  --ceu: #61B3E4;
  --nevoa: #B2B3B2;
  --branco: #FFFFFF;
  --papel: #EEF3F7;
  --grafite: #0D2335;
  --texto-2: #52667A;
  --linha: #DCE4EB;
  --linha-forte: #C3CFDA;
  --tinta-10: #E4EEF6;
  --ceu-15: #E3F2FB;
  --ambar: #E49B2E;
  /* Desperdício. Medido com o validador de paleta (04/10/2026): separação CVD de
     30,4 do cinza do material e 33,1 do âmbar da mão de obra, e ΔE 19,6 do
     vermelho de alerta — longe o bastante para a fatia não ser lida como erro.
     Um barro (#9E5544) ficava a 5,8 do alerta e foi descartado por isso. */
  --ameixa: #6E4B8E;
  --alerta: #B8412A;
  --alerta-bg: #FBEEEA;
  --atencao: #9A6410;
  --atencao-bg: #FDF4E3;
  --ok: #1E7552;
  --ok-bg: #E5F3EC;

  --c-custo: var(--nevoa);
  --c-fixos: var(--tinta);
  --c-variaveis: var(--oceano);
  --c-margem: var(--ceu);
  --c-mo: var(--ambar);
  --c-desperdicio: var(--ameixa);

  --f-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --f-corpo: 'Instrument Sans', 'Segoe UI', system-ui, sans-serif;
  --f-mono: 'Geist Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --r-sm: 8px;
  --r: 14px;
  --r-lg: 20px;
  --sombra: 0 1px 2px rgba(13, 35, 53, .05), 0 6px 20px rgba(13, 35, 53, .06);
  --sombra-alta: 0 24px 60px rgba(0, 38, 72, .22);
  --sidebar: 248px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--f-corpo);
  font-size: 15px;
  line-height: 1.5;
  color: var(--grafite);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
[hidden] { display: none !important; }
img { max-width: 100%; }
a { color: var(--oceano); }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2.5px solid var(--ceu); outline-offset: 2px; border-radius: 6px; }
.muted { color: var(--texto-2); }
.ic { flex-shrink: 0; display: block; }

/* ---------- Boot ---------- */
.boot { min-height: 100vh; display: grid; place-items: center; background: var(--tinta); }
.boot-logo { width: 72px; height: 72px; animation: girar 1.6s cubic-bezier(.5, 0, .5, 1) infinite; filter: drop-shadow(0 6px 20px rgba(0,0,0,.25)); }
@keyframes girar { to { transform: rotate(360deg); } }

/* =================================================================
   ETIQUETA DE PREÇO (assinatura)
   ================================================================= */
.tag-area { position: relative; padding-left: 70px; filter: drop-shadow(0 14px 22px rgba(0, 51, 95, .16)) drop-shadow(0 2px 3px rgba(0, 51, 95, .12)); }
.tag-string { position: absolute; left: 0; top: -38px; width: 96px; height: calc(50% + 38px); color: var(--nevoa); overflow: visible; }
.tag {
  --furo: 24px;
  position: relative;
  display: block;
  padding: 18px 26px 18px 50px;
  background: var(--branco);
  color: var(--tinta);
  border-radius: 6px 16px 16px 6px;
  clip-path: polygon(30px 0, 100% 0, 100% 100%, 30px 100%, 0 50%);
  -webkit-mask: radial-gradient(circle at var(--furo) 50%, transparent 5.5px, #000 6px);
  mask: radial-gradient(circle at var(--furo) 50%, transparent 5.5px, #000 6px);
  transform-origin: var(--furo) 50%;
  rotate: -2deg;
}
.tag-label { margin: 0; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-2); }
.tag-value { margin: 2px 0 0; font-family: var(--f-display); font-weight: 800; font-size: clamp(34px, 4.2vw, 46px); line-height: 1.05; letter-spacing: -.02em; white-space: nowrap; }
.tag-foot { margin: 6px 0 0; font-size: 12.5px; color: var(--texto-2); }
.tag-tinta { background: var(--tinta); color: var(--branco); }
.tag-tinta .tag-label, .tag-tinta .tag-foot { color: #A9C6E0; }
.tag-invalida { background: var(--alerta); color: var(--branco); }
.tag-invalida .tag-label, .tag-invalida .tag-foot { color: #F6D2C9; }
.tag-sm { --furo: 18px; padding: 12px 18px 12px 38px; clip-path: polygon(24px 0, 100% 0, 100% 100%, 24px 100%, 0 50%); rotate: -1.5deg; }
.tag-sm .tag-value { font-size: 32px; }
.tag.swing { animation: balanco 1.1s cubic-bezier(.28, .84, .42, 1); }
@keyframes balanco {
  0% { rotate: -2deg; }
  18% { rotate: 5deg; }
  40% { rotate: -5deg; }
  62% { rotate: 2.5deg; }
  82% { rotate: -2.8deg; }
  100% { rotate: -2deg; }
}

/* barra de composição */
.comp-bar { display: flex; width: 100%; height: 10px; border-radius: 99px; overflow: hidden; background: var(--linha); gap: 2px; }
.comp-bar .seg { height: 100%; transition: width .6s cubic-bezier(.3, .8, .3, 1); min-width: 0; }
.comp-bar .seg:first-child { border-radius: 99px 0 0 99px; }
.comp-bar .seg:last-child { border-radius: 0 99px 99px 0; }
.comp-bar-lg { height: 16px; margin: 14px 0 16px; }
.comp-bar-tag { margin-top: 12px; height: 8px; }
.seg-material { background: var(--c-custo); }
.seg-fixos { background: var(--c-fixos); }
.seg-taxas { background: var(--c-variaveis); }
.seg-lucro { background: var(--c-margem); }
.seg-maoDeObra { background: var(--c-mo); }
.seg-desperdicio { background: var(--c-desperdicio); }
.dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; flex-shrink: 0; }

.legenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.legenda li { display: grid; grid-template-columns: 12px 1fr auto 44px; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--linha); font-size: 14px; }
.legenda li:last-child { border-bottom: 0; }
.leg-nome { color: var(--texto-2); }
.leg-val { font-weight: 600; }
.leg-pct { font-family: var(--f-mono); font-size: 12px; color: var(--texto-2); text-align: right; }

/* =================================================================
   ENTRADA
   ================================================================= */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1.1fr .9fr; background: var(--branco); }
.auth-hero {
  position: relative; overflow: hidden; color: var(--branco);
  background:
    radial-gradient(900px 500px at 110% -10%, rgba(97, 179, 228, .35), transparent 60%),
    radial-gradient(700px 600px at -20% 120%, rgba(44, 121, 177, .55), transparent 60%),
    var(--tinta);
  display: flex; align-items: center; padding: 56px clamp(28px, 6vw, 88px);
}
.auth-hero::after {
  content: ""; position: absolute; right: -180px; bottom: -180px; width: 520px; height: 520px; border-radius: 50%;
  border: 70px solid rgba(255, 255, 255, .05); pointer-events: none;
}
.auth-hero-inner { position: relative; z-index: 1; max-width: 560px; }
.auth-brand { display: flex; align-items: center; gap: 10px; font-family: var(--f-display); font-weight: 650; font-size: 18px; margin-bottom: 44px; }
.auth-brand img { width: 38px; height: 38px; background: #fff; border-radius: 50%; padding: 3px; }
.auth-title { font-family: var(--f-display); font-weight: 800; font-size: clamp(34px, 4vw, 52px); line-height: 1.04; letter-spacing: -.025em; margin: 0 0 44px; }
.auth-title em { font-style: normal; color: var(--ceu); }
.demo-tag-area { position: relative; padding-left: 70px; margin: 0 0 40px 4px; max-width: 440px; filter: drop-shadow(0 22px 30px rgba(0, 0, 0, .28)); }
.demo-tag-area .tag-string { color: rgba(255, 255, 255, .55); }
.tag-hero .tag-value { font-size: clamp(40px, 5vw, 58px); }
.tag-mini { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--texto-2); }
.tag-mini li { display: flex; align-items: center; gap: 5px; }
.auth-lede { color: #BFD6EA; font-size: 16px; max-width: 460px; margin: 0; }

.auth-panel { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.auth-card { width: 100%; max-width: 380px; }
.auth-card-logo { display: none; width: 56px; height: 56px; margin: 0 auto 18px; }
/* A escolha entrar x criar conta precisa ser lida como pergunta, não como enfeite:
   quem chega pelo link de convite caía no formulário de entrar e inventava uma senha. */
.auth-escolha { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--texto-2); }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: var(--papel); border: 1px solid var(--linha); border-radius: 12px; padding: 5px; margin-bottom: 24px; }
.auth-tabs button { border: 1px solid transparent; background: transparent; padding: 11px 8px; border-radius: 9px; font-weight: 600; font-size: 14px; line-height: 1.2; color: var(--texto-2); }
.auth-tabs button:hover { color: var(--tinta); }
.auth-tabs button.ativo { background: var(--branco); border-color: var(--linha); color: var(--tinta); box-shadow: 0 1px 3px rgba(13, 35, 53, .12); }
/* piscada curta quando o erro indica que a pessoa está na aba errada */
.auth-tabs button.destaque { animation: aba-chama 1.1s ease-in-out 2; }
@keyframes aba-chama {
  0%, 100% { box-shadow: 0 0 0 0 rgba(44, 121, 177, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(44, 121, 177, .30); color: var(--tinta); }
}
@media (prefers-reduced-motion: reduce) {
  .auth-tabs button.destaque { animation: none; box-shadow: 0 0 0 3px rgba(44, 121, 177, .35); color: var(--tinta); }
}
.auth-msg .link-btn { display: inline-block; margin-top: 4px; color: inherit; text-decoration-color: currentColor; }
.auth-card h2 { font-family: var(--f-display); font-weight: 800; font-size: 28px; letter-spacing: -.02em; margin: 0 0 4px; }
.auth-sub { color: var(--texto-2); margin: 0 0 22px; }
.field { display: grid; gap: 6px; margin-bottom: 14px; }
/* senha com o botão de "ver a senha" dentro do campo */
.senha-linha { position: relative; display: block; }
.senha-linha .inp { padding-right: 46px; }
.olho-btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 38px; height: 38px; border: 0; background: none; border-radius: 9px; color: var(--texto-2); }
.olho-btn:hover { color: var(--tinta); background: var(--papel); }
.olho-btn[aria-pressed="true"] { color: var(--oceano); }
.field > span { font-size: 13px; font-weight: 600; color: var(--texto-2); }
.auth-esqueci { justify-self: end; margin: -6px 0 16px auto; display: block; }
.auth-msg { font-size: 14px; padding: 10px 12px; border-radius: var(--r-sm); margin-bottom: 14px; }
.auth-msg.erro { background: var(--alerta-bg); color: var(--alerta); }
.auth-msg.ok { background: var(--ok-bg); color: var(--ok); }
.auth-voltar { margin-top: 16px; }
.auth-demo { margin-top: 22px; display: grid; gap: 14px; text-align: center; }
.auth-demo > span { font-size: 12.5px; color: var(--texto-2); display: flex; align-items: center; gap: 12px; }
.auth-demo > span::before, .auth-demo > span::after { content: ""; flex: 1; height: 1px; background: var(--linha); }
.auth-aviso { font-size: 13px; color: var(--atencao); background: var(--atencao-bg); padding: 10px 12px; border-radius: var(--r-sm); margin-top: 16px; }

/* =================================================================
   CONTROLES
   ================================================================= */
.inp {
  width: 100%; min-width: 0; border: 1.5px solid var(--linha-forte); background: var(--branco); border-radius: 10px;
  padding: 9px 12px; font-size: 15px; transition: border-color .15s, box-shadow .15s;
}
.inp:hover { border-color: #9FB2C4; }
.inp:focus { outline: none; border-color: var(--oceano); box-shadow: 0 0 0 3px rgba(97, 179, 228, .3); }
.inp::placeholder { color: #93A3B2; }
select.inp { appearance: none; padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%2352667A' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }

.num-field { position: relative; display: flex; align-items: center; min-width: 0; }
.num-field .inp { text-align: right; font-weight: 500; }
.num-field .affix { position: absolute; left: 12px; font-size: 13px; color: var(--texto-2); pointer-events: none; }
.num-field .affix-end { left: auto; right: 12px; }
.num-field:has(.affix:not(.affix-end)) .inp { padding-left: 38px; }
/* o espaço à direita cresce com o tamanho do sufixo ("%", "horas", "/hora") para o número não passar por cima.
   CUIDADO: esse espaço é reservado DENTRO do campo. Se a caixa for estreita, o espaçamento sozinho pode
   ocupar a largura inteira e não sobra nada para o número (foi o que aconteceu com a duração: 12px + 46px
   numa coluna de 52px). Em caixa estreita, ponha a unidade FORA do campo, como em .duracao mais abaixo. */
.num-field:has(.affix-end) .inp { padding-right: max(34px, calc(22px + var(--sfx, 1) * 7.5px)); }
.num-grande:has(.affix-end) .inp { padding-right: 60px; }
.num-field.num-hero:has(.affix) .inp { font-family: var(--f-display); font-size: 30px; font-weight: 650; padding: 10px 16px 10px 58px; text-align: left; border-radius: 14px; letter-spacing: -.01em; }
.num-hero .affix { font-size: 20px; left: 18px; font-family: var(--f-display); color: var(--oceano); }
.num-curto { width: 104px; flex-shrink: 0; }
.num-largo { max-width: 280px; }
.num-grande .inp { font-family: var(--f-display); font-size: 22px; font-weight: 650; }

.range { flex: 1; min-width: 0; -webkit-appearance: none; appearance: none; height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--ceu), var(--oceano)); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--branco); border: 3px solid var(--tinta); box-shadow: 0 2px 6px rgba(0, 51, 95, .3); cursor: grab; }
.range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--branco); border: 3px solid var(--tinta); cursor: grab; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1.5px solid transparent; border-radius: 11px;
  padding: 10px 18px; font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap; transition: background .15s, transform .1s, box-shadow .15s;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: default; }
.btn-primario { background: var(--tinta); color: var(--branco); box-shadow: 0 2px 0 var(--tinta-escura); }
.btn-primario:hover { background: var(--tinta-escura); }
.btn-secundario { background: var(--tinta-10); color: var(--tinta); }
.btn-secundario:hover { background: #D3E3F0; }
.btn-fantasma { background: var(--branco); border-color: var(--linha-forte); color: var(--grafite); }
.btn-fantasma:hover { border-color: var(--oceano); color: var(--tinta); }
.btn-perigo:hover { border-color: var(--alerta); color: var(--alerta); }
.btn-sm { padding: 7px 12px; font-size: 14px; border-radius: 9px; }
.btn-bloco { width: 100%; }
.btn.carregando { position: relative; color: transparent; }
.btn.carregando::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff; animation: girar .7s linear infinite; }
.link-btn { background: none; border: 0; padding: 0; color: var(--oceano); font-weight: 600; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(44,121,177,.35); }
.link-btn:hover { color: var(--tinta); }
.icon-btn { display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; border: 0; border-radius: 9px; background: transparent; color: var(--texto-2); }
.icon-btn:hover { background: var(--alerta-bg); color: var(--alerta); }
/* variante neutra: o vermelho acima é do botão de fechar, e em "duplicar" leria como apagar */
.icon-btn-sm { width: 30px; height: 30px; border-radius: 8px; }
.icon-btn-sm:hover { background: var(--papel); color: var(--tinta); }
.drawer-h .icon-btn:hover { background: var(--papel); color: var(--grafite); }
.btn-add {
  display: flex; align-items: center; gap: 8px; width: 100%; border: 1.5px dashed var(--linha-forte); background: transparent; color: var(--oceano);
  font-weight: 600; font-size: 14px; padding: 10px 14px; border-radius: 11px; margin-top: 8px;
}
.btn-add:hover { border-color: var(--oceano); background: var(--ceu-15); }
.chip { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--linha); background: var(--papel); color: var(--texto-2); border-radius: 99px; padding: 4px 11px 4px 8px; font-size: 13px; }
.chip:hover { border-color: var(--oceano); color: var(--tinta); background: var(--ceu-15); }

.segmented { display: inline-grid; grid-auto-flow: column; background: var(--branco); border: 1px solid var(--linha); border-radius: 13px; padding: 4px; gap: 2px; flex-shrink: 0; }
.seg-btn { border: 0; background: transparent; padding: 8px 18px; border-radius: 9px; font-weight: 600; color: var(--texto-2); display: flex; align-items: center; gap: 8px; }
.seg-btn:hover { color: var(--tinta); }
.seg-btn.ativo { background: var(--tinta); color: var(--branco); }
.seg-count { font-family: var(--f-mono); font-size: 11.5px; background: rgba(0, 73, 135, .1); padding: 1px 7px; border-radius: 99px; }
.seg-btn.ativo .seg-count { background: rgba(255, 255, 255, .18); }

.dica { margin: 4px 0 14px; }
.dica summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; color: var(--oceano); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.dica summary::-webkit-details-marker { display: none; }
.dica-corpo { margin-top: 10px; background: var(--ceu-15); border-radius: 12px; padding: 12px 16px; font-size: 14px; }
.dica-corpo p { margin: 0 0 6px; }
.dica-corpo p:last-child { margin: 0; }
.dica-pergunta { font-weight: 600; color: var(--tinta); }
.dica-aviso { color: var(--atencao); }

.alerta { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; border-radius: 12px; padding: 10px 14px; margin-top: 12px; }
.alerta .ic { margin-top: 2px; }
.alerta-alto { background: var(--alerta-bg); color: var(--alerta); }
.alerta-medio { background: var(--atencao-bg); color: var(--atencao); }

/* =================================================================
   ESTRUTURA DO APP
   ================================================================= */
.shell { display: grid; grid-template-columns: var(--sidebar) 1fr; min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 22px 14px;
  background: linear-gradient(180deg, var(--tinta) 0%, #003A6C 100%); color: var(--branco); overflow: hidden;
}
.sidebar::after { content: ""; position: absolute; left: -120px; bottom: -140px; width: 320px; height: 320px; border-radius: 50%; border: 48px solid rgba(97, 179, 228, .08); pointer-events: none; }
.brand { display: flex; align-items: center; gap: 11px; padding: 4px 8px 26px; color: inherit; text-decoration: none; }
.brand-logo { width: 42px; height: 42px; background: var(--branco); border-radius: 50%; padding: 3px; }
.brand-text { display: grid; line-height: 1.15; }
.brand-name { font-family: var(--f-display); font-weight: 800; font-size: 18px; letter-spacing: -.01em; }
.brand-by { font-size: 11.5px; color: #9EBEDB; }
.nav { display: grid; gap: 3px; }
.nav-item { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 11px; color: #C3D8EA; text-decoration: none; font-weight: 500; position: relative; }
.nav-item:hover { background: rgba(255, 255, 255, .07); color: var(--branco); }
.nav-item.ativo { background: rgba(255, 255, 255, .12); color: var(--branco); font-weight: 600; }
.nav-item.ativo::before { content: ""; position: absolute; left: -14px; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: var(--ceu); }
.sidebar-foot { margin-top: auto; position: relative; z-index: 1; border-top: 1px solid rgba(255, 255, 255, .12); padding: 14px 6px 0; display: grid; gap: 10px; }
.user-chip { display: flex; align-items: center; gap: 10px; min-width: 0; }
.user-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--ceu); color: var(--tinta); display: grid; place-items: center; font-weight: 700; flex-shrink: 0; }
.user-email { font-size: 13px; color: #C3D8EA; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-sair { background: transparent; border: 1px solid rgba(255, 255, 255, .25); color: var(--branco); border-radius: 9px; padding: 7px; font-size: 13.5px; font-weight: 600; }
.btn-sair:hover { background: rgba(255, 255, 255, .1); }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; padding: 12px clamp(20px, 3.5vw, 44px);
  background: rgba(238, 243, 247, .86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid transparent;
}
.topbar-logo, .topbar-sair { display: none; }
.topbar-title { font-size: 14px; font-weight: 600; color: var(--texto-2); margin: 0; margin-right: auto; font-family: var(--f-mono); text-transform: uppercase; letter-spacing: .05em; }
.save-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 5px 11px; border-radius: 99px; background: var(--ok-bg); color: var(--ok); transition: background .2s, color .2s; }
.save-pill[data-estado="pendente"], .save-pill[data-estado="salvando"] { background: var(--tinta-10); color: var(--oceano); }
.save-pill[data-estado="erro"], .save-pill[data-estado="limite"] { background: var(--alerta-bg); color: var(--alerta); }
.pill-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pulso 1s ease-in-out infinite; }
@keyframes pulso { 50% { opacity: .3; } }

.view { flex: 1; outline: none; }
.view-inner { max-width: 1240px; margin: 0 auto; padding: 8px clamp(20px, 3.5vw, 44px) 80px; animation: entrar .35s ease-out; }
@keyframes entrar { from { opacity: 0; transform: translateY(6px); } }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin: 12px 0 26px; }
/* Em 12px sobre o papel (#EEF3F7), o oceano dá 4,2:1 — abaixo dos 4,5:1 que texto
   pequeno exige. Um tom mais escuro leva a 5,2:1 sem sair da família da marca. */
.eyebrow { font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--oceano-escuro); margin: 0 0 6px; }
.page-h { font-family: var(--f-display); font-weight: 800; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.08; letter-spacing: -.025em; margin: 0; color: var(--grafite); }
.lede { color: var(--texto-2); margin: 8px 0 0; max-width: 620px; font-size: 16px; }

.card { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--r-lg); box-shadow: var(--sombra); }
.card-h { font-family: var(--f-display); font-weight: 650; font-size: 20px; letter-spacing: -.01em; margin: 0; }
.card-sub { color: var(--texto-2); margin: 2px 0 0; font-size: 14px; }
.stack { display: grid; gap: 16px; }

/* ---------- toasts ---------- */
.toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 100; display: grid; gap: 8px; width: min(440px, calc(100% - 32px)); }
.toast {
  display: flex; align-items: center; gap: 14px; justify-content: space-between; background: var(--grafite); color: var(--branco);
  padding: 12px 14px 12px 18px; border-radius: 14px; box-shadow: var(--sombra-alta); font-size: 14.5px;
  opacity: 0; transform: translateY(12px); transition: opacity .22s, transform .22s;
}
.toast.in { opacity: 1; transform: none; }
.toast button { background: rgba(255, 255, 255, .12); color: var(--ceu); border: 0; border-radius: 8px; padding: 6px 12px; font-weight: 700; }
.toast button:hover { background: rgba(255, 255, 255, .2); }

/* =================================================================
   PAINEL
   ================================================================= */
.painel-head { margin: 12px 0 24px; }
.banner { display: flex; gap: 16px; align-items: center; background: var(--ceu-15); border: 1px solid #C4E2F5; border-radius: var(--r-lg); padding: 16px 20px; margin-bottom: 18px; }
.banner-ic { width: 40px; height: 40px; border-radius: 12px; background: var(--branco); color: var(--oceano); display: grid; place-items: center; flex-shrink: 0; }
.banner p { margin: 2px 0 0; color: var(--texto-2); font-size: 14px; }
.banner-acoes { display: flex; align-items: center; gap: 14px; margin-left: auto; flex-shrink: 0; }

/* Demonstração: faixa no topo e campos só para ver */
.demo-faixa { display: flex; align-items: center; gap: 12px; background: var(--tinta); color: var(--branco); padding: 10px 20px; font-size: 14px; }
.demo-faixa p { margin: 0; flex: 1; line-height: 1.4; }
.demo-faixa svg { flex-shrink: 0; color: var(--ceu); }
.demo-faixa .btn { flex-shrink: 0; background: var(--branco); color: var(--tinta); border: 0; }
.demo-faixa .btn:hover { background: var(--papel); color: var(--tinta); }
.save-pill[data-estado="demo"] { background: var(--tinta-10); color: var(--tinta); }
.modo-demo .demo-travado { cursor: not-allowed; }
.modo-demo input.demo-travado:not([type="range"]), .modo-demo select.demo-travado { background-color: var(--papel); }
@media (max-width: 640px) {
  .demo-faixa { flex-wrap: wrap; padding: 10px 14px; }
  .demo-faixa .btn { width: 100%; }
}

.checklist { padding: 20px 22px; margin-bottom: 18px; display: grid; grid-template-columns: 260px 1fr; gap: 18px; align-items: center; }
.checklist-h { display: flex; gap: 14px; align-items: center; }
.checklist-h h3 { margin: 0; font-family: var(--f-display); font-size: 19px; }
.checklist-h p { margin: 0; color: var(--texto-2); font-size: 14px; }
.anel { --p: 0; width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: conic-gradient(var(--oceano) calc(var(--p) * 360deg), var(--linha) 0); }
.anel span { width: 44px; height: 44px; border-radius: 50%; background: var(--branco); display: grid; place-items: center; font-family: var(--f-mono); font-size: 13px; font-weight: 600; }
.passos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.passos a { display: flex; align-items: center; gap: 8px; padding: 7px 12px 7px 8px; border-radius: 99px; border: 1px solid var(--linha); text-decoration: none; color: var(--grafite); font-size: 14px; font-weight: 500; }
.passos a:hover { border-color: var(--oceano); background: var(--ceu-15); }
.passo-check { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--linha-forte); display: grid; place-items: center; }
.passos .feito a { color: var(--texto-2); text-decoration: line-through; text-decoration-color: var(--linha-forte); }
.passos .feito .passo-check { background: var(--ok); border-color: var(--ok); color: var(--branco); }

.mult-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.mult-card { display: grid; grid-template-columns: auto minmax(210px, 1fr); grid-template-rows: 1fr auto; gap: 8px 22px; align-items: center; padding: 22px 22px 16px; text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
.mult-card:hover { border-color: var(--ceu); transform: translateY(-2px); }
.mult-card .tag { grid-row: 1 / 3; align-self: center; }
.mult-dl { margin: 0; display: grid; gap: 4px; }
.mult-dl div { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; border-bottom: 1px dashed var(--linha); padding-bottom: 4px; }
.mult-dl dt { color: var(--texto-2); }
.mult-dl dd { margin: 0; font-weight: 600; white-space: nowrap; text-align: right; }
@media (max-width: 1280px) and (min-width: 961px) {
  .mult-row:not(.mult-row-um) .mult-card { grid-template-columns: 1fr; }
  .mult-row:not(.mult-row-um) .mult-card .tag { grid-row: auto; justify-self: start; }
}
.mult-link { justify-self: end; display: inline-flex; align-items: center; gap: 4px; color: var(--oceano); font-weight: 600; font-size: 14px; }

.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }
.kpi { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--r-lg); padding: 18px 20px; display: grid; gap: 2px; text-decoration: none; color: inherit; box-shadow: var(--sombra); }
a.kpi:hover { border-color: var(--ceu); }
.kpi-l { font-size: 13px; color: var(--texto-2); font-weight: 600; }
.kpi-v { font-family: var(--f-display); font-weight: 800; font-size: 30px; letter-spacing: -.02em; color: var(--tinta); line-height: 1.2; }
.kpi-s { font-size: 12.5px; color: var(--texto-2); }
.kpi-destaque { background: var(--atencao-bg); border-color: #F0D6A4; }
.kpi-destaque .kpi-v { color: var(--atencao); }

.painel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.painel-grid > .card { padding: 22px; }
.atencao { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.atencao a { display: flex; gap: 12px; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: var(--grafite); font-size: 14px; }
.atencao a:hover { background: var(--papel); }
.atencao a > span:last-child { display: grid; }
.atencao strong { font-weight: 600; }
.atencao a > span:last-child > span { color: var(--texto-2); }
.atencao-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; }
.atencao-alto .atencao-ic { background: var(--alerta-bg); color: var(--alerta); }
.atencao-medio .atencao-ic { background: var(--atencao-bg); color: var(--atencao); }
.atencao-oportunidade .atencao-ic { background: var(--ceu-15); color: var(--oceano); }
.mais-itens { margin: 8px 12px 0; font-size: 13px; }
.tudo-certo { display: flex; gap: 12px; align-items: center; color: var(--ok); background: var(--ok-bg); border-radius: 12px; padding: 14px 16px; margin-top: 14px; }
.tudo-certo p { margin: 0; color: var(--grafite); font-size: 14px; }

.ranking { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 4px; }
.ranking a { display: grid; grid-template-columns: minmax(0, 1.2fr) 1fr auto; gap: 14px; align-items: center; padding: 8px 10px; border-radius: 10px; text-decoration: none; color: var(--grafite); font-size: 14px; }
.ranking a:hover { background: var(--papel); }
.rank-nome { display: grid; min-width: 0; font-weight: 600; }
.rank-nome, .rank-nome small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-nome small { font-weight: 400; color: var(--texto-2); font-size: 12px; }
.rank-barra { height: 10px; background: var(--papel); border-radius: 99px; overflow: hidden; }
.rank-barra span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--ceu), var(--oceano)); border-radius: 99px; transition: width .9s cubic-bezier(.3, .8, .3, 1); }
.ranking.pronto .rank-barra span { width: var(--w); }
.ranking b { font-weight: 700; color: var(--tinta); }

/* =================================================================
   CUSTOS
   ================================================================= */
.custos-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; }
.passo { padding: 22px 24px; }
.passo-h { display: flex; gap: 14px; margin-bottom: 14px; }
.passo-h h3 { margin: 0; font-family: var(--f-display); font-weight: 650; font-size: 20px; letter-spacing: -.01em; }
.passo-h p { margin: 2px 0 0; color: var(--texto-2); font-size: 14px; }
.passo-n { width: 34px; height: 34px; border-radius: 11px; background: var(--tinta-10); color: var(--tinta); font-family: var(--f-display); font-weight: 800; display: grid; place-items: center; flex-shrink: 0; }
.passo-corpo .num-hero { max-width: 340px; margin-bottom: 8px; }
.linhas { display: grid; gap: 8px; }
.linha { display: grid; grid-template-columns: minmax(0, 1fr) 150px 36px; gap: 8px; align-items: center; }
.linha-pct { grid-template-columns: minmax(0, 1fr) 120px 36px; }
.vazio-linha { color: var(--texto-2); font-size: 14px; margin: 4px 0; }
.sugestoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.sugestoes:empty { display: none; }
.subtotal { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-top: 1px solid var(--linha); margin-top: 14px; padding-top: 12px; color: var(--texto-2); font-size: 14px; }
.subtotal b { color: var(--grafite); font-size: 17px; }
.subtotal-nota { margin: 6px 0 0; font-size: 13px; color: var(--texto-2); }
.subtotal-nota:empty { display: none; }
.margem-linha { display: flex; align-items: center; gap: 16px; }

/* A coluna de proporção: o número que o cliente nunca calcula sozinho. Fica à
   direita do valor, em fonte mono para as casas alinharem na vertical. */
.linha-prop { grid-template-columns: minmax(0, 1fr) 122px 72px 34px; grid-template-areas: "nome valor prop del" "modo modo modo modo" "aviso aviso aviso aviso"; row-gap: 2px; }
.linha-prop > .inp { grid-area: nome; }
.linha-prop > .num-field { grid-area: valor; }
.linha-prop .prop { grid-area: prop; }
.linha-prop .icon-btn { grid-area: del; }
.linha-prop .troca-modo { grid-area: modo; justify-self: end; font-size: 12px; padding: 0 2px; }
.linha-prop .prop-aviso { grid-area: aviso; }
.prop { font-family: var(--f-mono); font-size: 13px; color: var(--texto-2); text-align: right; white-space: nowrap; }
.prop-reais { font-size: 12.5px; }
.prop-aviso { display: flex; align-items: flex-start; gap: 6px; margin: 2px 0 0; font-size: 12.5px; color: var(--atencao); }
.prop-aviso .link-btn { font-size: 12.5px; }

@media (max-width: 720px) {
  .linha-prop { grid-template-columns: minmax(0, 1fr) 110px 62px 34px; }
}

/* Desperdício do material, na ficha */
.desp-linha { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.desp-campo { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.desp-campo > span { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: var(--texto-2); }
.desp-dica { flex: 1 1 220px; min-width: 0; font-size: 13px; color: var(--texto-2); }

.custos-aside { position: sticky; top: 76px; display: grid; gap: 26px; padding-top: 30px; }
.recibo { padding: 20px 22px; }
.recibo h3 { margin: 0; font-family: var(--f-display); font-weight: 650; font-size: 19px; }
.recibo-sub { margin: 0; font-size: 13px; color: var(--texto-2); }
.teste { margin-top: 16px; background: var(--papel); border-radius: 14px; padding: 12px 14px; }
.teste label { font-size: 13px; font-weight: 600; color: var(--texto-2); }
.teste-linha { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.teste-linha .num-field { width: 120px; flex-shrink: 0; }
.teste-seta { color: var(--oceano); }
.teste-res { font-family: var(--f-display); font-size: 18px; color: var(--tinta); }

/* =================================================================
   MÃO DE OBRA
   ================================================================= */
.formula { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 20px 22px; margin-bottom: 18px; }
.formula-bloco { display: flex; align-items: center; gap: 8px; background: var(--papel); border-radius: 12px; padding: 8px 14px; font-weight: 600; }
.formula-op, .formula-mais { font-family: var(--f-display); font-weight: 800; color: var(--oceano); font-size: 20px; }
.formula-mo { background: #FCEFD9; color: #7A4E0B; }
.formula-mo .formula-op { color: var(--ambar); }
.formula-preco { background: var(--tinta); color: var(--branco); }
.formula-nota { flex-basis: 100%; margin: 6px 0 0; color: var(--texto-2); font-size: 14px; }
/* o min() evita o vazamento clássico do auto-fill: num celular estreito a coluna continuaria
   com 300px dentro de um espaço de 288px e empurrava a página para o lado */
.pessoas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 16px; }
.pessoa { padding: 18px 20px; display: grid; gap: 8px; align-content: start; }
/* itens de grade não encolhem abaixo do próprio conteúdo por padrão; sem isto o cartão
   empurrava a página para o lado num celular estreito */
.card.pessoa > * { min-width: 0; }
.pessoa-topo { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.avatar { width: 40px; height: 40px; border-radius: 12px; background: #FCEFD9; color: #7A4E0B; font-family: var(--f-display); font-weight: 800; font-size: 18px; display: grid; place-items: center; flex-shrink: 0; }
.inp-titulo { border-color: transparent; font-weight: 650; font-size: 17px; padding: 6px 8px; }
.inp-titulo:hover { border-color: var(--linha); }
.mini-label { font-size: 13px; font-weight: 600; color: var(--texto-2); }
.calc-hora { border-top: 1px solid var(--linha); padding-top: 10px; margin-top: 4px; }
.calc-hora summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; color: var(--oceano); font-weight: 600; font-size: 14px; }
.calc-hora summary::-webkit-details-marker { display: none; }
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.calc-grid .field { margin: 0; }
.calc-res { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; background: var(--papel); border-radius: 10px; padding: 8px 8px 8px 12px; font-size: 14px; }
.calc-res b { color: var(--tinta); font-size: 16px; }
.pessoa-uso { margin: 4px 0 0; font-size: 13px; color: var(--texto-2); }
.pessoa-nova { border: 2px dashed var(--linha-forte); background: transparent; box-shadow: none; display: flex; align-items: center; gap: 16px; padding: 22px; text-align: left; min-height: 150px; color: var(--grafite); }
.pessoa-nova:hover { border-color: var(--oceano); background: var(--ceu-15); }
.pessoa-nova-ic { width: 48px; height: 48px; border-radius: 14px; background: var(--tinta); color: var(--branco); display: grid; place-items: center; flex-shrink: 0; }

/* =================================================================
   CATÁLOGO
   ================================================================= */
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.busca { position: relative; flex: 1 1 240px; max-width: 340px; display: flex; align-items: center; }
.busca .ic { position: absolute; left: 12px; color: var(--texto-2); }
.busca .inp { padding-left: 38px; }
.inp-select { width: auto; flex: 0 1 210px; }
.toolbar-acoes { display: flex; gap: 8px; margin-left: auto; }

.tabela-card { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--r-lg); box-shadow: var(--sombra); overflow: hidden; }
.tabela { width: 100%; border-collapse: collapse; }
.tabela th { text-align: left; font-family: var(--f-mono); font-size: 11.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-2); padding: 12px 16px; background: #F7FAFC; border-bottom: 1px solid var(--linha); white-space: nowrap; }
.tabela td { padding: 13px 16px; border-bottom: 1px solid var(--linha); font-size: 14.5px; vertical-align: middle; }
.tabela tbody tr { cursor: pointer; transition: background .12s; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover { background: #F5F9FC; }
.tabela tbody tr:focus-visible { outline: 2.5px solid var(--ceu); outline-offset: -3px; }
.tabela .n { text-align: right; white-space: nowrap; }
.tabela .col-acoes { width: 92px; padding-left: 0; padding-right: 10px; text-align: right; white-space: nowrap; }
.tabela .col-acoes .icon-btn-sm { display: inline-grid; }
/* no computador o ícone basta; no celular ele fica solto no cartão e precisa de nome */
.rot-acao { display: none; }
/* armado: o excluir só mostra a palavra quando ela importa, e aí fica impossível de confundir */
.icon-btn-sm.armado { width: auto; padding: 0 11px; gap: 6px; display: inline-flex; align-items: center;
  background: var(--alerta-bg); color: var(--alerta); font-size: 12.5px; font-weight: 650; }
.icon-btn-sm.armado .rot-acao { display: inline; }
.icon-btn-sm.armado:hover { background: var(--alerta-bg); color: var(--alerta); }
.col-item { display: grid; min-width: 180px; }
.item-nome { font-weight: 600; }
.item-cat { font-size: 12.5px; color: var(--texto-2); }
.preco-pill { display: inline-block; font-family: var(--f-display); font-weight: 800; font-size: 16px; color: var(--tinta); background: var(--tinta-10); padding: 3px 10px; border-radius: 8px; }
.linha-alerta .preco-pill { color: var(--alerta); background: var(--alerta-bg); }
.linha-ativa { background: var(--ceu-15) !important; box-shadow: inset 4px 0 0 var(--oceano); }
.delta { display: inline-block; margin-left: 8px; font-size: 11.5px; font-weight: 700; padding: 1px 6px; border-radius: 6px; }
.delta-abaixo { background: var(--atencao-bg); color: var(--atencao); }
.delta-acima { background: var(--tinta-10); color: var(--oceano); }
.delta-ok { background: var(--ok-bg); color: var(--ok); }

.vazio { text-align: center; padding: 56px 24px; display: grid; justify-items: center; gap: 6px; }
.vazio h3 { margin: 10px 0 0; font-family: var(--f-display); font-size: 22px; }
.vazio p { margin: 0 0 14px; color: var(--texto-2); max-width: 420px; }
.vazio-tag { width: 72px; height: 72px; border-radius: 22px; background: var(--tinta-10); color: var(--tinta); display: grid; place-items: center; rotate: -6deg; }
.vazio-curto { padding: 32px; }

/* ---------- Ficha (painel lateral) ---------- */
body.drawer-aberto { overflow: hidden; }
.drawer-wrap { position: fixed; inset: 0; z-index: 50; }
.drawer-fundo { position: absolute; inset: 0; background: rgba(13, 35, 53, .38); opacity: 0; transition: opacity .25s; }
.drawer {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(560px, 100%); background: var(--branco); display: flex; flex-direction: column;
  box-shadow: var(--sombra-alta); transform: translateX(100%); transition: transform .3s cubic-bezier(.3, .8, .3, 1); outline: none;
}
.drawer-wrap.aberto .drawer-fundo { opacity: 1; }
.drawer-wrap.aberto .drawer { transform: none; }
.drawer-h { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 0 26px; }
.drawer-h .eyebrow { margin: 0; }
.drawer-corpo { flex: 1; overflow-y: auto; padding: 4px 26px 28px; overscroll-behavior: contain; }
.drawer-f { display: flex; gap: 8px; padding: 12px 26px; border-top: 1px solid var(--linha); background: #FAFCFD; }
.drawer-f .btn-secundario { margin-left: auto; }
.inp-hero { width: 100%; border: 0; border-bottom: 2px solid transparent; padding: 4px 0; font-family: var(--f-display); font-weight: 800; font-size: 30px; letter-spacing: -.02em; background: transparent; border-radius: 0; }
.inp-hero:hover { border-bottom-color: var(--linha); }
.inp-hero:focus { outline: none; border-bottom-color: var(--oceano); }
.cat-campo { display: flex; align-items: center; gap: 6px; color: var(--texto-2); margin: 2px 0 10px; }
.inp-leve { border-color: transparent; padding: 4px 6px; font-size: 14px; width: auto; flex: 1; }
.inp-leve:hover { border-color: var(--linha); }
.ficha-preco { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; margin: 44px 0 16px; }
.tag-area-ficha .tag { background: var(--branco); outline: 1px solid var(--linha); }
.tag-area-ficha { filter: drop-shadow(0 12px 18px rgba(0, 51, 95, .14)) drop-shadow(0 0 1px rgba(0, 51, 95, .4)); }
.fatos { margin: 0; display: grid; gap: 10px; }
.fatos div { display: grid; }
.fatos dt { font-size: 12px; color: var(--texto-2); font-weight: 600; }
.fatos dd { margin: 0; font-family: var(--f-display); font-weight: 800; font-size: 22px; color: var(--tinta); }
.legenda-ficha { background: var(--papel); border-radius: 14px; padding: 6px 14px; }
.legenda-ficha:empty { display: none; }
.ficha-sec { border-top: 1px solid var(--linha); margin-top: 22px; padding-top: 18px; }
.ficha-sec h4 { margin: 0; font-family: var(--f-display); font-weight: 650; font-size: 18px; }
.ficha-hint { margin: 2px 0 12px; font-size: 13.5px; color: var(--texto-2); }
.custo-cab, .custo-linha { display: grid; grid-template-columns: minmax(0, 1fr) 72px 112px 88px 32px; gap: 6px; align-items: center; }
/* o "calcular" fica numa faixa própria embaixo: numa coluna, roubaria a largura do
   nome do material, que é o que a pessoa lê para saber de que linha se trata. */
.custo-linha { grid-template-areas: "nome qtd custo total del" "sug sug sug sug sug" "calc calc calc calc calc"; row-gap: 2px; }
/* sugestões de material já existente — some por completo quando não há nenhuma */
.custo-sug { grid-area: sug; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 2px 0; }
.custo-sug:empty { display: none; }
.sug-rot { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--atencao); }
.sug-chip { border: 1px solid var(--linha-forte); background: var(--branco); color: var(--tinta);
  border-radius: 99px; padding: 2px 10px; font-size: 12px; font-weight: 600; cursor: pointer; }
.sug-chip:hover { background: var(--tinta-10); border-color: var(--ceu); }

/* Lista de materiais já cadastrados. Fica em position:fixed no body (como o balão de
   ajuda) porque dentro da gaveta, que rola e tem transform, um menu absoluto se
   ancora errado — foi exatamente o defeito da lista nativa do navegador.
   z-index acima da gaveta (50) e abaixo dos avisos (100). */
.mat-menu { position: fixed; z-index: 60; background: var(--branco); border: 1px solid var(--linha-forte);
  border-radius: 10px; box-shadow: var(--sombra-alta); max-height: 264px; overflow-y: auto; padding: 4px;
  font-family: var(--f-corpo); }
.mm-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  border: 0; background: none; cursor: pointer; padding: 8px 10px; border-radius: 7px; text-align: left;
  font-family: inherit; font-size: 14px; color: var(--grafite); }
.mm-opt:hover, .mm-opt.ativa { background: var(--tinta-10); }
.mm-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-custo { flex: 0 0 auto; font-family: var(--f-mono); font-size: 12.5px; color: var(--texto-2); }
/* a setinha que avisa que existe lista — desenhada aqui, não pelo navegador */
.inp-com-lista { padding-right: 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2352667A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; }
.custo-linha > .inp { grid-area: nome; }
.custo-linha > .num-field:nth-of-type(1) { grid-area: qtd; }
.custo-linha > .num-field:nth-of-type(2) { grid-area: custo; }
.custo-linha .custo-total { grid-area: total; }
.custo-linha .icon-btn { grid-area: del; }
.custo-linha .custo-calc { grid-area: calc; display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; }
/* a compra guardada ocupa o espaço que sobra e corta com reticências: ela informa,
   mas nunca pode empurrar o "atualizar preço" para fora da linha */
.conv-memoria { min-width: 0; font-size: 12px; color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-memoria:empty { display: none; }
.custo-cab { font-family: var(--f-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-2); padding: 0 2px 6px; }
.custo-cab span:nth-child(n+2):nth-child(-n+4) { text-align: right; }
.custo-linhas { display: grid; gap: 6px; }
.custo-linha .inp { padding: 8px 9px; font-size: 14px; }
.custo-linha .num-field .affix { left: 9px; font-size: 12px; }
.custo-linha .num-field:has(.affix) .inp { padding-left: 30px; }
.custo-total { text-align: right; font-weight: 600; font-size: 14px; }
.custo-linha .icon-btn { width: 32px; height: 32px; }

/* ---- conversor de medida (abre abaixo da linha do material) ---- */
.conv-abrir { flex: 0 0 auto; white-space: nowrap; font-size: 12.5px; text-align: right; padding: 4px 2px; }
.conv-lembrete { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; color: var(--ok); }
.mat-compra { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--texto-2); }
.mat-antes { font-size: 12.5px; color: var(--texto-2); }
.mat-antes.subiu { color: var(--alerta); font-weight: 600; }
.mat-antes.caiu { color: var(--ok); font-weight: 600; }
.mat-busca { flex: 1 1 220px; max-width: 320px; }
.mat-achados { margin: -4px 0 10px; font-size: 13px; color: var(--texto-2); }
.custo-linha.com-conversor { background: var(--papel); border-radius: 10px 10px 0 0; }
.conv { background: var(--papel); border: 1px solid var(--linha); border-radius: 0 0 12px 12px;
  padding: 14px 14px 12px; margin: -4px 0 8px; display: grid; gap: 10px; }
.conv-tit { font-weight: 650; font-size: 13.5px; color: var(--tinta); margin: 0; }
.conv-linha { display: grid; grid-template-columns: 110px minmax(0, 1fr) 150px; gap: 10px; align-items: end; }
.conv-campo { display: grid; gap: 4px; min-width: 0; }
.conv-campo > span { font-size: 11.5px; color: var(--texto-2); }
.conv-campo .inp { padding: 8px 9px; font-size: 14px; }
.conv-campo .num-field .affix { left: 9px; font-size: 12px; }
.conv-campo .num-field:has(.affix) .inp { padding-left: 30px; }
.conv-rend { grid-column: 1 / -1; }
.conv-saida { margin: 0; font-size: 13px; color: var(--texto-2); min-height: 18px; }
.conv-saida.conv-ok { color: var(--ok); font-weight: 600; }
.conv-acoes { display: flex; justify-content: flex-end; gap: 8px; }

/* ---- tela Materiais ---- */
.mat-ordem { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--texto-2); }
.mat-ordem .inp-select { width: auto; min-width: 190px; }
.mat-lista { display: grid; gap: 8px; margin-top: 12px; }
.mat-linha { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--r-lg); padding: 12px 14px; }
.mat-linha.mat-aberta { border-color: var(--ceu); box-shadow: 0 0 0 3px #E4EEF6; }
.mat-topo { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; }
.mat-id { min-width: 0; display: grid; gap: 2px; }
.mat-nome { font-weight: 650; font-size: 15px; color: var(--grafite); overflow-wrap: anywhere; }
.mat-onde { font-size: 12.5px; color: var(--texto-2); }
.mat-custo { font-family: var(--f-mono); font-weight: 600; font-size: 15.5px; color: var(--tinta); white-space: nowrap; }
.mat-aviso { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; padding: 8px 10px;
  background: var(--ambar-bg, #FDF4E5); border-radius: 10px; font-size: 12.5px; line-height: 1.45; color: var(--grafite); }
.mat-aviso .ic { color: var(--ambar); flex-shrink: 0; margin-top: 1px; }
.mat-painel { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--linha); display: grid; gap: 10px; }
.mat-painel-tit { margin: 0; font-weight: 650; font-size: 13.5px; color: var(--tinta); }
.mat-painel-linha { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mat-painel-linha .num-field { width: 150px; }
.mat-painel-aviso { margin: 0; font-size: 13px; color: var(--texto-2); min-height: 18px; }
.mat-painel-aviso.sobe { color: var(--alerta); font-weight: 600; }
.mat-painel-aviso.desce { color: var(--ok); font-weight: 600; }
.mat-painel-acoes { display: flex; justify-content: flex-end; gap: 8px; }
.mo-grid { display: grid; grid-template-columns: 1fr 200px; gap: 10px; }
.mo-grid .field { margin: 0; }
.compara { margin-top: 12px; font-size: 14px; border-radius: 12px; padding: 12px 14px; display: flex; gap: 8px; align-items: flex-start; }
.compara b { font-weight: 700; }
.compara-abaixo { background: var(--atencao-bg); color: #6B460A; display: block; }
.compara-acima { background: var(--tinta-10); color: var(--tinta); display: block; }
.compara-ok { background: var(--ok-bg); color: var(--ok); }
.compara-ok span { color: var(--grafite); }

/* =================================================================
   SIMULADOR
   ================================================================= */
.sim-topo { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding: 18px 22px; margin-bottom: 16px; }
.sim-escolha { margin: 0; flex: 1 1 280px; max-width: 420px; }
.sim-base { display: grid; }
.sim-base-l { font-size: 12.5px; color: var(--texto-2); font-weight: 600; }
.sim-base-v { font-family: var(--f-display); font-weight: 800; font-size: 30px; color: var(--tinta); line-height: 1.1; }
.sim-base-s { font-size: 13px; color: var(--texto-2); }
.sim-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.sim-card { padding: 20px 22px; }
.sim-card h3 { margin: 0 0 14px; font-family: var(--f-display); font-weight: 650; font-size: 19px; }
.sim-controle { display: flex; align-items: center; gap: 14px; min-height: 44px; }
.sim-controle .num-field { flex: 1; max-width: none; }
.sim-valor { font-family: var(--f-display); font-weight: 800; font-size: 22px; color: var(--tinta); min-width: 64px; text-align: right; }
.sim-dl { margin: 14px 0 0; display: grid; }
.sim-dl div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--linha); font-size: 14px; }
.sim-dl dt { color: var(--texto-2); }
.sim-dl dd { margin: 0; font-weight: 600; text-align: right; }
/* O valor anterior vinha no cinza da marca: 2,1:1 sobre o branco, praticamente
   ilegível. O risco já diz "era isto antes"; a cor não precisa apagar o número
   também — ele é metade da comparação que a tela existe para mostrar. */
.sim-dl s { color: var(--texto-2); font-weight: 400; margin-left: 6px; font-size: 13px; }
.sim-nota { font-size: 13.5px; color: var(--texto-2); margin: 12px 0 0; }
.sim-lote { margin-top: 16px; }
.sim-lote-lede { margin: -6px 0 16px; }
.sim-lote-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 14px 16px; }
/* align-content: start impede que o campo sem dica distribua o espaco que sobra entre o
   rotulo e a caixa — era isso que descia a caixa 40px em relacao aos vizinhos */
.sim-lote-campos .field { margin: 0; align-content: start; }
.sim-lote-campos .num-field { max-width: none; }
.sim-dica { display: block; margin-top: 5px; font-size: 12px; line-height: 1.35; color: var(--texto-2); font-weight: 400; }
.sim-sub { margin: 18px 0 0; font-weight: 650; font-size: 14px; color: var(--tinta); }
.medidor { height: 10px; border-radius: 99px; background: var(--papel); margin-top: 14px; overflow: hidden; }
.medidor-fill { display: block; height: 100%; border-radius: 99px; transition: width .35s; }
.medidor-bom { background: var(--ok); }
.medidor-atencao { background: var(--ambar); }
.medidor-ruim { background: var(--alerta); }
.veredito { margin: 10px 0 0; font-weight: 600; font-size: 14px; }
.veredito-bom { color: var(--ok); }
.veredito-atencao { color: var(--atencao); }
.veredito-ruim { color: var(--alerta); }

/* =================================================================
   LINGUAGEM SIMPLES: ajuda (?), perguntas-teste, conta explicada
   ================================================================= */
.ajuda {
  position: relative;
  display: inline-grid; place-items: center; width: 19px; height: 19px; padding: 0; margin-left: 4px; vertical-align: 2px;
  border-radius: 50%; border: 1.5px solid var(--ceu); background: var(--branco); color: var(--oceano);
  font: 700 12px/1 var(--f-corpo); letter-spacing: 0; text-transform: none; cursor: help;
}
/* O círculo continua com 19px para não pesar ao lado do título, mas a área que
   responde ao toque passa a 31px — acima dos 24px mínimos da norma, e longe do
   que um dedo erra. O ? é usado o tempo todo e o público não é de mão firme. */
.ajuda::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; }
.ajuda:hover, .ajuda[aria-expanded="true"] { background: var(--oceano); border-color: var(--oceano); color: var(--branco); }
.tag-tinta .ajuda, .resultado-hora .ajuda { background: transparent; border-color: rgba(255, 255, 255, .55); color: var(--branco); }
.bolha { position: fixed; z-index: 200; background: var(--grafite); color: var(--branco); border-radius: 14px; padding: 12px 15px; box-shadow: var(--sombra-alta); font-size: 14px; line-height: 1.45; animation: bolha .15s ease-out; }
.bolha strong { display: block; margin-bottom: 4px; color: var(--ceu); }
.bolha p { margin: 0; }
.bolha .bolha-ex { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .15); color: #C9D8E6; }
@keyframes bolha { from { opacity: 0; transform: translateY(-4px); } }

.teste-pergunta { display: flex; gap: 8px; align-items: flex-start; background: var(--ceu-15); border-radius: 12px; padding: 10px 14px; font-size: 14px; margin: 0 0 14px; }
.teste-pergunta .ic { color: var(--oceano); margin-top: 2px; }
.teste-pergunta em { font-style: normal; font-weight: 600; color: var(--tinta); }
.passo-dica { font-size: 13.5px; color: var(--texto-2); margin: 8px 0 0; }
.explica { margin-top: 10px; font-size: 14px; color: var(--texto-2); }
.explica:empty { display: none; }
.explica b { color: var(--grafite); }
.explica .alerta { margin-top: 0; }

.faixa { display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 700; padding: 3px 10px; border-radius: 99px; }
.faixa-bom { background: var(--ok-bg); color: var(--ok); }
.faixa-atencao { background: var(--atencao-bg); color: var(--atencao); }
.faixa-ruim { background: var(--alerta-bg); color: var(--alerta); }
.faixa-linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 10px; }

.exemplo-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.exemplo-campos .field { margin: 0; }
.campo-largo { grid-column: 1 / -1; }
.exemplo-preco { display: flex; justify-content: space-between; align-items: baseline; margin-top: 16px; }
.exemplo-preco span { font-weight: 600; color: var(--texto-2); }
.exemplo-preco b { font-family: var(--f-display); font-size: 28px; font-weight: 800; color: var(--tinta); }
.recibo .comp-bar-lg { margin: 8px 0 10px; }

.conta-det { margin-top: 12px; border-top: 1px solid var(--linha); padding-top: 10px; }
.conta-det summary { cursor: pointer; font-weight: 600; color: var(--oceano); font-size: 14px; list-style: none; }
.conta-det summary::-webkit-details-marker { display: none; }
.conta-det summary::before { content: "▸ "; }
.conta-det[open] summary::before { content: "▾ "; }
.conta-ficha { background: var(--papel); border: 0; border-radius: 14px; padding: 10px 14px; margin-top: 12px; }
.conta { list-style: none; margin: 8px 0 0; padding: 0; font-size: 14px; }
.conta li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--linha-forte); }
.conta li span { color: var(--texto-2); }
.conta li b { white-space: nowrap; font-weight: 600; }
.conta .conta-mult span { color: var(--oceano); padding-left: 14px; }
.conta .conta-total { border-bottom: 0; border-top: 2px solid var(--grafite); margin-top: 4px; padding-top: 9px; }
.conta .conta-total span { color: var(--grafite); font-weight: 700; }
.conta .conta-total b { font-family: var(--f-display); font-size: 18px; color: var(--tinta); font-weight: 800; }
.conta-invalida { display: flex; gap: 8px; color: var(--alerta); font-size: 14px; margin: 8px 0 0; }

.resumo-pessoas { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.resumo-pessoas li { display: flex; align-items: center; gap: 10px; background: var(--papel); border-radius: 12px; padding: 8px 12px; }
.resumo-pessoas li > span:nth-child(2) { display: grid; flex: 1; min-width: 0; }
.resumo-pessoas small { color: var(--texto-2); font-size: 12.5px; }
.resumo-pessoas li > b { font-family: var(--f-display); color: var(--tinta); font-size: 18px; white-space: nowrap; }
.resumo-pessoas li > b small { font-family: var(--f-corpo); font-weight: 500; }
.avatar-sm { width: 30px; height: 30px; font-size: 14px; border-radius: 9px; }

.modo-rot { margin: 6px 0 2px; font-size: 13px; font-weight: 600; color: var(--texto-2); }
.hora-saida { margin-top: 8px; }
.hora-saida .link-btn { font-size: 13px; }
.modo { display: grid; grid-template-columns: 1fr 1fr; background: var(--papel); border-radius: 11px; padding: 3px; gap: 2px; margin: 2px 0 4px; }
.modo-btn { border: 0; background: transparent; border-radius: 9px; padding: 7px 6px; font-size: 13.5px; font-weight: 600; color: var(--texto-2); }
.modo-btn.ativo { background: var(--branco); color: var(--tinta); box-shadow: 0 1px 3px rgba(13, 35, 53, .12); }
.pergunta { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--linha); }
.pergunta-n { width: 24px; height: 24px; border-radius: 8px; background: var(--tinta-10); color: var(--tinta); font: 800 13px/1 var(--f-display); display: grid; place-items: center; flex-shrink: 0; margin-top: 1px; }
.pergunta-c { flex: 1; min-width: 0; display: grid; gap: 6px; }
.pergunta-c > label { font-weight: 600; font-size: 14.5px; }
.mini-dica { margin: 0; font-size: 13px; color: var(--texto-2); }
.pessoa-sub { margin-top: 8px; font-weight: 600; }
.num-horas .inp { padding-right: 62px; }
.resultado-hora { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 10px; background: var(--tinta); color: var(--branco); border-radius: 14px; padding: 12px 16px; margin-top: 12px; }
.resultado-hora > span { font-weight: 600; color: #BFD6EA; }
.resultado-hora b { font-family: var(--f-display); font-size: 26px; font-weight: 800; grid-row: span 2; }
.resultado-hora small { color: #9EBEDB; font-size: 12.5px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; margin-top: 6px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--tinta); }
.formula-grupo { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.formula-grupo + .formula-grupo { margin-top: 10px; padding-top: 12px; border-top: 1px dashed var(--linha); }
.formula-rot { font-family: var(--f-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--oceano); flex-basis: 100%; }
.resumo-serv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 18px 22px; margin-bottom: 18px; }
.resumo-serv div { display: grid; align-content: start; gap: 2px; }
.resumo-serv span { font-size: 13px; color: var(--texto-2); font-weight: 600; }
.resumo-serv b { font-family: var(--f-display); font-size: 24px; color: var(--tinta); font-weight: 800; }

.duracao { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
/* A unidade fica FORA do campo. Reservá-la por dentro (12px + 46px) estourava a largura da
   coluna e não sobrava espaço para o número: "30 min" aparecia como "3". */
.duracao .num-field { gap: 4px; }
.duracao .num-field .inp { padding-left: 9px; padding-right: 9px; }
.duracao .affix-end { position: static; left: auto; right: auto; flex: 0 0 auto; }
.subtotal-fina { border-top: 0; margin-top: 2px; padding-top: 0; }

/* ---------- boas-vindas ---------- */
.bv-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; background: radial-gradient(900px 500px at 100% 0, rgba(97, 179, 228, .25), transparent 60%), var(--papel); }
.bv { width: 100%; max-width: 940px; text-align: center; animation: entrar .4s ease-out; }
.bv-logo { width: 60px; height: 60px; margin-bottom: 14px; }
.bv h1 { font-family: var(--f-display); font-weight: 800; font-size: clamp(32px, 4.4vw, 52px); letter-spacing: -.025em; margin: 0; line-height: 1.05; }
.bv-lede { color: var(--texto-2); font-size: 17px; margin: 10px auto 34px; max-width: 540px; }
.bv-opcoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.bv-card { background: var(--branco); border: 2px solid var(--linha); border-radius: var(--r-lg); padding: 26px 22px; text-align: left; display: grid; gap: 8px; align-content: start; box-shadow: var(--sombra); transition: border-color .15s, transform .15s, box-shadow .15s; }
.bv-card:hover { border-color: var(--oceano); transform: translateY(-3px); box-shadow: 0 16px 34px rgba(0, 51, 95, .12); }
.bv-ic { width: 56px; height: 56px; border-radius: 16px; background: var(--tinta-10); color: var(--tinta); display: grid; place-items: center; margin-bottom: 6px; }
.bv-card strong { font-family: var(--f-display); font-size: 23px; font-weight: 800; }
.bv-desc { color: var(--texto-2); font-size: 14.5px; }
.bv-passos { list-style: none; margin: 0 0 26px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; text-align: left; }
.bv-passos li { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--sombra); }
.bv-passos strong { display: block; font-family: var(--f-display); font-size: 19px; margin: 12px 0 4px; }
.bv-passos p { margin: 0; color: var(--texto-2); font-size: 14.5px; }
.bv-nota { display: inline-flex; align-items: center; gap: 8px; color: var(--tinta); background: var(--ceu-15); border-radius: 12px; padding: 10px 16px; font-size: 14.5px; margin: 0 0 22px; }
.bv-acoes { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.btn-grande { padding: 13px 26px; font-size: 16.5px; border-radius: 13px; }

/* ---------- painel: o que você vende ---------- */
.mult-row-um { grid-template-columns: 1fr; }
.mult-row-um .mult-card { max-width: 680px; }
.vende { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 22px; margin-top: 16px; }
.vende-opcoes { display: flex; gap: 10px; flex-wrap: wrap; }
.toggle { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--linha-forte); border-radius: 11px; padding: 8px 14px; font-weight: 600; cursor: pointer; background: var(--branco); }
.toggle:has(input:checked) { border-color: var(--tinta); background: var(--tinta-10); color: var(--tinta); }
.toggle input { accent-color: var(--tinta); width: 17px; height: 17px; margin: 0; }
.banner-acoes .link-btn { color: var(--texto-2); font-weight: 500; }

@media (max-width: 760px) {
  .bv-opcoes, .bv-passos { grid-template-columns: 1fr; }
  .bv-card { grid-template-columns: auto 1fr; align-items: center; column-gap: 14px; padding: 16px 18px; }
  .bv-card .bv-ic { grid-row: span 2; margin: 0; }
  .resumo-serv { grid-template-columns: 1fr; gap: 10px; }
  .exemplo-campos { grid-template-columns: 1fr; }
}

/* =================================================================
   PLANOS: cadeados, janela de upgrade, página bloqueada
   ================================================================= */
:root { --div-neg: #C0613A; --div-pos: var(--oceano); }
.user-info { display: grid; min-width: 0; line-height: 1.25; }
.user-plano { font-size: 11.5px; color: var(--ceu); }
.plano-badge { display: inline-flex; align-items: center; gap: 4px; justify-self: start; font-size: 11.5px; font-weight: 700; color: var(--atencao); background: var(--atencao-bg); border-radius: 99px; padding: 2px 9px 2px 7px; }
.painel-rodape { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.painel-rodape .vende { margin-top: 0; }

.modal-wrap { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px; }
.modal-fundo { position: absolute; inset: 0; background: rgba(13, 35, 53, .45); animation: aparecer .2s ease-out; }
.modal { position: relative; width: min(440px, 100%); background: var(--branco); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--sombra-alta); animation: entrar .25s ease-out; }
@keyframes aparecer { from { opacity: 0; } }
.modal-ic { width: 46px; height: 46px; border-radius: 14px; background: var(--atencao-bg); color: var(--atencao); display: grid; place-items: center; margin-bottom: 12px; }
.modal h3, .bloqueio-card h3 { font-family: var(--f-display); font-weight: 800; font-size: 24px; letter-spacing: -.02em; margin: 0 0 6px; }
.modal-texto { color: var(--texto-2); margin: 0 0 14px; }
.modal-lista { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 8px; text-align: left; }
.modal-lista li { display: flex; gap: 8px; align-items: flex-start; font-size: 14.5px; }
.modal-lista .ic { color: var(--ok); margin-top: 2px; }
.modal-acoes { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }

.bloqueio { position: relative; min-height: 520px; }
.bloqueio-previa { filter: blur(5px); opacity: .5; pointer-events: none; user-select: none; }
.bloqueio-card { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); width: min(460px, calc(100% - 24px)); padding: 28px; text-align: center; box-shadow: var(--sombra-alta); }
.bloqueio-card .modal-ic { margin: 0 auto 12px; }
.bloqueio-card .modal-lista { max-width: 320px; margin-left: auto; margin-right: auto; }
.bloqueio-mini { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 1.5px dashed var(--linha-forte); background: var(--papel); border-radius: 12px; padding: 12px 14px; color: var(--grafite); }
.bloqueio-mini:hover { border-color: var(--atencao); background: var(--atencao-bg); }
.bloqueio-mini .ic { color: var(--atencao); }
.bloqueio-mini span { display: grid; }
.bloqueio-mini small { color: var(--texto-2); }
.auth-termos { margin: 2px 0 14px; align-items: flex-start; font-size: 13.5px; }
.auth-termos input { margin-top: 2px; flex-shrink: 0; }

/* =================================================================
   MEU NEGÓCIO (dashboard)
   Marcas finas, 2px de respiro entre segmentos, pontas arredondadas de 4px,
   valores sempre em texto (listas e tabela) — o tooltip só complementa.
   ================================================================= */
.neg-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; padding: 26px; margin-bottom: 16px; align-items: center; }
.neg-l { font-size: 13.5px; font-weight: 600; color: var(--texto-2); }
.neg-hero-v { display: block; font-family: var(--f-corpo); font-weight: 700; font-size: clamp(42px, 5vw, 60px); letter-spacing: -.025em; line-height: 1.05; color: var(--tinta); margin: 6px 0 10px; font-variant-numeric: proportional-nums; }
.neg-frase { margin: 0; color: var(--texto-2); font-size: 15px; }
.neg-frase b { color: var(--grafite); font-weight: 600; }
.neg-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.neg-tile { background: var(--papel); border-radius: 14px; padding: 12px 14px; display: grid; gap: 1px; align-content: start; }
.neg-tile span { font-size: 12.5px; color: var(--texto-2); font-weight: 600; }
.neg-tile b { font-size: 20px; font-weight: 700; font-variant-numeric: proportional-nums; }
.neg-tile small { font-size: 12px; color: var(--texto-2); }
.neg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; align-items: start; }
.neg-card { padding: 22px; }
.neg-cheio { margin-bottom: 16px; }
.neg-aviso { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 18px 22px; margin-bottom: 16px; color: var(--oceano); }
.neg-aviso p { margin: 0; flex: 1 1 260px; color: var(--grafite); }
.neg-num { display: block; font-size: 32px; font-weight: 700; color: var(--tinta); margin: 14px 0 0; font-variant-numeric: proportional-nums; letter-spacing: -.01em; }
.neg-num small { font-size: 15px; font-weight: 500; color: var(--texto-2); }
.neg-num-sub { margin: 2px 0 0; color: var(--texto-2); font-size: 14px; }

.medidor-neg { position: relative; height: 14px; background: var(--tinta-10); border-radius: 4px; margin: 34px 0 6px; }
.medidor-neg-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0 4px 4px 0; transition: width .6s cubic-bezier(.3, .8, .3, 1); }
.medidor-neg-marca { position: absolute; top: -7px; bottom: -7px; width: 2px; margin-left: -1px; background: var(--grafite); border-radius: 1px; }
.medidor-neg-marca span { position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%); font-size: 12px; color: var(--texto-2); white-space: nowrap; }
.status { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; margin: 12px 0 0; }
.status .ic { margin-top: 2px; }
.status-bom .ic { color: var(--ok); }
.status-atencao .ic { color: var(--atencao); }
.status-ruim .ic { color: var(--alerta); }
.status-info .ic { color: var(--oceano); }
.status b { font-weight: 600; }

.agenda { display: flex; gap: 2px; height: 14px; margin: 22px 0 4px; }
.agenda-parte { height: 100%; }
.agenda-paga { background: var(--tinta); border-radius: 4px 0 0 4px; }
.agenda-lucro { background: var(--ceu); border-radius: 0 4px 4px 0; }

.neg-barra { display: flex; gap: 2px; height: 14px; width: 100%; min-width: 0; }
.neg-barra .seg { height: 100%; min-width: 0; }
.neg-barra .seg:first-child { border-radius: 4px 0 0 4px; }
.neg-barra .seg:last-child { border-radius: 0 4px 4px 0; }
.neg-barra-lg { height: 22px; margin: 16px 0 12px; }
.neg-comp { list-style: none; margin: 0; padding: 0; display: grid; }
.neg-comp li { display: grid; grid-template-columns: 12px 1fr auto; column-gap: 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--linha); font-size: 14px; }
.neg-comp li:last-child { border-bottom: 0; }
.neg-comp .dot { align-self: center; }
.neg-comp span { color: var(--texto-2); }
.neg-comp b { font-weight: 600; text-align: right; }
.neg-comp small { grid-column: 2 / -1; text-align: right; color: var(--texto-2); font-size: 12px; margin-top: -2px; }

.leg-inline { display: flex; flex-wrap: wrap; gap: 6px 16px; list-style: none; margin: 12px 0; padding: 0; font-size: 13px; color: var(--texto-2); }
.leg-inline li { display: flex; align-items: center; gap: 6px; }
.dot.agenda-paga, .dot.agenda-lucro { border-radius: 3px; }
.dot.div-neg { background: var(--div-neg); }
.dot.div-pos { background: var(--div-pos); }

.raiox { list-style: none; margin: 4px 0 0; padding: 0; display: grid; }
.raiox-linha { display: grid; grid-template-columns: minmax(130px, 1.1fr) 3fr 84px; gap: 16px; align-items: center; padding: 9px 8px; border-radius: 10px; text-decoration: none; color: var(--grafite); }
.raiox-linha:hover { background: var(--papel); }
.raiox-nome { display: grid; font-weight: 600; font-size: 14px; min-width: 0; }
.raiox-nome, .raiox-nome small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.raiox-nome small { font-weight: 400; color: var(--texto-2); font-size: 12.5px; }
.raiox-lucro { display: grid; grid-template-columns: auto auto; justify-content: end; align-items: center; column-gap: 4px; text-align: right; }
.raiox-lucro .ic { color: var(--alerta); grid-row: span 2; }
.raiox-lucro b { font-size: 15px; font-weight: 700; }
.raiox-lucro small { grid-column: -2; color: var(--texto-2); font-size: 11.5px; }

.neg-tabela { margin-top: 12px; border-top: 1px solid var(--linha); padding-top: 10px; }
.neg-tabela summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--oceano); }
.tabela-rolagem { overflow-x: auto; margin-top: 10px; }
.neg-tabela table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 520px; }
.neg-tabela th, .neg-tabela td { padding: 7px 10px; border-bottom: 1px solid var(--linha); text-align: right; white-space: nowrap; }
.neg-tabela th { font-family: var(--f-mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-2); }
.neg-tabela th:first-child, .neg-tabela td:first-child { text-align: left; }

/* ---------- painel Uso (só administrador) ---------- */
.tabela-uso { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 760px; }
.tabela-uso th, .tabela-uso td { padding: 7px 10px; border-bottom: 1px solid var(--linha); text-align: right; white-space: nowrap; vertical-align: top; }
.tabela-uso th { font-family: var(--f-mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-2); }
.tabela-uso th:first-child, .tabela-uso td:first-child { text-align: left; }
.uso-sub { display: block; font-weight: 400; color: var(--texto-2); font-size: 11.5px; }
.uso-inativo td { color: var(--texto-2); }
.uso-inativo td b { color: var(--atencao); }
.tabela-uso tr.uso-detalhe td { text-align: left; white-space: normal; padding: 0 10px 9px; border-bottom: 2px solid var(--linha); font-size: 12.5px; color: var(--texto-2); }
.tabela-uso tr.uso-detalhe b { color: var(--grafite); font-weight: 600; }
.tabela-uso tbody tr:not(.uso-detalhe) td { border-bottom: 0; padding-bottom: 3px; }

.divergente { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.div-linha { display: grid; grid-template-columns: minmax(100px, 1fr) 1.6fr 112px; gap: 12px; align-items: center; padding: 6px 0; font-size: 14px; }
.div-nome { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.div-trilho { position: relative; height: 14px; }
.div-trilho::before { content: ""; position: absolute; left: 50%; top: -4px; bottom: -4px; width: 1px; background: var(--linha-forte); }
.div-barra { position: absolute; top: 0; bottom: 0; }
.div-barra.div-neg { right: 50%; background: var(--div-neg); border-radius: 4px 0 0 4px; }
.div-barra.div-pos { left: 50%; background: var(--div-pos); border-radius: 0 4px 4px 0; }
.div-valor { display: grid; text-align: right; }
.div-valor b { font-weight: 700; }
.div-valor small { color: var(--texto-2); font-size: 12px; }

.barras-h { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; }
.bh-linha { display: grid; grid-template-columns: minmax(100px, 1fr) 1.4fr 104px; gap: 12px; align-items: center; padding: 6px 0; font-size: 14px; }
.bh-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bh-trilho { height: 12px; }
.bh-barra { display: block; height: 100%; background: var(--tinta); border-radius: 0 4px 4px 0; min-width: 2px; }
.bh-valor { display: grid; text-align: right; }
.bh-valor b { font-weight: 600; }
.bh-valor small { color: var(--texto-2); font-size: 12px; }

.pe-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--linha); }
.pe-linha:first-of-type { margin-top: 8px; }
.pe-rot { display: grid; font-weight: 600; font-size: 14px; }
.pe-rot small { font-weight: 400; color: var(--texto-2); font-size: 12px; }
.pe-num { display: grid; justify-items: end; text-align: right; }
.pe-num b { font-size: 22px; font-weight: 700; color: var(--grafite); font-variant-numeric: proportional-nums; white-space: nowrap; }
.pe-num small { font-size: 12.5px; color: var(--texto-2); font-weight: 600; white-space: nowrap; }
.pe-destaque .pe-num b { color: var(--tinta); font-size: 26px; }
.pe-exp { grid-column: 1 / -1; color: var(--texto-2); font-size: 13px; }
.pe-dica { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: var(--texto-2); background: var(--papel); border-radius: 10px; padding: 10px 12px; margin: 12px 0 0; }
.pe-dica .ic { color: var(--oceano); margin-top: 2px; }

/* ---------- meta de vendas (Seus custos) ---------- */
.modo-situacao { max-width: 340px; margin: 0 0 12px; }
.meta-box { margin-top: 14px; background: var(--ceu-15); border: 1px solid #C4E2F5; border-radius: 14px; padding: 14px 16px; display: grid; gap: 6px; justify-items: start; }
.meta-box p { margin: 0; font-size: 14px; }
.meta-titulo { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--tinta); }
.meta-valor { font-size: 26px; font-weight: 700; color: var(--tinta); font-variant-numeric: proportional-nums; }
.meta-valor small { font-size: 14px; font-weight: 500; color: var(--texto-2); }
.meta-sub { color: var(--texto-2); }
.meta-alerta { display: flex; gap: 8px; align-items: flex-start; color: var(--alerta); }
.meta-alerta .ic { margin-top: 2px; flex-shrink: 0; }
.meta-alerta span { color: var(--grafite); }
.meta-box .btn { margin-top: 4px; }

/* ---------- ideal x real ---------- */
.ideal-real { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14px; }
.ideal-real th, .ideal-real td { padding: 8px 10px; border-bottom: 1px solid var(--linha); text-align: right; }
.ideal-real thead th { font-size: 13px; color: var(--grafite); }
.ideal-real thead th small { display: block; font-weight: 400; color: var(--texto-2); font-size: 11.5px; }
.ideal-real tbody th { text-align: left; font-weight: 500; color: var(--texto-2); }
.ideal-real td { font-weight: 600; white-space: nowrap; }
.ideal-real td.pior, .tabela-ir td.pior { color: var(--alerta); }
.ideal-real td.pior::before, .tabela-ir td.pior::before { content: "↓ "; }
.tabela-ir td small { color: var(--texto-2); font-size: 11.5px; }
.tabela-ir td.pior small { color: inherit; }
.tabela-legenda { margin: 6px 0 0; font-size: 12px; color: var(--texto-2); }
.compara-nota { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; margin: 10px 0 0; color: var(--alerta); }
.compara-nota span { color: var(--grafite); }
.compara-trava { margin-top: 12px; }
.ir-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0 4px; }
.ir-tile { background: var(--papel); border-radius: 14px; padding: 12px 14px; display: grid; gap: 8px; }
.ir-rot { font-size: 13px; font-weight: 600; color: var(--texto-2); }
.ir-par { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ir-par > div { display: grid; }
.ir-par small { font-size: 11.5px; color: var(--texto-2); }
.ir-par b { font-size: 19px; font-weight: 700; font-variant-numeric: proportional-nums; white-space: nowrap; }
.ir-pior b, .ir-pior small { color: var(--alerta); }
.neg-sub { font-size: 15px; font-weight: 700; margin: 18px 0 0; }
@media (max-width: 760px) { .ir-tiles { grid-template-columns: 1fr; } }

/* ---------- dúvidas frequentes ---------- */
.nav-secundario { margin-top: 10px; border-top: 1px solid rgba(255, 255, 255, .12); border-radius: 0 0 11px 11px; padding-top: 14px; }
.nav-secundario.ativo { border-radius: 11px; }
.faq-busca { max-width: 560px; margin-bottom: 14px; }
.faq-busca .inp { padding-top: 12px; padding-bottom: 12px; font-size: 16px; }
/* endereço de e-mail é uma palavra só e não tem onde quebrar: sem isto ele vaza no celular */
#app a[href^="mailto:"] { overflow-wrap: anywhere; }
.faq-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.faq-cats .chip { padding: 6px 14px; font-size: 14px; }
.chip.chip-ativo { background: var(--tinta); border-color: var(--tinta); color: var(--branco); }
.faq-grupo { margin-bottom: 22px; }
/* mesmo caso do .eyebrow: 12px sobre o papel pede o azul meio tom mais escuro */
.faq-grupo h3 { font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--oceano-escuro); margin: 0 0 8px; }
.faq-item { background: var(--branco); border: 1px solid var(--linha); border-radius: 14px; margin-bottom: 8px; box-shadow: var(--sombra); overflow: hidden; scroll-margin-top: 84px; }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px; cursor: pointer; list-style: none; font-weight: 600; font-size: 15.5px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { background: #F7FAFC; }
.faq-item summary .ic { color: var(--oceano); transition: transform .2s; }
.faq-item[open] summary .ic { transform: rotate(90deg); }
.faq-item[open] summary { border-bottom: 1px solid var(--linha); }
.faq-resposta { padding: 14px 18px 16px; display: grid; gap: 12px; justify-items: start; }
.faq-resposta p { margin: 0; color: var(--grafite); line-height: 1.6; max-width: 70ch; }
.faq-contato { display: flex; gap: 12px; align-items: flex-start; padding: 18px 20px; margin-top: 8px; color: var(--oceano); }
.faq-contato p { margin: 2px 0 0; color: var(--texto-2); }
.faq-contato strong { color: var(--grafite); }

.dica-flutuante { position: fixed; z-index: 150; pointer-events: none; background: var(--grafite); color: var(--branco); font-size: 13px; padding: 6px 10px; border-radius: 8px; box-shadow: var(--sombra-alta); white-space: nowrap; }

@media (max-width: 960px) {
  .neg-hero, .neg-grid, .painel-rodape { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .neg-hero { padding: 20px; }
  .neg-tiles { grid-template-columns: 1fr 1fr; gap: 8px; }
  .raiox-linha { grid-template-columns: 1fr 70px; row-gap: 6px; }
  .raiox-linha .neg-barra { grid-column: 1 / -1; grid-row: 2; }
  .div-linha { grid-template-columns: 1fr 96px; }
  .div-linha .div-trilho { grid-column: 1 / -1; grid-row: 2; }
  .bh-linha { grid-template-columns: 1fr 96px; }
  .bh-linha .bh-trilho { grid-column: 1 / -1; grid-row: 2; }
  .bloqueio-card { padding: 22px; }
}

/* ---------- navegação inferior (celular) ---------- */
.bottom-nav { display: none; }
/* no computador o menu lateral mostra sempre o nome por extenso */
.nav-rot-curto { display: none; }
.print-area { display: none; }

/* =================================================================
   RESPONSIVO
   ================================================================= */
@media (max-width: 1180px) {
  .custos-grid { grid-template-columns: minmax(0, 1fr) 330px; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .sim-grid { grid-template-columns: 1fr 1fr; }
  .checklist { grid-template-columns: 1fr; }
}

@media (max-width: 960px) {
  .auth { grid-template-columns: 1fr; }
  .auth-hero { padding: 36px 24px 40px; }
  .auth-brand { margin-bottom: 26px; }
  .auth-title { margin-bottom: 30px; }
  .demo-tag-area { margin-bottom: 28px; }

  .shell { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .topbar { padding: 10px 16px; background: rgba(255, 255, 255, .92); border-bottom-color: var(--linha); }
  .topbar-logo { display: block; width: 30px; height: 30px; }
  .topbar-title { font-family: var(--f-display); text-transform: none; letter-spacing: -.01em; font-size: 18px; font-weight: 800; color: var(--grafite); }
  .topbar-sair { display: grid; place-items: center; width: 38px; height: 38px; border: 0; background: transparent; color: var(--texto-2); border-radius: 10px; }
  .view-inner { padding: 4px 16px 110px; }

  /* A quantidade de itens VARIA: "Materiais" só aparece para quem tem material
     cadastrado, então a barra tem 6 ou 7. Com `repeat(6, 1fr)` fixo, o sétimo caía
     sozinho numa segunda linha, encostado à esquerda — parecia defeito e dobrava a
     altura da barra (119px num Galaxy S25). Com fluxo em coluna, cabe o que vier,
     sempre numa linha só. */
  .bottom-nav {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px); border-top: 1px solid var(--linha); padding: 6px 2px calc(6px + env(safe-area-inset-bottom));
  }
  /* 8px de folga vertical levam o alvo de toque a 51px: acima dos 48px mínimos
     recomendados, que o item encostava em 47px com 7 colunas. */
  .bottom-nav .nav-item { flex-direction: column; gap: 3px; padding: 8px 1px; color: var(--texto-2); font-size: 10.5px; line-height: 1.15; text-align: center; border-radius: 10px; min-width: 0; }
  /* rótulo curto no celular; o nome por extenso fica no menu lateral e no aria-label */
  .bottom-nav .nav-item:has(.nav-rot-curto) .nav-rot { display: none; }
  .bottom-nav .nav-rot, .bottom-nav .nav-rot-curto { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  /* Telas de 320px (iPhone SE antigo): com 7 itens sobram 45px por coluna e
     "Materiais" era cortado — logo o nome da tela nova. Meio ponto de fonte resolve. */
  @media (max-width: 345px) {
    .bottom-nav .nav-item { font-size: 9.5px; letter-spacing: -.01em; }
  }
  .bottom-nav .nav-item.ativo { color: var(--tinta); background: var(--tinta-10); }
  .bottom-nav .nav-item.ativo::before { display: none; }
  .toasts { bottom: calc(84px + env(safe-area-inset-bottom)); }

  .custos-grid { grid-template-columns: 1fr; }
  .custos-aside { position: static; order: -1; padding-top: 34px; }
  .banner { flex-wrap: wrap; }
  .banner > div:nth-child(2) { flex: 1 1 260px; }
  .banner-acoes { margin-left: 0; flex-wrap: wrap; }
  .mult-row, .painel-grid { grid-template-columns: 1fr; }
  .sim-grid { grid-template-columns: 1fr; }

  /* tabela vira cartões */
  .tabela thead { display: none; }
  .tabela, .tabela tbody, .tabela tr, .tabela td { display: block; }
  .tabela tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; padding: 14px 16px; border-bottom: 1px solid var(--linha); }
  .tabela td { border: 0; padding: 3px 0; }
  .tabela td.n { text-align: left; display: flex; justify-content: space-between; font-size: 13.5px; }
  .tabela td.n::before { content: attr(data-label); color: var(--texto-2); margin-right: 8px; }
  .tabela .col-item { grid-column: 1 / -1; margin-bottom: 6px; display: grid; }
  .save-pill { white-space: nowrap; padding: 6px 8px; }
  .save-pill span { display: none; }
  .tabela .col-preco { grid-column: 1 / -1; order: 1; align-items: center; border-top: 1px dashed var(--linha); margin-top: 6px; padding-top: 10px; }
  .tabela .col-hoje { grid-column: 1 / -1; }
  .tabela .col-acoes { grid-column: 1 / -1; order: 2; display: flex; justify-content: flex-end; gap: 8px; padding: 6px 0 0; width: auto; }
  .tabela .col-acoes .icon-btn-sm { display: inline-flex; align-items: center; gap: 7px; width: auto; height: 32px; padding: 0 12px; border: 1px solid var(--linha); color: var(--texto-2); font-size: 13px; font-weight: 500; }
  .tabela .col-acoes .rot-acao { display: inline; }
  .some-mobile { display: none; }
  .toolbar-acoes { margin-left: 0; width: 100%; }
  .toolbar-acoes .btn-primario { margin-left: auto; }
  .busca { max-width: none; flex-basis: 100%; }
  .inp-select { flex: 1 1 140px; }
}

@media (max-width: 560px) {
  .page-head { margin-bottom: 18px; }
  .segmented { width: 100%; grid-auto-columns: 1fr; }
  .seg-btn { justify-content: center; }
  .passo { padding: 18px 16px; }
  /* A coluna do valor cabe R$ 99.999,99 (e 100,00% na linha de porcentagem) sem cortar o
     começo do número. O nome fica com o resto: num celular os três não cabem inteiros, e
     entre cortar um nome e cortar um número, corta-se o nome — com reticências, para a
     pessoa ver que há mais texto. */
  /* 16px é o limite abaixo do qual o Safari do iPhone dá zoom sozinho ao tocar num campo — e
     depois não volta. Custa uns pixels de largura, por isso as colunas abaixo foram refeitas. */
  .inp { font-size: 16px; }
  .custo-linha .inp { font-size: 16px; }
  .linha { grid-template-columns: minmax(0, 1fr) 122px 34px; gap: 6px; }
  .linha-pct { grid-template-columns: minmax(0, 1fr) 96px 34px; }
  /* o "R$" encosta mais na borda para devolver espaço ao nome. O :not(.affix-end) é essencial:
     sem ele a regra pegaria também a linha de porcentagem, que não tem prefixo, e lá sobrariam
     22px — nem "12,5" caberia. */
  .linha .num-field:has(.affix:not(.affix-end)) .inp { padding-left: 32px; }
  .linha .num-field .affix:not(.affix-end) { left: 9px; }
  .linha > .inp { text-overflow: ellipsis; }
  .kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi { padding: 14px; }
  .kpi-v { font-size: 22px; }
  .mult-card { grid-template-columns: 1fr; }
  .mult-card .tag { grid-row: auto; justify-self: start; margin-left: 4px; }
  .banner { flex-wrap: wrap; }
  .banner-acoes { margin-left: 0; }
  .drawer-corpo { padding: 4px 18px 24px; }
  .drawer-h { padding-left: 18px; }
  .drawer-f { padding: 10px 18px calc(10px + env(safe-area-inset-bottom)); }
  .ficha-preco { grid-template-columns: 1fr; }
  .fatos { grid-template-columns: 1fr 1fr; }
  .custo-cab { display: none; }
  .custo-linha { grid-template-areas: "nome nome del" "qtd custo total" "sug sug sug" "calc calc calc"; row-gap: 6px; padding-bottom: 10px; border-bottom: 1px dashed var(--linha); }
  .custo-linha .custo-calc { grid-area: calc; }
  .custo-linha .conv-abrir { padding: 0; }
  .mat-topo { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
  .mat-topo .btn { grid-column: 1 / -1; justify-self: end; }
  .mat-ordem { width: 100%; }
  .mat-ordem .inp-select { flex: 1 1 auto; min-width: 0; }
  .conv-linha { grid-template-columns: 1fr 1fr; }
  .conv-linha .conv-campo:nth-child(3) { grid-column: 1 / -1; }
  .custo-linha > .inp { grid-area: nome; }
  .custo-linha > .num-field:nth-of-type(1) { grid-area: qtd; }
  .custo-linha > .num-field:nth-of-type(2) { grid-area: custo; }
  .custo-linha .custo-total { grid-area: total; }
  .custo-linha .icon-btn { grid-area: del; }
  /* a quantidade precisa caber 9.999,99 (compra a granel) sem espremer o custo unitário ao lado */
  .custo-linha { grid-template-columns: 84px minmax(0, 1fr) 84px; }
  /* no celular o tempo de trabalho ganha a linha inteira — em 110px não cabia o número —
     mas as duas caixas ficam contidas, para um número de dois dígitos não boiar em 137px */
  .mo-grid { grid-template-columns: 1fr; }
  .duracao { max-width: 260px; }
  /* o nome do item em 30px estourava a tela: "Cesta de café da manhã" pedia 348px em 339px */
  .inp-hero { font-size: 24px; }
  /* os dois filtros continuam lado a lado, mas o espaço é repartido pelo que cada um mostra:
     "Todas as categorias" é bem mais longo que "Nome (A–Z)" e antes era cortado */
  .inp-select { flex: 1 1 auto; min-width: 0; }
  .inp-select[data-f="categoria"] { flex-basis: 180px; }
  .inp-select[data-f="ordem"] { flex-basis: 132px; min-width: 132px; }
  .calc-grid { grid-template-columns: 1fr; }
  .tag-value { font-size: 34px; }
}

/* Celulares estreitos (360px e menos): as colunas fixas encolhem um pouco, mas nunca abaixo do
   que o número precisa — quem perde espaço é sempre o nome, nunca o valor. */
@media (max-width: 360px) {
  .linha { grid-template-columns: minmax(0, 1fr) 122px 30px; gap: 4px; }
  .linha-pct { grid-template-columns: minmax(0, 1fr) 92px 30px; }
  /* 104px fixos e sem encolher estouravam a linha; 92px ainda cabem "99,99%" */
  .num-curto { width: 92px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* =================================================================
   IMPRESSÃO — tabela de preços
   ================================================================= */
@media print {
  body { background: #fff; }
  #app, #auth, #boot, #drawer-root, #toasts { display: none !important; }
  .print-area { display: block; font-family: var(--f-corpo); color: #000; }
  .print-h { display: flex; align-items: center; gap: 14px; border-bottom: 3px solid var(--tinta); padding-bottom: 12px; margin-bottom: 18px; }
  .print-h img { width: 52px; height: 52px; }
  .print-h h1 { font-family: var(--f-display); margin: 0; font-size: 24px; color: var(--tinta); }
  .print-h p { margin: 0; color: #555; }
  .print-area table { width: 100%; border-collapse: collapse; }
  .print-area th { text-align: left; font-size: 11px; text-transform: uppercase; color: #555; border-bottom: 1px solid #999; padding: 6px 8px; }
  .print-area td { padding: 8px; border-bottom: 1px solid #ddd; }
  .print-area .n { text-align: right; font-weight: 700; }
  .print-f { margin-top: 18px; font-size: 11px; color: #777; }
}