Update proa/proa.html

proa/proa.html

@@ -11,12 +11,12 @@
     /* Estilos base como en AppConsulta360/index.html */
     body { background-color: #f8fafc; font-family: 'Montserrat', sans-serif; }
 
-    /* Estilo Selectores COPIADO de iaConfigModule para máxima similitud */
+    /* Estilo Selectores */
     .custom-select {
       background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
       background-position: right 0.5rem center; background-repeat: no-repeat; background-size: 1.5em 1.5em;
       -webkit-appearance: none; -moz-appearance: none; appearance: none;
-      padding-right: 2.5rem; /* Ajuste para el icono */
+      padding-right: 2.5rem;
       width: 100%;
       padding-top: 0.5rem; /* p-2 */
       padding-bottom: 0.5rem; /* p-2 */
@@ -26,7 +26,7 @@
       box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
       transition: border-color 0.2s, box-shadow 0.2s;
       font-size: 0.875rem; /* text-sm */
-      line-height: 1.25rem; /* Ajuste para altura consistente */
+      line-height: 1.25rem;
     }
     .custom-select:focus {
        outline: none;
@@ -41,7 +41,7 @@
         border-color: #d1d5db; /* gray-300 */
         color: #db2777; /* text-pink-600 */
         transition: background-color 0.2s, border-color 0.2s;
-        flex-shrink: 0; /* Evitar que el checkbox se encoja */
+        flex-shrink: 0;
     }
      .form-checkbox:focus {
          outline: none;
@@ -63,13 +63,12 @@
         min-height: 400px;
         box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
         overflow-y: auto;
-        /* Estilos para contenido cargado */
         line-height: 1.6;
      }
-    /* Estilos para títulos y texto dentro del contenido cargado (aplicados en el HTML de la guía) */
-    #guide-content-display .text-base { font-size: 0.875rem; line-height: 1.25rem; } /* Equivalente a text-sm de Tailwind por defecto */
-    #guide-content-display .text-sm { font-size: 0.75rem; line-height: 1rem; } /* Más pequeño */
-    #guide-content-display .text-xs { font-size: 0.65rem; line-height: 0.9rem; } /* Aún más pequeño para tags */
+    /* Ajustes finos para tamaños de fuente dentro del contenido cargado */
+    #guide-content-display .text-base { font-size: 0.875rem; line-height: 1.25rem; }
+    #guide-content-display .text-sm { font-size: 0.75rem; line-height: 1rem; }
+    #guide-content-display .text-xs { font-size: 0.65rem; line-height: 0.9rem; }
 
     .hidden { display: none; }
   </style>
@@ -82,7 +81,8 @@
       <h1 class="text-xl font-bold text-blue-800 flex items-center justify-center">
         <i class="fas fa-book-medical mr-3 text-teal-600"></i>Guías Clínicas PROA
       </h1>
-      <p class="text-gray-600 mt-1 text-sm">Consulta de Guías Clínicas Hospital de Alcañiz</p> </div>
+      <p class="text-gray-600 mt-1 text-sm">Consulta de Guías Clínicas Hospital de Alcañiz</p>
+    </div>
 
     <div class="flex justify-end mb-4">
        <a href="../index.html" class="border border-gray-500 text-gray-700 hover:bg-gray-100 px-4 py-2 rounded-lg flex items-center transition-colors text-sm">
@@ -91,26 +91,25 @@
     </div>
 
     <div class="bg-teal-50 p-6 rounded-lg mb-6 border border-teal-100 shadow-inner space-y-4">
-        <h2 class="text-base font-semibold text-teal-700 mb-3 flex items-center">
-           <i class="fas fa-filter mr-2"></i>Seleccionar Guía
-        </h2>
 
-        <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 items-end">
-            <div class="sm:col-span-2">
-                <label for="guideSelector" class="block text-xs font-medium text-gray-600 mb-1">Guía PROA:</label>
-                <select id="guideSelector" class="custom-select block w-full text-sm">
-                    <option value="">Cargando guías...</option>
-                </select>
-            </div>
+        <div class="flex justify-between items-center mb-3">
+            <h2 class="text-base font-semibold text-teal-700 flex items-center">
+               <i class="fas fa-filter mr-2"></i>Seleccionar Guía
+            </h2>
+            <label class="flex items-center cursor-pointer text-sm whitespace-nowrap">
+              <input type="checkbox" id="togglePediatric" class="form-checkbox mr-2">
+              <span class="font-medium text-gray-700">Guías Pediátricas</span>
+            </label>
+        </div>
 
-             <div class="sm:col-span-1 flex sm:justify-end items-center pb-1"> <label class="flex items-center cursor-pointer text-sm whitespace-nowrap">
-                   <input type="checkbox" id="togglePediatric" class="form-checkbox mr-2">
-                   <span class="font-medium text-gray-700">Guías Pediátricas</span>
-                 </label>
-             </div>
+        <div>
+            <label for="guideSelector" class="block text-xs font-medium text-gray-600 mb-1 sr-only">Guía PROA:</label> <select id="guideSelector" class="custom-select block w-full text-sm">
+                <option value="">Cargando guías...</option>
+            </select>
         </div>
 
-        <div id="diagnosis-selector-container" class="hidden pt-4 border-t border-teal-200"> <label for="diagnosisSelector" class="block text-xs font-medium text-gray-600 mb-1">Diagnóstico Específico:</label>
+        <div id="diagnosis-selector-container" class="hidden pt-4 border-t border-teal-200">
+             <label for="diagnosisSelector" class="block text-xs font-medium text-gray-600 mb-1">Diagnóstico Específico:</label>
              <select id="diagnosisSelector" class="custom-select block w-full text-sm">
                  <option value="">-- Seleccione Diagnóstico --</option>
              </select>
@@ -128,7 +127,8 @@
   </div>
 
   <div class="text-center mt-8 pt-6 border-t border-gray-200">
-    <p class="text-gray-600 text-sm"> Desarrollado por el Dr. Antonio J. Arnal Meinhardt<br>
+    <p class="text-gray-600 text-sm">
+      Desarrollado por el Dr. Antonio J. Arnal Meinhardt<br>
       <span class="text-xs">Médico de Urgencias | Atención Primaria</span>
     </p>
      <p class="text-xs text-gray-500 mt-1">Guías PROA basadas en documentación del Hospital de Alcañiz.</p>