/* ============================================================================
 * general.redesign.css — Superset tokenizado de couponbook/general.css
 *
 * Origen: /tools/components/couponbook/assets/css/general.css (230 líneas, 30 vistas).
 *
 * MODO: SUPERSET REEMPLAZO. Copia íntegra + tokenizations en valores existentes.
 * REGLA ESTRICTA: solo cambia valores de propiedades ya declaradas.
 *
 * Tokenizations:
 *   white / #ffffff          → var(--neutral-white)
 *   #67757c                  → var(--neutral-700)
 *   #000000                  → var(--neutral-900)
 *   #D2D2D2                  → var(--neutral-300)
 *   #eef5f9                  → var(--neutral-200) (azul claro template, consistente)
 *   border-radius: 100px     → var(--radius-full)
 *   border-radius: 8px       → var(--radius-md) (8px exacto)
 *   font-weight: bold        → var(--font-weight-bold)
 *   font-size: .8rem / 12px  → var(--font-caption)
 *   font-size: 14px          → var(--font-body-s)
 *   box-shadow .btn-gray legacy → var(--shadow-sm) / --shadow-hover
 *   padding: 5px 10px        → var(--space-1) var(--space-3)
 *   padding: 10px            → var(--space-3)
 *   margin-top: 10px         → var(--space-3)
 *
 * Preservados:
 *   #cbcbcbe0  (gris con alpha — btn-gray)
 *   #9d9d9d    (gris hover btn-gray)
 *   border-radius: 70px / 150px (decorativos cupones)
 *   sombras de cupones específicas (inset, dashed)
 *   line-height: 12px (cupón specific)
 *   margin: 15px / 20px (entre puntos de la escala)
 * ============================================================================ */

.contentCoupon {
    background-color: var(--neutral-white);
}

.modal-dialog.modal-dialog-ended {
    margin: 0px 10px;
    margin-left: auto;
    margin-right: auto;
    bottom: 0px;
    left: 0px;
    right: 0px;
    position: absolute;
    padding-left: 10px;
    padding-right: 10px;
}

#mdlInstallApp h4 {
    font-weight: var(--font-weight-bold);
}

#imgIconApp {
    border-radius: var(--radius-full);
    width: 45px;
    height: 45px;
}

#contentTitleDesc {
    display: grid;
}

#txt_description {
    white-space: pre-wrap;
}

#txtDescriptionApp {
    font-size: var(--font-caption);
}

#contentInstallationFirefox, #contentInstallationSafari {
    display: none;
}

.textColorDefault {
    color: var(--neutral-700);
}

#contentInstallationFirefox ul li {
    margin-left: -10px;
    font-size: var(--font-body-s);
}

#iconChareIphone {
    height: 20px;
}


.m_l_r_10{
    margin-left: 15px;
    margin-right: 15px;
}

.hasBanner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/*========BUTTONS========*/
.btn-gray, .btn-gray:disabled, .btn-gray.disabled {
    background: #cbcbcbe0;
    border: 1px solid #cbcbcbe0;
    box-shadow: var(--shadow-sm);
    transition: 0.2s ease-in;
    padding: var(--space-1) var(--space-3);
    color: var(--neutral-white);
}

.btn-gray.disabled:hover, .btn-gray:hover {
    background: #9d9d9d;
    box-shadow: var(--shadow-hover);
    border: 1px solid #9d9d9d;
    color: var(--neutral-white);
}

.btn-gray i {
    color: var(--neutral-white);
}

.btn-primary, .btn-primary.disabled, .btn-primary:disabled, .btn.btn-primary:hover {
    transition: auto !important;
    background: var(--neutral-white);
    border: 1px solid var(--neutral-white);
}

/*====================COUPONS====================*/
.contentCoupon {
    height: 100px;
    cursor: pointer;
    box-shadow: 0px 1px 15px rgb(0 0 0 / 10%);
}

.contentLogo {
    width: 46%;
    background: var(--neutral-900);
    text-align: right;
    border-top-right-radius: 70px;
    border-bottom-right-radius: 70px;
    display: table;
    display: block ruby;
}

.imgDigitalCoupon {
    height: 40px;
    margin-right: 5px;
}

.imgCoupon {
    border-radius: var(--radius-full);
    width: 100px;
    height: 100px;
}

.contentText {
    width: 47%;
    padding: var(--space-3);
    display: grid;
}

.contentSeparation {
    width: 7%;
    position: relative;
}

.contentSeparation::after {
    content:"";
    position: absolute;
    top: 0;
    bottom: 0;
    left: auto;
    border-left: 2px dashed;
    border-left-color: var(--neutral-white);
    z-index: 1;
    transform: translate(-50%, 0%);
}

.top-half-circle {
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 15px;
    width: 100%;
    border-radius: 0px 0px 150px 150px;
    background-color: var(--neutral-white);
    z-index: 2;
    box-shadow: inset 0px 0px 12px rgb(0 0 0 / 6%);
}

.bottom-half-circle {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0%);
    height: 15px;
    width: 100%;
    border-radius: 150px 150px 0px 0px;
    background-color: var(--neutral-white);
    z-index: 2;
    box-shadow: inset 0px 0px 12px rgb(0 0 0 / 6%);
}

.contentTitleDescription {
    border-radius: var(--radius-md);
    height: 100%;
    position: relative;
}

.contentTextValues {
    width: 95%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}

.contentTextValues h1, .contentTextValues h2, .contentTextValues h3, .contentTextValues h4, .contentTextValues h5 {
    margin-bottom: 0px;
}

.txtCouponDescription {
    line-height: 12px;
    white-space: pre-wrap;
    font-size: var(--font-caption);
    margin-bottom: 0px;
    margin-top: 5px;
}

.imgBarcodeCoupon {
    height: 100px;
}

#txt_recibe_sms_code, #txt_alert_birthdate {
    cursor: auto;
}

/*COUNTRY*/
.country-select {
    width: unset !important;
}

.country_selector {
    height: 38px;
    width: 30px;
    border: 1px solid var(--neutral-300);
    background: var(--neutral-200);
}

.m_t_10 {
    margin-top: var(--space-3);
}

.m_t_20 {
    margin-top: 20px;
}

.country-select .flag-dropdown, .country-select .selected-flag {
    width: 100% !important;
}