//
// Pestañas globales Eneon (.eneon-tabs)
//

.eneon-tabs {
    display: flex;
    flex-wrap: wrap;
    border-bottom: none;
    margin-bottom: var(--eneon-tab-list-margin-bottom);
    gap: 0;

    .nav-item,
    &.eneon-tabs > .eneon-tabs__item {
        margin: var(--eneon-tab-item-margin);
    }

    .nav-link,
    .eneon-tabs__link {
        display: inline-flex;
        align-items: center;
        gap: var(--eneon-tab-gap-interno);
        padding: var(--eneon-tab-padding-y) var(--eneon-tab-padding-x);
        font-size: var(--eneon-tab-font-size);
        font-weight: var(--eneon-tab-font-weight);
        border-radius: var(--eneon-tab-radio-superior) var(--eneon-tab-radio-superior) 0 0;
        transition: var(--eneon-tab-transition);
        color: var(--eneon-tab-color-inactivo);
        background: var(--eneon-tab-bg-inactivo);
        border: 1px solid transparent;
        border-bottom: none;
        box-shadow: none;
        cursor: pointer;
        text-decoration: none;

        &:hover:not(.active):not([aria-selected="true"]) {
            color: var(--eneon-tab-color-inactivo);
            background: var(--eneon-tab-bg-inactivo);
        }

        &.active,
        &[aria-selected="true"] {
            background: var(--eneon-tab-bg-activo);
            border-color: var(--bs-border-color, #dee2e6);
            border-bottom-color: var(--eneon-tab-bg-activo);
        }
    }

    .eneon-tabs__label {
        display: inline-flex;
        align-items: center;
        gap: var(--eneon-tab-gap-interno);
    }

    .eneon-tabs__icon {
        display: inline-flex;
        flex-shrink: 0;
    }

    .eneon-tabs__badge {
        padding: var(--eneon-tab-badge-padding-y) var(--eneon-tab-badge-padding-x);
        border-radius: var(--eneon-tab-badge-radio);
        font-size: 0.75rem;
        font-weight: 600;
        line-height: 1;
        color: #fff;
    }

    .eneon-tabs__link--default.active,
    .eneon-tabs__link--default[aria-selected="true"],
    .nav-link.eneon-tabs__link--default.active {
        color: var(--eneon-tab-color-default-activo);

        .eneon-tabs__badge {
            background-color: var(--eneon-tab-color-default-activo);
        }
    }

    .eneon-tabs__link--electrico.active,
    .eneon-tabs__link--electrico[aria-selected="true"],
    .nav-link.eneon-tabs__link--electrico.active {
        color: var(--eneon-tab-color-electrico-activo);

        .eneon-tabs__badge {
            background-color: var(--eneon-tab-color-electrico-activo);
        }
    }

    .eneon-tabs__link--gas.active,
    .eneon-tabs__link--gas[aria-selected="true"],
    .nav-link.eneon-tabs__link--gas.active {
        color: var(--eneon-tab-color-gas-activo);

        .eneon-tabs__badge {
            background-color: var(--eneon-tab-color-gas-activo);
        }
    }

    .eneon-tabs__link--documentos.active,
    .eneon-tabs__link--documentos[aria-selected="true"],
    .nav-link.eneon-tabs__link--documentos.active {
        color: var(--eneon-tab-color-documentos-activo);

        .eneon-tabs__badge {
            background-color: var(--eneon-tab-color-documentos-activo);
        }
    }

    .eneon-tabs__link:not(.active):not([aria-selected="true"]) {
        .eneon-tabs__badge--default {
            background-color: var(--eneon-tab-color-default-activo);
        }

        .eneon-tabs__badge--electrico {
            background-color: var(--eneon-tab-color-electrico-activo);
        }

        .eneon-tabs__badge--gas {
            background-color: var(--eneon-tab-color-gas-activo);
        }

        .eneon-tabs__badge--documentos {
            background-color: var(--eneon-tab-color-documentos-activo);
        }
    }
}

.eneon-tabs-card {
    .card-header.eneon-tabs-card__header {
        background: var(--eneon-tab-header-bg);
        border-bottom: none;
        padding-bottom: 0;
    }

    .card-body.eneon-tabs-card__body {
        border-top: 1px solid var(--bs-border-color, #dee2e6);
    }
}

.eneon-tab-empty {
    background-color: var(--eneon-tab-empty-bg);
    border: 1px solid var(--eneon-tab-empty-border);
    border-radius: var(--bs-border-radius, 0.375rem);
    padding: 1rem 1.25rem;

    &__titulo {
        margin-bottom: 0;
        color: var(--eneon-tab-empty-color-titulo);
        font-weight: 600;
    }

    &__descripcion {
        color: var(--eneon-tab-empty-color-texto);
    }

    &__icono--default {
        color: var(--eneon-tab-color-default-activo);
    }

    &__icono--electrico {
        color: var(--eneon-tab-color-electrico-activo);
    }

    &__icono--gas {
        color: var(--eneon-tab-color-gas-activo);
    }

    &__icono--documentos {
        color: var(--eneon-tab-color-documentos-activo);
    }
}