/* ============================================================================
   MODULO COMERCIAL — PORTICO
   Briefing preenchido na mesa, com o tablet virado para o cliente.

   Decisoes que vem desse uso, e nao de gosto:
   - Alvo de toque de 48px para cima: o dedo do vendedor, apoiado na mesa,
     as vezes com a mao suja de obra.
   - Uma pergunta por bloco, com respiro entre elas. O cliente esta lendo
     junto — formulario denso passa a impressao de burocracia, nao de cuidado.
   - Contraste alto: reuniao acontece em escritorio de obra, com sol na tela.
     Fundo claro ajuda nisso, e e o que o cliente reconhece como "a Portico".
   - Tema unico e claro, com as cores do logo oficial. Nao e preferencia: o
     cliente ve esta tela, e ela precisa parecer a mesma empresa do site e do
     cartao de visita. Por isso nao ha modo escuro aqui — o painel da
     diretoria, que e uso interno, e que tem.
   ========================================================================== */

:root{
  /* Cores tiradas do arquivo do logo oficial, nao de memoria:
     #C1171F o vermelho do arco, #262626 o preto do wordmark, #4E4D4D o cinza.
     Todas conferidas em contraste — o vermelho da 6,16:1 sobre branco, entao
     passa AA ate em texto pequeno. */
  --marca:#C1171F;
  --marca-forte:#A5131A;      /* hover: mesmo vermelho, um passo mais fundo */
  --marca-fraca:#FDEEEF;      /* fundo de selecao */
  --marca-borda:#F2C9CC;
  --tinta:#262626;            /* preto do logo */
  --grafite:#4E4D4D;          /* cinza do logo */

  /* Papel: a folha e branca, a mesa e um cinza quentinho. Da profundidade
     sem sombra pesada, e lembra documento na mesa da reuniao. */
  --mesa:#F4F3F1;
  --folha:#FFFFFF;
  --folha-2:#FBFAF9;
  --linha:#E7E4E0;
  --borda:#D6D2CD;

  --texto:#262626;
  --texto-2:#57534E;
  --texto-3:#78716C;

  --acento:var(--marca);
  --acento-fundo:var(--marca-fraca);
  --acento-texto:#FFFFFF;
  --alerta:#B3261E;
  --alerta-fundo:#FDECEA;
  --aviso:#8A5A00;
  --aviso-fundo:#FDF3E2;
  --ok:#166534;
  --ok-fundo:#E8F5EC;

  --r:12px;
  --r-g:16px;
  --sombra:0 1px 2px rgba(38,38,38,.05), 0 8px 24px rgba(38,38,38,.06);
  --sombra-alta:0 2px 4px rgba(38,38,38,.06), 0 14px 38px rgba(38,38,38,.10);
  --ease:cubic-bezier(.16,1,.3,1);

  --fonte:"Geist","SF Pro Text",-apple-system,system-ui,Arial,sans-serif;
  --mono:"Geist Mono","SF Mono",ui-monospace,Menlo,monospace;

  --toque:3rem;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{color-scheme:light;-webkit-text-size-adjust:100%}
body{
  min-height:100dvh;
  background:var(--mesa);
  color:var(--texto);
  font-family:var(--fonte);
  line-height:1.5;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
svg{width:1.25rem;height:1.25rem;fill:currentColor;flex:none}
:focus-visible{outline:2px solid var(--acento);outline-offset:3px;border-radius:6px}

.tela{min-height:100dvh;display:flex;flex-direction:column}
.tela[hidden]{display:none}

/* ---------------------------------------------------------------- botoes */
.bt{
  text-decoration:none;   /* alguns botoes sao <a>: sem isto vem sublinhado */
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:var(--toque);padding:.7rem 1.15rem;
  font:inherit;font-size:.95rem;font-weight:600;
  border-radius:var(--r);border:1px solid var(--borda);
  background:var(--folha-2);color:var(--texto);cursor:pointer;
  transition:background .16s var(--ease),border-color .16s var(--ease),transform .1s var(--ease);
}
.bt:hover{background:var(--folha)}
.bt:active{transform:scale(.98)}
.bt:disabled{opacity:.5;cursor:default;transform:none}
.bt--forte{background:var(--marca);color:#fff;border-color:var(--marca);font-weight:650;box-shadow:0 1px 2px rgba(193,23,31,.25)}
.bt--forte:hover{background:var(--marca-forte);border-color:var(--marca-forte)}
.bt--fantasma{background:transparent}
.bt--fantasma:hover{background:var(--folha)}
.bt svg{width:1.1rem;height:1.1rem}

/* ----------------------------------------------------------------- topo */
.topo{
  background:var(--folha);
  display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
  padding:calc(env(safe-area-inset-top) + 1.15rem) 1.5rem 1.15rem;
  border-bottom:1px solid var(--linha);
}
.topo__marca{display:flex;align-items:center;gap:.9rem;min-width:0}
.topo__logo{height:2.4rem;width:auto;flex:none}
.topo h1{font-size:1.2rem;font-weight:650;letter-spacing:-.02em}
.topo p{font-size:.82rem;color:var(--texto-3);margin-top:.1rem}
.topo__dir{display:flex;gap:.6rem;align-items:center}

/* ---------------------------------------------------------------- lista */
.lista{
  flex:1;padding:1.5rem;display:grid;gap:.85rem;
  grid-template-columns:repeat(auto-fill,minmax(21rem,1fr));
  align-content:start;max-width:82rem;width:100%;margin:0 auto;
}
.op{
  display:flex;flex-direction:column;gap:.55rem;
  padding:1.15rem;background:var(--folha);border:1px solid var(--linha);
  border-radius:var(--r-g);cursor:pointer;text-align:left;font:inherit;color:inherit;
  box-shadow:var(--sombra);
  transition:border-color .16s var(--ease),transform .12s var(--ease),box-shadow .16s var(--ease);
}
.op:hover{border-color:var(--marca);transform:translateY(-2px);box-shadow:var(--sombra-alta)}
.op__topo{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.op__proto{font-family:var(--mono);font-size:.74rem;color:var(--texto-3);letter-spacing:.02em}
.op__nome{font-size:1.05rem;font-weight:650;letter-spacing:-.015em;overflow-wrap:anywhere}
.op__meta{font-size:.8rem;color:var(--texto-3)}
.selo{
  font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:.22rem .5rem;border-radius:7px;white-space:nowrap;
}
.selo--rascunho{background:#EFEDEA;color:var(--texto-2)}
.selo--aguardando_orcamento{background:var(--marca-fraca);color:var(--marca)}
.selo--em_orcamento{background:var(--aviso-fundo);color:var(--aviso)}
.selo--proposta_pronta,.selo--apresentada{background:#E8EEF7;color:#1E4E8C}
.selo--ganha{background:var(--ok-fundo);color:var(--ok)}
.selo--perdida{background:var(--alerta-fundo);color:var(--alerta)}

.vazio{
  grid-column:1/-1;text-align:center;padding:4rem 1.5rem;color:var(--texto-3);
  display:flex;flex-direction:column;align-items:center;gap:.9rem;
}
.vazio svg{width:2.6rem;height:2.6rem;opacity:.4}
.vazio b{display:block;font-size:1.05rem;color:var(--texto-2);font-weight:600}

/* --------------------------------------------------------------- wizard */
.wz-topo{
  display:flex;align-items:center;gap:1rem;
  padding:calc(env(safe-area-inset-top) + 1rem) 1.5rem .8rem;
  background:var(--folha);
}
.wz-voltar{
  display:grid;place-items:center;width:var(--toque);height:var(--toque);flex:none;
  background:var(--folha);border:1px solid var(--linha);border-radius:var(--r);
  color:var(--texto-2);cursor:pointer;
}
.wz-voltar:hover{color:var(--texto);border-color:var(--borda)}
.wz-titulo{flex:1;min-width:0}
.wz-etapa{
  display:block;font-family:var(--mono);font-size:.72rem;color:var(--acento);
  letter-spacing:.06em;margin-bottom:.1rem;
}
.wz-titulo h2{font-size:1.35rem;font-weight:650;letter-spacing:-.025em;text-wrap:balance}
.wz-estado{
  font-size:.76rem;color:var(--texto-3);white-space:nowrap;flex:none;
  display:flex;align-items:center;gap:.4rem;
}
.wz-estado[data-e="salvando"]{color:var(--texto-2)}
.wz-estado[data-e="salvo"]{color:var(--acento)}
.wz-estado[data-e="offline"]{color:var(--aviso)}

/* trilha de etapas: mostra onde esta e o que falta */
.wz-trilha{
  display:flex;gap:.3rem;align-items:center;
  padding:.2rem 1.5rem 1.1rem;background:var(--folha);
  border-bottom:1px solid var(--linha);
}
.wz-passo{
  flex:1;height:.32rem;border-radius:99px;background:#E7E4E0;
  border:0;padding:0;cursor:pointer;position:relative;
  transition:background .2s var(--ease);
}
.wz-passo::after{content:"";position:absolute;inset:-.7rem 0}  /* alvo de toque maior */
.wz-passo[data-e="feito"]{background:var(--marca)}
.wz-passo[data-e="atual"]{background:var(--marca);box-shadow:0 0 0 3px var(--marca-fraca)}
.wz-passo[data-e="pendente"]:hover{background:var(--texto-3)}

.wz-corpo{
  flex:1;padding:.4rem 1.5rem 2rem;max-width:56rem;width:100%;margin:0 auto;
  display:flex;flex-direction:column;gap:1.15rem;
}
.wz-intro{font-size:.95rem;color:var(--texto-2);max-width:60ch;margin-bottom:.2rem}

/* ---------------------------------------------------------------- campo */
.campo{display:flex;flex-direction:column;gap:.5rem}
.campo__rot{
  display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;
  font-size:1.02rem;font-weight:600;letter-spacing:-.01em;
}
.campo__obrig{font-size:.68rem;font-weight:700;color:var(--acento);letter-spacing:.06em;text-transform:uppercase}
.campo__dica{font-size:.86rem;color:var(--texto-3);line-height:1.55;max-width:64ch}
.campo__erro{font-size:.84rem;color:var(--alerta);display:none}
.campo[data-erro="sim"] .campo__erro{display:block}
.campo[data-erro="sim"] input,
.campo[data-erro="sim"] textarea{border-color:var(--alerta)}

input[type=text],input[type=email],input[type=tel],input[type=number],textarea,select{
  width:100%;font:inherit;font-size:1rem;color:var(--texto);
  background:var(--folha);border:1px solid var(--borda);border-radius:var(--r);
  padding:.85rem 1rem;min-height:var(--toque);
  transition:border-color .16s var(--ease),background .16s var(--ease);
}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--acento);background:var(--folha)}
input::placeholder,textarea::placeholder{color:var(--texto-3)}
textarea{min-height:7rem;resize:vertical;line-height:1.55}

/* opcoes: cartoes grandes, nao radio minusculo. O cliente esta olhando. */
.opcoes{display:grid;gap:.55rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.opcao{
  display:flex;align-items:center;gap:.7rem;min-height:var(--toque);
  padding:.8rem 1rem;background:var(--folha);
  border:1px solid var(--borda);border-radius:var(--r);
  cursor:pointer;font-size:.98rem;font-weight:500;
  transition:border-color .16s var(--ease),background .16s var(--ease);
}
.opcao:hover{border-color:var(--texto-3)}
.opcao input{position:absolute;opacity:0;pointer-events:none}
.opcao__marca{
  width:1.3rem;height:1.3rem;flex:none;border-radius:50%;
  border:2px solid var(--texto-3);display:grid;place-items:center;
  transition:border-color .16s var(--ease),background .16s var(--ease);
}
.opcao__marca::after{
  content:"";width:.6rem;height:.6rem;border-radius:50%;background:var(--acento-texto);
  transform:scale(0);transition:transform .16s var(--ease);
}
.opcao:has(input:checked){border-color:var(--acento);background:var(--acento-fundo)}
.opcao:has(input:checked) .opcao__marca{border-color:var(--acento);background:var(--acento)}
.opcao:has(input:checked) .opcao__marca::after{transform:scale(1)}

/* sim/nao: dois botoes grandes lado a lado */
.simnao{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;max-width:24rem}
.simnao .opcao{justify-content:center;font-weight:600}

/* ------------------------------------------------------------- anexos */
.anexo-caixa{
  display:flex;flex-direction:column;gap:.7rem;padding:1rem;
  background:var(--marca-fraca);border:1px dashed var(--marca-borda);
  border-radius:var(--r);
}
.anexo-caixa__rot{font-size:.9rem;font-weight:600;color:var(--acento)}
.anexo-botoes{display:flex;flex-wrap:wrap;gap:.5rem}
.bt-anexo{
  display:inline-flex;align-items:center;gap:.5rem;min-height:var(--toque);
  padding:.65rem 1rem;font:inherit;font-size:.9rem;font-weight:600;
  background:var(--folha);border:1px solid var(--borda);border-radius:var(--r);
  color:var(--texto);cursor:pointer;
}
.bt-anexo:hover{border-color:var(--acento);color:var(--acento)}
.bt-anexo input[type=file]{display:none}

.anexos{display:flex;flex-direction:column;gap:.4rem}
.anexo{
  display:flex;align-items:center;gap:.7rem;padding:.6rem .8rem;
  background:var(--folha);border:1px solid var(--linha);border-radius:10px;font-size:.88rem;
}
.anexo__ic{color:var(--texto-3)}
.anexo__nome{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.anexo__tam{font-family:var(--mono);font-size:.74rem;color:var(--texto-3);flex:none}
.anexo__x{
  background:none;border:0;color:var(--texto-3);cursor:pointer;padding:.3rem;
  display:grid;place-items:center;border-radius:6px;flex:none;
}
.anexo__x:hover{color:var(--alerta)}
.anexo[data-e="enviando"]{opacity:.6}
.anexo[data-e="fila"] .anexo__tam{color:var(--aviso)}

/* miniaturas das fotos do terreno */
.fotos{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fill,minmax(7rem,1fr))}
.foto{
  position:relative;aspect-ratio:4/3;border-radius:10px;overflow:hidden;
  background:var(--folha);border:1px solid var(--linha);
}
.foto img{width:100%;height:100%;object-fit:cover;display:block}
.foto__x{
  position:absolute;top:.3rem;right:.3rem;width:1.7rem;height:1.7rem;
  display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.92);color:var(--texto);backdrop-filter:blur(6px);box-shadow:var(--sombra);
}
.foto__x:hover{color:var(--alerta)}
.foto[data-e="fila"]::after{
  content:"na fila";position:absolute;left:.3rem;bottom:.3rem;
  font-size:.62rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  background:var(--aviso-fundo);color:var(--aviso);padding:.15rem .4rem;border-radius:5px;
}

/* ---------------------------------------------------------------- mapa */
.mapa{display:flex;flex-direction:column;gap:.6rem}
.mapa__acoes{display:flex;flex-wrap:wrap;gap:.5rem}
.mapa__achado{
  display:flex;align-items:center;gap:.7rem;padding:.75rem .9rem;
  background:var(--marca-fraca);border:1px solid var(--marca-borda);
  border-radius:var(--r);font-size:.9rem;
}
.mapa__achado b{font-family:var(--mono);font-size:.82rem}
.mapa__achado a{color:var(--acento);text-decoration:none;font-weight:600;white-space:nowrap}
.mapa__achado a:hover{text-decoration:underline}

/* --------------------------------------------------------------- audio */
.gravador{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.bt-gravar{
  display:inline-flex;align-items:center;gap:.6rem;min-height:var(--toque);
  padding:.7rem 1.2rem;font:inherit;font-size:.95rem;font-weight:600;
  background:var(--folha);border:1px solid var(--borda);border-radius:99px;
  color:var(--texto);cursor:pointer;
}
.bt-gravar[data-e="gravando"]{background:var(--alerta-fundo);border-color:var(--alerta);color:var(--alerta)}
.bt-gravar[data-e="gravando"] .ponto{animation:pulsa 1.2s var(--ease) infinite}
.ponto{width:.6rem;height:.6rem;border-radius:50%;background:currentColor;flex:none}
@keyframes pulsa{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.ponto{animation:none!important}}
.gravador__tempo{font-family:var(--mono);font-size:.95rem;color:var(--texto-2)}
audio{width:100%;max-width:26rem;margin-top:.4rem}

/* ------------------------------------------------------------ rodape wz */
.wz-pe{
  position:sticky;bottom:0;z-index:5;
  display:flex;align-items:center;gap:1rem;
  padding:1rem 1.5rem calc(env(safe-area-inset-bottom) + 1rem);
  background:linear-gradient(to top, var(--mesa) 70%, rgba(244,243,241,0));
  border-top:1px solid var(--linha);
}
.wz-pe__meio{flex:1;font-size:.85rem;color:var(--texto-3);text-align:center;line-height:1.4}
.wz-pe__meio[data-e="erro"]{color:var(--alerta)}
.wz-pe .bt{min-width:8rem}

/* ----------------------------------------------------------------- fim */
.tela--fim{align-items:center;justify-content:center;padding:2rem 1.5rem}
.fim{max-width:32rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1rem}
.fim__marca{color:var(--acento)}
.fim__marca svg{width:4rem;height:4rem}
.fim h2{font-size:1.8rem;font-weight:700;letter-spacing:-.03em}
.fim__protocolo{
  font-family:var(--mono);font-size:1.5rem;font-weight:500;color:var(--acento);
  background:var(--acento-fundo);border:1px solid var(--marca-borda);
  padding:.6rem 1.4rem;border-radius:var(--r);letter-spacing:.04em;
}
.fim__nota{color:var(--texto-2);font-size:.95rem;line-height:1.6;max-width:44ch}
.fim__acoes{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-top:.6rem}

/* --------------------------------------------------------- carregando */
.carregando{
  display:flex;flex-direction:column;align-items:center;gap:.9rem;
  padding:4rem 1.5rem;color:var(--texto-3);font-size:.92rem;
}
/* Faltava o par: sem isto o display:flex vence o hidden da folha do navegador
   e o "carregando" fica pendurado embaixo da tela ja carregada. */
.carregando[hidden]{display:none}
.girando{
  width:1.8rem;height:1.8rem;border-radius:50%;
  border:2px solid var(--folha-2);border-top-color:var(--acento);
  animation:gira .7s linear infinite;
}
@keyframes gira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.girando{animation-duration:2s}}

/* esqueleto com a forma do conteudo, nao um circulo generico */
.esq{display:flex;flex-direction:column;gap:1.15rem}
.esq__l{height:1.1rem;border-radius:7px;background:var(--folha);
  animation:brilha 1.4s var(--ease) infinite}
.esq__l--t{height:2.6rem;border-radius:var(--r)}
.esq__l--c{width:40%}
@keyframes brilha{0%,100%{opacity:.55}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.esq__l{animation:none;opacity:.7}}

/* ------------------------------------------------------------- offline */
.faixa-offline{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(env(safe-area-inset-bottom) + 5.5rem);z-index:40;
  display:flex;align-items:center;gap:.6rem;
  padding:.6rem 1.1rem;border-radius:99px;
  background:var(--aviso-fundo);border:1px solid #E9C77E;
  color:var(--aviso);font-size:.86rem;font-weight:600;
  box-shadow:var(--sombra);backdrop-filter:blur(10px);
}

/* --------------------------------------------------------------- folha */
/* Resumo do briefing para entregar ao cliente na hora.
   Na tela e uma sobreposicao; no papel e o unico conteudo da pagina. */
.folha{
  position:fixed;inset:0;z-index:60;overflow:auto;
  background:var(--mesa);padding:1rem 1rem 4rem;
}
.folha[hidden]{display:none}
body.com-folha{overflow:hidden}

.fl-barra{
  position:sticky;top:0;z-index:2;display:flex;gap:.6rem;justify-content:flex-end;
  padding:.7rem 0 1rem;
}

.fl-papel{
  max-width:48rem;margin:0 auto;background:#fff;color:#1A1A1A;
  border-radius:var(--r);box-shadow:0 12px 40px rgba(38,38,38,.13);
  padding:2.6rem 2.8rem 2rem;
}

.fl-topo{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;
  padding-bottom:1.1rem;border-bottom:3px solid var(--marca);
}
.fl-logo{height:38px;width:auto}
.fl-proto{text-align:right;line-height:1.35}
.fl-proto span{
  display:block;font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;
  color:#8A8A8A;font-weight:600;
}
.fl-proto b{font-family:var(--mono,inherit);font-size:1.02rem;letter-spacing:.02em}
.fl-proto time{display:block;font-size:.8rem;color:#6E6E6E;margin-top:.15rem}

.fl-papel h1{
  font-size:1.5rem;line-height:1.2;letter-spacing:-.02em;margin:1.5rem 0 .35rem;
}
.fl-cliente{font-size:1.02rem;color:#3A3A3A;margin:0 0 .9rem}
.fl-cliente b{color:#1A1A1A}
.fl-abertura{
  font-size:.92rem;line-height:1.6;color:#5A5A5A;margin:0 0 1.6rem;max-width:38rem;
}

/* Dois blocos por linha: cabem quatro secoes numa folha A4 sem apertar. */
.fl-bloco{margin-bottom:1.35rem;break-inside:avoid}
.fl-bloco h3{
  font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--marca);font-weight:700;margin:0 0 .55rem;
}
.fl-bloco dl{display:grid;gap:.05rem;margin:0}
.fl-bloco dl > div{
  display:grid;grid-template-columns:11.5rem 1fr;gap:.8rem;
  padding:.42rem 0;border-bottom:1px solid #EFEDEA;
}
.fl-bloco dl > div:last-child{border-bottom:0}
.fl-bloco dt{font-size:.86rem;color:#7A7A7A}
.fl-bloco dd{margin:0;font-size:.92rem;font-weight:600;color:#1A1A1A}

.fl-lista{list-style:none;margin:0;padding:0}
.fl-lista li{
  display:flex;justify-content:space-between;gap:1rem;
  padding:.42rem 0;border-bottom:1px solid #EFEDEA;font-size:.92rem;font-weight:600;
}
.fl-lista li:last-child{border-bottom:0}
.fl-lista span{font-weight:400;color:#7A7A7A}

.fl-nota{font-size:.86rem;line-height:1.55;color:#5A5A5A;margin:0 0 .7rem}

.fl-ok, .fl-falta{
  border-radius:10px;padding:1rem 1.15rem;margin-top:1.6rem;
}
.fl-ok{background:#F3F7F3;border:1px solid #DCE7DC}
.fl-ok h3{color:#2E6B3E}
.fl-falta{background:var(--marca-fraca);border:1px solid #F3D2D4}

.fl-check{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.fl-check li{
  display:grid;grid-template-columns:1.1rem 1fr;gap:.7rem;align-items:start;
  font-size:.9rem;line-height:1.5;
}
/* Quadradinho de marcar: o cliente risca conforme envia. */
.fl-check li::before{
  content:"";width:.95rem;height:.95rem;margin-top:.16rem;
  border:1.5px solid var(--marca);border-radius:3px;
}
/* b e span vao os dois na coluna 2: sem isto o segundo cai embaixo do
   quadradinho, numa coluna de 1rem, e o texto quebra palavra por palavra. */
.fl-check b{grid-column:2;display:block;color:#1A1A1A}
.fl-check span{grid-column:2;display:block;color:#5A5A5A;margin-top:.1rem}

.fl-passos ol{margin:0;padding-left:1.2rem;display:grid;gap:.42rem}
.fl-passos li{font-size:.9rem;line-height:1.55;color:#3A3A3A}

.fl-pe{
  display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  margin-top:2rem;padding-top:1rem;border-top:1px solid #E7E4E0;
  font-size:.82rem;color:#6E6E6E;line-height:1.5;
}
.fl-pe b{display:block;color:#1A1A1A;font-size:.9rem}
.fl-pe__marca{text-align:right}
.fl-pe__marca span{color:#8A8A8A}

/* ------------------------------------------------------------- impressao */
/* A folha vira a pagina inteira. Sem isto o navegador imprime o app atras. */
@page{size:A4;margin:13mm}
@media print{
  html,body{background:#fff}
  body > *:not(.folha){display:none !important}
  .folha{position:static;overflow:visible;padding:0;background:#fff}
  .fl-barra{display:none}
  .fl-papel{
    max-width:none;box-shadow:none;border-radius:0;padding:0;
  }
  /* Cor de fundo nao imprime por padrao: sem isto o traco vermelho da marca e
     as caixas de pendencia saem em branco. */
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .fl-bloco, .fl-ok, .fl-falta, .fl-passos, .fl-pe{break-inside:avoid}
  .fl-papel h1{margin-top:1.1rem}
}

@media(min-width:60rem){
  .wz-corpo{gap:1.5rem}
  .campo__rot{font-size:1.08rem}
}
@media(max-width:40rem){
  .topo{padding:calc(env(safe-area-inset-top) + .9rem) 1.1rem .9rem}
  .lista,.wz-corpo{padding-left:1.1rem;padding-right:1.1rem}
  .wz-topo,.wz-trilha,.wz-pe{padding-left:1.1rem;padding-right:1.1rem}
  .wz-titulo h2{font-size:1.15rem}
  .simnao{max-width:none}
  .wz-pe .bt{min-width:0;flex:1}
  .wz-pe__meio{display:none}
}

/* "Outro": o campo de texto nasce colado na opcao, para ficar claro que
   pertence a ela e nao e uma pergunta nova */
.campo-outro{
  display:flex;flex-direction:column;gap:.35rem;
  margin:.55rem 0 0 .9rem;padding:.7rem .9rem;
  border-left:3px solid var(--marca);
  background:var(--marca-fraca);border-radius:0 var(--r) var(--r) 0;
}
.campo-outro label{
  font-size:.78rem;font-weight:650;color:var(--marca);
  letter-spacing:.02em;
}
.campo-outro input{background:var(--folha)}

/* ---- fila do orcamento ---- */
/* O cartao novo precisa saltar sem virar semaforo: barra vermelha na lateral
   e uma pulsacao lenta, que para assim que alguem abre. */
.op--nova{
  border-color:var(--marca);
  box-shadow:0 0 0 1px var(--marca), var(--sombra);
  position:relative;
}
.op--nova::before{
  content:"";position:absolute;left:0;top:1rem;bottom:1rem;width:4px;
  border-radius:0 4px 4px 0;background:var(--marca);
}
@media (prefers-reduced-motion:no-preference){
  .op--nova{animation:chamando 2.4s var(--ease) infinite}
}
@keyframes chamando{
  0%,100%{box-shadow:0 0 0 1px var(--marca), var(--sombra)}
  50%{box-shadow:0 0 0 4px var(--marca-fraca), var(--sombra-alta)}
}
.selo--nova{background:var(--marca);color:#fff}
.op__com{color:var(--marca);font-weight:600}
#fila-som[aria-pressed="false"]{color:var(--texto-3)}
#fila-som[aria-pressed="false"] svg{opacity:.5}

@media(max-width:40rem){
  .fl-papel{padding:1.5rem 1.25rem}
  .fl-bloco dl > div{grid-template-columns:1fr;gap:.1rem}
  .fl-pe__marca{text-align:left}
}

/* Botao de reimprimir o resumo, no topo do briefing ja enviado. */
.wz-resumo{padding:.5rem .9rem;font-size:.85rem;white-space:nowrap}
.wz-resumo[hidden]{display:none}

/* ============================================================================
   PAINEL DE SOLICITACOES
   Tabela em telas largas, cartoes empilhados no tablet em pe. A coluna que
   manda e "com quem / ha quanto tempo": e a que responde a pergunta do gestor.
   ========================================================================== */
.pn-barra{
  display:flex;flex-wrap:wrap;gap:.7rem 1.2rem;align-items:center;
  padding:.9rem 1.6rem;border-bottom:1px solid var(--linha);background:var(--folha);
}
.pn-per{display:flex;gap:.35rem;flex-wrap:wrap}
.pn-chip{
  padding:.42rem .8rem;border:1px solid var(--borda);background:var(--folha-2);
  border-radius:99px;font:inherit;font-size:.84rem;color:var(--texto-2);cursor:pointer;
}
.pn-chip:hover{background:var(--folha);border-color:var(--grafite)}
.pn-chip.e{background:var(--tinta);border-color:var(--tinta);color:#fff;font-weight:600}
.pn-datas{display:flex;align-items:center;gap:.4rem;font-size:.84rem;color:var(--texto-3)}
.pn-datas input{padding:.34rem .5rem;font-size:.84rem;width:auto;min-height:0}
.pn-busca{margin-left:auto;min-width:14rem;flex:1;max-width:22rem}
.pn-busca input{padding:.45rem .8rem;font-size:.88rem;min-height:0}

/* ------------------------------------------------------------------ funil */
.pn-funil{
  display:grid;grid-template-columns:repeat(8,1fr);gap:.5rem;
  padding:1rem 1.6rem;background:var(--mesa);
}
.pn-et{
  display:flex;flex-direction:column;gap:.1rem;align-items:flex-start;
  padding:.7rem .8rem;background:var(--folha);border:1px solid var(--linha);
  border-radius:10px;font:inherit;text-align:left;cursor:pointer;
}
.pn-et:hover{border-color:var(--grafite)}
.pn-et.e{border-color:var(--marca);box-shadow:inset 0 0 0 1px var(--marca)}
.pn-et.v{opacity:.5}
.pn-et__n{font-size:1.45rem;font-weight:700;line-height:1;letter-spacing:-.02em}
.pn-et__r{font-size:.74rem;color:var(--texto-3);line-height:1.25}
.pn-et__a{font-size:.68rem;color:var(--alerta);font-weight:600;margin-top:.15rem}

.pn-aviso{
  margin:0 1.6rem 1rem;padding:.8rem 1rem;border-radius:10px;
  background:var(--marca-fraca);border:1px solid var(--marca-borda);
}
.pn-aviso b{display:block;font-size:.92rem;color:var(--marca-forte)}
.pn-aviso span{font-size:.84rem;color:var(--texto-2)}

/* ------------------------------------------------------------------ linhas */
/* A .lista e uma grade de cartoes de 21rem; a tabela precisa atravessar todas
   as colunas, senao cada linha fica espremida na largura de um cartao. */
.pn-tab{display:grid;gap:.4rem;grid-column:1/-1}
.pn-li{
  display:grid;
  grid-template-columns:8.5rem minmax(9rem,1.3fr) 10.5rem minmax(9rem,1fr) 21rem;
  gap:.9rem;align-items:center;
  padding:.6rem .9rem .6rem .75rem;background:var(--folha);
  border:1px solid var(--linha);border-radius:10px;
  border-left:4px solid transparent;
}
.pn-li:hover{border-color:var(--borda)}
.pn-li.pr-urgentissimo{border-left-color:var(--marca)}
.pn-li.pr-urgente{border-left-color:#E08A1E}
.pn-li.pr-irrelevante{border-left-color:#C9C5BF}
.pn-li.atrasada{background:#FEFAF9}

.pn-li__id{display:flex;flex-direction:column;gap:.25rem;align-items:flex-start}
.pn-li__cli b{display:block;font-size:.96rem;line-height:1.3}
.pn-li__cli span{font-size:.8rem;color:var(--texto-3)}
.pn-li__qm b{display:block;font-size:.86rem;font-weight:600}
.pn-li__qm span{font-size:.8rem;color:var(--texto-3)}
.pn-li__qm .tarde{color:var(--alerta);font-weight:600}
.pn-li__ac{display:flex;gap:.3rem;flex-wrap:nowrap;justify-content:flex-end}

.bt--mini{padding:.36rem .6rem;font-size:.8rem;min-height:0}
.bt--perigo{color:var(--alerta)}
.bt--perigo:hover{background:var(--marca-fraca);border-color:var(--marca-borda)}
.bt--perigo-forte{background:var(--alerta);border-color:var(--alerta);color:#fff}
.bt--perigo-forte:hover{background:#8E1D16;border-color:#8E1D16}

/* selo de prioridade */
.pn-pr{
  display:inline-block;padding:.1rem .4rem;border-radius:5px;
  font-size:.64rem;font-weight:700;letter-spacing:.06em;
}
.pn-pr.pr-urgentissimo{background:var(--marca);color:#fff}
.pn-pr.pr-urgente{background:#FCEFD9;color:#8A5A0B}
.pn-pr.pr-irrelevante{background:var(--folha-2);color:var(--texto-3);border:1px solid var(--linha)}
.op__selos{display:flex;gap:.35rem;align-items:center}
.op.pr-urgentissimo{border-left:4px solid var(--marca)}

/* --------------------------------------------------------------- gaveta */
.gaveta{position:fixed;inset:0;z-index:70}
.gaveta[hidden]{display:none}
.gaveta__fundo{position:absolute;inset:0;background:rgba(38,38,38,.4)}
.gaveta__folha{
  position:absolute;top:0;right:0;bottom:0;width:min(30rem,100%);
  background:var(--folha);box-shadow:-8px 0 32px rgba(38,38,38,.16);
  display:flex;flex-direction:column;
}
.gaveta__folha > header{
  display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;
  padding:1.2rem 1.4rem;border-bottom:1px solid var(--linha);
}
.gaveta__folha h2{font-size:1.05rem;margin:0;font-family:var(--mono);letter-spacing:.01em}
.gaveta__folha header p{margin:.15rem 0 0;font-size:.86rem;color:var(--texto-3)}
.gaveta__corpo{padding:1.2rem 1.4rem;overflow:auto;flex:1}

.tr{list-style:none;margin:0;padding:0;display:grid;gap:.1rem}
.tr__i{display:grid;grid-template-columns:5.4rem 1fr;gap:.8rem;padding:.55rem 0;
  border-bottom:1px solid var(--linha);font-size:.88rem;line-height:1.45}
.tr__i:last-child{border-bottom:0}
.tr__i time{font-size:.74rem;color:var(--texto-3);font-family:var(--mono);padding-top:.15rem}
.tr__i b{font-weight:600}
/* Acesso e leitura; mudanca e o que de fato aconteceu. Peso diferente para
   a trilha nao virar um paredao onde tudo pesa igual. */
.tr__i--acesso{color:var(--texto-3)}
.tr__i--acesso b{font-weight:500}
.tr__d,.tr__x{display:block;font-size:.8rem;color:var(--texto-3)}
.tr__d{font-family:var(--mono)}

/* ------------------------------------------------------ caixa de decisao */
.cx{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:1rem}
.cx[hidden]{display:none}
.cx__fundo{position:absolute;inset:0;background:rgba(38,38,38,.45)}
.cx__folha{
  position:relative;background:var(--folha);border-radius:14px;
  padding:1.5rem;width:min(32rem,100%);max-height:90vh;overflow:auto;
  box-shadow:0 20px 50px rgba(38,38,38,.22);
}
.cx__folha h2{margin:0 0 .8rem;font-size:1.15rem;letter-spacing:-.01em}
.cx__pe{display:flex;gap:.6rem;justify-content:flex-end;margin-top:1.3rem}
.cx-nota{font-size:.9rem;line-height:1.55;color:var(--texto-2);margin:0 0 1rem}
.cx-nota--grave{
  background:var(--marca-fraca);border:1px solid var(--marca-borda);
  border-radius:8px;padding:.8rem .9rem;color:var(--texto);
}
.cx-rot{display:block;font-size:.86rem;font-weight:600;margin:.9rem 0 .35rem}
.cx-erro{color:var(--alerta);font-size:.86rem;margin:.7rem 0 0}
.cx-op{display:grid;gap:.4rem}
.cx-radio{
  display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:start;
  padding:.7rem .85rem;border:1px solid var(--linha);border-radius:9px;cursor:pointer;
}
.cx-radio:hover{background:var(--folha-2)}
.cx-radio.e{border-color:var(--marca);background:var(--marca-fraca)}
.cx-radio input{width:auto;min-height:0;margin-top:.15rem;accent-color:var(--marca)}
.cx-radio b{display:block;font-size:.92rem}
.cx-radio i{display:block;font-style:normal;font-size:.8rem;color:var(--texto-3);line-height:1.4}

.recado{
  position:fixed;left:50%;bottom:1.6rem;transform:translateX(-50%);
  background:var(--tinta);color:#fff;padding:.75rem 1.1rem;border-radius:10px;
  font-size:.88rem;z-index:90;box-shadow:0 8px 24px rgba(38,38,38,.25);
  max-width:min(30rem,92vw);
}
.recado.vai{opacity:0;transition:opacity .35s}

@media(max-width:70rem){
  .pn-funil{grid-template-columns:repeat(4,1fr)}
  .pn-li{grid-template-columns:1fr 1fr;gap:.6rem 1rem}
  .pn-li__ac{grid-column:1/-1;justify-content:flex-start}
  .pn-li__et,.pn-li__qm{grid-column:auto}
}
@media(max-width:40rem){
  .pn-barra{padding:.8rem 1.1rem}
  .pn-funil{grid-template-columns:repeat(2,1fr);padding:.8rem 1.1rem}
  .pn-busca{margin-left:0;max-width:none}
  .pn-li{grid-template-columns:1fr}
  .pn-aviso{margin:0 1.1rem .8rem}
}
.cx__folha input,.cx__folha textarea{width:100%}

/* Cartao da fila com a acao embaixo: o cartao inteiro abre o briefing, o
   botao leva direto para montar a proposta. */
.op-caixa{display:flex;flex-direction:column}
.op-caixa .op{border-bottom-left-radius:0;border-bottom-right-radius:0;flex:1}
.op__ir{
  border-top-left-radius:0;border-top-right-radius:0;justify-content:center;
  text-decoration:none;
}

/* Lead vindo do site: veio sem vendedor junto e ainda nao foi distribuido. */
.selo--lead{background:var(--marca);color:#fff}