/* ====================================================
       TABS RESPONSIVE
       PILLS + PESTAÑAS
       HORIZONTAL + VERTICAL
    ==================================================== */


    /*
    ====================================================
    BASE COMPONENTE
    ====================================================
    */

    .mod-tabs {
        position: relative;
    }


    /*
    ====================================================
    IMAGEN
    ====================================================
    */

    .mod-tabs-horizontal .imagen-box img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }


    /*
    ====================================================
    NAV PILLS / TABS
    ====================================================
    */

    .mod-tabs-horizontal .nav-pills,
    .mod-tabs-vertical .nav-pills,
    .mod-tabs-pestanas .nav-tabs {
        gap: 1rem;
    }


    /*
    ====================================================
    HORIZONTAL
    ====================================================
    */

    .mod-tabs-horizontal .nav-pills,
    .mod-tabs-pestanas .nav-tabs {
        flex-wrap: wrap;
        flex-direction: row;
    }


    /*
    ====================================================
    VERTICAL
    ====================================================
    */

    .mod-tabs-vertical .nav-pills {
        flex-direction: column;
    }


    /*
    ====================================================
    NAV ITEMS
    ====================================================
    */

    .mod-tabs-horizontal .nav-item,
    .mod-tabs-pestanas .nav-item {
        flex: initial;
    }

    .mod-tabs-vertical .nav-item {
        width: 100%;
    }


    /*
    ====================================================
    BOTONES BASE
    ====================================================
    */

    .mod-tabs-horizontal .nav-link,
    .mod-tabs-vertical .nav-link,
    .mod-tabs-pestanas .nav-link {
        padding: 1rem 1.5rem;
        font-weight: 600;
        transition: all .25s ease;
        display: flex;
        align-items: center;
        min-height: 64px;

    }


    /*
    ====================================================
    PILLS
    ====================================================
    */

    .mod-tabs-horizontal .nav-link,
    .mod-tabs-vertical .nav-link {
        border: none;
        border-radius: 100px;
        background: #eef4ff;
        color: #163d7d;
    }


    /*
    ====================================================
    PESTAÑAS
    ====================================================
    */

    .mod-tabs-pestanas .nav-tabs {
        border-bottom: 1px solid #dce3f1;
    }

    .mod-tabs-pestanas .nav-link {
        border: 1px solid transparent;
        border-top-left-radius: 1rem;
        border-top-right-radius: 1rem;
        background: #eef4ff;
        color: #163d7d;
        margin-bottom: -1px;
        border-color: #dce3f1 #dce3f1 #fff;
    }

    .mod-tabs-pestanas .nav-link:hover {
        background: #dce9ff;
        border-color: #dce3f1 #dce3f1 #dce3f1;
    }


    /*
    ====================================================
    BOTÓN HORIZONTAL
    ====================================================
    */

    .mod-tabs-horizontal .nav-link,
    .mod-tabs-pestanas .nav-link {
        width: auto;
        justify-content: center;
        white-space: nowrap;
    }


    /*
    ====================================================
    BOTÓN VERTICAL
    ====================================================
    */

    .mod-tabs-vertical .nav-link {
        width: 100%;
        justify-content: flex-start;
        text-align: left;
    }


    /*
    ====================================================
    HOVER
    ====================================================
    */

    .mod-tabs-horizontal .nav-link:hover,
    .mod-tabs-vertical .nav-link:hover {
        background: #dce9ff;
        transform: translateY(-2px);
    }


    /*
    ====================================================
    ACTIVE PILLS
    ====================================================
    */

    .mod-tabs-horizontal .nav-link.active,
    .mod-tabs-vertical .nav-link.active {
        background: #0d6efd;
        color: #fff;
    }


    /*
    ====================================================
    ACTIVE PESTAÑAS
    ====================================================
    */

    .mod-tabs-pestanas .nav-link.active {
        background: #fff;
        color: #0d6efd;
        border-color: #dce3f1 #dce3f1 #fff;
    }


    /*
    ====================================================
    FOCUS ACCESIBLE
    ====================================================
    */

    .mod-tabs-horizontal .nav-link:focus-visible,
    .mod-tabs-horizontal .accordion-button:focus-visible,

    .mod-tabs-vertical .nav-link:focus-visible,
    .mod-tabs-vertical .accordion-button:focus-visible,

    .mod-tabs-pestanas .nav-link:focus-visible,
    .mod-tabs-pestanas .accordion-button:focus-visible {
        outline: 3px solid #80bdff;
        outline-offset: 3px;
    }


    /*
    ====================================================
    CONTENIDO
    ====================================================
    */

    .mod-tabs-horizontal .contenido-box,
    .mod-tabs-vertical .contenido-box,
    .mod-tabs-pestanas .contenido-box {
        background: #fefefe;
        padding: 2rem;
        /*border-radius: 1.5rem;*/
        border-top-left-radius: 0rem;
        border-top-right-radius: 0rem;
        border-bottom-right-radius: 1.2rem;
        border-bottom-left-radius: 1.2rem;
        box-shadow: 0 10px 30px rgba(0,0,0,.06);
    }


    /*
    ====================================================
    AJUSTE PESTAÑAS
    ====================================================
    */

    .mod-tabs-pestanas .contenido-box {
        border-top-left-radius: 0;
    }


    /*
    ====================================================
    ACCORDION
    ====================================================
    */

    .mod-tabs-horizontal .accordion-item,
    .mod-tabs-vertical .accordion-item,
    .mod-tabs-pestanas .accordion-item {
        border-radius: 1rem;
        overflow: hidden;
        border: 1px solid #e8edf5;
        margin-bottom: 1rem;
    }


    /*
    ====================================================
    ACCORDION BUTTON
    ====================================================
    */

    .mod-tabs-horizontal .accordion-button,
    .mod-tabs-vertical .accordion-button,
    .mod-tabs-pestanas .accordion-button {
        font-weight: 600;
        padding: 1rem 1.25rem;
    }


    /*
    ====================================================
    ACCORDION ACTIVE
    ====================================================
    */

    .mod-tabs-horizontal .accordion-button:not(.collapsed),
    .mod-tabs-vertical .accordion-button:not(.collapsed),
    .mod-tabs-pestanas .accordion-button:not(.collapsed) {
        background: #0d6efd;
        color: #fff;
    }


    /*
    ====================================================
    MOBILE
    ====================================================
    */

    @media (max-width: 991.98px) {

        /*
        ============================================
        HORIZONTAL PILLS
        ============================================
        */

        #tabsHorizontal,
        #tabsHorizontalContent {
            display: none;
        }

        /*
        ============================================
        VERTICAL PILLS
        ============================================
        */

        #tabsVertical,
        #tabsVerticalContent {
            display: none;
        }

        /*
        ============================================
        PESTAÑAS
        ============================================
        */

        #tabs-pestanas,
        #tabs-pestanas-content {
            display: none;
        }

    }