File size: 5,365 Bytes
4ed2d74 602333e 4ed2d74 602333e 4ed2d74 fdd20f7 602333e 4ed2d74 ec1f80b |
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 |
<!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 - Hospital de Alcañiz</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 */
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;
padding-bottom: 0.5rem;
padding-left: 0.75rem;
border-radius: 0.375rem;
border: 1px solid #d1d5db;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
transition: border-color 0.2s, box-shadow 0.2s;
font-size: 0.875rem;
line-height: 1.25rem;
}
.custom-select:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}
/* Estilo Checkbox */
.form-checkbox {
height: 1.25rem;
width: 1.25rem;
border-radius: 0.25rem;
border-color: #d1d5db;
color: #db2777;
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-6">
<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-2 text-sm leading-relaxed"> Programa de Uso de Antibióticos<br>
Hospital de Alcañiz | Aragón
</p>
</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>
</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>
<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>
</div>
<script type="module" src="./js/proa.js"></script>
</body>
</html>
|