/* =============================================== */
/* Tema Moderno para Plataforma de Leads - 2025    */
/* =============================================== */

/* 1. VARIÁVEIS GLOBAIS (O coração do tema) */
:root {
    --cor-primaria: #00D47E;
    --cor-primaria-hover: #51fbb4;
    --cor-secundaria: #025964;
    --cor-sucesso: #16a34a;
    --cor-perigo: #dc2626;
    --cor-aviso: #f97316;
    
    --cor-fundo: #f5f7f9;
    --cor-superficie: #ffffff;
    --cor-borda: #e2e8f0;
    
    --cor-texto-principal: #1e293b;
    --cor-texto-secundario: #64748b;
    --cor-texto-link: var(--cor-primaria);

    --fonte-principal: 'Inter', sans-serif;
    --fonte-peso-normal: 400;
    --fonte-peso-medio: 500;
    --fonte-peso-bold: 600;

    --raio-borda: 8px;
    --sombra-padrao: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
 

/* Força o body a ser um container flex vertical */
body {
    font-family: var(--fonte-principal);
    background-color: var(--cor-fundo);
    color: var(--cor-texto-principal);
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 14px;
}
 
h1, h2, h3 { color: var(--cor-secundaria); font-weight: var(--fonte-peso-bold); }


a{color: #000; text-decoration: none;}
a:hover{ color: var(--cor-primaria);}

/* 3. LAYOUT E CONTAINERS */
.container, .admin-container {
    max-width: 1200px;
    margin: 30px auto;
    width: 100%;
    background-color: var(--cor-superficie);
    padding: 32px;
    border-radius: var(--raio-borda);
    box-shadow: var(--sombra-padrao);
    border: 1px solid var(--cor-borda);
}
.site-container{
    max-width: 1266px;
    width: 100%;
    margin: 0px auto; 
    
}
header{
    width: 100%;
    background-color: var(--cor-secundaria);
    color: var(--cor-superficie);
}

header h1 { font-size: 22px; color: var(--cor-superficie); }

header .top-bar{
    background: rgba(0,0,0,0.2);
    padding: 4px;
    font-size: 14px;
}
header .top-bar .site-container, header .nav-bar .site-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
header .top-bar .top-nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header .top-bar .top-nav .top-nav-bar > ul{
    list-style-type: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
header .top-bar .top-nav .top-nav-bar > ul > li{
    padding: 0px 5px;
}
header .top-bar .top-nav .top-nav-bar > ul > li > a{
    color: #fff;
    padding: 6px 16px;
    border-radius: var(--raio-borda);
    font-weight: var(--fonte-peso-medio);
    font-size: 14px;
    border: 1px solid transparent; /* Borda transparente para não "pular" no hover */
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}
header .top-bar .top-nav .top-nav-bar ul li a:hover{
    background-color: var(--cor-primaria);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}
.top-empresa{ color: rgba(255,255,255,0.3); padding: 6px 16px;
    border-radius: var(--raio-borda);
    font-weight: var(--fonte-peso-medio);
    font-size: 14px;
    border: 1px solid  rgba(255, 255, 255, 0.2); /* Borda transparente para não "pular" no hover */
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;}
.top-empresa svg{width: 14px; height: 14px; color: rgba(255,255,255,0.3)!important; fill: rgba(255,255,255,0.3)!important; margin-right: 5px;}
.top-empresa svg g{stroke: rgba(255,255,255,0.3)!important;}

header .top-bar .top-nav .top-nav-bar ul li a.btn-perigo svg{
    margin-bottom: 0px;
}
header .top-bar .top-nav .top-nav-bar > ul > li.menu-dropdown{position: relative;}
header .top-bar .top-nav .top-nav-bar > ul > li.menu-dropdown:hover > .submenu{ display: block;     transform: translateY(0);}
.titulo-com-acao {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 15px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--cor-borda);
}
.titulo-com-acao h2{
    margin: 0px;
}

/* 4. COMPONENTES REUTILIZÁVEIS */

/* --- Botões --- */
.btn {
    display: inline-block;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: var(--fonte-peso-bold);
    color: var(--cor-superficie);
    border-radius: var(--raio-borda);
    text-decoration: none;
    border: none;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease-in-out;
    padding-bottom: 8px; 
}
.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08);
    color: #fff;
}
.btn svg{
    width: 14px;
    margin-bottom: 4px;
    vertical-align: middle;
    padding-right: 10px;
}
.btn svg g{
    stroke: #fff;
}

.btn-primario { background-color: var(--cor-primaria); }
.btn-primario:hover { background-color: var(--cor-primaria-hover); }
.btn-sucesso { background-color: var(--cor-sucesso); }
.btn-sucesso:hover { background-color: #15803d; }
.btn-perigo { background-color: var(--cor-perigo); }
.btn-perigo:hover { background-color: #b91c1c; }
.btn-aviso { background-color: var(--cor-aviso); }
.btn-aviso:hover { background-color: #ea580c; }
.btn-secundario { background-color: var(--cor-texto-secundario); color: var(--cor-superficie); }
.btn-secundario:hover { background-color: var(--cor-secundaria); }
.btn-logout { background-color: var(--cor-perigo); }
.btn-logout:hover { background-color: #c0392b; }
.btn-center{
    margin: 0px auto;
}
/* --- Tabelas --- */
.table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dashboard-table, .admin-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}
.dashboard-table th, .admin-table th {
    padding: 12px 16px;
    text-align: left;
    background-color: #f1f5f9;
    color: var(--cor-texto-secundario);
    font-size: 12px;
    font-weight: var(--fonte-peso-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--cor-borda);
}
.dashboard-table td, .admin-table td {
    padding: 16px;
    border-bottom: 1px solid var(--cor-borda);
    color: var(--cor-texto-principal);
}
.dashboard-table tbody tr:hover, .admin-table tbody tr:hover {
    background-color: #f1f5f9;
}

/* --- Formulários e Filtros --- */
.exibicao-container, .form-container {
    margin-bottom: 25px;
    padding: 20px;
    background-color: var(--cor-fundo);
    border-radius: var(--raio-borda);
    border: 1px solid var(--cor-borda);
}
.grupo-form{margin-bottom: 10px;}
.form-filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; }
.grupo-form label { font-weight: var(--fonte-peso-medio); font-size: 14px; color: var(--cor-secundaria); margin-bottom: 8px; display: block;}
.grupo-form input, .grupo-form select, .grupo-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-borda);
    font-size: 14px;
    box-sizing: border-box;
    font-family: var(--fonte-principal);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.grupo-form input:focus, .grupo-form select:focus, .grupo-form textarea:focus {
    outline: none;
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
}

/* --- Componentes Específicos --- */
.login-container { border: 1px solid var(--cor-borda); }
.paginacao { margin-top: 30px; text-align: center; }
.paginacao a { color: var(--cor-texto-link); padding: 8px 16px; text-decoration: none; border: 1px solid var(--cor-borda); margin: 0 4px; border-radius: var(--raio-borda); }
.paginacao a.pagina-ativa { background-color: var(--cor-primaria); color: var(--cor-superficie); border-color: var(--cor-primaria); }
.paginacao a:hover:not(.pagina-ativa) { background-color: #eef2ff; }

/* Estilos para os Cards de Estatísticas (Com CSS Grid) */
.stats-container {
    display: grid; /* MUDANÇA: de flex para grid */
    
    /* A mágica acontece aqui: */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    /* A propriedade 'flex: 1' não é mais necessária com o Grid */
    background-color: var(--cor-superficie);
    padding: 24px;
    border-radius: var(--raio-borda);
    text-align: center;
    border: 1px solid var(--cor-borda);
    box-shadow: var(--sombra-padrao);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.stat-card:hover {
    transform: translateY(-4px); /* Efeito de "levantar" o card */
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.stat-card h2 {
    margin: 0 0 5px 0;
    font-size: 36px;
    color: var(--cor-primaria);
}

.stat-card p {
    margin: 0;
    font-size: 14px; /* Um pouco menor para melhor harmonia */
    color: var(--cor-texto-secundario);
    font-weight: var(--fonte-peso-medio);
}

/* =============================================== */
/* 6. ESTILOS REFINADOS PARA PÁGINA DE DETALHES    */
/* =============================================== */

/* O novo "Card" que vai agrupar seções de informação */
.card-detalhes {
    background-color: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-borda);
    margin-bottom: 24px;
}
.card-detalhes h3 {
    padding: 16px 24px;
    margin: 0;
    font-size: 16px;
    font-weight: var(--fonte-peso-bold);
    border-bottom: 1px solid var(--cor-borda);
    color: var(--cor-secundaria);
}
.card-detalhes-conteudo {
    padding: 24px;
}

/* Melhorando o alinhamento de 'Label' e 'Valor' com Grid */
.detalhes-item {
    display: grid; /* Usar Grid para alinhamento perfeito */
    grid-template-columns: 180px 1fr; /* Coluna do label com 180px, valor ocupa o resto */
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--cor-borda);
}
.detalhes-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.detalhes-item:first-child {
    padding-top: 0;
}
.detalhes-item .label {
    font-weight: var(--fonte-peso-medio);
    color: var(--cor-texto-secundario);
    padding-top: 2px; /* Pequeno ajuste de alinhamento vertical */
}
.detalhes-item .valor {
    font-weight: var(--fonte-peso-medio);
    color: var(--cor-texto-principal);
    word-break: break-word; /* Garante que textos longos quebrem a linha */
}

/* Deixando o histórico com cara de "timeline" */
.historico-lista {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}
/* A linha vertical da timeline */
.historico-lista::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background-color: var(--cor-borda);
}
.historico-lista li {
    padding: 8px 0 16px 28px;
    position: relative;
}
/* A bolinha de cada item da timeline */
.historico-lista li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 13px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background-color: var(--cor-primaria);
    border: 2px solid var(--cor-superficie);
}
.historico-lista li strong {
    font-weight: var(--fonte-peso-bold);
    color: var(--cor-secundaria);
}
.historico-lista li span {
    display: block;
    font-size: 12px;
    color: var(--cor-texto-secundario);
}

/* =============================================== */
/* 7. ESTILOS PÁGINA CONFIGURAR FUNIL              */
/* =============================================== */

.lista-etapas {
    list-style: none;
    padding: 0;
    margin: 0;
}

.lista-etapas-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--cor-borda);
}

.lista-etapas-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.lista-etapas-item:first-child {
    padding-top: 0;
}

.etapa-nome {
    font-weight: var(--fonte-peso-medio);
    color: var(--cor-texto-principal);
}

.botoes-acao {
    display: flex;         /* Transforma o container em Flexbox */
    align-items: center;   /* Alinha os itens verticalmente ao centro */
    gap: 10px;             /* Cria um espaço de 10px entre os botões */
}

/* Remove a margem padrão que alguns navegadores adicionam a formulários,
   o que poderia causar desalinhamento. */
.botoes-acao form {
    margin: 0;
}
.return{
    margin-top: 30px;
}


/* =============================================== */
/* ESTILOS DO MENU DE NAVEGAÇÃO (NAV)              */
/* =============================================== */

header nav {
    display: flex;         /* Alinha os links horizontalmente */
    align-items: center;   /* Centraliza-os verticalmente */
    gap: 10px;             /* Cria um espaço entre os links */
}

header nav a {
    color: var(--cor-superficie);
    text-decoration: none;
    padding: 8px 16px;
    border-radius: var(--raio-borda);
    font-weight: var(--fonte-peso-medio);
    font-size: 14px;
    border: 1px solid transparent; /* Borda transparente para não "pular" no hover */
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

/* Efeito de hover para os links normais */
header nav a:not(.nav-logout):hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* Estilo especial para o botão de Sair */
header nav a.nav-logout {
    background-color: var(--cor-perigo);
}

header nav a.nav-logout:hover {
    background-color: #b91c1c; /* Um tom mais escuro de vermelho para o hover */
    color: #fff;
}

/* Estilos Base da Barra de Navegação */
.navbar {
    display: flex;
    justify-content: flex-end; /* Alinha itens à direita no desktop */
    align-items: center; 
    padding: 1rem;
    position: relative;
}

.nav-links a {
    color: white;
    text-decoration: none;
    padding: 0.5rem 1rem;
    margin: 0 0.25rem;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.nav-links a:hover {
    background-color: #555;
}
 
/* Esconde o botão hamburger no desktop */
.menu-toggle {
    display: none;
    cursor: pointer;
}

/* ================================================= */
/* ESTILOS MOBILE - MENU DESLIZANTE (SIDE DRAWER) */
/* ================================================= */
@media (max-width: 768px) {
    /* Estilo do botão hamburger (pode manter o anterior) */
    .menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 30px;
        height: 25px;
        background: transparent;
        border: none;
        padding: 0;
        z-index: 1001; /* Garante que o botão fique acima de tudo */
        position: relative; /* Necessário para o z-index funcionar bem */
    }

    .menu-toggle .bar {
        width: 100%;
        height: 3px;
        background-color: white;
        border-radius: 2px;
        transition: all 0.3s ease-in-out;
    }

    /* Animação do Hamburger para "X" quando ativo */
    .menu-toggle.active .bar:nth-child(1) {
        transform: rotate(45deg) translate(5px, 6px);
    }
    .menu-toggle.active .bar:nth-child(2) {
        opacity: 0;
    }
    .menu-toggle.active .bar:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -6px);
    }
    
    /* === O Painel do Menu Deslizante === */
    .nav-links {
        /* Configuração do painel */
        position: fixed; /* Fixo na tela */
        top: 0;
        left: 0;
        height: 100vh; /* 100% da altura da tela */
        width: 280px;  /* Largura do menu */
        background-color: var(--cor-secundaria);
        z-index: 1000; /* Fica abaixo do botão, mas acima do resto */
        
        /* Layout dos links */
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 5rem; /* Espaço para não ficar colado no topo */

        /* Efeito de transição (o slide) */
        transform: translateX(-100%); /* Começa fora da tela, à esquerda */
        transition: transform 0.3s ease-in-out;
    }

    /* Quando o menu está ativo, ele desliza para a tela */
    .nav-links.active {
        transform: translateX(0);
    }

    .nav-links a {
        color: white;
        padding: 1rem 0;
        width: 100%;
        text-align: center;
        border-bottom: 1px solid rgba(0,0,0,0.1);
    }

    .nav-links a:last-child {
        border-bottom: none;
    }
    
    .nav-links .btn-perigo {
        margin-top: 2rem;
        width: 80%;
        justify-content: center;
    }

    /* === (Opcional) Fundo escurecido === */
    .overlay {
        display: none; /* Escondido por padrão */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5); /* Cor preta com 50% de opacidade */
        z-index: 999; /* Fica atrás do menu, mas na frente do conteúdo */
    }

    .overlay.active {
        display: block; /* Mostra o overlay quando o menu está ativo */
    }
}


.nav-links > ul{
     display: flex; /* Alinha os itens principais lado a lado */
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-links > ul > li{
    position: relative;
}

.nav-links > ul > li > a {
    display: block;
    color: var(--cor-superficie);
    text-decoration: none;
    font-weight: var(--fonte-peso-medio);
    transition: background-color 0.2s ease-in-out;
}

.nav-links > ul > li:hover > a {
    background-color: var(--cor-primaria);
}

.submenu {
    list-style: none;
    margin: 0;
    padding: 8px 0;
    position: absolute;
    top: 100%;
    left: 0px;
    background-color: var(--cor-superficie);
    border-radius: var(--raio-borda);
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    border: 1px solid var(--cor-borda);
    width: 220px;
    display: none;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    z-index: 10;
}
.submenu-right {
    top: -9px; 
    left: 100%;
}
.nav-links .btn svg{margin-bottom: 0px!important;}

.nav-links .menu-dropdown:hover > .submenu {
    display: block;
    transform: translateY(0); 
}
.submenu a {
    display: block;
    padding: 12px 20px;
    color: var(--cor-texto-principal);
    text-decoration: none;
    font-size: 14px;
    transition: background-color 0.2s, color 0.2s;
}
.submenu a:hover {
    background-color: var(--cor-primaria)!important;
    color: var(--cor-superficie);
}


/* =============================================== */
/* 8. COMPONENTE DE ALERTAS (SUCESSO/ERRO)         */
/* =============================================== */

.alerta {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    margin-bottom: 24px;
    border-radius: var(--raio-borda);
    border-left: 5px solid; /* Borda lateral proeminente */
    font-size: 14px;
    font-weight: var(--fonte-peso-medio);
    box-shadow: var(--sombra-padrao);
}

/* O pseudo-elemento ::before vai carregar nosso ícone SVG */
.alerta::before {
    content: '';
    flex-shrink: 0; /* Impede que o ícone seja esmagado */
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Modificador de Sucesso */
.alerta-sucesso {
    background-color: #f0fdf4;
    border-color: var(--cor-sucesso);
    color: #14532d;
}
.alerta-sucesso::before {
    /* Ícone de Check ✓ (SVG embutido e codificado para URL) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2316a34a'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z' clip-rule='evenodd' /%3E%3C/svg%3E");
}

/* Modificador de Perigo/Erro */
.alerta-perigo {
    background-color: #fef2f2;
    border-color: var(--cor-perigo);
    color: #991b1b;
}
.alerta-perigo::before {
    /* Ícone de X (SVG embutido e codificado para URL) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23dc2626'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z' clip-rule='evenodd' /%3E%3C/svg%3E");
}

/* =============================================== */
/* 9. ESTILOS REFINADOS PARA PÁGINA DE LOGIN       */
/* =============================================== */

.login-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Duas colunas de larguras iguais */
    min-height: 100vh; /* Ocupa a altura inteira da tela */
    width: 100%;
    margin: 0;
    padding: 0;
}

.login-branding {
    background-color: var(--cor-secundaria);
    color: var(--cor-superficie);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px;
    text-align: center;
}

.branding-title {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--cor-superficie);
}

.branding-subtitle {
    font-size: 18px;
    color: var(--cor-texto-secundario);
    opacity: 0.8;
}

.login-form-container {
    background-color: var(--cor-superficie);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px;
}

/* Centraliza o formulário dentro da coluna direita */
.login-form-container form {
    max-width: 400px;
    width: 100%;
    margin: 0 auto;
}

.login-form-container h2 {
    text-align: center;
    margin-bottom: 24px;
}

/* Modificação para a classe de alerta de aviso */
.alerta-aviso {
    background-color: #fffbeb;
    border-color: var(--cor-aviso);
    color: #92400e;
}
.alerta-aviso::before {
    /* Ícone de Exclamação (SVG embutido) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23f97316'%3E%3Cpath fill-rule='evenodd' d='M8.257 3.099c.636-1.026 2.25-1.026 2.886 0l5.58 8.998a1.75 1.75 0 01-1.443 2.652H3.12a1.75 1.75 0 01-1.443-2.652l5.58-8.998zM10 13a1 1 0 100-2 1 1 0 000 2zm-1-4a1 1 0 011-1h.008a1 1 0 110 2H10a1 1 0 01-1-1z' clip-rule='evenodd' /%3E%3C/svg%3E");
}


/* Ajustes responsivos para a página de login */
@media (max-width: 768px) {
    .login-wrapper {
        grid-template-columns: 1fr; /* Uma única coluna em telas menores */
    }

    .login-branding {
        min-height: 200px; /* Altura mínima para a área de branding */
        padding: 20px;
    }

    .login-form-container {
        padding: 30px 20px;
    }
    .site-container{
        max-width: 100%;
        margin: 0px 10px;
        width: auto;
    }
     header{max-width: 100%; width: auto;}
}


@media (max-width: 1024px) {
    .site-container{
       margin: 0px 10px;
       max-width: 100%;
       width: auto;
    }
   
}

/* =============================================== */
/* 10. ESTILOS ESPECIAIS E ISOLADOS PARA O KANBAN  */
/* =============================================== */

/* Aplica o layout especial APENAS ao body da página Kanban */
body.kanban-page-body {
    display: flex;
    flex-direction: column;
    overflow: auto;
    max-height: 100vh;
}

/* O header na página kanban ocupa apenas o espaço necessário */
body.kanban-page-body header {
    flex-shrink: 0;
}

/* O container do Kanban cresce para preencher todo o espaço restante */
body.kanban-page-body .container-kanban {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding: 20px;
    min-height: 0; /* Correção de bug do Flexbox */
}

/* O quadro (board) se estica para preencher o espaço e permite scroll horizontal */
.kanban-board {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    flex-grow: 1;
    min-height: 0;
    padding-bottom: 10px;
}

/* A coluna é um container flex vertical */
.kanban-coluna {
    flex: 0 0 320px;
    background-color: #f1f5f9;
    border-radius: var(--raio-borda);
    display: flex;
    flex-direction: column;
    max-height: 100%;
}

.coluna-titulo {
    padding: 16px;
    font-weight: var(--fonte-peso-bold);
    color: var(--cor-secundaria);
    flex-shrink: 0;
    margin: 0;
    font-size: 16px;
}

/* A área dos cards é a que cresce e ganha o scroll vertical */
.coluna-cards {
    padding: 8px;
    overflow: auto;
    max-height: 70vh;
}

.kanban-board::-webkit-scrollbar,
.coluna-cards::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.kanban-board::-webkit-scrollbar-track,
.coluna-cards::-webkit-scrollbar-track {
    background: #e2e8f0;
    border-radius: 10px;
}
.kanban-board::-webkit-scrollbar-thumb,
.coluna-cards::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 10px;
}
.kanban-board::-webkit-scrollbar-thumb:hover,
.coluna-cards::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

.kanban-card {
    background-color: var(--cor-superficie);
    padding: 16px;
    border-radius: var(--raio-borda);
    margin-bottom: 8px;
    box-shadow: var(--sombra-padrao);
    border: 1px solid var(--cor-borda);
    cursor: grab; /* Indica que o item é arrastável */
}
.kanban-card:hover {
    border-color: var(--cor-primaria);
}
.kanban-card h4 {
    margin: 0 0 8px 0;
    font-size: 14px;
    font-weight: var(--fonte-peso-bold);
}
.kanban-card h4 a {
    text-decoration: none;
    color: inherit;
}
.kanban-card p {
    margin: 0;
    font-size: 12px;
    color: var(--cor-texto-secundario);
}

.sortable-ghost {
    opacity: 0.4;
    background-color: #cce5ff;
}

/* 5. ESTILOS RESPONSIVOS */
@media (max-width: 768px) { 
    .container, .admin-container { padding: 16px; }
    header, .admin-header .header-container { flex-direction: column; gap: 15px; height: auto; padding: 16px; text-align: center; }
    .stats-container { flex-direction: column; }
    .form-filtros { flex-direction: column; align-items: stretch; }
    .detalhes-flex-container { flex-direction: column; }
    .detalhes-item { flex-direction: column; align-items: flex-start; gap: 4px; }
    .dashboard-table, .admin-table { min-width: 700px; }
}


/* =============================================== */
/* 11. MELHORIAS NO DRAG AND DROP (CONFIG FUNIL)   */
/* =============================================== */

/* Ajusta o item da lista para alinhar o ícone, nome e ações */
.lista-etapas-item {
    display: flex;
    align-items: center;
    gap: 12px; /* Espaço entre o ícone, o nome e as ações */
}

/* Estiliza o container do ícone */
.drag-handle {
    cursor: grab; /* Cursor de "agarrar", indicando que é arrastável */
    color: var(--cor-borda); /* Cor suave para o ícone */
    transition: color 0.2s;
}

.drag-handle:hover {
    color: var(--cor-texto-secundario); /* Escurece um pouco no hover */
}

/* Faz o nome da etapa ocupar o máximo de espaço possível, empurrando as ações para a direita */
.etapa-nome {
    flex-grow: 1;
}

/* Classe para o "fantasma" do item sendo arrastado */
.sortable-ghost {
    opacity: 0.4;
    background-color: #eef2ff;
}


/* =============================================== */
/* 12. ESTILOS PARA O MÓDULO DE TAREFAS            */
/* =============================================== */

/* Badges de Status da Tarefa */
.badge{
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: var(--fonte-peso-bold);
    text-transform: uppercase;
    border: 1px solid rgba(0,0,0,0.1);
    position: relative;
}
.badge.Sem{
    color:  rgba(0,0,0,0.3);
}
.badge.Meta{
    border: 1px solid #3c8ef2;
    color: #3c8ef2;
    padding-left: 30px;
}
.badge.Meta:before{
    content: '';
    background: url(../images/meta-icon.svg);
    display: inline-block;
    width: 16px;
    height: 16px;
    background-size: 16px 16px;
    left: 8px;
    top: 4px;
    position: absolute;
}

.status-pendente, .status-concluida {
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: var(--fonte-peso-bold);
    text-transform: uppercase;
}
.status-pendente {
    background-color: #fffbeb;
    color: #b45309;
}
.status-concluida {
    background-color: #f0fdf4;
    color: var(--cor-sucesso);
}

/* Destaque para tarefas atrasadas */
.tarefa-atrasada {
    color: var(--cor-perigo);
    font-weight: var(--fonte-peso-bold);
}
.tarefa-atrasada::after {
    content: ' (Atrasada)';
    font-size: 11px;
    display: block;
}
 

/* =============================================== */
/* 13. ESTILOS PARA ALERTA DE INFORMAÇÃO           */
/* =============================================== */

/* Modificador de Informação (para o alerta de tarefas) */
.alerta-info {
    background-color: #eef2ff; /* Fundo azul bem claro */
    border-color: var(--cor-primaria);
    color: #035862; /* Texto azul escuro */
}
.alerta-info::before {
    /* Ícone de Informação "i" (SVG embutido) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2300d47e'%3E%3Cpath fill-rule='evenodd' d='M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z' clip-rule='evenodd' /%3E%3C/svg%3E");
}

/* Estilo para o link dentro do alerta */
.alerta-link {
    font-weight: var(--fonte-peso-bold);
    text-decoration: underline;
    color: inherit; /* Herda a cor do texto do alerta */
}

/* =============================================== */
/* 14. ESTILOS PARA TAREFAS NA PÁGINA DE DETALHES  */
/* =============================================== */


.lista-tarefas-lead {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tarefa-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    margin-bottom: 8px;
    border-radius: var(--raio-borda);
    border: 1px solid var(--cor-borda);
    background-color: var(--cor-superficie);
}

/* Estilo para tarefas concluídas (fica com aparência "desbotada") */
.tarefa-item.status-concluida {
    background-color: var(--cor-fundo);
    opacity: 0.7;
}
.tarefa-item.status-concluida strong {
    text-decoration: line-through;
    color: var(--cor-texto-secundario);
}

.tarefa-info {
    display: flex;
    flex-direction: column;
}
.tarefa-info strong {
    font-weight: var(--fonte-peso-bold);
    color: var(--cor-secundaria);
}
.tarefa-info span {
    font-size: 12px;
    color: var(--cor-texto-secundario);
}
 

.status-container, .qr-container {
    text-align: center;
    padding: 20px;
}
.qr-container img {
    display: block;
    margin: 20px auto;
    border: 5px solid var(--cor-borda);
    border-radius: var(--raio-borda);
}
#status-text {
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: var(--fonte-peso-bold);
    text-transform: uppercase;
}
.status-desconectado, .status-close {
    background-color: #fef2f2;
    color: #991b1b;
}
.status-conectado, .status-open {
    background-color: #f0fdf4;
    color: var(--cor-sucesso);
}

/* =============================================== */
/* 16. ESTILOS PARA O FUNIL DE VENDAS              */
/* =============================================== */

.funil-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.funil-etapa {
    position: relative;
    width: 100%;
    max-width: 500px;
    background-color: #eef2ff;
    border-radius: var(--raio-borda);
    padding: 16px;
    text-align: center;
    overflow: hidden;
    border: 1px solid var(--cor-borda);
}

.etapa-nome {
    font-weight: var(--fonte-peso-bold);
    color: var(--cor-secundaria);
    font-size: 16px;
    margin-bottom: 4px;
}

.etapa-valor {
    font-size: 14px;
    color: var(--cor-texto-secundario);
    font-weight: var(--fonte-peso-medio);
}

.etapa-barra {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background-color: var(--cor-primaria);
    opacity: 0.1;
    z-index: 1;
    transition: width 0.5s ease-in-out;
}

/* Garante que o texto fique na frente da barra */
.funil-etapa > * {
    position: relative;
    z-index: 2;
}

.funil-conversao {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--cor-texto-secundario);
    padding: 8px 0;
}

.conversao-seta {
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 15px solid var(--cor-borda); /* Cor da seta */
    margin-top: -16px;
}

.conversao-taxa {
    font-size: 14px;
    font-weight: var(--fonte-peso-bold);
    color: var(--cor-sucesso);
    margin-top: 4px;
}

.planos-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 30px;
}
.plano-card {
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-borda);
    padding: 32px;
    display: flex;
    flex-direction: column;
    text-align: center;
}
.plano-card h3 { font-size: 20px; margin-top: 0; }
.plano-preco { font-size: 18px; color: var(--cor-texto-secundario); margin-bottom: 24px; }
.plano-preco span { font-size: 48px; font-weight: 700; color: var(--cor-texto-principal); }
.plano-features { list-style: none; padding: 0; margin: 0 0 32px 0; flex-grow: 1; }
.plano-features li { padding: 8px 0; border-bottom: 1px solid var(--cor-borda); }
.plano-features li:last-child { border-bottom: none; }

.card-funildash{
    width: 30%;
}
.card-leadsdash{
    width: 68%;
}

.home-cards, .dashboard-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: normal;
  align-content: normal;
}
.home-cards .dashboard-table, .home-cards .admin-table{
    margin: 0px
}

/* =============================================== */
/* 18. ESTILOS PARA O CALENDÁRIO (FULLCALENDAR)    */
/* =============================================== */

#calendario {
    padding-top: 20px;
}

/* Estilo para tarefas pendentes (cor primária) */
.fc-event-pendente {
    background-color: var(--cor-primaria) !important;
    border-color: var(--cor-primaria) !important;
}

/* Estilo para tarefas concluídas (cor de sucesso, com opacidade) */
.fc-event-concluida {
    background-color: var(--cor-sucesso) !important;
    border-color: var(--cor-sucesso) !important;
    opacity: 0.7;
}

/* Melhora a legibilidade do texto do evento */
.fc-event-title {
    font-weight: var(--fonte-peso-medio);
}
a.fc-event, a.fc-event:hover{cursor: pointer!important; padding: 4px}
.fc-daygrid-day-frame{cursor: pointer;}
/* =============================================== */
/* 19. ESTILOS PARA A PÁGINA DE RELATÓRIOS         */
/* =============================================== */

.relatorios-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 30px;
}

/* =============================================== */
/* 20. ESTILOS PARA CARDS DE KPI (INDICADORES)     */
/* =============================================== */

.kpi-card .card-detalhes-conteudo {
    text-align: center;
}

.kpi-valor {
    font-size: 56px;
    font-weight: 700;
    color: var(--cor-sucesso);
    margin: 20px 0;
    line-height: 1;
}

.kpi-descricao {
    font-size: 14px;
    color: var(--cor-texto-secundario);
    max-width: 250px;
    margin: 0 auto;
}

.search-container {
    position: relative; /* Essencial para o posicionamento do dropdown */
    min-width: 250px;
}

#global-search {
    width: 100%;
    padding: 8px 12px;
    font-size: 14px;
    border: 1px solid var(--cor-primaria); /* Borda sutil */
    border-radius: var(--raio-borda);
    background-color: var(--cor-secundaria); /* Fundo escuro */
    color: var(--cor-superficie);
    transition: all 0.2s;   
}
#global-search::placeholder {
    color: var(--cor-superficie);
}
#global-search:focus {
    outline: none;
    border-color: var(--cor-primaria);
    background-color: var(--cor-secundaria);
    box-shadow: 0 0 0 3px rgba(0, 212, 126, 0.4);
}

.search-results-container {
    display: none; /* Começa escondido */
    position: absolute;
    top: 110%; /* Aparece um pouco abaixo da barra de busca */
    left: 0;
    right: 0;
    background-color: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-borda);
    box-shadow: var(--sombra-padrao);
    z-index: 1000;
    max-height: 300px;
    overflow-y: auto;
}

.search-result-item {
    display: block;
    padding: 12px 16px;
    color: var(--cor-texto-principal);
    text-decoration: none;
    border-bottom: 1px solid var(--cor-borda);
}
.search-result-item:last-child {
    border-bottom: none;
}
.search-result-item:hover {
    background-color: #f1f5f9;
    color: var(--cor-primaria)!important;
}
.search-result-item small {
    display: block;
    color: var(--cor-texto-secundario);
    font-size: 12px;
}
.search-no-results {
    padding: 12px 16px;
    color: var(--cor-texto-secundario);
    font-style: italic;
}
.table-summary {
    margin-bottom: 16px;
    font-size: 14px;
    color: var(--cor-texto-secundario);
    padding-left: 4px;
}

.table-summary strong {
    color: var(--cor-texto-principal);
    font-weight: var(--fonte-peso-bold);
}
 

/* =============================================== */
/* 24. ESTILOS PARA ATALHOS DE DATA                */
/* =============================================== */

/* Alinha o grupo de atalhos em linha */
.form-filtros .grupo-form-atalho {
    width: 100%; /* Ocupa a linha toda nos filtros avançados */
}

.grupo-form-atalho label {
    font-weight: var(--fonte-peso-medio);
    font-size: 14px;
    color: var(--cor-secundaria);
    margin-bottom: 8px;
    display: block;
}

.botoes-atalho {
    display: flex;
    flex-wrap: wrap; /* PERMITE QUEBRAR A LINHA */
    gap: 8px;
}

.btn-atalho-data {
    padding: 6px 12px;
    font-size: 13px;
    font-weight: var(--fonte-peso-medio);
    color: var(--cor-texto-link);
    background-color: #eef2ff; /* Fundo cor primária clara */
    border: 1px solid #eef2ff;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-atalho-data:hover {
    background-color: var(--cor-primaria);
    color: var(--cor-superficie);
    border-color: var(--cor-primaria);
}


/* =============================================== */
/* 25. ESTILOS DO RODAPÉ E SELETOR DE TEMA         */
/* =============================================== */
.site-footer {
    width: 100%;
    background-color: var(--cor-superficie);
    border-top: 1px solid var(--cor-borda);
    padding: 20px 0;
    margin-top: 40px;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
}

.footer-content p {
    margin: 0;
    color: var(--cor-texto-secundario);
    font-size: 14px;
}

.theme-selector {
    display: flex;
    align-items: center;
    gap: 8px;
}

.theme-selector label {
    font-size: 14px;
    color: var(--cor-texto-secundario);
}

.form-control-minimal {
    padding: 6px 10px;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-borda);
    background-color: var(--cor-superficie);
    font-family: var(--fonte-principal);
    font-size: 14px;
    cursor: pointer;
}
.form-control-minimal:focus {
    outline: none;
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
}

/* Responsividade para o rodapé */
@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        gap: 15px;
    }
}



/* Container do Funil */
.funnel-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%; /* Ocupa toda a largura disponível */
    padding: 20px;
    /* Garante que o padding do container não aumente sua largura total */
    box-sizing: border-box;
}

/* A barra de cada etapa */
.funnel-step {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #e0e7ff 0%, #eff6ff 100%); /* Azul suave */
    border: 1px solid #dbeafe;
    padding: 12px 20px;
    margin-bottom: 2px;
    border-radius: 8px;
    color: #1e3a8a;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
    transition: transform 0.2s;

    /* --- A CORREÇÃO PRINCIPAL --- */
    /* Isso garante que o padding e a borda sejam incluídos na largura total */
    box-sizing: border-box;

    /* Garante que a barra nunca exceda a largura do seu container pai */
    max-width: 100%;
}

.funnel-step:hover {
    transform: scale(1.02);
    border-color: var(--cor-primaria); /* Sua cor principal */
    background: #fff;
}

/* Textos dentro da barra */
.funnel-label { font-size: 14px; font-weight: 600; }
.funnel-metrics { text-align: right; }
.funnel-count { font-weight: normal; font-size: 12px; display: block; color: var(--cor-texto-principal); }
.funnel-rate { font-size: 11px; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; }

/* A seta de conexão entre as barras */
.funnel-arrow-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: -2px 0 6px 0;
}

.funnel-arrow {
    width: 0; 
    height: 0; 
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #cbd5e1;
}

/* Indicador visual de perda (opcional, mostra quantos % perderam) */
.conversion-badge {
    background-color: #dcfce7;
    color: #166534;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px;
}
.dash-lead-detalhes{
    display: block;
    margin-top: 3px;
    font-size: 12px!important;
    opacity: 0.5;
}
.dash-lead-detalhes .badge{font-size: 11px!Important;}

/* =============================================== */
/* BOTÕES E AÇÕES (WHATSAPP, ETC)                  */
/* =============================================== */

/* Botão Específico do WhatsApp */
.btn-whatsapp {
    background-color: #25D366;
    color: #ffffff;
    border: 1px solid #1da851;
    font-weight: 600;
}
.btn-whatsapp:hover {
    background-color: #1da851;
    color: #ffffff;
}

/* Divisor dentro de Menus Dropdown */
.dropdown-label {
    padding: 8px 16px 4px 16px;
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Ajuste de Margens e Espaçamentos Úteis */
.mt-15 { margin-top: 15px; }
.mb-15 { margin-bottom: 15px; }
.flex-center { display: flex; align-items: center; gap: 5px; }

/* =============================================== */
/* MENU DROPDOWN (WHATSAPP E OUTROS)               */
/* =============================================== */

.dropdown-acoes {
    position: relative;
    display: inline-block;
}

.dropdown-menu {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 5px;
    background-color: #ffffff;
    min-width: 220px;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    z-index: 1000;
    padding: 5px 0;
}

/* A classe .show é adicionada pelo JavaScript para exibir o menu */
.dropdown-menu.show {
    display: block;
    animation: fadeInDown 0.15s ease-out forwards;
}

/* Resetando o estilo nativo do botão para parecer um link de menu */
.dropdown-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 16px;
    font-size: 13px;
    color: #334155;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    font-family: inherit;
}

.dropdown-item:hover {
    background-color: #f1f5f9;
    color: #0f172a;
}

.dropdown-divider {
    height: 1px;
    background-color: #e2e8f0;
    margin: 5px 0;
}

.dropdown-label {
    padding: 8px 16px 4px 16px;
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =============================================== */
/* ALINHAMENTOS FLEX E CORREÇÃO DE BOTÕES          */
/* =============================================== */

/* Alinha itens nas extremidades (Telefone na esquerda, Botão na direita) */
.flex-row-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* Faz o menu abrir para a esquerda para não vazar da tela */
.dropdown-menu-right {
    right: 0;
    left: auto;
}

/* Força a limpeza do estilo padrão do navegador nos botões do menu */
button.dropdown-item {
    background-color: transparent !important;
    border: none !important;
    width: 100%;
    text-align: left;
    padding: 10px 16px;
    font-size: 13px;
    color: #334155;
    cursor: pointer;
    font-family: inherit;
}
button.dropdown-item:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}