/*Notificacion*/
 .footer-item {
    position: relative; /* Permitir posicionamiento relativo para el badge */
}

.icon-container {
    position: relative; /* Permitir posicionamiento relativo para el badge */
}

.badgeNot {
    position: absolute;
    top: -5px; /* Ajusta según sea necesario */
    right: -10px; /* Ajusta según sea necesario */
    background-color: green; /* Color de fondo */
    color: white; /* Color del texto */
    border-radius: 50%; /* Hacer que el badge sea circular */
    width: 20px; /* Ajusta el tamaño */
    height: 20px; /* Ajusta el tamaño */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px; /* Tamaño del texto */
        right: 40px;
}

 /*Login*/
   
   
   
        body {
            background-color: #020202;
            color: white;
            /*display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;*/
            margin: 0;
        }

        .login-wrapper {
            text-align: center; /* Centra el contenido del contenedor */
                margin-top: 100px;
        }

        .login-container {
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            padding: 30px;
            width: 90%;
            max-width: 400px;
            margin: 0 auto; /* Centra el contenedor horizontalmente */
        }

        .logo {
            width: 150px; /* Tamaño del logo */
            margin-bottom: 20px;
        }

        .form-control1 {
            background-color: transparent;
            border: 1px solid #ffffff;
            color: #ffffff;
        }

        .form-control1:focus {
            background-color: transparent;
            border-color: #ffffff;
            box-shadow: none;
        }

        .btn-primary {
            background-color: #007bff;
            border: none;
        }

        .btn-primary:hover {
            background-color: #0056b3;
        }
        /* Estilo oscuro */
        /*body {
            background-color: #121212;
            color: white;
            margin: 0;
            padding: 0;
        }*/

        .bg-primary, header, footer {
            background-color: black !important;
        }

        .icon {
            font-size: 1.5rem;
        }

        /* Barra lateral (sidebar) */
        .sidebar {
            display: none; /* Oculto en pantallas pequeñas */
            background-color: #1f1f1f;
            height: 100vh;
            position: fixed;
            top: 0;
            left: 0;
            width: 250px;
            padding-top: 20px;
            z-index: 1000;
        }

        .sidebar a {
            padding: 10px 15px;
            display: block;
            color: white;
            text-decoration: none;
        }

        .sidebar a:hover {
            background-color: #575757;
        }

        /* Ajuste del contenido cuando la barra lateral está activa */
        .content {
            margin-left: 0;
            transition: all 0.3s ease;
            padding-top: 70px; /* Espacio para el header */
        }

        .content.with-sidebar {
            margin-left: 250px; /* Ajuste para contenido con barra lateral visible */
        }
        
        .footer-item.active {
            color: #007bff; 
        }

        /* Pie de página para móviles */
        footer {
            display: flex;
            justify-content: space-around;
            align-items: center;
            position: fixed;
            bottom: 0;
            width: 100%;
            background-color: #120f0fdb !important;;
            padding: 10px 0;
            z-index: 1000;
            border-top: 1px solid #525151;
        }

        .footer-item {
            text-align: center;
            flex: 1; /* Asegura que cada icono ocupe el mismo espacio */
        }
        .footer-item p {
            margin-bottom: 5px;
            
        }

        /* Para pantallas grandes (escritorio) */
        @media (min-width: 992px) {
            .sidebar {
                display: block; /* Mostrar barra lateral en pantallas grandes */
            }
            footer {
                display: none !important; /* Ocultar footer en pantallas grandes */
            }
        }

        /* Estilo para el header */
        header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 2000; /* Asegúrate de que el header esté por encima */
        }

        /* Ajustar el margen del contenido para no cubrir el header */
        .content {
            padding-top: 70px; /* Ajusta esto según la altura de tu header */
        }
        
        /*Tokens*/
        
        .card-img-top {
            height: 150px; /* Altura fija para las imágenes */
            object-fit: cover; /* Asegura que la imagen se recorte en caso de ser necesario */
        }
        .filter-input {
            margin-bottom: 15px;
        }
        .dropdown-menu {
            right: 0; /* Alinear el menú a la derecha */
            left: auto; /* Evitar que se alinee a la izquierda */
        }
        .menu-button {
            position: absolute; /* Posicionar el botón en la parte superior */
            top: 10px; /* Espacio desde la parte superior */
            right: 10px; /* Espacio desde la derecha */
            z-index: 11; /* Asegura que esté encima de la imagen */
        }
        .progress {
            height: 18px; /* Altura de la barra de progreso */
        }
        .column-name-symbol {
            flex: 0 0 65%; /* 65% de ancho para el nombre y símbolo */
        }
        .column-progress {
            flex: 0 0 35%; /* 35% de ancho para la barra de progreso */
        }
        .hidden {
            display:none;
        }
        
        /*VER LISTADO*/
        .client-card {
            display: flex;
            align-items: flex-start;
            padding: 15px;
            border: 1px solid #dee2e6;
            border-radius: 5px;
            margin-bottom: 10px;
            background-color: #000000;
            position: relative; /* Para posicionar el menú en la parte superior derecha */
            background: #101f1f;
        }

        .avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            margin-right: 15px;
        }

        .client-info {
            flex-grow: 1;
        }

        .menu-dropdown {
            position: absolute;
            top: 15px;
            right: 15px;
        }

        .whatsapp-button {
            margin-top: 10px;
            justify-content: space-between;
            align-items: stretch;
        }

        .search-bar {
            margin-bottom: 20px;
        }
        
/*LOADINGMESSAGE*/

/* Estilo del overlay */
        #overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7); /* Fondo semitransparente */
            z-index: 1040; /* Asegúrate de que esté por encima de otros elementos */
            display: flex; /* Para centrar el contenido */
            justify-content: center; /* Centrar horizontalmente */
            align-items: center; /* Centrar verticalmente */
            visibility: hidden; /* Ocultado inicialmente */
            opacity: 0; /* Opacidad inicial */
            transition: visibility 0s, opacity 0.5s linear; /* Transición suave */
        }

        /* Estilo para mostrar el overlay */
        #overlay.show {
            visibility: visible; /* Hacer visible cuando se activa */
            opacity: 1; /* Aumentar opacidad cuando se activa */
        }

        #loadingMessage {
            color: white; /* Color del texto para mayor visibilidad */
            text-align: center; /* Centrar texto */
        }
/*CARRUSEL*/
.carousel-inner img {
            width: 100%;
            height: 300px; /* Puedes ajustar la altura según lo que necesites */
            object-fit: cover; /* Recorta la imagen para que se ajuste al contenedor */
        }
      .card-title {
        font-size: 1.25rem; /* Tamaño de fuente */
        font-weight: bold; /* Negrita */
        color: white; /* Color azul */
        text-transform: uppercase; /* Texto en mayúsculas */
        margin-bottom: 10px; /* Separación inferior */
      }