Spaces:
Running
Running
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Guías PROA - Asistente Médico</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| /* Estilos base como en AppConsulta360/index.html */ | |
| body { background-color: #f8fafc; font-family: 'Montserrat', sans-serif; } | |
| /* 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; | |
| width: 100%; | |
| padding-top: 0.5rem; /* p-2 */ | |
| padding-bottom: 0.5rem; /* p-2 */ | |
| padding-left: 0.75rem; /* p-2 */ | |
| border-radius: 0.375rem; /* rounded */ | |
| border: 1px solid #d1d5db; /* border-gray-300 */ | |
| 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; | |
| } | |
| .custom-select:focus { | |
| outline: none; | |
| border-color: #3b82f6; /* focus:border-blue-500 */ | |
| box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25); /* focus:ring */ | |
| } | |
| /* Estilo Checkbox */ | |
| .form-checkbox { | |
| height: 1.25rem; /* h-5 */ | |
| width: 1.25rem; /* w-5 */ | |
| border-radius: 0.25rem; /* rounded */ | |
| border-color: #d1d5db; /* gray-300 */ | |
| color: #db2777; /* text-pink-600 */ | |
| transition: background-color 0.2s, border-color 0.2s; | |
| flex-shrink: 0; | |
| } | |
| .form-checkbox:focus { | |
| outline: none; | |
| border-color: #f9a8d4; | |
| box-shadow: 0 0 0 3px rgba(249, 168, 212, 0.4); | |
| } | |
| .form-checkbox:checked { | |
| border-color: transparent; | |
| background-color: currentColor; | |
| } | |
| /* Area de contenido */ | |
| #guide-content-display { | |
| background-color: white; | |
| border: 1px solid #e5e7eb; | |
| border-radius: 0.5rem; | |
| padding: 1.5rem; | |
| margin-top: 1rem; | |
| min-height: 400px; | |
| box-shadow: inset 0 1px 2px rgba(0,0,0,0.05); | |
| overflow-y: auto; | |
| line-height: 1.6; | |
| } | |
| /* 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> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <div class="mx-auto max-w-2xl p-6 my-8 bg-white rounded-xl shadow-md"> | |
| <div class="text-center mb-4"> | |
| <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> | |
| <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"> | |
| <i class="fas fa-arrow-left mr-2"></i>Volver al Asistente | |
| </a> | |
| </div> | |
| <div class="bg-teal-50 p-6 rounded-lg mb-6 border border-teal-100 shadow-inner space-y-4"> | |
| <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> | |
| <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> | |
| <select id="diagnosisSelector" class="custom-select block w-full text-sm"> | |
| <option value="">-- Seleccione Diagnóstico --</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div id="guide-content-display"> | |
| <div class="text-center py-16 text-gray-400"> | |
| <i class="fas fa-file-alt text-5xl mb-4"></i> | |
| <p>Selecciona una guía del desplegable.</p> | |
| </div> | |
| </div> | |
| <!-- Créditos (igual que en la app principal) --> | |
| <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> | |
| <span class="text-xs">Médico de Urgencias | Atención Primaria</span> | |
| </p> | |
| </div> | |
| </div> | |
| <script type="module" src="../js/proa.js"></script> | |
| </body> | |
| </html> |