/* Ilumina el borde cuando el campo está enfocado */
.custom-input:focus {
    border-color: #394ae6;
    box-shadow:  #394ae6;;
    outline: none;
    
}

.custom-input {
  max-width: 300px;
    
}
/* Estilo personalizado para la tarjeta del formulario */
.card {
    background: linear-gradient(145deg, #ffffff, #e6e6e6);
    box-shadow: 3px 3px 10px #c1c1c1, -3px -3px 10px #ffffff;
}
/* Estilo personalizado para la tarjeta del formulario */
.carddetalle {
    background: linear-gradient(145deg, #ffffff, #e6e6e6);
    box-shadow: 3px 3px 10px #c1c1c1, -3px -3px 10px #ffffff;
    height: 70px;
    width: 92%;
    margin-bottom: 10px;
    margin-top: 10px;
    
}
.carddetalleplus {
    background: linear-gradient(145deg, #ffffff, #e6e6e6);
    box-shadow: 3px 3px 10px #c1c1c1, -3px -3px 10px #ffffff;
    height: 70px;
    
    margin-bottom: 10px;
    margin-top: 10px;
}
/* Estilo del botón al pasar el cursor */
.btn-primary:hover {
    background-color: #051e77;
    
    
}
.btn-primary{
    background-color: #031246;
    border-radius: 25px
}
.form-control{
    border-radius: 25px 
}
/* Estilos para el logo dentro del círculo */
.logo-circle {
    width: 120px;
    height: 120px;
    background-color: #fff; /* Círculo blanco */
    border-radius: 50%; /* Hacerlo circular */
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra suave */
    margin: 0 auto; /* Centrar el círculo */
}

/* Ajuste del tamaño del logo */
.logo-img {
    width: 80px;
    height: auto; /* Para que mantenga la proporción */
}
 /* Estilos personalizados */
 .background-div-bpa {
        background-image: url('{% static "elmaapp/bpa.webp" %}');
        background-size: cover; /* Ajusta el tamaño de la imagen para cubrir el div */
        background-position: center; /* Centra la imagen */
        height: 400px; /* Ajusta la altura según sea necesario */
        color: darkcyan;
        }
        .background-div-metro {
        background-image: url('{% static "elmaapp/metro.webp" %}');
        background-size: cover; /* Ajusta el tamaño de la imagen para cubrir el div */
        background-position: center; /* Centra la imagen */
        height: 400px; /* Ajusta la altura según sea necesario */
        color: #2d2d2d;
        }
        .background-div-bandec {
        background-image: url('{% static "elmaapp/bandec.webp" %}');
        background-size: cover; /* Ajusta el tamaño de la imagen para cubrir el div */
        background-position: center; /* Centra la imagen */
        height: 400px; /* Ajusta la altura según sea necesario */
        color: #f1f1f1;
        }
        .background-div {
       
        height: 400px; /* Ajusta la altura según sea necesario */
        }
        .navcustom{
           /* background: linear-gradient(to bottom, #85c1e9, #2e86c1);*/
           background-image: url('{% static "elmaapp/baner1.png" %}');
        }

        .navbar .navbar-brand,
        .navbar .nav-link {
            color: #fff;
        }
        .navbar .nav-link:hover {
            color: #ccc;
        }
        .navbar .dropdown-menu {
            right: 0; /* Alinea el menú desplegable a la derecha */
        }
        .tab-content {
            margin-top: 20px;
        }

        
      
       
        .cancel{
            background-color: #f3202a;
            color: #ddd;
            border: 1px solid #000000;
        }
       /* Estilos básicos de la tarjeta */
.item.tarjeta-disponible {
    background-color: #f1f1f1;
    border-radius: 15px;
    padding: 20px;
    width: 350px;
    height: 150px;
    position: relative; /* Permite colocar los elementos con absolute */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
    margin-left: 10px;
}

/* Estilo para el número de tarjeta centrado */
.numero_tarjeta_bpa {
    position: absolute;
    top: 60%;
    left: 60%;
    transform: translate(-50%, -50%);
    font-size: 0.5 rem;
    font-weight: bold;
    
    width: 100%;
}

/* Estilo para el botón de eliminar en la esquina superior derecha */
.eliminar-boton {
    position: absolute;
    top: 10px;
    right: 10px;
}

/* Estilo para el monto en la esquina inferior izquierda */
.tarjeta-info h4 {
    position: absolute;
    bottom: 10px;
    left: 10px;
    font-size: 0.5rem;
    border-radius: 10px;
    
}
.tarjeta-info p {
    position: absolute;
    bottom: -10px;
    right: 10px;
    font-size: 1rem;
    
    
    
}
/* Botón de "Tomar tarjeta" */
.tarjeta-info div {
    position: absolute;
    bottom: 10px;
    right: 10px;
    
}


        /* Estilos personalizados */
        .background-div-bpa {
        background-image: url('{% static "elmaapp/bpa.webp" %}');
        background-size: cover; /* Ajusta el tamaño de la imagen para cubrir el div */
        background-position: center; /* Centra la imagen */
        height: 400px; /* Ajusta la altura según sea necesario */
        color: darkcyan;
        }
        .background-div-metro {
        background-image: url('{% static "elmaapp/metro.webp" %}');
        background-size: cover; /* Ajusta el tamaño de la imagen para cubrir el div */
        background-position: center; /* Centra la imagen */
        height: 400px; /* Ajusta la altura según sea necesario */
        color: #2d2d2d;
        }
        .background-div-bandec {
        background-image: url('{% static "elmaapp/bandec.webp" %}');
        background-size: cover; /* Ajusta el tamaño de la imagen para cubrir el div */
        background-position: center; /* Centra la imagen */
        height: 400px; /* Ajusta la altura según sea necesario */
        color: #f1f1f1;
        }
        .background-div {
       
        height: 400px; /* Ajusta la altura según sea necesario */
        }
        .navbar {
            background-color: #bcadf3;
        }
        .navbar .navbar-brand,
        .navbar .nav-link {
            color: #fff;
        }
        .navbar .nav-link:hover {
            color: #ccc;
        }
        .navbar .dropdown-menu {
            right: 0; /* Alinea el menú desplegable a la derecha */
        }
        .tab-content {
            margin-top: 20px;
        }

        
      
       
        .cancel{
            background-color: #f3202a;
            color: #ddd;
            border: 1px solid #000000;
        }
       /* Estilos básicos de la tarjeta */
.item.tarjeta-disponible {
    background-color: #f1f1f1;
    border-radius: 15px;
    padding: 20px;
    width: 350px;
    height: 150px;
    position: relative; /* Permite colocar los elementos con absolute */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
    margin-left: 10px;
}

/* Estilo para el número de tarjeta centrado */
.numero_tarjeta_bpa {
    position: absolute;
    top: 60%;
    left: 60%;
    transform: translate(-50%, -50%);
    font-size: 1rem;
    font-weight: bold;
    
    width: 100%;
}

/* Estilo para el botón de eliminar en la esquina superior derecha */
.eliminar-boton {
    position: absolute;
    top: 10px;
    right: 10px;
}

/* Estilo para el monto en la esquina inferior izquierda */
.tarjeta-info h4 {
    position: absolute;
    bottom: 10px;
    left: 10px;
    font-size: 1rem;
    border-radius: 10px;
    
}
.tarjeta-info p {
    position: absolute;
    bottom: -10px;
    right: 10px;
    font-size: 1rem;
    
    
    
}
/* Botón de "Tomar tarjeta" */
.tarjeta-info div {
    position: absolute;
    bottom: 10px;
    right: 10px;
    
}

.estadistica{
    border-block-start-color: #2e86c1;
}
/* Contenedor del menú lateral */
 /* Fondo oscuro para clic fuera del menú */
   /* Fondo oscuro para clic fuera del menú */
   .menu-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1040;
        }
        .menu-overlay.active {
            display: block;
        }

        /* Contenedor del menú lateral */
        .side-menu {
            position: fixed;
            top: 0;
            right: -100%;
            width: 450px;
            height: 100%;
            background-color: white;
            transition: right 0.3s ease;
            box-shadow: -3px 0 5px rgba(0, 0, 0, 0.2);
            z-index: 1050;
        }
        @media (max-width: 480px) {
            .side-menu {
                position: fixed;
                top: 0;
                right: -100%;
                width: 330px; /* Puedes ajustar el ancho para móvil */
                height: 100%;
                background-color: white;
                transition: right 0.3s ease;
                box-shadow: -3px 0 5px rgba(0, 0, 0, 0.2);
                z-index: 1050;
            }
        }
        

        .side-menu.active {
            right: 0;
        }

    
    .text-rule {
        color: rgb(214, 44, 44);
    }
        /* Estilos para el botón de menú hamburguesa */
        .open-menu-btn {
            background-color: white; /* Color de fondo blanco */
            border: 1px solid #007bff; /* Borde azul */
            color: #007bff; /* Color de texto azul */
        }
        
        .open-menu-btn:hover {
            background-color: #007bff; /* Cambiar a azul en hover */
            color: white; /* Cambiar texto a blanco en hover */
        }

        /* Estilos para el botón de cierre (X) */
        .close-btn {
            position: absolute;
            top: 10px;
            right: 20px;
            font-size: 1.5rem;
            cursor: pointer;
            color: #333;
        }
        
        /* Estilos para los divs internos */
        .content-div {
            border: 2px  rgb(152, 152, 170);
            padding: 20px;
            margin: 10px 0;
            text-align: center;
            background-color: #0f62b4;
            border-radius: 20%;
        }
       
        .content-div .value {
            font-size: 1.4rem;
            font-weight: bold;
            color: rgb(255, 251, 251);
        }
        .content-div:hover {
            background-color: #b1d2f3; /* Cambiar a azul en hover */
            color: rgb(247, 246, 246); /* Cambiar texto a blanco en hover */
        }
        .content-div .description {
            font-size: 0.8rem;
            color: rgb(252, 249, 249);
        }

        .content-div-fijo {
            border: 2px  rgb(152, 152, 170);
            padding: 20px;
            margin: 10px 0;
            text-align: center;
            background-color: #031246;
            border-radius: 20%;
        }

        .content-div-fijo .value {
            font-size: 1.4rem;
            font-weight: bold;
            color: rgb(255, 251, 251);
        }
        .content-div-fijo:hover {
            background-color: #b1d2f3; /* Cambiar a azul en hover */
            color: #05238d; /* Cambiar texto a blanco en hover */
        }
        .content-div-fijo .description {
            font-size: 0.8rem;
            color: rgb(252, 249, 249);
        }
        /*style para perfil*/
        .form-control[readonly] {
            background-color: #f8f9fa; /* Fondo gris claro para campos de solo lectura */
        }
        .edit-icon {
            cursor: pointer;
            color: #007bff;
            margin-left: 10px;
        }
        .editable-field {
            position: relative;
        }
        .editable-field input {
            display: inline-block;
            width: calc(100% - 30px); /* Para hacer espacio al ícono */
        }



        /*CCS de los drop zone*/
        .drop-zone {
            border: 2px dashed #cccccc;
            padding: 20px;
            text-align: center;
            cursor: pointer;
            background-color: #f8f9fa;
            margin-bottom: 15px;
            border-radius: 25px;
        }
    
        .drop-zone.dragover {
            border-color: #4caf50;
            background-color: #e8f5e9;
        }
    
        .preview-container {
            position: relative;
            display: inline-block;
            margin-top: -25px;
        }
    
        .preview-image {
            max-width: 100px;
            max-height: 100px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
    
        .remove-preview {
            position: absolute;
            top: -10px;
            right: -10px;
            background: #1303e7;
            color: #fff;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            text-align: center;
            cursor: pointer;
            font-size: 16px;
            line-height: 20px;
        }
        .confirmar_recarga{
            position: absolute;
            top: 50%;
            left: 50%; 
        }

        /* Spinner de carga */
        .spinner {
            border: 8px solid #f3f3f3; /* Color gris claro */
            border-top: 8px solid #0b21ec; /* Color azul */
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 1s linear infinite;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -25px;
            margin-left: -25px;
            z-index: 1000; /* Asegurarse de que esté encima de otros elementos */
        }
    
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        
        .alert {
            padding: 15px;
            margin: 10px 0;
            border: 1px solid transparent;
            border-radius: 4px;
            opacity: 1;
            transition: opacity 0.5s ease-out;
        }
        .alert-danger {
            color: #a94442;
            background-color: #f2dede;
            border-color: #ebccd1;
        }
.estilo-3d {
            /* Fondo con degradado para un efecto 3D */
            background: linear-gradient(to bottom, #4056a1, #031246); /* Parte superior más clara, inferior más oscura */
            color: white; /* Color del texto */
            font-size: 1.3rem;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); /* Sombra del texto */
            border: none;
            padding: 10px 20px;
            cursor: pointer;
        
            /* Sombra para el efecto 3D */
            box-shadow: 0px -2px 5px rgba(255, 255, 255, 0.3) inset, /* Luz en el borde superior */
                        0px 2px 5px rgba(0, 0, 0, 0.5);             /* Sombra en el borde inferior */
            transition: all 0.2s ease-in-out;
        }
        
        .estilo-3d:hover {
            /* Cambia ligeramente el efecto al pasar el cursor */
            background: linear-gradient(to bottom, #5b6bb5, #02103b); /* Colores más claros para resaltar */
            box-shadow: 0px -2px 8px rgba(255, 255, 255, 0.4) inset, /* Luz más intensa */
                        0px 2px 8px rgba(0, 0, 0, 0.6);             /* Sombra más intensa */
        }
        
        .estilo-3d:active {
            /* Efecto de presionado */
            background: linear-gradient(to top, #4056a1, #031246); /* Intercambia los colores del degradado */
            box-shadow: 0px -2px 3px rgba(0, 0, 0, 0.4) inset, /* Sombra interna */
                        0px 2px 2px rgba(255, 255, 255, 0.2);   /* Luz inferior */
        }