/*
 * style.css
 * Folha de estilo principal para o Aplicativo Rodrigo Hina
 * Versão: 4.4 (Correção Definitiva do Overlay e Z-Index)
 */

/* --- 1. Configuração Global e Fontes --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

body {
    font-family: 'Inter', sans-serif;
    color: #333;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: #f0f4f9;
}

*, *:before, *:after {
    box-sizing: border-box;
}

/* --- 2. LAYOUT DO LOGIN --- */
/* ... (todo o seu código de login está ótimo, sem mudanças) ... */
body:not(.app-layout) {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1rem;
    background-color: #f3f4f6;
}
.login-container {
    background-color: #ffffff;
    padding: 2rem 2.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    width: 100%;
    max-width: 420px;
    text-align: center;
}
.login-container .logo {
    max-width: 160px;
    height: auto;
    margin: 0 auto 1.5rem auto;
}
.login-container h2 {
    font-size: 20px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.5rem;
}
.login-container .login-container p {
    color: #4b5563;
    margin-bottom: 1.5rem;
    font-size: 1rem;
}
.login-container .form-group {
    margin-bottom: 0.5rem; /* Ajuste do Rodrigo (v3.2) */
}
.login-container input[type="text"],
.login-container input[type="password"],
.login-container input[type="email"] {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 1rem;
    text-align: center;
    box-sizing: border-box;
    margin-bottom: 1.25rem;
}

.btn-acessar {
    display: block;
    width: 100%;
    padding: 0.875rem 1rem;
    background-color: #3b82f6; 
    color: #ffffff;
    border: none;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.btn-acessar:hover {
    background-color: #2563eb; 
}
.form-options {
    display: flex; 
    justify-content: center; 
    align-items: center;
    font-size: 0.9rem;
    color: #4b5563;
    margin: 0.7rem 0; /* Ajuste do Rodrigo (v3.2) */
}
.form-options .remember-me {
    display: inline-flex; 
    align-items: center;
    font-weight: 500;
}
.form-options .remember-me input {
    margin: 0 0.4rem 0 0;
    width: auto;
    margin-bottom: 0; 
}
.form-options .remember-me label {
    margin: 0;
}
.form-options .separator {
    margin: 0 0.75rem;
    color: #9ca3af;
}
.form-options .forgot-pass a {
    color: #4b5563;
    text-decoration: none;
    font-weight: 500;
}
.form-options .forgot-pass a:hover {
    text-decoration: underline;
}
.google-btn {
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    padding: 0.75rem 1.5rem; 
    background-color: #ffffff; 
    color: #374151; 
    border: 1px solid #d1d5db; 
    border-radius: 0.5rem; 
    text-decoration: none; 
    font-weight: 600; 
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); 
    transition: background-color 0.2s;
}
.google-btn svg {
    width: 20px; 
    height: 20px; 
    margin-right: 0.75rem;
}
.google-btn:hover {
    background-color: #f9fafb;
}
.footer-assinatura {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.875rem;
    color: #9ca3af;
}
.footer-assinatura .emoji-flag {
    width: 1em;
    height: 1em;
    vertical-align: -0.1em;
    margin: 0 0.15em;
}

/* --- 3. LAYOUT DA APLICAÇÃO (SIDEBAR) --- */
body.app-layout {
    display: flex;
}
.sidebar {
    width: 200px;
    background-color: #d6d6d6;
    color: #e5e7eb;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    transition: width 0.3s ease-in-out, transform 0.3s ease-in-out;
    z-index: 100;
}
.sidebar-header {
    padding: 17px;
    text-align: center;
    border-bottom: 1px solid #ffffff;
    display: flex; 
    justify-content: center;
    align-items: center;
    position: relative;
}
.sidebar-logo {
    font-size: 1.5rem;
    color: #fff;
    font-weight: 700;
    margin: 0;
    text-decoration: none;
    display: block;
    max-width: 100%; 
}
.sidebar-logo img {
    max-height: 35px;
    width: auto;
    transition: max-height 0.3s;
}
.sidebar-logo .logo-full {
    display: block;
    max-height: 35px;
    width: 110px;
}
.sidebar-logo .logo-collapsed {
    display: none;
    max-height: 25px;
}
.sidebar-nav {
    flex-grow: 1;
    overflow-y: auto;
}
.sidebar-nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.sidebar-nav a {
    display: flex;
    align-items: center;
    padding: 0.9rem 1.5rem;
    color: #000000;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.2s, color 0.2s;
}
.sidebar-nav a:hover, .sidebar-nav li.active > a {
    background-color: #999999;
    color: #ffffff;
}
.sidebar-nav li.active > a {
    background-color: #999999;
    color: #ffffff;
}
.sidebar-nav a svg {
    width: 24px;
    height: 24px;
    margin-right: 1rem;
    fill: currentColor;
    opacity: 0.7;
}
.sidebar-footer {
    padding: 1rem;
    border-top: 1px solid #ffffff;
    text-align: center;
    flex-shrink: 0;
}
.sidebar-toggle-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #000000;
    width: 100%;
}

/* * ==============================================================
 * !!! MUDANÇA CRÍTICA 1 (CSS FALTANDO) !!!
 * Este bloco de código para o #sidebar-overlay estava 
 * faltando no seu arquivo v4.3.
 * ==============================================================
 */
#sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Fundo escuro semi-transparente */
  
  /* Oculto por padrão */
  opacity: 0;
  visibility: hidden;
  pointer-events: none; /* Não pode ser clicado quando oculto */
  
  /* CAMADA CORRETA: */
  z-index: 99; /* Abaixo da sidebar (100), acima do main-wrapper (90) */
  
  transition: opacity 0.3s ease, visibility 0.3s ease;
}


/* --- 4. LAYOUT GERAL --- */
.main-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-y: auto;
    margin-left: 200px;
    transition: margin-left 0.3s ease-in-out;
    position: relative;
    z-index: 90; 
}
.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    padding: 0.75rem 2rem;
    flex-shrink: 0;

/* --- (NOVO BLOCO) LÓGICA DE FIXAÇÃO (para o V6) --- */
    
    /* MUDANÇA 1: Reative o "position: fixed" */
    position: fixed; 
    top: 0;
    right: 0;
    
    /* MUDANÇA 2: Adicione o "left" para acompanhar a sidebar */
    left: 200px; /* <--- ADICIONE ISSO */
    
    z-index: 1020; /* Camada MAIS ALTA (acima da IA) */
    
    /* ADICIONE 'transform' AQUI */
    transition: left 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.top-bar-hidden {
    transform: translateY(-100%);
}

body.sidebar-collapsed .top-bar {
    left: 80px;
}

/* (v4.3) Botão Hambúrguer (Mobile) */
.mobile-menu-btn {
    display: none; /* ESCONDIDO NO DESKTOP */
    background: none;
    border: none;
    color: #1f2937;
    cursor: pointer;
    padding: 0.5rem;
}

/* ... (O resto do seu CSS está ótimo, sem mudanças) ... */
.top-bar-title {
    flex: 1; /* Ocupa o espaço central */
}
.desktop-title {
    margin: 0;
    font-size: 25px;
    display: block; /* Visível no Desktop */
}
.mobile-logo { 
    display: none; /* Escondido no Desktop */
}
.mobile-logo img {
    height: 25px; /* Altura da logo preta */
    width: auto;
}
.user-info {
    display: flex;
    align-items: center;
}
.user-info .profile-link {
    margin-right: 1rem;
    font-weight: 500;
    color: #1f2937;
    text-decoration: none;
    transition: color 0.2s;
}
.user-info .profile-link:hover {
    color: #3b82f6;
}
.user-info .logout-link {
    color: #6b7280 !important;
    margin-left: -10px;
    display: flex;
    align-items: center;
}
.page-content {
    padding: 2rem;
    /* (NOVA LINHA) Adiciona transição suave para o padding-top (mesmo tempo da sanfona) */
    transition: padding-top 0.4s ease-in-out;
    margin-top: 15px;
}
/* ... (Seções 5, 6, 7, 8, 9, 10, 11, 12 estão OK) ... */
/* --- 5. RODAPÉ E CONTENT-BOX --- */
.app-footer {
    padding: 2rem;
    text-align: center;
    font-size: 0.875rem;
    color: #9ca3af;
    flex-shrink: 0;
}
.app-footer .emoji-flag {
    width: 1em;
    height: 1em;
    vertical-align: -0.1em;
    margin: 0 0.15em;
}
.content-box {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-bottom: 50px;
    margin-top: 30px;
}

/* --- 6. TABELAS DE ADMIN --- */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0;
    table-layout: fixed;
}
.admin-table th, .admin-table td {
    padding: 12px;
    border: 1px solid #e5e7eb;
    text-align: left;
    vertical-align: middle;
}
.admin-table.dashboard-table th:nth-child(1),
.admin-table.dashboard-table td:nth-child(1) { width: 35%; }
.admin-table.dashboard-table th:nth-child(2),
.admin-table.dashboard-table td:nth-child(2) { width: 35%; }
.admin-table.dashboard-table th:nth-child(3),
.admin-table.dashboard-table td:nth-child(3) { width: 30%; }

.admin-table.content-table th:nth-child(1) { width: 30%; } 
.admin-table.content-table th:nth-child(2) { width: 15%; } 
.admin-table.content-table th:nth-child(3) { width: 35%; } 
.admin-table.content-table th:nth-child(4) { width: 20%; text-align: center; } 
.admin-table.content-table td { vertical-align: middle; }
.admin-table.content-table td:nth-child(3) {
    font-size: 0.9rem;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.admin-table.content-table td:nth-child(4) { text-align: center; }

.table-responsive-wrapper {
    overflow-x: auto;
    width: 100%;
}

/* --- 7. REGRAS COLAPSADO (DESKTOP) --- */
body.sidebar-collapsed .main-wrapper {
    margin-left: 80px;
}
body.sidebar-collapsed .sidebar {
    width: 80px;
}
body.sidebar-collapsed .sidebar-header {
    padding: 1rem 0;
}
body.sidebar-collapsed .sidebar-logo .logo-full { display: none; }
body.sidebar-collapsed .sidebar-logo .logo-collapsed { display: block; }
body.sidebar-collapsed .sidebar-nav a span { display: none; }
body.sidebar-collapsed .sidebar-nav a {
    justify-content: center;
    padding: 0.9rem;
}
body.sidebar-collapsed .sidebar-nav a svg { margin-right: 0; }

/* --- 8. FORMULÁRIOS GLOBAIS --- */
.page-content h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 1.5rem;
    color: #1f2937;
}
.page-content label {
    font-weight: 600;
    margin-right: 0.5rem;
    color: #374151;
}
.page-content input[type="text"],
.page-content input[type="url"],
.page-content input[type="email"],
.page-content input[type="password"],
.page-content select,
.page-content textarea {
    padding: 0.6rem 0.8rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 0.95rem;
    font-family: 'Inter', sans-serif;
    transition: border-color 0.2s, box-shadow 0.2s;
    margin: 0;
}
.page-content input[type="text"]:focus,
.page-content input[type="url"]:focus,
.page-content input[type="email"]:focus,
.page-content input[type="password"]:focus,
.page-content select:focus,
.page-content textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}
.page-content textarea {
    width: 100%;
    min-height: 100px;
    resize: vertical;
}
.btn-primary,
.page-content button.btn-criar,
.page-content input[type="submit"] {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background-color: #3b82f6;
    color: #ffffff;
    border: none;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s;
}
.btn-primary:hover,
.page-content button.btn-criar:hover,
.page-content input[type="submit"]:hover {
    background-color: #2563eb;
}
.btn-salvar {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background-color: #10b981;
    color: #ffffff;
    border: none;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s;
}
.btn-salvar:hover { background-color: #059669; }
.btn-cancelar {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background-color: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s;
    margin-left: 0.5rem;
}
.btn-cancelar:hover { background-color: #e5e7eb; }
.form-group {
    margin-bottom: 1.25rem;
}
.form-group label {
    display: block;
    margin-bottom: 0.5rem;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"] {
    width: 100%;
    max-width: 450px;
}
.form-group-checkbox {
    display: flex;
    align-items: center;
    margin-top: 1rem;
}
.form-group-checkbox input[type="checkbox"] {
    width: auto;
    margin: 0 0.5rem 0 0;
}
.form-group-checkbox label {
    margin: 0;
    font-weight: 500;
}

/* --- 9. ESTILOS PÁGINA ADMIN (Específicos) --- */
/* ... (todo o seu código de admin está ótimo, sem mudanças) ... */
.msg-sucesso {
    background-color: #f0fdf4;
    border: 1px solid #a7f3d0;
    color: #059669;
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    font-weight: 500;
}
.msg-erro {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    font-weight: 500;
}
.admin-form .form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 1rem;
}
.admin-form .form-group {
    flex: 1;
    min-width: 250px;
}
.admin-form .form-group label {
    display: block;
    margin-bottom: 0.5rem;
}
.admin-form .form-input {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 0.95rem;
    font-family: 'Inter', sans-serif;
}
.admin-form .form-checkbox {
    display: flex;
    align-items: center;
    margin-top: 2.25rem;
    flex: 1;
}
.admin-form .form-checkbox input { margin: 0 0.5rem 0 0; }
.admin-form .form-checkbox label { margin: 0; font-weight: 500; }

.admin-table th:nth-child(1) { width: 5%; } 
.admin-table th:nth-child(2) { width: 25%; } 
.admin-table th:nth-child(3) { width: 25%; } 
.admin-table th:nth-child(4) { width: 15%; } 
.admin-table th:nth-child(5) { width: 10%; text-align: center; } 
.admin-table th:nth-child(6) { width: 20%; text-align: center; } 
.admin-table td { vertical-align: middle; }
.admin-table td:nth-child(5),
.admin-table td:nth-child(6) { text-align: center; }

.status-level-1, .status-level-10, .status-level-20, .status-level-99, .status-level-5, .status-level-30 {
    padding: 0.3rem 0.6rem;
    border-radius: 0.375rem;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    color: white;
}

.status-level-1 { background-color: #f97316; }  /* Pendente (Laranja) */
.status-level-10 { background-color: #6b7280; } /* Cliente (Cinza) */
.status-level-20 { background-color: #3b82f6; } /* VIP (Azul) */
.status-level-99 { background-color: #10b981; } /* Admin (Verde) */
.status-level-5 { background-color: #f59e0b; } /* Lead (Âmbar) */
.status-level-30 { background-color: #7c3aed; } /* Usuário (Roxo) */

.btn-editar, .btn-recuperar, .btn-apagar {
    display: inline-block;
    padding: 0.5rem 0.8rem;
    font-size: 0.875rem;
    border-radius: 0.375rem;
    text-decoration: none;
    color: white;
    cursor: pointer;
    border: none;
    font-weight: 600;
    margin: 0.25rem;
}
.btn-editar { background-color: #3b82f6; } 
.btn-editar:hover { background-color: #2563eb; }
.btn-recuperar { background-color: #6b7280; } 
.btn-recuperar:hover { background-color: #4b5563; }
.btn-apagar { background-color: #ef4444; } 
.btn-apagar:hover { background-color: #dc2626; }
.btn-apagar:disabled {
    background-color: #d1d5db;
    cursor: not-allowed;
}

/*
 * ==============================================================
 * !!! ADICIONE ESTE NOVO BLOCO (v4.6) !!!
 * Estilos para botões de Ação com Ícones
 * ==============================================================
 */
.btn-icon {
    /* Ajusta o padding para deixar o botão mais "quadrado" */
    padding: 0.5rem; 
    line-height: 1; /* Alinha o ícone verticalmente */
}

.btn-icon svg {
    /* Define o tamanho do ícone */
    width: 20px;
    height: 20px;
    vertical-align: middle; /* Alinha o ícone com o centro do botão */
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}
.checkbox-grid {
    display: block;
    columns: 2;
    gap: 1rem;
    max-width: 800px;
}

/* --- 10. MODAL DE CONFIRMAÇÃO (v3.3) --- */
/* ... (todo o seu código de modal está ótimo, sem mudanças) ... */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 200;
    align-items: center;
    justify-content: center;
}
.modal-box {
    background: #fff;
    border-radius: 0.75rem;
    padding: 2rem;
    width: 90%;
    max-width: 450px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    transform: scale(0.95);
    opacity: 0;
    transition: all 0.2s ease-in-out;
}
.modal-overlay.show {
    display: flex;
}
.modal-overlay.show .modal-box {
    transform: scale(1);
    opacity: 1;
}
.modal-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 0.5rem 0;
}
.modal-body {
    font-size: 1rem;
    color: #4b5563;
    margin-bottom: 1.5rem;
}
.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}
.modal-btn {
    padding: 0.6rem 1.2rem;
    font-weight: 600;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: 0.95rem;
}
.modal-btn-cancel {
    background-color: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
}
.modal-btn-cancel:hover { background-color: #e5e7eb; }
.modal-btn-confirm {
    background-color: #3b82f6; /* Azul (Padrão) */
    color: #fff;
}
.modal-btn-confirm:hover { background-color: #2563eb; }
/* Variação de Perigo (Vermelho) */
.modal-btn-confirm.danger { background-color: #ef4444; }
.modal-btn-confirm.danger:hover { background-color: #dc2626; }

/* --- 11. ESTILOS PÁGINA DE LOGS (v3.4) --- */
/* ... (todo o seu código de logs está ótimo, sem mudanças) ... */
.log-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1.5rem;
    table-layout: fixed;
}
.log-table th {
    background-color: #f9fafb;
    font-weight: 600;
}
.log-table th, .log-table td {
    padding: 12px;
    border: 1px solid #e5e7eb;
    text-align: left;
    vertical-align: top;
    font-size: 0.9rem;
    word-wrap: break-word; /* Quebra a mensagem se for muito longa */
}
.log-table th:nth-child(1) { width: 15%; } /* Timestamp */
.log-table th:nth-child(2) { width: 10%; } /* Nível */
.log-table th:nth-child(3) { width: 75%; } /* Mensagem */

.log-level-badge {
    padding: 0.3rem 0.6rem;
    border-radius: 0.375rem;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    color: white;
    text-align: center;
    display: inline-block;
    min-width: 80px;
}
.log-level-INFO { background-color: #3b82f6; } /* Azul */
.log-level-WARNING { background-color: #f97316; } /* Laranja */
.log-level-ERROR { background-color: #ef4444; } /* Vermelho */
.log-level-CRITICAL { 
    background-color: #dc2626; /* Vermelho Escuro */
    animation: pulse 1.5s infinite;
}
@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}

/* --- 12. DASHBOARD CLIENTE (v3.5) --- */
/* ... (todo o seu código de dashboard está ótimo, sem mudanças) ... */
.btn-success {
    display: inline-block;
    padding: 0.75rem 1rem;
    background-color: #10b981;
    color: white;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    margin-top: 1rem;
    transition: background-color 0.2s;
}
.btn-success:hover { background-color: #059669; }

.client-welcome-card {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    border-left: 5px solid #3b82f6;
}
.client-welcome-card .icon-profile {
    width: 48px;
    height: 48px;
    color: #d1d5db;
    flex-shrink: 0;
}
.client-welcome-card h3 {
    margin: 0;
}
.client-welcome-card p {
    margin: 0.25rem 0 0 0;
    color: #999999;
}
.client-content-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1.5rem;
}
.client-content-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 0.5rem;
    transition: box-shadow 0.2s;
    background-color: #efefef;
}
.client-content-item:hover {
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.client-content-item .item-info {
    flex: 1;
    min-width: 250px;
}
.client-content-item .item-info strong {
    font-size: 1.1rem;
    color: #000000;
}
.client-content-item .item-info p {
    margin: 0.25rem 0 0 0;
    font-size: 0.9rem;
    color: #333333;
}
.client-content-item .btn-success {
    margin-top: 0;
    flex-shrink: 0;
}


/* --- 13. RESPONSIVIDADE (MOBILE) --- */
@media (max-width: 768px) {
    
    /* 1. Esconde a Sidebar e ajusta o conteúdo principal */
    .sidebar {
        transform: translateX(-100%); 
    }
    
    /* Ordem Correta: Colapsado primeiro */
    body.sidebar-collapsed .sidebar {
         transform: translateX(-100%);
    }
    .main-wrapper, body.sidebar-collapsed .main-wrapper {
        margin-left: 0;
    }
    
    /* Regra Mágica: "Abrir" vem depois para ter prioridade (v3.8) */
    body.sidebar-mobile-open .sidebar {
        transform: translateX(0);
        width: 80px; /* Força a largura recolhida */
    }
    
    /* * ==============================================================
     * !!! MUDANÇA CRÍTICA 2 (CSS FALTANDO) !!!
     * Esta regra estava incompleta (usava "display: block").
     * Corrigimos para usar "visibility" e "pointer-events".
     * ==============================================================
     */
    body.sidebar-mobile-open #sidebar-overlay {
        opacity: 1;
        visibility: visible;
        pointer-events: auto; /* Agora pode ser clicado */
    }
    
    /* Aplica os estilos de ícone-apenas ao menu aberto no mobile (v3.8) */
    body.sidebar-mobile-open .sidebar-header {
        padding: 1rem 0;
    }
    body.sidebar-mobile-open .sidebar-logo .logo-full { 
        display: none; 
    }
    body.sidebar-mobile-open .sidebar-logo .logo-collapsed { 
        display: block; 
    }
    body.sidebar-mobile-open .sidebar-nav a span { 
        display: none; 
    }
    body.sidebar-mobile-open .sidebar-nav a {
        justify-content: center;
        padding: 0.9rem;
    }
    body.sidebar-mobile-open .sidebar-nav a svg { 
        margin-right: 0; 
    }
    
    /* 2. Ajusta a Top Bar */
    .top-bar {
        flex-direction: row;
        justify-content: space-between;
        padding: 0.75rem 1rem;
        align-items: center;
    }
    
    /* * ==============================================================
     * !!! MUDANÇA CRÍTICA 3 (Z-INDEX) !!!
     * Adicionamos position: relative e z-index: 101
     * para que o botão fique ACIMA do menu (z-index: 100).
     * ==============================================================
     */
    .mobile-menu-btn {
        display: block; /* (v4.2) MOSTRADO NO MOBILE */
        background: none;
        border: none;
        color: #3c3c3c;
        cursor: pointer;
        padding: 0.5rem;

        /* --- CORREÇÃO DE CAMADA v9.0 --- */
        position: relative; /* Necessário para o z-index */
        z-index: 101;       /* Acima de TUDO (sidebar é 100, overlay é 99) */
    }
    
    .top-bar-title {
        flex: 1; 
        text-align: center;
    }
    .desktop-title {
        display: none; /* Esconde o "Dashboard" no mobile */
    }
    .mobile-logo {
        display: inline-block; /* Mostra o logo no mobile */
        line-height: 0; 
    }
    .mobile-logo img {
        height: 25px; /* Define a altura do logo HINA preto */
        width: auto;
    }
    
    .user-info .profile-link {
        display: none;
    }
    
    /* 3. Ajusta o Conteúdo da Página */
    .page-content { padding: 1rem; }
    .content-box { padding: 1rem; }
    
    /* 4. Ajusta Grids */
    .kpi-grid { grid-template-columns: 1fr; gap: 1rem; }
    .kpi-card h3 { font-size: 2.25rem; }
    .checkbox-grid { columns: 1; }
    
    /* 5. Ajusta Formulários */
    .admin-form .form-row { flex-direction: column; gap: 0; margin-bottom: 0; }
    .admin-form .form-group { margin-bottom: 1.25rem; min-width: 100%; }
    .admin-form .form-checkbox { margin-top: 0.5rem; padding-top: 0; }
    .form-group input[type="text"], .form-group input[type="email"], .form-group input[type="password"] { max-width: 100%; }
    .btn-cancelar { margin-top: 0.5rem; margin-left: 0; }
    
    /* 6. Ajusta Tabelas */
    .admin-table {
        table-layout: auto;
        white-space: nowrap;
    }
    .admin-table th, .admin-table td,
    .admin-table.dashboard-table th, .admin-table.dashboard-table td,
    .admin-table.content-table th, .admin-table.content-table td {
        width: auto !important;
    }
    
    /* 7. Esconde o botão de colapso do Desktop */
    .sidebar-footer {
        display: none;
    }
    
    .ai-prompt-input-area {
    width: 352px !important;
    }
    .input-icon-btn.mic-btn:disabled {
    display: none;
    }
    .info-icon {
    padding-left: 5px;
    }
    .hina-ai-toggle-bar {
    margin: -10px !important;
    }
    .theme-toggle-btn {
    width: 30px;
    height: 30px;
    }
}

/*
 * ==============================================================
 * !!! ADICIONE ESTE NOVO BLOCO NO FIM DO ARQUIVO !!!
 * Seção 14: Novo Layout da Dashboard (v4.7)
 * ==============================================================
 */

/* --- 14. NOVO LAYOUT DA DASHBOARD (v4.7) --- */

/* O container principal para os grids */
.dashboard-grid {
    display: grid;
    gap: 1.5rem; /* Espaçamento entre os cards */
}

/* Define um grid de 2 colunas */
.grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

/* Define um grid de 3 colunas */
.grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

/* Define um grid de 4 colunas (para os cards menores) */
.grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* Novo estilo de card (para não quebrar o .content-box) 
   Baseado no estilo do HostGator (branco, borda leve, sombra suave)
*/
.dash-card {
    background-color: #ffffff;
    border: 1px solid #e5e7eb; /* Mesma borda do .content-box */
    border-radius: 0.75rem;    /* Mesmo radius do .content-box */
    padding: 1.5rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03); /* Sombra suave */
    display: flex;
    flex-direction: column;
    /* --- GARANTIA DE ALTURA --- */
    height: 100%;               /* Garante que o card ocupe a altura total da linha */
    justify-content: space-between; /* Empurra o título para cima e a data para baixo */
}

/* * Responsividade para os novos grids 
 * (Não afeta o seu @media (max-width: 768px) existente) 
 */

/* Para Tablets (onde 3 e 4 colunas quebram) */
@media (max-width: 992px) {
    .grid-cols-3,
    .grid-cols-4 {
        grid-template-columns: repeat(2, 1fr); /* Viram 2 colunas */
    }
}

/* Para Celulares (onde 2 colunas quebram) */
@media (max-width: 768px) {
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4 {
        grid-template-columns: 1fr; /* Tudo vira 1 coluna */
    }
}

/*
 * ==============================================================
 * Seção 15: Estilos do Bloco AI-Prompt (v4.8)
 * ==============================================================
 */
.ai-prompt-card {
    /* Gradiente de fundo, como na imagem */
    /* background-color: linear-gradient(135deg, #f3f8ff 100%); */
    /* Borda gradiente (um truque de CSS) */
    border: 1px solid transparent;
    background-clip: padding-box;
    border-image: linear-gradient(135deg, #60a5fa 0%, #c084fc 100%) 1;
    position: relative;
    margin-bottom: 1.5rem; /* Adiciona espaço antes do próximo grid */
}

.ai-prompt-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.beta-tag {
    background-color: #3b82f6; /* Azul */
    color: #ffffff;
    padding: 0.25rem 0.6rem;
    border-radius: 9999px; /* "Pill" shape */
    font-size: 0.8rem;
    font-weight: 600;
    margin-right: 0.75rem;
}

.ai-prompt-header h3 {
    
    margin: 0;
    font-size: 1.125rem; /* 18px */
    font-weight: 600;
    color: #1f2937;
}

.info-icon {
    color: #9ca3af; /* Cinza */
    cursor: pointer;
    padding-left: 5px;
}
.info-icon:hover {
    color: #3b82f6;
}

.ai-prompt-input-area {
    background-color: #ffffff;
    border-radius: 0.75rem; /* Borda arredondada */
    padding: 1rem;
    min-height: 100px; /* Altura mínima */
    display: flex;
    /* justify-content: space-between; <-- REMOVIDO */
    align-items: flex-end; /* Alinha tudo na base */

    /* --- NOVAS LINHAS PARA CENTRALIZAR (v5.6) --- */
    width: 850px; /* Define uma largura máxima */
    margin: 0 auto;
    
}



.input-placeholder {
    font-size: 1rem;
    color: #9ca3af; /* Cor do placeholder */
    flex-grow: 1;
    padding-right: 1rem; /* Espaço para não sobrepor os botões */
}

.input-buttons {
    display: flex;
    gap: 0.5rem;
    padding-left: 10px
}

.input-icon-btn {
    background-color: #f3f4f6; /* Fundo cinza claro */
    border: none;
    border-radius: 50%; /* Círculo perfeito */
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #6b7280; /* Cor do ícone */
    transition: background-color 0.2s;
}
.input-icon-btn:hover {
    background-color: #e5e7eb; /* Cinza mais escuro no hover */
}

/*.input-icon-btn.mic-btn:disabled {
    color: #d1d5db; /* Cor do ícone desabilitado */
 /*   background-color: #f9fafb; */
 /*   cursor: not-allowed; */
 /*} */

.input-icon-btn.mic-btn:disabled {
    display: none;
}

.input-icon-btn.submit-btn {
    background-color: #3b82f6; /* Azul */
    color: #ffffff; /* Ícone branco */
}
    
.input-icon-btn.submit-btn:hover {
    background-color: #2563eb; /* Azul mais escuro */
}

/*
 * ==============================================================
 * Seção 16: Estilos do Textarea (v4.9)
 * ==============================================================
 */
.ai-prompt-textarea {
    flex-grow: 1; /* Ocupa o espaço disponível */
    padding: 0.5rem 0; /* Espaçamento interno */
    margin-right: 1rem; /* Espaço para não sobrepor os botões */
    font-family: 'Inter', sans-serif; /* Mesma fonte do site */
    font-size: 1rem;
    color: #1f2937; /* Cor do texto digitado */
    background-color: transparent;
    border: none;
    resize: none; /* Impede o usuário de redimensionar */
    outline: none; /* Remove a borda azul ao focar */
    box-shadow: none;
    min-height: 90px; /* Altura mínima */
}

/* Estiliza o placeholder do textarea */
.ai-prompt-textarea::placeholder {
    color: #9ca3af; /* Cor do placeholder */
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
}

/*
 * ==============================================================
 * Seção 17: Estilos da Área de Resposta da IA (v5.0)
 * ==============================================================
 */
.ai-response-area {
    padding: 1rem;
    background-color: #f9fafb; /* Fundo cinza bem claro */
    border-radius: 0.75rem;
    margin-bottom: 1rem; /* Espaço entre a resposta e o input */
    border: 1px solid #e5e7eb;
    
    /* --- CENTRALIZAÇÃO --- */
    max-width: 850px; /* Define o mesmo limite de largura dos outros */
    margin: 0 auto 1rem auto; /* 0 topo, AUTO direita, 1rem base, AUTO esquerda */
}

#ai-response-content p {
    margin: 0;
    padding: 0;
    color: #374151; /* Cor do texto da resposta */
    white-space: pre-wrap; /* Preserva quebras de linha */
}

/* Estilo do Spinner (Carregando) */
.ai-loader {
    width: 20px;
    height: 20px;
    border: 3px solid #e5e7eb; /* Cor base do spinner */
    border-top-color: #3b82f6; /* Cor da parte que gira (azul) */
    border-radius: 50%;
    animation: ai-spin 1s linear infinite;
    margin: 0 auto; /* Centraliza o spinner */
}

/* Animação do giro */
@keyframes ai-spin {
    to {
        transform: rotate(360deg);
    }
}

/*
 * ==============================================================
 * Seção 18: Estilos das Ações Rápidas (v5.4)
 * ==============================================================
 */
.ai-quick-actions {
    /* Ativa o flexbox para organizar os botões */
    display: flex;
    flex-wrap: wrap; /* Permite que os botões quebrem a linha */
    gap: 0.75rem; /* Espaço entre os botões */
    
    /* Adiciona uma linha de separação no topo */
    border-top: 1px solid #e5e7eb; 
    margin-top: 1.5rem; /* Espaço acima da linha */
    padding-top: 1.5rem; /* Espaço abaixo da linha */
    
    /* --- CENTRALIZAÇÃO --- */
    max-width: 850px; /* Mesmo limite da caixa de cima */
    margin: 1.5rem auto 0 auto; /* 1.5rem em cima, AUTO nas laterais (centraliza), 0 embaixo */
}

.quick-action-btn {
    display: flex;
    align-items: center;
    gap: 0.6rem; /* Espaço entre o ícone e o texto */
    
    background-color: #ffffff;
    border: 1px solid #d1d5db; /* Borda cinza */
    color: #374151; /* Cor do texto (escuro) */
    
    padding: 0.5rem 0.9rem; /* Padding interno */
    border-radius: 0.5rem;
    font-size: 0.875rem; /* 14px */
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}
.quick-action-btn:hover {
    background-color: #f9fafb; /* Fundo cinza claro ao passar o mouse */
    border-color: #9ca3af;
    color: #000000;
}

.quick-action-btn svg {
    width: 20px;
    height: 20px;
    color: #6b7280; /* Cor do ícone */
}

/*
 * ==============================================================
 * Seção 19: Hina AI "Sanfona" Global (v5.9)
 * ==============================================================
 */
 
/*
  SOLUÇÃO FINAL (V4) - Substitua sua regra ".hina-ai-sticky-wrapper" por esta.

  (Isto implementa a "Opção B": um bloco flutuante que respeita a sidebar)
*/

.hina-ai-sticky-wrapper {
    /* 1. MUDANÇA DE "sticky" PARA "fixed" */
    position: fixed; 
    
    /* 2. Fixa no topo e na direita */
    /* --- REMOVA A LINHA "top: 0;" (V8) --- */
    right: 0; 
    
    /* 3. CALCULA A ESQUERDA: 
       Esta é a largura da sua sidebar desktop (Seção 3: .sidebar) */
    left: 200px;
    
    /* 4. Garante que fique acima de tudo (Seção 4: .main-wrapper é z-index 90) */
    z-index: 1010; 
    
    /* 5. Adiciona a mesma transição da sidebar (Seção 3)
       para que ele "deslize" junto com o recolhimento. */
    transition: left 0.3s ease-in-out, top 0.4s ease-in-out;
}

/* REGRA DE AJUSTE (COLAPSADO): 
  Quando o body tiver "sidebar-collapsed", ajusta a esquerda.
  (Baseado na sua Seção 7)
*/
body.sidebar-collapsed .hina-ai-sticky-wrapper {
    left: 80px;
}

/* REGRA DE AJUSTE (MOBILE): 
  Quando a tela for menor, ajusta a esquerda para 0.
  (Baseado na sua Seção 13)
*/
@media (max-width: 768px) {
    .hina-ai-sticky-wrapper {
        left: 0;
    }
    .top-bar {
        left: 0;
    }
}


/* O Container da "Faixa Azul" (Baseado no gradiente da v4.8) */
.hina-ai-container {
    /* background: linear-gradient(135deg, #c2e7ff 0%, #ffffff 100%); */
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 2rem; /* Espaço antes do .page-content */
    overflow: hidden; /* Essencial para a "sanfona" */
    background-color: #c2e7ff !important;
    /* Transição suave da altura */
    transition: max-height 0.4s ease-in-out, padding-top 0.4s ease, padding-bottom 0.4s ease;
}

/* A barra clicável no topo */
.hina-ai-toggle-bar {
    display: flex;
    align-items: center;
    justify-content: center; /* Centraliza o [Beta] [Título] [Info] */
    padding: 0.25rem; /* 20px */
    cursor: pointer;
    position: relative;
    background-color: #c2e7ff;
}

/* O ícone de seta (chevron) */
.hina-ai-toggle-bar .chevron-icon {
    position: absolute;
    right: 2rem; /* Alinha à direita */
    color: #6b7280;
    transition: transform 0.3s ease;
}

/* O conteúdo (o chat e os 13 botões) */
.hina-ai-content {
    /* Oculto por padrão, mas visível se .ai-aberto estiver presente */
    display: none;
    padding: 0 1.5rem 1.5rem 1.5rem; /* Espaçamento interno (sem topo) */
}


/* --- Os Estados Abertos/Fechados --- */

/* 1. ESTADO: Aberto (Automático ou Manual) */
.hina-ai-container.ai-aberto {
    max-height: 1000px; /* Altura máxima para a animação */
}
.hina-ai-container.ai-aberto .hina-ai-content {
    display: block;
}
/* Gira a seta para cima quando aberto */
.hina-ai-container.ai-aberto .chevron-icon {
    transform: rotate(180deg);
}

/* 2. ESTADO: Recolhido (Automático ou Manual) */
.hina-ai-container.ai-recolhido-auto,
.hina-ai-container.ai-recolhido-manual {
    max-height: 70px; /* Altura da barra de título (ajuste se necessário) */
    margin-bottom: 0; /* Remove a margem quando fechado */
    padding-top: 0;
    padding-bottom: 0;
}
/* Esconde o conteúdo */
.hina-ai-container.ai-recolhido-auto .hina-ai-content,
.hina-ai-container.ai-recolhido-manual .hina-ai-content {
    display: none;
}
/* Seta para baixo quando fechado (padrão) */
.hina-ai-container.ai-recolhido-auto .chevron-icon,
.hina-ai-container.ai-recolhido-manual .chevron-icon {
    transform: rotate(0deg);
}

/* Borda sutil quando fechado (exceto no dashboard) */
.hina-ai-container.ai-recolhido-manual {
     border-bottom-color: #e5e7eb;
}
/* No dashboard, ele abre automático, então a barra de toggle não tem borda inferior */
.hina-ai-container.ai-recolhido-auto {
    border-bottom-color: transparent;
}

/* --- Adaptações (Sem .dash-card) --- */
/* Removemos o .dash-card, então os estilos de centralização vão direto para os filhos */

.hina-ai-content .ai-prompt-header {
    /* Removemos o header, já que o título está na barra de toggle */
    display: none; 
}
.hina-ai-content .ai-response-area,
.hina-ai-content .ai-prompt-input-area,
.hina-ai-content .ai-quick-actions {
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
}
.hina-ai-content .ai-prompt-input-area {
    /* Sobrescreve a borda/fundo da Seção 15 */
    background-color: #ffffff;
    border: 1px solid #d1d5db;
}

/* Ajuste fino no mobile (Regra 4: Não presumir, mas necessário) */
@media (max-width: 768px) {
    .hina-ai-container {
        margin-bottom: 1rem;
    }
    .hina-ai-toggle-bar {
        padding: 1rem;
    }
    .hina-ai-toggle-bar .chevron-icon {
        right: 1rem;
    }
    .hina-ai-content {
        padding: 0 1rem 1rem 1rem;
    }
    body.sidebar-collapsed .hina-ai-sticky-wrapper {
    left: 1px;
    }
    body.sidebar-collapsed .top-bar {
    left: 1px;
    }
}



/*
 * ==============================================================
 * Seção 20: Modo Escuro (Dark Mode) (v6.0)
 * ==============================================================
 */

/* --- 1. O Botão (Toggle) --- */
.theme-toggle-btn {
    background: none;
    background-color: #e5e7eb;
    border: none;
    color: #6b7280; /* Cinza ícone */
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.5rem;
    transition: background-color 0.2s;
    width: 30px;
    height: 30px;
}
.theme-toggle-btn:hover {
    background-color: #e8e8e8; /* Fundo cinza claro */
}

/* Por padrão, mostra o Sol (Light Mode) e esconde a Lua */
.theme-toggle-btn .icon-moon { display: none; }
.theme-toggle-btn .icon-sun { display: block; }

/* No Dark Mode, mostra a Lua e esconde o Sol */
body.dark-mode .theme-toggle-btn .icon-moon { display: block; }
body.dark-mode .theme-toggle-btn .icon-sun { display: none; }
body.dark-mode .theme-toggle-btn {
    color: #333333; /* Cor do ícone (claro) */
}
body.dark-mode .theme-toggle-btn:hover {
    background-color: #999999; /* Fundo cinza escuro */
}

body.dark-mode .client-content-item .item-info p {
    color: #ffffff;
}

/* --- 2. Cores Globais --- */
body.dark-mode {
    background-color: #202124; /* Fundo principal (preto azulado) */
    color: #d1d5db; /* Cor do texto (cinza claro) */
}

/* --- 3. Componentes --- */

/* Topo e Sidebar */
body.dark-mode .top-bar {
    background-color: #202124; /* Fundo da barra (cinza escuro) */
    border-bottom-color: #333333;
}
body.dark-mode .sidebar {
    background-color: #999999; /* Manter a cor cinza claro da sidebar */
    color: #1f2937; /* Mudar texto da sidebar para escuro */
}
body.dark-mode .sidebar-header,
body.dark-mode .sidebar-footer {
    border-color: #525355; /* Borda interna branca */
    background-color: #525355;
}
body.dark-mode .sidebar-footer .sidebar-toggle-btn {
    color: #d6d6d6; /* Ícone de recolher (preto) */
}
body.dark-mode .sidebar-nav a {
    color: #ffffff; /* Links do menu (pretos) */
}
body.dark-mode .sidebar-nav a:hover, 
body.dark-mode .sidebar-nav li.active > a {
    background-color: #202124 !important;
    color: #a1a1a1;
}
body.dark-mode .sidebar-nav li.active > a {
    background-color: #999999; /* Mantém o cinza de destaque */
    color: #a1a1a1;
}

/* Conteúdo da Página */
body.dark-mode .desktop-title,
body.dark-mode .user-info .profile-link {
    color: #ffffff;
}
body.dark-mode .page-content h3 {
    color: #000000;
}

/* Cards (O principal) */
body.dark-mode .content-box {
    background-color: #525355;
    border-color: #202124;
}

/* Tabela */
body.dark-mode .admin-table th, 
body.dark-mode .admin-table td {
    border-color: #000000;
}
body.dark-mode .admin-table thead {
    background-color: #202124;
}

/* Hina AI (Sanfona) */
body.dark-mode .hina-ai-container {
    background: #1f2937; /* Fundo da faixa (escuro) */
    border-bottom-color: #374151;
}
body.dark-mode .hina-ai-toggle-bar {
    background-color: #525355; /* Fundo da barra de toggle (escuro) */
}
body.dark-mode .hina-ai-toggle-bar h3,
body.dark-mode .hina-ai-toggle-bar .info-icon,
body.dark-mode .hina-ai-toggle-bar .chevron-icon {
    color: #e5e7eb;
}
body.dark-mode .hina-ai-content .ai-prompt-input-area {
    background-color: #d1d5db;
    border-color: #525355;
}
body.dark-mode .hina-ai-content .ai-response-area {
    background-color: #111827;
    border-color: #374151;
}
body.dark-mode .ai-prompt-textarea,
body.dark-mode .ai-prompt-textarea::placeholder {
    color: #525355;
}
body.dark-mode .quick-action-btn {
    background-color: #202124;
    border-color: #525355;
    color: #d6d6d6;
}
body.dark-mode .quick-action-btn:hover {
    background-color: #d1d5db;
    border-color: #d1d5db;
    color: #525355;
}
body.dark-mode .quick-action-btn svg {
    color: #9ca3af;
}

/* Cards KPI */
body.dark-mode .kpi-card {
    background-color: #999999 !important;
    border-color: #525355 !important;
}
body.dark-mode .kpi-card p,
body.dark-mode .kpi-card h3 {
    color: #202124 !important;
}

/* Botões */
body.dark-mode .btn-editar { background-color: #3b82f6; } /* Manter cores de ação */
body.dark-mode .btn-apagar { background-color: #ef4444; }
body.dark-mode .btn-recuperar { background-color: #6b7280; }

/* Badges de Nível */
body.dark-mode .status-level-10 { background-color: #9ca3af; color: #1f2937; }

body.dark-mode .hina-ai-container {
    /* background: linear-gradient(135deg, #c2e7ff 0%, #ffffff 100%); */
    background-color: #525355 !important;
}

body.dark-mode .beta-tag {
    background-color: #202124;
}

body.dark-mode .user-info .logout-link {
    color: #e5e7eb !important;
    margin-left: -10px;
}

body.dark-mode .info-icon {
    color: #999999 !important;
}

body.dark-mode .input-icon-btn.submit-btn {
    background-color: #202124;
    color: #d6d6d6;
}

body.dark-mode .ai-quick-actions {
    border-top: 1px solid #202124;
}

body.dark-mode #ai-response-content p {
    color: #d1d5db;
}

body.dark-mode .page-content label {
    color: #d1d5db;
}

body.dark-mode .client-content-item .item-info strong {
    color: #333333;
}

body.dark-mode .client-content-item {
    background-color: #999999;
}

body.dark-mode .client-welcome-card {
    border-left: 5px solid #333333;
}

body.dark-mode .dash-card {
    background-color: #333333;
    border: 1px solid #333333; 
}

body.dark-mode .btn-success {
    background-color: #333333;
}

@media (max-width: 768px) {
    body.dark-mode .mobile-menu-btn {
        display: block;
        background: none;
        border: none;
        color: #d1d5db;
        cursor: pointer;
        padding: 0.5rem;
        position: relative;
        z-index: 101;
    }
    body.dark-mode .page-content label {
    color: #d1d5db;
    }
}


/*
 * ==============================================================
 * Seção 19.1: Toggle dos Logos (v6.0 - Corrigido v6.35)
 * ==============================================================
 */

/* --- PADRÃO (LIGHT MODE) --- */
/* Por padrão, esconde os logos brancos */
.sidebar-logo .logo-white { display: none; }
.sidebar-logo .logo-collapsed.logo-white { display: none; }

/* Por padrão, mostra o logo escuro FULL e esconde o colapsado */
.sidebar-logo .logo-full.logo-dark { display: block; }
.sidebar-logo .logo-collapsed.logo-dark { display: none; }


/* --- DARK MODE --- */
/* No Dark Mode, esconde os logos escuros */
body.dark-mode .sidebar-logo .logo-dark { display: none; }
body.dark-mode .sidebar-logo .logo-collapsed.logo-dark { display: none; }

/* No Dark Mode, mostra o logo branco FULL e esconde o colapsado */
body.dark-mode .sidebar-logo .logo-full.logo-white { display: block; }
body.dark-mode .sidebar-logo .logo-collapsed.logo-white { display: none; }


/* --- 2. ESTADO COLAPSADO (SOBRESCRITA) --- */

/* Light Mode (Colapsado): Mostra collapsed-dark, esconde os outros 3 */
body.sidebar-collapsed .sidebar-logo .logo-full.logo-dark      { display: none; }
body.sidebar-collapsed .sidebar-logo .logo-collapsed.logo-dark { display: block; }
body.sidebar-collapsed .sidebar-logo .logo-full.logo-white     { display: none; }
body.sidebar-collapsed .sidebar-logo .logo-collapsed.logo-white{ display: none; }

/* Dark Mode (Colapsado): Mostra collapsed-white, esconde os outros 3 */
body.dark-mode.sidebar-collapsed .sidebar-logo .logo-full.logo-dark      { display: none; }
body.dark-mode.sidebar-collapsed .sidebar-logo .logo-collapsed.logo-dark { display: none; }
body.dark-mode.sidebar-collapsed .sidebar-logo .logo-full.logo-white     { display: none; }
body.dark-mode.sidebar-collapsed .sidebar-logo .logo-collapsed.logo-white{ display: block; }

/* --- 3. MOBILE: TOP-BAR (v6.37 - NOVO) --- */

/* Light Mode (Mobile): Mostra logo-dark, esconde logo-white */
.mobile-logo .logo-dark { display: inline-block; }
.mobile-logo .logo-white { display: none; }

/* Dark Mode (Mobile): Mostra logo-white, esconde logo-dark */
body.dark-mode .mobile-logo .logo-dark { display: none; }
body.dark-mode .mobile-logo .logo-white { display: inline-block; }


/*
 * ==============================================================
 * Seção 21: (NOVO) Estilos dos KPI Cards (Dashboard v2.0)
 * ==============================================================
 */

/* Título do Card (Ex: "PERFORMANCE") */
.kpi-title {
    font-size: 15px; /* 14px */
    font-weight: 600;
    color: #333333; /* Cinza */
    margin: 0 0 1rem 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center; /* Adicionado para centralizar */
}

/* Container para os scores (Mobile/Desktop) */
.kpi-scores {
    display: flex;
    justify-content: space-around;
    gap: 1rem;
    margin: 1rem 0;
    flex-grow: 1; /* Faz o card ter altura uniforme */
    align-items: center;
}

.score-item {
    text-align: center;
}

/* O "Mobile" ou "Desktop" */
.score-item span {
    display: block;
    font-size: 18px;
    font-weight: bold;
    color: #333333;
    margin-bottom: 0.5rem;
}

/* O número (Ex: 54) */
.score-value {
    display: flex;
    align-items: center;
    justify-content: center;
    /* (MUDANÇA v3.3) Padroniza o tamanho */
    font-size: 3.5rem; 
    font-weight: 700;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 4px solid;
    /* (MUDANÇA v3.3) Ajusta altura da linha para centralizar melhor */
    line-height: 1;
}

/* Cores da pontuação */
.score-green { color: #10b981; border-color: #d1fae5; }
.score-yellow { color: #FBBC04; border-color: #fef9c3; }
.score-red { color: #ef4444; border-color: #fee2e2; }
.score-grey { color: #9ca3af; border-color: #e5e7eb; } /* (NOVO v3.3) Cor N/A */

/* Data da atualização */
.kpi-updated {
    font-size: 0.75rem; /* 12px */
    color: #9ca3af;
    text-align: center;
    margin-top: 1rem;
}

/* Estilo do Card "Placeholder" (quando o KPI não foi gerado) */
.kpi-placeholder {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.kpi-placeholder-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.75rem;
    padding: 1rem 0;
}

.kpi-placeholder-content svg {
    width: 32px;
    height: 32px;
    color: #d1d5db; /* Cinza bem claro */
}

.kpi-placeholder-content span {
    font-size: 0.875rem;
    color: #9ca3af;
    font-weight: 500;
    line-height: 1.4;
}

/* Link (para o card todo ser clicável) */
.dash-card-link {
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.dash-card-link:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.07);
    border-radius: 0.75rem;
}


/* Dark Mode para os novos KPIs */
body.dark-mode .kpi-title { color: #9ca3af; }


body.dark-mode .score-green { color: #34d399; border-color: #d1fae5 !important; }
body.dark-mode .score-yellow { color: #facc15; }
body.dark-mode .score-red { color: #f87171; border-color: #f5aaaa !important; }
body.dark-mode .score-grey { color: #6b7280; border-color: #6b7280; } /* (NOVO v3.3) */

body.dark-mode .kpi-placeholder-content svg { color: #4b5563; }
body.dark-mode .kpi-placeholder-content span { color: #6b7280; }


/*
 * ==============================================================
 * Seção 22: (ALTERADO v3.3) Estilos dos Cards GSC
 * ==============================================================
 */
.dash-card.gsc-card .kpi-scores-gsc {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 1.25rem 0;
    color: #4285f4;
    flex-grow: 1; /* <-- ADICIONE ESTA LINHA */
    align-items: center; /* <-- ADICIONE ESTA LINHA */
}
.dash-card.gsc-card .score-item-gsc {
    display: flex;
    flex-direction: column;
    align-items: center; 
    text-align: center;
    flex-basis: 100%; 
}
.dash-card.gsc-card .score-value-gsc {
    font-size: 3.5rem; /* (Padronizado v3.3) */
    font-weight: 700;
    color: var(--text-color); 
    line-height: 1;
}

/* (REMOVIDO v3.3) .small-value não é mais necessário */
/* .dash-card.gsc-card .score-value-gsc.small-value { ... } */


/* --- Estilo Card Cobertura (v7.3) --- */
.dash-card.gsc-card .kpi-scores-gsc-3 {
    display: flex;
    justify-content: space-around;
    width: 100%;
    gap: 0.5rem; 
    padding: 1.25rem 0;
}
.dash-card.gsc-card .score-item-gsc-3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex-basis: 33.33%;
}
.dash-card.gsc-card .score-item-gsc-3 span:first-child {
    font-size: 0.875rem;
    color: var(--text-light);
    margin-bottom: 0.25rem;
}
.dash-card.gsc-card .score-value-gsc-3 {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
}

.score-value-gsc-3.green { color: var(--green); }
.score-value-gsc-3.yellow { color: var(--yellow); }
.score-value-gsc-3.red { color: var(--red); }

/* Arquivo: style.css (ADICIONAR NO FINAL) */

/*
 * ==============================================================
 * Seção 23: (NOVO) Estilos dos Formulários Sanfona (v2.5)
 * ==============================================================
 */

/* O Fundo (Overlay) */
.form-sanfona-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1050; /* Acima da top-bar (1020) */
    
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;

    /* Controlado por JS */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.form-sanfona-wrapper.show {
    opacity: 1;
    visibility: visible;
}

/* O Card do Formulário */
.form-sanfona-container {
    background-color: #ffffff;
    border-radius: 0.75rem;
    width: 100%;
    max-width: 600px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    
    /* Controlado por JS */
    transform: scale(0.95);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.form-sanfona-wrapper.show .form-sanfona-container {
    transform: scale(1);
    opacity: 1;
}

/* Cabeçalho (Título e Botão Fechar) */
.form-sanfona-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}
.form-sanfona-header h3 {
    margin: 0;
    font-size: 1.25rem;
    color: #1f2937;
}
.form-sanfona-close-btn {
    background: #f3f4f6;
    width: 32px;
    height: 32px;
    
    border: 1px solid #d1d5db;
    border-radius: 4px;

    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
}
.form-sanfona-close-btn:hover { background-color: #e5e7eb; }

/* Corpo (Formulário) */
.form-sanfona-body {
    padding: 1.5rem;
    max-height: 70vh;
    overflow-y: auto;
}

/* Estilo para grupo de Rádio (Site Atual vs Outro Site) */
.radio-group {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}
.radio-group label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    cursor: pointer;
    flex: 1;
    font-weight: 600;
}
.radio-group input[type="radio"]:checked + label {
    border-color: #3b82f6;
    background-color: #eff6ff;
}

/* Esconde o input de "Outro Site" por padrão */
#outro-site-input {
    display: none;
}

/* Mensagem de Feedback (Sucesso/Erro) */
.form-sanfona-feedback {
    display: none; /* Oculto por padrão */
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    font-weight: 500;
}
.form-sanfona-feedback.show-success {
    display: block;
    background-color: #f0fdf4;
    border: 1px solid #a7f3d0;
    color: #059669;
}
.form-sanfona-feedback.show-error {
    display: block;
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
}

/* Rodapé (Botões de Ação) */
.form-sanfona-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid #e5e7eb;
    background-color: #f9fafb;
    border-radius: 0 0 0.75rem 0.75rem;
    text-align: right;
}

/* Dark Mode para os Formulários */
body.dark-mode .form-sanfona-container { background-color: #202124; }
body.dark-mode .form-sanfona-header { border-bottom-color: #333333; }
body.dark-mode .form-sanfona-header h3 { color: #ffffff; }
body.dark-mode .form-sanfona-close-btn { background-color: #374151; color: #d1d5db; }
body.dark-mode .form-sanfona-close-btn:hover { background-color: #4b5563; }
body.dark-mode .radio-group label { border-color: #4b5563; }
body.dark-mode .radio-group input[type="radio"]:checked + label {
    border-color: #3b82f6;
    background-color: #1f2937;
}
body.dark-mode .form-sanfona-footer { background-color: #1f2937; border-top-color: #333333; }


/* Arquivo: style.css (ADICIONAR NO FINAL) */

/*
 * ==============================================================
 * Seção 24: (NOVO) Estilos da Página de Segurança
 * ==============================================================
 */

/* Ajusta o tamanho da nota A+ do Mozilla */
.dash-card .score-item .score-value.score-green {
    font-size: 1.75rem;
    padding-top: 10px;
}
.dash-card .score-item .score-value.score-yellow {
    font-size: 1.75rem;
    padding-top: 10px;
}
.dash-card .score-item .score-value.score-red {
    font-size: 1.75rem;
    padding-top: 10px;
}

/* Dark mode para os status de texto (Seguro/Válido) */
body.dark-mode .score-value.score-green {
    color: #34d399;
    border-color: #1f2937;
}
body.dark-mode .score-value.score-red {
    color: #f87171;
    border-color: #1f2937;
}

/*
 * ==============================================================
 * Seção 25: (NOVO) Estilos dos Resultados do Google
 * ==============================================================
 */

/* Container dos resultados (GSC e GA4) */
.google-results-container {
    padding: 1.5rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    background-color: #f9fafb; /* Fundo cinza claro */
}

/* Lista de propriedades (UL) */
.google-results-list {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
}

/* Item da lista (LI) */
.google-results-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
    font-weight: 500;
    color: #1f2937;
    padding: 0.75rem 0;
    border-bottom: 1px solid #e5e7eb;
}
.google-results-list li:last-child {
    border-bottom: none;
}

/* Ícone de link/mundo */
.google-results-list li svg {
    width: 20px;
    height: 20px;
    color: #3b82f6; /* Azul */
    flex-shrink: 0;
}

/* Placeholder "Buscando dados..." */
.google-results-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    color: #6b7280;
}
.google-results-placeholder .ai-loader {
    margin-bottom: 1rem;
}

/* --- Dark Mode --- */
body.dark-mode .google-results-container {
    background-color: #1f2937;
    border-color: #374151;
}
body.dark-mode .google-results-list li {
    color: #d1d5db;
    border-bottom-color: #374151;
}
body.dark-mode .google-results-list li svg {
    color: #60a5fa;
}
body.dark-mode .google-results-placeholder {
    color: #9ca3af;
}

/* --- (ATUALIZADO) Estilos dos Cards GSC (v7.2) --- */
.dashboard-section-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-color);
    margin-top: 2rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}
.dash-card.gsc-card .kpi-scores-gsc {
    /* Centraliza o item-gsc, que agora terá 100% de largura */
    display: flex;
    justify-content: center;
    width: 100%;
    /* Ajusta o padding para centralizar verticalmente */
    padding: 1.25rem 0;
    color: #4285f4;
}
.dash-card.gsc-card .score-item-gsc {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centraliza o número horizontalmente */
    text-align: center;
    flex-basis: 100%; /* Faz o item ocupar toda a largura */
}
.dash-card.gsc-card .score-value-gsc {
    font-size: 3.5rem; /* Tamanho aumentado, similar aos cards de cima */
    font-weight: 700;
    color: var(--text-color); /* Força a cor do texto, ignorando a cor azul do link */
    line-height: 1;
}

/* (NOVO) Classe para valores menores (CTR, Posição) */
.dash-card.gsc-card .score-value-gsc.small-value {
    font-size: 2.75rem; 
}

/* --- (NOVO) Estilo Card Cobertura (v7.3) --- */
.dash-card.gsc-card .kpi-scores-gsc-3 {
    display: flex;
    justify-content: space-around;
    width: 100%;
    gap: 0.5rem; /* Menor espaço para 3 itens */
    padding: 1.25rem 0;
}
.dash-card.gsc-card .score-item-gsc-3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex-basis: 33.33%;
}
.dash-card.gsc-card .score-item-gsc-3 span:first-child {
    font-size: 0.875rem;
    color: var(--text-light);
    margin-bottom: 0.25rem;
}
.dash-card.gsc-card .score-value-gsc-3 {
    font-size: 2.5rem; /* Um pouco menor para caber 3 */
    font-weight: 700;
    line-height: 1;
}

/* Cores para os números */
.score-value-gsc-3.green { color: var(--green); }
.score-value-gsc-3.yellow { color: var(--yellow); }
.score-value-gsc-3.red { color: var(--red); }

/*
 * ==============================================================
 * Seção 26: (ALTERADO v3.3) Estilos dos Cards GA4
 * ==============================================================
 */

/* Define a cor principal do card (usada pelo texto e ícones) */
.dash-card.ga4-card .kpi-scores-ga4 {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 1.25rem 0;
    color: #FBBC05; /* Laranja */
    flex-grow: 1; /* <-- ADICIONE ESTA LINHA */
    align-items: center; /* <-- ADICIONE ESTA LINHA */
}

/* O container do score */
.dash-card.ga4-card .score-item-ga4 {
    display: flex;
    flex-direction: column;
    align-items: center; 
    text-align: center;
    flex-basis: 100%; 
}

/* O valor numérico (Ex: 456 ou 2m 30s) */
.dash-card.ga4-card .score-value-ga4 {
    font-size: 3.5rem; /* (Padronizado v3.3) */
    font-weight: 700;
    color: #FBBC05; /* Laranja */
    line-height: 1;
    white-space: nowrap; /* (NOVO v3.3) Impede a quebra de linha */
}

/* (REMOVIDO v3.3) .small-value-ga4 não é mais necessário */
/* .dash-card.ga4-card .score-value-ga4.small-value-ga4 { ... } */


/* --- Dark Mode --- */
body.dark-mode .dash-card.ga4-card .kpi-scores-ga4 {
    color: #FBBC05;
}
body.dark-mode .dash-card.ga4-card .score-value-ga4 {
    color: #FBBC05;
}

/*
 * ==============================================================
 * Seção 27: (NOVO) Estilos do Modo Foco (Dashboard v3.5)
 * ==============================================================
 */

/* Quando o Modo Foco está ativo... */
body.focus-mode .sidebar,
body.focus-mode .top-bar,
body.focus-mode .hina-ai-sticky-wrapper,
body.focus-mode .app-footer,
body.focus-mode #content-wrapper {
    /* Esconde tudo, exceto o #kpi-wrapper */
    display: none !important;
}

body.focus-mode .main-wrapper {
    margin-left: 0 !important; /* Remove a margem da sidebar */
}

body.focus-mode .page-content {
    /* Remove padding para a tela cheia real */
    padding: 1rem !important; 
    margin: 0 !important;
}

/* O botão de toggle (ícone) */
#focus-mode-btn .icon-compress {
    display: none; /* Esconde o ícone "recolher" por padrão */
}
body.focus-mode #focus-mode-btn .icon-expand {
    display: none; /* Esconde o ícone "expandir" */
}
body.focus-mode #focus-mode-btn .icon-compress {
    display: block; /* Mostra o ícone "recolher" */
}

/* No modo escuro, o botão de foco precisa da cor certa */
body.dark-mode #focus-mode-btn {
    color: #e5e7eb;
}
body.dark-mode #focus-mode-btn:hover {
    background-color: #999999;
}

/*
 * ==============================================================
 * Seção 28: (NOVO) Estilos do Modal de Configuração de KPIs (v9.4)
 * ==============================================================
 */

/* O Fundo (Overlay) */
.kpi-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 2000; /* Acima de tudo */
    
    display: none; /* Oculto por padrão */
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.kpi-modal-overlay.show {
    display: flex;
}

/* O Card do Modal */
.kpi-modal-container {
    background-color: #ffffff;
    border-radius: 0.75rem;
    width: 100%;
    max-width: 800px; /* Mais largo para 4 colunas */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    
    /* Animação de entrada */
    transform: scale(0.95);
    opacity: 0;
    transition: all 0.2s ease-in-out;
}
.kpi-modal-overlay.show .kpi-modal-container {
    transform: scale(1);
    opacity: 1;
}

/* Cabeçalho */
.kpi-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}
.kpi-modal-header h3 {
    margin: 0;
    font-size: 1.25rem;
    color: #1f2937;
}
.kpi-modal-close-btn {
    background: #f3f4f6;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
}
.kpi-modal-close-btn:hover { background-color: #e5e7eb; }

/* Corpo (Checkboxes) */
.kpi-modal-body {
    padding: 1.5rem;
    display: grid;
    /* 4 colunas no desktop */
    grid-template-columns: repeat(4, 1fr); 
    gap: 1rem;
    max-height: 70vh;
    overflow-y: auto;
}

.kpi-setting-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
}
.kpi-setting-item:hover {
    background-color: #f9fafb;
}
.kpi-setting-item input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    /* --- A CORREÇÃO DO OLHO DE ÁGUIA --- */
    flex-shrink: 0;  /* Impede que o checkbox seja "espremido" pelo texto */
}
.kpi-setting-item input[type="checkbox"]:checked + span {
    color: #3b82f6;
}

/* Rodapé */
.kpi-modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid #e5e7eb;
    background-color: #f9fafb;
    border-radius: 0 0 0.75rem 0.75rem;
    text-align: right;
}

/* --- (NOVO) Estilos para Ações em Massa (v9.7) --- */
.kpi-bulk-actions {
    padding: 0.75rem 1.5rem 0 1.5rem; /* Padding superior e lateral */
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    background-color: #202124;
}

.bulk-action-link {
    background: none;
    border: none;
    color: #3b82f6; /* Azul */
    cursor: pointer;
    font-weight: 600;
    padding: 0;
    font-size: 0.9rem;
    transition: color 0.2s;
}
.bulk-action-link:hover {
    color: #2563eb; /* Azul mais escuro */
    text-decoration: underline;
}

.bulk-separator {
    color: #d1d5db; /* Cinza claro */
}

/* Dark Mode */
body.dark-mode .bulk-action-link {
    color: #60a5fa; /* Azul claro */
}
body.dark-mode .bulk-action-link:hover {
    color: #93c5fd;
}
body.dark-mode .bulk-separator {
    color: #525355;
}

/* --- Responsividade (Mobile) --- */
@media (max-width: 768px) {
    .kpi-modal-body {
        /* 2 colunas no mobile */
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .kpi-modal-body {
        /* 1 coluna em telas muito pequenas */
        grid-template-columns: 1fr;
    }
}


/* --- Dark Mode --- */
body.dark-mode .kpi-modal-container { 
    background-color: #333333; 
}
body.dark-mode .kpi-modal-header { 
    border-bottom-color: #525355; 
}
body.dark-mode .kpi-modal-header h3 { 
    color: #ffffff; 
}
body.dark-mode .kpi-modal-close-btn { 
    background-color: #525355; 
    color: #d1d5db; 
}
body.dark-mode .kpi-modal-close-btn:hover { 
    background-color: #6b7280; 
}
body.dark-mode .kpi-modal-body {
    background-color: #202124;
}
body.dark-mode .kpi-setting-item { 
    border-color: #525355; 
}
body.dark-mode .kpi-setting-item:hover { 
    background-color: #333333; 
}
body.dark-mode .kpi-setting-item input[type="checkbox"]:checked + span {
    color: #60a5fa;
}
body.dark-mode .kpi-modal-footer { 
    background-color: #333333; 
    border-top-color: #525355; 
}
body.dark-mode #focus-mode-btn:hover {
    background-color: #999999;
}
body.dark-mode #kpi-settings-btn {
    color: #333333;
}
body.dark-mode #kpi-settings-btn:hover {
    background-color: #999999;
}
body.dark-mode .icon-settings {
    stroke: #e5e7eb;
}