/* ============================================
   SISTEMA DE DESIGN - VARIÁVEIS CSS
   ============================================ */
:root {
    /* Background */
    --bg-primary: #FAFBFC;        /* Fundo geral - quase branco */
    --bg-secondary: #FFFFFF;       /* Cards e containers */
    --bg-sidebar: #1E1E2E;         /* Sidebar escura (opcional) */

    /* Aliases (compatibilidade com módulos/páginas) */
    --bg-white: var(--bg-secondary);
    --bg-gray: #F3F4F6;
    --border-color: #E5E7EB;
    
    /* Texto */
    --text-primary: #1A1A2E;       /* Títulos - quase preto */
    --text-secondary: #6B7280;     /* Texto secundário - cinza médio */
    --text-muted: #9CA3AF;         /* Texto desabilitado */
    
    /* Accent - Roxo/Violeta moderno */
    --accent-primary: #7C3AED;     /* Botões principais */
    --accent-hover: #6D28D9;       /* Hover */
    --accent-light: #EDE9FE;       /* Background de destaque */
    --accent-border-light: #A78BFA; /* Borda roxa clarinha (destaques) */
    
    /* Status das Confirmações */
    --status-gray: #9CA3AF;        /* ⚫ Não enviado */
    --status-yellow: #F59E0B;      /* 🟡 Enviado, aguardando */
    --status-green: #10B981;       /* 🟢 Confirmado */
    --status-red: #EF4444;         /* 🔴 Cancelado */
    --status-blue: #3B82F6;        /* 🔵 Remarcação solicitada */
    --status-orange: #F97316;      /* 🟠 Requer atenção */
    
    /* Status backgrounds (suaves) */
    --status-gray-bg: #F3F4F6;
    --status-yellow-bg: #FEF3C7;
    --status-green-bg: #D1FAE5;
    --status-red-bg: #FEE2E2;
    --status-blue-bg: #DBEAFE;
    --status-orange-bg: #FED7AA;
    
    /* Status text (escuro) */
    --status-gray-text: #374151;
    --status-yellow-text: #92400E;
    --status-green-text: #065F46;
    --status-red-text: #991B1B;
    --status-blue-text: #1E40AF;
    --status-orange-text: #9A3412;
    
    /* Gradientes sutis */
    --gradient-header: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-card-hover: linear-gradient(180deg, rgba(124,58,237,0.05) 0%, transparent 100%);
    
    /* Tipografia */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --text-xs: 0.75rem;    /* 12px */
    --text-sm: 0.875rem;   /* 14px */
    --text-base: 1rem;     /* 16px */
    --text-lg: 1.125rem;   /* 18px */
    --text-xl: 1.25rem;    /* 20px */
    --text-2xl: 1.5rem;    /* 24px */
    --text-3xl: 1.875rem;  /* 30px */
    
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    
    /* Espaçamento */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    
    /* Bordas */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;
    
    /* Sombras */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
    --shadow-md: 0 2px 10px rgba(0,0,0,0.05);
    --shadow-lg: 0 4px 12px rgba(0,0,0,0.1);
    --shadow-xl: 0 8px 25px rgba(0,0,0,0.1);
    
    /* Transições */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;
}

/* Reset e Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    font-size: var(--text-base);
}

/* Login */
.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-header);
}

.login-box {
    background: var(--bg-secondary);
    padding: var(--spacing-2xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-width: 400px;
}

.logo {
    text-align: center;
    margin-bottom: 2rem;
}

.logo h1 {
    font-size: var(--text-3xl);
    color: var(--accent-primary);
    margin-bottom: var(--spacing-sm);
    font-weight: var(--font-bold);
}

.logo p {
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-weight: var(--font-medium);
    color: var(--text-primary);
    font-size: var(--text-sm);
}

.form-group input {
    padding: 0.75rem;
    border: 1px solid #E5E7EB;
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    transition: all var(--transition-base);
    font-family: var(--font-family);
}

.form-group input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-light);
}

/* Buttons */
.btn-primary {
    background: var(--accent-primary);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: all var(--transition-base);
    font-family: var(--font-family);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-primary:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Versão compacta para listas */
.btn-primary.compact {
    padding: 6px 12px;
    font-size: 0.75rem;
}

.btn-secondary {
    background: transparent;
    color: var(--accent-primary);
    border: 1px solid var(--accent-primary);
    padding: 10px 20px;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: all var(--transition-base);
    font-family: var(--font-family);
}

.btn-secondary:hover {
    background: var(--accent-light);
    transform: translateY(-1px);
}

.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border: none;
    padding: 8px 12px;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: all var(--transition-base);
    font-family: var(--font-family);
}

.btn-ghost:hover {
    background: var(--bg-primary);
    color: var(--text-primary);
}

.btn-danger {
    background: var(--status-red);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: all var(--transition-base);
    font-family: var(--font-family);
    white-space: nowrap;
    flex-shrink: 0;
}

.btn-danger:hover {
    background: #DC2626;
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* Botões de ação (usados em agendamentos e alertas) */
.btn-acao {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: var(--font-medium);
    transition: all 0.3s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.btn-confirmar {
    background: #4caf50;
    color: white;
}

.btn-confirmar:hover {
    background: #45a049;
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.btn-cancelar {
    background: #f44336;
    color: white;
}

.btn-cancelar:hover {
    background: #da190b;
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.btn-ligar {
    background: #2196f3;
    color: white;
}

.btn-ligar:hover {
    background: #0b7dda;
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* Botão X para cancelar/excluir */
.btn-cancel-x {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--status-red);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    transition: all var(--transition-base);
    line-height: 1;
    padding: 0;
}

.btn-cancel-x:hover {
    background: #DC2626;
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

/* Botão circular para agendar (similar ao cancel-x mas com cor primária) */
.btn-agendar-circular {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent-primary);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: all var(--transition-base);
    padding: 0;
}

.btn-agendar-circular:hover {
    background: var(--accent-hover);
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

/* === BOTÕES DE FUNCIONALIDADES === */
.feature-buttons-container {
    display: flex;
    gap: 16px;
    padding: 16px 24px;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    margin-bottom: 20px;
    flex-wrap: wrap;
    box-shadow: var(--shadow-md);
}

.feature-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-primary);
    transition: all var(--transition-base);
    position: relative;
}

.feature-btn:hover {
    background: #f0f0f0;
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.feature-btn-icon {
    font-size: 18px;
}

/* Lista de Espera: destaque quando há horário disponível para agendar */
.feature-btn.lista-espera-tem-horario {
    border-color: var(--status-green, #22c55e);
    background: var(--status-green-bg, #f0fdf4);
    color: var(--status-green-text, #166534);
}
.feature-btn.lista-espera-tem-horario:hover {
    background: var(--status-green-bg, #dcfce7);
    border-color: var(--status-green, #22c55e);
}
.lista-espera-horario-indicator {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--status-green-text, #166534);
    margin-left: 4px;
    white-space: nowrap;
}

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: #ef4444;
    color: white;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    margin-left: 4px;
}

/* Botão "Mais" e dropdown (visão resumida / mobile) */
.agenda-mais-btn {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-primary);
    transition: all var(--transition-base);
    position: relative;
}
.agenda-mais-btn:hover {
    background: #f0f0f0;
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}
.feature-buttons-container {
    position: relative;
}
.agenda-mais-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
    min-width: 200px;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 100;
    padding: 8px 0;
}
.agenda-mais-dropdown.is-open {
    display: block;
}
.agenda-mais-dropdown-item {
    display: block;
    width: 100%;
    padding: 12px 16px;
    text-align: left;
    border: none;
    background: none;
    font-size: var(--text-sm);
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.15s;
}
.agenda-mais-dropdown-item:hover {
    background: var(--bg-secondary, #f5f5f5);
}

/* Visão resumida (mobile): só botão Mais + esconder Hoje/Semana/Mês */
body.visao-resumida .page-header-nav-buttons {
    display: none !important;
}
body.visao-resumida .feature-buttons-container .feature-btn {
    display: none !important;
}
body.visao-resumida .feature-buttons-container .agenda-mais-btn {
    display: flex !important;
}

/* Visão resumida: calendário mais compacto */
body.visao-resumida .calendario-mensal-container {
    padding: var(--spacing-sm) !important;
    max-width: 320px;
    margin-left: 0;
}
body.visao-resumida .calendario-mensal-container h2 {
    font-size: var(--text-base) !important;
}
body.visao-resumida .calendario-grid {
    gap: 0.15rem !important;
}
body.visao-resumida .calendario-dia-header {
    padding: 0.2rem !important;
    font-size: 0.65rem !important;
}
body.visao-resumida .calendario-dia {
    padding: 0.15rem !important;
    min-height: 0 !important;
    aspect-ratio: 1;
}
body.visao-resumida .calendario-dia-numero {
    font-size: 0.7rem !important;
    margin-bottom: 0 !important;
}
body.visao-resumida .calendario-dia-contador {
    font-size: 0.5rem !important;
    padding: 0.05rem 0.2rem !important;
    margin-top: 0.05rem !important;
}

/* Visão resumida: lista de agendamentos do dia com menos espaçamento */
/* Cabeçalho "Agendamentos do dia": data em cima, botões embaixo (evita cortar no mobile) */
.agendamentos-dia-header {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}
.agendamentos-dia-botoes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

body.visao-resumida .agendamentos-dia-container {
    padding: var(--spacing-sm) !important;
}
body.visao-resumida .agendamentos-dia-container h3 {
    font-size: var(--text-base) !important;
}
body.visao-resumida .grade-slot {
    padding: 6px 8px !important;
    min-height: 40px !important;
    gap: 4px !important;
}
body.visao-resumida .agendamento-card-compacto {
    padding: 6px 8px !important;
    margin-bottom: 2px !important;
    gap: 0.35rem !important;
}
body.visao-resumida #agendamentosDiaList {
    line-height: 1.25;
}

/* === ANIVERSARIANTES === */
.aniversariante-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: var(--radius-md);
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.aniversariante-card.aniversariante-hoje {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border-color: #f59e0b;
}

.aniversariante-icon {
    font-size: 24px;
}

.aniversariante-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.aniversariante-idade {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin-left: 8px;
}

.aniversariante-data {
    color: var(--accent-primary);
    font-weight: var(--font-medium);
}

.tag-consulta {
    font-size: var(--text-xs);
    background: #d1fae5;
    color: #059669;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
}

.btn-parabens {
    padding: 8px 16px;
    background: #25d366;
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    transition: all var(--transition-base);
}

.btn-parabens:hover {
    background: #128c7e;
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.empty-state {
    color: var(--text-secondary);
    text-align: center;
    padding: 20px;
    font-size: var(--text-sm);
}

/* === CHECKBOX GROUP PARA DIAS DA SEMANA === */
.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px;
    background: var(--bg-primary);
    border: 1px solid #e0e0e0;
    border-radius: var(--radius-md);
    margin-top: 8px;
}

.checkbox-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--text-sm);
    transition: all var(--transition-base);
    user-select: none;
}

.checkbox-group label:hover {
    background: #f5f5f5;
    border-color: var(--accent-primary);
}

.checkbox-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--accent-primary);
}

.checkbox-group input[type="checkbox"]:checked + span {
    font-weight: var(--font-semibold);
    color: var(--accent-primary);
}

.checkbox-group label:has(input:checked) {
    background: var(--accent-light);
    border-color: var(--accent-primary);
}

.form-actions {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* Melhorar alinhamento dos cards de agendamento */
.agendamento-card-compacto {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.agendamento-card-compacto > * {
    flex-shrink: 0;
}

.agendamento-card-compacto > div:first-of-type {
    flex: 1;
    min-width: 0;
}

.btn-logout {
    background: var(--status-red);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    transition: all var(--transition-base);
    font-family: var(--font-family);
}

.btn-logout:hover {
    background: #DC2626;
    transform: translateY(-1px);
}

/* Navbar / Header */
.navbar {
    background: var(--bg-secondary);
    box-shadow: var(--shadow-sm);
    padding: var(--spacing-md) var(--spacing-xl);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xl);
}

.nav-brand h2 {
    color: var(--accent-primary);
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
}

.nav-menu {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.nav-link {
    text-decoration: none;
    color: var(--text-secondary);
    font-weight: var(--font-medium);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    transition: all var(--transition-base);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--text-sm);
}

.nav-link:hover {
    background: var(--bg-primary);
    color: var(--accent-primary);
}

.nav-link.active {
    background: var(--accent-primary);
    color: white;
}

.badge {
    background: var(--status-red);
    color: white;
    border-radius: var(--radius-full);
    padding: 0.2rem 0.5rem;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
}

/* Container */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--spacing-xl) var(--spacing-xl);
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xl);
}

.page-header h1 {
    font-size: var(--text-2xl);
    color: var(--text-primary);
    font-weight: var(--font-bold);
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: var(--bg-secondary);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    transition: all var(--transition-base);
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.stat-icon {
    font-size: 3rem;
}

.stat-info h3 {
    font-size: var(--text-2xl);
    color: var(--accent-primary);
    margin-bottom: var(--spacing-xs);
    font-weight: var(--font-bold);
}

.stat-info p {
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

/* Content Grid */
.content-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 1.5rem;
}

.card {
    background: var(--bg-secondary);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-base);
}

.card:hover {
    box-shadow: var(--shadow-lg);
}

.card h3 {
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
    font-weight: var(--font-semibold);
    font-size: var(--text-lg);
}

/* Search Bar */
.search-bar {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.search-input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid #E5E7EB;
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-family: var(--font-family);
    transition: all var(--transition-base);
}

.search-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-light);
}

.filters {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    flex-wrap: wrap;
}

.filter-input {
    padding: 10px 14px;
    border: 1px solid #E5E7EB;
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-family: var(--font-family);
    transition: all var(--transition-base);
}

.filter-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-light);
}

/* Table */
.table-container {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    margin-bottom: var(--spacing-lg);
}

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

.data-table thead {
    background: var(--accent-primary);
    color: white;
}

.data-table th {
    padding: var(--spacing-md);
    text-align: left;
    font-weight: var(--font-semibold);
    font-size: var(--text-sm);
}

.data-table td {
    padding: var(--spacing-md);
    border-bottom: 1px solid #E5E7EB;
    font-size: var(--text-sm);
}

.data-table tbody tr:hover {
    background: var(--bg-primary);
}

.empty-state {
    text-align: center;
    color: var(--text-muted);
    padding: var(--spacing-xl);
    font-style: italic;
}

/* Agendamentos cancelados */
.agendamento-cancelado {
    background: var(--bg-primary);
    opacity: 0.7;
}

.agendamento-cancelado td {
    color: var(--text-muted);
}

.agendamento-cancelado:hover {
    background: var(--bg-primary);
    opacity: 0.8;
}

/* Status Badge - Sistema de Bolinhas */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    font-family: var(--font-family);
}

/* Status: Não enviado (cinza) */
.status-gray,
.status-nao_enviado {
    background: var(--status-gray-bg);
    color: var(--status-gray-text);
}

/* Status: Pendente/Aguardando (amarelo) */
.status-pendente,
.status-aguardando {
    background: var(--status-yellow-bg);
    color: var(--status-yellow-text);
}

/* Status: Confirmado (verde) */
.status-confirmado {
    background: var(--status-green-bg);
    color: var(--status-green-text);
}

/* Status: Cancelado (vermelho) */
.status-cancelado,
.status-falta {
    background: var(--status-red-bg);
    color: var(--status-red-text);
}

/* Status: Remarcação (azul) */
.status-remarcacao,
.status-remarcacao_solicitada {
    background: var(--status-blue-bg);
    color: var(--status-blue-text);
}

/* Status: Requer atenção (laranja) */
.status-atencao,
.status-requer_atencao {
    background: var(--status-orange-bg);
    color: var(--status-orange-text);
}

/* Status: Realizado */
.status-realizado {
    background: var(--status-green-bg);
    color: var(--status-green-text);
}

/* Bolinha de status (para calendário e cards) */
.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.status-dot-gray { background: var(--status-gray); }
.status-dot-yellow { background: var(--status-yellow); }
.status-dot-green { background: var(--status-green); }
.status-dot-red { background: var(--status-red); }
.status-dot-blue { background: var(--status-blue); }
.status-dot-orange { background: var(--status-orange); }

/* Loading animation */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

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

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.loading {
    text-align: center;
    padding: var(--spacing-xl);
    color: var(--text-secondary);
}

/* Loading Skeleton */
.skeleton {
    background: linear-gradient(90deg, var(--bg-primary) 25%, #E5E7EB 50%, var(--bg-primary) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-md);
}

.skeleton-text {
    height: 1rem;
    margin-bottom: 0.5rem;
    border-radius: var(--radius-sm);
}

.skeleton-title {
    height: 1.5rem;
    width: 60%;
    margin-bottom: 1rem;
    border-radius: var(--radius-sm);
}

.skeleton-card {
    height: 80px;
    margin-bottom: var(--spacing-md);
    border-radius: var(--radius-md);
}

.skeleton-button {
    height: 40px;
    width: 120px;
    border-radius: var(--radius-md);
}

.fade-in {
    animation: fadeIn var(--transition-slow);
}

/* Menu Hambúrguer para Mobile */
.menu-toggle {
    display: none;
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 110;
    background: var(--accent-primary);
    color: white;
    border: none;
    padding: 12px;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--text-xl);
    box-shadow: var(--shadow-md);
}

.menu-toggle:hover {
    background: var(--accent-hover);
}

.empty-state {
    text-align: center;
    padding: 2rem;
    color: #999;
    font-style: italic;
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

/* Modal */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    margin: 2rem auto;
}

.modal-content.modal-busca-avancada {
    max-width: 700px;
    width: calc(100% - 4rem);
    min-width: 500px;
    margin: 2rem auto;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid #e0e0e0;
}

.modal-header h2 {
    color: #333;
}

.modal-close {
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: #999;
    line-height: 1;
}

.modal-close:hover {
    color: #333;
}

.modal-form {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 1rem;
}

.form-group textarea {
    padding: 0.75rem;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    resize: vertical;
}

.form-group select {
    padding: 0.75rem;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1rem;
}

.form-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.form-row .form-group {
    flex: 1;
    min-width: 150px;
}

.modal-body {
    padding: 1.5rem;
}

/* Modal Homologação C6 */
.homologacao-resumo {
    margin-bottom: 1rem;
    font-weight: 600;
    color: var(--text-primary, #333);
}
.homologacao-lista {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
}
.homologacao-lista li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border-color, #eee);
}
.homologacao-lista li:last-child {
    border-bottom: none;
}
.homologacao-lista .homolog-status {
    flex-shrink: 0;
    width: 1.5rem;
    text-align: center;
    font-size: 1.1rem;
}
.homologacao-lista .homolog-status.ok {
    color: #22c55e;
}
.homologacao-lista .homolog-status.erro {
    color: #ef4444;
}
.homologacao-lista .homolog-status.ignorado {
    color: #94a3b8;
}
.homologacao-lista .homolog-id {
    flex-shrink: 0;
    font-weight: 600;
    min-width: 2.5rem;
}
.homologacao-lista .homolog-desc {
    flex: 1;
    font-size: 0.9rem;
}

/* Modal de notificações (popup no header) */
.notif-item-modal {
    padding: var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-sm);
}
.notif-item-nao-lida {
    background: var(--status-blue-bg);
    border-left: 4px solid var(--status-blue);
}
.notif-tab.active {
    background: var(--accent-primary);
    color: white;
    border-color: var(--accent-primary);
}
.btn-sm {
    padding: 0.35rem 0.75rem;
    font-size: var(--text-xs);
}
.notificacoes-lista-modal .btn-sm {
    padding: 0.35rem 0.75rem;
    font-size: var(--text-xs);
}

/* Indicador de primeira consulta (Item 6 – Agente 4 Onda 2) */
.primeira-consulta-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    padding: 0.1rem 0.35rem;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: white;
    background: var(--status-blue);
    border-radius: var(--radius-full);
    vertical-align: middle;
}

/* Bolinha azul ao lado do nome na grade do dia (primeira consulta com o profissional) */
.primeira-consulta-bolinha {
    display: inline-block;
    width: 8px;
    height: 8px;
    min-width: 8px;
    min-height: 8px;
    border-radius: 50%;
    background: #93C5FD;
    flex-shrink: 0;
    vertical-align: middle;
}

/* Modal de detalhes (criado dinamicamente) */
#detalhesAgendamentoModal .modal-content {
    width: calc(100% - 4rem);
    max-width: 640px;
}

/* Ações do modal: 1 linha, sem corte (scroll horizontal se necessário) */
.detalhes-actions {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start !important; /* sobrescreve inline do modal */
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px; /* espaço para scrollbar sem “comer” conteúdo */
}

.detalhes-actions > button {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 10px 14px;
    font-size: 0.95rem;
}

.modal-busca-avancada .modal-body {
    padding: 1.5rem 2rem 2rem 2rem;
}

.error-message {
    background: var(--status-red-bg);
    color: var(--status-red-text);
    padding: var(--spacing-md);
    border-radius: var(--radius-sm);
    margin-top: var(--spacing-md);
    font-size: var(--text-sm);
}

.success-message {
    background: var(--status-green-bg);
    color: var(--status-green-text);
    padding: var(--spacing-md);
    border-radius: var(--radius-sm);
    margin-top: var(--spacing-md);
    font-size: var(--text-sm);
}

/* Lists */
.agendamentos-list, .pacientes-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.list-item {
    padding: var(--spacing-md);
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--accent-primary);
    transition: all var(--transition-base);
}

.list-item:hover {
    background: var(--bg-secondary);
    box-shadow: var(--shadow-sm);
}

.list-item h4 {
    margin-bottom: var(--spacing-sm);
    color: var(--text-primary);
    font-weight: var(--font-semibold);
    font-size: var(--text-base);
}

.list-item p {
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

/* Calendário */
.calendario-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.calendario-dia-header {
    text-align: center;
    font-weight: var(--font-semibold);
    color: var(--accent-primary);
    padding: var(--spacing-sm);
    font-size: var(--text-sm);
}

.calendario-dia {
    aspect-ratio: 1;
    border: 2px solid #E5E7EB;
    border-radius: var(--radius-md);
    padding: var(--spacing-sm);
    cursor: pointer;
    transition: all var(--transition-base);
    background: var(--bg-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.calendario-dia:hover {
    border-color: var(--accent-primary);
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
}

.calendario-dia.outro-mes {
    opacity: 0.3;
    background: #f5f5f5;
}

.calendario-dia.hoje {
    border: 2px solid #22c55e; /* Contorno verde = hoje */
    font-weight: var(--font-bold);
}

.calendario-dia.selected {
    border: 2px solid var(--accent-border-light);
    background: var(--accent-light);
    box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.3);
}

.calendario-dia-numero {
    font-size: 0.9rem;
    font-weight: var(--font-semibold);
    margin-bottom: 0.15rem;
}

.calendario-dia-contador {
    font-size: 0.65rem;
    font-weight: var(--font-semibold);
    padding: 0.1rem 0.3rem;
    border-radius: var(--radius-sm);
    margin-top: 0.15rem;
}

/* Cores baseadas em disponibilidade (admin) */
/* Branco = dia com pelo menos um horário disponível */
.calendario-dia.disponivel {
    background: #FFFFFF;
    border-color: #E5E7EB;
}

.calendario-dia.quase-lotado {
    background: #FFFFFF;
    border-color: #E5E7EB;
}

/* Vermelho clarinho = dia sem horários disponíveis */
.calendario-dia.cheio {
    background: #FEE2E2;
    border-color: #FCA5A5;
}

/* Cinza = dia bloqueado */
.calendario-dia.bloqueado {
    background: #E5E7EB;
    border-color: #9CA3AF;
}

.calendario-dia.lotado {
    background: #FEE2E2;
    border-color: #FCA5A5;
}

/* Dia selecionado = borda roxa clara em todos os estados (sobrescreve disponivel/bloqueado/cheio) */
.calendario-dia.selected.disponivel,
.calendario-dia.selected.quase-lotado,
.calendario-dia.selected.cheio,
.calendario-dia.selected.bloqueado,
.calendario-dia.selected.lotado {
    border: 2px solid var(--accent-border-light);
    box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.3);
}

/* Hoje = contorno verde em todos os estados */
.calendario-dia.hoje.disponivel,
.calendario-dia.hoje.quase-lotado,
.calendario-dia.hoje.cheio,
.calendario-dia.hoje.bloqueado,
.calendario-dia.hoje.lotado {
    border: 2px solid #22c55e;
}

/* Cores baseadas em status (mantidas para compatibilidade) */
.calendario-dia.pendente {
    background: var(--status-yellow-bg);
    border-color: var(--status-yellow);
}

.calendario-dia.confirmado {
    background: var(--status-green-bg);
    border-color: var(--status-green);
}

.calendario-dia.realizado {
    background: var(--status-green-bg);
    border-color: var(--status-green);
}

.calendario-dia.cancelado,
.calendario-dia.falta {
    background: var(--status-red-bg);
    border-color: var(--status-red);
}

.calendario-dia.misto {
    background: var(--gradient-card-hover);
    border-color: var(--status-yellow);
}

.calendario-legend {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid #ccc;
}

/* Legenda do calendário mensal (Item 10) */
.calendario-legenda {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-sm);
    border-top: 1px solid #E5E7EB;
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.calendario-legenda-titulo {
    font-weight: var(--font-semibold);
    margin-bottom: 6px;
    color: var(--text-primary);
}
.calendario-legenda-itens {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    align-items: center;
}
.calendario-legenda-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.calendario-legenda-quadro {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.15);
    flex-shrink: 0;
}
.calendario-legenda-quadro.disponivel { background: #FFFFFF; border-color: #E5E7EB; }
.calendario-legenda-quadro.bloqueado { background: #E5E7EB; border-color: #9CA3AF; }
.calendario-legenda-quadro.cheio { background: #FEE2E2; border-color: #FCA5A5; }
.calendario-legenda-quadro.hoje-borda { background: transparent; border: 2px solid #22c55e; }

/* ============================================
   LAYOUT COM SIDEBAR E HEADER
   ============================================ */

/* Layout Principal */
.app-layout {
    display: flex;
    min-height: 100vh;
    background: var(--bg-primary);
}

/* Header Fixo */
.app-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: var(--bg-secondary);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--spacing-xl);
    z-index: 100;
}

.app-header-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
}

.app-header-logo {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--accent-primary);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.app-header-search {
    position: relative;
    width: 300px;
}

.app-header-search input {
    width: 100%;
    padding: 8px 14px 8px 36px;
    border: 1px solid #E5E7EB;
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-family: var(--font-family);
    transition: all var(--transition-base);
}

.app-header-search input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-light);
}

.search-results-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-secondary);
    border: 1px solid #E5E7EB;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    max-height: 400px;
    overflow-y: auto;
    z-index: 1000;
    margin-top: 4px;
}

.search-result-item {
    padding: var(--spacing-md);
    cursor: pointer;
    transition: all var(--transition-base);
    border-bottom: 1px solid #E5E7EB;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover {
    background: var(--bg-primary);
}

.search-result-item h4 {
    margin: 0 0 var(--spacing-xs) 0;
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
}

.search-result-item p {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-xs);
}

.app-header-search::before {
    content: '🔍';
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--text-sm);
}

.app-header-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.app-header-notifications {
    position: relative;
    cursor: pointer;
    padding: var(--spacing-sm);
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
}

.app-header-notifications:hover {
    background: var(--bg-primary);
}

.app-header-notifications-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    background: var(--status-red);
    border-radius: 50%;
    border: 2px solid var(--bg-secondary);
}

.app-header-profile {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
}

.app-header-profile:hover {
    background: var(--bg-primary);
}

.app-header-profile-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: var(--font-semibold);
    font-size: var(--text-sm);
}

/* Botão ocultar/expandir sidebar (desktop) */
.sidebar-collapse-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-right: var(--spacing-sm);
    padding: 0;
    border: none;
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    transition: background var(--transition-base), color var(--transition-base);
}
.sidebar-collapse-btn:hover {
    background: var(--accent-light);
    color: var(--accent-primary);
}
@media (min-width: 1025px) {
    .sidebar-collapse-btn {
        display: flex;
    }
}
@media (max-width: 1024px) {
    .sidebar-collapse-btn {
        display: none;
    }
}

/* Sidebar colapsada (desktop): oculta e libera espaço */
body.sidebar-collapsed .app-sidebar {
    width: 0;
    min-width: 0;
    overflow: hidden;
    padding: 0;
    box-shadow: none;
}
body.sidebar-collapsed .app-main {
    margin-left: 0;
    width: 100%;
}

/* Sidebar */
.app-sidebar {
    position: fixed;
    left: 0;
    top: 64px;
    width: 240px;
    height: calc(100vh - 64px);
    background: var(--bg-secondary);
    box-shadow: var(--shadow-md);
    overflow-y: auto;
    z-index: 90;
    padding: var(--spacing-lg) 0;
    transition: width var(--transition-base), min-width var(--transition-base), padding var(--transition-base), box-shadow var(--transition-base);
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding: 0 var(--spacing-md);
}

.sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    transition: all var(--transition-base);
    cursor: pointer;
}

.sidebar-nav-item:hover {
    background: var(--bg-primary);
    color: var(--accent-primary);
}

.sidebar-nav-item.active {
    background: var(--accent-light);
    color: var(--accent-primary);
    font-weight: var(--font-semibold);
}

.sidebar-nav-item-icon {
    font-size: var(--text-lg);
    width: 24px;
    text-align: center;
}

.sidebar-divider {
    height: 1px;
    background: #E5E7EB;
    margin: var(--spacing-md) 0;
}

.sidebar-section-title {
    padding: var(--spacing-md);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sidebar-filters {
    padding: 0 var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.sidebar-filter-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.sidebar-filter-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--accent-primary);
}

.sidebar-filter-item label {
    cursor: pointer;
    flex: 1;
}

/* Área Principal */
.app-main {
    margin-left: 240px;
    margin-top: 64px;
    padding: var(--spacing-xl);
    width: calc(100% - 240px);
    min-height: calc(100vh - 64px);
    transition: margin-left var(--transition-base), width var(--transition-base);
}

/* Responsive */
@media (max-width: 1024px) {
    .menu-toggle {
        display: block;
    }
    
    .app-sidebar {
        transform: translateX(-100%);
        transition: transform var(--transition-base);
        box-shadow: var(--shadow-xl);
    }
    
    .app-sidebar.open {
        transform: translateX(0);
    }
    
    .app-main {
        margin-left: 0;
        width: 100%;
    }
    
    .app-header-search {
        width: 200px;
    }
    
    /* Calendário e lista lado a lado vira empilhado em telas menores */
    .app-main > div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 768px) {
    .app-header-search {
        display: none;
    }
    
    .app-header-left {
        gap: var(--spacing-sm);
    }
    
    .app-header-logo {
        font-size: var(--text-lg);
    }
}

@media (max-width: 768px) {
    .navbar {
        flex-direction: column;
        gap: 1rem;
    }
    
    .nav-menu {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .content-grid {
        grid-template-columns: 1fr;
    }
    
    .data-table {
        font-size: 0.85rem;
    }
    
    .data-table th,
    .data-table td {
        padding: 0.5rem;
    }
    
    .calendario-grid {
        gap: 0.25rem;
    }
    
    .calendario-dia {
        padding: 0.25rem;
        font-size: 0.8rem;
    }
    
    .calendario-dia-numero {
        font-size: 0.9rem;
    }
    
    .calendario-dia-contador {
        font-size: 0.65rem;
        padding: 0.1rem 0.3rem;
    }
}

/* === CARDS DE RESULTADO DA BUSCA AVANÇADA === */
.resultado-busca-card {
    position: relative;
    padding: 16px 20px;
    background: white;
    border: 2px solid var(--accent-primary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-base);
    min-width: 200px;
    flex: 1 1 calc(33.333% - 12px);
    max-width: 300px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.resultado-busca-card:hover {
    background: var(--accent-light);
    border-color: var(--accent-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.resultado-busca-card:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.resultado-busca-horario {
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--accent-primary);
    margin-bottom: 6px;
}

.resultado-busca-data {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.4;
}

.resultado-busca-icon {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: var(--text-xl);
    opacity: 0.3;
    transition: opacity var(--transition-base);
}

.resultado-busca-card:hover .resultado-busca-icon {
    opacity: 0.6;
}

@media (max-width: 768px) {
    .resultado-busca-card {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* Estilos removidos - usando .btn-primary e .btn-danger padrão */

/* ============================================
   VISUALIZAÇÃO SEMANA - GRID DE COLUNAS
   ============================================ */
#agendamentosDiaList {
    width: 100%;
    overflow-x: auto;
}

/* Grid responsivo para visualização semanal */
/* Desktop grande - 7 colunas */
@media (min-width: 1400px) {
    #agendamentosDiaList > div[style*="grid-template-columns: repeat(7"] {
        grid-template-columns: repeat(7, 1fr) !important;
    }
}

/* Desktop médio - 5 colunas */
@media (max-width: 1399px) and (min-width: 1024px) {
    #agendamentosDiaList > div[style*="grid-template-columns: repeat(7"] {
        grid-template-columns: repeat(5, 1fr) !important;
    }
}

/* Tablet - 3 colunas */
@media (max-width: 1023px) and (min-width: 768px) {
    #agendamentosDiaList > div[style*="grid-template-columns: repeat(7"] {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Mobile grande - 2 colunas */
@media (max-width: 767px) and (min-width: 481px) {
    #agendamentosDiaList > div[style*="grid-template-columns: repeat(7"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Mobile pequeno - 1 coluna */
@media (max-width: 480px) {
    #agendamentosDiaList > div[style*="grid-template-columns: repeat(7"] {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================
   ESTILOS FINANCEIROS
   ============================================ */

/* ===== FINANCEIRO (dashboard financeiro) ===== */
.financeiro-filtros {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.filtro-periodo {
    display: flex;
    gap: 0.5rem;
}

.btn-filtro {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
    background: var(--bg-white);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
}

.btn-filtro:hover {
    background: var(--bg-gray);
}

.btn-filtro.active {
    background: var(--accent-primary);
    color: white;
    border-color: var(--accent-primary);
}

.filtro-datas {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* Cards Financeiros */
.financeiro-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.card-financeiro {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    box-shadow: var(--shadow-sm);
    border-left: 4px solid;
}

.card-receita { border-color: var(--status-green); }
.card-despesa { border-color: var(--status-red); }
.card-lucro { border-color: var(--accent-primary); }
.card-repasse { border-color: var(--status-yellow); }

.card-icon {
    font-size: 2rem;
}

.card-info {
    display: flex;
    flex-direction: column;
}

.card-label {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.card-valor {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
}

.card-variacao {
    font-size: var(--text-sm);
}

.card-variacao.positiva { color: var(--status-green); }
.card-variacao.negativa { color: var(--status-red); }

/* Tabs */
.tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 1rem;
}

.financeiro-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 1.5rem;
}

.tab-btn {
    padding: 0.75rem 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    font-weight: var(--font-medium);
    color: var(--text-secondary);
    position: relative;
}

.tab-btn:hover {
    color: var(--accent-primary);
}

.tab-btn.active {
    color: var(--accent-primary);
}

.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent-primary);
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}

.tab-content {
    padding-top: 0.5rem;
}

/* Feed de consultas (prontuários) — estilo Instagram */
.feed-instagram-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--spacing-lg);
    padding: var(--spacing-sm) 0;
}

.feed-instagram-card {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-light, #eee);
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s ease;
}

.feed-instagram-card:hover {
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.08));
}

.feed-instagram-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--spacing-md) var(--spacing-lg);
    gap: var(--spacing-sm);
}

.feed-instagram-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.feed-instagram-date {
    color: var(--accent-primary, #2563eb);
    font-size: var(--text-base);
}

.feed-instagram-prof {
    color: var(--text-secondary, #64748b);
    font-size: var(--text-sm);
}

.feed-instagram-btn-detalhes {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--text-sm);
    white-space: nowrap;
}

.feed-instagram-media {
    aspect-ratio: 1;
    background: var(--bg-primary, #f8fafc);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Carrossel estilo Instagram (múltiplas fotos por registro) */
.feed-carousel {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.feed-carousel .feed-instagram-capa,
.feed-carousel .feed-carousel-link {
    display: block;
    width: 100%;
    height: 100%;
}
.feed-carousel .feed-carousel-link {
    flex: 1;
}
.feed-carousel .feed-carousel-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.feed-carousel-prev,
.feed-carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    color: #333;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.feed-carousel-prev:hover,
.feed-carousel-next:hover {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.feed-carousel-prev { left: 8px; }
.feed-carousel-next { right: 8px; }
.feed-carousel-dots {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 6px;
    z-index: 2;
}
.feed-carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.6);
    cursor: pointer;
    padding: 0;
}
.feed-carousel-dot:hover {
    background: rgba(255,255,255,0.9);
}
.feed-carousel-dot.active {
    background: #fff;
    transform: scale(1.2);
}
.feed-carousel-modal .feed-carousel-img {
    object-fit: contain;
}

/* Barra do profissional na Agenda (em cima do calendário, mais visível) */
.agenda-profissional-bar {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    background: var(--bg-secondary, #f1f5f9);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color, #e2e8f0);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05));
    flex-wrap: wrap;
}
.agenda-profissional-bar label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    white-space: nowrap;
}
.agenda-profissional-select {
    min-width: 260px;
    padding: 10px 14px;
    font-size: 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-white, #fff);
}

.feed-instagram-capa {
    display: block;
    width: 100%;
    height: 100%;
}

.feed-instagram-capa img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.feed-instagram-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    color: var(--text-secondary, #94a3b8);
    font-size: var(--text-sm);
}

.feed-instagram-placeholder-icon {
    font-size: 2.5rem;
    opacity: 0.6;
}

.feed-instagram-body {
    padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.feed-instagram-caption {
    margin: 0;
    color: var(--text-secondary, #475569);
    font-size: var(--text-sm);
    white-space: pre-wrap;
    line-height: 1.45;
}

.feed-instagram-thumbs {
    display: flex;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}

.feed-instagram-thumbs .feed-foto-thumb {
    display: block;
}

.feed-card .feed-foto-thumb,
.feed-instagram-card .feed-foto-thumb {
    display: block;
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

/* Gráficos */
.graficos-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.grafico-card {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.grafico-card h3 {
    margin-bottom: 1rem;
    font-size: var(--text-lg);
}

/* Ajuste de altura dos canvas para Chart.js */
.grafico-card canvas {
    width: 100% !important;
    height: 280px !important;
}

/* Movimentações */
.movimentacoes-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.filtros-movimentacoes {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

/* Repasses */
.repasses-lista {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}

.repasse-card {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.repasse-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.repasse-profissional {
    font-weight: var(--font-semibold);
    font-size: var(--text-lg);
}

.repasse-valor {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--status-yellow);
}

.repasse-detalhes {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

/* Relatórios */
.relatorios-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.relatorio-card {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: var(--shadow-sm);
    user-select: none;
}

.relatorio-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.relatorio-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.relatorio-card h4 {
    margin-bottom: 0.25rem;
}

.relatorio-card p {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.relatorio-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

/* DRE */
.dre-container {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    padding: 2rem;
}

.dre-linha {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-color);
}

.dre-linha.total {
    font-weight: var(--font-bold);
    border-top: 2px solid var(--text-primary);
    border-bottom: none;
    margin-top: 0.5rem;
    padding-top: 1rem;
}

.dre-linha.subtotal {
    font-weight: var(--font-semibold);
    background: var(--bg-gray);
    margin: 0 -1rem;
    padding: 0.75rem 1rem;
}

.dre-valor.positivo { color: var(--status-green); }
.dre-valor.negativo { color: var(--status-red); }

@media print {
    .app-sidebar,
    .menu-toggle,
    .app-header,
    .financeiro-filtros,
    .financeiro-cards,
    .financeiro-tabs,
    #btnImprimirRelatorio {
        display: none !important;
    }

    .app-main {
        padding: 0 !important;
    }

    #relatorioGerado {
        display: block !important;
    }
}

/* Card de agendamento pago */
.agendamento-pago {
    background: linear-gradient(to right, #f0fdf4, white) !important;
    border-left: 4px solid #22c55e !important;
}

/* Botão receber pagamento */
.btn-receber {
    padding: 8px 16px;
    background: var(--accent-primary);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: var(--font-medium);
    font-size: var(--text-sm);
    transition: all var(--transition-base);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.btn-receber:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Status pago */
.status-pago {
    color: #22c55e;
    font-weight: var(--font-semibold);
}

/* Info do pagamento */
.pagamento-info {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    background: #f0f0f0;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
}

/* Botões de forma de pagamento */
.forma-pagamento-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 24px;
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    gap: 8px;
}

.forma-pagamento-btn:hover {
    border-color: var(--accent-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.forma-pagamento-btn.selected {
    border-color: var(--accent-primary);
    background: var(--accent-light);
}

.forma-pagamento-btn .icon {
    font-size: 24px;
    margin-bottom: 4px;
}

/* Botões de tipo de paciente */
.tipo-paciente-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px;
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    gap: 8px;
    flex: 1;
}

.tipo-paciente-btn:hover {
    border-color: var(--accent-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.tipo-paciente-btn.selected {
    border-color: var(--accent-primary);
    background: var(--accent-light);
}

/* Seções do caixa */
.caixa-section {
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md);
    background: var(--bg-primary);
    border-radius: var(--radius-md);
}

.caixa-section h3 {
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
    font-size: var(--text-lg);
}

/* Item de movimentação */
.movimentacao-item {
    transition: background 0.2s;
}

.movimentacao-item:hover {
    background: var(--bg-secondary);
}

/* Modal grande para caixa */
.modal-large {
    max-width: 90vw;
    width: 90vw;
}

@media (max-width: 768px) {
    .modal-large {
        max-width: 95vw;
        width: 95vw;
    }
}

/* Conciliação bancária */
.conciliacao-lista-wrapper {
    display: flex;
    gap: var(--spacing-md);
    align-items: flex-start;
}
.conciliacao-lista {
    flex: 1;
    min-width: 0;
}
.conciliacao-painel-lateral {
    width: 320px;
    flex-shrink: 0;
    align-self: flex-start;
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    box-shadow: var(--shadow-sm);
}
.conciliacao-painel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}
.conciliacao-painel-header h4 {
    margin: 0;
    font-size: var(--text-base);
}
.conciliacao-painel-body .conciliacao-painel-desc,
.conciliacao-painel-body .conciliacao-painel-valor {
    margin: 0 0 var(--spacing-sm);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}
.conciliacao-painel-acoes label {
    display: block;
    margin-top: var(--spacing-sm);
    margin-bottom: 4px;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
}
.conciliacao-hint {
    margin: 0 0 6px;
    font-size: 11px;
    color: var(--text-muted, #6b7280);
}
.conciliacao-painel-acoes select {
    width: 100%;
    padding: 8px;
    margin-bottom: 8px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
}
.conciliacao-painel-acoes hr {
    margin: var(--spacing-sm) 0;
    border: none;
    border-top: 1px solid var(--border-color);
}
.btn-block {
    width: 100%;
    margin-bottom: 4px;
}
.conciliacao-lembrar {
    margin-top: var(--spacing-md);
    font-size: var(--text-sm);
}
.conciliacao-cards {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-md);
}
.conciliacao-cards .card-financeiro {
    min-width: 120px;
}
#conciliacaoTransacoesBody tr[role="button"] {
    cursor: pointer;
}
#conciliacaoTransacoesBody tr[role="button"]:hover {
    background: var(--bg-gray);
}
#conciliacaoTransacoesBody tr.selected {
    background: var(--accent-light);
}
.btn-icon {
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
}
@media (max-width: 768px) {
    .conciliacao-lista-wrapper {
        flex-direction: column;
    }
    .conciliacao-painel-lateral {
        width: 100%;
    }
}