/* Orçamento TJT — app do celular. Paleta da marca (#FFFFFF · #0A9993 · #04807C · #014A48), títulos Manrope, textos Inter.
   Feito para o celular em pé (uma coluna); no computador fica numa coluna central de 560 px. */
@font-face { font-family: "Inter"; src: url("/marca/fonts/Inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/marca/fonts/Manrope.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
:root {
  --agua: #0A9993; --verde: #04807C; --petroleo: #014A48; --branco: #fff;
  --degrade: linear-gradient(160deg, #014A48 0%, #04807C 60%, #0A9993 100%);
  --texto: #10302E; --suave: #5B7573; --borda: #D7E6E3; --painel: #F4F9F8; --claro: #EAF5F3;
  --perigo: #C0392B; --alerta: #A86A0B; --ok: #1E7F4F;
  --bronze: #8C5A2B; --prata: #6E7B85; --ouro: #B88A00;
  --r: 14px; --sombra: 0 1px 2px rgba(1,74,72,.08), 0 10px 30px -14px rgba(1,74,72,.28);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; }
body { font: 15px/1.45 "Inter", system-ui, sans-serif; color: var(--texto); background: var(--painel); }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { font-family: "Manrope", "Inter", sans-serif; letter-spacing: -.01em; margin: 0; }
.ms { font-family: "Material Symbols Rounded"; font-weight: normal; font-style: normal; font-size: 22px; line-height: 1;
      display: inline-block; vertical-align: middle; -webkit-font-smoothing: antialiased; font-feature-settings: "liga"; }
.carregando { display: grid; place-items: center; min-height: 100vh; color: var(--suave); }
a { color: var(--verde); }

/* ------------------------------------------------ estrutura */
.casca { max-width: 560px; margin: 0 auto; min-height: 100dvh; background: var(--painel); display: flex; flex-direction: column; }
.topo { position: sticky; top: 0; z-index: 10; background: var(--degrade); color: #fff; padding: 10px 12px; display: flex;
        align-items: center; gap: 8px; min-height: 56px; }
.topo img { height: 30px; }
.topo h1 { font-size: 17px; font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topo .btn.icone { color: #fff; }
.topo .btn.icone:hover { background: rgba(255,255,255,.14); }
.corpo { flex: 1; padding: 14px 14px 110px; display: grid; gap: 14px; align-content: start; grid-template-columns: minmax(0, 1fr); }
/* coluna das grades nunca maior que a tela (nome de empresa comprido com reticências, não rolagem para o lado) */
.cartao, .lista, .acoes, .docs, .planos, .item, .empresa, .socio { grid-template-columns: minmax(0, 1fr); }
.rodape { position: sticky; bottom: 0; z-index: 9; background: rgba(244,249,248,.96); backdrop-filter: blur(6px);
          border-top: 1px solid var(--borda); padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); display: flex; gap: 10px; }
.rodape .btn { flex: 1; justify-content: center; }

/* ------------------------------------------------ cartões e campos */
.cartao { background: #fff; border: 1px solid var(--borda); border-radius: var(--r); padding: 14px; display: grid; gap: 12px; }
.cartao > h2 { font-size: 16px; color: var(--petroleo); display: flex; align-items: center; gap: 8px; }
.cartao > h2 .ms { color: var(--verde); }
label.campo { display: grid; gap: 5px; font-size: 13px; color: var(--suave); font-weight: 600; }
label.campo > span.dica { font-weight: 400; }
input[type=text], input[type=password], input[type=search], input[type=tel], input[type=email], input[type=number],
input[inputmode], select, textarea {
  width: 100%; padding: 11px 12px; border: 1px solid var(--borda); border-radius: 11px; background: #fff; outline: none;
  font-size: 16px; color: var(--texto); font-weight: 400; min-height: 46px; }
input:focus, select:focus, textarea:focus { border-color: var(--agua); box-shadow: 0 0 0 3px rgba(10,153,147,.18); }
textarea { resize: vertical; min-height: 84px; }
.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.linha { display: flex; gap: 8px; align-items: center; }
.linha > .cresce { flex: 1; min-width: 0; }
.dica { color: var(--suave); font-size: 13px; }
.erro { color: var(--perigo); font-size: 14px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--verde); flex: none; }

/* botões */
.btn { display: inline-flex; align-items: center; gap: 7px; padding: 11px 16px; border-radius: 12px; border: 1px solid var(--borda);
       background: #fff; cursor: pointer; font-weight: 600; min-height: 46px; white-space: nowrap; transition: background .15s, border-color .15s; }
.btn:hover { border-color: var(--agua); background: #F0FAF9; }
.btn.primario { background: var(--verde); border-color: var(--verde); color: #fff; }
.btn.primario:hover { background: var(--petroleo); }
.btn.grande { width: 100%; justify-content: center; padding: 15px; font-size: 16px; border-radius: 14px; }
.btn.perigo { color: var(--perigo); }
.btn.peq { padding: 7px 11px; min-height: 36px; font-size: 14px; }
.btn.icone { padding: 9px; min-height: 0; border: 0; background: transparent; border-radius: 50%; }
.btn.icone:hover { background: rgba(1,74,72,.08); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.girando .ms { animation: gira 1s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

/* escolha em botões (Já tem CNPJ / Vai abrir) */
.segmento { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--claro); border-radius: 12px; padding: 4px; gap: 4px; }
.segmento button { border: 0; background: transparent; padding: 10px 6px; border-radius: 9px; font-weight: 600; color: var(--suave); cursor: pointer; }
.segmento button.ativo { background: #fff; color: var(--petroleo); box-shadow: 0 1px 3px rgba(1,74,72,.15); }
.opcoes { display: grid; gap: 8px; }
.opcao { display: flex; gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--borda); border-radius: 12px; cursor: pointer; background: #fff; }
.opcao input { accent-color: var(--verde); width: 20px; height: 20px; margin: 0; flex: none; }
.opcao.ativo { border-color: var(--agua); background: #F0FAF9; }

/* contador (funcionários, certificados) */
.contador { display: flex; align-items: center; border: 1px solid var(--borda); border-radius: 12px; overflow: hidden; background: #fff; }
.contador button { width: 48px; height: 46px; border: 0; background: var(--claro); font-size: 22px; cursor: pointer; color: var(--petroleo); }
.contador input { border: 0 !important; box-shadow: none !important; text-align: center; border-radius: 0; min-width: 0; flex: 1; }

/* passos */
.passos { display: flex; gap: 6px; }
.passos span { flex: 1; height: 5px; border-radius: 3px; background: var(--borda); }
.passos span.feito { background: var(--agua); }
.passo-titulo { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--suave); margin-top: -6px; }
.passo-titulo b { color: var(--petroleo); font-size: 15px; }

/* empresa achada */
.empresa { display: grid; gap: 4px; padding: 12px; border-radius: 12px; background: var(--claro); }
.empresa b { font-size: 16px; color: var(--petroleo); }
.selos { display: flex; flex-wrap: wrap; gap: 6px; }
.selo { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 99px; background: #fff; border: 1px solid var(--borda); color: var(--suave); }
.selo.ok { color: var(--ok); border-color: #BFE3CF; background: #F1FBF5; }
.selo.ruim { color: var(--perigo); border-color: #F2C4BE; background: #FDF3F2; }
.selo.atencao { color: var(--alerta); border-color: #EBD3A8; background: #FFF8EA; }
.socio { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--borda); border-radius: 12px; }
.socio.assina { border-color: var(--agua); background: #F7FCFB; }
.socio .nome { font-weight: 700; }

/* valores */
.valor-grande { text-align: center; padding: 6px 0; }
.valor-grande small { display: block; color: var(--suave); font-size: 13px; }
.valor-grande strong { font: 800 34px/1.1 "Manrope"; color: var(--petroleo); letter-spacing: -.02em; }
.valor-grande em { font-style: normal; color: var(--suave); font-size: 15px; }
.contas { display: grid; gap: 6px; font-size: 14px; }
.contas div { display: flex; justify-content: space-between; gap: 10px; }
.contas div span:first-child { color: var(--suave); }
.contas .total { border-top: 1px solid var(--borda); padding-top: 6px; font-weight: 700; }
.riscado { text-decoration: line-through; color: var(--suave); font-weight: 400; margin-right: 6px; }
.aviso-caixa { padding: 10px 12px; border-radius: 12px; background: #FFF8EA; border: 1px solid #EBD3A8; color: #6B4706; font-size: 14px; display: flex; gap: 8px; }
.aviso-caixa.info { background: var(--claro); border-color: var(--borda); color: var(--petroleo); }
.aviso-caixa.ok { background: #F1FBF5; border-color: #BFE3CF; color: #14532D; }
.aviso-caixa .ms { font-size: 20px; flex: none; }

/* planos */
.planos { display: grid; gap: 10px; }
.plano { position: relative; border: 2px solid var(--borda); border-radius: 16px; padding: 14px; background: #fff; display: grid; gap: 6px; cursor: pointer; }
.plano .cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.plano .cab b { font: 800 17px "Manrope"; }
.plano .cab strong { font: 800 20px "Manrope"; color: var(--petroleo); white-space: nowrap; }
.plano .cab strong small { font: 500 12px "Inter"; color: var(--suave); }
.plano.bronze .cab b { color: var(--bronze); } .plano.prata .cab b { color: var(--prata); } .plano.ouro .cab b { color: var(--ouro); }
.plano ul { margin: 0; padding-left: 18px; font-size: 13.5px; color: var(--suave); display: grid; gap: 2px; }
.plano.escolhido { border-color: var(--verde); background: #F0FAF9; box-shadow: 0 0 0 3px rgba(10,153,147,.18); }
.plano .rec { position: absolute; top: -10px; right: 12px; background: var(--ouro); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 99px; }
.plano.fora { opacity: .45; }
.plano-edit { display: grid; grid-template-columns: auto 1fr 120px; gap: 10px; align-items: center; }
.plano-edit input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--verde); }

/* lista de propostas */
.busca { position: relative; }
.busca .ms { position: absolute; left: 12px; top: 12px; color: var(--suave); }
.busca input { padding-left: 42px; }
.lista { display: grid; gap: 10px; }
.item { background: #fff; border: 1px solid var(--borda); border-radius: var(--r); padding: 12px 14px; display: grid; gap: 4px; cursor: pointer; text-align: left; width: 100%; }
.item:hover { border-color: var(--agua); }
.item .l1 { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.item .l1 b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.item .l2 { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--suave); }
.status { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 99px; white-space: nowrap; }
.status.negociacao { background: #EAF2FB; color: #1F5E99; }
.status.aceita { background: #E7F6EE; color: var(--ok); }
.status.recusada { background: #FDECEA; color: var(--perigo); }
.status.vencida { background: #F1F1F1; color: #666; }
.vazio { text-align: center; color: var(--suave); padding: 30px 10px; display: grid; gap: 8px; justify-items: center; }
.vazio .ms { font-size: 44px; color: var(--borda); }

/* ações do detalhe */
.acoes { display: grid; gap: 10px; }
.acao { display: flex; gap: 12px; align-items: center; padding: 14px; border: 1px solid var(--borda); border-radius: var(--r); background: #fff; cursor: pointer; text-align: left; width: 100%; }
.acao:hover { border-color: var(--agua); }
.acao .ms { font-size: 28px; color: var(--verde); }
.acao b { display: block; }
.acao small { color: var(--suave); }
.acao.forte { background: var(--verde); border-color: var(--verde); color: #fff; }
.acao.forte .ms, .acao.forte small { color: #fff; }

/* assinatura */
.assinatura { position: relative; border: 2px dashed var(--agua); border-radius: 14px; background: #fff; touch-action: none; height: 210px; }
.assinatura canvas { width: 100%; height: 100%; display: block; border-radius: 12px; }
.assinatura .guia { position: absolute; left: 18px; right: 18px; bottom: 44px; border-bottom: 1px solid var(--borda); pointer-events: none; }
.assinatura .marca { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; color: var(--suave); font-size: 12px; pointer-events: none; }
.assinatura.cheia .marca { visibility: hidden; }
.feito { text-align: center; display: grid; gap: 10px; justify-items: center; padding: 20px 6px; }
.feito .ms { font-size: 64px; color: var(--ok); }

/* documentos */
.docs { display: grid; gap: 10px; }
.doc { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--borda); border-radius: 12px; background: #fff; }
.doc .ico { width: 52px; height: 52px; border-radius: 12px; background: var(--claro); display: grid; place-items: center; color: var(--verde); }
.doc .ico .ms { font-size: 28px; }
.doc.tem .ico { background: #E7F6EE; color: var(--ok); }
.doc small { color: var(--suave); display: block; }
.doc .lido { font-size: 12.5px; color: var(--ok); }
.foto-input { display: none; }

/* visor de PDF / imagem por cima da tela */
.visor { position: fixed; inset: 0; z-index: 50; background: #2B3534; display: flex; flex-direction: column; }
.visor-topo { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--petroleo); color: #fff; }
.visor-topo b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.visor-topo .btn { min-height: 38px; }
.visor-topo .btn.icone { color: #fff; }
.visor-corpo { flex: 1; overflow: auto; padding: 12px; display: grid; gap: 12px; justify-items: center; align-content: start; }
.visor-corpo canvas, .visor-corpo img { max-width: 100%; background: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.35); }
.visor-corpo .vazio { color: #cfd8d7; }

/* janela que sobe de baixo */
.folha-fundo { position: fixed; inset: 0; z-index: 40; background: rgba(1,30,29,.45); display: flex; align-items: flex-end; justify-content: center; }
.folha { background: #fff; width: 100%; max-width: 560px; border-radius: 20px 20px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
         display: grid; gap: 12px; max-height: 92dvh; overflow: auto; animation: sobe .2s ease-out; }
.folha h2 { font-size: 18px; color: var(--petroleo); }
@keyframes sobe { from { transform: translateY(40px); opacity: .4; } }

/* login */
.login { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr; background: #fff; }
.login-marca { background: var(--degrade); color: #fff; padding: 36px 24px 30px; display: grid; gap: 10px; }
.login-marca img { width: 170px; }
.login-marca h1 { font-size: 26px; }
.login-marca p { margin: 0; opacity: .88; }
.login form { padding: 24px; display: grid; gap: 14px; align-content: start; max-width: 420px; width: 100%; margin: 0 auto; }

/* aviso rápido */
.aviso { position: fixed; left: 50%; bottom: calc(88px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60;
         background: var(--petroleo); color: #fff; padding: 11px 16px; border-radius: 12px; box-shadow: var(--sombra); max-width: calc(100% - 28px); font-size: 14px; }
.aviso.ruim { background: var(--perigo); }

/* computador: a mesma coluna, centralizada */
@media (min-width: 600px) {
  .casca { box-shadow: 0 0 0 1px var(--borda); }
  .corpo { padding-bottom: 40px; }
}