.tabs {
    display: flex;
    position: relative;
}

.tab {
    flex: 1;
    padding: 12px 0;
    background: none;
    border: none;
    font-size: 16px;
    font-weight: normal;
    color: #888;
    cursor: pointer;
    text-align: center;
    transition: color 0.3s ease-in-out;
    
}

.tab-content {
    padding-top: 10px;
    border-top: 2px solid #007bff;
}

.tab.active {
    font-weight: bold;
    color: black;
}

.tabs .indicator {
    position: absolute;
    bottom: 0;
    height: 3px;
    background-color: #007bff;
    transition: left 0.3s ease-in-out, width 0.3s ease-in-out;
}


/* 🖥️ Estilos para la barra de scroll en modo escritorio */
::-webkit-scrollbar {
    width: 8px; /* Ancho de la barra */
    height: 8px; /* Altura en scroll horizontal */
}

::-webkit-scrollbar-track {
    background: #f4f4f4; /* Color del fondo */
}

::-webkit-scrollbar-thumb {
    background: #808080; /* Color del scroll */
    transition: background-color 0.3s ease-in-out; /* Corregido */
}

::-webkit-scrollbar-thumb:hover {
    background: #0056b3; /* Color más oscuro al pasar el ratón */
}