/* ============================================================
   cliente.css — Embelezamento da Area do Cliente (Direcao C)
   Carregado DEPOIS do style.css. Refina sombras, espacamento,
   cantos e profundidade. Funciona em tema claro e escuro
   (usa as variaveis ja definidas no style.css).
   ============================================================ */

/* Variaveis extras de profundidade (claro) */
:root {
    --sombra-suave: 0 1px 3px rgba(16,24,40,0.06), 0 1px 2px rgba(16,24,40,0.04);
    --sombra-media: 0 4px 12px rgba(16,24,40,0.08), 0 2px 4px rgba(16,24,40,0.04);
    --sombra-forte: 0 12px 28px rgba(16,24,40,0.12), 0 4px 8px rgba(16,24,40,0.06);
    --raio-cartao: 16px;
    --raio-painel: 14px;
    --transicao: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
html[data-tema="escuro"] {
    --sombra-suave: 0 1px 3px rgba(0,0,0,0.3);
    --sombra-media: 0 4px 14px rgba(0,0,0,0.35);
    --sombra-forte: 0 14px 34px rgba(0,0,0,0.5);
}

/* ---- Fundo com leve profundidade ---- */
body {
    background:
        radial-gradient(900px 380px at 100% -5%, rgba(148,211,23,0.06), transparent 60%),
        var(--cor-fundo);
    background-attachment: fixed;
}

/* ---- Barra do topo do cliente ---- */
.barra-topo {
    backdrop-filter: saturate(140%) blur(6px);
    box-shadow: var(--sombra-suave);
    border-bottom: 1px solid var(--cor-borda);
}
.menu a {
    border-radius: 10px;
    transition: var(--transicao);
    font-weight: 500;
}
.menu a.ativo {
    background: var(--cor-marca);
    color: #1a1a1a;
}
html[data-tema="escuro"] .menu a.ativo { color: #14180a; }

/* ---- Conteudo: respiro generoso ---- */
.conteudo { padding-top: 30px; padding-bottom: 60px; }
.conteudo > h1 {
    font-size: 1.9rem;
    letter-spacing: -0.02em;
    margin-bottom: 4px;
}

/* ---- Cartoes premium ---- */
.conteudo .cartao {
    border: 1px solid var(--cor-borda);
    border-top: 1px solid var(--cor-borda);
    border-radius: var(--raio-cartao);
    box-shadow: var(--sombra-suave);
    transition: var(--transicao);
    padding: 22px 24px;
}
.conteudo .cartao:hover { box-shadow: var(--sombra-media); }
.conteudo .cartao h2 {
    font-size: 1.15rem;
    letter-spacing: -0.01em;
}

/* ---- Paineis (cards de numero) ---- */
.paineis { gap: 16px; }
.painel {
    border-radius: var(--raio-painel);
    border: 1px solid var(--cor-borda);
    box-shadow: var(--sombra-suave);
    transition: var(--transicao);
    padding: 18px 20px;
    position: relative;
    overflow: hidden;
}
.painel::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--cor-marca);
    opacity: 0;
    transition: var(--transicao);
}
a.painel:hover {
    box-shadow: var(--sombra-media);
    transform: translateY(-2px);
}
a.painel:hover::before { opacity: 1; }
.painel-num {
    font-size: 2rem;
    letter-spacing: -0.03em;
    line-height: 1.1;
}
.painel-rotulo {
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    font-weight: 600;
}

/* ---- Selos mais refinados ---- */
.selo {
    border-radius: 999px;
    padding: 3px 10px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* ---- Botoes com toque premium ---- */
.botao {
    border-radius: 11px;
    font-weight: 600;
    transition: var(--transicao);
}
.botao-principal {
    box-shadow: 0 2px 8px rgba(148,211,23,0.35);
}
.botao-principal:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(148,211,23,0.45);
}
.botao-discreto:hover { transform: translateY(-1px); }

/* ---- Alertas mais suaves ---- */
.alerta {
    border-radius: 12px;
    box-shadow: var(--sombra-suave);
    padding: 14px 16px;
}

/* ---- Links de lista (faturas/chamados/veiculos na dashboard) ---- */
.conteudo .cartao a[href]:not(.botao):hover {
    background: rgba(148,211,23,0.06);
    border-radius: 8px;
}

/* ---- Tabelas ---- */
.tabela-rolavel { border-radius: 12px; overflow: hidden; }

/* ---- Animacao de entrada suave ---- */
@keyframes surgir {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.conteudo > h1,
.conteudo > .alerta,
.conteudo .paineis,
.conteudo > section {
    animation: surgir 320ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
.conteudo .paineis { animation-delay: 40ms; }
.conteudo > section:nth-of-type(2) { animation-delay: 80ms; }
.conteudo > section:nth-of-type(3) { animation-delay: 120ms; }

/* respeita quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
    .conteudo > h1, .conteudo > .alerta, .conteudo .paineis, .conteudo > section { animation: none; }
    a.painel:hover, .botao-principal:hover, .botao-discreto:hover { transform: none; }
}