/* ======================================================= */
        /* VARIÁVEIS E BASE                                        */
        /* ======================================================= */
        :root {
            --azul-escuro: #003366;
            --azul-hover: #001f3f;
            --laranja: #FF8C00;
            --laranja-hover: #E67E00;
            --cinza-fundo: #F8FAFC;
            --cinza-borda: #E2E8F0;
            --cinza-texto: #64748B;
            --cinza-escuro: #1E293B;
            --branco: #FFFFFF;
            --sucesso: #10B981;
            --sucesso-fundo: #DCFCE7;
            --erro: #EF4444;
            --erro-fundo: #FEE2E2;
            --whatsapp: #25D366;
            --sombra-leve: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
            --sombra-forte: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
            --transicao: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Inter', sans-serif;
            -webkit-font-smoothing: antialiased;
        }

        body {
            background-color: var(--cinza-fundo);
            color: var(--cinza-escuro);
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            overflow-x: hidden;
            line-height: 1.5;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        button,
        input,
        select,
        textarea {
            font-family: inherit;
        }

        /* Scrollbar Personalizada */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        ::-webkit-scrollbar-track {
            background: var(--cinza-fundo);
        }

        ::-webkit-scrollbar-thumb {
            background: #CBD5E1;
            border-radius: 10px;
            border: 2px solid var(--cinza-fundo);
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #94A3B8;
        }

        /* ======================================================= */
        /* AUTENTICAÇÃO                                            */
        /* ======================================================= */
        .logo-mapapro {
            font-size: 30px;
            font-weight: 800;
            letter-spacing: -1px;
            display: flex;
            align-items: center;
            text-decoration: none;
            user-select: none;
        }

        .logo-texto {
            color: var(--azul-escuro);
        }

        .logo-destaque {
            color: var(--laranja);
            display: flex;
            align-items: center;
        }

        .logo-pin {
            width: 20px;
            height: 26px;
            margin-left: 1px;
            transform: translateY(1px);
        }

        #vista-autenticacao {
            display: block;
            flex: 1;
            animation: fadeIn 0.5s ease;
            background-color: var(--cinza-fundo);
        }

        .auth-header {
            background: var(--branco);
            padding: 15px 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid var(--cinza-borda);
            height: 80px;
        }

        .btn-voltar-mapa {
            color: var(--cinza-texto);
            font-weight: 600;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: var(--transicao);
            padding: 8px 16px;
            border-radius: 8px;
        }

        .btn-voltar-mapa:hover {
            color: var(--azul-escuro);
            background: var(--cinza-fundo);
        }

        .hero-auth {
            background: linear-gradient(135deg, var(--azul-escuro) 0%, #001f3f 100%);
            color: white;
            text-align: center;
            padding: 80px 20px 100px;
            position: relative;
            overflow: hidden;
        }

        .hero-auth h1 {
            font-size: 42px;
            color: var(--branco);
            margin-bottom: 15px;
            font-weight: 800;
            letter-spacing: -0.5px;
        }

        .hero-auth h1 span {
            color: var(--laranja);
        }

        .hero-auth p {
            font-size: 19px;
            color: #CBD5E1;
            max-width: 700px;
            margin: 0 auto;
            line-height: 1.6;
        }

        .auth-container {
            max-width: 800px;
            margin: -50px auto 60px;
            background: var(--branco);
            border-radius: 20px;
            box-shadow: var(--sombra-forte);
            position: relative;
            z-index: 10;
            overflow: hidden;
            border: 1px solid var(--cinza-borda);
        }

        .auth-tabs {
            display: flex;
            background: #F8FAFC;
            border-bottom: 1px solid var(--cinza-borda);
        }

        .auth-tab {
            flex: 1;
            text-align: center;
            padding: 22px;
            font-weight: 700;
            cursor: pointer;
            color: var(--cinza-texto);
            transition: var(--transicao);
            font-size: 14px;
            text-transform: uppercase;
            border-bottom: 3px solid transparent;
        }

        .auth-tab:hover {
            color: var(--azul-escuro);
            background: #F1F5F9;
        }

        .auth-tab.ativo {
            background: var(--branco);
            color: var(--laranja);
            border-bottom-color: var(--laranja);
        }

        .auth-body {
            padding: 50px;
        }

        .formulario {
            display: none;
        }

        .formulario.ativo {
            display: block;
            animation: slideUp 0.4s ease forwards;
        }

        /* Formulários */
        .form-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 25px;
        }

        .form-group {
            margin-bottom: 5px;
        }

        .form-group.full {
            grid-column: 1 / -1;
        }

        .form-group label {
            display: block;
            font-weight: 600;
            margin-bottom: 10px;
            font-size: 14px;
            color: var(--cinza-escuro);
        }

        .label-opcional {
            font-size: 12px;
            color: var(--cinza-texto);
            font-weight: 400;
            margin-left: 4px;
            font-style: italic;
        }

        .form-input {
            width: 100%;
            height: 48px;
            padding: 0 18px;
            border: 2px solid var(--cinza-borda);
            border-radius: 12px;
            font-size: 15px;
            outline: none;
            background: #FAFAFA;
            transition: var(--transicao);
            color: var(--cinza-escuro);
        }

        .form-input:focus {
            border-color: var(--laranja);
            background: var(--branco);
            box-shadow: 0 0 0 4px rgba(255, 140, 0, 0.1);
        }

        .form-input:disabled {
            background: #F1F5F9;
            cursor: not-allowed;
            color: #94A3B8;
        }

        /* Checkboxes de Serviços Múltiplos */
        .grid-servicos {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 10px;
            margin-top: 10px;
        }

        .check-box-pro {
            display: flex;
            align-items: center;
            gap: 10px;
            background: var(--branco);
            border: 1px solid var(--cinza-borda);
            padding: 12px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: 0.2s;
        }

        .check-box-pro:hover {
            border-color: var(--laranja);
            background: #FFF8F3;
        }

        .check-box-pro input {
            width: 18px;
            height: 18px;
            accent-color: var(--laranja);
            cursor: pointer;
        }

        .btn-principal {
            width: 100%;
            background: var(--laranja);
            color: var(--branco);
            padding: 18px;
            border: none;
            border-radius: 12px;
            font-size: 16px;
            font-weight: 700;
            cursor: pointer;
            transition: var(--transicao);
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 12px;
            margin-top: 10px;
        }

        .btn-principal:hover {
            background: var(--laranja-hover);
            transform: translateY(-2px);
            box-shadow: 0 8px 15px rgba(255, 140, 0, 0.3);
        }

        .divisor-form {
            display: flex;
            align-items: center;
            text-align: center;
            margin: 40px 0 30px 0;
            color: #94A3B8;
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1.5px;
        }

        .divisor-form::before,
        .divisor-form::after {
            content: '';
            flex: 1;
            border-bottom: 1.5px solid var(--cinza-borda);
        }

        .divisor-form:not(:empty)::before {
            margin-right: 20px;
        }

        .divisor-form:not(:empty)::after {
            margin-left: 20px;
        }

        .checkbox-custom {
            display: flex;
            align-items: center;
            background: #FFF7ED;
            padding: 20px;
            border-radius: 12px;
            border: 2px dashed #FDBA74;
            cursor: pointer;
            transition: var(--transicao);
        }

        .checkbox-custom input {
            width: 24px;
            height: 24px;
            margin-right: 15px;
            accent-color: var(--laranja);
            cursor: pointer;
        }

        .checkbox-custom label {
            margin-bottom: 0;
            color: #C2410C;
            font-weight: 700;
            cursor: pointer;
            font-size: 15px;
        }

        /* ======================================================= */
        /* DASHBOARD - SIDEBAR & TOPBAR                            */
        /* ======================================================= */
        #vista-dashboard {
            display: none;
            height: 100vh;
            overflow: hidden;
            background: var(--cinza-fundo);
        }

        .dash-sidebar {
            width: 300px;
            background: var(--azul-escuro);
            color: var(--branco);
            display: flex;
            flex-direction: column;
            z-index: 100;
            box-shadow: 5px 0 20px rgba(0, 0, 0, 0.1);
        }

        .dash-logo-area {
            padding: 30px 25px;
            background: #001f3f;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }

        .dash-menu {
            padding: 25px 0;
            flex: 1;
            overflow-y: auto;
        }

        .menu-label {
            padding: 0 30px;
            font-size: 11px;
            color: #94A3B8;
            text-transform: uppercase;
            font-weight: 800;
            margin-bottom: 12px;
            letter-spacing: 1.2px;
            margin-top: 25px;
        }

        .menu-label:first-child {
            margin-top: 0;
        }

        .menu-item {
            display: flex;
            align-items: center;
            padding: 16px 30px;
            color: #CBD5E1;
            transition: var(--transicao);
            cursor: pointer;
            border-left: 5px solid transparent;
            font-weight: 500;
            font-size: 14px;
            margin-bottom: 2px;
        }

        .menu-item i {
            margin-right: 18px;
            font-size: 18px;
            width: 22px;
            text-align: center;
            color: #94A3B8;
        }

        .menu-item:hover {
            background: rgba(255, 255, 255, 0.05);
            color: var(--branco);
        }

        .menu-item.ativo {
            background: rgba(255, 140, 0, 0.1);
            color: var(--laranja);
            border-left-color: var(--laranja);
            font-weight: 700;
        }

        .menu-item.ativo i {
            color: var(--laranja);
        }

        .badge-menu {
            background: var(--laranja);
            color: var(--branco);
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 10px;
            margin-left: auto;
            font-weight: bold;
        }

        .badge-menu.bloqueado {
            background: var(--cinza-texto);
        }

        .dash-user-card {
            padding: 25px;
            background: #001f3f;
            display: flex;
            align-items: center;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
        }

        .dash-avatar {
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, var(--laranja), #F59E0B);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: 20px;
            margin-right: 15px;
            color: var(--branco);
            box-shadow: 0 4px 12px rgba(255, 140, 0, 0.3);
        }

        .user-info {
            flex: 1;
            overflow: hidden;
        }

        .user-name {
            font-weight: 700;
            font-size: 15px;
            color: var(--branco);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .user-role {
            font-size: 12px;
            color: #94A3B8;
            margin-top: 2px;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .btn-sair {
            color: #EF4444;
            background: rgba(239, 68, 68, 0.1);
            border: none;
            cursor: pointer;
            padding: 10px;
            border-radius: 8px;
            font-size: 16px;
            transition: var(--transicao);
        }

        .btn-sair:hover {
            background: var(--erro);
            color: var(--branco);
            transform: scale(1.05);
        }

        .dash-main {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .dash-topbar {
            background: var(--branco);
            padding: 20px 40px;
            border-bottom: 1px solid var(--cinza-borda);
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 85px;
            z-index: 90;
        }

        .dash-title {
            color: var(--azul-escuro);
            font-size: 24px;
            font-weight: 800;
            letter-spacing: -0.5px;
        }

        .status-badge {
            background: var(--sucesso-fundo);
            color: #166534;
            padding: 10px 20px;
            border-radius: 50px;
            font-size: 13px;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 10px;
            border: 1px solid #BBF7D0;
        }

        .dot-online {
            width: 10px;
            height: 10px;
            background: var(--sucesso);
            border-radius: 50%;
            box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2);
            animation: pulse-green 2s infinite;
        }

        .dash-content {
            padding: 40px;
            overflow-y: auto;
            flex: 1;
            display: flex;
            flex-direction: column;
            position: relative;
        }

        .tab-content {
            display: none;
            animation: slideUp 0.4s ease forwards;
            flex: 1;
        }

        .tab-content.ativo {
            display: block;
        }

        /* ======================================================= */
        /* BANNERS E BLOQUEIOS (TRIAL 14 DIAS)                     */
        /* ======================================================= */
        .banner-trial {
            background: #FEF08A;
            color: #854D0E;
            padding: 10px 40px;
            font-size: 13px;
            font-weight: bold;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #FDE047;
        }

        .btn-simular {
            background: #CA8A04;
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 11px;
        }

        .premium-lock {
            display: none;
            text-align: center;
            padding: 80px 20px;
            background: white;
            border-radius: 16px;
            border: 1px solid var(--cinza-borda);
            box-shadow: var(--sombra-leve);
            margin: 40px auto;
            max-width: 600px;
        }

        /* ======================================================= */
        /* COMPONENTES DAS ABAS (Cartões e Tabelas)                */
        /* ======================================================= */
        .stat-card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 25px;
            margin-bottom: 40px;
        }

        .stat-card {
            background: var(--branco);
            padding: 25px;
            border-radius: 16px;
            box-shadow: var(--sombra-leve);
            border: 1px solid var(--cinza-borda);
            position: relative;
            overflow: hidden;
        }

        .stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
        }

        .stat-card.c-blue::before {
            background: #3B82F6;
        }

        .stat-card.c-green::before {
            background: var(--sucesso);
        }

        .stat-card.c-orange::before {
            background: var(--laranja);
        }

        .stat-card.c-purple::before {
            background: #8B5CF6;
        }

        .stat-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .stat-title {
            color: var(--cinza-texto);
            font-size: 13px;
            font-weight: 700;
            text-transform: uppercase;
        }

        .stat-icon {
            font-size: 24px;
            color: var(--cinza-escuro);
        }

        .stat-value {
            font-size: 36px;
            font-weight: 800;
            color: var(--azul-escuro);
            margin-bottom: 5px;
            letter-spacing: -1px;
        }

        .stat-trend {
            font-size: 13px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .trend-up {
            color: var(--sucesso);
        }

        /* CHAT / MENSAGENS */
        .chat-container {
            display: flex;
            height: 600px;
            background: var(--branco);
            border: 1px solid var(--cinza-borda);
            border-radius: 16px;
            overflow: hidden;
            box-shadow: var(--sombra-leve);
        }

        .chat-sidebar {
            width: 300px;
            border-right: 1px solid var(--cinza-borda);
            background: #FAFAFA;
            display: flex;
            flex-direction: column;
        }

        .chat-search {
            padding: 15px;
            border-bottom: 1px solid var(--cinza-borda);
        }

        .chat-search input {
            width: 100%;
            padding: 10px 15px;
            border-radius: 8px;
            border: 1px solid var(--cinza-borda);
            outline: none;
        }

        .chat-contacts {
            flex: 1;
            overflow-y: auto;
        }

        .contact-item {
            padding: 15px;
            border-bottom: 1px solid var(--cinza-borda);
            display: flex;
            gap: 15px;
            cursor: pointer;
            transition: 0.2s;
        }

        .contact-item:hover,
        .contact-item.ativo {
            background: var(--branco);
        }

        .contact-item.ativo {
            border-left: 4px solid var(--laranja);
        }

        .contact-avatar {
            width: 45px;
            height: 45px;
            background: #E2E8F0;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--cinza-texto);
            flex-shrink: 0;
        }

        .chat-main {
            flex: 1;
            display: flex;
            flex-direction: column;
            background: var(--cinza-fundo);
        }

        .chat-header {
            padding: 20px;
            background: var(--branco);
            border-bottom: 1px solid var(--cinza-borda);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .chat-messages {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .msg-bubble {
            max-width: 70%;
            padding: 15px;
            border-radius: 12px;
            font-size: 14px;
            line-height: 1.5;
            position: relative;
        }

        .msg-recebida {
            background: var(--branco);
            color: var(--cinza-escuro);
            align-self: flex-start;
            border: 1px solid var(--cinza-borda);
            border-bottom-left-radius: 2px;
        }

        .msg-enviada {
            background: var(--azul-escuro);
            color: var(--branco);
            align-self: flex-end;
            border-bottom-right-radius: 2px;
        }

        .chat-input-area {
            padding: 20px;
            background: var(--branco);
            border-top: 1px solid var(--cinza-borda);
            display: flex;
            gap: 15px;
        }

        .chat-input-area input {
            flex: 1;
            height: 48px;
            padding: 0 15px;
            border-radius: 8px;
            border: 1px solid var(--cinza-borda);
            outline: none;
        }

        .chat-input-area button {
            background: var(--laranja);
            color: white;
            border: none;
            width: 50px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 18px;
            transition: 0.2s;
        }

        /* CRM e Tabelas */
        .crm-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
            gap: 20px;
            align-items: center;
        }

        .crm-search {
            flex: 1;
            position: relative;
        }

        .crm-search i {
            position: absolute;
            left: 18px;
            top: 18px;
            color: #94A3B8;
            font-size: 16px;
        }

        .crm-search input {
            width: 100%;
            height: 48px;
            padding: 0 20px 0 45px;
            border: 2px solid var(--cinza-borda);
            border-radius: 12px;
            font-size: 15px;
            outline: none;
            transition: var(--transicao);
        }

        .crm-search input:focus {
            border-color: var(--laranja);
            box-shadow: 0 0 0 4px rgba(255, 140, 0, 0.1);
        }

        .cliente-card {
            background: var(--branco);
            border: 1px solid var(--cinza-borda);
            border-radius: 16px;
            margin-bottom: 20px;
            overflow: hidden;
            box-shadow: var(--sombra-leve);
        }

        .cliente-card-header {
            padding: 25px 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            background: var(--branco);
            transition: var(--transicao);
        }

        .cliente-card-header:hover {
            background: var(--cinza-fundo);
        }

        .cliente-nome {
            font-weight: 800;
            color: var(--azul-escuro);
            font-size: 18px;
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .cliente-body {
            padding: 0;
            display: none;
            border-top: 1px solid var(--cinza-borda);
            background: #FAFAFA;
        }

        .table-pro {
            width: 100%;
            border-collapse: collapse;
            background: var(--branco);
        }

        .table-pro th {
            background: #F8FAFC;
            padding: 18px 25px;
            text-align: left;
            font-size: 12px;
            font-weight: 700;
            color: var(--cinza-texto);
            text-transform: uppercase;
            letter-spacing: 1px;
            border-bottom: 2px solid var(--cinza-borda);
        }

        .table-pro td {
            padding: 20px 25px;
            border-bottom: 1px solid var(--cinza-borda);
            font-size: 14px;
            vertical-align: middle;
        }

        .badge-financeiro {
            padding: 6px 14px;
            border-radius: 50px;
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            display: inline-block;
        }

        .bg-pago {
            background: var(--sucesso-fundo);
            color: #166534;
            border: 1px solid #BBF7D0;
        }

        .bg-pendente {
            background: #DBEAFE;
            color: #1D4ED8;
            border: 1px solid #BFDBFE;
        }

        .bg-rascunho {
            background: var(--cinza-fundo);
            color: var(--cinza-texto);
            border: 1px solid #CBD5E1;
        }

        .bg-rejeitado {
            background: #FEE2E2;
            color: #EF4444;
            border: 1px solid #FECACA;
        }

        /* CALENDÁRIO */
        .calendario-wrapper {
            background: var(--branco);
            border: 1px solid var(--cinza-borda);
            border-radius: 16px;
            padding: 25px;
            box-shadow: var(--sombra-leve);
            flex: 1;
            min-width: 300px;
        }

        .cal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .cal-header h3 {
            color: var(--azul-escuro);
            font-size: 18px;
            margin: 0;
            text-transform: capitalize;
        }

        .cal-btn {
            background: #F1F5F9;
            border: none;
            width: 44px;
            height: 44px;
            border-radius: 8px;
            cursor: pointer;
            color: var(--cinza-texto);
            transition: var(--transicao);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
        }

        .cal-btn:hover {
            background: var(--azul-escuro);
            color: white;
        }

        .cal-weekdays {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            text-align: center;
            font-weight: 700;
            font-size: 12px;
            color: var(--cinza-texto);
            margin-bottom: 10px;
        }

        .cal-days {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 5px;
        }

        .cal-day {
            aspect-ratio: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: 600;
            border-radius: 8px;
            cursor: pointer;
            transition: var(--transicao);
            border: 1px solid transparent;
            position: relative;
            color: var(--cinza-escuro);
        }

        .cal-day.vazio {
            visibility: hidden;
        }

        .cal-day:hover:not(.vazio) {
            border-color: var(--laranja);
            background: #FFF7ED;
        }

        .cal-day.hoje {
            background: #E0F2FE;
            color: #1D4ED8;
            font-weight: 800;
            border: 1px solid #93C5FD;
        }

        .cal-day.selecionado {
            background: var(--laranja);
            color: white;
            font-weight: 800;
            box-shadow: 0 4px 10px rgba(255, 140, 0, 0.3);
            border: none;
        }

        .cal-dot {
            width: 6px;
            height: 6px;
            background: var(--erro);
            border-radius: 50%;
            position: absolute;
            bottom: 5px;
        }

        .cal-day.selecionado .cal-dot {
            background: white;
        }

        .marcacao-card {
            background: var(--branco);
            border-radius: 12px;
            border: 1px solid var(--cinza-borda);
            border-left: 5px solid var(--laranja);
            padding: 20px;
            display: flex;
            gap: 15px;
            align-items: center;
            margin-bottom: 15px;
            box-shadow: var(--sombra-leve);
        }

        .marcacao-hora {
            font-size: 20px;
            font-weight: 800;
            color: var(--azul-escuro);
            min-width: 70px;
            text-align: center;
            border-right: 1px solid var(--cinza-borda);
            padding-right: 15px;
        }

        /* ABA DE PLANOS */
        .grid-planos-novo {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 25px;
        }

        .cartao-plano {
            background: var(--branco);
            border: 1px solid var(--cinza-borda);
            border-radius: 16px;
            padding: 40px 25px;
            text-align: center;
            position: relative;
            transition: var(--transicao);
        }

        .cartao-plano:hover {
            border-color: var(--laranja);
            box-shadow: var(--sombra-forte);
            transform: translateY(-5px);
        }

        .cartao-plano h3 {
            color: var(--azul-escuro);
            font-size: 20px;
            margin-bottom: 15px;
        }

        .preco-futuro {
            font-size: 38px;
            font-weight: 800;
            color: var(--azul-escuro);
            margin-bottom: 5px;
            transition: var(--transicao);
        }

        .lista-beneficios {
            list-style: none;
            padding: 0;
            margin-bottom: 35px;
            text-align: left;
            font-size: 14px;
            color: var(--cinza-escuro);
            line-height: 2;
        }

        .lista-beneficios li i {
            color: var(--sucesso);
            margin-right: 10px;
            font-size: 12px;
        }

        .btn-bloqueado {
            width: 100%;
            background: #F1F5F9;
            color: #94A3B8;
            border: 1px solid #E2E8F0;
            padding: 16px;
            border-radius: 10px;
            font-weight: 700;
            font-size: 15px;
            cursor: not-allowed;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        /* Animações GERAIS */
        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes pulse-green {
            0% {
                transform: scale(0.95);
                box-shadow: 0 0 0 0 rgba(22, 101, 52, 0.7);
            }

            70% {
                transform: scale(1);
                box-shadow: 0 0 0 8px rgba(22, 101, 52, 0);
            }

            100% {
                transform: scale(0.95);
                box-shadow: 0 0 0 0 rgba(22, 101, 52, 0);
            }
        }

        /* IMPRESSÃO DO ORÇAMENTO PDF (RESTAURADO E MELHORADO) */
        @media print {
            @page {
                size: A4;
                margin: 15mm;
            }

            body * {
                visibility: hidden;
            }

            #pdf-preview,
            #pdf-preview * {
                visibility: visible;
            }

            #pdf-preview {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                max-width: 100% !important;
                border: none !important;
                box-shadow: none !important;
                padding: 0 !important;
                margin: 0 !important;
            }

            body {
                background-color: var(--branco);
                margin: 0;
            }

            .botoes-pdf-acoes,
            .dash-sidebar,
            .dash-topbar,
            footer {
                display: none !important;
            }
        }

        /* ======================================================= */
        /* FIX: REPARAÇÃO DO LAYOUT DO DASHBOARD                   */
        /* ======================================================= */

        /* Forçar o Dashboard a ser Flex para a Sidebar ficar ao lado do conteúdo */
        #vista-dashboard {
            display: none;
            /* Continua escondido até ao login */
            height: 100vh;
            width: 100vw;
        }

        /* Quando o JS mostrar o dashboard, ele TEM de ser flex */
        #vista-dashboard[style*="display: block"],
        #vista-dashboard[style*="display: flex"] {
            display: flex !important;
        }

        /* Ajuste do formulário de edição para não colapsar */
        .form-grid {
            display: grid !important;
            grid-template-columns: 1fr 1fr !important;
            gap: 25px !important;
            width: 100%;
        }

        /* Garante que o conteúdo principal ocupa o resto do ecrã */
        .dash-main {
            flex: 1 !important;
            display: flex !important;
            flex-direction: column !important;
            background: var(--cinza-fundo);
            overflow: hidden;
        }

        /* Ajuste da Sidebar para não encolher */
        .dash-sidebar {
            width: 300px !important;
            min-width: 300px !important;
            flex-shrink: 0 !important;
        }

        /* Corrigir o tamanho dos inputs que podem ter ficado "loucos" */
        .form-input {
            width: 100% !important;
            box-sizing: border-box !important;
        }

        /* ========================================== */
        /* 📱 OTIMIZAÇÃO MOBILE MESTRE (DASHBOARDS)   */
        /* ========================================== */
        @media (max-width: 900px) {

            /* Destrancar a altura fixa e garantir que não passa da largura do telemóvel */
            #vista-dashboard[style*="display: block"],
            #vista-dashboard[style*="display: flex"] {
                flex-direction: column !important;
                height: auto !important;
                min-height: 100vh;
                overflow-y: auto !important;
                width: 100vw !important;
                overflow-x: hidden !important;
            }

            /* Sidebar desaparece para a esquerda (Menu Hambúrguer) */
            .dash-sidebar {
                position: fixed;
                top: 0;
                left: 0;
                width: 280px !important;
                min-width: 280px !important;
                height: 100vh !important;
                transform: translateX(-100%);
                transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                z-index: 10000;
                background: var(--branco);
                box-shadow: 4px 0 15px rgba(0, 0, 0, 0.1);
            }

            .dash-sidebar.aberta {
                transform: translateX(0);
            }

            .dash-logo-area {
                padding: 15px 20px;
                display: flex !important;
                justify-content: space-between;
                align-items: center;
                border-bottom: 1px solid var(--cinza-borda);
            }

            .dash-menu {
                display: flex;
                flex-direction: column;
                overflow-y: auto;
                overflow-x: hidden;
                height: calc(100vh - 160px);
                padding: 0;
                background: transparent;
            }

            .menu-label {
                display: block !important;
                margin-top: 15px;
            }

            .menu-item {
                border-left: 4px solid transparent;
                border-bottom: none;
                padding: 15px 20px;
                font-size: 14px;
                margin-bottom: 5px;
            }

            .menu-item.ativo {
                border-left-color: var(--laranja);
                background: rgba(255, 140, 0, 0.08);
            }

            .dash-user-card {
                display: flex !important;
                position: absolute;
                bottom: 0;
                width: 100%;
                border-top: 1px solid var(--cinza-borda);
                padding: 15px;
                background: #FAFAFA;
                box-sizing: border-box;
            }

            /* Sombra de Fundo (Overlay) */
            .sidebar-overlay {
                display: none;
                position: fixed;
                inset: 0;
                background: rgba(0, 31, 63, 0.5);
                z-index: 9999;
                backdrop-filter: blur(2px);
            }

            .sidebar-overlay.ativa {
                display: block;
            }

            /* Novo Botão Hambúrguer na Topbar Mobile */
            .btn-hamburguer {
                display: block !important;
                background: none;
                border: none;
                font-size: 26px;
                color: var(--azul-escuro);
                cursor: pointer;
                padding: 0 15px 0 0;
            }

            .topbar-mobile-wrap {
                display: flex;
                align-items: center;
                width: 100%;
                margin-bottom: 10px;
            }

            /* Área Principal de Conteúdo */
            .dash-main {
                flex: none;
                height: auto;
                overflow: visible;
                width: 100%;
            }

            .dash-topbar {
                flex-direction: column;
                gap: 10px;
                height: auto;
                text-align: left;
                padding: 20px 15px 15px;
                width: 100%;
                box-sizing: border-box;
                /* Previne overflow */
                align-items: flex-start;
            }

            .dash-content {
                padding: 15px;
                width: 100%;
                overflow-x: hidden;
                box-sizing: border-box;
            }

            /* Grids a 1 coluna */
            .form-grid,
            .stat-card-grid,
            .grid-planos-novo {
                grid-template-columns: 1fr !important;
                gap: 15px;
            }

            /* 🍏 FIX iOS ZOOM & SCROLL OTIMIZADO */
            input,
            select,
            textarea,
            .form-input,
            .chat-search input {
                font-size: 16px !important;
            }

            /* 🔥 TUDO A RESPIRAR NO MOBILE (TABELAS) */
            .table-container,
            .table-pro,
            .table-docs-wrapper,
            .table-financas-wrapper,
            .area-tabela {
                overflow-x: auto !important;
                display: block !important;
                width: 100% !important;
                -webkit-overflow-scrolling: touch;
            }

            .table-pro th,
            .table-pro td {
                white-space: nowrap !important;
            }

            /* Ticker/Status Modais Responsivos */
            .auth-container {
                margin: -30px 15px 40px;
            }

            .auth-body {
                padding: 20px;
            }

            .hero-auth {
                padding: 40px 15px 60px;
            }

            .hero-auth h1 {
                font-size: 28px;
            }

            /* Chat: Fica em Bloco Vertical com alturas ajustadas */
            .chat-container {
                flex-direction: column;
                height: 85vh;
            }

            .chat-sidebar {
                width: 100%;
                height: 35vh;
                border-right: none;
                border-bottom: 1px solid var(--cinza-borda);
            }

            .chat-main {
                height: 50vh;
            }

            /* 🔥 O SEGREDO PARA AS TABELAS NÃO ESCONDEREM BOTÕES */
            .table-container,
            .tabela-ceo,
            .table-pro {
                overflow-x: auto !important;
                display: block !important;
                width: 100% !important;
                -webkit-overflow-scrolling: touch;
            }

            /* Obriga o texto das tabelas a não partir, criando um scroll horizontal limpo */
            .table-pro th,
            .table-pro td {
                white-space: nowrap !important;
            }

            /* 🔥 TWEAK FINAL PARA TABELAS CRM NÃO CORTAREM OS BOTÕES NO MOBILE */
            .table-pro td:last-child {
                padding-right: 40px !important;
                /* Salva a Margem do Switch / Botões Finais de ficarem debaixo do ecrã */
            }

            .table-pro td button,
            .pro-acoes button,
            .btn-perfil {
                min-height: 44px;
                /* Botões das tabelas com área de clique fluida no touch */
            }

            /* 🔥 CARTÕES DO CRM: Impede que os botões desapareçam no mobile */
            .cliente-card-header {
                padding: 20px 15px;
                flex-direction: column;
                align-items: flex-start;
                gap: 15px;
            }

            .cliente-card-header>div:first-child {
                width: 100%;
            }

            .cliente-card-header>div:last-child {
                width: 100%;
                justify-content: space-between;
                border-top: 1px dashed var(--cinza-borda);
                padding-top: 10px;
            }

            /* Inventário e IA */
            .calendario-wrapper {
                min-width: 100%;
            }

            #passo-2-tabela>div {
                flex-direction: column;
                text-align: center;
                gap: 10px;
            }

            .botoes-pdf-acoes {
                flex-direction: column;
                gap: 10px;
            }

            .botoes-pdf-acoes button {
                width: 100%;
                margin-bottom: 0;
            }

            #form-novo-artigo {
                flex-direction: column;
                align-items: stretch !important;
            }

            /* Botão Rápido de GPS na Agenda */
            .btn-gps-rapido {
                display: inline-flex;
                align-items: center;
                gap: 5px;
                background-color: #2979FF;
                /* Azul GPS */
                color: white !important;
                padding: 8px 12px;
                border-radius: 6px;
                font-size: 13px;
                font-weight: bold;
                text-decoration: none;
                margin-left: 0;
                margin-top: 10px;
                transition: background 0.2s;
            }
        }

        /* ==========================================================================
   📱 MOBILE-FIRST AUDITORIA: Tabelas e CRM (< 480px)
   Garante scroll horizontal e cartões empilhados em ecrãs muito pequenos
   ========================================================================== */

        /* Wrapper para a tabela de Faturação — scroll horizontal limpo */
        .table-financas-wrapper {
            overflow-x: auto !important;
            -webkit-overflow-scrolling: touch;
            border-radius: 0 0 12px 12px;
        }

        @media (max-width: 480px) {

            /* Padding reduzido nas células para ganhar espaço útil */
            .table-pro th,
            .table-pro td {
                padding: 12px 14px !important;
                font-size: 12px !important;
            }

            /* Esconder coluna "Ações" na tabela de Faturação em ecrãs < 480px */
            /* A coluna de PDF/Apagar fica visível pelo scroll horizontal */
            .table-pro td:last-child,
            .table-pro th:last-child {
                min-width: 100px;
            }

            /* Cartões CRM em modo empilhado total */
            .cliente-card-header {
                padding: 16px 12px !important;
                flex-direction: column !important;
                align-items: flex-start !important;
                gap: 12px !important;
            }

            .cliente-nome {
                font-size: 16px !important;
            }

            /* Botões com área de toque mínima de 44px (Apple HIG) */
            .table-pro td button,
            .btn-acao-tabela,
            .btn-principal {
                min-height: 44px !important;
                min-width: 44px !important;
            }

            /* Stats no dashboard em coluna única com menos padding */
            .stat-card {
                padding: 18px !important;
            }

            .stat-value {
                font-size: 28px !important;
            }

            /* Topbar com padding reduzido */
            .dash-topbar {
                padding: 15px !important;
            }

            .dash-content {
                padding: 10px !important;
            }
        }

        /* ==========================================================================
   SISTEMA DE TOASTS PREMIUM (NOTIFICAÇÕES FLUTUANTES) - Mobile Ajuste
   ========================================================================== */
        .toast-container {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 999999;
            display: flex;
            flex-direction: column;
            gap: 12px;
            pointer-events: none;
        }

        @media (max-width: 600px) {

            /* No mobile, os toasts ficam no centro em baixo para não tapar o menu superior */
            .toast-container {
                top: auto;
                bottom: 20px;
                left: 50%;
                right: auto;
                transform: translateX(-50%);
                width: 90%;
                align-items: center;
            }

            .toast-msg {
                width: 100%;
                min-width: unset;
                transform: translateY(150%);
                animation: entrarToastMobile 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
            }
        }

        .toast-msg {
            min-width: 280px;
            max-width: 350px;
            padding: 16px 20px;
            border-radius: 12px;
            color: white;
            font-weight: 600;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
            animation: entrarToast 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
            transform: translateX(150%);
        }

        .toast-msg.sucesso {
            background: linear-gradient(135deg, #10B981, #047857);
            border: 1px solid #34D399;
        }

        .toast-msg.erro {
            background: linear-gradient(135deg, #EF4444, #B91C1C);
            border: 1px solid #F87171;
        }

        .toast-msg.aviso {
            background: linear-gradient(135deg, #F59E0B, #B45309);
            border: 1px solid #FBBF24;
        }

        @keyframes entrarToast {
            to {
                transform: translateX(0);
            }
        }

        @keyframes sairToast {
            to {
                transform: translateX(150%);
                opacity: 0;
            }
        }

        @keyframes entrarToastMobile {
            to {
                transform: translateY(0);
            }
        }

        @keyframes pulsoLaranja {
            0% {
                box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
            }

            70% {
                box-shadow: 0 0 0 10px rgba(245, 158, 11, 0);
            }

            100% {
                box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
            }
        }

        /* ==========================================================================
   📱 FIX 6: Tabela de Documentos/Faturas em formato CARD no mobile
   Cada linha da tabela passa a ser um card vertical empilhado
   ========================================================================== */

        /* Wrapper que envolve QUALQUER tabela de documentos - garante scroll horizontal */
        .table-docs-wrapper,
        .table-financas-wrapper {
            overflow-x: auto !important;
            -webkit-overflow-scrolling: touch;
            border-radius: 0 0 12px 12px;
            width: 100%;
        }

        @media (max-width: 600px) {

            /* 🧩 Conversão de Tabela em Cards para Documentos do Cliente */
            .table-pro.table-docs-mobile thead {
                display: none;
                /* Esconde os cabeçalhos da tabela */
            }

            .table-pro.table-docs-mobile tr {
                display: block;
                background: var(--branco);
                border: 1px solid var(--cinza-borda);
                border-radius: 12px;
                margin-bottom: 15px;
                padding: 15px;
                box-shadow: var(--sombra-leve);
            }

            .table-pro.table-docs-mobile td {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 8px 0 !important;
                border-bottom: 1px dashed var(--cinza-borda);
                font-size: 13px !important;
                white-space: normal !important;
            }

            .table-pro.table-docs-mobile td:last-child {
                border-bottom: none;
                padding-top: 12px !important;
                gap: 8px;
                flex-wrap: wrap;
                justify-content: flex-end;
            }

            /* Label gerado pelo atributo data-label */
            .table-pro.table-docs-mobile td::before {
                content: attr(data-label);
                font-weight: 700;
                color: var(--cinza-texto);
                font-size: 11px;
                text-transform: uppercase;
                letter-spacing: 0.5px;
                flex-shrink: 0;
                margin-right: 10px;
            }

            /* 📱 FIX 8 (style-pro): Mensagens com padding mínimo no mobile para aproveitar o ecrã */
            .chat-container {
                height: 80vh;
                margin: -15px;
                width: calc(100% + 30px);
                border-radius: 0;
                border: none;
            }

            .chat-sidebar {
                height: 30vh;
                border-right: none;
                border-bottom: 1px solid var(--cinza-borda);
            }

            .chat-main {
                height: 50vh;
            }

            .chat-messages {
                padding: 10px !important;
            }

            .chat-input-area {
                padding: 10px !important;
                gap: 8px !important;
            }

            .msg-bubble {
                max-width: 90% !important;
                padding: 10px 12px !important;
            }

            /* 📱 FIX 5: Áreas de toque mínimas de 48px para cumprir WCAG no mobile */
            .btn-perfil,
            .btn-ligar,
            .btn-whatsapp {
                min-height: 48px !important;
                padding: 12px 10px !important;
                font-size: 14px !important;
            }

            .pro-acoes a,
            .pro-acoes button {
                min-height: 48px !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
            }
        }

        /* ===================================================
   Classe de alerta de follow-up (restaurada)
   =================================================== */
        .alerta-followup {
            border: 2px solid #F59E0B;
            animation: pulsoLaranja 2s infinite;
        }

        /* ===================================================
   📱 FIX 7: Botão "Ler Artigo" centrado + fix mobile
   =================================================== */
        @media (max-width: 768px) {
            .cartao-artigo a[href*="artigo"] {
                display: flex !important;
                justify-content: center;
            }

            .btn-ler-mais {
                display: flex !important;
                justify-content: center;
                width: fit-content;
                margin: 0 auto;
            }
        }

        /* ========================================================================== */
        /* 🔥 VACINA DE EMERGÊNCIA - CORREÇÃO DASHBOARDS (CORES E MENUS)               */
        /* ========================================================================== */

        /* 1. Restauro das Cores Vibrantes dos Cartões (Stat Cards) */
        .stat-card.bg-azul {
            background: linear-gradient(135deg, #003366 0%, #001f3f 100%) !important;
            border: none;
        }

        .stat-card.bg-azul .stat-title,
        .stat-card.bg-azul .stat-value,
        .stat-card.bg-azul .stat-icon,
        .stat-card.bg-azul .stat-trend {
            color: white !important;
        }

        .stat-card.bg-laranja {
            background: linear-gradient(135deg, #FF8C00 0%, #E67E00 100%) !important;
            border: none;
        }

        .stat-card.bg-laranja .stat-title,
        .stat-card.bg-laranja .stat-value,
        .stat-card.bg-laranja .stat-icon,
        .stat-card.bg-laranja .stat-trend {
            color: white !important;
        }

        .stat-card.bg-verde {
            background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
            border: none;
        }

        .stat-card.bg-verde .stat-title,
        .stat-card.bg-verde .stat-value,
        .stat-card.bg-verde .stat-icon,
        .stat-card.bg-verde .stat-trend {
            color: white !important;
        }

        /* 2. Menu Hambúrguer Inteligente (Mobile) */
        @media (max-width: 900px) {

            /* Garante que o botão hambúrguer está visível no topo da área do Cliente/Pro */
            .topbar-mobile-wrap {
                display: flex !important;
                align-items: center;
                justify-content: flex-start;
                padding-bottom: 10px;
            }

            .btn-hamburguer {
                background: none;
                border: none;
                font-size: 24px;
                color: var(--azul-escuro);
                cursor: pointer;
                padding-right: 15px;
            }

            /* Tweak de segurança para a Sidebar abrir/fechar bem */
            .dash-sidebar {
                transition: transform 0.3s ease-in-out !important;
            }

            /* Tabelas dos Dashboards perfeitamente desenroláveis */
            .area-tabela,
            .table-container {
                overflow-x: auto !important;
                -webkit-overflow-scrolling: touch;
                margin-bottom: 20px;
            }
        }