/* =====================================================================
   NZT WEB - TARJETA DE CREDITO PREMIUM COMPARTIDA
   Referencia visual: TarjetaCreditoPremiumCard de NZT Mobile.
   Consumidores Web: Mantenedor Tarjetas + Estadisticas / Uso tarjetas.
   ===================================================================== */

.nzt-credit-card-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(320px, 1fr)) !important;
    gap: 18px !important;
    width: 100%;
    min-width: 0;
}

.nzt-credit-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border-radius: 27px;
    padding: 17px;
    color: #ffffff;
    box-shadow: 0 18px 42px rgba(18, 55, 76, 0.22);
    isolation: isolate;
}

html.nztm-dark .nzt-credit-card,
body.nztm-dark .nzt-credit-card {
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.34);
}

.nzt-credit-card--inactive {
    opacity: 0.78;
}

.nzt-credit-card--banco-chile {
    background: linear-gradient(135deg, #031A44 0%, #0753A5 52%, #2582DE 100%);
}

.nzt-credit-card--santander {
    background: linear-gradient(135deg, #470611 0%, #A91027 54%, #F04458 100%);
}

.nzt-credit-card--bancoestado {
    background:
        linear-gradient(90deg, rgba(5,31,70,0.95) 0 72%, rgba(5,31,70,0.25) 72% 100%),
        linear-gradient(140deg, #F8FAFC 0%, #F1F5F9 55%, #E7EDF4 100%);
}

.nzt-credit-card--bci {
    background: linear-gradient(135deg, #003B35 0%, #08745F 52%, #1DB58C 100%);
}

.nzt-credit-card--falabella {
    background: linear-gradient(135deg, #06352E 0%, #087965 54%, #21B88B 100%);
}

.nzt-credit-card--cencosud {
    background:
        linear-gradient(90deg, #14B8C8 0 8px, #E51C78 8px 11px, transparent 11px),
        linear-gradient(135deg, #2996AD 0%, #2C9CB3 58%, #278CA3 100%);
}

.nzt-credit-card--scotiabank {
    background: linear-gradient(135deg, #4A0614 0%, #A10D2B 54%, #E93457 100%);
}

.nzt-credit-card--itau {
    background:
        linear-gradient(155deg, transparent 0 70%, rgba(245,130,32,0.96) 70% 72%, transparent 72%),
        repeating-linear-gradient(34deg, rgba(2,60,120,0.22) 0 3px, transparent 3px 38px),
        linear-gradient(135deg, #034C8C 0%, #006DB8 54%, #0B84D2 100%);
}

.nzt-credit-card--mach {
    background: linear-gradient(135deg, #15043A 0%, #5F26CA 52%, #BA5DFF 100%);
}

.nzt-credit-card--ripley {
    background:
        linear-gradient(180deg, #F0223E 0 34%, #F4B735 34% 57%, #8C2BA1 57% 100%) right / 12px 100% no-repeat,
        linear-gradient(135deg, #1A1A1C 0%, #2B2B2F 55%, #3A3A40 100%);
}

.nzt-credit-card--tenpo {
    background:
        radial-gradient(circle at 82% 18%, rgba(53,224,142,0.18), transparent 27%),
        linear-gradient(135deg, #020705 0%, #07110D 54%, #0A1711 100%);
}

.nzt-credit-card--mercado-libre {
    background:
        linear-gradient(150deg, rgba(255,255,255,0.20) 0 23%, transparent 23% 52%, rgba(255,255,255,0.12) 52% 70%, transparent 70%),
        linear-gradient(135deg, #FFD900 0%, #FFE226 48%, #FFCC00 100%);
    color: #152238;
}

.nzt-credit-card--mercado-pago {
    background: linear-gradient(135deg, #043B60 0%, #0A7DB5 54%, #35B9DF 100%);
}

.nzt-credit-card--custom {
    background: linear-gradient(135deg, #071928 0%, #0A607A 54%, #21C3D8 100%);
}


/* Mercado Libre: visual oficial NZT basada en la tarjeta amarilla. */
.nzt-credit-card--mercado-libre .nzt-credit-card__decor {
    width: 330px;
    height: 220px;
    right: -105px;
    top: -88px;
    border-color: rgba(21,34,56,0.10);
}

.nzt-credit-card--mercado-libre .nzt-credit-card__decor::before {
    width: 250px;
    height: 250px;
    left: -390px;
    top: 260px;
    background: rgba(255,255,255,0.16);
}

.nzt-credit-card--mercado-libre .nzt-credit-card__decor::after {
    width: 430px;
    height: 100px;
    right: -75px;
    top: 270px;
    background: rgba(255,255,255,0.10);
    transform: rotate(-9deg);
}

.nzt-credit-card--mercado-libre .nzt-credit-card__brand,
.nzt-credit-card--mercado-libre .nzt-credit-card__last4 strong,
.nzt-credit-card--mercado-libre .nzt-credit-card__usage-head span,
.nzt-credit-card--mercado-libre .nzt-credit-card__meta-item strong {
    color: #172235 !important;
}

.nzt-credit-card--mercado-libre .nzt-credit-card__brand {
    letter-spacing: -0.15px;
}

.nzt-credit-card--mercado-libre .nzt-credit-card__status {
    color: #16322A !important;
    background: rgba(255,255,255,0.42);
    border-color: rgba(22,50,42,0.22);
}

.nzt-credit-card--mercado-libre .nzt-credit-card__status.is-inactive {
    color: #8C2332 !important;
    background: rgba(255,255,255,0.38);
    border-color: rgba(140,35,50,0.24);
}

.nzt-credit-card--mercado-libre .nzt-credit-card__chip {
    border-color: rgba(28,42,61,0.24);
    background: linear-gradient(145deg, #F7F8FA 0%, #C9D0D8 48%, #A9B1BB 100%);
}

.nzt-credit-card--mercado-libre .nzt-credit-card__chip i {
    background: rgba(50,62,77,0.42);
}

.nzt-credit-card--mercado-libre .nzt-credit-card__contactless i {
    background: rgba(23,34,53,0.72);
}

.nzt-credit-card--mercado-libre .nzt-credit-card__last4 small,
.nzt-credit-card--mercado-libre .nzt-credit-card__amount span,
.nzt-credit-card--mercado-libre .nzt-credit-card__meta-item span {
    color: rgba(23,34,53,0.68) !important;
}

.nzt-credit-card--mercado-libre .nzt-credit-card__amounts {
    border-color: rgba(23,34,53,0.14);
    background: rgba(255,255,255,0.42);
}

.nzt-credit-card--mercado-libre .nzt-credit-card__amount strong {
    color: #172235 !important;
}

.nzt-credit-card--mercado-libre .nzt-credit-card__amount strong.is-success {
    color: #087A4D !important;
}

.nzt-credit-card--mercado-libre .nzt-credit-card__amount strong.is-danger {
    color: #C82943 !important;
}

.nzt-credit-card--mercado-libre .nzt-credit-card__divider,
.nzt-credit-card--mercado-libre .nzt-credit-card__meta-divider {
    background: rgba(23,34,53,0.15);
}

.nzt-credit-card--mercado-libre .nzt-credit-card__usage-track {
    background: rgba(23,34,53,0.18);
}

.nzt-credit-card--mercado-libre .nzt-credit-card__meta {
    border-top-color: rgba(23,34,53,0.16);
    border-bottom-color: rgba(23,34,53,0.16);
}

.nzt-credit-card--mercado-libre .nzt-credit-card__network i:first-child {
    background: #E6292F;
}

.nzt-credit-card--mercado-libre .nzt-credit-card__network i:last-child {
    background: #F49B1A;
}

.nzt-credit-card--mercado-libre .nzt-credit-card__action {
    border-color: rgba(23,34,53,0.16);
    background: rgba(23,34,53,0.82);
    color: #ffffff !important;
}

.nzt-credit-card--mercado-libre .nzt-credit-card__action:hover,
.nzt-credit-card--mercado-libre .nzt-credit-card__action:focus-visible {
    border-color: rgba(23,34,53,0.28);
    background: rgba(23,34,53,0.92);
}

.nzt-credit-card--mercado-libre .nzt-credit-card__action--danger,
.nzt-credit-card--mercado-libre .nzt-credit-card__action--danger:hover,
.nzt-credit-card--mercado-libre .nzt-credit-card__action--danger:focus-visible {
    color: #FF93A1 !important;
}

.nzt-credit-card__decor {
    position: absolute;
    z-index: -1;
    width: 245px;
    height: 245px;
    right: -108px;
    top: -124px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.12);
    pointer-events: none;
}

.nzt-credit-card__decor::before {
    content: "";
    position: absolute;
    width: 176px;
    height: 176px;
    left: -360px;
    top: 285px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
}

.nzt-credit-card__decor::after {
    content: "";
    position: absolute;
    width: 340px;
    height: 92px;
    right: -12px;
    top: 285px;
    border-radius: 999px;
    background: rgba(255,255,255,0.035);
    transform: rotate(-11deg);
}

.nzt-credit-card--bancoestado .nzt-credit-card__decor {
    width: 250px;
    height: 360px;
    right: -88px;
    top: -20px;
    border: 0;
    border-radius: 0;
    background:
        linear-gradient(-38deg, transparent 0 9%, #0844C7 9% 15%, transparent 15% 23%, #2F70E7 23% 29%, transparent 29% 39%, #0B52D8 39% 45%, transparent 45% 60%, #F21D3F 60% 67%, transparent 67% 75%, #E81739 75% 82%, transparent 82%);
    opacity: 0.96;
}

.nzt-credit-card--ripley .nzt-credit-card__decor::before {
    content: "R";
    display: block;
    width: auto;
    height: auto;
    left: -350px;
    top: 120px;
    color: rgba(255,255,255,0.15);
    background: transparent;
    font: 400 196px/1 Georgia, serif;
}

.nzt-credit-card__top,
.nzt-credit-card__identity,
.nzt-credit-card__amounts,
.nzt-credit-card__usage,
.nzt-credit-card__meta,
.nzt-credit-card__actions {
    position: relative;
    z-index: 2;
}

.nzt-credit-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.nzt-credit-card__brand-block {
    min-width: 0;
    flex: 1;
    padding-right: 8px;
}

.nzt-credit-card__brand {
    display: block;
    color: #ffffff !important;
    font-size: 17px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: 0.7px;
}

.nzt-credit-card__status {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border: 1px solid;
    border-radius: 999px;
    color: #ffffff !important;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1px;
    white-space: nowrap;
}

.nzt-credit-card__status.is-active {
    background: rgba(31,179,114,0.20);
    border-color: rgba(173,255,219,0.42);
}

.nzt-credit-card__status.is-inactive {
    background: rgba(230,68,91,0.20);
    border-color: rgba(255,196,205,0.42);
}

.nzt-credit-card__identity {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 18px;
}

.nzt-credit-card__chip {
    width: 44px;
    height: 33px;
    flex: 0 0 44px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 6px 7px;
    border: 1px solid rgba(255,255,255,0.34);
    border-radius: 9px;
    background: #D9B55A;
}

.nzt-credit-card__chip i {
    display: block;
    height: 1px;
    background: rgba(91,61,13,0.48);
}

.nzt-credit-card__contactless {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    transform: rotate(-14deg);
}

.nzt-credit-card__contactless i {
    display: block;
    width: 2px;
    border-radius: 2px;
    background: rgba(255,255,255,0.75);
}

.nzt-credit-card__contactless i:nth-child(1) { height: 9px; }
.nzt-credit-card__contactless i:nth-child(2) { height: 15px; }
.nzt-credit-card__contactless i:nth-child(3) { height: 21px; }

.nzt-credit-card__last4 {
    min-width: 0;
    flex: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

.nzt-credit-card__last4 small {
    color: rgba(255,255,255,0.70) !important;
    font-size: 9px;
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: 0.35px;
}

.nzt-credit-card__last4 strong {
    color: #ffffff !important;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.2px;
}

.nzt-credit-card__network {
    position: relative;
    width: 47px;
    height: 30px;
    flex: 0 0 47px;
}

.nzt-credit-card__network i {
    position: absolute;
    top: 0;
    width: 29px;
    height: 29px;
    border-radius: 50%;
}

.nzt-credit-card__network i:first-child {
    left: 0;
    background: rgba(255,255,255,0.88);
}

.nzt-credit-card__network i:last-child {
    right: 0;
    background: rgba(255,255,255,0.45);
}

.nzt-credit-card__amounts {
    display: flex;
    align-items: stretch;
    margin-top: 18px;
    padding: 13px 11px;
    border: 1px solid rgba(255,255,255,0.13);
    border-radius: 18px;
    background: rgba(3,11,25,0.28);
}

.nzt-credit-card__amount {
    min-width: 0;
    flex: 1;
}

.nzt-credit-card__amount span {
    display: block;
    color: rgba(255,255,255,0.68) !important;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.65px;
}

.nzt-credit-card__amount strong {
    display: block;
    margin-top: 5px;
    overflow: hidden;
    color: #ffffff !important;
    font-size: clamp(12px, 1.15vw, 14px);
    line-height: 1.2;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nzt-credit-card__amount strong.is-success { color: #7DF0BB !important; }
.nzt-credit-card__amount strong.is-danger { color: #FF93A1 !important; }

.nzt-credit-card__divider {
    width: 1px;
    margin: 0 8px;
    background: rgba(255,255,255,0.14);
}

.nzt-credit-card__usage {
    margin-top: 16px;
}

.nzt-credit-card__usage-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.nzt-credit-card__usage-head span {
    color: rgba(255,255,255,0.82) !important;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.8px;
}

.nzt-credit-card__usage-head strong {
    font-size: 12px;
    font-weight: 900;
}

.nzt-credit-card__usage-track {
    height: 9px;
    margin-top: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,0.16);
}

.nzt-credit-card__usage-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    transition: width .2s ease;
}

.nzt-credit-card__meta {
    display: flex;
    align-items: stretch;
    margin-top: 16px;
    padding: 12px 0;
    border-top: 1px solid rgba(255,255,255,0.14);
    border-bottom: 1px solid rgba(255,255,255,0.14);
}

.nzt-credit-card__meta-item {
    min-width: 0;
    flex: 1;
    text-align: center;
}

.nzt-credit-card__meta-item span {
    display: block;
    color: rgba(255,255,255,0.62) !important;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.65px;
}

.nzt-credit-card__meta-item strong {
    display: block;
    margin-top: 4px;
    color: #ffffff !important;
    font-size: 15px;
    font-weight: 900;
}

.nzt-credit-card__meta-divider {
    width: 1px;
    background: rgba(255,255,255,0.14);
}

.nzt-credit-card__actions {
    display: flex;
    gap: 7px;
    margin-top: 14px;
}

.nzt-credit-card__action {
    min-height: 42px;
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 7px;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 14px;
    background: rgba(3,11,25,0.24);
    color: #ffffff !important;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    transition: transform .16s ease, background .16s ease, border-color .16s ease;
}

.nzt-credit-card__action:hover,
.nzt-credit-card__action:focus-visible {
    border-color: rgba(255,255,255,0.34);
    background: rgba(3,11,25,0.40);
    color: #ffffff !important;
    transform: translateY(-1px);
}

.nzt-credit-card__action--danger,
.nzt-credit-card__action--danger:hover,
.nzt-credit-card__action--danger:focus-visible {
    color: #FF9CAB !important;
}

.nzt-credit-card__empty {
    grid-column: 1 / -1;
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 20px;
    border: 1px dashed rgba(34,191,212,0.28);
    border-radius: 22px;
    color: var(--nzt-mobile-text-muted, #7f8b96);
    background: rgba(255,255,255,0.04);
    text-align: center;
}

@media (max-width: 1120px) {
    .nzt-credit-card-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 620px) {
    .nzt-credit-card {
        padding: 15px;
        border-radius: 24px;
    }

    .nzt-credit-card__identity {
        gap: 8px;
    }

    .nzt-credit-card__network {
        display: none;
    }

    .nzt-credit-card__amounts {
        padding-left: 8px;
        padding-right: 8px;
    }

    .nzt-credit-card__divider {
        margin: 0 5px;
    }

    .nzt-credit-card__amount strong {
        font-size: 12px;
    }

    .nzt-credit-card__actions {
        flex-direction: column;
    }
}