/*
 * ============================================================================================
 * css/reccamar.css — Visual único do app Rec-Camar
 * ============================================================================================
 *
 * O QUE É:
 *   Todas as cores, fontes, tamanhos e espaçamentos do app. Nenhuma tela tem estilo próprio:
 *   as views só usam os NOMES DAS CLASSES definidos aqui. Mudar uma cor ou um tamanho é mexer
 *   neste arquivo — o app inteiro acompanha.
 *
 * MAPA DAS SEÇÕES:
 *   1. Cores (tokens) — claro e escuro (o celular escolhe sozinho)
 *   2. Base           — página, fonte, área segura do iPhone
 *   3. Estrutura      — .tela, .espaco
 *   4. Marca          — ícone, nome e subtítulo do app (tela de ativação)
 *   5. Formulário     — .cartao, .campo…, .dica
 *   6. Botões         — .botao (e o estado desabilitado enquanto espera o servidor)
 *   7. Mensagens      — .aviso (informação), .aviso-erro (problema), .aviso-ok (sucesso)
 *   --- tela 2 (acrescentado na classe 15, 25/09/2026) ---
 *   8. Cabeçalho      — faixa roxa com o botão ☰, título, aparelho e sinal
 *   9. Barra de abas  — rodapé fixo: Pátio · Pendentes · Hoje · Sair (aba ativa = aria-current)
 *  10. Menu ☰         — gaveta pela esquerda sobre o fundo escurecido
 *  11. Pátio          — cartões dos caminhões, "Já saíram da balança", plano B
 *  12. Em construção  — abas que ainda dependem das fotos
 *  13. Sair e bloqueio — folha de confirmação e tela bloqueada (classe 19)
 *   --- fotos, etapa E1 (acrescentado na classe 9 da E1, 25/09/2026) ---
 *  14. Fotos          — telas 3 (conferir), 4 (placa e itens), 5 (a foto), 6 (fotos do item) e o selo do Pátio
 *   --- envio, etapa E2 (acrescentado na classe A5 da E2, 25/09/2026) ---
 *  15. Envio          — tela 7 (enviando / sem sinal), aba Pendentes (P, Pb) e a tela 4 com tudo enviado (4c)
 *   --- finalizar, etapa E3 (acrescentado na classe A17 da E3, 25/09/2026) ---
 *  16. Finalizar      — tela 8 (orientação), telas 9/10 (folha de aviso/bloqueio) e aba Hoje (H, Hb)
 *
 * PADRÕES DE USO NO PÁTIO (pesquisa de 24/09, plano §1.6):
 *   alvos de toque ≥ 48 px (luva) · texto ≥ 15–16 px (sol) · campos com letra ≥ 16 px
 *   (o iPhone não dá zoom ao tocar) · contraste alto · ações principais no rodapé.
 *
 * QUEM USA:
 *   index.html (carrega) · view/*.js (usam as classes)
 *
 * PLANO: SGQ-4.01/Planos - Claude Code/PLANO_APP_FOTOS_FCOM001.md — §4.4 (telas) e §4.6 (estrutura)
 * ============================================================================================
 */


/* ---------------------------------------------------------------------------------------------
 * 1. CORES (tokens) — [25/09/2026] Gerado: Claude | Aprovado: Osvaldo
 *    Cada cor tem um nome; o resto do arquivo usa só os nomes (var(--nome)).
 * ------------------------------------------------------------------------------------------- */
:root {
    color-scheme: light;
    --fundo: #F4F2EE;          /* fundo da página */
    --cartao: #FFFFFF;         /* cartões e campos */
    --tinta: #1C1B22;          /* texto principal */
    --suave: #5A5866;          /* texto secundário (dicas, notas) */
    --linha: #DDD9D2;          /* bordas de cartões */
    --borda-campo: #B9B4AB;    /* borda dos campos de digitação */
    --roxo: #624EA5;           /* cor do SGQ — botões, ícone, destaques */
    --roxo-texto: #FFFFFF;     /* texto sobre o roxo */
    --foco: #8C77D6;           /* contorno do campo/botão selecionado */
    --desabilitado: #B7B2BE;   /* botão esperando o servidor */
    --aviso-fundo: #EEEAF8;    /* mensagem de informação (lilás) */
    --aviso-borda: #C9BEEA;
    --aviso-tinta: #2F2552;
    --erro-fundo: #FFF4E5;     /* mensagem de problema (laranja) — mesmas cores dos avisos do mockup */
    --erro-borda: #F0C88F;
    --erro-tinta: #5C3204;
    --ok-fundo: #E3F2EA;       /* mensagem de sucesso (verde) */
    --ok-borda: #A8D5BD;
    --ok-tinta: #14502F;
    /* [25/09/2026] tela 2 (classe 15) — valores do mockup v6.2 */
    --cabecalho-suave: #E6E0F5; /* subtítulo e "sinal" sobre a faixa roxa */
    --aba-inativa: #4A4754;     /* abas não selecionadas */
    --aba-ativa: #624EA5;       /* aba selecionada e bordas/setas dos cartões */
    --aba-ativa-fundo: #EEEAF8; /* "pílula" atrás do ícone da aba ativa */
    /* [30/09/2026] §4.9.30 — barra de abas, opção C (lilás + pílula roxa; Osvaldo escolheu no mockup). SÓ a barra usa
       estas cores — as --aba-* acima continuam iguais porque outras telas também as usam. */
    --barra-fundo: #D9D0F2;         /* fundo da barra (antes: branco, var(--cartao)) */
    --barra-borda: #C6BAEA;         /* linha de cima (antes: var(--linha)) */
    --barra-pilula: #624EA5;        /* pílula da aba ativa (antes: #EEEAF8) */
    --barra-icone-ativo: #FFFFFF;   /* ícone branco sobre a pílula roxa */
    --barra-texto-ativo: #3F2F7A;   /* nome da aba ativa */
    --barra-texto-inativo: #3E3950; /* nome e ícone das outras abas */
    --contador: #B35F0A;        /* número no ícone de Pendentes */
    --contador-texto: #FFFFFF;
    --veu: rgba(20, 19, 24, 0.55); /* fundo escurecido com o menu aberto */
    /* [25/09/2026] fotos, E1 classe 9 — valores do mockup v7 */
    --verde: #1F7A4D;           /* item/placa completo ✔ */
    --verde-fundo: #E3F2EA;
    --laranja-borda: #D98A2B;   /* item/placa pendente */
    --laranja-tinta: #8A4A06;   /* "0 de 3 · faltam 3" */
    --azul-tinta: #1F5FA8;      /* [29/09/2026] §4.9.29 — "Caminhão da Camar" */
    --peso-espera: #B35F0A;     /* [30/09/2026] §4.9.31 — "aguardando 2ª pesagem na balança" (mockup aprovado) */
    /* [30/09/2026] PLANO_APP_NOTIFICACOES — sino e ícones dos tipos (mockup_notificacoes aprovado) */
    --sino-bolinha: #D93025;    --sino-bolinha-texto: #FFFFFF;   --sino-bolinha-borda: #FFFFFF;
    --notif-ponto: #624EA5;
    --notif-peso-fundo: #EEEAF8;    --notif-peso: #624EA5;
    --notif-recusa-fundo: #FBE6E4;  --notif-recusa: #B3261E;
    --notif-outro-fundo: #E3F2EA;   --notif-outro: #1F7A4D;
    --notif-chegou-fundo: #E3EEF9;  --notif-chegou: #1F5FA8;
    --notif-saiu-fundo: #FDF0DD;    --notif-saiu: #B35F0A;
    --notif-baixa-fundo: #ECE8E1;   --notif-baixa: #6B6675;
    --trilha: #E2DED6;         /* fundo da barra de progresso */
    --tracejado: #8C8680;       /* botões "Adicionar item" / "Tirar mais uma" */
    --divisoria: #ECE8E1;       /* linhas entre os dados da tela 3 */
    --foto-fundo: #141318;      /* tela 5 (a foto) — escura nos dois temas */
    --foto-painel: #2A2833;
    --foto-borda: #5B5768;
    --foto-texto: #BDB8C8;
    --foto-usar: #7B66C4;
    /* [25/09/2026] tela 6 (classe 10): confirmar antes de apagar — mockup 6c */
    --perigo: #B3261E;
    --perigo-tinta: #8C1D18;
    /* [25/09/2026] E3 A17: fundo do ícone de bloqueio da tela 10 (a cor já estava no mockup desde a v4) */
    --perigo-fundo: #FBE6E4;
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --fundo: #16141B;
        --cartao: #211E28;
        --tinta: #F1EEF6;
        --suave: #B5AFC2;
        --linha: #37323F;
        --borda-campo: #5A5466;
        --roxo: #6E59B8;
        --foco: #A594E6;
        --desabilitado: #4A4553;
        --aviso-fundo: #2A2438;
        --aviso-borda: #4A3F66;
        --aviso-tinta: #E3DCF5;
        --erro-fundo: #3A2A14;
        --erro-borda: #7A5520;
        --erro-tinta: #F6DDB6;
        --ok-fundo: #173326;
        --ok-borda: #2E6B4B;
        --ok-tinta: #C9EBD7;
        /* [25/09/2026] tela 2 (classe 15) */
        --cabecalho-suave: #DCD4F2;
        --aba-inativa: #B5AFC2;
        --aba-ativa: #C3B6F0;       /* no escuro o roxo do SGQ some; este lilás mantém o contraste */
        --aba-ativa-fundo: #362D52;
        /* [30/09/2026] §4.9.30 — no ESCURO a barra fica EXATAMENTE como antes (Osvaldo: "não toque em mais nada,
           somente isso"): os mesmos valores que ela já usava (--cartao, --linha, --aba-* do escuro) */
        --barra-fundo: #211E28;
        --barra-borda: #37323F;
        --barra-pilula: #362D52;
        --barra-icone-ativo: #C3B6F0;
        --barra-texto-ativo: #C3B6F0;
        --barra-texto-inativo: #B5AFC2;
        --peso-espera: #F2B872;     /* [30/09/2026] §4.9.31 — o mesmo laranja claro do --laranja-tinta do escuro */
        /* [30/09/2026] PLANO_APP_NOTIFICACOES — escuro: fundos escuros e ícones claros (a bolinha continua vermelha) */
        --sino-bolinha-borda: #211E28;
        --notif-ponto: #C3B6F0;
        --notif-peso-fundo: #362D52;    --notif-peso: #C3B6F0;
        --notif-recusa-fundo: #3A1A18;  --notif-recusa: #F2A39C;
        --notif-outro-fundo: #173326;   --notif-outro: #8FD3AE;
        --notif-chegou-fundo: #1B2C44;  --notif-chegou: #7FB2F0;
        --notif-saiu-fundo: #3A2A14;    --notif-saiu: #F2B872;
        --notif-baixa-fundo: #2C2833;   --notif-baixa: #B5AFC2;
        --contador: #D07A1E;
        --contador-texto: #1C1B22;
        --veu: rgba(0, 0, 0, 0.65);
        /* [25/09/2026] fotos, E1 classe 9 */
        --verde: #6FD19E;
        --verde-fundo: #173326;
        --laranja-borda: #C07A26;
        --laranja-tinta: #F2B872;
        --azul-tinta: #7FB2F0;      /* [29/09/2026] §4.9.29 — "Caminhão da Camar" no escuro */
        --trilha: #37323F;
        --tracejado: #7A7486;
        --divisoria: #2F2A37;
        --foto-fundo: #0E0D11;
        --foto-painel: #1E1C25;
        --foto-borda: #4A4655;
        --foto-texto: #BDB8C8;
        --foto-usar: #7B66C4;
        /* [25/09/2026] tela 6 (classe 10) */
        --perigo: #D2463C;
        --perigo-tinta: #F2A39D;
        /* [25/09/2026] E3 A17 */
        --perigo-fundo: #3A1A18;
    }
}


/* ---------------------------------------------------------------------------------------------
 * 2. BASE — [25/09/2026] Gerado: Claude | Aprovado: Osvaldo
 *    Página inteira; respeita o entalhe e a barra de baixo do iPhone (área segura).
 * ------------------------------------------------------------------------------------------- */
html,
body {
    height: 100%;
    margin: 0;
}

body {
    box-sizing: border-box;
    background: var(--fundo);
    color: var(--tinta);
    font-family: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

[hidden] {
    display: none !important;
}


/* ---------------------------------------------------------------------------------------------
 * 3. ESTRUTURA — [25/09/2026] Gerado: Claude | Aprovado: Osvaldo
 * ------------------------------------------------------------------------------------------- */
.tela {                        /* coluna de uma tela inteira */
    box-sizing: border-box;
    min-height: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding-inline: 24px;
    padding-block: 32px 24px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.espaco {                      /* ocupa o espaço que sobrar e empurra o rodapé para baixo */
    flex-grow: 1;
}

.rodape {                      /* bloco do rodapé: mensagem + botão + nota */
    display: flex;
    flex-direction: column;
    gap: 12px;
}


/* ---------------------------------------------------------------------------------------------
 * 4. MARCA — [25/09/2026] Gerado: Claude | Aprovado: Osvaldo
 *    Ícone + nome + subtítulo no topo da tela de ativação.
 * ------------------------------------------------------------------------------------------- */
.marca {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding-top: 16px;
    text-align: center;
}

.marca-icone {
    width: 88px;
    height: 88px;
    border-radius: 22px;
    background: var(--roxo);
    display: flex;
    align-items: center;
    justify-content: center;
}

.marca-nome {
    margin: 0;
    font-family: "Barlow Condensed", "Barlow", system-ui, sans-serif;
    font-size: 36px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.marca-subtitulo {
    margin: 0;
    font-size: 15px;
    color: var(--suave);
}


/* ---------------------------------------------------------------------------------------------
 * 5. FORMULÁRIO — [25/09/2026] Gerado: Claude | Aprovado: Osvaldo
 * ------------------------------------------------------------------------------------------- */
.cartao {
    background: var(--cartao);
    border: 1px solid var(--linha);
    border-radius: 16px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.cartao-titulo {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
}

.campo {                       /* rótulo + entrada + dica, empilhados */
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.campo-rotulo {
    font-size: 15px;
    font-weight: 600;
}

.campo-entrada {
    box-sizing: border-box;
    width: 100%;
    height: 52px;
    border: 1.5px solid var(--borda-campo);
    border-radius: 10px;
    padding: 0 14px;
    font-family: inherit;
    font-size: 18px;           /* ≥ 16 px: o iPhone não dá zoom ao tocar no campo */
    color: var(--tinta);
    background: var(--cartao);
}

.campo-entrada:focus-visible {
    outline: 3px solid var(--foco);
    outline-offset: 1px;
    border-color: var(--roxo);
}

.campo-codigo {                /* o código de ativação: maior, números alinhados */
    font-size: 22px;
    letter-spacing: 3px;
    font-variant-numeric: tabular-nums;
}

.dica {
    font-size: 16px;
    color: var(--suave);
}


/* ---------------------------------------------------------------------------------------------
 * 6. BOTÕES — [25/09/2026] Gerado: Claude | Aprovado: Osvaldo
 * ------------------------------------------------------------------------------------------- */
.botao {
    height: 60px;
    border: none;
    border-radius: 14px;
    background: var(--roxo);
    color: var(--roxo-texto);
    font-family: inherit;
    font-size: 19px;
    font-weight: 700;
    cursor: pointer;
}

.botao:focus-visible {
    outline: 3px solid var(--foco);
    outline-offset: 2px;
}

.botao:active {
    filter: brightness(0.92);
}

.botao:disabled {              /* enquanto espera o servidor ("Ativando…"): evita toque duplo */
    background: var(--desabilitado);
    cursor: default;
    filter: none;
}

.nota {
    margin: 0;
    font-size: 15px;
    color: var(--suave);
    text-align: center;
    line-height: 1.4;
}


/* ---------------------------------------------------------------------------------------------
 * 7. MENSAGENS — [25/09/2026] Gerado: Claude | Aprovado: Osvaldo
 *    .aviso sozinho = informação · .aviso.aviso-erro = problema · .aviso.aviso-ok = sucesso
 * ------------------------------------------------------------------------------------------- */
.aviso {
    margin: 0;
    background: var(--aviso-fundo);
    border: 1px solid var(--aviso-borda);
    color: var(--aviso-tinta);
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 16px;
    line-height: 1.4;
}

.aviso-erro {
    background: var(--erro-fundo);
    border-color: var(--erro-borda);
    color: var(--erro-tinta);
}

.aviso-ok {
    background: var(--ok-fundo);
    border-color: var(--ok-borda);
    color: var(--ok-tinta);
}


/* =============================================================================================
 * TELA 2 — acrescentado na classe 15 (25/09/2026). Seções 1 a 7 acima não foram alteradas.
 * Medidas copiadas do mockup v6.2 (reccamar_app/mockup/mockup_reccamar.html, telas 2, 2b, 3).
 * ============================================================================================= */


/* ---------------------------------------------------------------------------------------------
 * 8. CABEÇALHO — [25/09/2026] Gerado: Claude | Aprovado: Osvaldo
 *    Faixa roxa no topo das abas: botão ☰ · título + aparelho · sinal.
 * ------------------------------------------------------------------------------------------- */
.cabecalho {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--roxo);
    color: var(--roxo-texto);
    padding: 14px 16px 14px 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.cabecalho-menu {              /* botão ☰ — 48 px, alvo de toque com luva */
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: var(--roxo-texto);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.cabecalho-menu:focus-visible {
    outline: 3px solid var(--roxo-texto);
    outline-offset: -3px;
}

.cabecalho-textos {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.cabecalho-titulo {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
}

.cabecalho-subtitulo {         /* "Rec-Camar · EXPEDIÇÃO-01" */
    font-size: 15px;
    color: var(--cabecalho-suave);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cabecalho-sinal {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    color: var(--cabecalho-suave);
}


/* ---------------------------------------------------------------------------------------------
 * 9. BARRA DE ABAS — [25/09/2026] Gerado: Claude | Aprovado: Osvaldo — plano §4.7
 *    Apple HIG / Material 3: 3 a 5 destinos, ícone + nome, sempre visíveis, aba ativa destacada.
 *    Presa no rodapé; respeita a barra de baixo do iPhone (área segura).
 * ------------------------------------------------------------------------------------------- */
.abas {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    /* ANTES [30/09/2026]: background: var(--cartao);  border-top: 1px solid var(--linha); */
    background: var(--barra-fundo);             /* §4.9.30 opção C */
    border-top: 1px solid var(--barra-borda);
    padding: 6px 8px calc(8px + env(safe-area-inset-bottom, 0px)) 8px;
    display: grid;
    /* ANTES [01/10/2026, até o 0.37.0]: grid-template-columns: repeat(4, minmax(0, 1fr));  (4 abas) */
    grid-template-columns: repeat(5, minmax(0, 1fr));   /* 0.37.0: + ⚙ Ajustes */
    gap: 4px;
}

.aba {
    height: 60px;
    border: none;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    /* ANTES [30/09/2026]: color: var(--aba-inativa); */
    color: var(--barra-texto-inativo);          /* §4.9.30 */
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.aba:focus-visible {
    outline: 3px solid var(--foco);
    outline-offset: -2px;
    border-radius: 12px;
}

.aba[aria-current="page"] {    /* aba ativa: roxa e com a "pílula" atrás do ícone */
    /* ANTES [30/09/2026]: color: var(--aba-ativa); */
    color: var(--barra-texto-ativo);            /* §4.9.30 */
    font-weight: 700;
}

.aba-icone {
    position: relative;
    /* ANTES [01/10/2026, até o 0.37.0]: width: 64px;  — com 5 abas, em celular de 320 px a coluna tem ~58 px */
    width: min(64px, 100%);
    height: 32px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aba[aria-current="page"] .aba-icone {
    /* ANTES [30/09/2026]: background: var(--aba-ativa-fundo);   (ícone na cor do texto da aba) */
    background: var(--barra-pilula);            /* §4.9.30 opção C: pílula roxa com o ícone branco */
    color: var(--barra-icone-ativo);
}

.aba-contador {                /* número no ícone (fotos pendentes) */
    position: absolute;
    top: -2px;
    left: 36px;
    box-sizing: border-box;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: var(--contador);
    color: var(--contador-texto);
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ---------------------------------------------------------------------------------------------
 * 10. MENU ☰ — [25/09/2026] Gerado: Claude | Aprovado: Osvaldo — plano §4.7
 *     Gaveta pela esquerda sobre o fundo escurecido (tocar no véu fecha).
 * ------------------------------------------------------------------------------------------- */
.menu-veu {
    position: fixed;
    inset: 0;
    z-index: 20;
    background: var(--veu);
}

.menu {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 21;
    width: 304px;
    max-width: 85vw;
    background: var(--cartao);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25);
}

.menu-topo {
    background: var(--roxo);
    color: var(--roxo-texto);
    padding: calc(20px + env(safe-area-inset-top, 0px)) 12px 20px 20px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.menu-topo-icone {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 14px;
    background: #FFFFFF;
    color: #624EA5;             /* fixo: o ícone do app é sempre roxo sobre branco */
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-topo-textos {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 2px;
}

.menu-topo-nome {
    font-family: "Barlow Condensed", "Barlow", system-ui, sans-serif;
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
}

.menu-topo-aparelho {
    font-size: 15px;
    color: var(--cabecalho-suave);
}

.menu-fechar {                 /* ✕ — 44 px */
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: var(--roxo-texto);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.menu-lista {
    padding: 10px 0;
    display: flex;
    flex-direction: column;
}

.menu-item {
    min-height: 60px;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 20px;
    text-align: left;
    color: var(--tinta);
    font-family: inherit;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
}

.menu-item svg {
    flex-shrink: 0;
    color: var(--aba-ativa);
}

.menu-item:focus-visible {
    outline: 3px solid var(--foco);
    outline-offset: -3px;
}

.menu-item-detalhe {           /* 2ª linha do item: "EXPEDIÇÃO-01 · ativado em 25/09" */
    display: block;
    font-size: 15px;
    font-weight: 400;
    color: var(--suave);
}

/* [01/10/2026] 0.33.1 — logo novo da Camar no menu ☰ (mockup_menu_logo aprovado). No escuro vai sobre uma placa branca
   (o "plásticos" azul-escuro some no fundo preto). Arquivo: icones/logo_camar.png (recorte do "Camar novo logo01"). */
.menu-logo {
    display: flex;
    justify-content: center;
    padding: 18px 20px 8px;
}

.menu-logo img {
    width: 190px;
    height: auto;
    display: block;
}

@media (prefers-color-scheme: dark) {
    .menu-logo img {
        width: 170px;
        padding: 8px 12px;
        box-sizing: content-box;
        background: #FFFFFF;
        border-radius: 12px;
    }
}

/* [01/10/2026] 0.33.3 — embaixo do logo: "✓ Empresa certificada ISO 9001:2015" + "Certificação TÜV NORD" (mockup_menu_iso B).
   ANTES (0.33.1) o .menu-logo era só a linha do logo (display:flex centralizado); agora empilha logo + 2 linhas. */
.menu-logo {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding-bottom: 14px;
}

.menu-iso {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--suave);
    text-align: center;
}

.menu-iso b {
    color: var(--tinta);
    font-weight: 700;
}

.menu-iso svg {
    color: var(--ok-tinta);
    flex-shrink: 0;
}

.menu-iso-cert {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    font-size: 13px;
    color: var(--suave);
}

.menu-iso-tuv {                  /* "TÜV NORD" no estilo da marca (aproximado — a fonte oficial não é pública) */
    font-family: "Arial Black", "Arial", sans-serif;
    font-weight: 900;
    font-size: 14px;
    letter-spacing: .3px;
    color: #0B4EA2;
}

@media (prefers-color-scheme: dark) {
    .menu-iso-tuv {
        color: #7FB0F0;
    }
}

.menu-divisor {
    height: 1px;
    background: var(--linha);
    margin: 6px 20px;
}

.menu-versao {
    margin-top: auto;
    padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px)) 20px;
    font-size: 14px;
    color: var(--suave);
}

/* [26/09/2026] "Autor: Osvaldo Vidoy" — mesma fonte e tamanho da versão, na linha de cima. O autor fica com o
   margin-top: auto (empurra os dois para o pé do menu); a versão encosta logo abaixo dele. */
.menu-autor {
    padding-bottom: 0;
}

.menu-autor + .menu-versao {
    margin-top: 0;
    padding-top: 4px;
}

/* [01/10/2026] 0.33.4 — "Atualizado em 01/10/2026 às 08:48" logo abaixo da versão (mockup_menu_rodape). A versão deixa de
   ser a última linha: perde o padding de baixo, e a linha nova encosta nela (mesma fonte, tamanho e cor). */
.menu-versao-num {
    padding-bottom: 0;
}

.menu-versao-num + .menu-atualizado {
    margin-top: 0;
    padding-top: 4px;
}


/* ---------------------------------------------------------------------------------------------
 * 11. PÁTIO — [25/09/2026] Gerado: Claude | Aprovado: Osvaldo
 *     Cartões dos caminhões (toque = escolher), "Já saíram da balança", link do plano B.
 * ------------------------------------------------------------------------------------------- */
.tela-aba {                    /* conteúdo de uma aba: reserva o espaço da barra de abas embaixo */
    box-sizing: border-box;
    max-width: 480px;
    margin: 0 auto;
    padding: 16px 20px calc(110px + env(safe-area-inset-bottom, 0px)) 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.avisos-aba {                  /* [25/09/2026] classe 16: avisos da casca (Index.js) acima da aba */
    box-sizing: border-box;
    max-width: 480px;
    margin: 0 auto;
    padding: 16px 20px 0 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tela-aba-instrucao {
    margin: 0;
    font-size: 16px;
    color: var(--suave);
}

.cartao-caminhao {             /* um caminhão: o cartão inteiro é o botão */
    width: 100%;
    border: 2px solid var(--aba-ativa);
    border-radius: 16px;
    background: var(--cartao);
    padding: 14px 14px 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    color: var(--tinta);
    font-family: inherit;
    cursor: pointer;
}

.cartao-caminhao:focus-visible {
    outline: 3px solid var(--foco);
    outline-offset: 2px;
}

.cartao-caminhao:active {
    filter: brightness(0.96);
}

.cartao-caminhao > svg {
    flex-shrink: 0;
    color: var(--aba-ativa);
}

.caminhao-textos {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.caminhao-placa {              /* a placa em letra grande: o Célio acha o caminhão de longe */
    font-family: "Barlow Condensed", "Barlow", system-ui, sans-serif;
    font-size: 40px;
    font-weight: 700;
    letter-spacing: 2px;
    line-height: 1;
}

.caminhao-nome {
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.caminhao-detalhe {            /* "chegou 28/09 - 17:32 · 22,47 t · cert. 13714" */
    font-size: 16px;
    color: var(--suave);
}

/* [28/09/2026] "Saiu 28/09 - 08:41" no cartão — só nos caminhões que já saíram (laranja, como o selo "Já saiu") */
.caminhao-saida {
    font-size: 16px;
    font-weight: 700;
    color: var(--laranja-tinta);
}

.linha-sairam {                /* "Já saíram da balança hoje (3)" */
    width: 100%;
    height: 52px;
    border: 1px solid var(--linha);
    border-radius: 14px;
    background: var(--cartao);
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--tinta);
    font-family: inherit;
    font-size: 17px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.linha-sairam > span {
    flex-grow: 1;
}

.linha-sairam > svg {          /* [25/09/2026] ajuste do Osvaldo (classe 18): a seta gira ao abrir */
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.linha-sairam[aria-expanded="true"] > svg {
    transform: rotate(90deg);
}

.cartao-caminhao.caminhao-saiu {  /* [25/09/2026] ajuste do Osvaldo (classe 18): caminhão que já saiu */
    border-color: var(--borda-campo);
}

.cartao-caminhao.caminhao-saiu > svg {
    color: var(--suave);
}

.caminhao-saiu .caminhao-placa {
    font-size: 32px;
}

.link-plano-b {                /* "Não achou o caminhão? Digitar o nº do certificado" */
    min-height: 48px;
    border: none;
    background: transparent;
    color: var(--aba-ativa);
    font-family: inherit;
    font-size: 17px;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

.tela-aba-rodape {             /* "Só caminhões de entrada… · atualizado às 17:40" */
    margin: 0;
    font-size: 15px;
    color: var(--suave);
    text-align: center;
    line-height: 1.35;
}


/* ---------------------------------------------------------------------------------------------
 * 12. EM CONSTRUÇÃO — [25/09/2026] Gerado: Claude | Aprovado: Osvaldo — decisão D-T2-3
 *     Abas Pendentes e Hoje enquanto as fotos não existem.
 * ------------------------------------------------------------------------------------------- */
.em-construcao {
    margin-top: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
    color: var(--suave);
    font-size: 17px;
    line-height: 1.4;
}

.em-construcao svg {
    color: var(--aba-inativa);
}


/* ---------------------------------------------------------------------------------------------
 * 13. SAIR E BLOQUEIO — [25/09/2026] Gerado: Claude | Aprovado: Osvaldo — classe 19 (opção A)
 *     Folha de confirmação que sobe de baixo (mockup 2c) e tela bloqueada roxa (mockup 2d).
 * ------------------------------------------------------------------------------------------- */
.folha-veu {
    position: fixed;
    inset: 0;
    z-index: 30;
    background: var(--veu);
}

.folha {                       /* confirmação: sobe de baixo, sobre a aba */
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 31;
    box-sizing: border-box;
    max-width: 480px;
    margin: 0 auto;
    background: var(--cartao);
    border-radius: 22px 22px 0 0;
    padding: 26px 22px calc(24px + env(safe-area-inset-bottom, 0px)) 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.25);
}

.folha-cabeca {
    display: flex;
    align-items: center;
    gap: 12px;
}

.folha-icone {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 24px;
    background: var(--aba-ativa-fundo);
    color: var(--aba-ativa);
    display: flex;
    align-items: center;
    justify-content: center;
}

.folha-titulo {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
}

.folha-texto {
    margin: 0;
    font-size: 17px;
    line-height: 1.45;
}

.botao-texto {                 /* ação secundária sem fundo ("Cancelar") */
    height: 48px;
    border: none;
    background: transparent;
    color: var(--aba-inativa);
    font-family: inherit;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
}

.botao-texto:focus-visible {
    outline: 3px solid var(--foco);
    outline-offset: 2px;
    border-radius: 12px;
}

.tela-bloqueada {              /* ocupa a tela toda, inclusive entalhe e barra do iPhone */
    position: fixed;
    inset: 0;
    z-index: 40;
    box-sizing: border-box;
    background: #624EA5;       /* fixo: a marca do app, igual no claro e no escuro */
    color: #FFFFFF;
    padding: calc(96px + env(safe-area-inset-top, 0px)) 28px calc(32px + env(safe-area-inset-bottom, 0px)) 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-align: center;
    overflow-y: auto;
}

.bloqueio-icone {
    width: 104px;
    height: 104px;
    flex-shrink: 0;
    border-radius: 26px;
    background: #FFFFFF;
    color: #624EA5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bloqueio-nome {
    margin: 0;
    font-family: "Barlow Condensed", "Barlow", system-ui, sans-serif;
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
}

.bloqueio-aparelho {
    margin: 0;
    font-size: 17px;
    color: #E6E0F5;
}

.botao-claro {                 /* "Entrar": branco sobre o roxo */
    width: 100%;
    max-width: 420px;
    height: 64px;
    flex-shrink: 0;
    border: none;
    border-radius: 16px;
    background: #FFFFFF;
    color: #624EA5;
    font-family: inherit;
    font-size: 21px;
    font-weight: 700;
    cursor: pointer;
}

.botao-claro:focus-visible {
    outline: 3px solid #FFFFFF;
    outline-offset: 3px;
}

.bloqueio-rodape {
    margin: 0;
    font-size: 15px;
    color: #E6E0F5;
}


/* =============================================================================================
 * FOTOS — etapa E1, acrescentado na classe 9 (25/09/2026). Seções 1 a 13 acima não foram alteradas.
 * Medidas copiadas do mockup v7 (telas 2e, 3, 3b, 4, 4a, 5, 6, 6b).
 * ============================================================================================= */


/* ---------------------------------------------------------------------------------------------
 * 14. FOTOS — [25/09/2026] Gerado: Claude | Aprovado: Osvaldo
 * ------------------------------------------------------------------------------------------- */

/* [25/09/2026] E1 classe 11: camada onde a casca (Index.js) empilha as telas 3, 4 e 6 POR CIMA do Pátio
   (acima do cabeçalho e da barra de abas; abaixo da tela 5, que é fixa e mais alta) */
.camada-trabalho {
    position: fixed;
    inset: 0;
    z-index: 15;
    overflow-y: auto;
    background: var(--fundo);
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-sizing: border-box;
}

/* --- telas de trabalho: tela inteira sem barra de abas, cabeçalho com Voltar --- */
.tela-trabalho {               /* coluna da tela 3, 4 ou 6 (sem barra de abas embaixo) */
    box-sizing: border-box;
    /* ANTES [25/09/2026]: min-height: 100%;  — o #app não tem altura, então os botões não iam para o pé.
       AGORA: altura da tela do celular (dvh desconta a barra do navegador; vh é a reserva). */
    min-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    min-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    background: var(--fundo);
}

.tela-trabalho-corpo {
    box-sizing: border-box;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 16px 20px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-grow: 1;
}

.cabecalho-voltar {            /* ‹ Voltar — 48 px, no lugar do ☰ */
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: var(--roxo-texto);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.cabecalho-voltar:focus-visible {
    outline: 3px solid var(--roxo-texto);
    outline-offset: -3px;
}

/* --- selos laranja: "Já saiu da balança" (3b) e "7 fotos · faltam 3" (2e) --- */
.selo-saiu {
    margin: 0;
    background: var(--erro-fundo);
    border: 1px solid var(--erro-borda);
    color: var(--erro-tinta);
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 16px;
    line-height: 1.35;
}

.selo-saiu svg {
    flex-shrink: 0;
    color: var(--laranja-tinta);
}

.selo-fotos {                  /* dentro do cartão do Pátio */
    margin-top: 4px;
    align-self: flex-start;
    background: var(--erro-fundo);
    border: 1px solid var(--erro-borda);
    border-radius: 10px;
    padding: 5px 10px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 15px;
    font-weight: 700;
    color: var(--erro-tinta);
}

.selo-fotos svg {
    color: var(--laranja-tinta);
}

/* [28/09/2026] opção C: marca "✓ Finalizada" no cartão do pátio (inspeção já finalizada neste celular) — verde */
.selo-finalizada {
    margin-top: 4px;
    align-self: flex-start;
    background: var(--ok-fundo);
    border: 1px solid var(--ok-borda);
    border-radius: 10px;
    padding: 5px 10px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 15px;
    font-weight: 700;
    color: var(--ok-tinta);
}

.selo-finalizada svg {
    color: var(--verde);
}

/* --- tela 3: conferir caminhão --- */
.cartao-conferir {
    background: var(--cartao);
    border: 1px solid var(--linha);
    border-radius: 16px;
    overflow: hidden;
}

.conferir-placa {
    padding: 20px;
    border-bottom: 1px solid var(--divisoria);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.conferir-rotulo {
    font-size: 16px;
    font-weight: 600;
    color: var(--suave);
}

.placa-grande {                /* a placa com "moldura" de placa de carro */
    font-family: "Barlow Condensed", "Barlow", system-ui, sans-serif;
    font-size: 64px;
    font-weight: 700;
    letter-spacing: 3px;
    line-height: 1;
    border: 3px solid var(--tinta);
    border-radius: 10px;
    padding: 6px 16px;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    text-align: center;
}

.conferir-dados {
    padding: 6px 20px 10px 20px;
    display: flex;
    flex-direction: column;
}

.linha-dado {                  /* "Nome ........ [NOME]" */
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--divisoria);
}

.linha-dado:last-child {
    border-bottom: none;
}

.linha-dado-rotulo {
    font-size: 15px;
    color: var(--suave);
    flex-shrink: 0;
}

.linha-dado-valor {
    font-size: 17px;
    font-weight: 600;
    text-align: right;
    min-width: 0;
    overflow-wrap: anywhere;
}

.linha-dado-destaque {         /* peso e hora da chegada */
    font-size: 21px;
    font-weight: 700;
}

/* [28/09/2026] valor da linha "Saiu" na tela Conferir — laranja, como o selo "Já saiu da balança" */
.linha-dado-saida {
    color: var(--laranja-tinta);
}

.botao-secundario {            /* "Não é este — voltar" (contorno roxo) */
    height: 56px;
    border: 1.5px solid var(--aba-ativa);
    border-radius: 14px;
    background: var(--cartao);
    color: var(--aba-ativa);
    font-family: inherit;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
}

.botao-secundario:focus-visible {
    outline: 3px solid var(--foco);
    outline-offset: 2px;
}

/* --- tela 4: placa e itens --- */
.progresso-texto {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 17px;
    font-weight: 700;
}

.progresso-faltam {
    font-size: 15px;
    font-weight: 600;
    color: var(--laranja-tinta);
}

.progresso {                   /* barra de progresso "7 de 10" */
    height: 10px;
    border-radius: 5px;
    background: var(--trilha);
    overflow: hidden;
}

.progresso-barra {
    height: 10px;
    background: var(--roxo);
    width: 0;
    transition: width 0.2s ease;
}

.lista-fotos {                 /* [25/09/2026] tela 4 (classe 10): a coluna da placa e dos itens */
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.linha-foto-toque:disabled {   /* linha sem foto: o nome não abre a tela 6 */
    cursor: default;
}

.linha-foto {                  /* placa ou item: contador · nome · câmera */
    background: var(--cartao);
    border: 1px solid var(--linha);
    border-radius: 14px;
    padding: 12px 12px 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.linha-foto-pendente {         /* ainda faltam fotos */
    border: 2px solid var(--laranja-borda);
    padding: 11px 11px 11px 15px;
}

.linha-foto-toque {            /* nome + situação: tocar abre a tela 6 */
    flex-grow: 1;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    text-align: left;
    color: var(--tinta);
    font-family: inherit;
    cursor: pointer;
    min-height: 48px;
    justify-content: center;
}

.linha-foto-nome {
    font-size: 18px;
    font-weight: 700;
}

.linha-foto-situacao {
    font-size: 16px;
    font-weight: 600;
    color: var(--laranja-tinta);
}

.linha-foto-completa .linha-foto-situacao {
    color: var(--verde);
}

/* [30/09/2026] §4.9.31 (mockup_peso_liquido aprovado): peso líquido do item da balança, abaixo da situação */
.linha-foto-peso {
    display: block;
    font-size: 13px;
    font-weight: 700;
    margin-top: 2px;
}

.linha-foto-peso[hidden] {     /* o display:block acima anularia o atributo hidden */
    display: none;
}

.linha-foto-peso.ok {          /* "líquido 8,120 t" */
    color: var(--aba-ativa);
}

.linha-foto-peso.espera {      /* "aguardando 2ª pesagem na balança" */
    color: var(--peso-espera);
}

.contador-circulo {            /* ✔ verde ou o número de fotos em laranja */
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 20px;
    background: var(--erro-fundo);
    color: var(--laranja-tinta);
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.linha-foto-completa .contador-circulo {
    background: var(--verde-fundo);
    color: var(--verde);
}

.botao-camera {                /* câmera de 52 px */
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border: 1.5px solid var(--borda-campo);
    border-radius: 12px;
    background: var(--cartao);
    color: var(--tinta);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.botao-camera-proxima {        /* o próximo a fotografar: roxo */
    border: none;
    background: var(--roxo);
    color: var(--roxo-texto);
}

.botao-camera:focus-visible,
.botao-adicionar:focus-visible,
.botao-mais-uma:focus-visible,
.botao-lixeira:focus-visible,
.linha-foto-toque:focus-visible {
    outline: 3px solid var(--foco);
    outline-offset: 2px;
}

.botao-adicionar {             /* "+ Adicionar item 2" (tracejado) */
    height: 52px;
    border: 1.5px dashed var(--tracejado);
    border-radius: 14px;
    background: transparent;
    color: var(--tinta);
    font-family: inherit;
    font-size: 17px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
}

.nota-esquerda {               /* textos de ajuda alinhados à esquerda */
    margin: 0;
    font-size: 15px;
    color: var(--suave);
    line-height: 1.4;
}

.rodape-fixo {                 /* ENVIAR + FINALIZAR no pé da tela 4 */
    position: sticky;
    bottom: 0;
    background: var(--cartao);
    border-top: 1px solid var(--linha);
    padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px)) 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rodape-fixo .botao {
    letter-spacing: 0.5px;
}

/* --- tela 5: a foto (fundo escuro nos dois temas) --- */
.tela-foto {
    position: fixed;
    inset: 0;
    z-index: 50;
    box-sizing: border-box;
    background: var(--foto-fundo);
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.tela-foto-topo {
    padding: 12px 12px 12px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.tela-foto-titulo {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 22px;
    font-weight: 700;
}

.tela-foto-subtitulo {
    font-size: 16px;
    font-weight: 400;
    color: var(--foto-texto);
}

.tela-foto-fechar {
    width: 48px;
    height: 48px;
    border: none;
    background: transparent;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.previa-foto {                 /* a foto ocupa o espaço que sobrar, sem distorcer */
    flex-grow: 1;
    min-height: 0;
    margin: 8px 16px;
    border-radius: 14px;
    background: var(--foto-painel);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.previa-foto img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.tela-foto-nota {
    padding: 10px 20px 0 20px;
    font-size: 15px;
    color: var(--foto-texto);
    text-align: center;
}

.botoes-foto {                 /* Repetir · Girar 90° · Usar foto */
    padding: 16px 20px 24px 20px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.botao-foto {
    height: 76px;
    border: 1.5px solid var(--foto-borda);
    border-radius: 14px;
    background: transparent;
    color: #FFFFFF;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
}

.botao-foto-usar {
    border: none;
    background: var(--foto-usar);
    font-size: 16px;
    font-weight: 700;
}

.botao-foto:disabled {
    opacity: 0.5;
    cursor: default;
}

.botao-foto:focus-visible,
.tela-foto-fechar:focus-visible {
    outline: 3px solid #FFFFFF;
    outline-offset: 2px;
}

/* --- tela 6: fotos do item --- */
.grade-fotos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.celula-foto {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.miniatura {
    height: 190px;
    border-radius: 12px;
    background: var(--trilha);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.miniatura img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.celula-foto-rodape {
    display: flex;
    align-items: center;
    gap: 6px;
}

.situacao-foto {               /* "Guardada no celular" / "Enviada" / "Aguardando envio" */
    flex-grow: 1;
    font-size: 15px;
    font-weight: 700;
    color: var(--aviso-tinta);
}

.situacao-foto-enviada {
    color: var(--verde);
}

/* --- tela 6 na E2 (A9, mockup 6): "✓ Enviada" com ícone · "Aguardando envio" laranja + borda laranja --- */
.situacao-foto-enviada,
.situacao-foto-aguardando {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
}

.situacao-foto-aguardando {
    color: var(--laranja-tinta);
}

.miniatura-aguardando {         /* foto ainda no celular (a vermelha do "apagar" vale por cima) */
    border: 2px solid var(--laranja-borda);
    box-sizing: border-box;
}

.botao-lixeira {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border: 1.5px solid var(--borda-campo);
    border-radius: 10px;
    background: var(--cartao);
    color: var(--tinta);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.botao-mais-uma {              /* "Tirar mais uma" (tracejado, do tamanho de uma miniatura) */
    height: 190px;
    border: 1.5px dashed var(--tracejado);
    border-radius: 12px;
    background: transparent;
    color: var(--tinta);
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
}

/* --- tela 6: confirmar antes de apagar (mockup 6c — aprovado pelo Osvaldo na classe 10) --- */
.miniatura-apagar {            /* a foto que vai ser apagada fica com borda vermelha */
    border: 3px solid var(--perigo);
    box-sizing: border-box;
}

.confirmar-apagar {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.confirmar-texto {
    font-size: 15px;
    font-weight: 700;
    color: var(--perigo-tinta);
}

.confirmar-botoes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.botao-apagar,
.botao-cancelar {
    height: 48px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 15px;
    cursor: pointer;
}

.botao-apagar {
    border: none;
    background: var(--perigo);
    color: #FFFFFF;
    font-weight: 700;
}

.botao-cancelar {
    border: 1.5px solid var(--borda-campo);
    background: var(--cartao);
    color: var(--tinta);
    font-weight: 600;
}

.botao-apagar:focus-visible,
.botao-cancelar:focus-visible {
    outline: 3px solid var(--foco);
    outline-offset: 2px;
}

.entrada-camera {              /* o <input type="file" capture> fica escondido; os botões o acionam */
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}


/* =============================================================================================
 * ENVIO — etapa E2, acrescentado na classe A5 (25/09/2026). Seções 1 a 14 acima não foram alteradas.
 * Medidas copiadas do mockup v7.2 (telas 7, P, Pb, 4c). Sem cor nova: só os tokens já existentes.
 * ============================================================================================= */


/* ---------------------------------------------------------------------------------------------
 * 15. ENVIO — [25/09/2026] Gerado: Claude | Aprovado: Osvaldo
 * ------------------------------------------------------------------------------------------- */

/* --- tela 7: enviando / sem sinal (tela inteira, por cima da tela 4; sem ‹ enquanto envia) --- */
.tela-envio {
    position: fixed;
    inset: 0;
    z-index: 45;
    box-sizing: border-box;
    background: var(--fundo);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.envio-cabecalho {
    background: var(--roxo);
    color: var(--roxo-texto);
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.envio-titulo {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
}

.envio-corpo {
    box-sizing: border-box;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    flex-grow: 1;
}

.envio-contador {              /* "5 de 7" grande + "enviadas" */
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.envio-numero {
    font-family: "Barlow Condensed", "Barlow", system-ui, sans-serif;
    font-size: 44px;
    font-weight: 700;
    line-height: 1;
}

.envio-rotulo {
    font-size: 15px;
    color: var(--suave);
}

.envio-barra {                 /* a barra de progresso da tela 7 (12 px) */
    height: 12px;
    border-radius: 6px;
    background: var(--trilha);
    overflow: hidden;
}

.envio-barra > div {
    height: 12px;
    width: 0;
    background: var(--roxo);
    transition: width 0.2s ease;
}

.envio-lista {                 /* Placa / Item N com a situação de cada um */
    background: var(--cartao);
    border: 1px solid var(--linha);
    border-radius: 14px;
    padding: 4px 16px;
}

.envio-linha {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--divisoria);
}

.envio-linha:last-child {
    border-bottom: none;
}

.envio-linha-nome {
    font-size: 17px;
    font-weight: 600;
}

.envio-linha-situacao {        /* "3 de 3 ✓" (verde) · "1 de 3 · parou" (laranja) · "enviando…" */
    font-size: 15px;
    font-weight: 700;
    color: var(--suave);
}

.envio-linha-ok .envio-linha-situacao {
    color: var(--verde);
}

.envio-linha-parou .envio-linha-situacao {
    color: var(--laranja-tinta);
}

.envio-aviso {                 /* caixa laranja "Sem sinal …" */
    margin: 0;
    background: var(--erro-fundo);
    border: 1px solid var(--erro-borda);
    color: var(--erro-tinta);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.envio-aviso svg {
    flex-shrink: 0;
    color: var(--laranja-tinta);
}

.envio-aviso-titulo {
    font-size: 17px;
    font-weight: 700;
}

.envio-aviso-texto {
    font-size: 15px;
    line-height: 1.35;
}

/* --- aba Pendentes (P, Pb) --- */
.cartao-pendente {             /* um caminhão com foto aguardando envio (o cartão inteiro é o botão) */
    width: 100%;
    border: 2px solid var(--laranja-borda);
    border-radius: 16px;
    background: var(--cartao);
    padding: 14px 14px 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    color: var(--tinta);
    font-family: inherit;
    cursor: pointer;
}

.cartao-pendente:focus-visible {
    outline: 3px solid var(--foco);
    outline-offset: 2px;
}

.cartao-pendente > svg {
    flex-shrink: 0;
    color: var(--aba-ativa);
}

.pendente-placa {
    font-family: "Barlow Condensed", "Barlow", system-ui, sans-serif;
    font-size: 36px;
    font-weight: 700;
    letter-spacing: 2px;
    line-height: 1;
}

.pendente-cert {
    font-size: 16px;
    color: var(--suave);
}

.pendente-fotos {              /* "3 fotos aguardando envio" */
    font-size: 16px;
    font-weight: 700;
    color: var(--laranja-tinta);
}

.pendentes-vazio {             /* ✔ verde grande + "Nenhuma foto aguardando envio." */
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.pendentes-vazio-icone {
    width: 72px;
    height: 72px;
    border-radius: 36px;
    background: var(--verde-fundo);
    color: var(--verde);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pendentes-vazio-titulo {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
}

/* [25/09/2026] A6: o botão de contorno DESLIGADO fica cinza (mockup 4/4c: FINALIZAR desligado). Antes da A6 o
   .botao-secundario desligado continuava roxo e parecia ativo (visto na captura da tela 4). */
.botao-secundario:disabled {
    border-color: var(--borda-campo);
    background: var(--trilha);
    color: var(--suave);
    cursor: default;
}

/* [25/09/2026] A8 — aba Pendentes: ENVIAR TUDO fixo no pé, logo ACIMA da barra de abas (mockup P). A barra tem
   6 + 60 + 8 px + a área segura do iPhone; a lista reserva o espaço do rodapé para nada ficar escondido. */
.rodape-aba {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(74px + env(safe-area-inset-bottom, 0px));
    z-index: 9;
    box-sizing: border-box;
    max-width: 480px;
    margin: 0 auto;
    padding: 10px 20px 8px 20px;
    background: var(--fundo);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tela-aba-com-rodape {
    padding-bottom: calc(210px + env(safe-area-inset-bottom, 0px));
}

/* --- tela 4 na E2: tudo enviado (4c) --- */
.progresso-ok {                /* "todas enviadas ✓" no lugar do "faltam N" */
    font-size: 15px;
    font-weight: 600;
    color: var(--verde);
}


/* =============================================================================================
 * FINALIZAR — etapa E3 (acrescentado na classe A17 da E3, 25/09/2026). Seções 1–15 acima NÃO mudaram (só o
 * token --perigo-fundo na seção 1).
 * ============================================================================================= */

/* ---------------------------------------------------------------------------------------------
 * 16. FINALIZAR — [25/09/2026] Gerado: Claude | Aprovado: Osvaldo — mockup v8 (8, 8b, 9, 10, H, Hb)
 *   Reaproveita: tela 8 = classes da tela 7 (.tela-envio, .envio-*) · telas 9/10 = folha do Sair (.folha…) ·
 *   aviso verde da 2f = .aviso-ok · FINALIZAR ligado (4d) = .botao-secundario · Hoje vazio = forma do .pendentes-vazio.
 * --------------------------------------------------------------------------------------------- */

/* --- tela 8: orientação lilás "Terminou a descarga?…" --- */
.finalizar-orientacao {
    margin: 0;
    background: var(--aviso-fundo);
    border: 1px solid var(--aviso-borda);
    color: var(--aviso-tinta);
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 16px;
    line-height: 1.4;
}

/* --- telas 9 e 10: ícone da folha (laranja ⚠ / vermelho ⊘) --- */
.folha-icone-alerta {
    background: var(--erro-fundo);
    color: var(--laranja-tinta);
}

.folha-icone-perigo {
    background: var(--perigo-fundo);
    color: var(--perigo);
}

.folha-item-incompleto {       /* "Item 3 · 1 de 3 fotos" (tela 9) */
    margin: 0;
    background: var(--erro-fundo);
    border: 1px solid var(--erro-borda);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 700;
}

.folha-item-incompleto span:last-child {
    font-size: 17px;
    color: var(--laranja-tinta);
}

.botao-alerta {                /* "Finalizar mesmo assim" (tela 9): contorno e letra laranja */
    height: 56px;
    border: 2px solid var(--laranja-borda);
    border-radius: 14px;
    background: var(--cartao);
    color: var(--laranja-tinta);
    font-family: inherit;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
}

.botao-alerta:focus-visible {
    outline: 3px solid var(--foco);
    outline-offset: 2px;
}

/* --- aba Hoje (H, Hb) --- */
.hoje-resumo {                 /* "3 inspeções hoje · 2 completas · 1 incompleta" */
    margin: 0;
    font-size: 16px;
    color: var(--suave);
}

.hoje-resumo-completas {
    font-weight: 700;
    color: var(--verde);
}

.hoje-resumo-incompletas {
    font-weight: 700;
    color: var(--laranja-tinta);
}

.cartao-hoje {                 /* só leitura: sem seta e sem toque (D-E3-6) */
    border: 1px solid var(--linha);
    border-radius: 16px;
    background: var(--cartao);
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cartao-hoje-incompleta {
    border: 2px solid var(--laranja-borda);
}

.cartao-hoje-topo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cartao-hoje-placa {
    flex-grow: 1;
    font-family: "Barlow Condensed", "Barlow", system-ui, sans-serif;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 2px;
    line-height: 1;
}

.cartao-hoje-detalhe {         /* "cert. 13714 · finalizada 10:25" */
    font-size: 16px;
    color: var(--suave);
}

.cartao-hoje-faltou {          /* "Item 3: 1 de 3" */
    font-size: 16px;
    font-weight: 700;
    color: var(--laranja-tinta);
}

.selo-situacao {
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 14px;
    font-weight: 700;
}

.selo-situacao-completa {
    background: var(--verde-fundo);
    color: var(--verde);
}

.selo-situacao-incompleta {
    background: var(--erro-fundo);
    color: var(--laranja-tinta);
}

.vazio-neutro {                /* Hoje vazio: o círculo do ✔ em cinza (a forma é a do .pendentes-vazio-icone) */
    background: var(--trilha);
    color: var(--suave);
}

/* [25/09/2026] Acrescentado na A19 (visto na captura da tela 10): ícone DENTRO do .botao ("📷 Fotografar a placa")
   alinhado ao texto e com espaço. Antes da A19 nenhum .botao tinha ícone (conferido por busca nas views). */
.botao > svg {
    vertical-align: -5px;
    margin-right: 10px;
}


/* ---------------------------------------------------------------------------------------------
 * 17. AJUDA / COMO INSTALAR — [26/09/2026] Gerado: Claude | Aprovado: Osvaldo — H7 (plano §4.9.12, mockup v10)
 *     Tela 11 (view/Operacao_AJUDA.js) e as faixas da Ativação 1b/1c (view/Cadastro_APARELHO.js).
 *     Sem cor nova: usa os tokens de aviso/erro/ok/roxo (claro e escuro já cobertos). Exceção: o azul dos
 *     botões do Safari (#007AFF), que é a cor que a EXPEDIÇÃO vê no iPhone.
 * ------------------------------------------------------------------------------------------- */
.ajuda-situacao,
.ajuda-nota {                  /* ícone na frente + texto */
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 16px;
}

.ajuda-nota {
    font-size: 15px;
}

.ajuda-icone-frente {
    flex-shrink: 0;
    display: flex;
}

.ajuda-titulo {
    margin: 6px 0 0 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--tinta);
}

.ajuda-abas {                  /* iPhone | Android */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    border-radius: 12px;
    background: var(--trilha);
}

.ajuda-aba {
    height: 48px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--aba-inativa);
    font-family: inherit;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
}

.ajuda-aba[aria-selected="true"] {
    background: var(--roxo);
    color: var(--roxo-texto);
}

.ajuda-aba:focus-visible {
    outline: 3px solid var(--foco);
    outline-offset: 2px;
}

.ajuda-passos {                /* 1 2 3 … em círculos roxos */
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: passo;
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.ajuda-passos li {
    counter-increment: passo;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 16px;
    line-height: 1.4;
    color: var(--tinta);
}

.ajuda-passos li::before {
    content: counter(passo);
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 15px;
    background: var(--roxo);
    color: var(--roxo-texto);
    font-weight: 700;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ajuda-icone-botao {           /* o botão do celular desenhado no meio do texto */
    display: inline-flex;
    vertical-align: middle;
    border: 1.5px solid var(--borda-campo);
    border-radius: 7px;
    padding: 1px 3px;
    background: var(--cartao);
    color: var(--tinta);
}

.ajuda-icone-compartilhar,
.ajuda-icone-mais_opcoes {
    color: #007AFF;
}

.ajuda-icone-app {             /* o ícone roxo do Rec-Camar, pequeno */
    display: inline-flex;
    vertical-align: middle;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--roxo);
    color: #FFFFFF;
    align-items: center;
    justify-content: center;
}

.ajuda-cuidados {
    margin: 0;
    padding: 12px 14px 12px 32px;
    background: var(--cartao);
    border: 1px solid var(--linha);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 15px;
    line-height: 1.4;
    color: var(--tinta);
}

/* --- Ativação: 1b (iPhone pelo Safari — bloqueio) e 1c (Android pelo navegador — aviso) --- */
.ativacao-instalar {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ativacao-instalar-caixa {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ativacao-instalar-titulo,
.ativacao-instalar-texto {
    margin: 0;
    line-height: 1.4;
}

.ativacao-instalar-titulo {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 18px;
    font-weight: 700;
}

.ativacao-instalar-titulo[hidden] {
    display: none;
}

.ativacao-instalar-texto {
    font-size: 16px;
}

.ativacao-instalar-bloqueio .ativacao-instalar-caixa {
    background: var(--erro-fundo);
    border: 1px solid var(--erro-borda);
    color: var(--erro-tinta);
    border-radius: 14px;
    padding: 16px;
}

.ativacao-instalar-aviso {
    background: var(--aviso-fundo);
    border: 1px solid var(--aviso-borda);
    color: var(--aviso-tinta);
    border-radius: 14px;
    padding: 14px 16px;
    gap: 10px;
}

.ativacao-instalar-botao {     /* "Ver como instalar" dentro da faixa lilás (1c) */
    align-self: flex-start;
    height: 44px;
    padding: 0 16px;
    font-size: 16px;
}

.cartao-bloqueado {            /* 1b: o formulário aparece apagado (não dá para ativar pelo Safari) */
    opacity: 0.45;
}


/* ---------------------------------------------------------------------------------------------
 * 18. PLACA DIFERENTE DA PORTARIA — [26/09/2026] Gerado: Claude | Aprovado: Osvaldo — A17 (plano §4.9.13.2, mockup v11)
 *     Folhas 4f/4g (view/Modal_AVISOPLACA.js): as 2 placas lado a lado. O resto usa a folha da tela 9/10 (.folha…).
 * ------------------------------------------------------------------------------------------- */
.placa-comparar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.placa-caixa {
    border: 1px solid var(--linha);
    border-radius: 12px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.placa-caixa-rotulo {
    font-size: 14px;
    color: var(--suave);
}

.placa-caixa-valor {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--tinta);
}

/* -------------------------------------------------------------------------------------------
 * 19. FOTO DO ITEM RECUSADA — [26/09/2026] Gerado: Claude | Aprovado: Osvaldo — A20 (plano §4.9.14 item 11, mockup v12)
 *     Folha 4i (view/Modal_AVISOSUCATA.js): a linha "Fotos aceitas do item N · X de 3". O resto usa a folha da tela 9/10.
 * ------------------------------------------------------------------------------------------- */
.sucata-aceitas {
    border: 1px solid var(--linha);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.sucata-aceitas-rotulo {
    font-size: 16px;
    color: var(--suave);
}

.sucata-aceitas-valor {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--tinta);
}

/* -------------------------------------------------------------------------------------------
 * 20. AMBIENTE DO CELULAR — [26/09/2026] Gerado: Claude | Aprovado: Osvaldo — A24 (plano §4.9.16, mockup v13 2g–2j)
 *     Etiqueta antes do nome na barra (#jl_subtitulo) e no menu ☰ (#jl_menu_aparelho). PRODUÇÃO verde · HOMOLOGAÇÃO
 *     laranja. A etiqueta nunca encolhe; o nome termina em "…" se não couber.
 * ------------------------------------------------------------------------------------------- */
.com-ambiente {                /* o subtítulo / a linha do menu quando há etiqueta */
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
}

.etiqueta-ambiente {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    border-radius: 8px;
    padding: 1px 7px;
}

.etiqueta-producao {
    background: #2E8B57;
    color: #FFFFFF;
}

.etiqueta-homologacao {
    background: #F0A020;
    color: #1C1B22;
}

.com-ambiente-nome {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* [26/09/2026] Alterado: Claude | Aprovado: Osvaldo — "na tela de menu, coloque o nome do celular na linha abaixo do
   ambiente": no menu ☰ a etiqueta fica numa linha e "nome · ativado" na de baixo. ANTES: lado a lado (como na barra).
   [26/09/2026 0.11.2] SEM USO: o ambiente saiu do menu ☰ ("remove do menu, quero só o nome") — mantido, não apagado.
   [26/09/2026 0.11.3] EM USO de novo: etiqueta na linha de cima e SÓ o nome embaixo (o Osvaldo explicou o pedido). */
.menu-topo-aparelho.com-ambiente {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

/* ---------------------------------------------------------------------------------------------
 * 21. APAGAR FOTO JÁ ENVIADA — [26/09/2026] Gerado: Claude | Aprovado: Osvaldo — A29 (plano §4.9.18, mockup v15 6d)
 *     Folha "Deseja apagar mesmo esta foto?" (view/Modal_APAGARFOTO.js): miniatura + origem + "✓ Enviada" e o botão
 *     vermelho "Sim, apagar". Seções 1–20 acima NÃO mudaram.
 * --------------------------------------------------------------------------------------------- */
.apagar-foto-resumo {
    display: flex;
    gap: 12px;
    align-items: center;
}

.apagar-foto-miniatura {
    width: 96px;
    height: 96px;
    border-radius: 10px;
    background: var(--borda-campo);
    overflow: hidden;
    flex-shrink: 0;
}

.apagar-foto-miniatura img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.apagar-foto-dados {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    font-size: 15px;
    line-height: 1.4;
    color: var(--tinta-suave, var(--tinta));
}

.apagar-foto-enviada {
    color: var(--verde);
}

.botao.botao-perigo {           /* "Sim, apagar" (vermelho, como o [Apagar] da 6c) */
    background: var(--perigo);
    color: #FFFFFF;
}

/* ---------------------------------------------------------------------------------------------
 * 22. ITEM SEM A FOTO DA PLACA — [26/09/2026] Gerado: Claude | Aprovado: Osvaldo — A31 (plano §4.9.19, mockup v16 4m/6f)
 *     Câmera do item, "+ Adicionar item" e "Tirar mais uma" CINZA mas tocáveis (o toque abre a folha 4l). Não usa o
 *     atributo disabled (botão disabled não recebe o toque). Seções 1–21 acima NÃO mudaram.
 * --------------------------------------------------------------------------------------------- */
.botao-bloqueado {
    border: 1.5px solid var(--desabilitado);
    background: transparent;
    color: var(--desabilitado);
}

.botao-adicionar.botao-bloqueado,
.botao-mais-uma.botao-bloqueado {
    border-style: dashed;
}

/* ---------------------------------------------------------------------------------------------
 * 23. FOTO DO ITEM LONGE DA PLACA — [26/09/2026] Gerado: Claude | Aprovado: Osvaldo — A35 (plano §4.9.20, mockup v17 4n)
 *     A 4n reusa a folha da 4i (seção 19); só a distância fica vermelha. Seções 1–22 acima NÃO mudaram.
 * --------------------------------------------------------------------------------------------- */
.local-distancia-valor {
    color: var(--perigo);
}

/* ---------------------------------------------------------------------------------------------
 * 24. FOTO EM TELA CHEIA — [26/09/2026] Gerado: Claude | Aprovado: Osvaldo — A43 (plano §4.9.22, mockup v18 6g/6h)
 *     Fundo preto sobre tudo; a foto INTEIRA (contain — nunca corta), em pé ou deitado; linha discreta no topo; o toque
 *     em qualquer lugar fecha (view/Modal_VERFOTO.js). Seções 1–23 acima NÃO mudaram.
 * --------------------------------------------------------------------------------------------- */
.miniatura-ampliavel {
    cursor: zoom-in;
}

.ver-foto {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.ver-foto-imagem {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.ver-foto-topo {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px 16px;
    background: rgba(0, 0, 0, 0.45);
    color: #FFFFFF;
    font-size: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.ver-foto-info {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ver-foto-enviada {
    color: #7FD3A6;
}

.ver-foto-aguardando {
    color: #F5B971;
}

.ver-foto-dica {
    color: #D8D2E6;
    flex-shrink: 0;
}

/* ============================================================================================
   25. PARIDADE entre celulares — [29/09/2026] A49 (plano §4.9.23, mockup_paridade P1–P4)
   Só aparece quando o servidor manda o estado da inspeção. NENHUMA cor nova: tokens --aviso-* (lilás, claro/escuro).
   ============================================================================================ */

.selo-outro {                   /* Pátio (P1): "Em inspeção · EXPEDICAO-01 · 4 fotos" — caminhão de OUTRO celular */
    margin-top: 4px;
    align-self: flex-start;
    background: var(--aviso-fundo);
    border: 1px solid var(--aviso-borda);
    border-radius: 10px;
    padding: 5px 10px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 15px;
    font-weight: 700;
    color: var(--aviso-tinta);
}

.selo-outro svg {
    flex-shrink: 0;
}

.aviso-outro {                  /* tela 3 (P2/P3): só leitura — "Em inspeção pela X…" / "Finalizada pela X às…" */
    margin: 0;
    background: var(--aviso-fundo);
    border: 1px solid var(--aviso-borda);
    border-radius: 12px;
    padding: 12px 14px;
    color: var(--aviso-tinta);
    font-size: 16px;
    line-height: 1.45;
}

.aviso-outro .numeros {         /* "No servidor: placa 1 · item 1: 3 fotos · última foto 10:31" */
    display: block;
    margin-top: 6px;
    font-size: 15px;
    color: var(--suave);
}

.cartao-hoje-aparelho {         /* aba Hoje (P4): "por EXPEDICAO-01" / "por OSVALDO-IPHONE (este celular)" */
    font-size: 14px;
    color: var(--suave);
}

/* ============================================================================================
   26. VER FOTOS do servidor — [29/09/2026] A57 (plano §4.9.24, mockup_verfotos V2–V4). Nenhuma cor nova.
   ============================================================================================ */

.linha-foto-seta {              /* V3: no lugar do botão da câmera — só indica que abre as miniaturas */
    margin-left: auto;
    color: var(--suave);
    display: flex;
    align-items: center;
    padding-right: 6px;
}

.situacao-foto-servidor {       /* V4: "10:30 · EXPEDICAO-01" embaixo da miniatura (sem lixeira) */
    color: var(--suave);
}

/* ============================================================================================
   27. VER FOTOS com as RECUSADAS — [29/09/2026] (plano §4.9.26, mockup_verfotos_recusadas R1–R3). Nenhuma cor nova:
       a miniatura e o texto da recusada usam as MESMAS classes do celular dono (miniatura-aguardando /
       situacao-foto-aguardando); só a contagem " · 2 recusadas" é nova.
   ============================================================================================ */

.recusadas-conta {              /* " · 2 recusadas" — tela 3 (numeros), V3 (total) */
    color: var(--laranja-tinta);
    font-weight: 700;
}

/* ============================================================================================
   28. "Caminhão da Camar" — [29/09/2026] (plano §4.9.29, mockup_caminhao_da_camar P1/C1/H1). Só no caminhão PRÓPRIO,
       logo abaixo da placa: Pátio (e "Saíram"), Conferir e aba Hoje. Terceiro: a linha nem existe/fica oculta.
   ============================================================================================ */

.caminhao-proprio {
    font-size: 16px;            /* = a 3ª linha do cartão (.caminhao-detalhe) */
    font-weight: 700;
    color: var(--azul-tinta);
}

/* ---------------------------------------------------------------------------------------------
 * [30/09/2026] Gerado: Claude | Aprovado: Osvaldo — PLANO_APP_NOTIFICACOES §5 (mockup_notificacoes aprovado)
 *   Sino no cabeçalho (à DIREITA do "sinal") + bolinha das não lidas · tela de notificações. Só classes NOVAS.
 * --------------------------------------------------------------------------------------------- */
/* ANTES [30/09/2026, 1ª versão]: width: 44px (sem margin-right) — a 360 px (Android) o título "Caminhões no pátio" passava
   a quebrar em 2 linhas (faltavam ~14 px). AGORA 36 px e avança 8 px sobre a margem direita do cabeçalho: o título volta a
   caber como antes (RISCO ZERO no cabeçalho de hoje); o toque continua com 44 px de altura. */
.cabecalho-sino {
    position: relative;
    flex-shrink: 0;
    width: 36px;
    margin-right: -8px;
    height: 44px;
    border: none;
    background: transparent;
    color: var(--roxo-texto);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    cursor: pointer;
}

.cabecalho-sino:focus-visible {
    outline: 3px solid var(--foco);
    outline-offset: 2px;
}

.sino-bolinha {                /* vermelha, número branco, contorno branco (decisão (i)) */
    position: absolute;
    top: 3px;
    right: 1px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    box-sizing: border-box;
    border-radius: 10px;
    background: var(--sino-bolinha);
    color: var(--sino-bolinha-texto);
    box-shadow: 0 0 0 2px var(--sino-bolinha-borda);
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

.sino-bolinha[hidden] {
    display: none;
}

.notif-acao {                  /* ✓✓ marcar todas como lidas */
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    color: var(--roxo-texto);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.notif-acao[hidden] {
    display: none;
}

.notif-grupo {                 /* HOJE ………… 30 de set. */
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 18px 2px 6px;
    border-bottom: 1px solid var(--linha);
    font-size: 15px;
    font-weight: 700;
    color: var(--suave);
    letter-spacing: .3px;
}

.notif-grupo span:last-child {
    font-weight: 600;
    letter-spacing: 0;
}

.notif {                       /* uma notificação (botão — toque abre o destino) */
    display: flex;
    gap: 12px;
    align-items: flex-start;
    width: 100%;
    padding: 12px 2px;
    border: none;
    border-bottom: 1px solid var(--linha);
    background: transparent;
    text-align: left;
    font-family: inherit;
    color: var(--tinta);
    cursor: pointer;
}

.notif-ponto {                 /* não lida */
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--notif-ponto);
    margin-top: 17px;
    flex-shrink: 0;
}

.notif.lida .notif-ponto {
    visibility: hidden;
}

.notif-icone {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notif-icone.peso   { background: var(--notif-peso-fundo);   color: var(--notif-peso); }
.notif-icone.recusa { background: var(--notif-recusa-fundo); color: var(--notif-recusa); }
.notif-icone.outro  { background: var(--notif-outro-fundo);  color: var(--notif-outro); }
.notif-icone.chegou { background: var(--notif-chegou-fundo); color: var(--notif-chegou); }
.notif-icone.saiu   { background: var(--notif-saiu-fundo);   color: var(--notif-saiu); }
.notif-icone.baixa  { background: var(--notif-baixa-fundo);  color: var(--notif-baixa); }

.notif.lida .notif-icone {
    opacity: .45;
}

.notif-textos {
    flex-grow: 1;
    min-width: 0;
    display: block;
}

.notif-linha1 {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.notif-titulo {
    font-size: 17px;
    font-weight: 700;
    color: var(--tinta);
}

.notif-hora {
    font-size: 14px;
    color: var(--suave);
    flex-shrink: 0;
}

.notif-texto {
    display: block;
    font-size: 15px;
    color: var(--tinta);
    margin-top: 2px;
    line-height: 1.3;
}

.notif.lida .notif-titulo,
.notif.lida .notif-texto {     /* lida = cinza */
    color: var(--suave);
    font-weight: 600;
}

.notif-vazia {
    text-align: center;
    color: var(--suave);
    padding: 60px 20px;
    font-size: 16px;
}

.notif-vazia svg {
    color: var(--linha);
    display: block;
    margin: 0 auto 12px;
}

/* ---------------------------------------------------------------------------------------------
 * [01/10/2026] Gerado: Claude | Aprovado: Osvaldo — PLANO_APP_NOTIFICACOES §4.5 (mockup_bloqueio_avisos aprovado)
 *   Tela que FORÇA ligar os avisos: cobre o app inteiro (acima da camada de trabalho 15, da tela 8 = 45 e das folhas).
 * --------------------------------------------------------------------------------------------- */
.bloq {
    position: fixed;
    inset: 0;
    z-index: 60;
    overflow-y: auto;
    background: var(--fundo);
    display: flex;
    flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-sizing: border-box;
}

.bloq-cabecalho-textos {
    padding-left: 14px;
}

.bloq-corpo {
    flex-grow: 1;
    padding: 26px 22px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.bloq-icone {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    margin: 6px auto 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--notif-peso-fundo);
    color: var(--notif-peso);
}

.bloq-icone.perigo {
    background: var(--perigo-fundo);
    color: var(--perigo);
}

.bloq-titulo {
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: var(--tinta);
    line-height: 1.2;
}

.bloq-texto {
    font-size: 16px;
    color: var(--tinta);
    text-align: center;
    margin: 0;
    line-height: 1.35;
}

.bloq-ex {
    font-size: 14px;
    color: var(--suave);
    text-align: center;
    margin: 0;
}

.bloq-lista {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bloq-lista li {
    display: flex;
    gap: 10px;
    align-items: center;
    background: var(--cartao);
    border: 1px solid var(--linha);
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 15px;
    color: var(--tinta);
}

.bloq-n {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--roxo);
    color: var(--roxo-texto);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.bloq-erro {
    background: var(--erro-fundo);
    border: 1px solid var(--erro-borda);
    color: var(--erro-tinta);
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
}

.bloq-rodape {
    padding: 0 22px 26px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bloq-nota {
    text-align: center;
}

.bloq [hidden] {
    display: none !important;
}

/* ---------------------------------------------------------------------------------------------
 * [01/10/2026] Gerado: Claude | Aprovado: Osvaldo — 0.33.0 (mockup_remover aprovado)
 *   Menu ☰: "Remover o Rec-Camar deste celular" em vermelho · tela Remover (reusa o .bloq): lista do que acontece,
 *   campo "digite REMOVER" (borda verde quando a palavra está certa), trava laranja e o ✓ verde do "Pronto".
 * --------------------------------------------------------------------------------------------- */
.menu-item.menu-item-perigo,
.menu-item.menu-item-perigo svg {
    color: var(--perigo);
}

.bloq-icone.alerta {
    background: var(--laranja-fundo, #FFF1E0);
    color: var(--laranja-tinta);
}

.bloq-icone.ok {
    background: var(--ok-fundo);
    color: var(--ok-tinta);
}

.rm-lista {
    margin: 0;
    padding: 12px 14px 12px 34px;
    background: var(--cartao);
    border: 1px solid var(--linha);
    border-radius: 12px;
    font-size: 15px;
    color: var(--tinta);
    line-height: 1.5;
}

.rm-campo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--tinta);
}

.rm-campo input {
    min-height: 52px;
    border: 2px solid var(--linha);
    border-radius: 12px;
    padding: 0 14px;
    font-family: inherit;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--tinta);
    background: var(--cartao);
    box-sizing: border-box;
    width: 100%;
}

.rm-campo input.certo {
    border-color: var(--ok-borda);
}

.rm-campo input:focus-visible {
    outline: 3px solid var(--foco);
    outline-offset: 1px;
}

/* ---------------------------------------------------------------------------------------------
 * [01/10/2026] Gerado: Claude | Aprovado: Osvaldo — 0.33.0 (mockup_instalar aprovado) — instalar.html
 *   Ícone do app grande, UM botão grande (Android) ou os passos desenhados (iPhone / Android sem o convite).
 * --------------------------------------------------------------------------------------------- */
.inst {
    min-height: 100vh;
    background: var(--fundo);
    display: flex;
    flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-sizing: border-box;
}

.inst-corpo {
    flex-grow: 1;
    padding: 22px 20px 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.inst-icone {
    width: 96px;
    height: 96px;
    border-radius: 22px;
    margin: 18px auto 4px;
    display: block;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}

.inst-titulo {
    font-size: 26px;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: var(--tinta);
    line-height: 1.2;
}

.inst-titulo.inst-titulo-passos {
    font-size: 22px;
}

.inst-texto {
    font-size: 17px;
    text-align: center;
    margin: 0;
    color: var(--tinta);
    line-height: 1.35;
}

.inst-rodape {
    padding: 0 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.botao.inst-grande {
    min-height: 64px;
    font-size: 21px;
}

.inst-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-sizing: border-box;
}

.inst-passos {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.inst-passo {
    display: flex;
    gap: 10px;
    align-items: center;
}

.inst-cena {
    flex-grow: 1;
    background: var(--cartao);
    border: 1px solid var(--linha);
    border-radius: 12px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: var(--tinta);
    min-height: 44px;
    box-sizing: border-box;
}

.inst-ic {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.inst-ic.azul {
    background: #E8F0FE;
    color: #0A84FF;
}

.inst-ic.cinza {
    background: #F2F2F7;
    color: #111111;
}

.inst-leg {
    font-size: 13px;
    color: var(--suave);
    margin: -4px 0 0 38px;
}

.inst [hidden] {
    display: none !important;
}

/* [01/10/2026] 0.33.0 — mockup_ja_instalado aprovado: selo "Já instalado", quadro "como reinstalar" e a faixa do iPhone */
.inst-selo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 auto;
    padding: 6px 12px;
    border-radius: 99px;
    background: var(--ok-fundo);
    color: var(--ok-tinta);
    font-weight: 700;
    font-size: 15px;
}

.inst-como {
    background: var(--cartao);
    border: 1px solid var(--linha);
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 15px;
    color: var(--tinta);
    line-height: 1.45;
}

.inst-como .perigo,
.inst-mi.perigo {
    color: var(--perigo);
}

.inst-mi {
    display: inline-flex;
    vertical-align: -5px;
    color: var(--roxo);
}

.inst-faixa {
    background: var(--notif-peso-fundo);
    border: 1px solid var(--linha);
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 14px;
    color: var(--tinta);
    line-height: 1.4;
    display: flex;
    gap: 10px;
}

.inst-faixa img {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    flex-shrink: 0;
}

/* =============================================================================================
   [01/10/2026] Gerado: Claude | Aprovado: Osvaldo — 0.37.0 ⚙ Ajustes (docs/PLANO_APP_AJUSTES_MASTER.md, mockup aprovado)
   Estilo do app Ajustes do iPhone 11 (iOS 17/18): fundo cinza do sistema, grupos brancos com cantos de 10 px,
   ícone quadrado colorido, texto secundário rgba(60,60,67,.6), azul #007AFF, vermelho #FF3B30.
   ============================================================================================= */
.ajs {
    --ajs-fundo: #F2F2F7; --ajs-cel: #FFFFFF; --ajs-texto: #000000; --ajs-cinza: rgba(60, 60, 67, .6);
    --ajs-linha: #C6C6C8; --ajs-azul: #007AFF; --ajs-vermelho: #FF3B30; --ajs-apagado: rgba(60, 60, 67, .3);
    box-sizing: border-box;
    min-height: 100vh;
    background: var(--ajs-fundo);
    color: var(--ajs-texto);
    font-family: -apple-system, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
    padding: 0 0 calc(120px + env(safe-area-inset-bottom, 0px));
    max-width: 640px;
    margin: 0 auto;
}
@media (prefers-color-scheme: dark) {
    .ajs { --ajs-fundo: #000000; --ajs-cel: #1C1C1E; --ajs-texto: #FFFFFF; --ajs-cinza: rgba(235, 235, 245, .6);
           --ajs-linha: #38383A; --ajs-azul: #0A84FF; --ajs-vermelho: #FF453A; --ajs-apagado: rgba(235, 235, 245, .3); }
}
.ajs-titulo { font-size: 34px; font-weight: 700; margin: 0; padding: 14px 20px 6px; }
.ajs-cab { font-size: 13px; color: var(--ajs-cinza); text-transform: uppercase; margin: 18px 36px 6px; }
.ajs-grupo { background: var(--ajs-cel); border-radius: 10px; margin: 0 16px; overflow: hidden; }
.ajs-separado { margin-top: 32px; }
.ajs-quadro { padding: 12px 16px; margin-top: 12px; }
.ajs-cel {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 16px; box-sizing: border-box;
    border: none; background: transparent; color: inherit; font: inherit; font-size: 17px; text-align: left; position: relative;
    cursor: pointer;
}
.ajs-cel + .ajs-cel::before { content: ""; position: absolute; top: 0; right: 0; left: 57px; border-top: .5px solid var(--ajs-linha); }
.ajs-grupo > .ajs-cel:not(:has(.ajs-ic)) + .ajs-cel::before { left: 16px; }
.ajs-cel-alta { min-height: 58px; }
.ajs-centro { justify-content: center; text-align: center; }
.ajs-perigo { color: var(--ajs-vermelho); }
.ajs-cel:disabled, .ajs-link:disabled { color: var(--ajs-apagado); cursor: default; }
.ajs-ic { width: 29px; height: 29px; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: #fff; flex: none; }
.ajs-ic-grande { width: 58px; height: 58px; border-radius: 13px; }
.ajs-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ajs-val { color: var(--ajs-cinza); font-size: 15px; white-space: nowrap; }
.ajs-cel .ajs-txt:only-of-type, #jl_ajs_armazenamento { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.ajs-topo-cam + .ajs-grupo { margin-top: 20px; }
.ajs-seta { width: 8px; height: 13px; flex: none; }
.ajs-rod { font-size: 13px; line-height: 17px; color: var(--ajs-cinza); margin: 7px 32px 0; }
.ajs-cinza { color: var(--ajs-cinza); }
.ajs-pequeno { font-size: 13px; line-height: 17px; color: var(--ajs-cinza); margin: 4px 0 0; }
.ajs-linha { display: flex; justify-content: space-between; align-items: center; font-size: 15px; gap: 10px; }
.ajs-linha b { font-weight: 600; font-size: 16px; }
.ajs-link { border: none; background: none; color: var(--ajs-azul); font: inherit; font-size: 16px; padding: 4px 0 4px 10px; cursor: pointer; }
.ajs-barra { display: flex; gap: 1.5px; height: 22px; border-radius: 5px; overflow: hidden; margin: 10px 0 9px; background: #E5E5EA; }
.ajs-legenda { font-size: 12px; line-height: 20px; color: var(--ajs-cinza); display: flex; flex-wrap: wrap; column-gap: 12px; }
.ajs-leg { display: inline-flex; align-items: center; gap: 5px; }
.ajs-leg i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.ajs-nav { position: relative; height: 44px; display: flex; align-items: center; padding: 0 8px; }
.ajs-voltar { display: flex; align-items: center; border: none; background: none; color: var(--ajs-azul); font: inherit; font-size: 17px; padding: 0; cursor: pointer; z-index: 1; }
.ajs-nav-tit { position: absolute; left: 70px; right: 70px; text-align: center; font-weight: 600; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ajs-topo-cam { display: flex; gap: 14px; align-items: center; }
.ajs-cam-placa { font-size: 20px; font-weight: 600; }
.ajs-cam-detalhe { font-size: 14px; margin: 2px 0 0; }
.ajs-cam-nome { font-size: 17px; }
.ajs-cam-sit { font-size: 13px; color: var(--ajs-cinza); }
.ajs-veu { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .25); display: flex; flex-direction: column; justify-content: flex-end;
           padding: 0 8px calc(8px + env(safe-area-inset-bottom, 0px)); box-sizing: border-box; font-family: -apple-system, "Segoe UI", Roboto, sans-serif; }
.ajs-folha { background: rgba(242, 242, 242, .97); border-radius: 14px; overflow: hidden; text-align: center; }
.ajs-folha-msg { padding: 14px 16px; font-size: 13px; line-height: 17px; color: rgba(60, 60, 67, .6); display: flex; flex-direction: column; gap: 2px; }
.ajs-folha-msg b { color: rgba(60, 60, 67, .85); font-weight: 600; }
.ajs-folha-bt { width: 100%; height: 57px; border: none; border-top: .5px solid rgba(60, 60, 67, .36); background: none; font-size: 20px; font-family: inherit; cursor: pointer; color: #FF3B30; }
.ajs-folha-cancelar { width: 100%; height: 57px; margin-top: 8px; border: none; border-radius: 14px; background: #fff; color: #007AFF; font-size: 20px; font-weight: 600; font-family: inherit; cursor: pointer; }
.ajs-toast { position: fixed; left: 50%; top: 40%; transform: translateX(-50%); z-index: 70; background: rgba(30, 30, 30, .88); color: #fff;
             border-radius: 14px; padding: 16px 22px; font: 600 15px -apple-system, "Segoe UI", Roboto, sans-serif; text-align: center; }

/* [02/10/2026] 0.38.0 — chaves do MASTER (mockup aprovado): interruptor do iOS, "Aplicando…", histórico e alerta centralizado */
.ajs-cab-longe { margin-top: 28px; }
.ajs-espaco { margin-top: 14px; }
.ajs-bloco-chave + .ajs-bloco-chave { margin-top: 20px; }
.ajs-bloco-chave .ajs-cel { cursor: default; }
/* ANTES: .ajs-bloco-chave .ajs-txt { white-space: normal; } — perdia para ".ajs-cel .ajs-txt:only-of-type" (nome cortado com "…") */
.ajs-bloco-chave .ajs-cel .ajs-txt:only-of-type { white-space: normal; overflow: visible; text-overflow: clip; padding: 11px 0; line-height: 1.25; }
.ajs-sw { width: 51px; height: 31px; border-radius: 16px; border: none; padding: 0; background: #E9E9EA; position: relative; flex: none;
          cursor: pointer; transition: background .2s; }
.ajs-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff;
                 box-shadow: 0 3px 8px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .16); transition: left .2s; }
.ajs-sw[aria-checked="true"] { background: #34C759; }
.ajs-sw[aria-checked="true"]::after { left: 22px; }
.ajs-sw:disabled { cursor: default; opacity: .5; }
.ajs-off .ajs-txt { color: var(--ajs-apagado); }
.ajs-aplicando { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ajs-cinza); margin: 7px 32px 0; }
.ajs-aplicando i { width: 11px; height: 11px; border: 2px solid #C7C7CC; border-top-color: #8E8E93; border-radius: 50%; flex: none;
                   animation: ajs-gira .9s linear infinite; }
@keyframes ajs-gira { to { transform: rotate(360deg); } }
.ajs-ultima { font-size: 13px; line-height: 17px; color: var(--ajs-cinza); text-align: center; margin: 22px 20px; white-space: pre-line; }
.ajs-hist { padding: 9px 16px; position: relative; display: flex; flex-direction: column; gap: 2px; }
.ajs-hist + .ajs-hist::before { content: ""; position: absolute; top: 0; right: 0; left: 16px; border-top: .5px solid var(--ajs-linha); }
.ajs-hist b { font-weight: 600; font-size: 16px; }
.ajs-dp { font-size: 14px; }
.ajs-sim { color: #248A3D; font-weight: 600; }
.ajs-nao { color: #8E8E93; font-weight: 600; }
.ajs-quem { font-size: 13px; }
.ajs-app { color: #5856D6; font-weight: 600; }
.ajs-veu-centro { justify-content: center; align-items: center; padding: 0 16px; }
.ajs-alerta { width: 270px; max-width: 100%; border-radius: 14px; background: rgba(242, 242, 242, .97); text-align: center; overflow: hidden;
              font-family: -apple-system, "Segoe UI", Roboto, sans-serif; color: #000; }
.ajs-alerta h3 { font-size: 17px; font-weight: 600; margin: 19px 16px 2px; }
.ajs-alerta p { font-size: 13px; line-height: 17px; margin: 0 16px 18px; white-space: pre-line; }
.ajs-alerta-bts { display: flex; border-top: .5px solid rgba(60, 60, 67, .36); }
.ajs-alerta-bts button { flex: 1; height: 44px; border: none; background: none; font-size: 17px; font-family: inherit; color: #007AFF; cursor: pointer; }
.ajs-alerta-bts button + button { border-left: .5px solid rgba(60, 60, 67, .36); }
.ajs-alerta-bts button.forte { font-weight: 600; }