
<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>ClinicPro Manager</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
      tailwind.config = {
        darkMode: 'class',
        theme: {
          extend: {
            fontFamily: {
              sans: ['Inter', 'sans-serif'],
            },
            colors: {
              primary: {
                500: '#2563EB', // Azul Principal
                600: '#1D4ED8', // Hover
                700: '#1E40AF', // Active
              },
              gray: {
                50: '#F9FAFB',
                100: '#F3F4F6',
                200: '#E5E7EB', // Bordas Inputs
                300: '#D1D5DB',
                400: '#9CA3AF', // Placeholder
                500: '#6B7280', // Texto Secundário
                700: '#374151',
                800: '#1F2937', // Card Dark (Option 1)
                900: '#111827', // Text Primary / Sidebar Dark
              },
              slate: {
                800: '#1E293B', // Card Dark (Official)
                900: '#0F172A', // App BG Dark (Official)
                950: '#020617', 
              }
            },
            boxShadow: {
              'input': '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
              'card': '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)',
            }
          },
        },
      }
    </script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
      /* --- ROOT LAYOUT LOCK --- */
      html, body {
        height: 100%;
        width: 100%;
        overflow: hidden; /* CRÍTICO: O BODY NUNCA ROLA */
        margin: 0;
        padding: 0;
        background-color: #F9FAFB;
        overscroll-behavior: none; /* Previne bounce no iOS */
      }
      .dark body {
        background-color: #0F172A;
        color: #F3F4F6;
      }
      #root {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
      }

      /* --- SCROLLBAR INVISÍVEL (MAS FUNCIONAL) --- */
      /* Firefox */
      * {
        scrollbar-width: none;
      }
      /* Chrome, Edge, Safari */
      *::-webkit-scrollbar {
        display: none;
        width: 0px;
        background: transparent;
      }

      /* Input Reset */
      input, select, textarea {
        background-color: #FFFFFF !important;
        color: #111827 !important;
        border-color: #E5E7EB;
      }
      .dark input, .dark select, .dark textarea {
        background-color: #1E293B !important; 
        color: #F3F4F6 !important;
        border-color: #374151;
      }
      input:focus, select:focus, textarea:focus {
        border-color: #2563EB !important;
        outline: none;
        box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
      }
    </style>

<link rel="stylesheet" href="/index.css">
  <script type="importmap">
{
  "imports": {
    "react/": "https://esm.sh/react@^19.2.3/",
    "react": "https://esm.sh/react@^19.2.3",
    "lucide-react": "https://esm.sh/lucide-react@^0.561.0",
    "react-dom/": "https://esm.sh/react-dom@^19.2.3/",
    "react-router-dom": "https://esm.sh/react-router-dom@^7.10.1",
    "recharts": "https://esm.sh/recharts@^3.5.1",
    "jspdf": "https://esm.sh/jspdf@2.5.1",
    "jspdf-autotable": "https://esm.sh/jspdf-autotable@3.8.2",
    "xlsx": "https://esm.sh/xlsx@0.18.5",
    "html2canvas": "https://esm.sh/html2canvas@1.4.1"
  }
}
</script>
  <script type="module" crossorigin src="/assets/index-Br9fN33c.js"></script>
</head>
  <body>
    <div id="root"></div>
</body>
</html>
