/* ============================================================================
   PAINEL DO CLIENTE
   ----------------------------------------------------------------------------
   Herda todos os tokens e componentes de app.css. Aqui só vive o que é
   específico do portal: cabeçalho próprio, cartões espaçosos, timeline e as
   telas de autenticação.

   Regra: NÃO redefinir botão, input, card, badge ou modal aqui. O visual é
   "portal acolhedor" — mais respiro e menos densidade que o painel interno —
   mas os controles são exatamente os mesmos do resto do sistema.
   ============================================================================ */

.cliente-body {
    background: var(--fundo);
    min-height: 100vh;
}

/* ---------- Cabeçalho ---------- */

.cliente-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-4);
    height: var(--altura-topbar);
    padding: 0 var(--esp-8);
    background: var(--superficie);
    border-bottom: var(--borda-largura) solid var(--borda);
}

.cliente-marca img {
    height: 32px;
    display: block;
}

.cliente-header-usuario {
    display: flex;
    align-items: center;
    gap: var(--esp-5);
}

.cliente-header-nome {
    font-weight: var(--peso-forte);
    font-size: var(--fs-md);
    color: var(--texto);
}

.cliente-header-sair {
    display: inline-flex;
    align-items: center;
    gap: var(--esp-2);
    height: var(--altura-sm);
    padding: 0 var(--esp-3);
    border-radius: var(--raio-md);
    color: var(--texto-suave);
    font-weight: var(--peso-medio);
    font-size: var(--fs-md);
    transition: color var(--transicao-rapida), background var(--transicao-rapida);
}

.cliente-header-sair:hover {
    color: var(--laranja);
    background: var(--superficie-suave);
}

/* ---------- Conteúdo ---------- */

.cliente-conteudo {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--esp-10) var(--esp-6) var(--esp-20);
}

/* O cartão do portal é mais espaçoso que o .card do painel — é uma decisão
   deliberada de densidade, não uma variação acidental de padding. */
.cliente-card {
    background: var(--superficie);
    border: var(--borda-largura) solid var(--borda);
    border-radius: var(--raio-xl);
    box-shadow: var(--sombra-sm);
    padding: var(--esp-8);
    margin-bottom: var(--esp-6);
}

.cliente-card:last-child {
    margin-bottom: 0;
}

.cliente-card-principal {
    background: linear-gradient(135deg, var(--superficie) 0%, #fff7f0 100%);
}

.cliente-rotulo {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: var(--fs-sm);
    font-weight: var(--peso-forte);
    color: var(--texto-suave);
    margin: 0 0 var(--esp-2);
}

.cliente-secao-titulo {
    font-size: var(--fs-xl);
    margin: 0 0 var(--esp-5);
}

.cliente-status-linha {
    margin: var(--esp-4) 0;
}

/* Mesma altura e raio da .badge global, com mais respiro horizontal porque
   aqui ela é o elemento de destaque da tela, não um marcador de lista. */
.cliente-status-badge {
    display: inline-flex;
    align-items: center;
    height: var(--altura-sm);
    padding: 0 var(--esp-5);
    border-radius: var(--raio-full);
    font-weight: var(--peso-forte);
    font-size: var(--fs-md);
    background: var(--superficie-suave);
    color: var(--texto);
}

.cliente-status-producao,
.cliente-status-medicao {
    background: var(--laranja-fundo);
    color: var(--laranja-escuro);
}

.cliente-status-concluido {
    background: var(--sucesso-fundo);
    color: var(--sucesso);
}

.cliente-status-cancelado {
    background: var(--perigo-fundo);
    color: var(--perigo);
}

.cliente-proxima-etapa,
.cliente-estado-vazio p,
.cliente-vazio-linha {
    color: var(--texto-suave);
    margin: 0;
}

/* ---------- Seletor de projeto ---------- */

.cliente-seletor-projeto {
    display: flex;
    gap: var(--esp-2);
    flex-wrap: wrap;
    margin-bottom: var(--esp-5);
}

.cliente-chip-projeto {
    display: inline-flex;
    align-items: center;
    height: var(--altura-md);
    padding: 0 var(--esp-4);
    border-radius: var(--raio-full);
    background: var(--superficie);
    border: var(--borda-largura) solid var(--borda);
    font-weight: var(--peso-medio);
    font-size: var(--fs-md);
    color: var(--texto);
    transition: background var(--transicao-rapida), border-color var(--transicao-rapida), color var(--transicao-rapida);
}

.cliente-chip-projeto:hover {
    border-color: var(--texto);
}

.cliente-chip-projeto.ativo {
    background: var(--laranja);
    border-color: var(--laranja);
    color: #fff;
}

/* ---------- Timeline ---------- */

.cliente-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.cliente-timeline-item {
    display: flex;
    gap: var(--esp-4);
    padding-bottom: var(--esp-6);
    position: relative;
}

.cliente-timeline-item:last-child {
    padding-bottom: 0;
}

.cliente-timeline-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 5px;
    top: var(--esp-4);
    bottom: 0;
    width: 2px;
    background: var(--borda);
}

.cliente-timeline-marcador {
    width: 12px;
    height: 12px;
    border-radius: var(--raio-full);
    background: var(--borda);
    margin-top: var(--esp-1);
    flex-shrink: 0;
}

.cliente-timeline-concluido .cliente-timeline-marcador {
    background: var(--laranja);
}

.cliente-timeline-cancelado .cliente-timeline-marcador {
    background: var(--perigo);
}

.cliente-timeline-titulo {
    margin: 0 0 2px;
    font-weight: var(--peso-forte);
    font-size: var(--fs-md);
    color: var(--texto);
}

.cliente-timeline-data {
    margin: 0;
    font-size: var(--fs-base);
    color: var(--texto-suave);
}

/* ---------- Autenticação ---------- */

.cliente-auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--esp-6);
}

.cliente-auth-card {
    background: var(--superficie);
    border: var(--borda-largura) solid var(--borda);
    border-radius: var(--raio-xl);
    box-shadow: var(--sombra-lg);
    padding: var(--esp-10);
    max-width: 400px;
    width: 100%;
    text-align: center;
}

.cliente-auth-marca {
    display: inline-block;
    margin-bottom: var(--esp-6);
}

.cliente-auth-logo {
    height: 36px;
    display: block;
}

.cliente-auth-titulo {
    font-size: var(--fs-2xl);
    margin: 0;
}

.cliente-auth-sub {
    color: var(--texto-suave);
    font-size: var(--fs-md);
    margin: var(--esp-2) 0 var(--esp-6);
}

.cliente-auth-icone {
    display: inline-flex;
    color: var(--sucesso);
    margin-bottom: var(--esp-3);
}

.cliente-auth-icone-alerta {
    color: var(--aviso);
}

.cliente-auth-nota {
    color: var(--texto-suave);
    font-size: var(--fs-base);
    margin: var(--esp-3) 0 0;
}

.cliente-auth-links {
    margin-top: var(--esp-5);
    font-size: var(--fs-md);
}

.cliente-auth-links a {
    color: var(--laranja);
    font-weight: var(--peso-medio);
}

/* honeypot: precisa ficar fora da tela sem `display:none`, senão alguns
   bots detectam que o campo está escondido e simplesmente o ignoram. */
.campo-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.campo-ajuda {
    color: var(--texto-suave);
    font-size: var(--fs-sm);
    margin: var(--esp-1) 0 0;
}

/* ---------- Formulário ---------- */
/* Os inputs seguem o padrão global (app.css). Aqui só o alinhamento do
   bloco e o peso do label, que no portal é mais forte para leitura rápida. */

.cliente-form {
    text-align: left;
}

.cliente-form .campo {
    margin-bottom: var(--esp-4);
}

.cliente-form label {
    display: block;
    font-weight: var(--peso-forte);
    font-size: var(--fs-md);
    color: var(--texto);
    margin-bottom: var(--esp-2);
}

/* A ação principal do portal ocupa a largura do formulário. Antes isso
   estava embutido em .btn-grande, que conflitava com a definição da landing. */
.cliente-form .btn,
.cliente-auth-card .btn,
.cliente-body .btn-grande {
    width: 100%;
    margin-top: var(--esp-2);
}

/* ---------- Mensagens ---------- */
/* Some por padrão para não ocupar espaço vazio no formulário; o JS e o PHP
   acrescentam .visivel quando há algo a dizer. */

.cliente-mensagem {
    display: none;
    padding: var(--esp-3) var(--esp-4);
    border: var(--borda-largura) solid transparent;
    border-radius: var(--raio-md);
    font-size: var(--fs-md);
    margin-bottom: var(--esp-4);
    text-align: left;
}

.cliente-mensagem.visivel {
    display: block;
}

.cliente-mensagem-erro {
    background: var(--perigo-fundo);
    border-color: var(--perigo-borda);
    color: var(--perigo);
}

.cliente-mensagem-sucesso {
    background: var(--sucesso-fundo);
    border-color: var(--sucesso-borda);
    color: var(--sucesso);
}

.cliente-mensagem-debug {
    background: var(--superficie-suave);
    border-color: var(--borda);
    color: var(--texto);
    word-break: break-all;
}

/* ---------- Mobile ---------- */

@media (max-width: 768px) {
    .cliente-header {
        padding: 0 var(--esp-4);
    }

    .cliente-marca img {
        height: 26px;
    }

    .cliente-header-usuario {
        gap: var(--esp-3);
    }

    /* Em tela estreita o nome compete com o botão de sair pelo espaço —
       o painel já é do próprio cliente, então o nome é o que sai. */
    .cliente-header-nome {
        display: none;
    }

    .cliente-conteudo {
        padding: var(--esp-6) var(--esp-4) var(--esp-16);
    }

    .cliente-card {
        padding: var(--esp-5);
    }

    .cliente-auth-shell {
        align-items: flex-start;
        padding: var(--esp-10) var(--esp-4) var(--esp-6);
    }

    .cliente-auth-card {
        padding: var(--esp-6);
    }

    .cliente-auth-titulo {
        font-size: var(--fs-xl);
    }
}