/* ===== 08-painel.css — painel de atenção, gestão, painel expansível, pendências, ações =====
   Fatia do antigo app.css (09/08/2026). O NÚMERO NO NOME É A POSIÇÃO NA CASCATA: é a ordem
   dos <link> no index.html, e trocá-la muda quem vence. Regra e política em 01-base.css. */

/* Painel de atenção (Orçamentos/Agenda/OS/Recebimentos/Lembretes/Home) — contadores clicáveis que
   filtram a lista. Foco é exclusivo com os chips de estado — ver <Tela>.razor. Contador zerado some
   (menos quando é ele o recorte ligado, senão desligá-lo viraria impossível); o painel inteiro some
   quando não sobra nenhum tile — nenhum dos dois desloca o resto da tela por muito tempo, porque não
   fica ali disabled ocupando espaço. */
/* Duas colunas fixas: cada tile ganha metade da largura, espaço que a descrição completa (em vez de
   um rótulo abreviado) precisa para não virar sopa de letrinha. Número ímpar de tiles deixa o último
   sozinho na própria linha, só na primeira coluna — a regra abaixo o estica pras duas para não sobrar
   metade da largura vazia. :last-child:nth-child(odd), não :only-child: com 1 tile ele é o próprio
   1º (ímpar) e último — mas o mesmo vale com 3 (o 3º cai sozinho na 2ª linha) ou 5, então a seletora
   tem de pegar QUALQUER contagem ímpar, não só a de um tile só. */
.attention-panel {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .5rem;
    margin-bottom: .75rem;
}

.attention-panel .attention-tile:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

/* Oferta do passo seguinte na tela de item (hoje só uma: cobrar, logo depois de concluir a OS).
   Faixa curta com uma ação só, no topo — não é card de lista nem muro; o que a distingue do resto do
   formulário é a borda na cor da marca, porque ela aparece depois de uma ação e some na próxima. */
.proximo-passo {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-bottom: .85rem;
    padding: .8rem;
    border: 1px solid var(--brand);
    border-radius: 12px;
    background: var(--brand-tint);
}

/* Texto em --ink, não no --muted padrão do .hint: sobre o tint da marca o cinza fica em ~3,4:1, e
   esta é a frase que explica por que o botão apareceu. */
.proximo-passo .hint { margin: 0; color: var(--ink); }

/* O botão nasce com ícone + rótulo, e os botões grandes do app não têm gap próprio (o ícone encosta
   no texto). São dois os lugares em que um btn-primary-lg leva ícone: este e o .instalar-bloco. */
.proximo-passo button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
}

/* Convite para instalar o app na Home. Empresta a linguagem visual do .proximo-passo (borda na cor
   da marca sobre o tint) porque é a mesma promessa — "há um passo a dar aqui" —, mas tem classe
   própria em vez de reusar aquela: o .proximo-passo tem uso restrito escrito no ui-padroes.md §5
   ("nasce de uma ação e morre na próxima"), e este convite é persistente, aparece sem ninguém ter
   feito nada e sobrevive até ser dispensado. Reusar a classe apagaria essa distinção no dia em que
   alguém for ler a regra.

   Grade em vez de flex-row: no celular o ✕ precisa ficar preso ao canto superior direito enquanto o
   texto e o CTA ocupam a largura toda, e com flex o botão de dispensar acabaria empurrado para
   baixo do texto ou espremendo o CTA. */
/* A faixa de instalação usa a anatomia das outras duas (ver o bloco .aviso-demo/.aviso-atualizacao
   lá em cima, onde as três estão declaradas juntas). Só a cor é dela: mesmo tint da marca da faixa
   de atualização, e é de propósito — as duas são "o app falando do app", enquanto o âmbar da
   demonstração é sobre a conta. */
.aviso-instalar { background: var(--brand-tint); }
.aviso-instalar .icon { color: var(--brand); }

/* O botão da vitrine leva ícone, e o .btn-primary-lg não tem gap próprio — mesma correção do
   .proximo-passo button, e os dois são os únicos casos. */
.instalar-bloco { gap: .45rem; }

/* Passos da instalação, dentro do BottomSheet. Numeração à mostra (é uma sequência a seguir com o
   aparelho na mão, não uma lista de itens) e o mesmo par strong/span dos passos do "Como entrar no
   teste" da vitrine. */
.instalar-passos {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    margin: .5rem 0 0;
    padding-left: 1.3rem;
}

.instalar-passos li { line-height: 1.4; }
.instalar-passos strong { display: block; font-size: .95rem; }
.instalar-passos span { display: block; font-size: .85rem; color: var(--muted); }

/* Coluna: topo (ícone + número) e, embaixo, a descrição completa da pendência, ambos centralizados
   na largura do tile. */
.attention-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    padding: .65rem .7rem;
    border: 1px solid var(--line);
    border-radius: .7rem;
    background: #fff;
    color: var(--ink);
    text-decoration: none;
    cursor: pointer;
}

/* Ícone + número centralizados como par na largura do tile — não grudados no canto esquerdo, que é
   o que sobrava de espaço quando a descrição virou frase completa embaixo. */
.attention-top { display: flex; align-items: center; justify-content: center; width: 100%; gap: .4rem; }

.attention-tile .icon { width: 1.1rem; height: 1.1rem; color: var(--muted); }

.attention-tile:disabled { opacity: .45; cursor: default; }

.attention-tile.is-active { border-color: var(--brand); background: var(--brand-tint); }

.attention-tile.is-active .icon { color: var(--brand); }

/* Tile de erros de sincronização (Home) — o modo de falha do offline-first pede tom de alerta,
   não o neutro dos outros contadores; só renderiza quando > 0. */
.attention-tile-danger { border-color: var(--danger); background: var(--danger-tint); }
.attention-tile-danger .icon,
.attention-tile-danger .attention-count { color: var(--danger); }

.attention-count { font-size: 1.3rem; font-weight: 700; line-height: 1; }

.attention-label { font-size: .78rem; color: var(--muted); text-align: center; line-height: 1.25; }

/* Painel "Gerenciamento" (Home) — irmão do .day-panel, e de propósito mais leve que ele: neutro em
   vez de tintado, borda de 1px em vez de 2. O "Agora" é o herói da tela (o dia em curso); este é a
   visão gerencial logo abaixo, e dois painéis com o mesmo peso brigariam pela atenção. */
.gestao-panel {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: .9rem;
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
}

/* Tile branco sobre painel branco sumiria — dentro do painel eles se invertem para o tom da página
   e passam a ler como chips embutidos, o que também é o que dá a sensação de "agrupado". */
.gestao-panel .attention-tile { background: var(--bg); }

/* justify-content: center — .page-title-strong já centraliza o próprio texto, mas como item de
   flex ele encolhe pro tamanho do conteúdo (a caixa não estica sozinha), e text-align vira sem
   efeito numa caixa do tamanho do texto. */
.gestao-panel-header { display: flex; align-items: center; justify-content: center; margin-bottom: .7rem; }

/* Mesmo idioma de colapso do .filtro-toggle das listas (inclusive o .filtro-chevron, reusado no
   markup) — o app já ensinou esse gesto ao usuário, não custa um segundo vocabulário. Aqui sem a
   moldura própria: o .gestao-panel já é a caixa. */
.gestao-toggle {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
    padding: 0;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    color: inherit;
}

/* O resumo empurra o chevron para a direita e é o que faz a linha fechada valer alguma coisa. */
.gestao-resumo { flex: 1; font-size: .85rem; color: var(--muted); }

/* Quando o resumo é a contagem do funil (não uma frase), ela vira badge — mesmo vermelho do
   .badge-vencido usado no restante do app, para não inventar um segundo vocabulário de alerta.
   margin-left: auto substitui o flex:1 do .gestao-resumo: empurra o badge (e o chevron, que vem
   logo depois) para a direita sem esticar a pílula até a largura do espaço livre. */
.gestao-resumo-badge { margin-left: auto; }

.gestao-toggle .filtro-chevron .icon { width: 1.1rem; height: 1.1rem; color: var(--muted); }

/* A rotação do chevron mora em `.filtro-toggle.is-open` — reusar só o elemento .filtro-chevron não
   traz o giro junto, e o cabeçalho ficava sem indicar aberto/fechado. */
.gestao-toggle.is-open .filtro-chevron { transform: rotate(180deg); }

/* PainelExpansivel (Parâmetros): cada seção é a própria caixa (.dev-panel), então o toggle interno
   fica sem moldura própria — mesma ideia do .gestao-toggle, mas com título em destaque no lugar do
   <h2> que a seção tinha antes de virar colapsável. */
.painel-expansivel { margin-top: 0; }
.painel-expansivel + .painel-expansivel { margin-top: .75rem; }

.painel-expansivel-toggle {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
    padding: 0;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    color: inherit;
}

.painel-expansivel-titulo { font-size: 1.05rem; font-weight: 700; color: var(--ink); flex-shrink: 0; }

/* Ocupa a sobra e trunca em vez de quebrar linha — o resumo é só um indício do que tem lá dentro,
   não precisa caber inteiro numa tela de 360px. */
.painel-expansivel-resumo {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .85rem;
    color: var(--muted);
    text-align: right;
}

/* O chevron se empurra sozinho pra borda, em vez de depender do flex:1 do resumo: painel sem resumo
   (Minha conta) deixava a seta colada no título, fora da coluna onde ela está em todos os outros. */
.painel-expansivel-toggle .filtro-chevron { margin-left: auto; }
.painel-expansivel-toggle .filtro-chevron .icon { width: 1.1rem; height: 1.1rem; color: var(--muted); }
.painel-expansivel-toggle.is-open .filtro-chevron { transform: rotate(180deg); }

/* Sem flex/gap aqui de propósito: o conteúdo (EditForm, botões soltos, .marca-preview) já resolve o
   próprio espaçamento interno (.field margin-bottom etc.) — um gap por cima duplicaria a folga. */
.painel-expansivel-corpo { margin-top: .85rem; }

/* Subseção "Pendências a regularizar" dentro do painel Gerenciamento — separada do grid de módulos
   por uma régua, mesmo idioma do rodapé (.gestao-panel-link-rodape) que fecha o corpo dela. */
.gestao-subsecao {
    margin-top: .9rem;
    padding-top: .8rem;
    border-top: 1px solid var(--line);
}

.gestao-subsecao-title { font-size: .9rem; font-weight: 700; color: var(--ink); }

.gestao-corpo { display: block; }
.gestao-corpo[hidden] { display: none; }

.gestao-panel-link {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    flex-shrink: 0;
    font-size: .8rem;
    font-weight: 600;
    color: var(--brand-dark);
    text-decoration: none;
}

.gestao-panel-link .icon { width: .95rem; height: .95rem; }

/* Rodapé do corpo expandido: centralizado e destacado do último tile, para não ser lido como
   legenda do bloco de cima. */
.gestao-panel-link-rodape {
    display: flex;              /* o base é inline-flex: sem isto a régua de cima só cobriria o texto */
    justify-content: center;
    margin-top: .7rem;
    padding-top: .7rem;
    border-top: 1px solid var(--line);
}

/* Último filho encosta no padding do painel — sem isto sobra uma faixa morta no rodapé, que era
   parte do que fazia o conjunto parecer solto. */
.gestao-panel > *:last-child { margin-bottom: 0; }

/* Estado do painel quando não há tile nenhum: offline (não dá para afirmar nada) ou tudo em dia de
   verdade. Fica dentro do painel, não solto na página. */
.gestao-panel-estado {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0;
    font-size: .875rem;
    color: var(--ink-soft);
}

.gestao-panel-estado .icon { width: 1.1rem; height: 1.1rem; flex-shrink: 0; color: var(--muted); }
.gestao-panel-estado.is-ok .icon { color: var(--ok); }

/* Cabeçalho de grupo da tela /pendencias — separa os 4 tipos dentro da mesma lista. A contagem fica
   à direita para o olho bater o tamanho do grupo sem contar os cards. */
.pendencia-grupo {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 1.1rem 0 .5rem;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--muted);
}

.pendencia-grupo:first-of-type { margin-top: .35rem; }
.pendencia-grupo .icon { width: 1rem; height: 1rem; flex-shrink: 0; }
.pendencia-grupo-label { min-width: 0; }

.pendencia-grupo-count {
    margin-left: auto;
    flex-shrink: 0;
    padding: .05rem .45rem;
    border-radius: 999px;
    background: var(--bg);
    color: var(--ink-soft);
}

/* O card da worklist empilha info + ação (a lista de cadastro põe as ações num sheet; aqui a ação é
   uma só e resolver a pendência é o ponto da tela, então ela fica visível no card). Escopado às duas
   worklists de propósito: solto em .cliente-card pegaria card de qualquer lista futura. A bandeja de
   sync tem a mesma anatomia — uma ação só ("Abrir registro"), que é o ponto de estar ali. */
.pendencia-item > .btn-secondary,
.sync-erro-item > .btn-secondary { margin-top: .6rem; }

/* Fileira de resgate do anexo da bandeja (Baixar | Reenviar). Reusa o .acoes-par do rodapé de
   sub-sheet, que já é flex com meia largura cada — mas os botões dali são netos, não filhos do
   .sync-erro-item, e por isso escapam da regra de margem acima. */
.sync-erro-item > .acoes-par { margin-top: .6rem; }

/* Pilha vertical das ações do sheet de card (Orçamentos, S5b) */
.acoes-lista { display: flex; flex-direction: column; gap: .5rem; }

/* Ação destacada do <PainelProximasAcoes>, a única do app que põe ícone num .btn-primary-lg dentro
   de um sheet: o botão grande é inline-flex mas não tem gap próprio, e sem isto o ícone encosta no
   texto (mesma correção do .proximo-passo). Inócuo nos outros .btn-primary-lg de sheet — "Concluir",
   "Enviar para o cliente" e afins são só texto. */
.acoes-lista .btn-primary-lg { gap: .45rem; }

/* Gatilho JIT da marca (OfertaNomeNegocio) — linha extra dentro do estado "orçamento enviado" do
   sheet, entre o hint de confirmação e os botões de envio. Reusa .field/.hint/.acoes-lista; só
   precisa da folga em volta pra não colar nos vizinhos. */
.oferta-marca { display: flex; flex-direction: column; gap: .5rem; margin: .5rem 0; }

/* Separador entre as ações de negócio e o atalho "Cliente" (e, dentro dele, entre contato e
   cadastro). Margem negativa, não zero — o `<hr>` é ele mesmo um item do flex do .acoes-lista, então
   o `gap: .5rem` já conta DOIS gaps ao redor dele (antes e depois), o dobro do que existe entre dois
   botões vizinhos (só um gap entre os dois). Margem 0 corrigia a soma de três (gap + margem + gap)
   pra dois gaps, mas dois gaps ainda é o dobro de um — "Execução" e "Cliente" continuavam mais
   afastados que Excluir e Execução. -.25rem de cada lado cancela a metade excedente de cada gap, e o
   total ao redor da linha volta a igualar um gap comum (.5rem no fim das contas). */
.acoes-sep { border: none; border-top: 1px solid var(--line); margin: -.25rem 0; }

/* Mesma linha, folga maior — o corpo de um painel de Parâmetros é mais arejado que a lista densa de
   um BottomSheet, e ali não há gap de flex cobrindo a diferença. */
.acoes-sep-solta { margin: 1.25rem 0; }

/* Rodapé "Voltar | Fechar" dos sub-sheets (Cliente, Execução, Mais opções): as duas saídas dividem a
   linha em vez de empilhar como o resto do .acoes-lista. Ficam lado a lado porque são a MESMA
   decisão vista de dois ângulos ("volto para as ações" ou "acabei"), e porque um sub-sheet aberto a
   partir de outro sheet sem caminho de volta obriga a reabrir o card só para chegar onde já se
   estava. Meia largura cada: nenhuma das duas é a ação principal do sheet — a principal está acima. */
.acoes-par { display: flex; gap: .5rem; }
.acoes-par > .btn-secondary { flex: 1; }


/* ---------------- Minhas mensagens (Parâmetros) ---------------- */

/* Linha da lista das seis mensagens: rótulo em cima, primeira linha do texto embaixo. É um
   .btn-secondary com duas linhas, e não um card próprio, porque o gesto é o mesmo do resto do painel
   (toque abre um sheet) — inventar um cartão aqui faria a lista parecer conteúdo, não configuração. */
.mensagem-linha {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .25rem;
    text-align: left;
    padding: .75rem;
}

.mensagem-linha-topo { display: flex; align-items: center; gap: .5rem; }
.mensagem-linha-rotulo { font-weight: 600; }

/* A prévia é secundária de propósito: quem varre a lista procura o rótulo, e o texto serve para
   reconhecer "é esta mesmo" sem abrir. Uma linha só — o corte com reticências mora no C#. */
.mensagem-linha-previa {
    color: var(--ink-soft);
    font-size: .85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Selo de "esta você reescreveu". Discreto: a informação é útil, mas personalizar não é um troféu —
   quem está no padrão não pode achar que lhe falta alguma coisa. */
.chip-status {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: .1rem .4rem;
    border-radius: .25rem;
    color: var(--brand);
    background: color-mix(in srgb, var(--brand) 12%, transparent);
}

/* Os marcadores disponíveis, como botões de inserir. Quebram em várias linhas (wrap) porque são até
   cinco e o celular é estreito — encolhê-los para caber numa linha só os tornaria alvo pequeno. */
.marcador-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 1rem; }

.chip-acao {
    min-height: 2.25rem;
    padding: .35rem .6rem;
    font-size: .85rem;
    color: var(--ink);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 1.25rem;
    cursor: pointer;
}

.chip-acao:active { background: rgba(28, 27, 25, .08); }

/* A prévia do resultado. Fundo diferente e canto arredondado para ler como "mensagem", que é
   exatamente o que ela é — a mesma pista visual que um balão de conversa dá.

   Dentro da caixa vai SÓ o texto da mensagem: o rótulo e a orientação moram fora, como o <label> e
   o .hint dos campos acima. Enquanto os três dividiam a caixa, a orientação era lida como se fosse
   a última linha da mensagem — o oposto do que ela diz. */
.mensagem-previa {
    padding: .75rem;
    border-radius: .5rem;
    background: var(--bg);
    border: 1px solid var(--line);
    margin-bottom: .35rem;
}

/* pre-wrap: a cobrança tem quebra de linha real (a chave Pix em linha própria), e sem isto a prévia
   mentiria sobre o formato justamente na mensagem em que o formato importa. */
.mensagem-previa-corpo { white-space: pre-wrap; margin: 0; }

/* Seletor de saudação: os chips quebram em várias linhas porque as frases têm larguras diferentes
   ("Olá, Maria!" × "Sem saudação") e espremê-las numa linha só cortaria justamente o texto que a
   pessoa precisa comparar. Difere do .chip-group (segmentado, larguras iguais) por isso. */
.chip-group-livre { display: flex; flex-wrap: wrap; gap: .4rem; }

.chip-acao.is-selected {
    color: #fff;
    background: var(--brand);
    border-color: var(--brand);
}