/* --- Estilos para las Pestañas SDS --- */

/* Contenedor de los títulos de las pestañas */
.sds-tabs-wrapper {
    display: flex; /* ¡La magia! Pone las pestañas una al lado de la otra */
    flex-wrap: wrap; /* Permite que las pestañas pasen a la siguiente línea si no caben */
    border-bottom: 2px solid #dee2e6; /* Línea inferior que separa los títulos del contenido */
    margin-bottom: 0; 
}

/* Estilo para cada título de pestaña individual */
.sds-tab-title {
    padding: 12px 20px;
    margin-right: 5px;
    margin-bottom: -2px; /* Truco para que la pestaña activa se fusione con el contenido */
    cursor: pointer;
    background-color: #f1f1f1;
    color: #555;
    border: 1px solid #dee2e6;
    border-bottom: none;
    border-radius: 5px 5px 0 0; /* Bordes redondeados solo en la parte superior */
    transition: background-color 0.3s ease, color 0.3s ease;
    font-weight: 500;
}

/* Estilo cuando pasas el ratón sobre una pestaña inactiva */
.sds-tab-title:not(.sds-active):hover {
    background-color: #e9ecef;
}

/* Estilo para la pestaña que está ACTIVA */
.sds-tab-title.sds-active {
    background-color: #ffffff; /* Fondo blanco para que parezca conectada al contenido */
    color: #000;
    font-weight: 700;
    border-color: #dee2e6 #dee2e6 #ffffff; /* El color del borde inferior es blanco para ocultarlo */
}

/* Contenedor del contenido de las pestañas */
.sds-tabs-content-wrapper {
    padding: 25px;
    border: 2px solid #dee2e6;
    border-top: none; /* Quitamos el borde superior para que se una con los títulos */
    background-color: #ffffff;
    border-radius: 0 0 5px 5px;
}