/*
  A cara do Pauta — a mesma do app Ajustes do iPhone.

  🔑 AS REGRAS, EM UMA LINHA CADA:
    o chão é cinza, o conteúdo mora em cartão branco;
    ação é TEXTO COLORIDO, nunca botão com fundo;
    o risco entre linhas é recuado, e a última linha não tem;
    rótulo de seção em cima do cartão, explicação em cinza embaixo;
    nome da tela nasce grande e, ao rolar, vira pequeno na barra.

  🚨 NENHUMA COR LITERAL FORA DO BLOCO `:root`. Se aparecer um `#` no meio de um
  componente, o modo escuro quebra em silêncio.
*/

:root {
  color-scheme: light;
  --ground: #f4f6f8;
  --paper: #ffffff;
  --ink: #0e1822;
  --ink2: #3c4c5c;
  --ink3: #6d7e8d;
  --line: #dbe3ea;
  --line2: #edf1f5;
  --acento: #007aff;
  --acento-suave: #e6f1ff;
  --espera: #96580a;  --espera-suave: #faf0dd;
  --ok: #14684a;      --ok-suave: #dfefe7;
  --nao: #98292b;     --nao-suave: #f7e5e4;
  --raio: 12px;
  --seguro-topo: env(safe-area-inset-top, 0px);
  --seguro-base: env(safe-area-inset-bottom, 0px);
  --ios-chao: #f2f2f7;
  --ios-cartao: #ffffff;
  --ios-risco: #e5e5ea;
  --ios-apagado: #8e8e93;
  --ios-seta: #c7c7cc;
  /* as cores dos ladrilhos, as mesmas dos Ajustes do iPhone */
  --lad-azul: #007aff; --lad-laranja: #ff9500; --lad-verde: #34c759; --lad-roxo: #5856d6;
  --lad-rosa: #ff2d55; --lad-lilas: #af52de; --lad-cinza: #8e8e93; --lad-traco: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --ground: #0b1218;
    --paper: #121b22;
    --ink: #e9eff4;
    --ink2: #afbfcb;
    --ink3: #7e8f9d;
    --line: #22303a;
    --line2: #1a252d;
    --acento: #0a84ff;
    --acento-suave: #0e2438;
    --espera: #e2ac63;  --espera-suave: #2c2214;
    --ok: #66c398;      --ok-suave: #0f2620;
    --nao: #e28d8a;     --nao-suave: #2b1618;
    --ios-chao: #000000;
    --ios-cartao: #1c1c1e;
    --ios-risco: #38383a;
    --ios-apagado: #8e8e93;
    --ios-seta: #48484a;
    --lad-azul: #0a84ff; --lad-laranja: #ff9f0a; --lad-verde: #30d158; --lad-roxo: #5e5ce6;
    --lad-rosa: #ff375f; --lad-lilas: #bf5af2; --lad-cinza: #8e8e93;
  }
}

* { box-sizing: border-box; }

/*
  🚨 `display` escrito num componente VENCE o `hidden` do HTML. O ‹ de voltar e
  a barra de abas são `flex` e `grid`, então continuavam aparecendo mesmo
  escondidos — o ‹ nascia na tela raiz, onde não há para onde voltar.
*/
[hidden] { display: none !important; }

body {
  margin: 0;
  touch-action: manipulation;
  background: var(--ios-chao);
  color: var(--ink);
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.app { min-height: 100dvh; max-width: 560px; margin: 0 auto;
       display: flex; flex-direction: column; background: var(--ios-chao); }
.corpo { flex: 1; padding: 16px; display: flex; flex-direction: column;
         gap: 16px; background: var(--ios-chao); }
/*
  🚨 O respiro entre cartões vem do `gap` do corpo. Uma parte da tela envolvida
  num `div` comum perde esse respiro e os cartões colam. Todo agrupamento usa
  `.bloco`, que repete o mesmo `gap`.
*/
.bloco { display: flex; flex-direction: column; gap: 16px; }

.corpo > .titulao { font-size: 31px; font-weight: 700;
                    letter-spacing: -0.025em; margin: 2px 0 -4px; }

.topo { position: sticky; top: 0; z-index: 10; background: var(--paper);
        padding: calc(10px + var(--seguro-topo)) 16px 12px;
        border-bottom: 1px solid var(--line2);
        display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.topo h1 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
/* 🚨 na tela raiz o nome nasce grande no corpo; o pequeno só entra ao rolar,
   senão o nome da tela aparece duas vezes */
.topo.raiz h1 { opacity: 0; transition: opacity .18s ease; }
.topo.raiz.rolou h1 { opacity: 1; }
.topo .voltar { width: 38px; height: 38px; border-radius: 19px; flex-shrink: 0;
                border: 1px solid var(--line); background: var(--ground); color: var(--acento);
                display: flex; align-items: center; justify-content: center;
                padding: 0 2px 0 0; font-size: 17px; }
.topo .vaga { width: 38px; flex-shrink: 0; }

.lista { display: flex; flex-direction: column; border: 0; border-radius: 11px;
         overflow: hidden; background: var(--ios-cartao); }
.linha { position: relative; display: flex; align-items: center; gap: 11px;
         min-height: 44px; padding: 11px 16px; border: 0; width: 100%;
         text-align: left; background: none; color: inherit; font: inherit; }
.linha:not(:last-child)::after { content: ""; position: absolute;
         left: 16px; right: 0; bottom: 0; height: 1px; background: var(--ios-risco); }
.linha:not(:last-child):has(.avatar, .quadro, .icone)::after { left: 58px; }
button.linha:active { background: var(--line2); }
.linha .meio { flex: 1; min-width: 0; }
.linha .nome { display: block; font-size: 14.5px; font-weight: 500; letter-spacing: -0.01em; }
/* `pre`, não `nowrap`: igual numa linha só, mas respeita a quebra do "mexeu" da Pauta */
.linha .desc { display: block; font-size: 12px; color: var(--ink3); margin-top: 1px;
                white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.seta { color: var(--ink3); font-size: 17px; flex: 0 0 auto; }
.quadro { width: 30px; height: 30px; border-radius: 15px; flex: 0 0 auto; font-size: 12px;
          font-weight: 600; display: flex; align-items: center; justify-content: center;
          background: var(--acento-suave); color: var(--acento); }

.grupo { font-size: 12px; letter-spacing: 0.02em; text-transform: uppercase;
         color: var(--ios-apagado); font-weight: 400; margin: 0 0 -10px 16px; }
.rodape { font-size: 13px; color: var(--ios-apagado); margin: -10px 16px 0; line-height: 1.4; }

/* AÇÃO = TEXTO. Quem desenha o cartão é `.botoes` */
.botao { border: 0; background: none; color: var(--acento); border-radius: 0;
         padding: 13px 16px; font-size: 16px; font-weight: 400;
         width: 100%; text-align: center; }
.botao.cheio { background: none; color: var(--acento); font-weight: 600; }
.botao.mal { color: var(--nao); font-weight: 400; }
.botao:disabled { color: var(--ios-seta); }
a.botao { display: block; text-decoration: none; text-align: center; }
/* column-reverse: a ação principal vem por último no código e aparece em cima */
.botoes { display: flex; flex-direction: column-reverse; gap: 0;
          background: var(--ios-cartao); border-radius: 11px; overflow: hidden; }
.botoes > .botao:not(:first-child) { border-bottom: 1px solid var(--ios-risco); }

.campo { display: flex; flex-direction: column; gap: 2px;
         background: var(--ios-cartao); border-radius: 11px; padding: 9px 16px 11px; }
.campo label { font-size: 13px; color: var(--ios-apagado); font-weight: 400; }
/*
  🚨 `outline: none` NÃO É ENFEITE AQUI. Sem ele o navegador desenha o próprio
  anel de foco DENTRO do campo, e aparecem duas molduras azuis, uma dentro da
  outra. Quem mostra o foco é o `:focus-within` do cartão, logo abaixo.
*/
.campo input, .campo select, .campo textarea, .campo .valor {
         font: inherit; font-size: 17px; padding: 2px 0; border: 0; border-radius: 0;
         outline: none; background: none; color: var(--ink); width: 100%;
         appearance: none; -webkit-appearance: none; }
.campo textarea { resize: none; line-height: 1.4; }
.campo:focus-within { box-shadow: inset 0 0 0 2px var(--acento); }
.campo .dica { font-size: 13px; color: var(--ios-apagado); margin-top: 2px; }
.campo:has(+ .campo) { border-bottom-left-radius: 0; border-bottom-right-radius: 0;
                       margin-bottom: -16px; position: relative; }
.campo:has(+ .campo)::after { content: ""; position: absolute; left: 16px; right: 0;
                       bottom: 0; height: 1px; background: var(--ios-risco); }
.campo + .campo { border-top-left-radius: 0; border-top-right-radius: 0; }

/* explicação é cartão liso: o tom vive na LETRA, não no fundo */
.aviso { border-radius: 11px; padding: 12px 16px; font-size: 14px; line-height: 1.45;
         border: 0; background: var(--ios-cartao); color: var(--ink2); }
.aviso b { color: var(--ink); }
.aviso.espera b { color: var(--espera); }
.aviso.ok b { color: var(--ok); }
/* o ERRO é a única exceção e mantém fundo: não é explicação, é recusa */
.aviso.mal { background: var(--nao-suave); color: var(--nao); }

.pilula { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px;
          padding: 2px 9px; font-size: 11px; font-weight: 600; white-space: nowrap;
          font-variant-numeric: tabular-nums; }
.pilula.espera { background: var(--espera-suave); color: var(--espera); }
.pilula.ok { background: var(--ok-suave); color: var(--ok); }
.pilula.nao { background: var(--nao-suave); color: var(--nao); }

.segmentado { display: flex; border-radius: 9px; padding: 2px; gap: 2px;
              background: color-mix(in srgb, var(--ios-apagado) 22%, transparent); }
/* 🚨 flex: 1 1 auto, NUNCA flex: 1 — em fatias iguais a palavra longa sai cortada */
.segmentado button { flex: 1 1 auto; min-width: 0; appearance: none; border: 0;
              background: none; color: var(--ink); border-radius: 7px;
              padding: 7px 2px; font-size: 13px; font-weight: 500;
              white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.segmentado button[aria-pressed="true"] { background: var(--ios-cartao);
              font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14); }

.abas { display: grid; grid-template-columns: repeat(var(--quantas, 4), minmax(0, 1fr));
        align-items: end; gap: 2px; position: sticky; bottom: 0; z-index: 3;
        padding: 6px 6px calc(8px + var(--seguro-base));
        border-top: 1px solid var(--line2); background: var(--paper); }
.aba { border: 0; background: none; padding: 6px 2px; border-radius: 8px;
       font-size: 10.5px; color: var(--ink3);
       display: flex; flex-direction: column; align-items: center; gap: 2px; }
.aba[aria-current="page"] { color: var(--acento); font-weight: 600; }
.aba[aria-current="page"] .ic { stroke-width: 2.1; }
/* o nome do app só existe na coluna lateral do computador */
.abas .marca { display: none; }

.pilha { display: none; }

.vazio { text-align: center; color: var(--ink3); font-size: 13.5px;
         padding: 28px 16px; line-height: 1.5; }
/* o vazio que ocupa um painel inteiro, como o "nenhuma mensagem selecionada" */
.vazio.grande { font-size: 22px; color: var(--ios-seta); padding: 26vh 16px; letter-spacing: -0.01em; }

/* as colunas da tabela e a conta na lateral só existem em tela larga */
.col, .abas .conta, .linha.cabecalho { display: none; }

/* a busca é uma linha de cartão, como no iPhone */
/* 🚨 NUNCA MENOR QUE 16: o iPhone dá zoom sozinho ao tocar num campo com letra
   menor, e não desfaz — a página fica mais larga que a tela (print do dono, 24/09) */
.busca { background: var(--ios-cartao); border-radius: 11px; padding: 11px 14px;
         font: inherit; font-size: 17px; color: var(--ink); border: 0; width: 100%; }
.busca::placeholder { color: var(--ios-apagado); }
.busca:focus { outline: none; box-shadow: inset 0 0 0 2px var(--acento); }

/*
  O documento aberto dentro do Pauta.

  🚨 Altura em unidade de TELA, não em porcentagem. Porcentagem dentro de um
  corpo que cresce com o conteúdo dá zero, e o quadro nasce invisível.
*/
.papel { width: 100%; height: 70dvh; min-height: 420px; border: 0;
         border-radius: 11px; background: var(--ios-cartao); display: block; }

/*
  A caixa de escrever do Meu advogado.

  🔑 CONVERSA NÃO É FORMULÁRIO. Campo com rótulo em cima é o idioma dos Ajustes;
  para escrever uma pergunta, o iPhone usa uma caixa arredondada com o botão de
  enviar DENTRO dela. Foi o que estava destoando.
*/
.escrever { display: flex; align-items: flex-end; gap: 8px;
            background: var(--ios-cartao); border-radius: 20px; padding: 6px 6px 6px 16px; }
.escrever:focus-within { box-shadow: inset 0 0 0 2px var(--acento); }
.dizer { flex: 1; min-width: 0; font: inherit; font-size: 16px; line-height: 1.4;
         border: 0; outline: none; background: none; color: var(--ink);
         resize: none; padding: 8px 0; max-height: 160px; }
.dizer::placeholder { color: var(--ios-apagado); }
.enviar { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 16px; border: 0;
          padding: 0; background: var(--acento); color: #fff; font-size: 17px;
          line-height: 1; display: flex; align-items: center; justify-content: center; }
.enviar:disabled { background: var(--ios-seta); }
@media (prefers-color-scheme: dark) { .enviar { color: var(--ios-chao); } }

/*
  Os balões da conversa.

  🔑 Quem falou é dito pelo LADO e pela COR, não por um rótulo em cima. É assim
  na conversa do iPhone, e economiza duas linhas de texto em cada fala.
*/
.conversa { display: flex; flex-direction: column; gap: 8px; }
.conversa:empty { display: none; }
.fala { max-width: 84%; align-self: flex-start; padding: 10px 14px; font-size: 15px;
        line-height: 1.4; white-space: pre-wrap; border-radius: 18px;
        background: var(--ios-cartao); color: var(--ink); }
.fala.minha { align-self: flex-end; background: var(--acento); color: #fff; }
.fala.pensando { color: var(--ink3); font-style: italic; }
.fala.erro { background: var(--nao-suave); color: var(--nao); }
/* de onde veio a resposta: miúdo, embaixo do balão, como a hora no iMessage */
.fonte { align-self: flex-start; max-width: 84%; padding: 0 14px; font-size: 12px;
  color: var(--ink3); white-space: pre-line; overflow-wrap: anywhere; }
.conversa .lista { align-self: stretch; margin-top: 4px; }

@media (prefers-color-scheme: dark) { .fala.minha { color: var(--ios-chao); } }
/* ==========================================================================
   O COMPUTADOR — estilo iCloud
   ==========================================================================

   🔑 O QUE MUDA, E POR QUÊ: no celular o polegar manda, e a navegação mora no
   pé. No computador manda o mouse e a tela é larga — a navegação vira COLUNA
   LATERAL fixa, e o conteúdo ganha uma coluna própria, centrada e confortável.

   🚨 Nenhuma tela é reescrita para isto. As mesmas peças, recolocadas: é o
   `.abas` que vira a coluna, o mesmo `.topo` que vira a faixa de cima. Se
   houvesse um segundo conjunto de telas "para computador", uma das duas caras
   ficaria para trás no dia seguinte.
*/
@media (min-width: 900px) {
  :root { --ios-chao: var(--ground); }

  .app {
    max-width: none;
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    /*
      🚨 AS ALTURAS DAS LINHAS PRECISAM SER DITAS. A coluna lateral atravessa as
      duas linhas e tem a altura da tela; sem esta regra o navegador reparte
      essa altura entre as duas, a faixa de cima incha e o conteúdo nasce
      empurrado para o meio da tela.
    */
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "lado topo" "lado corpo";
  }

  .topo {
    grid-area: topo;
    padding: 18px 40px 16px;
    background: color-mix(in srgb, var(--paper) 82%, transparent);
    backdrop-filter: saturate(180%) blur(14px);
  }
  .topo h1 { font-size: 20px; }
  /* no computador o nome da tela não se esconde: não há o que economizar */
  .topo.raiz h1 { opacity: 1; }
  .topo .voltar { width: 34px; height: 34px; border-radius: 17px; }

  .corpo {
    grid-area: corpo;
    max-width: 820px;
    padding: 28px 40px 80px;
    gap: 20px;
  }
  .corpo > .titulao { font-size: 34px; margin: 0 0 -2px; }

  /* --- a coluna lateral -------------------------------------------------- */

  .abas {
    grid-area: lado;
    position: sticky;
    top: 0;
    bottom: auto;
    align-self: stretch;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 18px 12px calc(18px + var(--seguro-base));
    border-top: 0;
    border-right: 1px solid var(--line2);
    background: var(--paper);
  }
  .abas .marca {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.02em;
    padding: 4px 12px 16px;
  }
  .aba {
    flex-direction: row;
    justify-content: flex-start;
    gap: 11px;
    padding: 9px 12px;
    border-radius: 9px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--ink2);
  }
  .aba:hover { background: var(--line2); }
  .aba[aria-current="page"] { background: var(--acento-suave); color: var(--acento); }

  /* --- o conteúdo respira mais ------------------------------------------- */

  .lista, .campo, .aviso, .botoes, .fala { border-radius: 12px; }
  .linha { min-height: 50px; padding: 13px 18px; }
  .linha:not(:last-child)::after { left: 18px; }
  .linha:not(:last-child):has(.avatar, .quadro, .icone)::after { left: 60px; }
  .linha .nome { font-size: 15px; }
  .grupo, .rodape { margin-left: 18px; }
  .botao { padding: 14px 18px; }
  .campo { padding: 11px 18px 13px; }
  .busca { padding: 12px 16px; font-size: 16px; }
  .papel { height: calc(100dvh - 230px); min-height: 520px; }

  /* --- a lista de documentos vira tabela, como no iCloud Drive ------------ */

  .lista.tabela .linha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 118px 88px 104px;
    align-items: center;
    gap: 12px;
  }
  .col {
    display: block;
    font-size: 12.5px;
    color: var(--ink3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
  }
  /* no computador o contexto está nas colunas; repetir embaixo do nome seria eco */
  .lista.tabela .desc { display: none; }
  .linha.cabecalho {
    display: grid;
    min-height: 34px;
    padding-top: 8px;
    padding-bottom: 8px;
    background: none;
  }
  .linha.cabecalho .nome, .linha.cabecalho .col {
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ios-apagado);
  }
  .linha.cabecalho::after { background: var(--ios-risco); left: 0 !important; }
  .lista.tabela .seta { display: none; }

  /* --- quem está usando, no pé da coluna lateral -------------------------- */

  .abas .conta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding: 9px 12px;
    border: 0;
    border-radius: 9px;
    background: none;
    text-align: left;
    width: 100%;
  }
  .abas .conta:hover { background: var(--line2); }
  .abas .conta .quem {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    color: var(--ink3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .vazio { padding: 40px 18px; }
}

  /* --- as duas colunas ---------------------------------------------------- */

  /*
    🔑 A LISTA NÃO SAI DA TELA. Clicar num processo troca só a coluna da
    direita: a lista não pisca, não recarrega e ninguém perde o lugar onde
    estava. É o jeito do iCloud, e só faz sentido onde há largura.
  */
  /*
    🚨 CADA COLUNA ROLA SOZINHA. Com a página inteira rolando junto, descer no
    processo levava a lista embora e a coluna do meio ficava em branco — parecia
    defeito, e era. Travar a altura do app em uma tela e dar rolagem própria a
    cada coluna é o que o iCloud faz.
  */
  .app.duplo {
    grid-template-columns: 260px 340px minmax(0, 1fr);
    grid-template-areas: "lado topo topo2" "lado pilha corpo";
    height: 100dvh;
    overflow: hidden;
  }
  .app.duplo .corpo { overflow: auto; }
  .app.duplo .topo { border-right: 1px solid var(--line2); }
  .app.duplo .topo h1 { font-size: 17px; }
  .topo2 { grid-area: topo2; }
  .topo2 h1 { font-size: 17px; }

  .app.duplo .pilha {
    grid-area: pilha;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 12px 40px;
    background: var(--ios-chao);
    border-right: 1px solid var(--line2);
    overflow: auto;
  }
  .app.duplo .pilha .grupo,
  .app.duplo .pilha .rodape { margin-left: 14px; }
  .app.duplo .pilha .linha { min-height: 46px; padding: 10px 14px; }
  .app.duplo .pilha .linha:not(:last-child)::after { left: 14px; }
  .app.duplo .pilha .linha .nome { font-size: 14px; }
  /* na coluna da lista a seta não serve: o item abre ao lado, não em outra tela */
  .app.duplo .pilha .seta { display: none; }

  /* a linha do que está aberto à direita */
  .linha.aqui { background: var(--acento-suave); }
  .linha.aqui .nome { color: var(--acento); }

  .app.duplo .corpo { max-width: 760px; padding: 24px 32px 70px; }

/* telas muito largas: a coluna lateral não cresce junto, o conteúdo sim */
@media (min-width: 1400px) {
  .app { grid-template-columns: 280px minmax(0, 1fr); }
  .app.duplo { grid-template-columns: 280px 380px minmax(0, 1fr); }
  .corpo { max-width: 900px; }
}

/* O símbolo do FCM Doc: na barra do computador e na porta de entrada. */
.abas .marca img { width: 26px; height: 26px; border-radius: 7px; }

/*
  A porta de entrada (login e "carregando…"): tudo no meio da tela, numa coluna
  estreita. 🚨 Vem DEPOIS das regras de tela larga de propósito — a grade de
  duas colunas do computador tem de perder para ela, senão a coluna das abas
  reserva um vão vazio à esquerda.
*/
.app.porta { display: flex; max-width: none; align-items: center; justify-content: center; }
.app.porta > .topo, .app.porta > .topo2, .app.porta > .pilha, .app.porta > .abas { display: none; }
.app.porta > .corpo { flex: 0 1 auto; width: 100%; max-width: 380px; gap: 12px;
                      padding: 32px 24px calc(48px + var(--seguro-base));
                      text-align: center; background: none; }
.app.porta .simbolo { display: block; width: 80px; height: 80px; border-radius: 19px;
                      margin: 0 auto 8px; }
.app.porta .titulao { font-size: 30px; margin: 0; }
.app.porta .lema { margin: 0 0 20px; font-size: 15px; color: var(--ios-apagado);
                  text-wrap: balance; }
.app.porta .aviso { text-align: left; }

/*
  Os Ajustes do jeito do iPhone (desenho aprovado em 24/09): ladrilho colorido
  à esquerda, nome, valor cinza à direita, setinha. Editar é sempre numa tela
  à parte — a lista só mostra.
*/
.ladrilho { width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto;
            display: flex; align-items: center; justify-content: center; color: var(--lad-traco); }
.ladrilho svg { width: 19px; height: 19px; }
.ladrilho.azul { background: var(--lad-azul); }   .ladrilho.laranja { background: var(--lad-laranja); }
.ladrilho.verde { background: var(--lad-verde); } .ladrilho.roxo { background: var(--lad-roxo); }
.ladrilho.rosa { background: var(--lad-rosa); }   .ladrilho.lilas { background: var(--lad-lilas); }
.ladrilho.cinza { background: var(--lad-cinza); }
.ladrilho.grande { width: 66px; height: 66px; border-radius: 16px; }
.ladrilho.grande svg { width: 46px; height: 46px; }
.linha:not(:last-child):has(.ladrilho)::after { left: 57px; }
.linha .valor { color: var(--ios-apagado); font-size: 15px; white-space: nowrap; overflow: hidden;
                text-overflow: ellipsis; max-width: 48%; }
.lista.ajustes .linha { min-height: 50px; }
.lista.ajustes .linha .nome { font-size: 16px; font-weight: 400; }
.cabeca { background: var(--ios-cartao); border-radius: 18px; padding: 20px 20px 22px; }
.cabeca h2 { font-size: 24px; font-weight: 700; margin: 14px 0 6px; letter-spacing: -0.02em; }
.cabeca p { margin: 0; color: var(--ios-apagado); font-size: 15px; line-height: 1.4; }
.perfil { display: flex; gap: 14px; align-items: center; }
.perfil .quadro { width: 56px; height: 56px; border-radius: 28px; font-size: 20px; }
.perfil .nome { font-size: 19px !important; font-weight: 600 !important; }
.marca-certa { color: var(--acento); font-weight: 600; font-size: 17px; }
/*
  🚨 No computador, tela de uma coluna só (Ajustes, Contratos, Depósito): a
  coluna do conteúdo fica NO MEIO, embaixo do título. Encostada à esquerda, numa
  janela larga o título (centrado na barra) e o conteúdo se desencontravam — o
  dono mandou print com o título "Ulbra" lá no canto, cortado.
*/
@media (min-width: 900px) {
  .app:not(.duplo):not(.porta) > .corpo { margin-inline: auto; width: 100%; }
  .app:not(.duplo):not(.porta) > .topo { padding-inline: max(40px, calc((100% - 820px) / 2)); }
}
@media (min-width: 1400px) {
  .app:not(.duplo):not(.porta) > .topo { padding-inline: max(40px, calc((100% - 900px) / 2)); }
}
/* o atalho "＋ Cadastrar pessoa": texto azul e a bolinha azul com o +, como o "Adicionar contato" do iPhone */
.linha.acao .nome { color: var(--acento); }
.linha .mais { width: 36px; height: 36px; border-radius: 18px; flex: 0 0 auto; background: var(--acento);
               color: var(--lad-traco); display: flex; align-items: center; justify-content: center;
               font-size: 24px; font-weight: 300; line-height: 1; }
.linha:not(:last-child):has(.mais)::after { left: 63px; }
/* nas listas dos Ajustes a explicação pode ter duas linhas — cortada, "Vê só os pedidos…" não explicava nada */
.lista.ajustes .linha .desc { white-space: normal; }

/* o ＋ redondo da barra (novo pedido, depositar documento) */
.botao-mais { width: 32px; height: 32px; border-radius: 16px; border: 0; background: var(--acento);
              color: var(--lad-traco); font-size: 22px; font-weight: 300; line-height: 1;
              display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.canto { display: flex; align-items: center; gap: 8px; }

/* o caminho do pedido: bolinha verde (feito), azul (agora), vazia (depois) */
.linha-tempo { padding: 6px 16px 6px 46px; }
.linha-tempo .ponto { position: relative; padding: 9px 0; }
.linha-tempo .ponto::before { content: ""; position: absolute; left: -22px; top: 0; bottom: 0; width: 2px; background: var(--ios-risco); }
.linha-tempo .ponto:first-child::before { top: 50%; }
.linha-tempo .ponto:last-child::before { bottom: 50%; }
.linha-tempo i { position: absolute; left: -30px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px;
                 border-radius: 9px; background: var(--ios-cartao); border: 2px solid var(--ios-seta); }
.linha-tempo .feito i { background: var(--lad-verde); border-color: var(--lad-verde); }
.linha-tempo .agora i { background: var(--acento); border-color: var(--acento); box-shadow: 0 0 0 4px var(--acento-suave); }
.linha-tempo b { display: block; font-weight: 500; font-size: 15px; }
.linha-tempo small { color: var(--ios-apagado); font-size: 12.5px; }

/*
  🚨 SAFARI DO IPHONE (fora do ícone da tela de início): a barra de endereço
  flutua POR CIMA da página e cobria o trilho de abas — só apareciam os topos
  dos ícones (print do dono, 24/09). Quem marca `safari-iphone` é o `tela.js`.
  Aberto pelo ícone da tela de início, não há barra do Safari: fica o normal.
*/
@media (max-width: 899px) {
  /* 76px ficou alto demais no iPhone de verdade (o Safari já reserva parte do
     espaço pelo --seguro-base): 18px foi a medida do print do dono */
  .safari-iphone .abas { padding-bottom: calc(8px + var(--seguro-base) + 18px); }
}

/*
  🚨 NADA MAIS LARGO QUE A TELA. No iPhone do dono a página ficava ~20pt mais
  larga: o ＋ e "Ajustes" saíam cortados. Palavra longa sem espaço (número de
  processo, nome colado) num item de lista empurrava a lista — em coluna flex, o
  filho não encolhe abaixo do próprio conteúdo sem `min-width: 0`.
*/
.corpo > *, .bloco > *, .lista, .linha > * { min-width: 0; }
.linha .nome, .linha .desc, .aviso, .rodape { overflow-wrap: anywhere; }
html, body { overflow-x: clip; }
.linha > .pilula, .linha > .seta, .linha > .marca-certa { flex-shrink: 0; }
/* a situação de cada documento do dossiê da outra parte */
.situacao { font-size: 13px; white-space: nowrap; flex-shrink: 0; }
.situacao.v { color: var(--ok); } .situacao.a { color: var(--espera); } .situacao.x { color: var(--nao); }