/*public\css\style_hakkuma.css */
@charset "utf-8";
/* Autor : == Fonts */
/*@font-face{font-style: normal;
  font-family: 'Exo2-Black';
  src: url('/fonts/exo2/Exo2.0-Black.ttf') format('truetype'),
       url('/fonts/exo2/Exo2.0-Black.otf') format('otf'),
     url('/fonts/exo2/Exo2.0-Black.eot') format('eot'),
     url('/fonts/exo2/Exo2.0-Black.svg') format('svg'),
     url('/fonts/exo2/Exo2.0-Black.woff') format('woff');
}
.ff-exo2-BKL{font-family: Exo2-Black;}
*/

.bg-white{background-color: #fff!important;}
.bg-yellow{background-color: #fab80e!important;}
.bg-yellow2{background-color: #ffda6e!important;}
.bg-purple{background-color: #394395!important;}
.bg-purple2{background-color: #8830FF!important;}
.bg-light-purple{background-color: #8830FF!important;}
.bg-gray{background-color: #8492A6;}
.bg-black-20{background-color: #2c2c2c!important;}
.bg-black-40{background-color: #636363!important;}
.bg-black-60{background-color: #878787!important;}
.bg-black-80{background-color: #c1c1c1!important;}
.bg-black-90{background-color: #f3f3f3!important;}
.bg-light-green{background-color: #18ce08!important;}

.bg-label{background-color:#ebebeb!important;}
.bg-label-dark{background-color:#cfcfcf!important;}


.co-yellow{color: #fab80e!important;}
.co-yellow2{color: #ffda6e!important;}
.co-purple{color: #394395!important;}
.co-purple2{color: #8830FF!important;}
.co-light-purple{color: #8830FF!important;}
.co-gray{color: #8492A6!important;}
.co-black-20{color: #2c2c2c!important;}
.co-black-40{color: #636363!important;}
.co-black-60{color: #878787!important;}
.co-black-80{color: #c1c1c1!important;}
.co-black-90{color: #f3f3f3!important;}
.co-label{color: #ebebeb!important;}
.co-label-dark{color: #cfcfcf!important;}
.co-light-green{color: #18ce08!important;}

.borde-plomo-general{border:1px solid #f3f3f3;}

.cnt-btn-st{}
.cnt-btn-st .btn-st{text-align: center;border-radius: 15px;cursor: pointer;}
.cnt-btn-st a{text-decoration: none;}
.cnt-btn-st .btn-yellow{background-color: #fab80e!important;}
.cnt-btn-st .xs{min-width: 100px;height: 30px;padding-top:8px;font-size: 16px;}
.cnt-btn-st .sm{min-width: 120px;height: 40px;padding-top:10px;font-size: 18px;}
.cnt-btn-st .md{min-width: 150px;height: 50px;padding-top:15px;font-size: 20px;}
.cnt-btn-st .lg{min-width: 180px;height: 60px;padding-top:20px;font-size: 22px;}
.cnt-btn-st .btn-yellow{background-color: #fab80e!important;}
.cnt-btn-st :hover .btn-yellow{background-color: #394395!important;}
.cnt-btn-st .btn-purple{background-color: #394395!important;}
.cnt-btn-st :hover .btn-purple{background-color: #6872c9!important;}
.cnt-btn-st .btn-major{background-color: #8492A6!important;}
.cnt-btn-st :hover .btn-major{background-color: #bec8d5!important;}
.cnt-btn-st .btn-major{background-color: #f1f4f2!important;}
.cnt-btn-st :hover .btn-major{background-color: #d7d7d7!important;}
.cnt-btn-st .btn-gray{background-color: #8492A6!important;}
.cnt-btn-st :hover .btn-gray{background-color: #bdc4cd!important;}
.cnt-btn-st .btn-black-20{background-color: #2c2c2c!important;}
.cnt-btn-st :hover .btn-black-20{background-color: #474545!important;}
.cnt-btn-st .btn-black-40{background-color: #636363!important;}
.cnt-btn-st :hover .btn-black-40{background-color: #898686!important;}
.cnt-btn-st .btn-black-60{background-color: #878787!important;}
.cnt-btn-st :hover .btn-black-60{background-color: #adabab!important;}
.cnt-btn-st .btn-black-80{background-color: #c1c1c1!important;}
.cnt-btn-st :hover .btn-black-80{background-color: #dfdcdc!important;}
.cnt-btn-st .btn-label{background-color: #ebebeb!important;}
.cnt-btn-st :hover .btn-label{background-color: #c9c3c3!important;}
.cnt-btn-st .btn-label-dark{background-color: #cfcfcf!important;}
.cnt-btn-st :hover .btn-label-dark{background-color: #9b8f8f!important;}



body{overflow-x:hidden;background-color: #fff;color:#2c2c2c;line-height: 1.1!important;}
a{text-decoration: none!important;}
ul li{list-style:none}
.a{text-decoration: none!important;}

.fs-7{font-size: 0.8rem !important;}
.fs-8{font-size: 0.7rem !important;}

.f-left{float: left;}
.f-right{float: right;}
.separator{width: 100%;height:1px;margin:10px 0 20px 0;background-color: #394395;}
.btn_add{width: 150px;height: 50px; border-radius: 30px;float : right; }
.btn-circle :hover .btn_add{background-color: #fab80e!important;}
.btn-circle .title{float: right;}
.btn_crud{width: 75%;height: 26px;margin: 0 auto;border-radius: 6px;font-size: 18px; }
.cnt_btn_crud{height: 35px;}
.cnt_btn_crud :hover .btn_crud{background-color: #394395!important;}

.cnt_btn_delete{min-height: 40px;}
.btn_delete{width: 90%;height: 26px;margin: 0 auto;border-radius: 6px;font-size: 18px; }
.cnt_btn_delete :hover .btn_delete{background-color: #ce5d79!important;}

.result_upload{width: 100%;}
.result_upload ul{list-style: none;}
.result_upload ul li{padding: 3px 10px;margin-bottom: 5px;}

.crud-steps{width: calc(100% - 36px);height: auto;overflow: hidden;border-top-right-radius: 15px;border-top-left-radius: 15px;margin: 0 auto;margin-bottom: 10px;}
.crud-steps ul{padding: 0!important;}
.crud-steps a{text-decoration: none; color:white;}
.crud-steps .normal-step{height: 60px;text-align: center;font-size: 22px;padding-top: 8px;background-color: #c1c1c1!important;}

.crud-steps .normal-step label{display: block;width: 100%;font-size: 14px!important;}
.crud-steps .active-step{background-color: #fab80e!important;border-bottom: 3px solid #636363;}










/* Extra Extra Large devices */
@media (max-width: 1400px) {
	.fs-xxl-7{font-size: 0.8rem !important;}
	.fs-xxl-8{font-size: 0.7rem !important;}
}

/* Extra Large devices */
@media (max-width: 1200px) {
	.fs-xl-7{font-size: 0.8rem !important;}
	.fs-xl-8{font-size: 0.7rem !important;}
}

/* Large devices */
@media (max-width: 992px) {
	.fs-lg-7{font-size: 0.8rem !important;}
	.fs-lg-8{font-size: 0.7rem !important;}
}

/* Medium devices */
@media (max-width: 768px){
	.fs-md-7{font-size: 0.8rem !important;}
	.fs-md-8{font-size: 0.7rem !important;}
	.card-body{padding:8px!important;}
}

/* Small devices */
@media (max-width: 576px){
	.fs-sm-7{font-size: 0.8rem !important;}
	.fs-sm-8{font-size: 0.7rem !important;}
	.card-body{padding:6px!important;}
}

/* Small devices */
@media (max-width: 420px){
	.fs-xs-7{font-size: 0.8rem !important;}
	.fs-xs-8{font-size: 0.7rem !important;}
	.card-body{padding:4px!important;}
}


/* ============================================================
   LOYALTY
   ============================================================ */


/* ============================================================
   LIST CARD
   ============================================================ */

.hk-loyalty-card {
    display: flex;
    height: 100%;
    overflow: hidden;
    flex-direction: column;
    background-color: var(--hk-surface);
    border: 1px solid var(--hk-border);
    border-radius: var(--hk-radius);
    box-shadow: var(--hk-shadow-sm);
    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}


.hk-loyalty-card:hover {
    border-color: #d5d9ed;
    transform: translateY(-2px);
    box-shadow: var(--hk-shadow);
}


.hk-loyalty-card-image {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background-color: #f2f4f7;
}


.hk-loyalty-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .25s ease;
}


.hk-loyalty-card:hover
.hk-loyalty-card-image img {
    transform: scale(1.025);
}


.hk-loyalty-card-placeholder {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: var(--hk-text-muted);
    font-size: 34px;
}


.hk-loyalty-type-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-flex;
    max-width: calc(100% - 150px);
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    overflow: hidden;
    color: var(--hk-primary);
    background-color: rgba(255, 255, 255, .94);
    border-radius: 20px;
    font-size: 9px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.hk-loyalty-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 16px;
}


.hk-loyalty-card-label {
    margin-bottom: 5px;
    color: var(--hk-text-muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}


.hk-loyalty-card-title {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.35;
}


.hk-loyalty-card-title a {
    display: -webkit-box;
    overflow: hidden;
    color: var(--hk-text);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}


.hk-loyalty-card-title a:hover {
    color: var(--hk-primary);
}


.hk-loyalty-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid var(--hk-border);
}


.hk-loyalty-card-main-action {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--hk-primary);
    font-size: 11px;
    font-weight: 800;
}


.hk-loyalty-card-main-action i {
    font-size: 9px;
}


.hk-loyalty-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}


.hk-loyalty-empty-state {
    min-height: 300px;
}



/* ============================================================
   TYPE SELECTOR
   ============================================================ */

.hk-loyalty-type-card {
    display: grid;
    height: 100%;
    overflow: hidden;
    grid-template-columns:
        minmax(230px, 42%)
        minmax(0, 1fr);
    background-color: #ffffff;
    border: 1px solid var(--hk-border);
    border-radius: var(--hk-radius-lg);
    box-shadow: var(--hk-shadow-sm);
    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}


.hk-loyalty-type-card:hover {
    border-color: #ccd1f0;
    transform: translateY(-3px);
    box-shadow: var(--hk-shadow);
}


.hk-loyalty-type-image {
    overflow: hidden;
    min-height: 230px;
    background-color: #f2f4f7;
}


.hk-loyalty-type-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.hk-loyalty-type-placeholder {
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 230px;
    align-items: center;
    justify-content: center;
    color: var(--hk-text-muted);
    font-size: 36px;
}


.hk-loyalty-type-content {
    display: flex;
    min-width: 0;
    justify-content: center;
    flex-direction: column;
    padding: 26px;
}


.hk-loyalty-type-content h2 {
    margin: 0 0 9px;
    color: var(--hk-text);
    font-size: 21px;
    font-weight: 800;
}


.hk-loyalty-type-content p {
    margin: 0 0 22px;
    color: var(--hk-text-secondary);
    font-size: 12px;
    line-height: 1.6;
}


.hk-loyalty-type-actions {
    margin-top: auto;
}



/* ============================================================
   INLINE STATE
   ============================================================ */

.hk-loyalty-state-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 20px;
    font-size: 10px;
}


.hk-loyalty-state-inline strong {
    font-weight: 800;
}


.hk-loyalty-state-inline--pending {
    color: #475467;
    background-color: #f2f4f7;
}


.hk-loyalty-state-inline--active {
    color: #067647;
    background-color: #ecfdf3;
}


.hk-loyalty-state-inline--finished {
    color: #b42318;
    background-color: #fef3f2;
}


.hk-loyalty-state-inline--suspended {
    color: #475467;
    background-color: #eaecf0;
}


.hk-loyalty-state-inline--danger {
    color: #b42318;
    background-color: #fef3f2;
}



/* ============================================================
   DETAIL HERO
   ============================================================ */

.hk-loyalty-detail-hero {
    display: grid;
    grid-template-columns:
        minmax(320px, 480px)
        minmax(0, 1fr);
    gap: 30px;
    margin-bottom: 20px;
    padding: 20px;
    background-color: var(--hk-surface);
    border: 1px solid var(--hk-border);
    border-radius: var(--hk-radius-lg);
    box-shadow: var(--hk-shadow-sm);
}


.hk-loyalty-detail-image {
    overflow: hidden;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: #f2f4f7;
    border-radius: 12px;
}


.hk-loyalty-detail-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.hk-loyalty-detail-placeholder {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: var(--hk-text-muted);
    font-size: 42px;
}


.hk-loyalty-detail-summary {
    display: flex;
    min-width: 0;
    justify-content: center;
    flex-direction: column;
}


.hk-loyalty-detail-type {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    color: var(--hk-primary);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}


.hk-loyalty-detail-summary h2 {
    margin: 0 0 10px;
    color: var(--hk-text);
    font-size: 26px;
    font-weight: 800;
}


.hk-loyalty-detail-summary > p {
    max-width: 680px;
    margin: 0;
    color: var(--hk-text-secondary);
    font-size: 13px;
    line-height: 1.65;
}



/* ============================================================
   TERMS
   ============================================================ */

.hk-loyalty-terms-card {
    margin-bottom: 24px;
}


.hk-loyalty-terms {
    margin: 0;
    color: var(--hk-text-secondary);
    font-size: 12px;
    line-height: 1.7;
}



/* ============================================================
   ASSIGNED PRIZES
   ============================================================ */

.hk-loyalty-assigned-section {
    margin-top: 26px;
}


.hk-loyalty-store-card {
    overflow: hidden;
}


.hk-loyalty-store-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 18px;
    background-color: #f9fafb;
    border-bottom: 1px solid var(--hk-border);
}


.hk-loyalty-store-header img,
.hk-loyalty-store-placeholder {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 10px;
}


.hk-loyalty-store-header img {
    object-fit: cover;
}


.hk-loyalty-store-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--hk-primary);
    background-color: var(--hk-primary-light);
}


.hk-loyalty-store-header > div {
    display: flex;
    flex-direction: column;
}


.hk-loyalty-store-header span {
    color: var(--hk-text-muted);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}


.hk-loyalty-store-header strong {
    margin-top: 2px;
    color: var(--hk-text);
    font-size: 14px;
    font-weight: 800;
}


.hk-loyalty-prize-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 14px;
}


.hk-loyalty-assigned-prize {
    overflow: hidden;
    background-color: #ffffff;
    border: 1px solid var(--hk-border);
    border-radius: 10px;
}


.hk-loyalty-assigned-prize-image {
    display: flex;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    color: var(--hk-text-muted);
    background-color: #f2f4f7;
    font-size: 24px;
}


.hk-loyalty-assigned-prize-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.hk-loyalty-assigned-prize-body {
    display: flex;
    flex-direction: column;
    padding: 11px;
}


.hk-loyalty-assigned-prize-body > strong {
    display: -webkit-box;
    min-height: 34px;
    overflow: hidden;
    color: var(--hk-text);
    font-size: 11px;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}


.hk-loyalty-assigned-points {
    margin-top: 8px;
    color: var(--hk-primary);
    font-size: 13px;
    font-weight: 800;
}


.hk-loyalty-assigned-prize-body small {
    margin-top: 4px;
    color: var(--hk-text-secondary);
    font-size: 9px;
}


.hk-loyalty-store-empty {
    display: flex;
    min-height: 90px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--hk-text-muted);
    font-size: 11px;
}



/* ============================================================
   RESPONSIVE LOYALTY
   ============================================================ */

@media (max-width: 1199.98px) {

    .hk-loyalty-prize-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}


@media (max-width: 991.98px) {

    .hk-loyalty-type-card {
        grid-template-columns: 1fr;
    }


    .hk-loyalty-type-image {
        min-height: 190px;
        aspect-ratio: 16 / 9;
    }


    .hk-loyalty-detail-hero {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 767.98px) {

    .hk-loyalty-prize-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 575.98px) {

    .hk-loyalty-type-content {
        padding: 20px;
    }


    .hk-loyalty-type-content h2 {
        font-size: 18px;
    }


    .hk-loyalty-prize-grid {
        grid-template-columns: 1fr;
    }


    .hk-loyalty-detail-summary h2 {
        font-size: 22px;
    }

}

/* ============================================================
   LOYALTY WORKFLOW
   ============================================================ */


/* ============================================================
   STEPPER
   ============================================================ */

.hk-loyalty-steps {
    display: flex;
    max-width: 760px;
    align-items: center;
    margin: 0 auto 28px;
}


.hk-loyalty-step {
    display: flex;
    min-width: 150px;
    align-items: center;
    gap: 10px;
    color: var(--hk-text-muted);
}


a.hk-loyalty-step:hover {
    color: var(--hk-primary);
}


.hk-loyalty-step-number {
    display: inline-flex;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    color: var(--hk-text-muted);
    background-color: #ffffff;
    border: 2px solid var(--hk-border-dark);
    border-radius: 50%;
    font-size: 12px;
    font-weight: 800;
}


.hk-loyalty-step-content {
    display: flex;
    flex-direction: column;
}


.hk-loyalty-step-content strong {
    color: var(--hk-text);
    font-size: 11px;
    font-weight: 800;
}


.hk-loyalty-step-content small {
    margin-top: 1px;
    color: var(--hk-text-muted);
    font-size: 9px;
}


.hk-loyalty-step--active
.hk-loyalty-step-number {
    color: #ffffff;
    background-color: var(--hk-primary);
    border-color: var(--hk-primary);
}


.hk-loyalty-step--active
.hk-loyalty-step-content strong {
    color: var(--hk-primary);
}


.hk-loyalty-step--completed
.hk-loyalty-step-number {
    color: #067647;
    background-color: #ecfdf3;
    border-color: #abefc6;
}


.hk-loyalty-step-line {
    flex: 1;
    height: 2px;
    margin: 0 15px;
    background-color: var(--hk-border-dark);
}


.hk-loyalty-step-line.active {
    background-color: var(--hk-primary);
}



/* ============================================================
   FORM TYPE
   ============================================================ */

.hk-loyalty-form-type {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 13px;
    background-color: var(--hk-primary-light);
    border-radius: 8px;
}


.hk-loyalty-form-type span {
    color: var(--hk-text-secondary);
    font-size: 10px;
}


.hk-loyalty-form-type strong {
    color: var(--hk-primary);
    font-size: 12px;
    font-weight: 800;
}


.hk-field-info {
    margin-left: 5px;
    color: var(--hk-primary);
    cursor: help;
}



/* ============================================================
   COVER
   ============================================================ */

.hk-loyalty-cover-editor {
    display: flex;
    flex-direction: column;
    gap: 10px;
}


.hk-loyalty-cover-preview {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 820 / 432;
    background-color: #f2f4f7;
    border: 1px solid var(--hk-border);
    border-radius: 10px;
}


.hk-loyalty-cover-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.hk-loyalty-cover-placeholder {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 7px;
    color: var(--hk-text-muted);
}


.hk-loyalty-cover-placeholder i {
    font-size: 25px;
}


.hk-loyalty-cover-placeholder span {
    font-size: 10px;
}



/* ============================================================
   WORKFLOW CONTEXT
   ============================================================ */

.hk-loyalty-workflow-context {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    padding: 12px 15px;
    background-color: #ffffff;
    border: 1px solid var(--hk-border);
    border-radius: var(--hk-radius);
}


.hk-loyalty-workflow-context > div:first-child {
    display: flex;
    flex-direction: column;
}


.hk-loyalty-workflow-context > div:first-child span {
    color: var(--hk-text-muted);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}


.hk-loyalty-workflow-context > div:first-child strong {
    margin-top: 2px;
    color: var(--hk-text);
    font-size: 13px;
}



/* ============================================================
   STORE SELECTOR
   ============================================================ */

.hk-loyalty-store-selector-header {
    display: flex;
    align-items: center;
    gap: 12px;
}


.hk-loyalty-store-selector-header img {
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 9px;
}


.hk-loyalty-store-selector-header span {
    color: var(--hk-text-muted);
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
}


.hk-loyalty-store-selector-header h2 {
    margin: 1px 0 2px;
    font-size: 14px;
    font-weight: 800;
}


.hk-loyalty-store-selector-header p {
    margin: 0;
    color: var(--hk-text-secondary);
    font-size: 10px;
}



/* ============================================================
   PRIZE SELECTOR
   ============================================================ */

.hk-loyalty-prize-selector-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 14px;
}


.hk-loyalty-prize-option {
    overflow: hidden;
    background-color: #ffffff;
    border: 2px solid var(--hk-border);
    border-radius: 12px;
    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}


.hk-loyalty-prize-option:hover {
    border-color: #ccd1f0;
    transform: translateY(-2px);
    box-shadow: var(--hk-shadow-sm);
}


.hk-loyalty-prize-option.is-selected {
    border-color: var(--hk-primary);
    box-shadow:
        0 0 0 3px
        rgba(57, 67, 149, .08);
}


.hk-loyalty-prize-option-image {
    position: relative;
    display: flex;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    color: var(--hk-text-muted);
    background-color: #f2f4f7;
    font-size: 25px;
}


.hk-loyalty-prize-option-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.hk-loyalty-prize-check {
    position: absolute;
    top: 9px;
    right: 9px;
    display: flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: rgba(255, 255, 255, .95);
    border-radius: 9px;
    box-shadow:
        0 2px 7px
        rgba(16, 24, 40, .12);
}


.hk-loyalty-prize-check
.form-check-input {
    width: 19px;
    height: 19px;
    margin: 0;
    cursor: pointer;
}


.hk-loyalty-prize-option-body {
    display: flex;
    min-height: 77px;
    flex-direction: column;
    padding: 11px 12px;
}


.hk-loyalty-prize-option-body > strong {
    display: -webkit-box;
    overflow: hidden;
    color: var(--hk-text);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}


.hk-loyalty-prize-option-points {
    margin-top: auto;
    padding-top: 7px;
    color: var(--hk-primary);
    font-size: 13px;
    font-weight: 800;
}


.hk-loyalty-stock-editor,
.hk-loyalty-order-editor {
    padding: 10px 12px;
    background-color: #f9fafb;
    border-top: 1px solid var(--hk-border);
}


.hk-loyalty-stock-editor label,
.hk-loyalty-order-editor label {
    display: block;
    margin-bottom: 5px;
    color: var(--hk-text-secondary);
    font-size: 9px;
    font-weight: 700;
}


.hk-loyalty-stock-editor
.hk-form-control,
.hk-loyalty-order-editor
.hk-form-control {
    min-height: 36px;
    height: 36px;
}



/* ============================================================
   REVIEW
   ============================================================ */

.hk-loyalty-review-hero {
    display: grid;
    grid-template-columns:
        minmax(280px, 430px)
        minmax(0, 1fr);
    gap: 28px;
    padding: 20px;
    background-color: #ffffff;
    border: 1px solid var(--hk-border);
    border-radius: var(--hk-radius-lg);
    box-shadow: var(--hk-shadow-sm);
}


.hk-loyalty-review-image {
    display: flex;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 820 / 432;
    align-items: center;
    justify-content: center;
    color: var(--hk-text-muted);
    background-color: #f2f4f7;
    border-radius: 12px;
    font-size: 35px;
}


.hk-loyalty-review-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.hk-loyalty-review-main {
    display: flex;
    justify-content: center;
    flex-direction: column;
}


.hk-loyalty-review-main h2 {
    margin: 0 0 8px;
    color: var(--hk-text);
    font-size: 24px;
    font-weight: 800;
}


.hk-loyalty-review-main > p {
    max-width: 650px;
    margin: 0;
    color: var(--hk-text-secondary);
    font-size: 12px;
    line-height: 1.6;
}



/* ============================================================
   REVIEW METRICS
   ============================================================ */

.hk-loyalty-review-stat {
    height: 100%;
    padding: 14px 15px;
    background-color: #f9fafb;
    border: 1px solid var(--hk-border);
    border-radius: 10px;
}


.hk-loyalty-review-stat span {
    display: block;
    margin-bottom: 5px;
    color: var(--hk-text-muted);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}


.hk-loyalty-review-stat strong {
    color: var(--hk-text);
    font-size: 15px;
    font-weight: 800;
}


.hk-loyalty-review-terms {
    margin-top: 4px;
    padding: 14px 15px;
    background-color: var(--hk-primary-light);
    border-radius: 10px;
}


.hk-loyalty-review-terms > span {
    color: var(--hk-primary);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}


.hk-loyalty-review-terms p {
    margin: 5px 0 0;
    color: var(--hk-text-secondary);
    font-size: 11px;
    line-height: 1.6;
}



/* ============================================================
   REVIEW STORE / PRIZES
   ============================================================ */

.hk-loyalty-review-store + 
.hk-loyalty-review-store {
    margin-top: 22px;
}


.hk-loyalty-review-store-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}


.hk-loyalty-review-store-header img,
.hk-loyalty-review-store-header > span {
    display: flex;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    object-fit: cover;
    color: var(--hk-primary);
    background-color: var(--hk-primary-light);
    border-radius: 9px;
}


.hk-loyalty-review-store-header > div {
    display: flex;
    flex-direction: column;
}


.hk-loyalty-review-store-header small {
    color: var(--hk-text-muted);
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
}


.hk-loyalty-review-store-header strong {
    color: var(--hk-text);
    font-size: 12px;
}


.hk-loyalty-review-prizes {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 12px;
}


.hk-loyalty-review-prize {
    overflow: hidden;
    background-color: #ffffff;
    border: 1px solid var(--hk-border);
    border-radius: 10px;
}


.hk-loyalty-review-prize-image {
    display: flex;
    width: 100%;
    aspect-ratio: 16 / 10;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--hk-text-muted);
    background-color: #f2f4f7;
}


.hk-loyalty-review-prize-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.hk-loyalty-review-prize-body {
    display: flex;
    flex-direction: column;
    padding: 10px;
}


.hk-loyalty-review-prize-body > strong {
    display: -webkit-box;
    min-height: 31px;
    overflow: hidden;
    color: var(--hk-text);
    font-size: 10px;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}


.hk-loyalty-review-prize-body > span {
    margin-top: 6px;
    color: var(--hk-primary);
    font-size: 12px;
    font-weight: 800;
}


.hk-loyalty-review-prize-body small {
    margin-top: 4px;
    color: var(--hk-text-secondary);
    font-size: 9px;
}



/* ============================================================
   PUBLISH
   ============================================================ */

.hk-loyalty-publish-box {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    background-color: #ecfdf3;
    border: 1px solid #abefc6;
    border-radius: var(--hk-radius);
}


.hk-loyalty-publish-icon {
    display: inline-flex;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    color: #067647;
    background-color: #ffffff;
    border-radius: 12px;
    font-size: 18px;
}


.hk-loyalty-publish-content {
    flex: 1;
}


.hk-loyalty-publish-content h2 {
    margin: 0;
    color: #065f46;
    font-size: 14px;
    font-weight: 800;
}


.hk-loyalty-publish-content p {
    margin: 3px 0 0;
    color: #487767;
    font-size: 10px;
}


.hk-loyalty-publish-box--finished {
    background-color: #f2f4f7;
    border-color: var(--hk-border);
}


.hk-loyalty-publish-box--finished
.hk-loyalty-publish-icon {
    color: var(--hk-text-secondary);
}



/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1199.98px) {

    .hk-loyalty-prize-selector-grid,
    .hk-loyalty-review-prizes {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}


@media (max-width: 991.98px) {

    .hk-loyalty-review-hero {
        grid-template-columns: 1fr;
    }


    .hk-loyalty-review-image {
        max-width: 600px;
    }

}


@media (max-width: 767.98px) {

    .hk-loyalty-steps {
        align-items: flex-start;
    }


    .hk-loyalty-step {
        min-width: 40px;
    }


    .hk-loyalty-step-content {
        display: none;
    }


    .hk-loyalty-step-line {
        margin-top: 19px;
    }


    .hk-loyalty-prize-selector-grid,
    .hk-loyalty-review-prizes {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .hk-loyalty-publish-box {
        align-items: flex-start;
        flex-wrap: wrap;
    }


    .hk-loyalty-publish-box .hk-btn {
        width: 100%;
    }

}


@media (max-width: 575.98px) {

    .hk-loyalty-workflow-context {
        align-items: flex-start;
        flex-direction: column;
    }


    .hk-loyalty-prize-selector-grid,
    .hk-loyalty-review-prizes {
        grid-template-columns: 1fr;
    }

}



/* ============================================================
   CLAIM PRIZE / ENTREGAR PREMIO
   ============================================================ */

.hk-prize-delivery-page {
    width: 100%;
}


.hk-claim-start-card {
    max-width: 1050px;
    margin-right: auto;
    margin-left: auto;
}



/* ============================================================
   MÉTODOS
   ============================================================ */

.hk-claim-method-card,
.hk-claim-manual {
    display: flex;
    min-height: 315px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 26px;
    text-align: center;
}


.hk-claim-method-icon {
    display: inline-flex;
    width: 68px;
    height: 68px;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    color: var(--hk-primary);
    background-color: var(--hk-primary-light);
    border-radius: 18px;
    font-size: 27px;
}


.hk-claim-method-card h3,
.hk-claim-manual h3 {
    margin: 0 0 7px;
    color: var(--hk-text);
    font-size: 18px;
    font-weight: 800;
}


.hk-claim-method-card p,
.hk-claim-manual p {
    max-width: 390px;
    margin: 0 0 19px;
    color: var(--hk-text-secondary);
    font-size: 11px;
    line-height: 1.55;
}


.hk-claim-scan-button {
    min-width: 180px;
}


.hk-claim-method-help {
    display: inline-flex;
    max-width: 340px;
    align-items: flex-start;
    gap: 6px;
    margin-top: 16px;
    color: var(--hk-text-muted);
    font-size: 9px;
    line-height: 1.45;
}


.hk-claim-method-divider {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 270px;
    align-items: center;
    justify-content: center;
}


.hk-claim-method-divider::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background-color: var(--hk-border);
    content: "";
}


.hk-claim-method-divider span {
    position: relative;
    z-index: 1;
    display: inline-flex;
    width: 35px;
    height: 35px;
    align-items: center;
    justify-content: center;
    color: var(--hk-text-muted);
    background-color: #ffffff;
    border: 1px solid var(--hk-border);
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
}



/* ============================================================
   OTP / 6 DÍGITOS
   ============================================================ */

.hk-claim-method-label {
    margin-bottom: 5px;
    color: var(--hk-primary);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}


.hk-claim-code-inputs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    margin: 5px 0 16px;
}


.hk-claim-digit {
    width: 54px;
    height: 60px;
    padding: 0;
    color: var(--hk-text);
    background-color: #ffffff;
    border: 1px solid var(--hk-border-dark);
    border-radius: 11px;
    outline: 0;
    font-size: 24px;
    font-weight: 800;
    line-height: 60px;
    text-align: center;
    transition:
        border-color .15s ease,
        box-shadow .15s ease,
        transform .15s ease;
}


.hk-claim-digit:focus {
    border-color: var(--hk-primary);
    box-shadow:
        0 0 0 3px
        rgba(57, 67, 149, .10);
    transform: translateY(-1px);
}


.hk-claim-code-error {
    margin-bottom: 12px;
    color: #b42318;
    font-size: 10px;
    font-weight: 700;
}


.hk-claim-validate-button {
    min-width: 200px;
    margin-bottom: 9px;
}



/* ============================================================
   HELP
   ============================================================ */

.hk-claim-help-box {
    display: flex;
    max-width: 1050px;
    align-items: center;
    gap: 11px;
    margin: 17px auto 0;
    padding: 13px 15px;
    color: var(--hk-text-secondary);
    background-color: #f9fafb;
    border: 1px solid var(--hk-border);
    border-radius: 10px;
}


.hk-claim-help-box > i {
    color: var(--hk-primary);
    font-size: 17px;
}


.hk-claim-help-box > div {
    display: flex;
    flex-direction: column;
}


.hk-claim-help-box strong {
    color: var(--hk-text);
    font-size: 10px;
}


.hk-claim-help-box span {
    margin-top: 2px;
    font-size: 9px;
    line-height: 1.5;
}



/* ============================================================
   VALIDATED
   ============================================================ */

.hk-claim-validated-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding: 14px 17px;
    color: #067647;
    background-color: #ecfdf3;
    border: 1px solid #abefc6;
    border-radius: var(--hk-radius);
}


.hk-claim-validated-icon {
    display: inline-flex;
    flex: 0 0 39px;
    width: 39px;
    height: 39px;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    border-radius: 10px;
    font-size: 17px;
}


.hk-claim-validated-banner > div:last-child {
    display: flex;
    flex-direction: column;
}


.hk-claim-validated-banner strong {
    font-size: 11px;
    font-weight: 800;
}


.hk-claim-validated-banner span {
    margin-top: 2px;
    font-size: 9px;
}



/* ============================================================
   USER
   ============================================================ */

.hk-claim-user {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--hk-border);
}


.hk-claim-user-avatar {
    display: flex;
    flex: 0 0 70px;
    width: 70px;
    height: 70px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--hk-primary);
    background-color: var(--hk-primary-light);
    border-radius: 50%;
    font-size: 22px;
    font-weight: 800;
}


.hk-claim-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.hk-claim-user-info {
    display: flex;
    min-width: 0;
    flex-direction: column;
}


.hk-claim-user-info span,
.hk-claim-loyalty > div:last-child span {
    color: var(--hk-text-muted);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}


.hk-claim-user-info strong,
.hk-claim-loyalty > div:last-child strong {
    margin-top: 3px;
    color: var(--hk-text);
    font-size: 14px;
    font-weight: 800;
}


.hk-claim-loyalty {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
}


.hk-claim-loyalty-image {
    display: flex;
    flex: 0 0 100px;
    width: 100px;
    aspect-ratio: 820 / 432;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--hk-primary);
    background-color: #f2f4f7;
    border-radius: 8px;
}


.hk-claim-loyalty-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}



/* ============================================================
   PRIZE
   ============================================================ */

.hk-claim-prize {
    display: grid;
    grid-template-columns:
        minmax(200px, 42%)
        minmax(0, 1fr);
    gap: 20px;
}


.hk-claim-prize-image {
    display: flex;
    width: 100%;
    aspect-ratio: 16 / 10;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--hk-text-muted);
    background-color: #f2f4f7;
    border-radius: 11px;
    font-size: 28px;
}


.hk-claim-prize-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.hk-claim-prize-info {
    display: flex;
    min-width: 0;
    justify-content: center;
    flex-direction: column;
}


.hk-claim-prize-type {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 5px;
    color: var(--hk-primary);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}


.hk-claim-prize-info h2 {
    margin: 7px 0;
    color: var(--hk-text);
    font-size: 20px;
    font-weight: 800;
}


.hk-claim-prize-info p {
    margin: 0 0 10px;
    color: var(--hk-text-secondary);
    font-size: 10px;
    line-height: 1.55;
}


.hk-claim-prize-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}


.hk-claim-prize-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 8px;
    color: var(--hk-text-secondary);
    background-color: #f2f4f7;
    border-radius: 7px;
    font-size: 9px;
    font-weight: 700;
}



/* ============================================================
   CONFIRM DELIVERY
   ============================================================ */

.hk-claim-confirmation-box {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 20px;
    padding: 17px;
    background-color: #fff8e6;
    border: 1px solid #f7d47f;
    border-radius: var(--hk-radius);
}


.hk-claim-confirmation-icon {
    display: inline-flex;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    color: #9a6700;
    background-color: #ffffff;
    border-radius: 11px;
    font-size: 18px;
}


.hk-claim-confirmation-text {
    display: flex;
    flex: 1;
    flex-direction: column;
}


.hk-claim-confirmation-text strong {
    color: #7a4d00;
    font-size: 11px;
    font-weight: 800;
}


.hk-claim-confirmation-text span {
    margin-top: 3px;
    color: #876624;
    font-size: 9px;
    line-height: 1.5;
}


.hk-claim-deliver-button {
    flex: 0 0 auto;
}



/* ============================================================
   AJAX
   ============================================================ */

.hk-claim-delivery-feedback {
    margin-top: 15px;
}


.hk-claim-processing,
.hk-claim-ajax-error {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 15px;
    border-radius: 10px;
}


.hk-claim-processing {
    color: var(--hk-primary);
    background-color: var(--hk-primary-light);
}


.hk-claim-ajax-error {
    color: #b42318;
    background-color: #fef3f2;
    border: 1px solid #fecdca;
}


.hk-claim-processing > div {
    display: flex;
    flex-direction: column;
}


.hk-claim-processing strong {
    font-size: 10px;
}


.hk-claim-processing span,
.hk-claim-ajax-error span {
    font-size: 9px;
}



/* ============================================================
   SUCCESS
   ============================================================ */

.hk-claim-success-page {
    max-width: 720px;
    margin: 40px auto;
    padding: 32px;
    text-align: center;
    background-color: #ffffff;
    border: 1px solid var(--hk-border);
    border-radius: var(--hk-radius-lg);
    box-shadow: var(--hk-shadow-sm);
}


.hk-claim-success-icon {
    display: inline-flex;
    width: 70px;
    height: 70px;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    color: #ffffff;
    background-color: #12b76a;
    border-radius: 50%;
    font-size: 27px;
}


.hk-claim-success-page h1 {
    margin: 7px 0;
    color: var(--hk-text);
    font-size: 25px;
    font-weight: 800;
}


.hk-claim-success-description {
    margin: 0 0 22px;
    color: var(--hk-text-secondary);
    font-size: 11px;
}


.hk-claim-success-prize {
    display: grid;
    grid-template-columns:
        180px
        minmax(0, 1fr);
    gap: 18px;
    margin: 0 auto 18px;
    padding: 14px;
    text-align: left;
    background-color: #f9fafb;
    border: 1px solid var(--hk-border);
    border-radius: 12px;
}


.hk-claim-success-prize-image {
    display: flex;
    aspect-ratio: 16 / 10;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--hk-primary);
    background-color: #ffffff;
    border-radius: 9px;
}


.hk-claim-success-prize-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.hk-claim-success-prize-info {
    display: flex;
    justify-content: center;
    flex-direction: column;
}


.hk-claim-success-prize-info span,
.hk-claim-success-prize-info small {
    color: var(--hk-text-muted);
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
}


.hk-claim-success-prize-info > strong {
    margin: 3px 0 10px;
    color: var(--hk-text);
    font-size: 14px;
}


.hk-claim-success-prize-info b {
    margin-top: 2px;
    color: var(--hk-text);
    font-size: 11px;
}


.hk-claim-success-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-bottom: 22px;
    padding: 10px;
    color: #667085;
    background-color: #f9fafb;
    border-radius: 9px;
    font-size: 9px;
}


.hk-claim-success-note i {
    color: var(--hk-yellow);
}


.hk-claim-success-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}



/* ============================================================
   ERROR
   ============================================================ */

.hk-claim-error-card {
    display: flex;
    max-width: 760px;
    align-items: flex-start;
    gap: 16px;
    margin: 20px auto;
    padding: 22px;
    background-color: #ffffff;
    border: 1px solid #fecdca;
    border-radius: var(--hk-radius-lg);
}


.hk-claim-error-icon {
    display: inline-flex;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    color: #b42318;
    background-color: #fef3f2;
    border-radius: 12px;
    font-size: 19px;
}


.hk-claim-error-content {
    flex: 1;
}


.hk-claim-error-content > strong {
    display: block;
    margin-bottom: 9px;
    color: #b42318;
    font-size: 13px;
}


.hk-claim-error-content ul {
    margin: 0 0 14px;
    padding-left: 18px;
    color: var(--hk-text-secondary);
    font-size: 10px;
}


.hk-claim-error-content li {
    list-style: disc;
}



/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 991.98px) {

    .hk-claim-method-card,
    .hk-claim-manual {
        min-height: auto;
        padding: 20px;
    }


    .hk-claim-prize {
        grid-template-columns: 1fr;
    }


    .hk-claim-prize-image {
        max-width: 480px;
    }


    .hk-claim-confirmation-box {
        align-items: flex-start;
        flex-wrap: wrap;
    }


    .hk-claim-deliver-button {
        width: 100%;
    }

}


@media (max-width: 575.98px) {

    .hk-claim-code-inputs {
        gap: 5px;
    }


    .hk-claim-digit {
        width: 42px;
        height: 52px;
        font-size: 20px;
        line-height: 52px;
        border-radius: 9px;
    }


    .hk-claim-success-prize {
        grid-template-columns: 1fr;
    }


    .hk-claim-success-actions {
        flex-direction: column;
    }


    .hk-claim-success-actions .hk-btn {
        width: 100%;
    }

}


/* =========================================================
   STORE - PURCHASE CONFIGURATION
   ========================================================= */

.hk-store-steps{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0;
    margin-bottom:24px;
    border:1px solid #e3e7ef;
    border-radius:14px;
    overflow:hidden;
    background:#fff;
}

.hk-store-step{
    display:flex;
    align-items:center;
    gap:12px;
    padding:16px 20px;
    color:#8492a6;
}

.hk-store-step + .hk-store-step{
    border-left:1px solid #e3e7ef;
}

.hk-store-step-number{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 36px;
    width:36px;
    height:36px;
    border-radius:50%;
    background:#f1f3f7;
    font-weight:700;
}

.hk-store-step strong,
.hk-store-step span{
    display:block;
}

.hk-store-step strong{
    margin-bottom:3px;
}

.hk-store-step > div > span{
    font-size:.82rem;
}

.hk-store-step--complete{
    color:#168653;
}

.hk-store-step--complete .hk-store-step-number{
    background:#e7f8ef;
}

.hk-store-step--active{
    color:#394395;
    background:#f4f5ff;
}

.hk-store-step--active .hk-store-step-number{
    background:#394395;
    color:#fff;
}



/* =========================================================
   Purchase mode cards
   ========================================================= */

.hk-purchase-choice{
    display:block;
    height:100%;
    cursor:pointer;
}

.hk-purchase-choice-radio{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.hk-purchase-choice-content{
    display:flex;
    flex-direction:column;
    height:100%;
    min-height:245px;
    padding:22px;
    border:2px solid #e3e7ef;
    border-radius:16px;
    background:#fff;
    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

.hk-purchase-choice:hover .hk-purchase-choice-content{
    border-color:#abb1df;
    transform:translateY(-1px);
}

.hk-purchase-choice-radio:checked
+ .hk-purchase-choice-content{
    border-color:#394395;
    box-shadow:
        0 0 0 3px rgba(57,67,149,.10);
}

.hk-purchase-choice-header{
    display:flex;
    align-items:flex-start;
    gap:14px;
}

.hk-purchase-choice-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 48px;
    width:48px;
    height:48px;
    border-radius:12px;
    background:#eef0ff;
    color:#394395;
    font-size:1.25rem;
}

.hk-purchase-choice-header > span:last-child{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.hk-purchase-choice-header strong{
    color:#1e2432;
    font-size:1.05rem;
}

.hk-purchase-choice-header small{
    color:#687386;
    line-height:1.5;
}

.hk-purchase-choice-description{
    display:flex;
    flex-direction:column;
    gap:7px;
    margin-top:20px;
    padding:14px 16px;
    border-radius:12px;
    background:#f7f8fa;
    color:#5c6678;
    line-height:1.5;
    font-size:.88rem;
}

.hk-purchase-choice-description strong{
    color:#323a4a;
}

.hk-purchase-choice-description--recommended{
    background:#fff8e5;
}

.hk-purchase-choice-description--recommended strong{
    color:#9b6d00;
}



/* =========================================================
   Dynamic configuration
   ========================================================= */

.hk-purchase-configuration{
    display:none;
    margin-top:24px;
}

.hk-qr-help{
    display:flex;
    gap:12px;
    padding:14px 16px;
    border-radius:12px;
    background:#f4f5ff;
    color:#394395;
}

.hk-qr-help > div{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.hk-qr-help span{
    color:#667085;
    line-height:1.45;
}

.hk-qr-input-group{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.hk-qr-raw-input{
    min-height:95px;
    resize:vertical;
}

.hk-qr-input-actions{
    display:flex;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:10px;
}

.hk-qr-structure-result{
    margin-top:28px;
    padding-top:24px;
    border-top:1px solid #e3e7ef;
}

.hk-subsection-header h3{
    margin:0 0 4px;
    font-size:1.05rem;
    font-weight:700;
}

.hk-subsection-header p{
    margin:0 0 18px;
    color:#8492a6;
}

.hk-qr-structure-rows{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.hk-qr-structure-row{
    display:grid;
    grid-template-columns:
        minmax(0,1fr)
        minmax(220px,320px);
    align-items:center;
    gap:20px;
    padding:12px 14px;
    border:1px solid #e6e9ef;
    border-radius:10px;
    background:#fafbfc;
}

.hk-qr-segment{
    min-width:0;
}

.hk-qr-segment small{
    display:block;
    margin-bottom:4px;
    color:#98a2b3;
    text-transform:uppercase;
    font-size:.68rem;
    font-weight:700;
}

.hk-qr-segment strong{
    display:block;
    overflow-wrap:anywhere;
    color:#1e2432;
}

.hk-qr-segment-empty{
    color:#98a2b3!important;
    font-weight:400!important;
}



/* =========================================================
   Manual
   ========================================================= */

.hk-manual-flow-info,
.hk-manual-warning{
    display:flex;
    gap:14px;
    margin-top:24px;
    padding:16px 18px;
    border-radius:12px;
}

.hk-manual-flow-info{
    background:#f4f5ff;
}

.hk-manual-flow-icon{
    color:#394395;
    font-size:1.2rem;
}

.hk-manual-flow-info strong,
.hk-manual-warning strong{
    display:block;
    margin-bottom:5px;
}

.hk-manual-flow-info p{
    margin:0;
    color:#667085;
    line-height:1.5;
}

.hk-manual-warning{
    border:1px solid #f3d887;
    background:#fff9e9;
    color:#785900;
}

.hk-manual-warning > div{
    display:flex;
    flex-direction:column;
    gap:5px;
}

.hk-manual-warning span{
    line-height:1.45;
}



/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 768px){

    .hk-store-steps{
        grid-template-columns:1fr;
    }

    .hk-store-step + .hk-store-step{
        border-left:0;
        border-top:1px solid #e3e7ef;
    }

    .hk-purchase-choice-content{
        min-height:auto;
    }

    .hk-qr-structure-row{
        grid-template-columns:1fr;
        gap:10px;
    }

    .hk-qr-input-actions{
        justify-content:stretch;
    }

    .hk-qr-input-actions .hk-btn{
        flex:1;
    }

}


/* =========================================================
   STORE LIMIT
   ========================================================= */

.hk-store-limit-warning{
    display:flex;
    align-items:center;
    gap:16px;

    margin-bottom:24px;
    padding:18px 20px;

    border:1px solid #f1c36a;
    border-radius:14px;

    background:#fff8e7;
}

.hk-store-limit-warning-icon{
    display:flex;
    align-items:center;
    justify-content:center;

    flex:0 0 48px;
    width:48px;
    height:48px;

    border-radius:12px;

    background:#ffe9b5;
    color:#9b6900;

    font-size:1.2rem;
}

.hk-store-limit-warning-content{
    flex:1;
}

.hk-store-limit-warning-content strong{
    display:block;

    margin-bottom:5px;

    color:#6f4c00;
}

.hk-store-limit-warning-content p{
    margin-bottom:5px;

    color:#735f32;
    line-height:1.45;
}

.hk-btn--whatsapp{
    flex-shrink:0;

    background:#25d366;
    border-color:#25d366;
    color:#fff;
}

.hk-btn--whatsapp:hover{
    background:#1fb85a;
    border-color:#1fb85a;
    color:#fff;
}


/* Formulario bloqueado */

.hk-store-form-disabled{
    opacity:.55;
}

.hk-store-form-disabled input,
.hk-store-form-disabled select,
.hk-store-form-disabled textarea{
    cursor:not-allowed;
}


@media (max-width: 768px){

    .hk-store-limit-warning{
        align-items:flex-start;
        flex-wrap:wrap;
    }

    .hk-store-limit-warning-content{
        flex:1 1 calc(100% - 70px);
    }

    .hk-store-limit-warning .hk-btn{
        width:100%;
    }

}



/* =========================================================
   SETUP HELP
   ========================================================= */

.hk-setup-help{
    display:flex;
    align-items:center;
    gap:14px;

    margin-bottom:24px;
    padding:16px 18px;

    border:1px solid #d9ddf7;
    border-radius:14px;

    background:#f5f6ff;
}

.hk-setup-help-icon{
    display:flex;
    align-items:center;
    justify-content:center;

    flex:0 0 42px;
    width:42px;
    height:42px;

    border-radius:11px;

    background:#e7e9ff;
    color:#394395;
}

.hk-setup-help-content{
    display:flex;
    flex:1;
    flex-direction:column;

    gap:4px;
}

.hk-setup-help-content strong{
    color:#292f62;
}

.hk-setup-help-content span{
    color:#667085;

    font-size:.88rem;
    line-height:1.45;
}

.hk-setup-help-whatsapp{
    flex-shrink:0;
}


@media (max-width: 768px){

    .hk-setup-help{
        align-items:flex-start;
        flex-wrap:wrap;
    }

    .hk-setup-help-content{
        flex:1 1 calc(100% - 60px);
    }

    .hk-setup-help-whatsapp{
        width:100%;
    }

}


.hk-purchase-mode-card{
    display:block;
    position:relative;
    height:100%;
    padding:1.5rem;
    border:1px solid #d9deea;
    border-radius:24px;
    background:#fff;
    cursor:pointer;
    transition:all .2s ease;
}

.hk-purchase-mode-card:hover{
    border-color:#6d74d6;
    box-shadow:0 10px 30px rgba(57,67,149,.08);
}

.hk-purchase-mode-card.is-selected{
    border:2px solid #394395;
    box-shadow:0 12px 32px rgba(57,67,149,.12);
}

.hk-purchase-mode-input{
    position:absolute;
    top:18px;
    right:18px;
    width:20px;
    height:20px;
}

.hk-purchase-mode-top{
    display:flex;
    gap:1rem;
    align-items:flex-start;
    margin-bottom:1.25rem;
}

.hk-purchase-mode-icon{
    width:56px;
    height:56px;
    border-radius:16px;
    background:#eef0ff;
    color:#394395;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.35rem;
    flex-shrink:0;
}

.hk-purchase-mode-copy h3{
    margin:0 0 .35rem;
    font-size:1.65rem;
    font-weight:700;
    color:#19233c;
}

.hk-purchase-mode-copy p{
    margin:0;
    color:#667089;
    line-height:1.5;
}

.hk-receipt-preview{
    margin:1.25rem 0;
    padding:1.25rem;
    border-radius:20px;
    background:#f7f8fc;
    display:flex;
    justify-content:center;
    align-items:center;
}

.hk-receipt-preview-paper{
    width:220px;
    min-height:240px;
    background:#fff;
    border:1px dashed #cfd6e6;
    border-radius:12px;
    padding:1rem;
    box-shadow:0 10px 24px rgba(20, 29, 58, .06);
}

.hk-receipt-preview-header{
    height:18px;
    width:65%;
    margin:0 auto 1rem;
    border-radius:999px;
    background:#dfe4f3;
}

.hk-receipt-preview-lines{
    display:flex;
    flex-direction:column;
    gap:.55rem;
    margin-bottom:1rem;
}

.hk-receipt-preview-lines span{
    height:10px;
    border-radius:999px;
    background:#e8ecf7;
}

.hk-receipt-preview-lines span:nth-child(1){ width:100%; }
.hk-receipt-preview-lines span:nth-child(2){ width:85%; }
.hk-receipt-preview-lines span:nth-child(3){ width:92%; }
.hk-receipt-preview-lines span:nth-child(4){ width:70%; }

.hk-receipt-preview-footer{
    display:flex;
    justify-content:center;
    margin-top:1rem;
}

.hk-receipt-preview-qr{
    width:72px;
    height:72px;
    border-radius:8px;
    background:
        linear-gradient(90deg,#1d2540 25%,transparent 25%,transparent 50%,#1d2540 50%,#1d2540 75%,transparent 75%),
        linear-gradient(#1d2540 25%,transparent 25%,transparent 50%,#1d2540 50%,#1d2540 75%,transparent 75%);
    background-size:18px 18px;
    background-color:#fff;
    border:6px solid #1d2540;
}

.hk-receipt-preview-manual-fields{
    margin-top:1rem;
    display:flex;
    flex-direction:column;
    gap:.65rem;
}

.hk-mini-input{
    height:16px;
    border-radius:8px;
    background:#e0e7ff;
}

.hk-mini-input--short{
    width:55%;
}

.hk-purchase-mode-note{
    border-radius:18px;
    padding:1.25rem;
}

.hk-purchase-mode-note h4{
    margin:0 0 .75rem;
    font-size:1.05rem;
    font-weight:700;
}

.hk-purchase-mode-note p{
    color:#4d5875;
    line-height:1.55;
}

.hk-purchase-mode-note--recommended{
    background:#fff8e6;
    color:#9b6a00;
}

.hk-purchase-mode-note--neutral{
    background:#f7f8fc;
}

.hk-support-box{
    display:flex;
    gap:1rem;
    align-items:center;
    justify-content:space-between;
    padding:1.5rem;
    border:1px solid #d7deef;
    border-radius:24px;
    background:#f8faff;
}

.hk-support-box-icon{
    width:56px;
    height:56px;
    border-radius:16px;
    background:#eef0ff;
    color:#394395;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.35rem;
    flex-shrink:0;
}

.hk-support-box-content{
    flex:1;
}

.hk-support-box-content h3{
    margin:0 0 .35rem;
    font-size:1.2rem;
    font-weight:700;
    color:#19233c;
}

.hk-support-box-content p{
    margin:0;
    color:#667089;
}

@media (max-width: 768px){
    .hk-support-box{
        flex-direction:column;
        align-items:flex-start;
    }

    .hk-receipt-preview-paper{
        width:100%;
        max-width:220px;
    }
}









/*
    |--------------------------------------------------------------------------
    | Tarjetas de selección
    |--------------------------------------------------------------------------
    */

    .hk-purchase-choice {
        position: relative;
        display: block;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;

        background: #ffffff;

        border: 2px solid #e0e4ee;
        border-radius: 20px;

        cursor: pointer;

        transition:
            border-color .18s ease,
            box-shadow .18s ease,
            transform .18s ease;
    }


    .hk-purchase-choice:hover {
        border-color: #a9afe5;

        box-shadow:
            0 10px 26px
            rgba(57, 67, 149, .08);
    }


    .hk-purchase-choice.is-selected {
        border-color: #394395;

        box-shadow:
            0 0 0 3px
            rgba(57, 67, 149, .08),
            0 12px 30px
            rgba(57, 67, 149, .10);
    }


    .hk-purchase-choice-radio {
        position: absolute;

        width: 1px;
        height: 1px;

        opacity: 0;

        pointer-events: none;
    }


    .hk-purchase-choice-content {
        display: flex;
        flex-direction: column;
        height: 100%;

        padding: 1.5rem;
    }


    /*
    |--------------------------------------------------------------------------
    | Cabecera
    |--------------------------------------------------------------------------
    */

    .hk-purchase-choice-header {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
    }


    .hk-purchase-choice-icon {
        display: flex;
        flex: 0 0 56px;
        align-items: center;
        justify-content: center;

        width: 56px;
        height: 56px;

        color: #394395;
        background: #eef0ff;

        border-radius: 16px;

        font-size: 1.35rem;
    }


    .hk-purchase-choice-header > span:last-child {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }


    .hk-purchase-choice-header strong {
        margin-bottom: .35rem;

        color: #172039;

        font-size: 1.1rem;
        font-weight: 700;
        line-height: 1.3;
    }


    .hk-purchase-choice-header small {
        color: #667089;

        font-size: .9rem;
        line-height: 1.45;
    }


    /*
    |--------------------------------------------------------------------------
    | Check de selección
    |--------------------------------------------------------------------------
    */

    .hk-purchase-choice-selected {
        position: absolute;
        z-index: 3;
        top: 14px;
        right: 14px;

        display: none;
        align-items: center;
        justify-content: center;

        width: 28px;
        height: 28px;

        color: #ffffff;
        background: #394395;

        border-radius: 50%;

        font-size: .75rem;
    }


    .hk-purchase-choice.is-selected
    .hk-purchase-choice-selected {
        display: flex;
    }




    /*
    |--------------------------------------------------------------------------
    | Descripción de cada modalidad
    |--------------------------------------------------------------------------
    */

	.hk-purchase-choice-video {
		display: flex;
		justify-content: flex-start;
		margin-top: 1rem;
	}

	.hk-purchase-choice-video .hk-btn {
		width: auto;
	}

    .hk-purchase-choice-description {
        display: flex;
        flex-direction: column;
        gap: .65rem;

        margin-top: auto;
        padding: 1.15rem;

        color: #4f5870;
        background: #f7f8fb;

        border-radius: 16px;

        font-size: .9rem;
        line-height: 1.5;
    }


    .hk-purchase-choice-description strong {
        color: #19233c;

        font-size: .95rem;
        font-weight: 700;
    }


    .hk-purchase-choice-description--recommended {
        color: #62541e;
        background: #fff7df;
    }


    .hk-purchase-choice-description--recommended strong {
        color: #9a6800;
    }


    /*
    |--------------------------------------------------------------------------
    | Paneles QR / Manual
    |--------------------------------------------------------------------------
    */

    .hk-purchase-configuration {
        margin-top: 1.5rem;
    }


    .hk-purchase-configuration[hidden] {
        display: none !important;
    }


    /*
    |--------------------------------------------------------------------------
    | Segmentos encontrados en QR
    |--------------------------------------------------------------------------
    */

    .hk-qr-structure-row {
        display: grid;
        grid-template-columns:
            minmax(0, 1fr)
            minmax(240px, .8fr);

        align-items: center;
        gap: 1rem;

        padding: .9rem 0;

        border-bottom:
            1px solid #edf0f5;
    }


    .hk-qr-structure-row:last-child {
        border-bottom: 0;
    }


    .hk-qr-segment {
        min-width: 0;
    }


    .hk-qr-segment-position {
        display: block;

        margin-bottom: .3rem;

        color: #9198aa;

        font-size: .72rem;
        font-weight: 700;

        text-transform: uppercase;
        letter-spacing: .04em;
    }


    .hk-qr-segment-value {
        display: block;

        overflow-wrap: anywhere;

        color: #172039;

        font-size: .95rem;
        font-weight: 600;
    }


    .hk-qr-segment-value--empty {
        color: #9da4b5;

        font-style: italic;
        font-weight: 500;
    }


    /*
    |--------------------------------------------------------------------------
    | Responsive Segmentos encontrados en QR
    |--------------------------------------------------------------------------
    */

    @media (max-width: 767.98px) {

        .hk-purchase-choice-content {
            padding: 1.15rem;
        }



        .hk-qr-structure-row {
            grid-template-columns: 1fr;
            gap: .65rem;
        }

    }



	.hk-manual-warning {
    display: flex;
    align-items: flex-start;
    gap: 1rem;

    height: auto;
    min-height: 0;

    margin-top: 1.5rem;
    padding: 1.25rem;

    color: #805b00;
    background: #fff8e6;

    border: 1px solid #f1c75b;
    border-radius: 16px;
}

.hk-manual-warning > div {
    display: flex;
    flex-direction: column;
    gap: .6rem;

    min-width: 0;
}

.hk-manual-warning span {
    display: block;

    line-height: 1.5;
}

.hk-manual-acceptance {
    margin-top: 1rem;
    padding: 1rem 1.1rem;

    background: #f7f8fb;

    border: 1px solid #e2e5ed;
    border-radius: 14px;
}

.hk-manual-acceptance .form-check-label {
    color: #343c51;

    font-size: .9rem;
    line-height: 1.5;
    cursor: pointer;
}


/* ============================================================
   AGREGAR PUNTOS
   ============================================================ */

.hk-assigned-point-page {
    width: 100%;
    padding: 24px 28px 40px;
}


/* ------------------------------------------------------------
   Encabezado
   ------------------------------------------------------------ */

.hk-assigned-point-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 24px;
}

.hk-assigned-point-eyebrow {
    margin-bottom: 7px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    color: #3f46a5;
}

.hk-assigned-point-title {
    margin: 0;
    font-size: 30px;
    font-weight: 800;
    color: #101b3d;
}

.hk-assigned-point-subtitle {
    max-width: 720px;
    margin: 8px 0 0;
    font-size: 15px;
    line-height: 1.55;
    color: #65708a;
}

.hk-assigned-point-header-actions {
    flex-shrink: 0;
}


/* ------------------------------------------------------------
   Tutorial
   ------------------------------------------------------------ */

.hk-tutorial-button {
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid #dce1ec;
    border-radius: 10px;
    background: #ffffff;
    color: #a5adbd;
    font-size: 14px;
    font-weight: 700;
}

.hk-tutorial-button i {
    margin-right: 7px;
}


/* ------------------------------------------------------------
   Alertas
   ------------------------------------------------------------ */

.hk-assigned-alert {
    display: flex;
    align-items: flex-start;
    margin-bottom: 18px;
    border-radius: 10px;
}


/* ------------------------------------------------------------
   Card principal
   ------------------------------------------------------------ */

.hk-assigned-operation-card {
    width: 100%;
    max-width: 1080px;
    margin: 24px auto 0;
    overflow: hidden;
    border: 1px solid #dde2ec;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 2px 5px rgba(15, 29, 61, .03);
}

.hk-assigned-operation-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    border-bottom: 1px solid #e2e6ef;
}

.hk-assigned-operation-card-header h2 {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 800;
    color: #101b3d;
}

.hk-assigned-operation-card-header p {
    margin: 0;
    font-size: 12px;
    color: #71809e;
}

.hk-assigned-operation-icon {
    display: flex;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: #eef0ff;
    color: #3f46a5;
    font-size: 17px;
}


/* ------------------------------------------------------------
   Dos alternativas
   ------------------------------------------------------------ */

.hk-assigned-identification-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr);
    min-height: 350px;
    padding: 22px 32px;
}

.hk-assigned-identification-option {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.hk-assigned-identification-visual {
    width: 100%;
    max-width: 430px;
    text-align: center;
}

.hk-assigned-identification-visual h3 {
    margin: 12px 0 7px;
    color: #111a36;
    font-size: 20px;
    font-weight: 800;
}

.hk-assigned-identification-visual > p {
    min-height: 42px;
    margin: 0 auto 22px;
    color: #74809a;
    font-size: 13px;
    line-height: 1.55;
}


/* ------------------------------------------------------------
   QR
   ------------------------------------------------------------ */

.hk-assigned-qr-icon {
    display: flex;
    width: 70px;
    height: 70px;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: #eef0ff;
    color: #3f46a5;
    font-size: 29px;
}


/* ------------------------------------------------------------
   Etiqueta manual
   ------------------------------------------------------------ */

.hk-assigned-option-label {
    color: #3f46a5;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .07em;
}


/* ------------------------------------------------------------
   Divisor
   ------------------------------------------------------------ */

.hk-assigned-option-divider {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hk-assigned-option-divider::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    content: "";
    background: #dfe3ec;
}

.hk-assigned-option-divider span {
    position: relative;
    z-index: 1;
    display: flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border: 1px solid #d9deea;
    border-radius: 50%;
    background: #ffffff;
    color: #8994ab;
    font-size: 12px;
}


/* ------------------------------------------------------------
   Token 7 casillas
   ------------------------------------------------------------ */

.hk-point-token-boxes {
    display: grid;
    grid-template-columns: repeat(7, minmax(38px, 56px));
    justify-content: center;
    gap: 9px;
    width: 100%;
    margin: 5px auto 17px;
}

.hk-point-token-digit {
    width: 100%;
    height: 58px;
    border: 1px solid #cbd2e1;
    border-radius: 10px;
    background: #ffffff;
    color: #111a36;
    text-align: center;
    font-size: 25px;
    font-weight: 700;
    outline: none;
    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}

.hk-point-token-digit:focus {
    border-color: #3f46a5;
    box-shadow: 0 0 0 3px rgba(63, 70, 165, .11);
}


/* ------------------------------------------------------------
   Botón principal
   ------------------------------------------------------------ */

.hk-assigned-primary-button {
    display: inline-flex;
    min-width: 185px;
    min-height: 44px;
    padding: 10px 20px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 8px;
    background: #3f46a5;
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    transition:
        transform .15s ease,
        opacity .15s ease;
}

.hk-assigned-primary-button:hover {
    color: #ffffff;
    opacity: .94;
}

.hk-assigned-primary-button:active {
    transform: translateY(1px);
}

.hk-assigned-validate-button {
    margin-top: 2px;
}


/* ------------------------------------------------------------
   Texto ayuda
   ------------------------------------------------------------ */

.hk-assigned-help-text {
    display: block;
    margin-top: 14px;
    color: #929bb0;
    font-size: 11px;
}

.hk-assigned-help-text i {
    margin-right: 4px;
}


/* ------------------------------------------------------------
   Advertencia 6 dígitos
   ------------------------------------------------------------ */

.hk-point-token-warning {
    display: flex;
    max-width: 440px;
    margin: 0 auto 16px;
    padding: 12px 14px;
    align-items: flex-start;
    gap: 11px;
    border: 1px solid #f0cf84;
    border-radius: 9px;
    background: #fff9ea;
    text-align: left;
}

.hk-point-token-warning-icon {
    display: flex;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #fff0bf;
    color: #8b6200;
}

.hk-point-token-warning strong {
    display: block;
    margin-bottom: 3px;
    color: #725300;
    font-size: 12px;
}

.hk-point-token-warning span {
    display: block;
    color: #826d34;
    font-size: 11px;
    line-height: 1.45;
}


/* ------------------------------------------------------------
   Error local
   ------------------------------------------------------------ */

.hk-point-token-local-error {
    max-width: 440px;
    margin: 0 auto 14px;
    color: #b42318;
    font-size: 12px;
}

.hk-point-token-local-error i {
    margin-right: 5px;
}


/* ------------------------------------------------------------
   Información inferior
   ------------------------------------------------------------ */

.hk-assigned-info-card {
    width: 100%;
    max-width: 1080px;
    margin: 18px auto 0;
    padding: 14px 20px;
    border: 1px solid #dde2ec;
    border-radius: 11px;
    background: #ffffff;
}

.hk-assigned-info-card strong {
    display: block;
    margin-bottom: 4px;
    color: #101b3d;
    font-size: 12px;
}

.hk-assigned-info-card p {
    margin: 0;
    color: #7a859d;
    font-size: 11px;
    line-height: 1.5;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 991.98px) {

    .hk-assigned-point-page {
        padding: 20px 18px 32px;
    }

    .hk-assigned-identification-grid {
        padding-left: 20px;
        padding-right: 20px;
    }

}


@media (max-width: 767.98px) {

    .hk-assigned-point-header {
        flex-direction: column;
        gap: 14px;
    }

    .hk-assigned-point-header-actions {
        width: 100%;
    }

    .hk-tutorial-button {
        width: 100%;
    }

    .hk-assigned-point-title {
        font-size: 26px;
    }

    .hk-assigned-identification-grid {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 24px 20px;
    }

    .hk-assigned-identification-option {
        padding: 20px 0;
    }

    .hk-assigned-option-divider {
        height: 50px;
    }

    .hk-assigned-option-divider::before {
        top: 50%;
        right: 0;
        bottom: auto;
        left: 0;
        width: auto;
        height: 1px;
    }

    .hk-assigned-option-divider span {
        background: #ffffff;
    }

}


@media (max-width: 575.98px) {

    .hk-assigned-point-page {
        padding: 16px 12px 28px;
    }

    .hk-assigned-operation-card-header {
        padding: 16px;
    }

    .hk-assigned-identification-grid {
        padding: 16px 14px;
    }

    .hk-point-token-boxes {
        grid-template-columns: repeat(7, minmax(30px, 44px));
        gap: 5px;
    }

    .hk-point-token-digit {
        height: 50px;
        border-radius: 8px;
        font-size: 21px;
    }

    .hk-assigned-primary-button {
        width: 100%;
        min-width: 0;
    }

    .hk-assigned-info-card {
        padding: 14px 16px;
    }

}


/* ============================================================
   IDENTIDAD - AGREGAR PUNTOS
   ============================================================ */

.hk-assigned-operation-card--points {
    border-top:
        4px solid
        #394395;
}


.hk-assigned-operation-card--points
.hk-assigned-operation-card-header {
    background:
        linear-gradient(
            90deg,
            rgba(57, 67, 149, .055) 0%,
            rgba(57, 67, 149, .015) 55%,
            #ffffff 100%
        );
}


.hk-assigned-operation-card--points
.hk-assigned-operation-icon {
    color: #394395;
    background-color: #eef0ff;
}




/* ============================================================
   AGREGAR PUNTOS - PASO 2
   ============================================================ */

.hk-assigned-purchase-user {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 22px 0;
    padding: 12px 14px;
    background: #f8f9fc;
    border: 1px solid #e6e8f0;
    border-radius: 10px;
}

.hk-assigned-purchase-avatar {
    display: flex;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #394395;
    background: #eef0ff;
    border-radius: 50%;
}

.hk-assigned-purchase-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hk-assigned-purchase-user > div:last-child {
    display: flex;
    flex-direction: column;
}

.hk-assigned-purchase-user span {
    color: #8a93a8;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.hk-assigned-purchase-user strong {
    margin-top: 3px;
    color: #101b3d;
    font-size: 15px;
}


/* Método actual */

.hk-assigned-current-mode {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin: 18px 22px 0;
    padding: 11px 14px;
    background: #f5f6ff;
    border: 1px solid #dfe2f7;
    border-radius: 10px;
}

.hk-assigned-current-mode > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hk-assigned-current-mode-icon {
    display: flex;
    width: 37px;
    height: 37px;
    align-items: center;
    justify-content: center;
    color: #394395;
    background: #e8eaff;
    border-radius: 9px;
}

.hk-assigned-current-mode small,
.hk-assigned-current-mode strong {
    display: block;
}

.hk-assigned-current-mode small {
    margin-bottom: 2px;
    color: #8a93a8;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
}

.hk-assigned-current-mode strong {
    color: #283063;
    font-size: 11px;
}

.hk-assigned-change-mode {
    padding: 7px 10px;
    color: #394395;
    background: transparent;
    border: 0;
    font-size: 10px;
    font-weight: 800;
}


/* Selector */

.hk-assigned-purchase-mode-section {
    padding: 28px 22px;
}

.hk-assigned-purchase-mode-title {
    margin-bottom: 18px;
    text-align: center;
}

.hk-assigned-purchase-mode-title > span,
.hk-assigned-purchase-panel-heading span {
    color: #394395;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
}

.hk-assigned-purchase-mode-title h3,
.hk-assigned-purchase-panel-heading h3 {
    margin: 5px 0;
    color: #101b3d;
    font-size: 19px;
    font-weight: 800;
}

.hk-assigned-purchase-mode-title p,
.hk-assigned-purchase-panel-heading p {
    margin: 0;
    color: #74809a;
    font-size: 11px;
    line-height: 1.5;
}

.hk-assigned-purchase-mode-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    max-width: 820px;
    margin: 0 auto;
}

.hk-assigned-purchase-mode {
    position: relative;
    display: flex;
    min-height: 150px;
    align-items: flex-start;
    gap: 13px;
    padding: 19px;
    cursor: pointer;
    background: #fff;
    border: 2px solid #e2e5ed;
    border-radius: 14px;
    transition: .15s ease;
}

.hk-assigned-purchase-mode:hover {
    border-color: #adb2dd;
}

.hk-assigned-purchase-mode.is-selected {
    border-color: #394395;
    box-shadow: 0 0 0 3px rgba(57,67,149,.08);
}

.hk-assigned-purchase-mode input {
    position: absolute;
    opacity: 0;
}

.hk-assigned-purchase-mode-icon {
    display: flex;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    color: #394395;
    background: #eef0ff;
    border-radius: 12px;
    font-size: 19px;
}

.hk-assigned-purchase-mode-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.hk-assigned-purchase-mode-copy strong {
    margin-bottom: 5px;
    color: #172039;
    font-size: 13px;
    font-weight: 800;
}

.hk-assigned-purchase-mode-copy small {
    color: #737d94;
    font-size: 10px;
    line-height: 1.5;
}

.hk-assigned-purchase-mode-check {
    position: absolute;
    top: 12px;
    right: 12px;
    display: none;
    width: 25px;
    height: 25px;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: #394395;
    border-radius: 50%;
    font-size: 9px;
}

.hk-assigned-purchase-mode.is-selected
.hk-assigned-purchase-mode-check {
    display: flex;
}

.hk-assigned-purchase-recommended {
    position: absolute;
    right: 14px;
    bottom: 12px;
    color: #8a6500;
    font-size: 8px;
    font-weight: 800;
}


/* Panel */

.hk-assigned-purchase-panel {
    margin: 18px 22px 22px;
    padding: 22px;
    background: #fff;
    border: 1px solid #e1e4ed;
    border-radius: 12px;
}

.hk-assigned-purchase-panel-heading {
    margin-bottom: 20px;
}


/* QR */

.hk-assigned-purchase-qr-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 28px;
    align-items: center;
}

.hk-assigned-purchase-qr-visual {
    text-align: center;
}

.hk-assigned-purchase-big-icon {
    display: flex;
    width: 95px;
    height: 95px;
    align-items: center;
    justify-content: center;
    margin: 0 auto 17px;
    color: #394395;
    background: #eef0ff;
    border-radius: 22px;
    font-size: 40px;
}

.hk-assigned-purchase-qr-input {
    min-height: 95px;
    resize: vertical;
}


/* Acciones */

.hk-assigned-purchase-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 17px;
}


/* Última serie */

.hk-manual-series-reference {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    padding: 13px 15px;
    background: #f5f6ff;
    border: 1px solid #dfe2f7;
    border-radius: 10px;
}

.hk-manual-series-reference-icon {
    display: flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    color: #394395;
    background: #e8eaff;
    border-radius: 9px;
}

.hk-manual-series-reference > div:last-child {
    display: flex;
    flex-direction: column;
}

.hk-manual-series-reference span {
    color: #7d879d;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
}

.hk-manual-series-reference strong {
    margin: 3px 0;
    color: #202853;
    font-size: 13px;
}

.hk-manual-series-reference small {
    color: #727d94;
    font-size: 9px;
}

.hk-manual-series-feedback {
    margin-top: 9px;
    color: #667085;
    font-size: 9px;
}

.hk-manual-series-feedback.is-error {
    color: #b42318;
}

.hk-assigned-purchase-manual-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 14px;
    padding: 10px 12px;
    color: #6c768c;
    background: #f9fafb;
    border-radius: 8px;
    font-size: 9px;
    line-height: 1.5;
}


/* Responsive */

@media (max-width: 767.98px) {

    .hk-assigned-purchase-mode-grid {
        grid-template-columns: 1fr;
    }

    .hk-assigned-purchase-qr-layout {
        grid-template-columns: 1fr;
    }

    .hk-assigned-current-mode {
        align-items: flex-start;
        flex-direction: column;
    }

    .hk-assigned-change-mode {
        padding-left: 0;
    }

    .hk-assigned-purchase-panel {
        margin-right: 14px;
        margin-left: 14px;
        padding: 17px;
    }

    .hk-assigned-purchase-actions
    .hk-assigned-primary-button {
        width: 100%;
    }

}





/* ============================================================
   AGREGAR PUNTOS - PASO 3
   ============================================================ */

.hk-assigned-review-section {
    margin: 20px 22px 0;
    padding: 20px;
    border: 1px solid #e1e4ed;
    border-radius: 12px;
    background: #fff;
}

.hk-assigned-review-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 17px;
}

.hk-assigned-review-heading span,
.hk-assigned-loyalty-heading > span {
    color: #394395;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .07em;
}

.hk-assigned-review-heading h3,
.hk-assigned-loyalty-heading h3 {
    margin: 4px 0 0;
    color: #101b3d;
    font-size: 18px;
    font-weight: 800;
}

.hk-assigned-review-correct {
    flex-shrink: 0;
    color: #394395;
    font-size: 10px;
    font-weight: 800;
    text-decoration: none;
}

.hk-assigned-review-correct i {
    margin-right: 5px;
}

.hk-assigned-review-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(0, 1fr)
        minmax(0, .9fr);
    gap: 12px;
}

.hk-assigned-review-item {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 11px;
    padding: 15px;
    border: 1px solid #e5e7ee;
    border-radius: 10px;
    background: #f9fafc;
}

.hk-assigned-review-icon {
    display: flex;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #eef0ff;
    color: #394395;
}

.hk-assigned-review-item > div:last-child {
    min-width: 0;
}

.hk-assigned-review-item span,
.hk-assigned-review-item strong,
.hk-assigned-review-item small {
    display: block;
}

.hk-assigned-review-item span {
    margin-bottom: 3px;
    color: #8992a6;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
}

.hk-assigned-review-item strong {
    overflow: hidden;
    color: #172039;
    font-size: 13px;
    font-weight: 800;
    text-overflow: ellipsis;
}

.hk-assigned-review-item small {
    margin-top: 3px;
    color: #8c95a7;
    font-size: 8px;
}

.hk-assigned-review-item--amount {
    border-color: #ccd0ef;
    background: #f5f6ff;
}

.hk-assigned-review-item--amount strong {
    color: #303a94;
    font-size: 23px;
}

.hk-assigned-review-warning {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-top: 12px;
    padding: 9px 11px;
    border-radius: 8px;
    background: #fff9e9;
    color: #765f25;
    font-size: 9px;
    line-height: 1.5;
}


/* Fidelizaciones */

.hk-assigned-loyalty-section {
    padding: 28px 22px 24px;
}

.hk-assigned-loyalty-heading {
    margin-bottom: 18px;
}

.hk-assigned-loyalty-heading p {
    margin: 5px 0 0;
    color: #74809a;
    font-size: 10px;
}

.hk-assigned-loyalty-grid {
    display: grid;
    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );
    gap: 15px;
}

.hk-assigned-loyalty-card {
    position: relative;
    overflow: hidden;
    border: 2px solid #e2e5ed;
    border-radius: 13px;
    background: #fff;
    transition:
        border-color .15s ease,
        box-shadow .15s ease,
        transform .15s ease;
}

.hk-assigned-loyalty-card:hover {
    border-color: #b9bee1;
}

.hk-assigned-loyalty-card.is-selected {
    border-color: #394395;
    box-shadow:
        0 0 0 3px
        rgba(57, 67, 149, .08);
}

.hk-assigned-loyalty-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.hk-assigned-loyalty-select-area {
    cursor: pointer;
}

.hk-assigned-loyalty-image {
    position: relative;
    width: 100%;
    height: 145px;
    overflow: hidden;
    background: #f1f2f6;
}

.hk-assigned-loyalty-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hk-assigned-loyalty-selected {
    position: absolute;
    top: 10px;
    right: 10px;
    display: none;
    width: 29px;
    height: 29px;
    align-items: center;
    justify-content: center;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #394395;
    color: #fff;
    font-size: 10px;
}

.hk-assigned-loyalty-card.is-selected
.hk-assigned-loyalty-selected {
    display: flex;
}

.hk-assigned-loyalty-content {
    min-height: 105px;
    padding: 14px;
}

.hk-assigned-loyalty-content strong {
    display: block;
    margin-bottom: 7px;
    color: #172039;
    font-size: 13px;
    font-weight: 800;
}

.hk-assigned-loyalty-content p {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: #727c92;
    font-size: 9px;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.hk-assigned-loyalty-actions {
    padding: 0 14px 14px;
}

.hk-assigned-loyalty-info {
    width: 100%;
    padding: 7px;
    border: 0;
    border-radius: 7px;
    background: #f2f3f8;
    color: #505b74;
    font-size: 9px;
    font-weight: 800;
}

.hk-assigned-loyalty-error {
    margin-top: 13px;
    color: #b42318;
    font-size: 10px;
}

.hk-assigned-loyalty-submit {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}


/* Modal */

.hk-assigned-loyalty-modal {
    overflow: hidden;
    border: 0;
    border-radius: 14px;
}

.hk-assigned-loyalty-modal .modal-header {
    border-top: 4px solid #394395;
}

.hk-assigned-loyalty-modal .modal-header small {
    display: block;
    margin-bottom: 3px;
    color: #394395;
    font-size: 8px;
    font-weight: 800;
}

.hk-assigned-loyalty-modal-image {
    height: 240px;
    overflow: hidden;
    border-radius: 10px;
}

.hk-assigned-loyalty-modal-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hk-assigned-loyalty-modal-description {
    margin-top: 17px;
}

.hk-assigned-loyalty-modal-description span {
    color: #8a93a5;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
}

.hk-assigned-loyalty-modal-description p {
    margin: 5px 0 0;
    color: #59647b;
    font-size: 11px;
    line-height: 1.6;
}

.hk-assigned-empty-loyalty {
    padding: 38px 20px;
    text-align: center;
}

.hk-assigned-empty-loyalty > div {
    display: flex;
    width: 55px;
    height: 55px;
    margin: 0 auto 12px;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #f0f1f7;
    color: #8b93a5;
}

.hk-assigned-empty-loyalty strong {
    display: block;
    color: #172039;
}

.hk-assigned-empty-loyalty p {
    margin: 5px 0 0;
    color: #7b8498;
    font-size: 10px;
}


/* Responsive */

@media (max-width: 991.98px) {

    .hk-assigned-loyalty-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .hk-assigned-review-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .hk-assigned-review-item--amount {
        grid-column: 1 / -1;
    }

}


@media (max-width: 575.98px) {

    .hk-assigned-review-heading {
        flex-direction: column;
    }

    .hk-assigned-review-grid {
        grid-template-columns: 1fr;
    }

    .hk-assigned-review-item--amount {
        grid-column: auto;
    }

    .hk-assigned-loyalty-grid {
        grid-template-columns: 1fr;
    }

    .hk-assigned-loyalty-submit
    .hk-assigned-primary-button {
        width: 100%;
    }

}


/* ============================================================
   AGREGAR PUNTOS - PASO 4
   ============================================================ */

.hk-assigned-result-hero {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 22px;
    padding: 18px 20px;
    border: 1px solid #b9e9ce;
    border-radius: 12px;
    background: #f2fcf6;
}

.hk-assigned-result-check {
    display: flex;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #20a75a;
    color: #fff;
    font-size: 18px;
}

.hk-assigned-result-hero span,
.hk-assigned-result-section-title span,
.hk-assigned-result-loyalty span {
    color: #394395;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .07em;
}

.hk-assigned-result-hero h2 {
    margin: 3px 0;
    color: #16331f;
    font-size: 20px;
    font-weight: 800;
}

.hk-assigned-result-hero p {
    margin: 0;
    color: #5d7464;
    font-size: 10px;
}


/* Rewards */

.hk-assigned-result-rewards {
    margin: 23px 22px 0;
}

.hk-assigned-result-section-title h3 {
    margin: 3px 0 14px;
    color: #101b3d;
    font-size: 17px;
    font-weight: 800;
}

.hk-assigned-result-reward-grid {
    display: grid;
    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );
    gap: 12px;
}

.hk-assigned-result-reward {
    padding: 18px;
    text-align: center;
    border: 1px solid #dfe2f4;
    border-radius: 11px;
    background: #f7f7ff;
}

.hk-assigned-result-reward > div {
    display: flex;
    width: 40px;
    height: 40px;
    margin: 0 auto 8px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #e8eaff;
    color: #394395;
}

.hk-assigned-result-reward span {
    display: block;
    color: #80899d;
    font-size: 9px;
}

.hk-assigned-result-reward strong {
    display: block;
    margin-top: 3px;
    color: #303a94;
    font-size: 25px;
    font-weight: 800;
}


/* Fidelización */

.hk-assigned-result-loyalty {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    margin: 23px 22px 0;
    overflow: hidden;
    border: 1px solid #e1e4ec;
    border-radius: 12px;
    background: #fff;
}

.hk-assigned-result-loyalty-image {
    height: 125px;
}

.hk-assigned-result-loyalty-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hk-assigned-result-loyalty h3 {
    margin: 4px 0 5px;
    color: #172039;
    font-size: 17px;
    font-weight: 800;
}

.hk-assigned-result-loyalty p {
    margin: 0;
    padding-right: 15px;
    color: #737d92;
    font-size: 10px;
    line-height: 1.5;
}


/* Compra */

.hk-assigned-result-purchase {
    margin: 24px 22px 0;
}


/* Acciones */

.hk-assigned-result-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 25px 22px 23px;
}

.hk-assigned-secondary-button {
    display: inline-flex;
    min-height: 44px;
    padding: 10px 19px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid #d9dde7;
    border-radius: 8px;
    background: #fff;
    color: #515c73;
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
}

.hk-assigned-secondary-button:hover {
    color: #394395;
    border-color: #babfdf;
}


/* Responsive */

@media (max-width: 767.98px) {

    .hk-assigned-result-reward-grid {
        grid-template-columns: 1fr;
    }

    .hk-assigned-result-loyalty {
        grid-template-columns: 1fr;
    }

    .hk-assigned-result-loyalty-image {
        height: 190px;
    }

    .hk-assigned-result-loyalty > div:last-child {
        padding: 0 17px 17px;
    }

}


@media (max-width: 575.98px) {

    .hk-assigned-result-hero {
        align-items: flex-start;
        margin-right: 14px;
        margin-left: 14px;
    }

    .hk-assigned-result-actions {
        flex-direction: column;
        padding-right: 14px;
        padding-left: 14px;
    }

    .hk-assigned-result-actions a {
        width: 100%;
    }

}