<div id="content-interior" class="animate-fadeInUpBounce">
    <!-- Ribbon Shape -->
    <div class="card ribbon-box border shadow-none mb-lg-0 material-shadow">
        <div class="card-body">
            <div class="ribbon ribbon-primary ribbon-shape" th:text="#{presupuesto.tipo-interior}">Tipo de impresión
            </div>
            <h5 class="fs-14 text-end" th:text="#{presupuesto.tipo-interior-descripcion}">Elija entre calidad estándar
                o premium</h5>
        </div>

        <div class="ribbon-content mt-4">
            <div class="alert alert-danger alert-dismissible alert-label-icon rounded-label fade show material-shadow d-none"
                role="alert" id="inside-alert">
                <i class="ri-error-warning-line label-icon"></i>
                <strong th:text="#{presupuesto.errores-title}">Corrija los siguientes errores:</strong>
                <ul class="mb-0" id="inside-alert-list">
                </ul>
            </div>

            <div id="div-opciones-color" class="row justify-content-center imagen-container-group">
                
            </div>
        </div>
    </div>
    <!-- End Ribbon Shape -->

    <!-- Ribbon Shape -->
    <div class="card ribbon-box border shadow-none mb-lg-0 material-shadow mt-4">
        <div class="card-body">
            <div class="ribbon ribbon-primary ribbon-shape" th:text="#{presupuesto.papel-interior}">Papel interior</div>
            <h5 class="fs-14 text-end" th:text="#{presupuesto.papel-interior-descripcion}">
                Papel y gramaje del interior</h5>
        </div>

        <div class="ribbon-content mt-4">

            <div id="div-papel-interior" class="row justify-content-center imagen-container-group">
                
            </div>
        </div>

    </div>

    <!-- Ribbon Shape -->
    <div class="card ribbon-box border shadow-none mb-lg-0 material-shadow mt-4">
        <div class="card-body">
            <div class="ribbon ribbon-primary ribbon-shape" th:text="#{presupuesto.gramaje-interior}">Gramaje interior
            </div>
            <h5 class="fs-14 text-end" th:text="#{presupuesto.gramaje-interior-descripcion}">
                Gramaje del interior</h5>
        </div>

        <div class="ribbon-content mt-4">
            <div id="div-gramaje-interior" class="hstack gap-2 justify-content-center flex-wrap">
                
            </div>
        </div>
    </div>

    <div class="d-flex justify-content-between align-items-center mt-4 w-100">
        <button id="btn-prev-interior" type="button" class="btn btn-change-tab-interior btn-light d-flex align-items-center">
            <i class=" ri-arrow-left-circle-line label-icon align-middle fs-16 me-2"></i>
            <span th:text="#{presupuesto.volver-datos-generales}">Volver a datos generales</span>
        </button>
        <button id="btn-next-interior" type="button" class="btn btn-change-tab-interior btn-secondary d-flex align-items-center">
            <span th:text="#{presupuesto.continuar-cubierta}">Continuar a diseño cubierta</span>
            <i class="ri-arrow-right-circle-line fs-16 ms-2"></i>
        </button>
    </div>

</div>