/* ---------------------------------------------------------------------------
   PORTAL DO CLIENTE — a linguagem papel do escritório, CELULAR PRIMEIRO.

   ⭐ 23/09/2026 (obra «portal-cliente», etapa 0): o portal virou também o APP DE
   CELULAR (o próprio site, instalado na tela inicial). Esta folha foi reescrita
   de baixo para cima: a regra sem `@media` é a do CELULAR, e o computador é o
   que se ACRESCENTA a partir de 48rem (menu lateral) e 62rem (duas colunas).
   Até esta data era o contrário, e o celular vivia de um «quebra-galho» no fim.

   ⚖ As cores e as fontes são as do Gestor Web (`papel.css`) e do Manual de
   Identidade Visual: Grafite no corpo, Preto Profundo na faixa de cima, Ouro
   Antigo cirúrgico (o botão primário, o filete, o item aceso), Ardósia nos
   rótulos. O portal e o Gestor são duas faces da mesma casa — ⛔ duas paletas
   seriam dois escritórios.

   ⛔ Esta folha é da CASA: variáveis, tipografia, faixa de cima, menu, barra
   inferior, cartão e as primitivas das telas que já existiam. O desenho de
   cada ÁREA é da frente dela, e mora num bloco próprio no fim, marcado com o
   nome da frente — ⛔ ninguém repinta a casa de dentro de uma área.

   Nenhuma fonte, imagem ou script vem de fora — a CSP proíbe, e é isso que
   permite dizer ao cliente que a página não conversa com terceiros.
--------------------------------------------------------------------------- */

:root{
  /* papel e tinta (os mesmos valores do Gestor Web) */
  --papel:      #F7F5F0;
  --pergaminho: #F4F0E7;
  --papel-alto: #FFFDF9;
  --tinta:      #35393D;   /* Grafite Escuro — corpo do texto            */
  --tinta-fraca:#596064;   /* Grafite Médio — texto secundário           */
  --fio:        #E2DCCF;
  --fio-forte:  #D8D2C4;

  /* a paleta do Manual */
  --ouro:       #A86315;   /* Ouro Antigo — uso CIRÚRGICO                */
  --ouro-alto:  #BF7A26;
  --ouro-fundo: #F5ECDF;
  --preto:      #161616;   /* Preto Profundo — a faixa de cima           */
  --ardosia:    #415C69;   /* Cinza Ardósia — rótulos                    */
  --oxford:     #0D1C2B;   /* Azul Oxford — institucional                */
  --alerta:     #8A3A32;
  --alerta-fundo:#F5E7E4;

  /* ⚠ nomes antigos, mantidos para as telas de antes desta folha */
  --bronze:      var(--ouro);
  --bronze-alto: var(--ouro-alto);

  /* A MARCA e os TÍTULOS falam Cinzel; o corpo e os RÓTULOS, Montserrat — como o
     Gestor Web (`papel.css`). ⭐ 24/09/2026 (obra «portal-cliente-2», o G3): a
     Montserrat passou a vir EMBUTIDA (`fontes.css` → `static/fontes/`); antes o
     cliente via a Public Sans, que continua na pilha como rede. `--rotulo` é a
     fonte das etiquetas em caixa-alta (o `--rotulo` do Gestor começa pela Inter,
     que o portal ⛔ traz: aqui ele é a Montserrat). */
  --marca: "Cinzel", Georgia, "Times New Roman", serif;
  --serif: "Cinzel", Georgia, "Times New Roman", serif;
  --sans:  "Montserrat", "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --rotulo: var(--sans);

  --raio: 3px;

  /* larguras de página: a leitura corrida continua estreita (linha longa cansa) */
  --pagina:      76rem;
  --folha:       46rem;
  --folha-media: 64rem;
  --folha-larga: 76rem;
  --coluna-lado: 22rem;
  --menu-largura:15rem;

  /* a barra inferior do celular — UMA medida, lida em dois lugares */
  --barra-altura: 3.6rem;
}

*{ box-sizing:border-box; }
[hidden]{ display:none !important; }   /* o atributo manda, mesmo em caixa flex */

html{ -webkit-text-size-adjust:100%; }

/* ⭐ 25/09/2026 (obra «portal-cliente-2», F9 — «Montserrat de fato»): os CONTROLES de
   formulário ⛔ herdam a fonte sozinhos (o navegador lhes dá a do sistema). Medido na
   bancada (375 px): o seletor de arquivo de Enviar e de Mensagens saía em Arial, e o
   resto da casa em Montserrat. Uma regra só, para todos — ⛔ só a FAMÍLIA (o tamanho
   de cada campo continua o da regra dele). */
button, input, select, textarea{ font-family:inherit; }

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.6;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

/* ------------------------------------------------------------------- topo */

.topo{
  background:var(--preto);
  color:var(--papel-alto);
  border-bottom:2px solid var(--ouro);
  padding-top:env(safe-area-inset-top);
}
.faixa{
  max-width:var(--pagina);
  margin:0 auto;
  padding:.85rem 1rem;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
}
.marca{ text-decoration:none; color:inherit; line-height:1.1; }
.marca-nome{
  display:block;
  font-family:var(--marca);
  font-weight:600;
  font-size:1.05rem;
  letter-spacing:.06em;
}
.marca-sub{
  display:block;
  font-family:var(--rotulo);
  font-size:.6rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--fio-forte);
}
.sair-form{ display:flex; align-items:baseline; gap:1rem; margin:0; }
.quem{ display:none; }
.link{
  background:none; border:0; padding:0;
  color:var(--papel-alto);
  font:inherit; font-size:.7rem;
  text-transform:uppercase; letter-spacing:.18em;
  text-decoration:none;
  border-bottom:1px solid var(--ouro);
  cursor:pointer;
  white-space:nowrap;
}
.link:hover{ border-bottom-color:var(--papel-alto); }

/* ------------------------------------------------------------------ casca */

/* A casca junta o menu lateral (computador) e a folha. No celular ela é só a
   folha; o menu mora na barra inferior. */
.casca{ flex:1; width:100%; }

.menu-areas{ display:none; }

/* ------------------------------------------------------------------ folha */

.folha{
  width:100%;
  max-width:var(--folha);
  margin:0 auto;
  padding:1.5rem 1rem 2.5rem;
}
.folha.media{ max-width:var(--folha-media); }
.folha.larga{ max-width:var(--folha-larga); }

/* ------------------------------------------------------------ título e cia */

.etiqueta{
  margin:0 0 .35rem;
  font-family:var(--rotulo);
  font-size:.64rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--ardosia);
}

h1, .titulo-folha{
  font-family:var(--serif);
  font-weight:600;
  font-size:1.6rem;
  line-height:1.2;
  margin:0 0 .5rem;
  letter-spacing:.02em;
  color:var(--preto);
}
/* O filete dourado nasce do título — mesma assinatura do Gestor, e pelo mesmo
   motivo: nenhuma tela o desenha à mão, então nenhuma pode esquecer. */
.titulo-folha::after{
  content:"";
  display:block;
  width:3.4rem;
  height:2px;
  background:var(--ouro);
  margin-top:.65rem;
}

.migalha{ margin:0 0 1.2rem; font-size:.8rem; }
.migalha a{ color:var(--tinta-fraca); text-decoration:none; }
.migalha a:hover{ color:var(--ouro); }

.situacao-topo{
  display:inline-block;
  margin:1rem 0 1.4rem;
  padding:.22rem .75rem;
  border:1px solid var(--fio-forte);
  border-radius:var(--raio);
  background:var(--papel-alto);
  font-family:var(--rotulo);
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--tinta-fraca);
}

/* ----------------------------------------------------------------- cartão */

.cartao{
  background:var(--papel-alto);
  border:1px solid var(--fio);
  border-radius:var(--raio);
  padding:1.2rem 1rem;
  margin:0 0 1.2rem;
}

.painel-titulo{
  margin:0 0 1rem;
  padding-bottom:.6rem;
  border-bottom:1px solid var(--fio);
  font-family:var(--rotulo);
  font-size:.7rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--ouro);
}
.sub{
  margin:1.5rem 0 .6rem;
  font-family:var(--rotulo);
  font-size:.66rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--ardosia);
}
.sub:first-of-type{ margin-top:.4rem; }

.prosa{ margin:0 0 1rem; }
.prosa p{ margin:0 0 .8rem; }
.prosa p:last-child{ margin-bottom:0; }
.resumo{ font-size:1.02rem; }
.apagado{ color:var(--tinta-fraca); font-style:italic; }

.carimbo{
  margin:1rem 0 0;
  font-size:.72rem;
  color:var(--tinta-fraca);
  font-style:italic;
}
.nota{
  margin:.9rem 0 0;
  font-size:.78rem;
  color:var(--tinta-fraca);
}
.aviso{
  margin:0 0 1rem;
  padding:.6rem .8rem;
  border-left:3px solid var(--alerta);
  background:var(--alerta-fundo);
  font-size:.85rem;
}

/* ⛔ A faixa de urgência (Mensagens) é regra, não enfeite: §1.8 da arquitetura. */
.faixa-urgencia{
  margin:0 0 1.2rem;
  padding:.7rem .9rem;
  border-left:3px solid var(--alerta);
  background:var(--alerta-fundo);
  font-size:.85rem;
}

/* ------------------------------------------ o aviso «Adicione à tela inicial» */

.instalar{
  max-width:var(--pagina);
  margin:.8rem auto 0;
  width:calc(100% - 2rem);
  padding:.9rem 1rem;
  background:var(--papel-alto);
  border:1px solid var(--fio);
  border-left:3px solid var(--ouro);
  border-radius:var(--raio);
}
.instalar-titulo{
  margin:0 0 .3rem;
  font-size:.66rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--ouro);
}
.instalar-texto{ margin:0; font-size:.88rem; }
.instalar-acoes{ display:flex; gap:.6rem; flex-wrap:wrap; }
.instalar-acoes .botao{ margin-top:.8rem; }

/* ---------------------------------------------------------------- entrada */

.entrada-grade{ display:grid; grid-template-columns:1fr; gap:1.4rem; }
.folha.palco{ max-width:var(--folha-media); display:flex; }
.folha.palco > .entrada-grade{ flex:1; }
.entrada-grade .cartao{ margin:0; }

/* -------------------------------------------------------------- lista casos */

.lista-casos{ list-style:none; margin:1.4rem 0 0; padding:0; }
.cartao.vazio{ margin-top:1.4rem; }
.lista-casos li{ margin:0 0 1rem; }

.caso-cartao{
  display:block;
  background:var(--papel-alto);
  border:1px solid var(--fio);
  border-left:3px solid var(--ouro);
  border-radius:var(--raio);
  padding:1.1rem 1rem 1rem;
  text-decoration:none;
  color:inherit;
}
.caso-cartao:hover{ border-color:var(--fio-forte); border-left-color:var(--ouro-alto); }
.caso-cabeca{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.caso-cartao h2{
  font-family:var(--serif);
  font-size:1.15rem;
  font-weight:600;
  margin:0;
  line-height:1.3;
  color:var(--preto);
}
.selo-novo{
  flex:none;
  padding:.12rem .6rem;
  background:var(--ouro);
  color:var(--papel-alto);
  border-radius:var(--raio);
  font-size:.6rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  white-space:nowrap;
}
.situacao{
  margin:.3rem 0 0;
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--tinta-fraca);
}
.previa{ margin:.75rem 0 0; color:var(--tinta-fraca); font-size:.9rem; max-width:46rem; }
.caso-rodape{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  margin:1rem 0 0;
  padding-top:.7rem;
  border-top:1px solid var(--fio);
}
.quando{ font-size:.75rem; color:var(--tinta-fraca); font-style:italic; }
.mais{
  font-size:.66rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--ouro);
}

/* -------------------------------------------------------- caso (colunas) */

.caso-grade{ display:grid; grid-template-columns:1fr; gap:1.2rem; align-items:start; }
.caso-col-pegar .cartao{ margin-bottom:1.2rem; }

/* -------------------------------------------------------------- conversa */

.fio{ list-style:none; margin:0 0 1.4rem; padding:0; }
.fala{
  padding:.9rem 1rem;
  margin:0 0 .8rem;
  border-radius:var(--raio);
  border:1px solid var(--fio);
}
.fala.do-escritorio{ background:var(--ouro-fundo); border-left:3px solid var(--ouro); }
.fala.do-cliente   { background:var(--papel); border-left:3px solid var(--fio-forte); }
.fala-quem{
  margin:0 0 .4rem;
  font-size:.64rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--tinta-fraca);
}
.fala-quando{ text-transform:none; letter-spacing:0; font-style:italic; margin-left:.5rem; }
.fala-corpo p{ margin:0 0 .5rem; }
.fala-corpo p:last-child{ margin-bottom:0; }

/* ------------------------------------------------------------ documentos */

.docs{ list-style:none; margin:0; padding:0; }
.docs li{ padding:.7rem 0; border-bottom:1px solid var(--fio); }
.docs li:last-child{ border-bottom:0; }
.docs a{ color:var(--oxford); text-decoration:none; border-bottom:1px solid var(--fio-forte); }
.docs a:hover{ color:var(--ouro); border-bottom-color:var(--ouro); }
.doc-meta{ display:block; margin-top:.2rem; font-size:.72rem; color:var(--tinta-fraca); }

/* ---------------------------------------------------------------- formas */

.forma{ margin:1.2rem 0 0; }
.forma label{
  display:block;
  margin:0 0 .4rem;
  font-size:.64rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--ardosia);
}
.forma input[type=email],
.forma input[type=password],
.forma input[type=text],
.forma textarea{
  width:100%;
  padding:.75rem .85rem;
  border:1px solid var(--fio-forte);
  border-radius:var(--raio);
  background:var(--papel);
  color:var(--tinta);
  font:inherit;
  font-size:16px;          /* ⚠ abaixo de 16px o iPhone dá zoom ao tocar no campo */
}
.forma input + label,
.forma textarea + label{ margin-top:1rem; }
.forma textarea{ resize:vertical; min-height:5.5rem; }
.forma input:focus,
.forma textarea:focus{
  outline:2px solid var(--ouro);
  outline-offset:1px;
  background:var(--papel-alto);
}
.forma input[type=file]{
  width:100%;
  padding:.6rem 0;
  font-size:.88rem;
  color:var(--tinta-fraca);
}

.botao{
  display:inline-block;
  margin-top:1.1rem;
  padding:.75rem 1.4rem;
  min-height:2.75rem;        /* o dedo precisa de alvo: 44 px */
  border:1px solid var(--fio-forte);
  border-radius:var(--raio);
  background:var(--papel);
  color:var(--tinta);
  font:inherit;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  text-decoration:none;
  cursor:pointer;
}
.botao:hover{ border-color:var(--ouro); color:var(--ouro); }
.botao.primario{
  background:var(--ouro);
  border-color:var(--ouro);
  color:var(--papel-alto);
}
.botao.primario:hover{ background:var(--ouro-alto); border-color:var(--ouro-alto); color:var(--papel-alto); }

/* --------------------------------------------------------------- rodapé */

.rodape{
  border-top:1px solid var(--fio);
  padding:1.3rem 1rem 1.6rem;
  text-align:center;
  font-size:.7rem;
  color:var(--tinta-fraca);
}
.rodape p{ margin:.2rem 0; }
.rodape a{ color:var(--tinta-fraca); }

/* ---------------------------------------------- o ESTADO de cada coisa
   03/09/2026, modelo por sincronização: duas frases, nunca um enfeite:
     · «Enviado ao escritório» / «Recebido pelo escritório em …»
     · «Indisponível no momento — tente novamente mais tarde»
   ⛔ Nunca «lido»: dizer lido seria mentir sobre gente. */
.estado{ margin:.25rem 0 0; font-family:var(--sans); font-size:.72rem; letter-spacing:.02em; }
.estado.a-caminho{ color:var(--tinta-fraca); }
.estado.a-caminho::before{ content:"○ "; color:var(--fio-forte); }
.estado.recebido{ color:var(--ouro); }
.estado.recebido::before{ content:"✓ "; }

/* =================================================== A BARRA INFERIOR (celular)
   Início · Processos · Enviar · Mensagens · Mais. Presa ao pé da tela, com a
   folga do «queixo» do iPhone (safe-area). Só existe abaixo de 48rem. */

body.com-menu{ padding-bottom:calc(var(--barra-altura) + env(safe-area-inset-bottom)); }

.barra-inferior{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:20;
  display:flex;
  align-items:stretch;
  height:calc(var(--barra-altura) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:var(--preto);
  border-top:2px solid var(--ouro);
}
.barra-item{
  flex:1 1 0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 .2rem;
  color:var(--fio-forte);
  text-decoration:none;
  font-size:.62rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.12em;    /* ⚠ .18em não cabe cinco rótulos em 320px */
  text-align:center;
  cursor:pointer;
  border-top:2px solid transparent;
  margin-top:-2px;
}
.barra-item.ativa{ color:var(--papel-alto); border-top-color:var(--papel-alto); }

/* o «Mais»: um <details>, com a seta da casa (▸ fechado, ▾ aberto) */
.barra-mais{ flex:1 1 0; display:flex; position:relative; }
.barra-mais > summary{ list-style:none; width:100%; }
.barra-mais > summary::-webkit-details-marker{ display:none; }
.barra-mais > summary::after{ content:"▸"; margin-left:.3rem; }
.barra-mais[open] > summary::after{ content:"▾"; }
.barra-mais-lista{
  position:absolute;
  right:.4rem;
  bottom:calc(100% + .4rem);
  min-width:15rem;
  margin:0;
  padding:.4rem 0;
  list-style:none;
  background:var(--papel-alto);
  border:1px solid var(--fio-forte);
  border-radius:var(--raio);
  box-shadow:0 6px 18px rgba(22,22,22,.18);
}
.barra-mais-lista .menu-item{ padding:.7rem 1rem; }

/* ======================================================= O MENU LATERAL
   (e os itens do «Mais», que usam as mesmas classes) */

.menu-item{
  display:block;
  padding:.55rem 1rem;
  color:var(--tinta);
  text-decoration:none;
  font-size:.86rem;
  border-left:3px solid transparent;
}
a.menu-item:hover{ color:var(--ouro); }
.menu-item.ativa{ color:var(--preto); font-weight:600; border-left-color:var(--ouro); background:var(--ouro-fundo); }
.menu-item.em-breve{ color:var(--tinta-fraca); cursor:default; }
.menu-item small{
  margin-left:.5rem;
  font-size:.58rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--ardosia);
}

/* ================================================================ 48rem
   Do tablet para cima: o MENU LATERAL aparece e a barra inferior sai. */
@media (min-width:48rem){
  body{ font-size:16px; line-height:1.62; }
  body.com-menu{ padding-bottom:0; }
  .barra-inferior{ display:none; }

  .faixa{ padding:1.05rem 2rem; }
  .marca-nome{ font-size:1.12rem; }
  .quem{
    display:inline;
    font-size:.78rem;
    color:var(--fio-forte);
    max-width:16rem;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  body.com-menu .casca{
    display:grid;
    grid-template-columns:var(--menu-largura) minmax(0,1fr);
    max-width:var(--pagina);
    margin:0 auto;
  }
  .menu-areas{
    display:block;
    padding:2.2rem 0 2rem;
    border-right:1px solid var(--fio);
  }
  .menu-areas ul{
    list-style:none;
    margin:0;
    padding:0;
    position:sticky;
    top:1.2rem;
  }

  .folha{ padding:2.6rem 2rem 3.5rem; }
  h1, .titulo-folha{ font-size:2.1rem; line-height:1.15; }
  .cartao{ padding:1.7rem 1.7rem; margin-bottom:1.6rem; }
  .caso-cartao{ padding:1.35rem 1.6rem 1.15rem; }
  .caso-cartao h2{ font-size:1.3rem; }
  .instalar{ width:calc(100% - 4rem); }
  .rodape{ padding:1.5rem 2rem 2rem; font-size:.72rem; }
}

/* ================================================================ 62rem
   O computador de verdade: entrada e caso em duas colunas. */
@media (min-width:62rem){
  .entrada-grade{
    grid-template-columns:minmax(0,1.05fr) minmax(21rem,.95fr);
    gap:4rem;
    align-items:center;
    min-height:56vh;
  }
  .entrada-grade .cartao{ padding:2rem 1.9rem; }

  .caso-grade{ grid-template-columns:minmax(0,1fr) var(--coluna-lado); gap:1.8rem; }
  /* Os documentos acompanham a rolagem da conversa. */
  .caso-col-pegar{ position:sticky; top:1.4rem; }
  .caso-col-pegar .cartao{ margin-bottom:0; }
  .caso-col-pegar .docs{ max-height:18rem; overflow-y:auto; }
}

/* =========================================================================
   AS ÁREAS ⛔ NÃO MORAM AQUI. Seis frentes trabalham ao mesmo tempo: uma folha
   só para todas seria seis mãos no mesmo arquivo. O desenho de cada área mora
   em `static/areas/<area>.css` (e o JavaScript em `static/areas/<area>.js`),
   carregados pelo bloco `cabeca` do template da própria área:

       {% block cabeca %}<link rel="stylesheet" href="{{ url_for('static',
         filename='areas/processos.css') }}">{% endblock %}

   ⚖ A casa acima não se repinta de dentro de uma área; o que a área precisar
   de novo nasce com o prefixo dela (`.inicio-…`, `.proc-…`, `.env-…`,
   `.msg-…`, `.doc-…`, `.dados-…`).
   ========================================================================= */

/* o esqueleto de área (etapa 0): tracejado = «ainda não é a tela de verdade» */
.cartao.esqueleto{ border-style:dashed; }