.btn-third {

  	color: #fff !important;
	background-color: #ff6a13;
	border-color:  #ff6a13;
	border: solid 1px;
}

.btn-fourth {

  	color: #fff !important;
	background-color: #007953;
	border-color:  #007953;
	border: solid 1px;
}

.btn-circle-accept {
	width: 55px;
    height: 55px;
    padding: 1px 0px;
    border-radius: 50px;
    text-align: center;
    background-color: #babdb6 !important;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    color:#FFF;

}

.btn-circle-decline {
	width: 55px;
    height: 55px;
    padding: 1px 0px;
    border-radius: 50px;
    text-align: center;
    border-color: #3a4454 !important;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    color:#3a4454;

}


.btn-primary-outline, 
.btn-primary-outline:focus, 
.btn-primary-outline:hover, 
.btn-primary-outline:after, 
.btn-primary-outline:active {
   color: #ff66d9 !important; /* Cambia el color del texto */
   border-color: #ff66d9 !important; /* Mantén el color del borde */
   background: transparent !important; /* Fondo completamente transparente */
   border-radius: 25px; /* Esquinas redondeadas */
   height: 42px; /* Altura del botón */
   width: 125px; /* Ancho del botón */
}

.btn-white{
color: #ff66d9 !important; /* Cambia el color del texto */
   border-color: #ff66d9 !important; /* Mantén el color del borde */
   background: #fff !important; /* Fondo completamente transparente */
   border-radius: 25px; /* Esquinas redondeadas */
  width: 250px !important;
}


/* ------------- */

.img-item-pay{
	
	width: 75%; 
	height: 75%;
	
}

.setting-title {
  	color:black;!important;
  	font-size:13px;
  	margin-left:5px;
}

.setting-text {
  	color:#babdb6;!important;
  	font-size:12px;
  	margin-left:5px;
}
.line-setting {
    border-right: 1px solid #dce1e9;
    height: 75px;
    margin-right:-10px;
}

.card-setting {
height: 120px;

}
.card-shadow {
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);

  height:120px;
}

#bankzilla_loader, #bankzilla_modal, #bankzilla_modal_user, #bankzilla_modal_product, #bankzilla_modal_product_safecode, #bankzilla_alert, #bankzilla_1FA, #bankzilla_2FA, #bankzilla_session_warning, #bankzilla_safecode_modal {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0,0,0,0.5);
    z-index: 100000000;
    color: #848484;
    padding: 5px 5px 5px 5px;
}

.btn-default, .btn-default:hover, .btn-default:default, .btn-default:focus, .btn-default:after{
	background-color: #fff !important;
	color: #babdb6 !important;
	border-color: #babdb6 !important;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
}

.widget-transaction-img{
	max-width: 50%;
}

    .curved-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background: #f8f9fa;
        height: 130px;
        
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 99;
/*        border-bottom-left-radius: 50px !important;*/
/*        border-bottom-right-radius: 50px !important;*/
    }
    
    .curved-header::after {
        content: "";
        position: absolute;
        bottom: -10px; /* Ajusta según el efecto deseado */
        left: 0;
        width: 100%;
        height: 40px; /* Ajusta el tamaño del "corte" */
        background: #ebf0f5; /* Color del fondo */
        border-radius: 50px 50px 0 0;
    }
    
    .curved-header-worker {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #ffffff; /* Fondo blanco */
    color: #000000; /* Letras negras */
    height: 110px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99;
    border-bottom-left-radius: 50px !important;
    border-bottom-right-radius: 50px !important;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Sombreado en la parte inferior */
}


    .div-scroll {
        overflow-y: auto;
        overflow-x: hidden;
        max-height: 700px;
        scrollbar-width: none;
        scrollbar-color: #ccc transparent;
        padding: 10px;
        margin-top: 150px;
        text-align: center;
    }
    
    
   

    .card {
        border: none;
        background: #f8f9fa;
    }

 .card-data {
        border: none;
        background: #fff !important;
    }


    .content {
        margin-bottom: 20px; /* Espacio entre los bloques de contenido */
    }

    .rating input {
        display: none;
    }

    .rating label {
        font-size: 2rem;
        color: #ddd;
        cursor: pointer;
    }

    .rating input:checked ~ label {
        color: #ffcc00; /* Amarillo cuando está marcado */
    }

    .rating input:checked + label {
        color: #ffcc00; /* Amarillo cuando está marcado */
    }

   .tip-buttons button {
    position: relative; /* Necesario para la posición de la capa */
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: none;
    border: 2px solid transparent; /* Borde por defecto */
    font-size: 1.5rem;
    transition: all 0.3s ease;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Oculta la capa fuera del botón */
}

.tip-buttons button:hover {
    transform: scale(1.1);
}

.tip-buttons button.selected {
    border: 2px solid #000 !important; 
}

.tip-buttons .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95); /* Capa blanca transparente */
    color: #000; /* Color rosa para el texto */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.6rem; /* Tamaño del número aumentado */
    font-weight: bold;
    opacity: 0;
    transition: opacity 0.3s ease;
}


.tip-buttons button.selected .overlay {
    opacity: 1; /* Muestra la capa solo si el botón está seleccionado */
}

.btn-primary{
            background-color: #ff66d9 !important;
            border-color: #ff66d9;
            border-radius: 25px;
        }

        /* Estilos adicionales para los iconos */
        .tip-buttons img {
			display: flex;
			margin: 0;
            width: 65px;
            height: 65px;
        }

        #tip-label {
            font-weight: bold;
            color: #ff66d9;
        }

        /* Estilo para el texto "Inscrita desde" */
        .inscription-text {
            font-size: 0.80rem;
            color: #666;
            margin-top: 5px;
        }
        
        img.rounded-circle {
    transform: scale(1.05); /* Aplica un zoom del 5% siempre */
    transition: transform 0.3s ease; /* Transición suave */
}
        .fade-in {
    opacity: 1;
    transition: opacity 0.5s ease-in;
}

.fade-out {
    opacity: 0;
    transition: opacity 0.5s ease-out;
}

 .message-container {
            background-color: #f8f9fa;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            text-align: center;
        }

        .message-container h2 {
            color: #333;
            font-size: 2em;
            margin-bottom: 20px;
        }

        .icon-container {
            font-size: 60px;
            color: #ff66d9;
            margin-bottom: 20px;
        }

        .check-icon {
            font-size: 60px;
            color: #ffcc00;
        }
        
.inscription-text{
	font-size: 15px; 
	color: #fff; 
	white-space: nowrap; 
	overflow: hidden; 
	text-overflow: ellipsis;
}

.inscription-text-worker{
	font-size: 15px; 
	color: #000000; 
	white-space: nowrap; 
	overflow: hidden; 
	text-overflow: ellipsis;
}
        .custom-input {
    margin: 0; /* Elimina márgenes */
    padding: 0; /* Elimina relleno si es necesario */
    border-radius: 0; /* Asegúrate de que el borde sea consistente */
    flex: 1; /* Permite que el campo de entrada ocupe el espacio restante */
    /* Puedes agregar más estilos específicos aquí si es necesario */
}

#qr-canvas {
    aspect-ratio: unset; /* Anula la relación de aspecto */
}

@media (max-width: 767px) { /* Bootstrap define 'sm' como ≤ 767px */
    .mobile-margin-top {
        margin-top: -90px; /* Ajusta este valor según tus necesidades */
    }
}


.qr-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columnas */
    gap: 20px; /* Espacio entre los códigos QR */
}

 .qr {
            width: 2cm;
            height: 2cm;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #000; /* Para ver los bordes del QR */
        }
        
        
        
        #qr_video, #qr_canvas {
    width: 100%;  /* Asegura que el video y canvas ocupen el 100% del contenedor */
    height: auto;
}

.qr_code_print canvas {
    width: 400px;
    height: 400px;
    padding: 15px;
    display: block; /* Asegura que el canvas se muestre correctamente */
    margin: 0 auto; /* Centrar el código QR */
}

.border-dot{
	 border: 2px dashed black;
}



@media print {
    .print-hide {
        display: none !important;
    }
    .print-show {
        display: block !important;
    }
    .qr_code_print canvas {
        width: 400px !important;
        height: 400px !important;
        
        padding: 15px !important;
    }
}



.qr_code_print canvas {
    width: 400px;
    height: 400px;
   
    padding: 15px;
    display: block; /* Asegura que el canvas se muestre correctamente */
    margin: 0 auto; /* Centrar el código QR */
}

/* Estilos para impresión */
@media print {
    .print-hide {
        display: none !important;
    }
    
    .qr_code_print canvas {
   		 -webkit-print-color-adjust: exact;
        width: 400px !important; /* Tamaño más pequeño para impresión */
        height: 400px !important;
     
        padding: 10px !important;
        margin: 0 auto !important; /* Centrar en la página impresa */
    }
    
    #group_qr_print{
    	display: block;
    }
}


        .custom-checkbox #check_save_data:checked {
            background-color: #ff66d9; /* Color de fondo cuando está seleccionado */
            border-color: #ff66d9; /* Color del borde cuando está seleccionado */
        }

        .custom-checkbox #check_save_data:focus {
            box-shadow: 0 0 0 0.25rem rgba(255, 102, 217, 0.25); /* Sombra al enfocar */
        }


  .button-circle-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100px;
    margin: 10px;
  }

  .button-ride {
    background-color: #fff;
    color: black;
    width: 100px;
    height: 100px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
  }

  .button-ride img {
    width: 50px;
    height: 50px;
  }

  .button-label {
    margin-top: 8px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
  }


#banner_modal_body img {
  width: 100%;
  display: block;
  margin: 0;
  padding: 0;
  border-radius: 0;
}



#prize_content {
    overflow-y: auto;
    max-height: 100%;
}

.card-container-prize {
    display: flex;
    flex-direction: column;
    min-height: 300px;
}


#list_prize div {
    max-height: 180px;
    overflow-y: scroll;
    /* Ocultar la barra de desplazamiento */
    scrollbar-width: none;  /* Para Firefox */
}

#list_prize div::-webkit-scrollbar {
    display: none;  /* Para Chrome, Safari y Edge */
}

#prize_notes {
    margin-top: -1px !important;
    padding-top: 20px; /* pequeño espacio cuando hay muchos premios */
}

.card-container {
    position: relative;
    width: 100%;
    max-width: 360px;
    height: 260px;
    margin: 20px auto;
    padding: 10px;
    border-radius: 16px;
    overflow: hidden;
    background-image: url('../img/disable_prize.png');
    background-size: 100% 100%;    
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    isolation: isolate;
}

.card-container-prize {
    position: relative;
    width: 100%;
    max-width: 360px;
    height: 260px;
    margin: 20px auto;
    padding: 10px;
    border-radius: 16px;
    overflow: hidden;
    background-image: url('../img/enable.png');
    background-size: 100% 100%;    
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    isolation: isolate;
}

.card-overlay {
    position: absolute;
    inset: 0;
    padding: 10px;
    z-index: 2;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}

.card-list-container {
    position: absolute;
    bottom: 45px;
    left: 10px;
    right: 10px;
    height: 180px;
    overflow-y: auto;
    color: white;
    font-size: 13px;
    z-index: 2;
    padding: 8px;
    display: grid;
    gap: 8px;
    border-radius: inherit;
    pointer-events: auto;
}

 .swiper {
  width: 100%;
  height: 420px; /* Subido de 350px */
  padding: 30px 0; /* Más espacio vertical */
}

.swiper-slide {
  width: 300px; /* Subido de 240px */
  height: 400px; /* Subido de 340px */
  background-size: contain;
  border-radius: 16px; /* Más suavidad en bordes */
  font-size: 16px; /* Texto más legible */
  padding: 16px; /* Más espacio interior */
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  transition: transform 0.4s ease;
}

.swiper-slide-prev,
.swiper-slide-next {
  transform: scale(0.92) !important; /* Más grandes que 0.9 */
  opacity: 0.7; /* Más visibles */
}

.swiper-slide-active {
  transform: scale(1.15); /* Leve reducción del 1.2 para evitar que sobresalga demasiado */
  opacity: 1;
  z-index: 2;
}

.swiper-button-next,
.swiper-button-prev {
  opacity: 0.1; 
  color: #000 !important;
}

@media (min-width: 400px) {
    .card-container {
        width: 360px; /* Fijo para pantallas grandes */
    }
}



    .visit-title {
        position: absolute;
        top: 210px;
        left: 20px;
        color: #581845;
        padding: 2px 6px;
        border-radius: 4px;
        margin: 0;
        font-size: 1.1rem;
    }
    
    .visit-subtitle {
        position: absolute;
        top: 50px;
        left: 20px;
        color: #581845;
        padding: 2px 6px;
        border-radius: 4px;
        margin: 0;
        font-size: 0.9rem;
    }
    
   
    
     .card-list-prize {
    color: white;
    font-size: 13px;
    z-index: 2;
    padding: 8px;
    margin-bottom: 10px;
}

    
    /* Mantenemos los estilos existentes de tabs */
    .capsule-tabs-container {
        display: flex;
        justify-content: center;
        margin: 15px 0 25px;
    }
    
    .capsule-tabs {
        display: inline-flex;
        background: #f0f0f0;
        border-radius: 50px;
        padding: 4px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    
    .capsule-tab {
        padding: 8px 15px;
        border: none;
        background: transparent;
        cursor: pointer;
        font-size: 10px;
        font-weight: 600;
        color: #666;
        transition: all 0.3s ease;
        border-radius: 50px;
        outline: none;
    }
    
    .capsule-tab.active {
                 background-color: #ff66d9 !important;
        color: white;
        box-shadow: 0 2px 5px rgba(88, 24, 69, 0.3);
    }
    
       .capsule-tab.active_black {
                 background-color: #000 !important;
        color: white;
        box-shadow: 0 2px 5px rgba(88, 24, 69, 0.3);
    }
    
    
    /* Estilos para el footer */
    .card-footer {
        padding: 0 15px;
    }
    

    .instructions-list {
        padding-left: 20px;
        margin-top: 10px;
    }
    
    .instructions-list li {
        margin-bottom: 8px;
    }
    
    .tab-bubble {
        display: none;
    }
    
    .tab-bubble.active {
        display: block;
        animation: fadeIn 0.3s;
    }
    
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }