:root { 
            --bg-body: #f8fafc;
            --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 2px 4px -2px rgba(0, 0, 0, 0.025);
            --card-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
            --border-color: #e2e8f0;
        } 

        /* ==========================================
           RESET E BASE BLINDADA CONTRA ESTOURO
           ========================================== */
        * { box-sizing: border-box; min-width: 0; }

        body { 
            font-family: 'Inter', sans-serif; 
            background: var(--bg-body, #f8fafc); 
            color: var(--text-main, #0f172a); 
            margin: 0; 
            padding: 20px; 
            -webkit-font-smoothing: antialiased;
        }

        h1, h2, h3, h4, h5, h6 { font-family: 'Poppins', sans-serif; }

        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--primary); }

        /* ==========================================
           SWITCH E BOTÕES
           ========================================== */
        .switch { position: relative; display: inline-block; width: 44px; height: 24px; margin: 0; flex-shrink: 0; }
        .switch input { opacity: 0; width: 0; height: 0; }
        .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #cbd5e1; transition: .3s; border-radius: 34px; }
        .slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .3s; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
        input:checked + .slider { background-color: #10b981; }
        input:checked + .slider:before { transform: translateX(20px); }

        /* ==========================================
           AUTENTICAÇÃO E MODAIS
           ========================================== */
        .auth-container { 
            width: 100%; max-width: 400px; margin: 200px auto; background: #fff; 
            padding: 40px; border-radius: 20px; border: 1px solid rgba(0,0,0,0.05); 
            box-shadow: var(--card-shadow-hover); text-align: center;
        }

        input, select, textarea { 
            width: 100%; padding: 14px 16px; margin-bottom: 16px; border-radius: 12px; 
            border: 1px solid #cbd5e1; background: #f8fafc; color: var(--text-main, #0f172a); 
            font-family: 'Inter', sans-serif; font-size: 14px; transition: all 0.2s ease;
        }

        input:focus, select:focus, textarea:focus {
            outline: none; border-color: var(--primary); background: #ffffff;
            box-shadow: 0 0 0 3px rgba(0,0,0,0.05);
        }

        button { 
            width: 100%; background: var(--primary); color: #fff; border: none; 
            padding: 14px; border-radius: 12px; font-size: 15px; font-weight: 600; 
            font-family: 'Inter', sans-serif; cursor: pointer; transition: all 0.2s ease; 
            display: inline-flex; justify-content: center; align-items: center; gap: 8px;
        }

        button:hover { transform: translateY(-1px); filter: brightness(1.05); }
        button:active { transform: translateY(0); }

        /* ==========================================
           SELETORES DO CALENDÁRIO (MÊS E ANO)
           ========================================== */
        .seletor-data-container {
            display: flex;
            gap: 10px;
            align-items: center;
            justify-content: center;
            flex: 1;
        }

        .seletor-input {
            padding: 8px 15px; 
            border-radius: 8px; 
            border: 2px solid var(--primary); 
            font-weight: 700; 
            color: var(--primary); 
            background: #f8fafc; 
            outline: none; 
            cursor: pointer; 
            font-size: 14px; 
            font-family: 'Poppins', sans-serif;
            flex: 1;
            margin: 0; 
            width: 100%; 
        }

        /* ==========================================
           LAYOUT GERAL E TOPBAR
           ========================================== */
        .dashboard-container { max-width: 1200px; margin: 0 auto; }

        .topbar { 
            background: var(--primary); padding: 22px 30px; color: #fff; 
            display: flex; justify-content: space-between; align-items: center; 
            border-radius: 20px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); margin-bottom: 25px;
            flex-wrap: wrap; gap: 15px;
        }

        #menuTabs { 
            display: flex; gap: 8px; margin-bottom: 30px; flex-wrap: wrap; 
            background: #fff; padding: 10px; border-radius: 16px; 
            box-shadow: var(--card-shadow); border: 1px solid rgba(0,0,0,0.03);
        }
        
        .tab-btn { 
            padding: 12px 18px; border: none; border-radius: 12px; cursor: pointer; 
            background: transparent; color: #64748b; font-weight: 600; font-size: 14px;
            transition: all 0.2s ease; flex: 1; min-width: 130px; text-align: center; box-shadow: none;
        }
        .tab-btn:hover { background: #f1f5f9; color: #0f172a; }
        .tab-btn.active { background: var(--primary); color: white; box-shadow: 0 4px 10px rgba(0,0,0,0.15); }

        /* ==========================================
           CARDS E SISTEMA DE COLUNAS BLINDADO
           ========================================== */
        .card { 
            background: #fff; padding: 25px; border-radius: 20px; margin-bottom: 24px; 
            box-shadow: var(--card-shadow); border: 1px solid rgba(0,0,0,0.04); 
            word-wrap: break-word; overflow-wrap: break-word;
        }

        .flex-row { 
            display: grid; 
            grid-template-columns: repeat(2, minmax(0, 1fr)); 
            gap: 24px; 
            align-items: start; 
        }

        .flex-row > * { min-width: 0; }
        
        #agenda .flex-row { grid-template-columns: minmax(0, 1fr) 380px; }
        #config .flex-row { grid-template-columns: minmax(0, 1fr); }

        .tab-content { display: none; animation: fadeIn 0.3s ease; } 
        .tab-content.active { display: block; }

        ul { list-style: none; padding: 0; margin: 0; } 
        li { 
            background: #fff; border: 1px solid #f1f5f9; padding: 16px; margin-bottom: 10px; 
            border-radius: 14px; display: flex; justify-content: space-between; align-items: center; 
            gap: 15px; flex-wrap: wrap; word-break: break-word;
        }
        li:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.03); border-color: #e2e8f0; }

        hr { border: none; border-top: 1px solid #e2e8f0; margin: 25px 0; }
        .text-muted { color: #64748b; font-size: 13px; }

        /* ==========================================
           MODAIS E OVERLAYS
           ========================================== */
        .modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(4px); justify-content: center; align-items: center; z-index: 100000; padding: 20px; }
        .modal-box { background: #fff; padding: 35px; border-radius: 20px; width: 100%; max-width: 400px; position: relative; text-align: left; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); }
        .close-modal { position: absolute; top: 15px; right: 15px; background: #f1f5f9; border: none; font-size: 16px; color: #64748b; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; }
        
        #modalFichaAnamnese {
            display: none;
            align-items: center;
            justify-content: center;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            z-index: 999999;
            backdrop-filter: blur(3px);
            padding: 10px;
            box-sizing: border-box;
        }

        #modalFichaAnamnese .modal-box {
            max-height: 90vh;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            width: 100%;
            max-width: 650px;
            background: #fff;
            border-radius: 16px;
            padding: 20px;
            box-shadow: 0 15px 35px rgba(0,0,0,0.25);
            box-sizing: border-box;
        }

        #modalFichaAnamnese label {
            font-size: 14px !important;
            font-weight: 600;
            display: block;
            margin-bottom: 6px;
        }

        #modalFichaAnamnese input, 
        #modalFichaAnamnese select, 
        #modalFichaAnamnese textarea {
            font-size: 16px !important; 
            padding: 12px !important;
            border-radius: 8px;
            border: 1px solid #cbd5e1;
            width: 100%;
            box-sizing: border-box;
            font-family: inherit;
            background: #fff;
        }

        /* ==========================================
           COMPONENTES E ÍCONES ESPECÍFICOS
           ========================================== */
        .dollar-container, .pulsating-icon {
            position: relative !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 38px !important;
            height: 38px !important;
            min-width: 38px !important;
            max-width: 38px !important;
            min-height: 38px !important;
            max-height: 38px !important;
            border-radius: 50% !important;
            background: rgba(255,255,255,0.2) !important;
            color: #ffffff !important;
            cursor: pointer !important;
            flex-shrink: 0 !important;
            box-sizing: border-box !important;
            padding: 0 !important;
            margin: 0 !important;
        }        
        .dollar-container:hover { background: rgba(255,255,255,0.3); }
        .bell-container { position: relative; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: white; font-size: 18px; background: rgba(255,255,255,0.2); width: 38px; height: 38px; border-radius: 50%; transition: 0.2s;}
        .bell-container:hover { background: rgba(255,255,255,0.3); }
        .bell-dot { position: absolute; top: 2px; right: 2px; width: 10px; height: 10px; background-color: #ef4444; border-radius: 50%; display: none; border: 2px solid var(--primary); }

        /* ==========================================
           CALENDÁRIO CUSTOMIZADO
           ========================================== */
        .custom-calendar { width: 100%; background: #f8fafc; padding: 20px; border-radius: 16px; border: 1px solid #e2e8f0; }
        .calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
        .calendar-header button { width: auto; background: #fff; color: #0f172a; font-size: 13px; padding: 8px 16px; border-radius: 10px; border: 1px solid #e2e8f0; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
        .calendar-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-weight: 700; font-size: 11px; text-transform: uppercase; color: #94a3b8; margin-bottom: 10px; }
        .calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
        .calendar-day { background: #fff; padding: 10px 0; text-align: center; border-radius: 10px; cursor: pointer; font-size: 14px; font-weight: 500; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 45px; border: 1px solid transparent; transition: all 0.2s; }
        .calendar-day:hover { border-color: var(--primary); color: var(--primary); }
        .calendar-day.active { background: var(--primary); color: white; font-weight: 600; }
        .calendar-day.muted { background: transparent; color: #cbd5e1; pointer-events: none; }
        .calendar-day .event-dot { width: 6px; height: 6px; background: #ef4444; border-radius: 50%; margin-top: 4px; }
        .calendar-day.active .event-dot { background: white; }

        /* ==========================================
           UPLOAD E INPUTS ESPECIAIS
           ========================================== */
        .btn-custom-upload { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 14px; background: #f8fafc; border: 2px dashed #cbd5e1; border-radius: 12px; cursor: pointer; color: #64748b; font-weight: 600; transition: 0.2s; }
        .btn-custom-upload:hover { border-color: var(--primary); background: #f1f5f9; color: var(--primary); }
        
        .input-group { position: relative !important; width: 100% !important; display: flex !important; align-items: center !important; margin-bottom: 16px !important; }
        .input-group input { width: 100% !important; margin: 0 !important; padding-right: 40px !important; }
        .toggle-password { position: absolute !important; right: 15px !important; cursor: pointer !important; color: #94a3b8 !important; z-index: 10 !important; }

        /* ==========================================
           RESPONSIVIDADE MOBILE OTIMIZADA
           ========================================== */
        #btnMenuMobile { 
            display: none; background: #fff; color: #0f172a; border: 1px solid #e2e8f0; 
            padding: 16px 20px; border-radius: 14px; font-weight: 600; cursor: pointer; margin: 0 auto 20px auto; 
            width: 100%; font-size: 15px; justify-content: space-between; align-items: center; box-shadow: var(--card-shadow); 
        }

        /* MEDIA QUERIES PARA MOBILE */
        @media (max-width: 991px) {
            
            .topbar { flex-direction: column; align-items: flex-start; }
            .topbar-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
            
            #btnMenuMobile { display: flex !important; }
            #menuTabs { display: none !important; flex-direction: column; padding: 12px; gap: 8px; margin-bottom: 24px; }
            #menuTabs.show { display: flex !important; animation: fadeIn 0.3s ease; }
            .tab-btn { text-align: left; width: 100%; padding: 14px; display: flex; align-items: center; gap: 10px; }
            
            /* Garante que os cartões fiquem com 100% de largura */
            .flex-row { display: flex !important; flex-direction: column !important; gap: 20px !important; width: 100%; }
            .flex-row > * { width: 100% !important; }
            #agenda .flex-row { display: flex !important; flex-direction: column !important; }

            /* SELETORES DO CALENDÁRIO NO CELULAR (Empilha os botões de mês e ano) */
            .seletor-data-container {
                flex-direction: column !important;
                width: 100%;
                gap: 8px !important;
            }
            
            /* CORREÇÃO DEFINITIVA PARA CAMPOS LADO A LADO NO CELULAR */
            .row-mobile {
                display: flex !important;
                gap: 10px !important;
                width: 100% !important;
                box-sizing: border-box !important;
            }
            .row-mobile > * {
                flex: 1 !important;
                min-width: 0 !important;
            }
            .row-mobile .input-group {
                margin-bottom: 0 !important;
            }
            
            /* Exceção para o campo de busca de cliente */
            #clientes .row-mobile { grid-template-columns: 1fr auto !important; }

            /* CORREÇÃO PARA A LISTA DE CLIENTES NO CELULAR */
            #listaClientesApp li {
                flex-direction: column !important;
                align-items: flex-start !important;
                align-stretch: stretch !important;
                gap: 12px !important;
                padding: 16px !important;
            }
            
            #listaClientesApp li > div,
            #listaClientesApp li .cliente-info {
                width: 100% !important;
            }

            /* Força os botões de ação do cliente a ocuparem a largura */
            #listaClientesApp li .btn-group,
            #listaClientesApp li div:last-child {
                width: 100% !important;
                display: flex !important;
                justify-content: flex-end !important;
                gap: 8px !important;
                border-top: 1px dashed #e2e8f0 !important;
                padding-top: 10px !important;
                margin-top: 4px !important;
            }
        }

        /* Ajustes específicos para telemóveis menores */
        @media (max-width: 480px) {
            #modalFichaAnamnese {
                padding: 5px; 
            }
            #modalFichaAnamnese .modal-box {
                max-height: 1200px;
                padding: 15px;
                border-radius: 12px;
            }
            #modalFichaAnamnese h3 {
                font-size: 17px !important;
            }
            #modalFichaAnamnese p {
                font-size: 13px !important;
            }
        }

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