/* ==========================================================================
   Estilos dos componentes declarados em components.js
   ========================================================================== */

/* --- Navegacao ---------------------------------------------------------- */

.nav-topo {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
    height: var(--nav-altura);
    background: rgba(244, 241, 234, .82);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--sentinela-12);
    animation: entrada var(--medio) both;
}

.nav-conteudo {
    height: 100%;
    max-width: var(--largura-max);
    margin: 0 auto;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.nav-marca { display: flex; align-items: center; }

.nav-desktop { display: none; gap: 2px; }

.nav-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: var(--raio-sm);
    color: var(--sentinela-60);
    font-size: .9rem;
    font-weight: 500;
    transition: color var(--rapido), background var(--rapido);
}

.nav-link:hover { color: var(--sentinela); background: var(--sentinela-06); }

.nav-link.ativo {
    color: var(--neurora);
    background: var(--neurora-12);
    font-weight: 600;
}

.nav-usuario { display: flex; align-items: center; gap: 10px; }

.nav-avatar {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--sentinela);
    color: var(--areia);
    font-family: Sora, sans-serif;
    font-weight: 700;
    font-size: .9rem;
}

.nav-sair {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--sentinela-12);
    border-radius: var(--raio-sm);
    background: transparent;
    color: var(--sentinela-60);
    cursor: pointer;
    transition: color var(--rapido), border-color var(--rapido);
}

.nav-sair:hover { color: var(--erro); border-color: var(--erro); }

/* Navegacao inferior no celular */
.nav-inferior {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 40;
    display: flex;
    justify-content: space-around;
    padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
    background: rgba(244, 241, 234, .93);
    backdrop-filter: blur(16px);
    border-top: 1px solid var(--sentinela-12);
}

.nav-inferior .nav-link {
    flex-direction: column;
    gap: 3px;
    padding: 6px 8px;
    font-size: .66rem;
    font-weight: 600;
    background: none;
}

.nav-inferior .nav-link.ativo { background: none; }

@media (min-width: 860px) {
    .nav-desktop { display: flex; }
    .nav-inferior { display: none; }
    .pagina { padding-bottom: 60px; }
}

/* --- Rodape ------------------------------------------------------------- */

.rodape {
    margin-top: 44px;
    padding: 26px 0 calc(84px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--sentinela-12);
}

.rodape-conteudo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.rodape p { margin: 0; }

@media (min-width: 860px) {
    .rodape { padding-bottom: 26px; }
    .rodape-conteudo { flex-direction: row; justify-content: space-between; }
}

/* --- Avisos flutuantes -------------------------------------------------- */

.pilha-avisos {
    position: fixed;
    left: 50%;
    bottom: calc(88px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(94vw, 420px);
}

.aviso-flutuante {
    padding: 13px 18px;
    border-radius: var(--raio-sm);
    background: var(--sentinela);
    color: var(--areia);
    font-size: .92rem;
    box-shadow: var(--sombra-lg);
    opacity: 0;
    transform: translateY(12px) scale(.98);
    transition: opacity var(--medio), transform var(--medio);
}

.aviso-flutuante.visivel { opacity: 1; transform: none; }
.aviso-flutuante.aviso-sucesso { background: var(--sucesso); }
.aviso-flutuante.aviso-erro { background: var(--erro); }
.aviso-flutuante.aviso-alerta { background: var(--alerta); }

@media (min-width: 860px) {
    .pilha-avisos { bottom: 26px; right: 26px; left: auto; transform: none; }
}

/* --- Consumo ------------------------------------------------------------ */

.consumo-item { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.consumo-item:last-child { margin-bottom: 0; }

/* --- Planos ------------------------------------------------------------- */

.cartao-plano {
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform var(--medio), box-shadow var(--medio);
}

.cartao-plano:hover { transform: translateY(-3px); }

.cartao-plano.atual { border-color: var(--neurora); box-shadow: var(--sombra); }

.selo-atual {
    position: absolute;
    top: -10px;
    right: 18px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--neurora);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.preco-plano {
    font-family: "JetBrains Mono", monospace;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
    margin: 10px 0 4px;
}

.preco-plano small { font-size: .8rem; font-weight: 500; color: var(--sentinela-60); }

.beneficios { list-style: none; margin: 16px 0; padding: 0; flex: 1; }

.beneficios li {
    position: relative;
    padding: 5px 0 5px 24px;
    font-size: .89rem;
    color: var(--sentinela-80);
}

.beneficios li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 12px;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--neurora-24);
}

/* --- Tabelas ------------------------------------------------------------ */

.tabela-envolvida { overflow-x: auto; margin: 0 -20px; padding: 0 20px; }

table.tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
    min-width: 460px;
}

table.tabela th {
    text-align: left;
    padding: 10px 12px;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--sentinela-60);
    border-bottom: 1px solid var(--sentinela-12);
    white-space: nowrap;
}

table.tabela td {
    padding: 12px;
    border-bottom: 1px solid var(--sentinela-06);
}

table.tabela tbody tr { transition: background var(--rapido); }
table.tabela tbody tr:hover { background: var(--sentinela-06); }
table.tabela td.numero { text-align: right; font-family: "JetBrains Mono", monospace; }

/* --- Grafico de barras simples ------------------------------------------ */

.grafico-barras {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    height: 150px;
    padding-top: 12px;
}

.barra-grupo {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    height: 100%;
    justify-content: flex-end;
}

.barra-par { display: flex; align-items: flex-end; gap: 3px; width: 100%; height: 100%; }

.barra {
    flex: 1;
    border-radius: 5px 5px 0 0;
    min-height: 3px;
    transform-origin: bottom;
    animation: crescer var(--lento) var(--easing) both;
}

.barra-entrada { background: linear-gradient(180deg, #4fc191, var(--sucesso)); }
.barra-saida { background: linear-gradient(180deg, #6fb8fb, var(--neurora)); }

.barra-rotulo { font-size: .66rem; color: var(--sentinela-60);
                font-family: "JetBrains Mono", monospace; }

@keyframes crescer { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.legenda { display: flex; gap: 16px; justify-content: center; margin-top: 12px;
           font-size: .78rem; color: var(--sentinela-60); }
.legenda span { display: flex; align-items: center; gap: 6px; }
.legenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* --- Abas --------------------------------------------------------------- */

.abas {
    display: flex;
    gap: 4px;
    padding: 4px;
    margin-bottom: 18px;
    background: var(--sentinela-06);
    border-radius: var(--raio-sm);
    overflow-x: auto;
}

.aba {
    flex: 1;
    padding: 9px 16px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--sentinela-60);
    font-family: inherit;
    font-size: .88rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--rapido), color var(--rapido);
}

.aba.ativa { background: #fff; color: var(--sentinela); box-shadow: var(--sombra-sm); }

.painel-aba { animation: surgir var(--medio) both; }

/* --- Legal -------------------------------------------------------------- */

.texto-legal { max-width: 760px; }
.texto-legal h2 { margin-top: 28px; }
.texto-legal p, .texto-legal li { color: var(--sentinela-80); }
.texto-legal ul { padding-left: 20px; }
.texto-legal li { margin-bottom: 6px; }