Universidad Veracruzana

/* CONTENEDOR GENERAL */
.equivalencias-tabs {
width: 100%;
font-family: Arial, Helvetica, sans-serif;
margin: 20px 0;
}

/* MENÚ DE PESTAÑAS */
.tabs-menu {
display: flex;
align-items: flex-end;
border-bottom: 1px solid #299447;
gap: 0;
}

/* BOTONES */
.tabs-menu .tab-button {
background: transparent;
border: none;
border-top: 1px solid transparent;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
border-bottom: none;
color: #7c858b;
cursor: pointer;
font-size: 16px;
padding: 11px 18px 10px;
margin: 0;
transition: all 0.2s ease;
white-space: nowrap;
}

/* EFECTO AL PASAR EL MOUSE */
.tabs-menu .tab-button:hover {
color: #16813b;
}

/* PESTAÑA ACTIVA */
.tabs-menu .tab-button.active {
color: #16813b;
background: #ffffff;
border-top: 1px solid #299447;
border-left: 1px solid #299447;
border-right: 1px solid #299447;
position: relative;
bottom: -1px;
}

/* CONTENIDO */
.tab-content {
display: none;
background: #eef9ef;
border: 1px solid #299447;
border-top: none;
padding: 20px;
text-align: center;
}

/* CONTENIDO ACTIVO */
.tab-content.active-content {
display: block;
}

/* TEXTO */
.tab-content p {
margin: 0 0 20px;
color: #111111;
font-size: 16px;
line-height: 1.5;
}

/* TABLAS */
.tab-content table {
width: 100%;
border-collapse: collapse;
background: white;
}

.tab-content th,
.tab-content td {
border: 1px solid #cccccc;
padding: 10px;
text-align: left;
}

.tab-content th {
background: #299447;
color: white;
}

/* CELULAR */
@media (max-width: 768px) {

.tabs-menu {
flex-direction: column;
align-items: stretch;
border-bottom: none;
}

.tabs-menu .tab-button {
width: 100%;
text-align: left;
border: 1px solid #dddddd;
border-bottom: none;
padding: 12px 15px;
}

.tabs-menu .tab-button:last-child {
border-bottom: 1px solid #dddddd;
}

.tabs-menu .tab-button.active {
border: 1px solid #299447;
background: #eef9ef;
}

.tab-content {
border-top: 1px solid #299447;
padding: 15px;
}

}

function abrirTab(event, tabId) {

// Ocultar todos los contenidos
var contenidos = document.querySelectorAll(
‘.equivalencias-tabs .tab-content’
);

contenidos.forEach(function(contenido) {
contenido.classList.remove(‘active-content’);
});

// Quitar clase activa de todos los botones
var botones = document.querySelectorAll(
‘.equivalencias-tabs .tab-button’
);

botones.forEach(function(boton) {
boton.classList.remove(‘active’);
});

// Mostrar el contenido seleccionado
document.getElementById(tabId).classList.add(‘active-content’);

// Activar el botón seleccionado
event.currentTarget.classList.add(‘active’);
}