/*
[data-bs-theme=light] {
  --bs-root-card-border-color: #c8cddc;
  --bs-gray-100: #ebeff3;
  --bs-gray-700: #5c6683;
  --bs-gray-300: #8891aa;
  --bs-text-muted: #082040;
  --bs-info-active: #082040;
  --bs-success: #6ebe4b;
  --bs-success-active: #2f8e16;
  --bs-danger: #e11e23;
  --bs-danger-active: #af1414;
  --bs-primary: #4ba0dc;
  --bs-primary-active: #2369c8;
  --bs-secondary: #dce1f0;
  --bs-secondary-active: #dce1f0;
  --bs-secondary-inverse: #252F4A;
  --bs-warning: #fed925;
  --bs-text-warning: #fed925;
  --bs-text-primary: #4ba0dc;
  --bs-warning-active: #082040;
  --bs-warning-inverse: #000000;
  --bs-btn-font-family:"Roboto", sans-serif;
}
*/
/*ALL*/
[data-bs-theme=light] {
  --bs-btn-font-family: "Roboto", sans-serif;
  --bs-btn-font-size: 400;
  --bs-text-muted: #0e3467;
  --bs-text-gray-500: #0e3467;
  --bs-text-gray-900: #0e3467;
  --bs-toast-font-size: 1rem;
}
body{
  font-size: 15px !important;
}
.fs-base {
    font-size: 1.2rem !important;
}
.fs-5 {
    font-size: 1.30rem !important;
}
.underline {
  text-decoration: underline;
}

.la-search-button {
  position: relative;
  left: 24px;
}

.hidden {
  display: none;
}

#kt_app_toolbar_container .btn {
  margin-right: 10px;
}

html,
body {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
}

.roboto-medium {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 18px;
  color: #0e3467 !important;
}

.text-center {
  text-align: center;
}

.h-150 {
  height: 150px;
}
.toast {
  font-size: 1.1rem;
  --bs-toast-font-size: 1.1rem;
}
.toast .fs-8{
  font-size: 1rem !important;
}
/*END ALL*/
/*HEADER*/
.app-navbar .la-user-circle {
  position: fixed;
  top: 10px;
  right: 10px;
  font-size: 30px;
}

.app-navbar .menu,
.app-navbar .menu:hover {
  position: fixed;
  right: 10px !important;
  top: 40px !important;
  transform: none !important;
}

/*ENDHEADER*/
/*HOME*/

.qr-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
  background-size: 100% 100%;
}

#pointsBalance {
  font-size: 2rem;
  font-weight: bold;
  color: #007bff;
  margin-top: 20px;
  text-align: center;
}

.page-inicio .logo-user {
  height: 120px;
  margin-top: 20px;
}

.page-inicio h1 {
  text-align: center;
  margin-top: 20px;
}

.page-inicio .card .card-body {
  padding: 1rem 2.25rem;
}

.page-inicio #togglePointsBt {
  width: 100%;
}

.page-inicio .card-qr {
  background-image: url("/assets/img/Background-light.png");
  margin-top: 60px;
  background-size: 100% 100%;
}

.page-inicio .toast {
  width: 100%;
  margin-top: 20px;
}

.is_cancelled {
  text-decoration: line-through;
  background-color: var(--bs-danger);
  color: var(--bs-danger-text);
}

.span_cancelled {
  text-decoration: none;
  float: right;
  color: #fff;
}

.is_cancelled .toast-header {
  background-color: var(--bs-danger);
  color: var(--bs-danger-text);
}

.app-navbar .la-user-circle {
  position: fixed;
  top: 10px;
  right: 30px;
  font-size: 30px;
  z-index: 9999;
}

.page-inicio {
  display: flex;
  align-items: center;
  justify-content: center;
}

/*END HOME*/
/*LOGIN*/

.p-login {
  padding-top: 5rem !important;
  padding-bottom: 0rem !important;
}

#kt_password_reset_form {
  display: none;
}

#kt_sign_up_form {
  display: none;
}

.link-sign-in {
  display: none;
  text-align: center;
}

.link-sign-up {
  text-align: center;
}

.page-login #alert {
  padding: 5px !Important;
  margin-top: 20px;
}

.page-login {
  background-image: url("/assets/img/Background-light.png");
  background-size: 100% 100%;
}

/*END LOGIN*/

/*REGISTER*/

.page-rexistrar .img-camera {

  display: block;
  margin: auto;
  width: 50%;
  margin-top: 80px;
}

.page-rexistrar .card {
  background-image: url("/assets/img/Background-light.png");
  background-size: 100% 100%;
  width: calc(100% - 40px);
}

.page-rexistrar {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 40px;
}

/*END REGISTER*/

/*QR*/
.page-qr {
  max-width: 800px;
  margin: auto;
  display: flex;
  align-items: center;
  margin-top: 60px;
}

.row-registred .card {
  background-image: url("/assets/img/Background-light.png");
  background-size: 100% 100%;
}

.page-qr .btn-qr.active {
  color: var(--bs-text-primary) !important;
  background-color: var(--bs-primary-light) !important;
}

.page-qr .btn-qr:not(.active) {
  color: var(--bs-text-gray-700) !important;
}
.page-qr .btn{
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}
.page-qr .submit-registred {
  width: 100%;
  margin-top: 20px;
}

.page-qr .image-preview-container {
  width: 100%;
  max-width: 300px;
  /* Tamaño máximo para la previsualización */
  height: 200px;
  border: 2px dashed #e0e0e0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  margin-bottom: 20px;
  border-radius: var(--bs-border-radius);
  /* Usar variable de Metronic si está disponible */
  background-color: var(--bs-gray-100);
  /* Fondo claro de Metronic */
}
.page-qr .active{
  background-color: var(--bs-primary-light) !important;
}
.page-qr .btn-qr{
  font-size: 1.5rem;
}
.page-qr .btn-qr i{
  font-size: 1.5rem;
}
.page-qr .image-preview-container img {
  width: 100%;
  max-width: 300px;
  height: 200px;
  object-fit: cover;
  /* Para que la imagen se ajuste sin distorsionarse */
  display: none;
  /* Oculto por defecto hasta que haya imagen */
}

.page-qr .image-preview-container .placeholder-text {
  color: var(--bs-gray-500);
  /* Color de texto de Metronic */
  font-size: 1rem;
  text-align: center;
  padding: 10px;
}

/* Estilos para el botón de carga, usando clases de Metronic */
.page-qr .file-upload-wrapper {
  position: relative;
  overflow: hidden;
  display: inline-block;
  width: 100%;
  /* Para que ocupe todo el ancho disponible */
}

.page-qr .file-upload-wrapper input[type="file"] {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.page-qr .imageUpload {
  display: none;
}

.page-qr #btn-register {
  display: none;
}

.page-qr .span-cancel {
  display: none;
}

.page-qr .toast {
  width: 100%;
  margin-bottom: 10px;
}

.page-qr .row-view {
  max-width: 400px;
  width: 100%;
  padding: 10px;
}

.page-qr .toast-cancel.is_cancelled {
  background-color: var(--bs-danger) !important;
}

.page-qr .toast-cancel {
  background-color: var(--bs-danger-light) !important;
}

.page-qr .toast-cancel.is_cancelled .toast-header {
  background-color: var(--bs-danger) !important;
}

.page-qr .toast-cancel .toast-header {
  background-color: var(--bs-danger-light) !important;
}

.page-qr .row-view {
  display: none;
}

/*END QR*/
/*TENDAS*/

.page-tenda .col-purchases {
  padding-left: 0;
  padding-right: 0;
  margin-top: 20px;
}

/*END BUSCAR TENDAS*/

/*USER_USER*/
.page-usuario .col-purchases {
  padding-left: 0;
  padding-right: 0;
  margin-top: 20px;
}

/*END USER_USER*/
/*PURCHASES*/
.page-compras .toast{
  width:100%;
  margin-bottom: 10px;
}
.page-compras .logo-user{
  width:25%;
  margin: auto;
}
/*END PURCHASES*/
/*SIDEBAR*/
[data-kt-app-layout=dark-sidebar] .app-sidebar {
  background-color: #0e3467;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .btn-custom {
  color: #fff;
  background-color: #e56300 !important;
}

#kt_app_sidebar_menu_scroll i {
  font-size: 1.5rem;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-icon i {
  color: #9A9CAE;
}

.btn-check:checked+[data-kt-app-layout=dark-sidebar] .app-sidebar .btn-custom,
.btn-check:active+[data-kt-app-layout=dark-sidebar] .app-sidebar .btn-custom,
[data-kt-app-layout=dark-sidebar] .app-sidebar .btn-custom:focus:not(.btn-active),
[data-kt-app-layout=dark-sidebar] .app-sidebar .btn-custom:hover:not(.btn-active),
[data-kt-app-layout=dark-sidebar] .app-sidebar .btn-custom:active:not(.btn-active),
[data-kt-app-layout=dark-sidebar] .app-sidebar .btn-custom.active,
[data-kt-app-layout=dark-sidebar] .app-sidebar .btn-custom.show,
.show>[data-kt-app-layout=dark-sidebar] .app-sidebar .btn-custom {
  color: #fff;
  background-color: #e56300 !important;
}

/*END SIDEBAR*/
/*ASIGNAR*/
/* Animación para los inputs y botones del modal */
.page-asignar .animated-input:focus,
.page-asignar .animated-button:active {
    transform: scale(1.02); /* Escala ligeramente el elemento */
    transition: transform 0.2s ease-in-out; /* Transición suave */
    box-shadow: 0 0 8px rgba(77, 144, 254, 0.6); /* Sombra azul para el enfoque */
}
.page-asignar .modal-header{
  background-color: #0e3467;
}
.page-asignar .modal-header .btn-icon {
    background-color:#fff !important;
} 
.page-asignar  #kt_modal_assign_points_submit {
    background-color:#0e3467 !important;
} 
.page-asignar #kt_modal_assign_points_submit:hover {
    background-color:#0e2457 !important;
} 
/* Restaura el estado normal al quitar el foco o soltar el botón */
.page-asignar .animated-input,
.page-asignar .animated-button {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
/*END ASIGNAR*/
/*RESPONSIVE*/
@media only screen and (min-width: 992px) {
  .logo-mobile {
    display: none;
  }

  .flex-column-logo {
    align-items: flex-start;
  }
}

@media only screen and (max-width: 991px) {
  .mobile-gutter {
    margin-bottom: 1.75rem !important;
  }
}

/*END RESPONSIVE*/

/**ANIMACIONES/
/* Estilos para el contenedor del texto */
        .kinetic-text-container {
            font-size: 2rem; /* Tamaño grande para el efecto */
            font-weight: 800; /* Negrita para mayor impacto */
            color: #693591; /* Color de texto oscuro por defecto */
            text-align: center;
            overflow: hidden; /* Oculta el desbordamiento de las letras individuales */
            white-space: nowrap; /* Evita que el texto se rompa en varias líneas */
            display: inline-block; /* Permite que el contenedor se ajuste al contenido */
            border-right: 0.15em solid orange; /* Cursor de máquina de escribir */
            animation:
                typing 3.5s steps(40, end) forwards, /* Simula la escritura */
                blink-caret .75s step-end infinite; /* Cursor parpadeante */
            width: 0; /* Inicialmente sin ancho para el efecto de escritura */
        }

        /* Estilos para cada letra individual (se usan para el retraso, pero la animación principal es en el contenedor) */
        .kinetic-text-container .char {
            display: inline-block; /* Permite que el JavaScript maneje los caracteres */
            opacity: 1; /* Las letras ya son visibles, el efecto de escritura se maneja por el ancho del contenedor */
        }

        /* Definición de la animación keyframes para el efecto de máquina de escribir */
        @keyframes typing {
            from { width: 0 }
            to { width: 100% } /* El texto se "escribe" aumentando el ancho */
        }

        /* Animación para el cursor parpadeante */
        @keyframes blink-caret {
            from, to { border-color: transparent }
            50% { border-color: #fff0e0; } /* El color del cursor */
        }
/*END ANIMACIONES*/