/* LIXEIRA DE PROJETOS: idade e peso — item 88.
*
* Decorre do item 49, "guarda sempre; só avisa": nenhum prazo deste app apaga nada, e uma
* politica assim so e honesta se o app MOSTRAR o que esta guardando. Senao o disco enche
* em silencio e o assinante descobre no dia em que nao consegue importar.
*
* `lixo-velho` marca acima de 90 dias. AMBAR, nao vermelho, e o motivo e a decisao dele:
* nada vai ser apagado, entao vermelho prometeria uma consequencia que nao existe. Ambar
* e "olha isso quando puder", que e exatamente o que o aviso e. */
.pj-datas .d2.lixo-velho { color: var(--warn, #ba7517); font-weight: 600; }
.lixo-idade { color: inherit; opacity: .85; }
/* O peso fica sob a contagem de fotos, na mesma coluna: as duas respondem "o tamanho
* disto", e separa-las em duas colunas faria a linha da lixeira ficar diferente da linha
* de Projetos, que e a mesma tabela. */
.pj-peso { display: block; margin-top: 1px; font-size: 11px; font-weight: 600;
color: var(--ink-3); font-variant-numeric: tabular-nums; }
/* AVISO DO BACKUP SEM SENHA — item 85.
*
* Ocupa a linha inteira da barra de ações, abaixo dos dois botões: é informação sobre o
* arquivo que vai sair, então precisa ser lida ANTES do clique.
*
* Neutro, como o aviso de desfoque e pelo mesmo motivo: o backup não levar senha é o app
* fazendo o certo. O que é digno de alerta é o contrário, e o contrário deixou de existir. */
/* `margin-top: 8px`: a barra de acoes tem `gap: 8px`, entao 8 fecha os 16px do padrao.
* Medido no DOM — com 4px a folga saia 12. O aviso de desfoque usa 4px porque a barra DELE
* tem gap 12; o numero nao e o mesmo nos dois lugares, e por isso vale medir cada um. */
.aviso-backup { flex-basis: 100%; margin-top: 8px; padding: 9px 12px;
border-radius: 9px; background: var(--surface-2);
border: 1px solid var(--border);
font-size: 12px; line-height: 1.45; color: var(--ink-2); }
.aviso-backup b { color: var(--ink); }
/* AVISO DE DESFOQUE no botão de baixar — item 84.
*
* Ocupa a largura inteira da barra de seleção (`flex-basis: 100%`), abaixo dos botões:
* é informação sobre o que vai sair, então tem de ser lida ANTES do clique, e não competir
* por espaço com o botão.
*
* **Não é um aviso de erro, e por isso não é âmbar nem vermelho.** O desfoque funcionando é
* o app fazendo o certo — pintar de vermelho ensinaria a pessoa a temer o recurso que a
* protege. Fundo neutro, e o número em negrito, que é a única parte que se lê rápido. */
/* e nao 2px: a barra tem , entao 4 fecha os 16px do padrao.
* Medido no DOM: com 2px a folga saia 14. */
.aviso-desfoque { flex-basis: 100%; margin-top: 4px; padding: 9px 12px;
border-radius: 9px; background: var(--surface-2);
border: 1px solid var(--border);
font-size: 12px; line-height: 1.45; color: var(--ink-2); }
.aviso-desfoque b { color: var(--ink); font-variant-numeric: tabular-nums; }
/* LIXEIRA DE FOTOS — item 81, aprovado pelo print `docs/propostas/81-lixeira-de-fotos.png`.
*
* A anatomia é a da lixeira de PROJETOS de propósito: banner navy com o peso à direita,
* uma linha por exclusão, ação primária em laranja no rodapé. Ele já conhece aquela tela,
* e um conceito só se aprende uma vez.
*
* Antes de 19/08/2026 isto era uma sala de espera de 15 minutos que apagava sozinha — e um
* dos gatilhos dela ficava no `GET /imagens`, ou seja **abrir esta tela apagava fotografia**.
* Hoje nada sai daqui sem alguém clicar. */
.foto-lixeira { border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
background: var(--surface); }
.foto-lixeira > header { display: flex; align-items: center; gap: 12px;
padding: 14px 16px; background: var(--navy); color: #fff; }
.foto-lixeira > header .fl-ico { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 34px;
background: rgba(255,255,255,.10); display: grid;
place-items: center; }
.foto-lixeira > header .fl-ico svg { width: 18px; height: 18px; }
/* `var(--brand)`, nao "Montserrat, ..." escrito a mao: a variavel da casa ja traz o
* fallback certo. A primeira versao usava `var(--fonte)`, que NAO EXISTE nesta folha —
* e variavel inexistente invalida a declaracao INTEIRA, entao o Montserrat caia junto e
* o titulo saia em system-ui. Medido no DOM, nao lido no codigo. */
.foto-lixeira > header h3 { font-family: var(--brand); font-size: 15px;
font-weight: 600; margin: 0; line-height: 1.2; }
.foto-lixeira > header p { font-size: 12px; margin: 2px 0 0; color: #aeb8c9; line-height: 1.3; }
.foto-lixeira > header .fl-peso { margin-left: auto; text-align: right; }
.foto-lixeira > header .fl-peso b { display: block; font-family: var(--brand);
font-size: 17px; font-weight: 700;
font-variant-numeric: tabular-nums; }
.foto-lixeira > header .fl-peso span { font-size: 11px; color: #aeb8c9; }
.fl-lin { display: flex; align-items: center; gap: 12px; padding: 12px 16px;
border-top: 1px solid var(--border); }
.fl-lin .fl-qt { font-size: 13px; font-weight: 600; color: var(--ink); }
.fl-lin .fl-qd { font-size: 12px; color: var(--ink-3); }
/* Coluna de número com largura FIXA e alinhada à direita. Só `margin-left:auto` fazia o x
* de cada tamanho depender da largura do próprio texto — medi 2,0px de desvio entre
* "6,12 GB" e "21,3 MB" no primeiro print. Número em coluna alinha pela direita. */
.fl-lin .fl-tam { margin-left: auto; min-width: 86px; text-align: right;
font-family: var(--brand); font-size: 13px; font-weight: 600;
color: var(--ink); font-variant-numeric: tabular-nums; }
.fl-lin .fl-acoes { display: flex; gap: 8px; flex: 0 0 auto; }
.fl-lin .fl-acoes button { height: 38px; }
.fl-pe { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
padding: 12px 16px; border-top: 1px solid var(--border);
background: var(--surface-2); }
.fl-pe .fl-nota { font-size: 12px; color: var(--ink-3); line-height: 1.4; max-width: 60ch; }
.fl-pe .fl-dir { margin-left: auto; }
#mensagem:not(:empty) { margin-bottom: var(--s4); }
/* A barra de mensagem PERSISTENTE — item 110. Ela existia e estava sem uso: só era limpa,
* nunca preenchida. Serve para recusa que pede providencia, que o toast de 3 segundos nao
* comporta. Vermelho de erro, com o titulo em negrito e o X para fechar. */
#mensagem .aviso.erro { display: flex; align-items: flex-start; gap: 10px;
padding: 12px 14px; border-radius: 10px; }
#mensagem .aviso.erro b { flex: none; }
#mensagem .aviso.erro span { flex: 1; }
#mensagem .x-faixa { flex: none; width: 26px; height: 26px; padding: 0; border: 0;
background: rgba(0,0,0,.06); border-radius: 7px; font-size: 17px;
line-height: 1; color: inherit; cursor: pointer; }
/* cabeçalho da inspeção aberta — resumo antes do detalhe */
section.bloco { background: var(--surface); border: 1px solid var(--border);
border-radius: 12px; padding: var(--s5); margin-bottom: var(--s4);
box-shadow: var(--sh-1); }
/* Título de seção com um traço laranja à esquerda: dá hierarquia e quebra o
branco sem pesar. */
section.bloco > h2 {
font-family: var(--brand); font-weight: 700; font-size: 12px;
letter-spacing: .08em; text-transform: uppercase; color: var(--navy-2);
margin: 0 0 var(--s4); display: flex; align-items: center; gap: var(--s2);
padding-left: 11px; position: relative;
}
section.bloco > h2::before {
content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
width: 3px; height: 13px; border-radius: 2px; background: var(--orange);
}
/* O ` ` do titulo NASCE DESLIGADO. Ele existe para a coluna estreita da Ajuda, onde
"Travou? Fale com a gente" nao cabe numa linha; na largura inteira o titulo e um so.
Um markup, dois comportamentos — duplicar o bloco criaria duas versoes para
divergirem, que e a armadilha que este repositorio registra em cinco lugares. */
section.bloco > h2 br { display: none; }
/* Subtítulos dentro do mesmo bloco (Visão geral usa vários) recebem um
filete acima, para separar os grupos sem inventar outro cartão. */
section.bloco > h2 ~ h2 { margin-top: var(--s5); padding-top: var(--s4);
border-top: 1px solid var(--hair); }
section.bloco > h2 ~ h2::before { top: calc(50% + 8px); }
section.bloco.risco { border-color: var(--bad-bd); background: var(--bad-bg2); }
section.bloco.risco > h2 { color: var(--bad); }
/* Complementos do título de bloco. `.mini` já empurrava UM botão para a
direita; quando são dois ou mais, eles vão dentro de `.h2-acoes` para
manterem o espaçamento entre si. `.h2-nota` é o contador ao lado do título
— ele desliga o caixa-alta e o espaçamento de letra do h2, senão "3 alunos
ativos · 1 vencida" vira um letreiro tão forte quanto o próprio título. */
section.bloco > h2 .h2-acoes { margin-left: auto; display: flex; gap: var(--s2);
flex: none; align-self: center; }
section.bloco > h2 .h2-nota { font-family: var(--ui); font-weight: 600; font-size: 11.5px;
letter-spacing: 0; text-transform: none; color: var(--ink-3); }
/* ---------------------------------------------------------- formulário */
.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: var(--s4) var(--s5); }
.campo-full { grid-column: 1 / -1; }
label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .04em;
text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
/* Campo em cinza-claro, não branco: dentro de um bloco branco, campo branco
não tem contorno — a tela ficava um "brancão" sem profundidade. O campo
recuado lê como sulco; ao focar ele acende em branco com anel laranja,
e a diferença diz onde você está digitando. */
input, select, textarea {
width: 100%; font: inherit; font-size: 14px; color: var(--ink);
background: var(--surface-2); border: 1px solid var(--border);
border-radius: 9px; padding: 9px 12px;
transition: background var(--t), border-color var(--t), box-shadow var(--t);
box-shadow: inset 0 1px 2px rgba(19,31,51,.04);
}
/* O telefone com DDI (02/10/2026): o país à esquerda, do tamanho do nome dele, e o
número com o resto. Sem o min-width o número empurraria a linha para fora. */
.tel-ddi { display: flex; gap: 6px; position: relative; }
.tel-ddi input { flex: 1; min-width: 0; }
/* O país é um botão com a bandeira e o código, e a lista abre embaixo dele. O tamanho
da bandeira cita o botão para vencer o tamanho genérico de svg dentro de botão. */
.tel-ddi-btn { flex: none; padding: 0 10px; font-weight: 500; font-size: 14px;
background: var(--surface-2); }
.tel-ddi-btn[aria-expanded="true"] { border-color: var(--orange); }
.tel-ddi-btn .tel-bandeira, .tel-ddi-lista .tel-bandeira { width: 20px; height: 14px; flex: none;
border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.18); display: block; }
.tel-ddi-btn .tel-ddi-seta { width: 10px; height: 10px; opacity: .7; }
.tel-ddi-lista { position: absolute; top: calc(100% + 4px); left: 0; z-index: 60;
min-width: 230px; max-height: 264px; overflow-y: auto; margin: 0; padding: 6px;
list-style: none; background: var(--surface); border: 1px solid var(--border);
border-radius: 12px; box-shadow: 0 10px 28px rgba(19,31,51,.18); }
.tel-ddi-lista li { display: flex; align-items: center; gap: 10px; padding: 7px 10px;
border-radius: 8px; font-size: 13px; cursor: pointer; white-space: nowrap; }
.tel-ddi-lista li:hover, .tel-ddi-lista li:focus { background: #eef3f9; outline: none; }
.tel-ddi-lista li[aria-selected="true"] { background: #fff4ec; color: var(--orange-dk); }
.tel-ddi-lista li small { margin-left: auto; padding-left: 12px; color: var(--ink-2);
font-size: 12px; }
input:hover, select:hover, textarea:hover { border-color: var(--border-hover); background: var(--surface-3); }
input:focus, select:focus, textarea:focus {
outline: none; border-color: var(--orange); background: var(--surface);
box-shadow: var(--anel-foco);
}
/* Caixa e rádio não são campo de texto: sem este reset eles herdam o padding
de 9×12px, a borda e o fundo da regra acima e viram bolas enormes. */
input[type="checkbox"], input[type="radio"] {
width: auto; height: auto; padding: 0; border: 0; background: none;
box-shadow: none; border-radius: 0; }
input::placeholder, textarea::placeholder { color: #a8b2c1; }
input:disabled, select:disabled, textarea:disabled {
background: var(--inerte-bg); color: var(--ink-3); box-shadow: none; cursor: not-allowed; }
textarea { resize: vertical; min-height: 64px; line-height: 1.5; }
/* O navegador dá ao