/*---------------------------------------------------------------------------------------------------------------
   AUTOR          : DIEGO BUSTOS PEÑA
   FECHA CREACIÓN : 09-06-2026
   DESCRIPCIÓN    : CSS DEL INSTRUCTIVO
----------------------------------------------------------------------------------------------------------------*/

/* ALERTA INSTRUCTIVO */
.alert-instructivo {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    gap             : 1rem;
}

.alert-contenido {
    display     : flex;
    align-items : center;
    gap         : .85rem;
}

/*  BOTÓN INTERNO */
.btn-instructivo {
    border        : none;
    border-radius : 50px;
    padding       : .65rem 1.1rem;
    font-size     : .88rem;
    font-weight   : 700;
    color         : #fff;
    background    : linear-gradient(
        135deg,
        var(--uct-blue),
        var(--uct-navy)
    );
    box-shadow    : 0 8px 18px rgba(13,43,94,.18);
    transition    : all .25s ease;
}

.btn-instructivo:hover {
    transform  : translateY(-2px);
    box-shadow : 0 12px 24px rgba(13,43,94,.24);
}

/* BOTÓN FLOTANTE */
.btn-float-instructivo {
    position        : fixed;
    right           : 24px;
    bottom          : 24px;
    z-index         : 1040;
    display         : flex;
    align-items     : center;
    gap             : .7rem;
    border          : none;
    border-radius   : 60px;
    padding         : 1rem 1.3rem;
    color           : #fff;
    font-size       : .95rem;
    font-weight     : 700;
    background      : linear-gradient(
        135deg,
        #28a745 0%,
        #1f8a38 100%
    );
    box-shadow      :
        0 10px 30px rgba(40,167,69,.24),
        0 4px 12px rgba(0,0,0,.12);
    backdrop-filter : blur(10px);
    transition      : all .28s ease;
}

.btn-float-instructivo:hover {
    transform  : translateY(-4px) scale(1.02);
    box-shadow :
        0 18px 40px rgba(40,167,69,.28),
        0 8px 18px rgba(0,0,0,.16);
    background : linear-gradient(
        135deg,
        #2eb84a 0%,
        #23913c 100%
    );
}

.btn-float-instructivo i {
    font-size : 1.05rem;
}

/* LISTADO */
.instructivo-docs {
    display        : flex;
    flex-direction : column;
    gap            : 1rem;
}

.item-instructivo {
    display       : flex;
    align-items   : flex-start;
    gap           : .9rem;
    padding       : 1rem 1.1rem;
    border-radius : 16px;
    background    : #f8fafc;
    border        : 1px solid #e2e8f0;
    transition    : all .25s ease;
}

.item-instructivo:hover {
    transform  : translateX(4px);
    background : #f1f5f9;
    box-shadow : 0 10px 24px rgba(15,23,42,.06);
}

.item-instructivo i {
    color       : var(--uct-blue);
    font-size   : 1.05rem;
    margin-top  : .15rem;
    flex-shrink : 0;
}

.item-instructivo span {
    color       : #334155;
    line-height : 1.55;
}

/*  BOTÓN FLOTANTE OCULTO CUANDO MODAL ABRE */
body.modal-open .btn-float-instructivo {
    opacity        : 0;
    visibility     : hidden;
    pointer-events : none;
    transform      : translateY(12px);
}

.offcanvas-instructivo { 
    width       : 480px !important; 
    border-left : none; 
    background  : #ffffff; 
    box-shadow  : -12px 0 40px rgba(15,23,42,.16); 
} 

.offcanvas-instructivo .offcanvas-body {
    display         : flex; 
    flex-direction  : column; 
    justify-content : space-between; 
    padding         : 1.5rem; 
} 

.offcanvas-footer { 
    margin-top      : 2rem; 
    display         : flex; 
    justify-content : flex-end; 
}