* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    color: #1f2937;
    background: #fbf8f5;
}

.container {
    max-width: 1100px;
    margin: auto;
    padding: 0 24px;
}

/* HEADER */
.header {
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 3px 10px rgba(0,0,0,0.05);
    background: white;
    border-bottom: 1px solid #eee;
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 24px; /* 🔥 aqui está o segredo */
}

/* FAIXA DE CONTEXTO: conta / colaborador logado */
.conta-bar {
    background: #fffaf0;
    border-bottom: 1px solid #f0e4cc;
}

.conta-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 20px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 5px 24px;
    font-size: 0.78rem;
    color: #6b5a35;
}

.conta-bar-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.conta-bar-item svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

@media (max-width: 700px) {
    .conta-bar-inner {
        font-size: 0.72rem;
        padding: 5px 16px;
    }
}

.logo img {
    height: 56px;
}



/* MENU DESKTOP */
.menu {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* 🔥 separa o botão Entrar */
.menu .btn {
    margin-left: 25px;
}

/* Opções do menu que ainda não têm página própria (Financeiro,
   Parâmetros) - mesmo texto/posição dos demais itens, mas sem
   link e visualmente "apagadas", igual aos cards "Em breve" do
   dashboard. */
.menu-item-em-breve {
    color: #9ca3af;
    cursor: default;
}




/* HAMBURGER */
.hamburger {
    display: none;
    font-size: 26px;
    cursor: pointer;
}

/* Rótulo de texto do "Início"/"Perfil" (ver .menu-icone-item) -
   só aparece na gaveta mobile; no menu desktop eles continuam
   como botão circular só com ícone. */
.menu-icone-texto {
    display: none;
}

/* OVERLAY */
.menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1500;
}

@media (max-width: 768px) {

    /* 🔥 hamburger fica alinhado com a linha da logo, não com o
       topo cru da viewport - senão ele cai por cima da faixa de
       conta/usuário/cargo (.conta-bar), que fica ACIMA dessa
       linha quando o usuário está logado.

       header-container é a classe real dessa linha em TODOS os
       templates (a landing ainda soma "container" a ela, mas as
       telas internas - base_erp.html - só têm "header-container").
       Com o seletor errado (".container", que nas telas internas
       não existe), o position:relative não tinha efeito ali, e o
       hamburguer (position:absolute) acabava usando o .header
       inteiro (sticky, também vira um bloco de posicionamento)
       como referência - top:50% saía relativo à faixa de conta +
       logo somadas, não só à linha da logo, e por isso ficava mais
       pra cima do que devia. */
    .header .header-container {
        position: relative;
    }

    /* .hamburger fica com position:absolute (ver embaixo), não
       ocupa espaço no fluxo do flex - se a logo não encolher, ela
       cresce por baixo do hamburguer, que fica boiando por cima em
       vez de ficar ao lado. height menor aqui garante espaço livre
       na faixa mesmo em telas estreitas, independente da proporção
       largura/altura da arte da logo. */
    .logo img {
        height: 44px;
    }

    .hamburger {
        display: block;

        position: absolute;
        top: 50%;
        right: 20px;
        transform: translateY(-50%);

        z-index: 3001; /* acima de tudo */
    }

    .menu {
        position: fixed;
        top: 0;
        right: -280px;
        width: 260px;
        height: 100%;
        background: white;

        display: flex;
        flex-direction: column;

        align-items: flex-end; /* 🔥 garante direita */
        justify-content: flex-start;

        /* padding-top folgado de propósito: o hamburguer/✕ fica
           alinhado com a linha da logo, e essa linha só começa
           depois da faixa de conta/usuário (.conta-bar), cuja
           altura varia (pode quebrar em 2 linhas). Um valor
           justo aqui volta a sobrepor o primeiro item quando a
           faixa é mais alta. */
        padding: 150px 20px 40px;
        gap: 25px;
        overflow-y: auto; /* mais itens no menu podem não caber em telas baixas */

        transition: 0.3s ease;
        z-index: 2000;
        box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    }


    .menu .btn {
        margin-top: 20px;
    }


    .menu.active {
        right: 0;
    }

    .menu-overlay.active {
        display: block;
    }

    /* 🔥 FORÇA alinhamento correto */
    .menu a {
        display: block;
        width: 100%;
        text-align: right;
        color: #1f2937; /* sem isso, o link usa a cor padrão azul
                            do navegador - só .dropdown-menu a
                            definia cor própria, por isso Minha
                            Conta/Segurança/Sair destoavam. */

    }

    /* Mesmo alinhamento dos itens normais, mas com a cor
       "apagada" de .menu-item-em-breve (não é um <a>, então não
       cai na regra ".menu a" acima). */
    .menu .menu-item-em-breve {
        display: block;
        width: 100%;
        text-align: right;
        color: #9ca3af;
    }

    /* "Início" vira item de texto normal, igual aos demais - o
       ícone some e o rótulo (.menu-icone-texto) aparece.

       Escopo com ".menu" na frente de propósito: .menu-icone-item
       sozinho empata em especificidade com .profile-button (uma
       classe cada) - como .profile-button vem depois no arquivo,
       ela ganhava o empate e continuava aparecendo por cima,
       círculo e tudo. ".menu .menu-icone-item" tem uma classe a
       mais, então passa a ganhar sempre, não importa a ordem. */
    .menu .menu-icone-item {
        width: 100%;
        height: auto;
        padding: 0;
        border-radius: 0;
        background: none;
        color: #1f2937;
        font: inherit;
        justify-content: flex-end;
    }

    /* No desktop "Início" fica perto do perfil (ordem natural do
       HTML) - só na gaveta mobile ele deve ser o primeiro item.
       order:-1 muda a ordem visual sem duplicar/mover nada no
       template. */
    .menu-icone-item--inicio {
        order: -1;
    }

    .menu .menu-icone-item:hover {
        background: none;
        transform: none;
    }

    .menu-icone-item svg {
        display: none;
    }

    .menu-icone-texto {
        display: inline;
    }

    /* Botão "Perfil" some por completo - os itens que ficavam
       escondidos atrás dele (Minha Conta/Segurança/Sair) passam
       a aparecer sempre, direto na gaveta, como qualquer outro
       item de menu (Serviços, Clientes...), sem precisar tocar
       em nada pra abrir. */
    .menu #toggle-conta {
        display: none;
    }

    .dropdown-conta {
        width: 100%;
    }

    .menu .dropdown-menu {
        display: flex;
        position: static;
        width: 100%;
        margin: 0;
        padding: 0;
        gap: 25px; /* mesmo espaçamento dos demais itens do .menu */
        box-shadow: none;
        border: none;
        border-radius: 0;
    }

    /* .dropdown-menu a tinha padding/raio próprios (pensados pro
       cartão flutuante do desktop) - isso deslocava o texto pra
       dentro em relação aos demais itens do menu, que não têm
       padding nenhum. Zera pra alinhar certinho com o resto. */
    .menu .dropdown-menu a {
        padding: 0;
        border-radius: 0;
    }
}

a {
    text-decoration: none;
}





.link-helper {
    display: block;
    text-align: center;
    margin-top: 15px;
    font-size: 13px;
    color: #6b7280;
    transition: 0.2s;
}

.link-helper:hover {
    color: #C79A3B;
}








/* HERO */
.hero {
    background: linear-gradient(135deg, #0f3d3e, #1c6b6b) !important;
    color: white;
    padding: 120px 0px;
    text-align: center;
}

.hero h1 {
    font-size: 42px;
}

.hero p {
    margin-top: 15px;
    font-size: 18px;
    color: #dbeafe;
}

.hero-buttons {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap; /* 🔥 importante */
    align-items: center;
    

}

/* BOTÕES */
.hero-buttons .btn {
    min-width: 180px;
    text-align: center;
    white-space: nowrap;
}


.hero-form {
    display: inline;
}

button.btn {
    font-family: inherit;
/*     font-size: inherit; */
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}



@media (max-width: 600px) {

    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }

    /* 🔥 aplica para TODOS */
    .hero-buttons .btn {
        width: 100%;
        max-width: 300px;
    }

    /* 🔥 remove qualquer limitação do form */
    .hero-form {
        display: contents;
    }

}








/* BOTÃO BASE (TODOS) */
.btn {
    display: inline-flex;          /* 🔥 chave */
    align-items: center;           /* 🔥 centraliza */
    justify-content: center;

    padding: 12px 28px;
    border-radius: 30px;

    font-family: inherit;
    font-size: inherit;
    line-height: 1;

    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: 0.2s;
}




/* BOTÃO PADRÃO (DOURADO) */
.btn-primary {
    background: #C79A3B;
    color: white;
}

.btn-primary:hover {
    background: #b6892f;
}


/* WHATSAPP */
.btn-whats {
    background: #25D366;
    color: white;
}

.btn-whats:hover {
    background: #1ebe5d;
}











/* SECTIONS */
.section {
    padding: 80px 0;
    scroll-margin-top: 90px;
}


.section .container {
    display: flex;
    flex-direction: column;
}


.section h2 {
    text-align: center;
    margin-bottom: 25px;
}

.section.alt {
    background: #eef2f7;
}


/* CARDS */
.cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px; /* 🔥 volta isso */
    width: 100%;
    text-align: center;
    
}

.card {
    background: white;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: 0.2s;
    gap: 20px;
    width: 100%;
}

.card h3 {
    margin-bottom: 12px;
}

.card p {
    line-height: 1.5;
}

.card:hover {
    transform: translateY(-5px);
}




@media (max-width: 900px) {
    .cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 500px) {
    .cards {
        grid-template-columns: 1fr;
    }
}



.autoridade {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 🔥 5 por linha */
    gap: 20px;
    text-align: center;
}

.autoridade .item {
    text-align: center;
    max-width: 200px;
    padding: 10px;

}

.autoridade h3 {
    font-size: 32px;
    color: #C79A3B;
    margin-bottom: 10px;
    font-weight: 700;
}

.autoridade p {
    font-size: 14px;
    color: #555;
}


@media (max-width: 768px) {
    .autoridade {
        grid-template-columns: 1fr;
    }
    .autoridade .item {
        text-align: center;
        max-width: 300px;
        margin: 0 auto; /* 🔥 centraliza o bloco */
    }  
}






/* PLANOS */
.planos {
    max-width: 700px;
    margin: 0 auto;
    grid-template-columns: repeat(2, 1fr);
}

.plano {
    text-align: left; /* 🔥 agora alinhado */
    padding: 30px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* PLANOS RESPONSIVO */
@media (max-width: 600px) {

    .planos {
        grid-template-columns: 1fr;
        max-width: 350px; /* deixa bonito centralizado */
        margin: 0 auto;
    }

    .plano {
        width: 100%;
    }
}










.plano .btn-primary {
    margin-top: auto; /* 🔥 joga o botão pro final */
    text-align: center;
}

.plano .preco {
    font-size: 32px;
    font-weight: 700;
    color: #1f2937;
    margin: 0px 0;
}

.plano small {
    display: block;
    margin-bottom: 0px;
    color: #6b7280;
}

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

.beneficios li {
    margin-bottom: 10px;
    color: #374151;
}

/* DESTAQUE */
.plano.destaque {
    border: 2px solid #C79A3B;
    transform: scale(1.05);
}

.plano .placeholder {
    display: block;
    height: 20px; /* 🔥 mesmo espaço do small do anual */
    margin-bottom: 0px;
}





.plans {
    display: flex;
    gap: 10px;
    margin: 20px 0;
}

.plan-card {
    flex: 1;
    background: #f9f9f9;
    border: 1px solid #c8c8c8;
    padding: 15px;
    text-align: center;
    opacity: 0.6;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.2s;
}

.plan-card.selected {
    border-color: #C79A3B;
    background: #fffaf0;
    opacity: 1;
}

.plan-card.destaque {
    border: 2px solid #C79A3B;
}

.plan-title {
    font-weight: 600;
    display: block;
}

.plan-price {
    font-size: 20px;
    font-weight: bold;
    white-space: nowrap;

}


.plan-sub {
    display: block;
    font-size: 14px;
    margin-top: 4px;
    color: #6b7280;
}

.plan-tag {
    display: block;
    font-size: 12px;
    color: #C79A3B;
    margin-top: 2px;
}

.assinatura-info {
    margin-top: 20px;
    font-size: 13px;
    color: #6b7280;
    text-align: center; /* 🔥 aqui */
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}








/* CTA FINAL */
.section.cta-final {
    background: linear-gradient(135deg, #1F2F4A, #274B96);

    color: white;
    text-align: center;
}

.btn-cta-final {
    border: 1px solid #C79A3B;
    padding: 12px 28px;
    border-radius: 30px;
    color: #C79A3B;
    text-decoration: none;
}



/* FOOTER */
/* ===== FOOTER ===== */
/* FOOTER */
/* FOOTER */
.footer {
    background: #1c1f23;
    color: #ccc;
    padding: 40px 20px;
    text-align: center;
}

/* ENDEREÇO */
.footer-address {
    font-size: 14px;
    margin-bottom: 20px;
}

/* BOTÕES */
.footer-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.footer-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 14px;
    background: rgba(255,255,255,0.05);
    color: #ccc;
    transition: 0.3s;
}

.footer-btn svg {
    width: 16px;
    height: 16px;
}

/* HOVER */
.footer-btn:hover {
    background: #C79A3B;
    color: white;
}

/* WHATSAPP DESTACADO */
.footer-btn.whatsapp {
    background: #25D366;
    color: white;
}

.footer-btn.whatsapp:hover {
    background: #1ebe5d;
}

/* FINAL */
.footer-bottom {
    margin-top: 25px;
    font-size: 12px;
    color: #777;
}





/* WHATSAPP FIXO */
.whatsapp {
    position: fixed;
    bottom: 25px;
    right: 25px;
    background: #25D366;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index: 9999;
    animation: pulse 2s infinite;

}

.whatsapp:hover {
    animation: none;
    transform: scale(1.1);
}

/* ANIMAÇÃO */
@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }
    70% {
        transform: scale(1.08);
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

.whatsapp img {
    width: 50px;
}

/* RESPONSIVO */
@media (max-width: 768px) {


    .cards {
        flex-direction: column;
        align-items: center; /* 🔥 ISSO RESOLVE */
    }
}






/* MODAL */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

/* CAIXA */
.modal-box {
    background: white;
    padding: 24px;
    border-radius: 12px;
    width: 100%;
    max-width: 400px;
    position: relative;
    animation: fadeUp 0.3s ease;
}

/* BOTÃO FECHAR */
.modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    border: none;
    background: none;
    font-size: 22px;
    cursor: pointer;
}

/* FORM */
.modal-box form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
}

/* INPUTS */
.modal-box input {
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
}

/* BOTÃO FULL */
.btn-full {
    width: 100%;
    text-align: center;
}

/* LINK */
.modal-box .link {
    text-align: center;
    font-size: 13px;
    color: #6b7280;
    text-decoration: none;
}

.modal-box .link:hover {
    text-decoration: underline;
}


.modal-lg {
    max-width: 500px;
}

.modal-box select {
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #ddd;
}


/* ANIMAÇÃO */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}






#redefinir-feedback p {
    padding: 10px;
    border-radius: 6px;
    margin: 10px 0;
}
/* ERRO */
#redefinir-feedback .erro {
    background: #fee2e2;
    color: #b91c1c;
}

/* SUCESSO */
#redefinir-feedback .sucesso {
    background: #dcfce7;
    color: #166534;
}




#login-feedback p {
    padding: 10px;
    border-radius: 6px;
    margin: 10px 0;
}

#login-feedback .erro {
    background: #fee2e2;
    color: #b91c1c;
}




.prints {
    text-align: center;
}

.prints-sub {
    max-width: 600px;
    margin: 0 auto 40px;
    color: #6b7280;
}

.prints-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 🔥 força 2 por linha */
    gap: 30px;
}

.print-item {
    background: white;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    transition: 0.2s;
}

.print-item:hover {
    transform: translateY(-5px);
}

.print-item img {
    width: 100%;
    border-radius: 8px;
}

.print-item span {
    display: block;
    margin-top: 10px;
    font-weight: 600;
}

@media (max-width: 768px) {
    .prints-grid {
        grid-template-columns: 1fr;
    }
}






/* =========================================
   MODAL ASSINATURA
========================================= */

#assinar-modal .modal-box,
#pagar-fatura-modal .modal-box {

    width: 95%;
    max-width: 520px;

    max-height: 92vh;

    overflow-y: auto;

    scrollbar-width: thin;

}

/* SCROLL */
#assinar-modal .modal-box::-webkit-scrollbar,
#pagar-fatura-modal .modal-box::-webkit-scrollbar {
    width: 6px;
}

#assinar-modal .modal-box::-webkit-scrollbar-thumb,
#pagar-fatura-modal .modal-box::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.15);
    border-radius: 10px;
}

/* FORM */
#assinar-form,
#pagar-fatura-form {
    gap: 8px;
}

/* INPUTS */
#assinar-modal input,
#assinar-modal select,
#assinar-modal textarea,
#pagar-fatura-modal input,
#pagar-fatura-modal select,
#pagar-fatura-modal textarea {

    width: 100%;

    padding: 9px 12px;

    border: 1px solid #ddd;

    border-radius: 8px;

    font-size: 14px;

    font-family: inherit;

}

/* PLANO */
.selected-plan {

    background: #f8fafc;

    border: 1px solid #e5e7eb;

    border-radius: 10px;

    padding: 10px 14px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 5px;

}

.selected-plan strong {

    display: block;

    color: #111827;

    font-size: 14px;

}

.selected-plan span {

    color: #6b7280;

    font-size: 13px;

}

/* CARTAO */
#cartao-fields {

    display: none;

    flex-direction: column;

    gap: 8px;

    animation: fadeCard 0.25s ease;

}

/* ROW */
.cartao-row {

    display: flex;

    gap: 8px;

}

.cartao-row input {

    flex: 1;

    min-width: 0;

}

/* PIX */
#pix-area,
#pagar-fatura-pix-area {

    display: none;

    margin-top: 22px;

    padding-top: 20px;

    border-top: 1px solid #eee;

}

.pix-header {

    text-align: center;

}

.pix-header h3 {

    margin-bottom: 8px;

}

.pix-header p {

    color: #6b7280;

    font-size: 14px;

    margin-bottom: 18px;

}

/* QR CODE */
#pix-qrcode,
#pagar-fatura-pix-qrcode {

    width: 220px;

    max-width: 100%;

    display: block;

    margin: 0 auto;

    border-radius: 12px;

    border: 1px solid #eee;

    padding: 10px;

    background: white;

}

/* PIX TEXTAREA */
#pix-copia-cola,
#pagar-fatura-pix-copia-cola {

    height: 90px;

    resize: none;

    margin-top: 18px;

    font-size: 13px;

}

/* PIX BOTAO */
#copiar-pix,
#pagar-fatura-copiar-pix {

    margin-top: 12px;

}

/* STATUS */
#pix-status,
#pagar-fatura-pix-status {

    margin-top: 18px;

    text-align: center;

    font-size: 14px;

    color: #6b7280;

}

/* FEEDBACK */
#signup-feedback p,
#pagar-fatura-feedback p {

    padding: 10px;

    border-radius: 8px;

    margin-bottom: 15px;

}

#signup-feedback .erro,
#pagar-fatura-feedback .erro {

    background: #fee2e2;

    color: #b91c1c;

}

#signup-feedback .sucesso,
#pagar-fatura-feedback .sucesso {

    background: #dcfce7;

    color: #166534;

}

/* MOBILE */
@media (max-width: 768px) {

    #assinar-modal {

        align-items: flex-start;

        padding: 16px 0;

    }

    #assinar-modal .modal-box {

        margin-top: 8px;

        max-height: 95vh;

        border-radius: 16px;

    }

}

/* ANIMACAO */
@keyframes fadeCard {

    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}



.pagamento-sucesso {

    text-align: center;

    padding: 20px 0;

}

.pagamento-sucesso h2 {

    margin: 15px 0 10px;

}

.pagamento-sucesso p {

    color: #6b7280;

    margin-bottom: 20px;

}

.sucesso-icon {

    font-size: 64px;

}








/*
    .app-body só define o background cinza de fundo das telas
    internas agora - o display:flex/flex-direction:column que
    existia aqui era do <main class="app-main"> de base_interno.html
    (removido nesta mesma classe .app-body, que base_erp.html também
    usa no <body>) - como .erp-main não usa mais essa classe, o
    layout flex ficava "escondido" no desktop (erp-main é
    position:fixed lá, então nem participa do flex), mas no mobile
    erp-main vira position:relative (ver erp.css) e volta a
    participar do flex - aí o corpo, com altura fixa (100vh), ENCOLHE
    erp-main pra caber, e o que sobra do conteúdo fica cortado
    (erp-main tem overflow:hidden) em vez de dar scroll.
*/
.app-body {
    background: #e4e4e4;
}

.dashboard-hero {
    background:
        linear-gradient(
            135deg,
            #1F2F4A,
            #274B96
        );

    color: white;
    padding: 20px;
    border-radius: 24px;
    margin-bottom: 15px;
}

.dashboard-hero h1 {
    font-size: 42px;
    margin: 0px 0;
}

.dashboard-hero p {
    color: #dbeafe;
    max-width: 700px;
    line-height: 1.7;
}

.dashboard-badge {
    display: inline-block;
    background: rgba(
        255,
        255,
        255,
        0.15
    );
    padding: 8px 14px;
    border-radius: 30px;
    font-size: 13px;
}

/*
    8 colunas (uma linha só, no desktop) que se ajustam à largura
    da tela (1fr = mesma "tela / 8" em vez de um px fixo).
*/
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 20px;
    /* .erp-main já reserva 10px de padding em todos os lados (é
       essa margem lateral, esquerda/direita, dos cards) - soma
       mais 10px aqui em cima pra virar 20px de respiro entre o
       header e a primeira linha de cards, mesmo valor do padding
       lateral do header (.header-container/.conta-bar-inner). */
    margin-top: 10px;
}

/*
    Variante pra telas com poucos cards (hoje: Parâmetros) - o
    repeat(8,1fr) do .dashboard-grid divide a largura toda entre 8
    colunas fixas, então com só 1-2 cards eles ficam espremidos numa
    fatia de 1/8 da tela (estreitos e altos demais). Aqui cada card
    tem uma largura fixa e confortável (220px) e o grid preenche da
    esquerda pra direita, quebrando linha sozinho conforme mais
    cards forem sendo adicionados - sem precisar mexer no CSS de
    novo.
*/
.dashboard-grid--compact {
    grid-template-columns: repeat(auto-fill, minmax(220px, 220px));
}

.dashboard-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    border-radius: 20px;
    padding: 25px;
    box-sizing: border-box;
    /* Grid estica cada item por padrão pra ocupar a altura da
       linha (align-items:stretch), mas o card é ele mesmo um
       flex container com conteúdo variável (a descrição de
       "Conta" é mais longa que a dos outros) - height:100%
       força explicitamente essa altura em vez de confiar só no
       stretch, senão o card com mais texto fica mais alto que
       os demais em vez de todos igualarem por ele. */
    height: 100%;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.dashboard-card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 15px 40px rgba(
            0,
            0,
            0,
            0.08
        );
}

/* Cards de funcionalidades que ainda não existem (Financeiro,
   Parâmetros) - aparecem na grade já na posição final, mas sem
   link, sem hover de "clicável" e com aparência levemente apagada. */
.dashboard-card--em-breve {
    opacity: 0.6;
}

.dashboard-card--em-breve:hover {
    transform: none;
    box-shadow: none;
}

.dashboard-card--em-breve .btn {
    cursor: default;
}

.dashboard-card--em-breve .btn:hover {
    background: white;
}


.dashboard-card h3 {
    margin: 0;
    font-size: 22px;
}


.dashboard-card p {
    color: #6b7280;
    line-height: 1.7;
    flex-grow: 1;
    margin: 0;
    max-width: 280px;
}

.dashboard-icon {
    font-size: 42px;
}

.dashboard-card p {
    color: #6b7280;
    flex-grow: 1;
}

.dashboard-novidades {
    margin-top: 35px;
}

.dashboard-card .btn {
    width: 100%;
    margin-top: auto;
}













.assinatura-card {

    border-radius: 24px;

    padding: 35px;

}


.assinatura-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 30px;

}

.mini-label {

    color: #6b7280;

    font-size: 13px;

}

.status-badge {

    padding: 8px 14px;

    border-radius: 30px;

    font-size: 13px;

    font-weight: 600;

}

.status-success {

    background: #dcfce7;

    color: #166534;

}

.status-warning {

    background: #fef3c7;

    color: #92400e;

}

.assinatura-info-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 20px;

    margin-bottom: 30px;

}

.assinatura-info-grid small {

    display: block;

    color: #6b7280;

    margin-bottom: 6px;

}

.assinatura-actions {

    display: flex;

    justify-content: flex-end;

}

.dropdown-conta {

    position: relative;

}

.dropdown-menu {

    position: absolute;

    top: 55px;

    right: 0;

    background: white;

    border-radius: 16px;

    box-shadow:
        0 10px 30px rgba(
            0,
            0,
            0,
            0.08
        );

    padding: 10px;

    min-width: 220px;

    display: none;

    flex-direction: column;

    z-index: 3000;

}

.dropdown-menu.active {

    display: flex;

}

.dropdown-menu a {

    padding: 12px 14px;

    border-radius: 10px;

    color: #1f2937;

    transition: 0.2s;

}

.dropdown-menu a:hover {

    background: #f3f4f6;

}

.alerts {

    margin-bottom: 25px;

}

.alert {

    background: white;

    border-left:
        4px solid #C79A3B;

    padding: 16px 20px;

    border-radius: 12px;

    margin-bottom: 12px;

}

@media (max-width: 900px) {

    .assinatura-info-grid {

        grid-template-columns:
            1fr;

    }

    .dashboard-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }

}

@media (max-width: 768px) {

    .dashboard-hero {

        padding: 35px 25px;

    }

    .dashboard-hero h1 {

        font-size: 32px;

    }

}

@media (max-width: 600px) {

    /* Mobile: um card por linha, ocupando a largura do device
       (nada de largura fixa em px). */
    .dashboard-grid {

        grid-template-columns:
            1fr;

    }

    .assinatura-header {

        flex-direction: column;

        align-items: flex-start;

        gap: 15px;

    }

    .assinatura-actions .btn {

        width: 100%;

    }

}





/* =========================================
   PROFILE BUTTON
========================================= */

.profile-button {

    width: 46px;

    height: 46px;

    border-radius: 50%;

    border: none;

    background: #1F2F4A;

    color: white;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: 0.2s;

}

.profile-button:hover {

    transform: translateY(-1px);

    background: #274B96;

}

.profile-button svg {

    width: 20px;

    height: 20px;

}


/* =========================================
   LUCIDE ICONS DASHBOARD
========================================= */

.dashboard-icon {

    width: 58px;

    height: 58px;

    border-radius: 18px;

    background: #eef4ff;

    display: flex;

    align-items: center;

    justify-content: center;

}

.dashboard-icon svg {

    width: 30px;

    height: 30px;

    color: #274B96;

}






/* =========================================
   CONTA
========================================= */

.conta-grid {

    display: grid;

    grid-template-columns: 1fr;

    /* Um "gap" só espaça igual TODOS os cards entre si (Informações
       pessoais, Assinatura, Histórico financeiro moram aqui dentro,
       não como elementos separados com margens próprias) -
       margin-top maior que o gap dá o respiro extra (2x) só entre
       o topo da página e o primeiro card. */
    gap: 25px;

    margin-top: 50px;

}

.conta-card {

    border-radius: 24px;

    padding: 35px;

}

.conta-card-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 35px;

}

.conta-card-header small {

    color: #6b7280;

    display: block;

    margin-bottom: 8px;

}

.conta-card-header h2 {

    font-size: 32px;

    margin: 0;

}





.conta-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.conta-info-grid label,
.assinatura-modern-grid label {

    display: block;

    font-size: 13px;

    color: #6b7280;

    margin-bottom: 8px;

}

.conta-info-grid strong,
.assinatura-modern-grid strong {

    color: #111827;

    font-size: 16px;

    line-height: 1.5;

}

.conta-info-full {

    grid-column: 1 / -1;

}

.conta-info-grid input,
.conta-info-grid select {

    width: 100%;

    border: 1px solid #dbe3ee;

    border-radius: 14px;

    padding: 14px 16px;

    font-size: 15px;

    background: #f9fafb;

    transition: 0.2s;

}

.conta-info-grid input:focus,
.conta-info-grid select:focus {

    outline: none;

    border-color: #274B96;

    background: white;

}

.conta-info-grid .errorlist {

    list-style: none;

    color: #b91c1c;

    font-size: 13px;

    margin: 8px 0 0;

    padding: 0;

}

@media (max-width: 900px) {

    .conta-info-grid,
    .assinatura-modern-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}

@media (max-width: 768px) {

    .conta-info-grid,
    .assinatura-modern-grid {

        grid-template-columns: 1fr;

    }

}






.assinatura-modern-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 28px;

    margin-bottom: 35px;

}

.assinatura-actions-modern {

    display: flex;

    gap: 15px;

    justify-content: flex-end;

}

.billing-card {

    border-radius: 24px;

    padding: 35px;

}

.billing-table-wrapper {

    overflow-x: auto;

}

.billing-table {

    width: 100%;

    border-collapse: collapse;

    margin-top: 20px;

}

.billing-table thead {

    background: #f9fafb;

}

.billing-table th {

    text-align: left;

    padding: 16px;

    font-size: 13px;

    color: #6b7280;

    font-weight: 600;

}

.billing-table td {

    padding: 18px 16px;

    border-top: 1px solid #f1f5f9;

    vertical-align: middle;

}

.billing-actions {

    display: flex;

    gap: 10px;

    flex-wrap: wrap;

}

.btn-sm {

    padding: 10px 18px;

    font-size: 13px;

}

.btn-outline {

    border: 1px solid #d1d5db;

    background: white;

    color: #111827;

}

.btn-outline:hover {

    background: #f9fafb;

}

.btn-danger {

    background: #dc2626;

    color: white;

}

.btn-danger:hover {

    background: #b91c1c;

}

.btn-danger-outline {

    border: 1px solid #fecaca;

    background: #fff5f5;

    color: #b91c1c;

}

.btn-danger-outline:hover {

    background: #fee2e2;

}

.empty-state {

    color: #6b7280;

    margin-top: 15px;

}

.modal-overlay {

    position: fixed;

    inset: 0;

    background: rgba(
        0,
        0,
        0,
        0.45
    );

    display: none;

    align-items: center;

    justify-content: center;

    z-index: 5000;

    padding: 20px;

}

.modal-overlay.active {

    display: flex;

}

.modal-modern {

    background: white;

    width: 100%;

    max-width: 520px;

    border-radius: 24px;

    padding: 35px;

    animation: fadeUp 0.25s ease;

}

.modal-modern h2 {

    margin-bottom: 20px;

}

.modal-modern p {

    color: #6b7280;

    line-height: 1.7;

    margin-bottom: 15px;

}

.modal-actions {

    display: flex;

    justify-content: flex-end;

    gap: 12px;

    margin-top: 30px;

}

@media (max-width: 900px) {

    .assinatura-modern-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}

@media (max-width: 768px) {

    .conta-card,
    .billing-card {

        padding: 25px;

    }

    .conta-info-grid,
    .assinatura-modern-grid {

        grid-template-columns: 1fr;

    }

    .conta-card-header {

        flex-direction: column;

        align-items: flex-start;

        gap: 20px;

    }

    .assinatura-actions-modern {

        flex-direction: column;

    }

    .assinatura-actions-modern .btn {

        width: 100%;

    }

    .modal-actions {

        flex-direction: column;

    }

    .modal-actions .btn {

        width: 100%;

    }

}




.conta-input {

    width: 100%;

    border: 1px solid #dbe3ee;

    border-radius: 14px;

    padding: 14px 16px;

    font-size: 15px;

    background: #f9fafb;

    transition: 0.2s;

}

.conta-input:disabled {

    background: #f9fafb;

    color: #111827;

    opacity: 1;

    cursor: default;

}

.conta-input:not(:disabled) {

    background: white;

    border-color: #cbd5e1;

}

.conta-form-actions {

    display: none;

    gap: 12px;

    justify-content: flex-end;

    margin-top: 35px;

}


#publicacoes-table td,
#publicacoes-table th {

    white-space: nowrap;

}

#publicacoes-table {

    font-size: 12px;

}

#publicacoes-table td {

    vertical-align: middle;

}



#colaboradores-table td,
#colaboradores-table th {

    white-space: nowrap;

}

#colaboradores-table {

    font-size: 12px;

}

#colaboradores-table td {

    vertical-align: middle;

}




#clientes-table td,
#clientes-table th {

    white-space: nowrap;

}

#clientes-table {

    font-size: 12px;

}

#clientes-table td {

    vertical-align: middle;

}





.col-servico {

    white-space: normal !important;

}