Tabla de contenidos de la Bauhaus Medical

<div class="font-sans bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-100 min-h-screen p-4 sm:p-6 lg:p-8">

  <!-- Outer Container with muted primary color accents -->
  <div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden
              border-t-4 border-l-4 border-yellow-500 dark:border-yellow-600
              md:border-t-8 md:border-l-8 md:border-yellow-500 dark:md:border-yellow-600">

    <!-- Header Section with strong geometric lines -->
    <div class="bg-blue-600 dark:bg-blue-800 text-white p-4 sm:p-6 lg:p-8
                relative overflow-hidden
                before:content-[''] before:absolute before:top-0 before:left-0 before:w-full before:h-full before:bg-gradient-to-br before:from-blue-700 before:to-transparent before:opacity-20 before:z-0
                after:content-[''] after:absolute after:bottom-0 after:right-0 after:w-full after:h-full after:bg-gradient-to-tl after:from-red-600 after:to-transparent after:opacity-10 after:z-0">
      <div class="relative z-10 flex flex-col sm:flex-row items-center justify-between">
        <h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold mb-4 sm:mb-0
                   tracking-tight text-white dark:text-gray-50 flex items-center">
          <span class="block w-6 h-6 sm:w-8 sm:h-8 lg:w-10 lg:h-10 bg-red-500 dark:bg-red-600 mr-3 rounded-sm transform rotate-45"></span>
          Medical Index
        </h1>
        <div class="flex items-center space-x-3">
          <span class="text-sm italic opacity-80 hidden md:block">Last Updated: 2023-10-27</span>
          <img src="https://randomuser.me/api/portraits/men/52.jpg" alt="Admin Avatar" class="w-10 h-10 rounded-full-lg border-2 border-white dark:border-gray-300 shadow-md">
        </div>
      </div>
    </div>

    <!-- Main Content Area: Search and Navigation -->
    <div class="p-4 sm:p-6 lg:p-8 grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">

      <!-- Search and Filters Section -->
      <div class="md:col-span-1 border-r-4 border-gray-200 dark:border-gray-700 pr-0 md:pr-6 lg:pr-8 space-y-6">
        <div class="mb-4">
          <label for="search-toc" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Search Documentation</label>
          <div class="relative">
            <input type="text" id="search-toc" placeholder="Search diseases, treatments..." 
                   class="w-full p-3 pl-10 rounded-lg border-2 border-red-300 dark:border-red-600
                          bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100
                          focus:ring-blue-500 focus:border-blue-500 transition duration-200 ease-in-out
                          placeholder-gray-400 dark:placeholder-gray-500">
            <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
          </div>
        </div>

        <!-- Filter Options with primary color toggles -->
        <div class="space-y-4">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Filters</h3>
          <div class="flex flex-wrap gap-3">
            <button class="px-4 py-2 rounded-full text-sm font-medium
                           bg-blue-100 text-blue-800 dark:bg-blue-700 dark:text-blue-100
                           hover:bg-blue-200 dark:hover:bg-blue-600 transition duration-200">All Topics</button>
            <button class="px-4 py-2 rounded-full text-sm font-medium
                           bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300
                           hover:bg-gray-200 dark:hover:bg-gray-600 transition duration-200">Diseases</button>
            <button class="px-4 py-2 rounded-full text-sm font-medium
                           bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300
                           hover:bg-gray-200 dark:hover:bg-gray-600 transition duration-200">Treatments</button>
            <button class="px-4 py-2 rounded-full text-sm font-medium
                           bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300
                           hover:bg-gray-200 dark:hover:bg-gray-600 transition duration-200">Protocols</button>
            <button class="px-4 py-2 rounded-full text-sm font-medium
                           bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300
                           hover:bg-gray-200 dark:hover:bg-gray-600 transition duration-200">Diagnostics</button>
          </div>
        </div>

        <!-- Recent Updates Section -->
        <div class="mt-6">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-3">Recent Updates</h3>
          <ul class="space-y-3">
            <li class="flex items-start">
              <span class="flex-shrink-0 w-2 h-2 bg-yellow-500 rounded-full mt-2 mr-2"></span>
              <a href="#" class="text-sm text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">New Guidelines for Diabetes Management</a>
            </li>
            <li class="flex items-start">
              <span class="flex-shrink-0 w-2 h-2 bg-red-500 rounded-full mt-2 mr-2"></span>
              <a href="#" class="text-sm text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">Updated COVID-19 Vaccination Protocols</a>
            </li>
            <li class="flex items-start">
              <span class="flex-shrink-0 w-2 h-2 bg-gray-400 dark:bg-gray-500 rounded-full mt-2 mr-2"></span>
              <a href="#" class="text-sm text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">Introduction to AI in Diagnostics</a>
            </li>
          </ul>
        </div>
      </div>

      <!-- Table of Contents Main Navigation -->
      <div class="md:col-span-2 space-y-8">

        <!-- Section 1: Core Medical Conditions -->
        <section>
          <h2 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4 pb-2 border-b-2 border-red-400 dark:border-red-700 flex items-center">
            <span class="w-4 h-4 bg-blue-500 dark:bg-blue-600 mr-2 rounded-sm rotate-45"></span>
            Core Medical Conditions
          </h2>
          <ul class="space-y-3 pl-4 sm:pl-6">
            <li><a href="#cardiovascular" class="text-lg text-blue-700 dark:text-blue-400 hover:text-red-600 dark:hover:text-red-500 transition-colors">Cardiovascular Diseases</a>
              <ul class="pl-6 mt-2 space-y-2 text-sm text-gray-600 dark:text-gray-400">
                <li><a href="#hypertension" class="hover:text-blue-600 dark:hover:text-blue-400">Hypertension: Diagnosis & Management</a></li>
                <li><a href="#ischemic-heart-disease" class="hover:text-blue-600 dark:hover:text-blue-400">Ischemic Heart Disease</a></li>
                <li><a href="#arrhythmias" class="hover:text-blue-600 dark:hover:text-blue-400">Arrhythmias and ECG Interpretation</a></li>
              </ul>
            </li>
            <li><a href="#respiratory" class="text-lg text-blue-700 dark:text-blue-400 hover:text-red-600 dark:hover:text-red-500 transition-colors">Respiratory Diseases</a>
              <ul class="pl-6 mt-2 space-y-2 text-sm text-gray-600 dark:text-gray-400">
                <li><a href="#asthma" class="hover:text-blue-600 dark:hover:text-blue-400">Asthma and COPD</a></li>
                <li><a href="#pneumonia" class="hover:text-blue-600 dark:hover:text-blue-400">Pneumonia: Types & Treatment</a></li>
              </ul>
            </li>
            <li><a href="#endocrine" class="text-lg text-blue-700 dark:text-blue-400 hover:text-red-600 dark:hover:text-red-500 transition-colors">Endocrine Disorders</a>
              <ul class="pl-6 mt-2 space-y-2 text-sm text-gray-600 dark:text-gray-400">
                <li><a href="#diabetes-mellitus" class="hover:text-blue-600 dark:hover:text-blue-400">Diabetes Mellitus: Type 1 & 2</a></li>
                <li><a href="#thyroid-disorders" class="hover:text-blue-600 dark:hover:text-blue-400">Thyroid Disorders</a></li>
              </ul>
            </li>
          </ul>
        </section>

        <!-- Section 2: Medical Procedures & Diagnostics -->
        <section>
          <h2 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4 pb-2 border-b-2 border-red-400 dark:border-red-700 flex items-center">
            <span class="w-4 h-4 bg-blue-500 dark:bg-blue-600 mr-2 rounded-sm rotate-45"></span>
            Medical Procedures & Diagnostics
          </h2>
          <ul class="space-y-3 pl-4 sm:pl-6">
            <li><a href="#surgical-techniques" class="text-lg text-blue-700 dark:text-blue-400 hover:text-red-600 dark:hover:text-red-500 transition-colors">Surgical Techniques</a>
              <ul class="pl-6 mt-2 space-y-2 text-sm text-gray-600 dark:text-gray-400">
                <li><a href="#minimally-invasive" class="hover:text-blue-600 dark:hover:text-blue-400">Minimally Invasive Surgery</a></li>
                <li><a href="#post-operative-care" class="hover:text-blue-600 dark:hover:text-blue-400">Post-Operative Care Protocols</a></li>
              </ul>
            </li>
            <li><a href="#imaging" class="text-lg text-blue-700 dark:text-blue-400 hover:text-red-600 dark:hover:text-red-500 transition-colors">Medical Imaging</a>
              <ul class="pl-6 mt-2 space-y-2 text-sm text-gray-600 dark:text-gray-400">
                <li><a href="#mri-ct-scans" class="hover:text-blue-600 dark:hover:text-blue-400">MRI & CT Scans Interpretation</a></li>
                <li><a href="#ultrasound" class="hover:text-blue-600 dark:hover:text-blue-400">Diagnostic Ultrasound</a></li>
              </ul>
            </li>
          </ul>
        </section>

        <!-- Section 3: Pharmacology & Therapeutics -->
        <section>
          <h2 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4 pb-2 border-b-2 border-red-400 dark:border-red-700 flex items-center">
            <span class="w-4 h-4 bg-blue-500 dark:bg-blue-600 mr-2 rounded-sm rotate-45"></span>
            Pharmacology & Therapeutics
          </h2>
          <ul class="space-y-3 pl-4 sm:pl-6">
            <li><a href="#drug-classes" class="text-lg text-blue-700 dark:text-blue-400 hover:text-red-600 dark:hover:text-red-500 transition-colors">Drug Classes & Mechanisms</a>
              <ul class="pl-6 mt-2 space-y-2 text-sm text-gray-600 dark:text-gray-400">
                <li><a href="#antibiotics" class="hover:text-blue-600 dark:hover:text-blue-400">Antibiotics: Spectrum & Resistance</a></li>
                <li><a href="#analgesics" class="hover:text-blue-600 dark:hover:text-blue-400">Analgesics & Pain Management</a></li>
              </ul>
            </li>
            <li><a href="#vaccines" class="text-lg text-blue-700 dark:text-blue-400 hover:text-red-600 dark:hover:text-red-500 transition-colors">Vaccines & Immunization</a>
              <ul class="pl-6 mt-2 space-y-2 text-sm text-gray-600 dark:text-gray-400">
                <li><a href="#childhood-immunization" class="hover:text-blue-600 dark:hover:text-blue-400">Childhood Immunization Schedule</a></li>
              </ul>
            </li>
          </ul>
        </section>

        <!-- Section 4: Public Health & Epidemiology -->
        <section>
          <h2 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4 pb-2 border-b-2 border-red-400 dark:border-red-700 flex items-center">
            <span class="w-4 h-4 bg-blue-500 dark:bg-blue-600 mr-2 rounded-sm rotate-45"></span>
            Public Health & Epidemiology
          </h2>
          <ul class="space-y-3 pl-4 sm:pl-6">
            <li><a href="#disease-outbreaks" class="text-lg text-blue-700 dark:text-blue-400 hover:text-red-600 dark:hover:text-red-500 transition-colors">Disease Outbreaks & Control</a></li>
            <li><a href="#preventative-medicine" class="text-lg text-blue-700 dark:text-blue-400 hover:text-red-600 dark:hover:text-red-500 transition-colors">Preventative Medicine Strategies</a></li>
          </ul>
        </section>

      </div>

    </div>

    <!-- Footer with simple branding -->
    <div class="bg-gray-100 dark:bg-gray-800 p-4 sm:p-6 lg:p-8 text-center text-gray-600 dark:text-gray-400 text-sm
                relative overflow-hidden
                before:content-[''] before:absolute before:bottom-0 before:left-0 before:w-full before:h-1 before:bg-yellow-500 dark:before:bg-yellow-600 before:z-0">
      <p class="relative z-10">&copy; 2023 Medical Knowledge Hub. All rights reserved.</p>
    </div>

  </div>

</div>