/*---------------------------------------------------------------------------------------------------------------
   AUTOR          : DIEGO BUSTOS PEÑA
   FECHA CREACIÓN : 09-06-2026
   DESCRIPCIÓN    : CSS DE LOS MODAL O VENTANAS EMERGENTES
----------------------------------------------------------------------------------------------------------------*/

/* MODAL GENERAL */
.modal {
    z-index : 1055;
}

.modal-backdrop {
    z-index : 1050;
}

.modal-content {
    border        : none;
    border-radius : 24px;
    overflow      : hidden;
    background    : #ffffff;
    box-shadow    : 0 24px 60px rgba(15,23,42,.18);
}

/*  HEADER */
.modal-header-uct {
    position      : relative;
    background    : linear-gradient(
        135deg,
        var(--uct-navy) 0%,
        var(--uct-blue) 100%
    );
    padding       : 1.4rem 1.6rem;
    border-bottom : none;
    color         : #fff;
}

.modal-header-uct::after {
    content    : "";
    position   : absolute;
    left       : 0;
    bottom     : 0;
    width      : 100%;
    height     : 4px;
    background : var(--uct-gold);
}

.modal-header-uct .modal-title {
    font-size   : 1.15rem;
    font-weight : 700;
    margin      : 0;
}

/* BODY */
.modal-body {
    padding : 1.6rem;
}

/* FOOTER */
.modal-footer-uct {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    gap             : 1rem;
    padding         : 1.2rem 1.5rem;
    background      : #f8fafc;
    border-top      : 1px solid #e2e8f0;
}

/* ICON HEADER */
.header-instructivo {
    display     : flex;
    align-items : center;
    gap         : 1rem;
}

.icon-header-modal {
    width           : 54px;
    height          : 54px;
    border-radius   : 16px;
    display         : flex;
    align-items     : center;
    justify-content : center;
    background      : rgba(255,255,255,.14);
    backdrop-filter : blur(8px);
}

.icon-header-modal i {
    font-size : 1.35rem;
    color     : #fff;
}