/* PORTAL DO CLIENTE (24/09/2026) — escopo por id raiz (#portalRoot).

   O desenho é o do hub do Comercial (os cartões .cmh-* de
   public/css/comercial/funil.css), com os mesmos valores: é o cartão que o
   Felipe apontou como modelo em 25/09/2026 — nome, e duas ou três linhas de
   descrição na fonte do corpo. Reusa o design system global (.painel-page /
   .painel-title / .painel-intro / .painel-grupo-grid / .painel-item /
   .painel-item-arrow / .painel-item-lock / .locked do style.css).

   As versões anteriores (uma coluna estreita no centro com emoji; depois dois
   grupos com a "visão de dentro" do time) foram recusadas. */

#portalRoot a.painel-item { text-decoration: none; color: inherit; }
#portalRoot .portal-item { align-items: flex-start; padding: 18px 20px; }
#portalRoot .portal-icon { width: 36px; height: 36px; flex-shrink: 0; color: var(--accent-dark, var(--accent)); }
#portalRoot .portal-icon svg { width: 100%; height: 100%; }
#portalRoot .portal-content { flex: 1; min-width: 0; }
#portalRoot .portal-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.5; margin-top: 4px; }

/* VER COMO UM CLIENTE (25/09/2026): the picker bar for the team, and the
   read-only bar on top of a previewed screen (template/portal/ver_como.html —
   outside #portalRoot, so these rules are not scoped). */
.portal-vercomo {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
    margin: 0 0 18px; padding: 9px 14px;
    border: 1px dashed rgba(120, 120, 120, .35); border-radius: 10px;
    background: rgba(120, 120, 120, .05);
    font-family: var(--font-body); font-size: 12.5px; color: var(--text-secondary);
}
.portal-vercomo.is-ativo { border-style: solid; border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); color: var(--text); }
.portal-vercomo.is-pedido { border-color: var(--accent); color: var(--text); }
.portal-vercomo-ico { font-size: 14px; line-height: 1; }
.portal-vercomo-busca {
    min-width: 240px; padding: 6px 10px; border: 1px solid rgba(120, 120, 120, .35); border-radius: 8px;
    background: var(--surface, #fff); font-family: var(--font-body); font-size: 12.5px; color: var(--text);
}
.portal-vercomo-busca:focus { outline: 0; border-color: var(--accent); }
.portal-vercomo-sair { margin-left: auto; font-weight: 600; color: var(--accent-dark, var(--accent)); text-decoration: none; }
.portal-vercomo-sair:hover { text-decoration: underline; }


/* O CARD DA GARANTIA ABERTO PELO PORTAL (25/09/2026).
   No modo cliente a coluna da conversa (a da esquerda) sai do card, e o
   .cm-modal-split continuava com as TRÊS colunas do card de dentro
   (320 | meio | 320, em public/css/comercial/funil.css). Os dois blocos que
   sobram caíam nas duas primeiras: o cabeçalho espremido em 320px (rótulos por
   cima dos campos) e os anexos no espaço do meio, com uma faixa vazia à
   direita. Aqui a grade do modo cliente tem as duas colunas que existem: o
   cabeçalho no meio, largo, e os anexos à direita. A classe
   .cm-modal-split--cliente só existe quando a tela abre pelo portal. */
#cgModal .cm-modal-split.cm-modal-split--cliente { grid-template-columns: minmax(0, 1fr) 320px; }
#cgModal .cm-modal-split--cliente .cm-modal-right { border-right: 1px solid var(--border); }
/* A JANELA ENCOLHE a coluna que não existe (25/09/2026, pedido do Felipe): o
   meio e os anexos ficam com a MESMA largura do card de dentro
   (320 | meio | 320 → meio | 320), em vez de o meio esticar para ocupar o
   lugar da conversa. */
#cgModal .cm-modal-dialog:has(.cm-modal-split--cliente) { width: calc(100% - 320px); max-width: 1200px; }
@media (max-width: 1280px) {
    #cgModal .cm-modal-split.cm-modal-split--cliente { grid-template-columns: minmax(0, 1fr) 300px; }
    #cgModal .cm-modal-dialog:has(.cm-modal-split--cliente) { width: calc(100% - 300px); }
}
@media (max-width: 1000px) {
    #cgModal .cm-modal-split.cm-modal-split--cliente { grid-template-columns: 1fr; }
    #cgModal .cm-modal-dialog:has(.cm-modal-split--cliente) { width: 100%; max-width: none; }
}

/* O QUE O CLIENTE NÃO VÊ na garantia (25/09/2026, pedido do Felipe). A tela é
   a mesma do Comercial; controller/portal/garantia.go embrulha o HTML em
   .portal-garantia, e aqui somem:
     - a visão "E-mail" (a conversa com os fornecedores é de dentro de casa);
     - a visão "Painel" (os números do controle — cobrança ao fornecedor,
       aproveitamento, laudos a completar — são de dentro de casa);
     - os badges de notificação das miniaturas e das abas: a bolinha de
       pendência (.cg-pend), o selo "resposta" (.cg-resp-nova) e os contadores
       de e-mail (.cm-badge);
     - o botão "Automações de e-mail" que a tela põe no topo da página
       (#topbarActions fica fora do embrulho, por isso o :has no body). */
.portal-garantia .cg-visao[data-visao="email"],
.portal-garantia .cg-visao[data-visao="painel"] { display: none; }
.portal-garantia .cg-pend,
.portal-garantia .cg-resp-nova,
.portal-garantia .cm-badge,
.portal-garantia .ml-rail-badge { display: none !important; }
body:has(.portal-garantia) #topbarActions .cg-auto-slot { display: none; }


/* A COLUNA "SITUAÇÃO" DA TABELA (25/09/2026). Em public/css/comercial/funil.css
   a célula .cg-td-sinais leva display:flex — e uma <td> com flex deixa de ser
   célula de tabela: não estica até a altura da linha, e a borda de baixo fica
   boiando no meio dela ("as duas últimas colunas desalinhadas"). A origem é o
   funil.css e vale também para o Comercial; aqui fica a correção do portal,
   onde o defeito aparece mais porque a bolinha de pendência some e a célula
   fica quase vazia. Célula que só tinha o que o cliente não vê mostra "—",
   como as outras vazias. */
.portal-garantia td.cg-td-sinais { display: table-cell; vertical-align: middle; white-space: nowrap; }
.portal-garantia td.cg-td-sinais > * { vertical-align: middle; }
.portal-garantia td.cg-td-sinais > * + * { margin-left: 4px; }
.portal-garantia td.cg-td-sinais:not(:has(> :not(.cg-pend):not(.cg-resp-nova)))::before {
    content: "—"; color: var(--text-2); font-style: italic;
}

/* MAIS O QUE O CLIENTE NÃO VÊ (25/09/2026):
     - a engrenagem de cada coluna (configurar responsáveis e aprovadores é de
       dentro de casa);
     - a caixa de texto da conversa "Triagem / Complemento necessário"
       ENQUANTO o caso está na Triagem: ali a decisão é do nosso time, o
       cliente não tem botão para enviar, e a caixa deixava escrever para
       nada. No Complemento necessário ela continua — é a vez dele responder.
       A caixa só se distingue pelo texto de ajuda (o card não diz em que
       coluna está no HTML da conversa), por isso o seletor de placeholder. */
.portal-garantia .gqv-cfg { display: none; }
.portal-garantia textarea[data-triagem-txt][placeholder^="O que foi verificado"] { display: none; }



/* A BOLINHA DA AÇÃO DO CLIENTE (25/09/2026) — template/portal/garantia_acao.html.
   Padrão 13 do Construtor: absoluta no canto (o card não muda de tamanho), sem
   número nem texto, o motivo no hover. O mesmo desenho da .cg-pend da tela de
   dentro. Na Tabela entra em linha, na coluna Situação (padrão 18). */
.portal-garantia .portal-acao {
    position: absolute; top: 7px; right: 7px; width: 8px; height: 8px;
    border-radius: 50%; background: #c0392b; box-shadow: 0 0 0 2px var(--surface);
}
.portal-garantia .portal-acao--tab { position: static; display: inline-block; vertical-align: middle; box-shadow: none; }