/* www.rifatuber.com */
/* Estilos para las Tarjetas de Cuentas de Pago */
.container-payment h2{
    text-align: center;
    margin-bottom: 20px;
    font-size: 1.5rem;
    font-weight: bold;
    text-transform: uppercase;
}


.payment-card {
    border-radius: 10px;/* Bordes redondeados de la tarjeta */
    margin: 15px 0;/* Margen alrededor de la tarjeta */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);/* Sombra para dar un efecto 3D */
    min-height: 220px;
}

/* Estilos para el logo del banco en las tarjetas */
.bank-logo {
    width: auto;/* Ancho del logo del banco */
    height: 30px;/* Altura automática del logo del banco */
    margin-right: 15px;/* Espacio a la derecha del logo */
}

/* Estilos para el título de las tarjetas */
.payment-card .card-title {
    margin: 0;/* Remover margen del título */
}

/*Contenedor informacion a copiar*/
.card-container {
    cursor: pointer;
    /*
    background: rgba(255, 255, 255, 0.2); /* Fondo semi-transparente
    border: 1px solid rgba(255, 255, 255, 0.4); /* Borde sutil 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra ligera para el realzado 
    backdrop-filter: blur(10px); /* Desenfoque de fondo 
    border-radius: 8px; /* Bordes redondeados 
    transition: background 0.3s, box-shadow 0.3s; /* Transiciones suaves*/ 
}

/* Estilos para las etiquetas de texto en las tarjetas */
.card-label {
    margin: 0;/* Remover margen del párrafo */
    font-weight: bold;/* Texto en negrita */
    text-transform: uppercase;/* Texto transformado a mayúsculas */
    text-align: center;/* Centrar texto */
}

/* Estilos para los números de cuenta en las tarjetas */
.card-number {
    margin: 0;/* Remover margen del párrafo */
    font-size: 1.2rem;/* Tamaño de fuente de los números */
    letter-spacing: 2px;/* Espaciado entre los caracteres */
    font-family: 'Courier New', Courier, monospace;/* Fuente monoespaciada para los números */
    text-align: center;/* Centrar texto */
    font-weight: 600;/* Texto en negrita */
}

.card-number a{    
    text-decoration: none;
    color: white;
    font-size: small;
}

/*Pasarelas*/
.btn.tarjeta-pago {
    border-radius: 15px;
    padding: 20px;
    background: linear-gradient(145deg, #e0e0e0, #ffffff);
    border: 1px solid #888; /* Gris oscuro */
    transition: background 0.3s, color 0.3s;
}

.btn.tarjeta-pago:hover {
    background: linear-gradient(145deg, #cccccc, #e0e0e0); /* Gris metalizado más oscuro */
    color: #000;
}

.btn.tarjeta-pago img {
    width: 60%;
}

.tarjeta-nombre {
    border-top: 1px solid #ccc;
    padding-top: 10px;
    margin-top: 10px;
    color: #333;
    font-weight: bold;
}


/*APP*/
.custon-bank-app {
    background: linear-gradient(160deg, #e0e0e0, #bfbfbf, #e0e0e0); /* Gradiente gris claro metalizado */
    color: #000000; /* Color de letras negras */
    text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.2); /* Sombra muy ligera en el texto */
}

/*default*/
.custon-bank-00 {
    background: linear-gradient(160deg, #4a4a4a, #2b2b2b, #4a4a4a); /* Gradiente gris oscuro metalizado */
    color: #ffffff;
}

/* Banco Azteca */
.custon-bank-01 {
    background: linear-gradient(160deg, #1e7508, #38680c, #1e7508);/* Gradiente metalizado */
    color: #ffffff;
}
/* BanCoppel */
.custon-bank-02 {
    background: linear-gradient(160deg, #d3d600, #ac9200, #d3d600);/* Gradiente metalizado */
    color: #ffffff;
}
/* Banorte */
.custon-bank-03 {
    background: linear-gradient(160deg, #5c0000, #bb0303, #5c0000);/* Gradiente metalizado */
    color: #ffffff;
}
/* HSBC */
.custon-bank-04 {
    background: linear-gradient(160deg, #6b6b6b, #acacac, #6b6b6b);/* Gradiente metalizado */
    color: #ffffff;
}
/* Santander */
.custon-bank-05 {
    background: linear-gradient(160deg, #ff0000, #dd0303, #ff0000);/* Gradiente metalizado */
    color: #ffffff;
}
/* Scotiabank */
.custon-bank-06 {
    background: linear-gradient(160deg, #ff2222, #a80000, #ff2222);/* Gradiente metalizado */
    color: #ffffff;
}
/* Inbursa */
.custon-bank-07 {
    background: linear-gradient(160deg, #150074, #001947, #150074);/* Gradiente metalizado */
    color: #ffffff;
}
/* Citibanamex */
.custon-bank-08 {
    background: linear-gradient(160deg, #3d3d3d, #2c2c2c, #3d3d3d);/* Gradiente metalizado */
    color: #ffffff;
}
/* Banregio */
.custon-bank-09 {
    background: linear-gradient(160deg, #ff5e00, #e24000, #ff5e00);/* Gradiente metalizado */
    color: #ffffff;
}
/* BBVA */
.custon-bank-10 {
    background: linear-gradient(160deg, #0082ce, #327aff, #0082ce);/* Gradiente metalizado */
    color: #ffffff;
}
/* SPIN OXXO */
.custon-bank-11 {
    background: linear-gradient(160deg, #ae00ff, #7a00dd, #ae00ff);/* Gradiente metalizado */
    color: #ffffff;
}
/* STP */
.custon-bank-12 {
    background: linear-gradient(160deg, #001aff, #0300a7, #001aff);/* Gradiente metalizado */
    color: #ffffff;
}

/* Nu Banco */
.custon-bank-13 {
    background: linear-gradient(160deg, #400042, #350149, #400042);/* Gradiente metalizado */
    color: #ffffff;
}
/* Nvio */
.custon-bank-14 {
    background: linear-gradient(160deg, #00ac09, #018d1f, #00ac09);/* Gradiente metalizado */
    color: #ffffff;
}
/* BanBanjio */
.custon-bank-15 {
    background: linear-gradient(160deg, #4d004d, #300030, #4d004d);/* Gradiente metalizado */
    color: #ffffff;
}
/* Banco Afirme */
.custon-bank-16 {
    background: linear-gradient(160deg, #00b140, #009c34, #00b140);/* Gradiente metalizado */
    color: #ffffff;
}
/* Banco Arcus */
.custon-bank-17 {
    background: linear-gradient(160deg, #003366, #0055a5, #003366); /* Gradiente metalizado en tonos de azul */
    color: #ffffff; /* Logo y texto en blanco */
}
/* Banco Klar */
.custon-bank-18 {
    background: linear-gradient(160deg, #00b19d, #00a589, #00b19d); /* Gradiente en tonos de verde similar a la tarjeta Klar */
    color: #ffffff; /* Texto y logotipo en blanco */
}
.custon-bank-19 {

    background: linear-gradient(160deg, #00d249, #03bf44, #00d249); /* Gradiente en tonos de verde similar a la tarjeta Klar */
    color: #ffffff; /* Texto y logotipo en blanco */
}

.custon-bank-20 {
    
    background: linear-gradient(160deg, #6d1ed4d9, #6d1ed4, #6d1ed4d9); /* Gradiente en tonos de verde similar a la tarjeta Klar */
    color: #ffffff; /* Texto y logotipo en blanco */
}

.custon-bank-21 {
    
    background: linear-gradient(160deg, #50b4e9, #0e63eb, #50b4e9); /* Gradiente en tonos de verde similar a la tarjeta Klar */
    color: #ffffff; /* Texto y logotipo en blanco */
}