@import url(‘https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Exo+2:wght@300;400;600&display=swap’);

.glosario-container {
width: 100%;
max-width: 900px;
background: rgba(0, 10, 20, 0.6);
border: 1px solid #0ff;
border-radius: 16px;
box-shadow: 0 0 20px rgba(0, 255, 255, 0.4);
backdrop-filter: blur(10px);
padding: 30px;
position: relative;
overflow: hidden;
}

.glosario-container::before {
content: “”;
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg, #0ff, #00f, #0f0, #ff0, #f0f, #0ff);
z-index: -1;
border-radius: 18px;
animation: border-rotate 8s linear infinite;
}

@keyframes border-rotate {
0% { background-position: 0% 50%; }
100% { background-position: 200% 50%; }
}

h1 {
text-align: center;
font-family: ‘Orbitron’, sans-serif;
font-size: 2.8rem;
margin-bottom: 30px;
color: #fff;
text-shadow: 0 0 10px #0ff, 0 0 20px #0ff;
}

.search-box {
width: 100%;
padding: 12px 20px;
margin-bottom: 25px;
background: rgba(0, 0, 0, 0.4);
border: 1px solid #0ff;
border-radius: 8px;
color: #fff;
font-size: 1.1rem;
font-family: ‘Exo 2’, sans-serif;
outline: none;
transition: all 0.3s ease;
}

.search-box:focus {
box-shadow: 0 0 15px rgba(0, 255, 255, 0.7);
}

.glosario-item {
background: rgba(0, 20, 40, 0.5);
border: 1px solid #0a5;
border-radius: 10px;
padding: 18px;
margin-bottom: 20px;
cursor: pointer;
transition: all 0.4s ease;
position: relative;
overflow: hidden;
}

.glosario-item:hover {
border-color: #0ff;
background: rgba(0, 30, 60, 0.7);
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 255, 255, 0.3);
}

.glosario-item::after {
content: “”;
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.2), transparent);
transition: left 0.6s;
}

.glosario-item:hover::after {
left: 100%;
}

.term {
font-weight: 600;
font-size: 1.3rem;
color: #fff;
margin-bottom: 8px;
font-family: ‘Orbitron’, sans-serif;
}

.definition {
color: #aef;
font-size: 1rem;
line-height: 1.6;
display: none;
animation: fadeIn 0.5s ease forwards;
}

.definition.show {
display: block;
}

@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}

.no-results {
text-align: center;
padding: 20px;
color: #f55;
font-style: italic;
}

@media (max-width: 600px) {
h1 {
font-size: 2rem;
}
.glosario-container {
padding: 20px;
}
}
 

const glosarioData = [ { term: “Virus como parásitos intracelulares obligatorios”, definition: “Los virus son parásitos intracelulares obligatorios porque carecen de la maquinaria metabólica necesaria para sintetizar ATP y proteínas por sí mismos. Dependen de la célula huésped para replicarse y producir nuevos viriones.” }, { term: “Virión”, definition: “Un virión está compuesto por un genoma de ácido nucleico (ADN o ARN) rodeado por una cápside proteica. Algunos virus también poseen una envoltura lipídica que rodea la cápside.” }, { term: “Simetría de las cápsides virales”, definition: “Las cápsides virales pueden presentar simetría helicoidal (ejemplo: virus del mosaico del tabaco), icosaédrica (ejemplo: adenovirus) o compleja (ejemplo: bacteriófagos).” }, { term: “Virus envuelto vs. virus desnudo”, definition: “Un virus envuelto posee una membrana lipídica que rodea la nucleocápside, mientras que un virus desnudo carece de esta envoltura. La envoltura viral se deriva de las membranas celulares del huésped durante el proceso de brotación.” }, { term: “Etapas de la replicación viral”, definition: “Las etapas de la replicación viral son: adsorción, penetración, desnudamiento, replicación del genoma viral, síntesis de proteínas virales, ensamblaje y liberación.” }, { term: “Tropismo viral”, definition: “El tropismo viral se refiere a la especificidad de un virus para infectar ciertas células, tejidos u organismos. Esta especificidad está determinada por la interacción entre proteínas virales y receptores celulares. El tropismo influye en la patogenia al determinar qué tejidos u órganos serán afectados por la infección.” }, { term: “Vías de entrada de los virus al organismo humano”, definition: “Tres de las principales vías de entrada de los virus al organismo humano son: vía respiratoria (inhalación), vía digestiva (ingestión) y vía parenteral (inoculación a través de la piel).” }, { term: “Calidad de una muestra para diagnóstico virológico”, definition: “La calidad de una muestra para el diagnóstico virológico está determinada por factores como el tipo de muestra, el tiempo de toma de muestra, la viabilidad viral, la integridad del genoma viral, la presencia de inhibidores y la cantidad de muestra.” }, { term: “Aislamiento viral: ventajas y desventajas”, definition: “Ventajas del aislamiento viral: Es un método clásico que permite la obtención de virus viables para su posterior caracterización. Permite la detección de diferentes agentes virales, incluso aquellos no sospechados. Desventajas del aislamiento viral: Baja sensibilidad, requiere combinaciones de líneas celulares, siempre requiere confirmación, existen virus que son difíciles de aislar o de lento crecimiento, demora de resultados, laborioso, personal altamente entrenado, infraestructura especial de laboratorio, se debe trabajar en condiciones de esterilidad.” }, { term: “PCR en diagnóstico virológico”, definition: “La PCR se basa en la amplificación enzimática in vitro de un fragmento específico de ADN o ARN. En el diagnóstico virológico, la PCR se utiliza para detectar la presencia de genomas virales en muestras clínicas. Sus aplicaciones incluyen la detección de virus, la identificación de serotipos, la detección de cepas mutantes o recombinantes y la realización de estudios epidemiológicos.” } ]; const glosarioList = document.getElementById(‘glosarioList’); const searchInput = document.getElementById(‘searchInput’); function renderGlosario(items) { glosarioList.innerHTML = ”; if (items.length === 0) { glosarioList.innerHTML = ‘

‘; return; } items.forEach(item => { const div = document.createElement(‘div’); div.className = ‘glosario-item’; div.innerHTML = `

`; div.addEventListener(‘click’, () => { const def = div.querySelector(‘.definition’); def.classList.toggle(‘show’); }); glosarioList.appendChild(div); }); } function filterGlosario(query) { const lowerQuery = query.toLowerCase(); const filtered = glosarioData.filter(item => item.term.toLowerCase().includes(lowerQuery) || item.definition.toLowerCase().includes(lowerQuery) ); renderGlosario(filtered); } searchInput.addEventListener(‘input’, (e) => { filterGlosario(e.target.value); }); // Initial render renderGlosario(glosarioData);