#hu-modal-expiracion{ display:none; position:fixed; z-index:99999; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.45); display:flex; align-items:center; justify-content:center; }
#hu-modal-expiracion .modal-card{ background:#ffffff; border-radius:12px; max-width:760px; width:min(96%,760px); box-shadow:0 8px 24px rgba(0,0,0,0.2); overflow:hidden; }
#hu-modal-expiracion .modal-body{ display:flex; flex-direction:column; padding:28px 32px; align-items:flex-start; }
#hu-modal-expiracion .modal-countdown{ color:#ff6060; font-weight:800; font-size:34px; line-height:1; margin-bottom:12px; min-width:90px; text-align:left; }
#hu-modal-expiracion .modal-text{ flex:1; }
#hu-modal-expiracion #hu-modal-title{ margin:0 0 10px 0; color:#1d2145; font-size:20px; font-weight:800; }
#hu-modal-expiracion #hu-modal-desc{ margin:0; color:#5b6270; font-size:14px; line-height:1.5; }
#hu-modal-expiracion .modal-actions{ display:flex; justify-content:flex-end; padding:18px 32px; }



    #hu-modal-expiracion .hu-btn {
        position: relative;
        display: flex;
        background-color: var(--btn__color__primary__bg);
        border-radius: 25px;
        padding: 0.5em;
        border: none;
        cursor: pointer;
        align-items: center;
        color: var(--primary-color-text);
        justify-content: center;
        transition: background-color 100ms ease-out;
        font-weight: 500;
        font-size: 16px;
        text-align: center;
        min-width: 30%
    }

        #hu-modal-expiracion .hu-btn:hover {
            color: var(--btn__color__hover_txt);
            background-color: var(--btn__color__hover);
        }
#hu-modal-expiracion .hu-btn:focus{ outline: none; box-shadow: 0 0 0 3px rgba(45,209,199,0.18); }
@media (max-width:560px){
    #hu-modal-expiracion .modal-body{ flex-direction:column; }
    #hu-modal-expiracion .modal-countdown{ margin-right:0; margin-bottom:12px; text-align:left; }
    #hu-modal-expiracion .modal-actions{ padding:12px 20px; }
}