Spaces:
Running
Running
File size: 5,804 Bytes
87f14a8 f5603d6 87f14a8 cb10a9b 87f14a8 8a66038 8e5c775 47133c8 8e5c775 47133c8 8c47bea 8a66038 8c47bea 47133c8 f5603d6 8a66038 8c47bea 8a66038 8c47bea 8a66038 8c47bea 47133c8 8a66038 8e5c775 8a66038 8c47bea 8e5c775 8c47bea 8a66038 8177516 8e5c775 8a66038 47133c8 8e5c775 f5603d6 87f14a8 b9ad2d5 8a66038 87f14a8 8a66038 8c47bea 8a66038 47133c8 8a66038 81c4704 87f14a8 b9ad2d5 8c47bea 8e5c775 47133c8 81c4704 47133c8 8177516 8e5c775 47133c8 8e5c775 66c8dfe 8e5c775 8c47bea 66c8dfe b9ad2d5 8e5c775 8a66038 e8ae1fc |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 |
<!DOCTYPE html>
<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> |