/* Estilos Componente Tabs */

.tabs-container { /* Contenedor general si se necesita */
    margin-top: 2rem; /* Espacio superior */
}

.tabs-navigation {
    display: flex;
    justify-content: center; /* Centrar las pestañas */
    margin-bottom: 2rem;
    border-bottom: 1px solid #eee; /* Línea separadora */
    flex-wrap: wrap; /* Permitir que pasen a la línea siguiente */
    gap: 10px; /* Espacio si se envuelven */
}

.tab-btn {
    background: none;
    border: none;
    padding: 1rem 2rem;
    font-size: 1rem; /* Tamaño ajustado */
    font-weight: 600; /* Más peso */
    color: var(--grey-color);
    cursor: pointer;
    position: relative;
    transition: color 0.3s ease;
    border-bottom: 3px solid transparent; /* Espacio para la línea activa */
    margin-bottom: -1px; /* Alinear con la línea inferior */
}

.tab-btn:hover {
    color: var(--primary-color);
}

.tab-btn.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color); /* Mostrar línea activa */
}

/* Contenido de las pestañas */
.tab-content {
    display: none;
    padding-top: 1.5rem; /* Espacio respecto a la navegación */
}

.tab-content.active {
    display: block;
    animation: fadeIn 0.5s ease; /* Animación de entrada */
}

/* Keyframe fadeIn ya está en base.css */
/* @keyframes fadeIn { ... } */