/* Reset básico */
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

body {
    /* Configuração da nova imagem de fundo */
    background-image: url('../Imagens/background.png'); /* Caminho relativo saindo da pasta CSS */
    background-repeat: no-repeat; /* Não repete a imagem */
    background-position: center center; /* Centraliza a imagem */
    background-size: cover; /* Faz a imagem esticar para cobrir toda a tela, sem distorcer */
    background-attachment: fixed; /* (Opcional) Deixa o fundo fixo quando a página rola */
    background-color: #f4f6f9; /* Uma cor de fundo de reserva caso a imagem demore a carregar */

    /* Configurações de layout (manter essas) */
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    overflow-x: hidden; /* Evita barra de rolagem horizontal indesejada */
}

.main-container {
    position: relative;
    width: 100%;
    max-width: 400px; /* Largura ideal para o card central */
    text-align: center;
}

/* Logo no topo */
.logo-area {
    margin-bottom: 30px;
}
.logo-area img {
    max-width: 250px; /* Ajuste conforme sua logo */
    height: auto;
}

/* O Card Branco */
.auth-card {
    background: white;
    padding: 40px 30px;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05); /* Sombra suave */
    position: relative;
    z-index: 2;
}

/* Campos de input */
.input-group { margin-bottom: 15px; }

input, select, textarea {
    width: 100%; /* Garante que todos ocupem a largura total */
    padding: 15px; /* Espaçamento interno igual para todos */
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    outline: none;
    transition: border-color 0.3s;
    font-family: inherit; /* Garante que usem a mesma fonte do resto do site */
    background-color: white; /* Garante fundo branco */
}

/* Adicione também esta regra logo abaixo para o textarea específico */
textarea {
    resize: vertical; /* Permite redimensionar apenas na vertical */
    height: 150px; /* Altura padrão inicial */
}

input:focus { border-color: #00c2e0; }

/* Botão Principal */
.btn-primary {
    width: 100%;
    padding: 15px;
    background-color: #00c2e0; /* Azul ciano da imagem */
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s;
    margin-top: 10px;
}

.btn-primary:hover { background-color: #00a0bd; }

/* Links */
.links {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.links a {
    text-decoration: none;
    color: #334;
    font-size: 14px;
}

.links a.destaque {
    color: #333;
    font-weight: bold;
    text-decoration: underline;
}

/* --- ELEMENTOS DECORATIVOS (SETA E ÍCONES) --- */

/* Animação da Seta */
@keyframes bounceArrow {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(-10px, 10px) rotate(-5deg); }
}

.arrow-decor {
    position: absolute;
    top: -60px; /* Ajuste conforme o tamanho da sua imagem */
    right: -80px;
    width: 80px;
    animation: bounceArrow 2s infinite ease-in-out;
    z-index: 1;
    opacity: 0.8;
}

/* Ícones Laterais (Coração, Carro, Mão) */
.side-icons {
    position: absolute;
    right: -80px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.icon-circle {
    width: 50px;
    height: 50px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-circle img {
    width: 24px;
    height: 24px;
}

/* --- RESPONSIVIDADE (CELULAR) --- */
@media (max-width: 600px) {
    /* No celular, escondemos os ícones laterais para não quebrar o layout,
       mas mantemos a seta se houver espaço ou a ajustamos */
    .side-icons { display: none; }
    .arrow-decor { 
        right: 0; 
        top: -50px; 
        width: 60px;
    }
}

/* Mensagens de Erro/Sucesso */
.alert {
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 5px;
    font-size: 14px;
}
.alert.error { background: #ffebee; color: #c62828; }
.alert.success { background: #e8f5e9; color: #2e7d32; }

@media (min-width: 768px) {

    /* 1. Aumenta a largura do container principal apenas na página de cadastro */
    body.page-cadastro .main-container {
        max-width: 700px; /* O card ficará mais largo */
    }

    /* 2. Transforma o formulário em um Grid de 2 colunas */
    body.page-cadastro .auth-card form {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Cria duas colunas de tamanhos iguais */
        gap: 20px; /* Espaço entre as colunas e linhas */
    }

    /* 3. Itens que devem ocupar a largura total (as duas colunas) */
    /* A linha divisória (hr), o botão de cadastrar e a mensagem de alerta */
    body.page-cadastro .auth-card form hr,
    body.page-cadastro .auth-card form button,
    body.page-cadastro .alert {
        grid-column: span 2; /* Faz o elemento esticar pelas 2 colunas */
    }

    /* Ajuste opcional para o botão não ficar tão grudado na linha acima no grid */
    body.page-cadastro .btn-primary {
        margin-top: 10px;
    }
}

/* =========================================
   ESTILOS DO DASHBOARD (PAINEL DO USUÁRIO)
   ========================================= */

/* Ajuste do Body específico para o dashboard */
body.dashboard-body {
    background-color: #f4f6f9; /* Fundo cinza claro */
    background-image: none; /* Remove a imagem de fundo de bolinhas do login */
    display: block; /* Remove o flex center do login */
    padding: 0;
}

/* --- CABEÇALHO (HEADER) --- */
.dashboard-header {
    background: white;
    height: 70px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.logo-brand img {
    max-height: 50px; /* Ajuste a altura da logo no header */
    width: auto;
}

.user-nav {
    color: #555;
    font-size: 16px;
}

.user-name i { margin-right: 8px; color: #00c2e0; }
.separator { margin: 0 10px; color: #ccc; }
.logout-link { color: #333; text-decoration: none; font-weight: 600; }
.logout-link:hover { color: #d9534f; }


/* --- ÁREA DE CONTEÚDO PRINCIPAL --- */
.dashboard-content {
    margin-top: 70px; /* Espaço para não ficar debaixo do header fixo */
    padding: 30px 20px;
}

.content-wrapper {
    max-width: 1200px;
    margin: 0 auto;
}


/* --- KPI CARDS (GRID) --- */
.kpi-section.grid-4 {
    display: grid;
    /* Cria 4 colunas que se ajustam automaticamente, mínimo de 250px cada */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    margin-bottom: 30px;
}

.kpi-card {
    background: white;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.kpi-info h3 {
    font-size: 14px;
    color: #777;
    font-weight: normal;
    margin-bottom: 10px;
}

.kpi-number {
    font-size: 28px;
    font-weight: 800;
    color: #333;
}

/* Ícones dos Cards */
.kpi-icon {
    font-size: 32px;
    opacity: 0.8;
}
.icon-blue { color: #00c2e0; }
.icon-orange { color: #ffab00; }
.icon-green { color: #00c853; }
.icon-cyan { color: #00e5ff; }

/* Estilo especial para o card de comissão */
.commission-highlight {
    /* Inverte a ordem para o ícone ficar na esquerda, conforme o design */
    flex-direction: row-reverse; 
}
.commission-highlight .kpi-number { color: #00c2e0; }
.big-icon { font-size: 48px; }
.text-right { text-align: right; }


/* --- BARRA DE AÇÕES E FILTROS --- */
.actions-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    flex-wrap: wrap; /* Permite quebrar linha em telas pequenas */
    gap: 20px;
}

.btn-action {
    width: auto; /* Sobrescreve o width:100% do login */
    padding: 12px 25px;
    margin-top: 0;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.filters { color: #777; }
.filter-link { color: #777; text-decoration: none; margin: 0 5px; }
.filter-link.active, .filter-link:hover { color: #00c2e0; font-weight: bold; text-decoration: underline; }


/* --- TABELA DE DADOS --- */
.card-box {
    background: white;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    overflow-x: auto; /* Barra de rolagem horizontal se a tabela for muito larga */
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th, .data-table td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.data-table th {
    font-weight: 600;
    color: #555;
    font-size: 14px;
}

.data-table tbody tr:hover { background-color: #fcfcfc; }
.font-bold { font-weight: 700; color: #333; }


/* --- STATUS BADGES (Etiquetas Coloridas) --- */
.status-badge {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    color: white;
    display: inline-block;
    white-space: nowrap; /* Evita quebra de linha dentro do badge */
}

.status-green { background-color: #00c853; }
.status-orange { background-color: #ffab00; }
.status-red { background-color: #d9534f; }


/* --- RESPONSIVIDADE DO DASHBOARD --- */
@media (max-width: 768px) {
    .header-container { padding: 0 15px; }
    .user-name { display: none; } /* Esconde o nome no celular, deixa só o 'Sair' */
    
    .kpi-section.grid-4 { grid-template-columns: 1fr; } /* Cards um embaixo do outro no celular */
    
    .actions-bar { flex-direction: column; align-items: stretch; }
    .btn-action { width: 100%; }
    .filters { text-align: center; }

    .data-table th, .data-table td { padding: 10px; font-size: 13px; }
}


/* =========================================
   ESTILOS DA PÁGINA VER INDICAÇÃO & CHAT
   ========================================= */

/* Detalhes da Indicação */
.details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.detail-item h4 { font-size: 14px; color: #777; margin-bottom: 5px; font-weight: normal; }
.detail-item p { font-size: 16px; color: #333; font-weight: 600; }
.obs-box { background: #f9f9f9; padding: 15px; border-radius: 8px; border: 1px solid #eee; font-style: italic; color: #555; }

/* Área de Chat */
.chat-container {
    background: #f4f6f9;
    border-radius: 15px;
    border: 1px solid #eee;
    overflow: hidden; /* Para a barra de rolagem ficar dentro */
}

.chat-messages {
    height: 300px; /* Altura fixa para o histórico */
    overflow-y: auto; /* Barra de rolagem se tiver muitas mensagens */
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Balões de Mensagem */
.message-bubble {
    max-width: 80%;
    padding: 12px 15px;
    border-radius: 15px;
    position: relative;
    font-size: 14px;
    line-height: 1.4;
}

.message-meta {
    display: block;
    font-size: 11px;
    margin-bottom: 5px;
    opacity: 0.8;
    font-weight: bold;
}

.message-time {
    font-size: 10px;
    float: right;
    margin-top: 5px;
    opacity: 0.6;
}

/* Mensagens do Corretor (Alinhadas à Esquerda, Cinza) */
.msg-corretor {
    align-self: flex-start;
    background: #e9ecef;
    color: #333;
    border-bottom-left-radius: 2px;
}

/* Mensagens do Afiliado/Usuário (Alinhadas à Direita, Azul) */
.msg-afiliado {
    align-self: flex-end;
    background: #00c2e0;
    color: white;
    border-bottom-right-radius: 2px;
}
.msg-afiliado .message-meta, .msg-afiliado .message-time { color: rgba(255,255,255,0.9); }

/* Formulário de Envio */
.chat-input-area {
    padding: 15px;
    background: white;
    border-top: 1px solid #eee;
    display: flex;
    gap: 10px;
}
.chat-input-area textarea {
    height: 50px; /* Altura menor para o input do chat */
    resize: none;
    margin-bottom: 0; /* Remove margem padrão */
}
.btn-send {
    width: auto;
    padding: 0 25px;
    margin: 0;
    display: flex; align-items: center; justify-content: center;
}


/* =========================================
   ESTILOS DO PAINEL ADMINISTRATIVO (CORRETOR)
   ========================================= */

/* Reset do body para o layout admin */
body.admin-body {
    background-color: #f4f6f9;
    background-image: none;
    display: block;
    padding: 0;
}

/* Layout principal usando CSS Grid */
.admin-wrapper {
    display: grid;
    /* Sidebar fixa de 260px, conteúdo ocupa o resto */
    grid-template-columns: 260px 1fr;
    min-height: 100vh;
}

/* --- SIDEBAR (BARRA LATERAL) --- */
.admin-sidebar {
    background-color: #1a2b4b; /* Azul escuro da marca */
    color: white;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.sidebar-header {
    margin-bottom: 40px;
    text-align: center;
}
.sidebar-header img { max-width: 180px; height: auto; }

.sidebar-menu ul { list-style: none; padding: 0; display: flex; flex-direction: column; height: 100%;}
.sidebar-menu li { margin-bottom: 10px; }
.menu-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    color: #b0bec5;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s;
    font-weight: 500;
}
.icon-width { width: 25px; text-align: center; margin-right: 10px; }
/* Hover e Item Ativo */
.menu-item:hover, .menu-item.active {
    background-color: rgba(255,255,255,0.1);
    color: white;
}
.menu-item.active { background-color: #00c2e0; /* Azul ciano para destaque */ }


/* --- CONTEÚDO PRINCIPAL ADMIN --- */
.admin-main-content {
    padding: 30px;
    overflow-x: hidden; /* Evita rolagem horizontal na página toda */
}

.admin-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}
.page-title { font-size: 24px; color: #333; }
.admin-user-info { color: #666; font-size: 14px; }


/* --- BARRA DE FILTROS --- */
.admin-filters {
    display: flex;
    gap: 20px;
    align-items: flex-end;
    margin-bottom: 25px;
    flex-wrap: wrap; /* Importante para responsividade */
    padding: 20px;
}
.filter-group { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 150px; }
.filter-group label { font-size: 13px; font-weight: 600; color: #555; }
.filter-group select, .filter-group input { padding: 10px; margin: 0; }

.search-group { flex: 2; position: relative; display: flex; align-items: center; }
.search-group input { padding-right: 40px; }
.btn-search {
    position: absolute;
    right: 10px;
    background: none; border: none; color: #999; cursor: pointer;
}

/* --- TABELA ADMIN ESPECÍFICA --- */
.admin-table th { background: #f8f9fa; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px;}
.admin-table td { vertical-align: middle; }
.actions-cell { text-align: center; white-space: nowrap; }

/* Botões Pequenos da Tabela */
.btn-admin {
    padding: 8px 15px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background 0.2s;
    display: inline-flex; align-items: center; gap: 5px;
}
.btn-blue { background-color: #1a56db; color: white; }
.btn-blue:hover { background-color: #1342a8; }
.btn-gray { background-color: #78909c; color: white; }
.btn-gray:hover { background-color: #546e7a; }


/* =========================================
   RESPONSIVIDADE DO PAINEL ADMIN
   ========================================= */
@media (max-width: 992px) {
    /* Em tablets, a sidebar fica mais estreita e só mostra ícones */
    .admin-wrapper { grid-template-columns: 80px 1fr; }
    .sidebar-header img { max-width: 50px; }
    .menu-item { justify-content: center; padding: 15px; }
    .menu-item span, .sidebar-header { display: none; } /* Esconde texto se tiver */
    .icon-width { margin-right: 0; font-size: 20px; }
}

@media (max-width: 768px) {
    /* No celular, o layout vira uma coluna só. A sidebar vai para o topo. */
    .admin-wrapper { grid-template-columns: 1fr; }
    .admin-sidebar { 
        padding: 10px 20px; 
        flex-direction: row; /* Itens lado a lado no topo */
        align-items: center;
        justify-content: space-between;
    }
    .sidebar-header { display: block; margin: 0; }
    .sidebar-header img { max-width: 100px; filter: brightness(0) invert(1); display: block; }
    
    /* Menu horizontal simples no celular para V1 */
    .sidebar-menu ul { flex-direction: row; height: auto; gap: 10px; margin-left: auto;}
    .sidebar-menu li { margin: 0; }
    .menu-item { padding: 10px; }
    
    .admin-topbar { flex-direction: column; align-items: flex-start; gap: 10px; }
    .admin-main-content { padding: 20px 15px; }
    
    /* Tabela com rolagem horizontal */
    .table-container { overflow-x: auto; }
}


/* =========================================
   LAYOUT DE TELA DIVIDIDA (ATENDIMENTO)
   ========================================= */
.split-layout {
    display: grid;
    /* Define 2 colunas: a esquerda com 40% e a direita com 60% do espaço */
    grid-template-columns: 2fr 3fr; 
    gap: 25px; /* Espaço entre as colunas */
    align-items: start; /* Alinha os cards ao topo */
}

/* Torna o chat mais alto para aproveitar o espaço lateral */
.chat-tall {
    height: 600px !important; /* Aumentamos de 400px para 600px */
}

/* Compactar formulários de upload */
.upload-box-compact {
    border: 2px dashed #ddd;
    padding: 15px;
    background: #f9f9f9;
    border-radius: 6px;
    font-size: 13px;
}
.upload-box-compact input[type="file"] {
    font-size: 12px;
    margin-bottom: 8px;
}
.upload-box-compact .btn-primary {
    padding: 6px 12px;
    font-size: 12px;
    width: auto;
}

/* RESPONSIVIDADE: Em telas menores (tablets/celulares), volta a empilhar */
@media (max-width: 992px) {
    .split-layout {
        grid-template-columns: 1fr; /* Volta para 1 coluna só */
    }
    .chat-tall {
        height: 450px !important; /* Reduz um pouco a altura do chat no mobile */
    }
}

/* =========================================
   OTIMIZAÇÃO DE ESPAÇO (UPLOAD COMPACTO)
   ========================================= */

/* Formulário de upload em uma única linha */
.upload-inline-form {
    display: flex;
    gap: 8px;
    align-items: center;
    background: #fff;
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* Ajusta o campo de input file para ocupar o espaço e ser pequeno */
.upload-inline-form input[type="file"] {
    flex-grow: 1; /* Ocupa o espaço sobrando */
    font-size: 11px;
    padding: 2px;
    margin: 0; /* Remove margens padrão */
}

/* Botão de envio compacto */
.btn-compact {
    padding: 4px 10px;
    font-size: 11px;
    height: auto;
    line-height: normal;
    width: auto;
}

/* Container de ações (botões Download e Deletar juntos) */
.actions-group {
    display: flex;
    gap: 5px;
    align-items: center;
}

/* Botão de deletar pequeno e vermelho */
.btn-danger-small {
    background-color: #e74c3c;
    color: white;
    border: none;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    transition: background 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-danger-small:hover {
    background-color: #c0392b;
}

/* Reduzir paddings dos blocos de arquivo existentes */
.compact-file-block {
    padding: 8px 10px !important; /* Força padding menor */
    margin-bottom: 8px !important;
}

/* =========================================
   MODAIS (Para Produtos e outros CRUDs)
   ========================================= */
/* O fundo escuro atrás do modal */
.modal-overlay {
    display: none; /* Escondido por padrão */
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

/* A caixa do modal em si */
.modal-box {
    background: #fff;
    padding: 25px;
    border-radius: 8px;
    width: 400px;
    max-width: 90%;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    position: relative;
}

/* Cabeçalho do modal */
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.modal-header h3 { margin: 0; color: #333; }

/* Botão de fechar (X) */
.close-modal-btn {
    background: none; border: none; font-size: 20px; color: #999; cursor: pointer;
}

/* Estilos de formulário dentro do modal */
.modal-form-group { margin-bottom: 15px; }
.modal-form-group label { display: block; margin-bottom: 5px; font-weight: 600; color: #555; font-size: 13px; }
.modal-form-group input {
    width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box;
}

/* Rodapé com botões de ação */
.modal-footer {
    display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px;
}

/* Botão de cancelar */
.btn-cancel {
    background: #eee; color: #333; border: none; padding: 8px 15px; border-radius: 4px; cursor: pointer;
}

/* Classe utilitária para mostrar o modal */
.show-modal { display: flex !important; }


/* =========================================
   BOTÕES PEQUENOS DE AÇÃO (Bloquear/Ativar)
   ========================================= */
/* Botão Verde Pequeno (Ativar) */
.btn-success-small {
    background-color: #00c853; /* Verde */
    color: white;
    border: none;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    transition: background 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-success-small:hover {
    background-color: #00a844;
}

/* O .btn-danger-small já foi criado no passo de produtos, 
   mas se não tiver, ele é assim: */
/*
.btn-danger-small {
    background-color: #e74c3c;
    color: white;
    border: none;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    transition: background 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-danger-small:hover {
    background-color: #c0392b;
}
*/

/* =========================================
   DROPDOWN DE USUÁRIO (Cabeçalho)
   ========================================= */
.user-dropdown {
    position: relative;
    display: inline-block;
}

/* O container do nome e ícone que será clicado */
.user-trigger {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border-radius: 4px;
    transition: background-color 0.2s;
}
.user-trigger:hover {
    background-color: rgba(255,255,255,0.1); /* Efeito sutil ao passar o mouse */
}

/* O menu escondido */
.dropdown-menu {
    display: none; /* Escondido por padrão */
    position: absolute;
    right: 0;
    top: 100%; /* Logo abaixo do trigger */
    background-color: #fff;
    min-width: 180px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
    z-index: 100;
    border-radius: 6px;
    overflow: hidden;
    margin-top: 8px;
    border: 1px solid #eee;
}

/* Itens do menu */
.dropdown-menu a, 
.dropdown-menu button.menu-btn {
    color: #333;
    padding: 12px 16px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 14px;
    font-family: inherit; /* Herda a fonte do corpo */
}

.dropdown-menu a:hover, 
.dropdown-menu button.menu-btn:hover {
    background-color: #f5f5f5;
    color: #00c2e0; /* Cor de destaque do tema */
}

/* Classe para mostrar o menu (via JS) */
.show-dropdown {
    display: block;
    animation: fadeIn 0.2s ease-in-out;
}

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

/* =========================================
   BOTÕES DE AÇÃO ESPECÍFICOS
   ========================================= */
/* Botão WhatsApp Verde */
.btn-wpp {
    background-color: #005d11; /* Verde oficial do WhatsApp */
    color: white;
    border: none;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background-color 0.2s;
}
.btn-wpp:hover {
    background-color: #128C7E; /* Verde um pouco mais escuro no hover */
}

/* =========================================
   RESPONSIVIDADE DA TABELA (Transforma em Cards no Mobile)
   ========================================= */
@media (max-width: 768px) {
    /* Força a tabela e seus elementos a se comportarem como blocos */
    .table-container table, 
    .table-container thead, 
    .table-container tbody, 
    .table-container th, 
    .table-container td, 
    .table-container tr {
        display: block;
    }

    /* Esconde o cabeçalho original da tabela (Data, Cliente, etc.) */
    .table-container thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    /* Estiliza cada linha (tr) como se fosse um cartão */
    .table-container tr {
        border: 1px solid #eee;
        border-radius: 8px;
        margin-bottom: 15px; /* Espaço entre os cartões */
        background: #fff;
        padding: 5px 0; /* Um pouco de respiro interno */
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }

    /* Estiliza cada célula (td) para parecer uma linha do cartão */
    .table-container td {
        /* Faz a célula ocupar toda a largura e ter uma borda embaixo */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50% !important; /* Abre espaço na esquerda para o rótulo */
        padding-top: 12px !important;
        padding-bottom: 12px !important;
        text-align: right; /* Alinha o conteúdo à direita */
        white-space: normal; /* Permite quebra de texto se for longo */
        display: flex;
        justify-content: flex-end;
        align-items: center;
        min-height: 45px;
    }

    .table-container td:last-child {
        border-bottom: 0; /* Remove a borda do último item do cartão */
    }

    /* INSERE O RÓTULO (A MÁGICA ACONTECE AQUI) */
    /* Usa o atributo 'data-label' que vamos colocar no HTML para criar o título da linha */
    .table-container td:before {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 15px; /* Posição do rótulo na esquerda */
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: 700; /* Negrito para o rótulo */
        color: #555;
        font-size: 13px;
        content: attr(data-label); /* Pega o texto do atributo HTML */
    }

    /* Ajuste específico para o link do nome do cliente não quebrar o layout */
    .table-container td a {
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        text-align: right;
    }
    
    /* Ajuste para o badge de status ficar alinhado */
    .table-container td .status-badge {
        margin: 0;
    }
}

/* =========================================
   OTIMIZAÇÃO DO CABEÇALHO DE ATENDIMENTO (MOBILE)
   ========================================= */
@media (max-width: 768px) {
    /* Altera o container principal para coluna */
    .mobile-compact-header {
        display: flex;
        flex-direction: column;
        gap: 10px; /* Espaço entre o nome e o formulário */
        padding-bottom: 10px !important;
        margin-bottom: 10px !important;
    }

    /* Esconde a data e hora para economizar espaço */
    .mobile-compact-header small {
        display: none;
    }

    /* Ajusta o título "Indicado por" */
    .mobile-compact-header h3 {
        font-size: 14px !important; /* Fonte menor */
        margin-bottom: 0 !important; /* Remove margem inferior */
    }

    /* --- FORMULÁRIO DE STATUS COMPACTO --- */
    .mobile-compact-header .status-change-form {
        flex-direction: column; /* Itens um embaixo do outro */
        align-items: stretch; /* Estica para ocupar a largura total */
        gap: 8px; /* Espaço entre o select e o botão */
        padding: 0 !important; /* Remove padding extra do container */
        border: none !important; /* Remove borda */
        background: transparent !important; /* Remove fundo cinza */
    }

    /* Esconde o label "Status:" */
    .mobile-compact-header .status-change-form label {
        display: none;
    }

    /* O seletor ocupa 100% da largura */
    .mobile-compact-header .status-change-form select {
        width: 100%;
        height: 40px; /* Altura maior para facilitar o toque */
        font-size: 14px;
    }

    /* O botão "Salvar" ocupa 100% da largura */
    .mobile-compact-header .status-change-form .btn-update-status {
        width: 100%;
        height: 40px; /* Mesma altura do seletor */
        font-size: 14px;
    }
}

/* --- NOVO LAYOUT DO DASHBOARD (3 em cima, 1 em baixo) --- */

.kpi-section-custom {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 30px;
}

/* O container dos 3 cards de cima */
.kpi-mini-group {
    display: grid;
    /* Cria 3 colunas de tamanho igual */
    grid-template-columns: 1fr 1fr 1fr; 
    gap: 15px;
}

/* Ajustes visuais para os cards menores */
.mini-card {
    padding: 15px !important; /* Reduz padding para caber */
    flex-direction: column; /* No mobile, empilha texto e ícone se necessário */
    align-items: flex-start;
    justify-content: center;
    text-align: left;
}

.mini-card .kpi-info h3 {
    font-size: 12px;
    white-space: nowrap; /* Evita quebra de linha no título */
    margin-bottom: 5px;
}

.mini-card .kpi-number {
    font-size: 24px; /* Número levemente menor */
}

.mini-card .mini-icon {
    font-size: 20px;
    position: absolute;
    top: 15px;
    right: 15px;
    opacity: 0.5;
}

/* O Card de Comissão ocupa largura total */
.full-width-card {
    width: 100%;
    padding: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* --- RESPONSIVIDADE ESPECÍFICA PARA CELULAR --- */
@media (max-width: 600px) {
    .kpi-mini-group {
        gap: 10px; /* Menos espaço entre cards no celular */
    }

    .mini-card {
        padding: 10px !important;
        position: relative; /* Para posicionar o ícone */
        min-height: 80px;
    }

    .mini-card .kpi-info h3 {
        font-size: 11px; /* Fonte menor no título */
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mini-card .kpi-number {
        font-size: 20px;
        margin-top: 5px;
    }

    /* Esconde o ícone nos cards pequenos no celular para limpar o visual */
    /* Se preferir manter, remova o display: none */
    .mini-card .mini-icon {
        display: none; 
    }
}

/* Bolinha de Notificação Vermelha */
.badge-notificacao {
    background-color: #ff3b30;
    color: white;
    border-radius: 50%;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: bold;
    min-width: 20px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    
    /* Para posicionamento absoluto no card mobile */
    position: absolute;
    top: -8px;
    right: -8px;
    z-index: 10;
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Animação de entrada */
@keyframes popIn {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}

/* Ajuste para tabela desktop (posição relativa ao texto) */
.badge-inline {
    position: static; /* Reseta o absoluto */
    display: inline-block;
    margin-left: 8px;
    vertical-align: middle;
}