/* ===== 10-home-e-modulos.css — Home (saudação, comece por aqui, painel do dia), tiles, muro Pro, vínculo =====
   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. */

/* ==========================================================================
   Home — redesenho (painel do dia + ações rápidas + grade de módulos).
   Personalização (reordenar/favoritar/ocultar, persistida) fica para depois.
   ========================================================================== */

.greet { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin: 0 0 1rem; }
.greet-name { margin: 0; font-size: 1.3rem; }
.greet-date { flex-shrink: 0; font-size: .85rem; color: var(--muted); text-align: right; }

/* Bloco de onboarding "Comece por aqui" (Home) — nasce fechado (ComecePorAqui.razor devolve nulo
   quando Estado.Mostrar é falso) e mora ACIMA do .day-panel, antes do "Agora". Reusa a moldura
   neutra do .gestao-panel (não o tom tintado do .day-panel): é o terceiro painel da tela, não uma
   faixa de aviso, e a marca em destaque já vem do próprio .btn-primary-lg dos passos abertos. */
.comece-panel {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: .9rem;
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
}

.comece-titulo { margin: 0 0 .7rem; font-size: .95rem; font-weight: 700; color: var(--ink); }

.comece-passos { display: flex; flex-direction: column; gap: .6rem; margin: 0; padding: 0; list-style: none; }

/* Cada passo é uma linha própria, com seu botão à direita — não mais um único CTA gigante que muda
   de rótulo conforme o funil anda. Os dois ramos (visita/orçamento) continuam de peso igual: sem
   grid lado a lado, a igualdade vem de as duas linhas terem exatamente a mesma cara. */
.comece-passo { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 44px; }

/* Botão de ação da linha — sempre preenchido, mesmo quando dois passos-irmãos estão abertos ao
   mesmo tempo (visita/orçamento): duas aparências pro mesmo tipo de ação (uma cheia quando sozinho,
   uma em contorno quando em par) confundia mais do que ajudava. */
.comece-passo-ir { margin-right: -.4rem; flex-shrink: 0; background: var(--brand); color: #fff; }
.comece-passo-ir:active { background: var(--brand); opacity: .85; }

.comece-passo-icone { display: flex; flex-shrink: 0; color: var(--ok); }
.comece-passo-icone .icon { width: 1.2rem; height: 1.2rem; }

/* Feito: ícone de confirmação na cor de sucesso do app, texto simples — não é mais um botão. */
.comece-passo.is-feito { color: var(--ink-soft); font-size: .9rem; }

/* Aberto mas não acionável (ex.: "Marque uma visita" antes de cadastrar o cliente) — apagado, sem
   botão nem check; continua visível para o funil se ler inteiro, sem oferecer um beco. */
.comece-passo.is-inativo { color: var(--muted); font-size: .9rem; }

.comece-opcional { display: flex; flex-direction: column; gap: .4rem; margin-top: .3rem; }

/* Os dois atalhos somem um a um ao serem salvos (ver OnboardingAtalhos); com os dois feitos, esta
   linha ocupa o lugar deles — mesmo ícone de engrenagem do cabeçalho, não um link sublinhado. */
.comece-personalizar { margin-top: .3rem; font-size: .9rem; color: var(--ink); }
.comece-personalizar .icon-btn { margin-right: -.6rem; flex-shrink: 0; }

/* Atalho opcional (marca/horários) — mesma linha "resumo tocável" do restante do app, nunca com o
   peso de um botão: os dois não são etapas do funil (ver ComecePorAqui.razor). */
.comece-atalho {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-height: 44px;
    padding: .3rem 0;
    background: transparent;
    border: none;
    color: var(--ink);
    font-size: .9rem;
    text-align: left;
    cursor: pointer;
}

.comece-atalho .icon:first-child { color: var(--muted); }
.comece-atalho span { flex: 1; }
.comece-atalho .icon:last-child { width: 1.1rem; height: 1.1rem; color: var(--muted); }

/* Painel "Hoje" — fundo claro (tinta da marca) com contorno forte, não um bloco escuro: precisa
   ficar em destaque sem pesar mais que o resto da tela logo abaixo do cabeçalho já escuro. */
.day-panel {
    background: var(--brand-tint);
    border: 2px solid var(--brand);
    border-radius: .9rem;
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
}

.day-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .55rem;
}

.day-panel-title {
    margin: 0;
    font-size: .95rem;
    font-weight: 700;
    color: var(--brand-dark);
}

.day-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;
}

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

.day-panel-empty { margin: 0; font-size: .85rem; color: var(--ink-soft); }

/* Rede caiu ao buscar a agenda de hoje — mesmo desenho do .gestao-panel-estado (ícone + texto mudo),
   mas com classe própria: os dois painéis não compartilham contexto visual (.day-panel é tintado). */
.day-panel-estado { display: flex; align-items: center; gap: .45rem; margin: 0; font-size: .85rem; color: var(--ink-soft); }
.day-panel-estado .icon { width: 1.1rem; height: 1.1rem; flex-shrink: 0; color: var(--muted); }

/* Procedência ("agenda salva às 08:12") logo abaixo do que ela qualifica: precisa de ar para não
   colar na última linha e ser lida como mais um compromisso. Irmão adjacente de propósito — quando
   a nota é a única coisa no painel (sem rede e sem snapshot do dia), não sobra margem pendurada. */
.day-status-row + .day-panel-estado,
.day-panel-empty + .day-panel-estado { margin-top: .55rem; }

/* Linha de status (atrasado/em andamento/próximo) — régua tracejada padrão do app entre elas (ver
   nota em .dia-grupo) em vez de gap grande, pra caber as três sem esticar o painel. */
.day-status-row { display: flex; align-items: flex-start; gap: .55rem; padding: .4rem 0; }
/* var(--line) some quase contra o fundo tintado do painel (.day-panel) — usa var(--brand) pra
   a régua tracejada continuar visível aqui, mesmo padrão dashed, cor mais forte só neste contexto. */
.day-status-row + .day-status-row { border-top: 1px dashed var(--brand); }

.day-status-row .icon { flex-shrink: 0; width: 1.15rem; height: 1.15rem; margin-top: .1rem; color: var(--brand-dark); }

.day-status-text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.day-status-text strong { font-size: .88rem; color: var(--ink); }

.day-status-detail {
    font-size: .8rem;
    color: var(--ink-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.day-status-row.is-atrasado .icon { color: var(--danger); }
.day-status-row.is-atrasado strong { color: var(--danger); }

.day-status-row.is-andamento .icon { color: var(--ok); }

/* Grade de módulos — cartão (borda + sombra) com ícone em círculo + rótulo. Substitui o antigo
   .module-launcher/.module-card (lista "etiqueta" vertical). */
.module-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }

/* Hub de Cadastros com UsaEquipamentos ligado: 4 peers exatos ficam melhor num 2x2 balanceado que
   num 3+1 torto. Com a flag desligada (padrão) o hub tem só 3 tiles e usa o .module-grid base
   (3 colunas, uma linha só) — não este modificador. */
.module-grid-2 { grid-template-columns: repeat(2, 1fr); }

/* Cabeçalho do painel Gerenciamento (Home): os 4 módulos de apoio numa linha só, não 3+1 — aqui o
   grid é o topo do painel, não uma tela dedicada, e um segundo estande solto por baixo destoaria.
   Gap e padding do tile encolhem porque 4 colunas sobram menos largura que 2 ou 3. */
.module-grid-4 { grid-template-columns: repeat(4, 1fr); gap: .4rem; }
.module-grid-4 .module-tile { min-height: 84px; padding: .7rem .3rem .55rem; }
.module-grid-4 .module-tile-icon { width: 2.4rem; height: 2.4rem; }
.module-grid-4 .module-tile-icon .icon { width: 1.15rem; height: 1.15rem; }
.module-grid-4 .module-tile-label { font-size: .72rem; }

.cadastros-intro { margin: -.2rem 0 .9rem; }

.module-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    min-height: 96px;
    padding: .9rem .5rem .7rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: .8rem;
    color: var(--ink);
    text-decoration: none;
    text-align: center;
    box-shadow: 0 1px 2px rgba(28, 27, 25, .04);
}

.module-tile:active { background: var(--bg); }

.module-tile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--brand-tint);
    color: var(--brand-dark);
}

.module-tile-icon .icon { width: 1.35rem; height: 1.35rem; }

.module-tile-label { font-size: .8rem; font-weight: 700; line-height: 1.2; }

/* Contador no canto do cartão (não do círculo) — cor vem de .badge-vencido aplicada junto no
   markup, este seletor só posiciona/encolhe o overlay. */
.module-tile-badge {
    position: absolute;
    top: .5rem;
    right: .5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.2rem;
    height: 1.2rem;
    padding: 0 .3rem;
    font-size: .68rem;
    line-height: 1;
}

/* ---- Muro Pro (S14) ------------------------------------------------------------------------ */

/* Cadeado no canto do tile de módulo travado. Fica no mesmo canto do contador porque os dois nunca
   coexistem: tile travado não tem número para mostrar. O tile continua tocável — leva ao sheet de
   valor, não a um beco (estratégia §3.3). */
.module-tile-lock {
    position: absolute;
    top: .5rem;
    right: .5rem;
    display: inline-flex;
    color: var(--muted);
}

.module-tile-lock .icon { width: .95rem; height: .95rem; }

/* Tile travado: mesma silhueta, menos peso visual — o cadeado informa, a cor não precisa gritar. */
.module-tile.is-locked .module-tile-icon { background: var(--line); color: var(--muted); }
.module-tile.is-locked .module-tile-label { color: var(--ink-soft); }

/* Travado o tile vira <button> (abre o sheet em vez de navegar) — sem isto herdaria a fonte e o
   alinhamento padrão do agente, e ficaria visivelmente diferente dos vizinhos <a>. */
button.module-tile {
    width: 100%;
    font: inherit;
    text-align: center;
    cursor: pointer;
}

/* Bloco que substitui o conteúdo de uma tela/painel inteiramente Pro. */
.pro-muro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: 1.5rem 1rem;
    text-align: center;
}

.pro-muro-icone { margin: 0; color: var(--muted); }
.pro-muro-icone .icon { width: 1.75rem; height: 1.75rem; }
.pro-muro-titulo { margin: 0; font-family: var(--font-display); font-weight: 700; }
.pro-muro-texto { margin: 0; max-width: 34ch; font-size: .875rem; color: var(--ink-soft); }
.pro-muro .btn-secondary { margin-top: .35rem; }

/* Corpo do sheet de valor. */
.pro-gate { display: flex; flex-direction: column; gap: .75rem; }

.pro-gate-titulo {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
}

.pro-gate-titulo .icon { width: 1.15rem; height: 1.15rem; color: var(--muted); }
.pro-gate-texto { margin: 0; color: var(--ink-soft); }

/* Navegação entre documentos no topo do formulário — um bloco único, uma anatomia só.

   .vinculo-pai: abre um documento ligado (dado do registro; seta no FIM, para a direita).
   .vinculo-retorno: volta para a tela de onde o usuário veio (navegação; seta no INÍCIO, para a
   esquerda). Só existe com ?voltar= e empilha ACIMA das linhas de vínculo — o mesmo desenho nas
   duas evita o "chip desgarrado" que a pílula antiga criava; o sentido da seta é quem diferencia. */
.vinculo-pai {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    box-sizing: border-box;
    min-height: 48px;
    margin-bottom: .75rem;
    padding: .6rem .8rem;
    text-align: left;
    font-family: inherit;
    color: var(--ink);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: .7rem;
    cursor: pointer;
}

.vinculo-pai:active { background: var(--brand-tint); }
.vinculo-pai:focus { outline: 2px solid var(--brand); outline-offset: 2px; }
.vinculo-pai .icon { width: 1.15rem; height: 1.15rem; flex-shrink: 0; color: var(--muted); }

.vinculo-pai-texto {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    flex: 1;
    min-width: 0;
}

.vinculo-pai-rotulo {
    font-size: .9rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vinculo-pai-detalhe {
    font-size: .8rem;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* O bloco de navegação alinha por colunas: a seta da linha de retorno tem a coluna 1 só dela;
   ícone do módulo e descrição ficam nas colunas 2 e 3 em TODAS as linhas. Quem paga é a linha de
   vínculo irmã, indentada em um ícone + gap (1.15rem + .6rem) sobre o padding base de .8rem —
   e só quando a linha de retorno existe: sem ela não há coluna 1 e o seletor não pega. */
.vinculo-retorno ~ .vinculo-pai,
.vinculo-retorno ~ .vinculo-editavel .vinculo-pai { padding-left: 2.55rem; }

/* Linha de vínculo EDITÁVEL (ADR 0016) — o <VinculoPai> de largura total com uma coluna de ações
   irmã. Duas coisas que o wrapper precisa acertar:
   (a) o .vinculo-pai já carrega o margin-bottom que espaça as linhas empilhadas; aqui o wrapper
       assume esse espaçamento e zera o do filho, senão a linha ganha um degrau que as vizinhas
       não-editáveis não têm e a pilha desalinha;
   (b) align-items STRETCH, não center: com as ações empilhadas (is-stacked) a coluna irmã fica mais
       alta que o chip — dois botões de 44px contra uma linha de ~48px. Centralizar deixava o card
       flutuando no meio da linha, com os botões vazando para o vão de baixo: o espaçamento até a linha
       seguinte virava "overhang do botão + margin", fora de padrão. Esticando, o fundo do chip cresce
       até CONTER os botões (eles passam a morar dentro do card) e o único gap volta a ser o
       margin-bottom, igual ao das linhas vizinhas. O conteúdo do chip segue centrado (.vinculo-pai). */
.vinculo-editavel {
    display: flex;
    align-items: stretch;
    gap: .25rem;
    margin-bottom: .75rem;
}

/* flex:1 + min-width:0 é obrigatório, não estilo: o .vinculo-pai declara width:100% (ele nasceu
   sozinho na linha), e ao lado de uma coluna irmã esses 100% viram 100% MAIS a largura dos botões —
   a linha vaza para fora do painel, o "remover" sai da tela e a página ganha rolagem horizontal.
   O min-width:0 é o par obrigatório: sem ele o conteúdo com ellipsis impede o flex de encolher. */
.vinculo-editavel .vinculo-pai { flex: 1; min-width: 0; width: auto; margin-bottom: 0; }
.vinculo-editavel .cliente-card-actions { align-self: center; }

/* A seta do fim some na variação editável — não é economia de pixel: a linha perde ~1,75rem para as
   duas ações irmãs, e num celular de 360px isso comia justamente o total do documento, que é o que
   identifica QUAL orçamento está ligado. A affordance de "abre" não se perde: a linha inteira segue
   clicável e é o único elemento com o ícone do módulo à esquerda. */
.vinculo-editavel .vinculo-pai > .icon:last-child { display: none; }

/* E o detalhe passa a QUEBRAR em vez de cortar, só aqui. Nas linhas só-de-navegação o ellipsis está
   certo (a linha ocupa a largura toda e o corte é raro); com as duas ações irmãs sobram ~240px num
   celular de 360-420px, e o que se perdia no "…" era o TOTAL — justamente o que distingue dois
   orçamentos do mesmo cliente, que é a pergunta que a linha existe para responder. */
.vinculo-editavel .vinculo-pai-detalhe { white-space: normal; overflow: visible; }

/* Linha de vínculo AUSENTE (<VinculoVazio>) — mesma anatomia da editável (chip à esquerda, ação à
   direita FORA do card), mas o chip é só status: não há documento para abrir, então ele é um <div>,
   não um <button>. Borda tracejada e texto apagado dizem "ainda nada aqui" e o distinguem da linha
   preenchida logo acima; o cursor e o realce de toque do .vinculo-pai (que herda) são cancelados,
   senão a área toda pareceria clicável quando só o "+" à direita age. */
.vinculo-pai-vazio {
    cursor: default;
    color: var(--muted);
    border-style: dashed;
}
.vinculo-pai-vazio:active { background: var(--bg); }