@media only screen and (max-width: 580px) {
    .logokf img {
      height: 38px !important;
    }
}

 li  > a.show{
  color: brown;
  font-weight: 800;
}

.edit-phone-input{
  display: none;
}

.select-abono-status{
  display: none;
}

    /* Contenedor de las cards que permite el scroll horizontal */
    .cards-scroll-container {
      display: flex; /* Habilita Flexbox */
      flex-wrap: nowrap; /* ¡Clave! Fuerza a las cards a estar en una sola línea */
      overflow-x: auto; /* Habilita el scroll horizontal si el contenido excede el ancho */
      padding: 1rem 0; /* Espacio vertical para las cards */

      /* Oculta la barra de scroll en navegadores específicos */
      -webkit-overflow-scrolling: touch; /* Mejora el rendimiento en dispositivos táctiles */
      -ms-overflow-style: none;  /* IE and Edge */
      scrollbar-width: thin;  /* Firefox */
    }

    /* Oculta la barra de scroll en navegadores basados en WebKit */
    .cards-scroll-container::-webkit-scrollbar {
      display: none;
    }

    /* Estilo para cada card dentro del contenedor desplazable */
    .cards-scroll-container .card {
      flex: 0 0 auto; /* No permite que las cards se encojan, mantendrán su width */
      /*width: 280px;*/ /* Ancho fijo para cada card, ajusta según necesidad */
      margin-right: 15px; /* Espacio entre las cards */
    }

    /* Asegura un poco de espacio al final del scroll */
    .cards-scroll-container .card:last-child {
      margin-right: 0; /* Elimina el margen derecho de la última card */
      padding-right: 15px; /* Añade padding al final del contenedor para el último elemento */
    }

    .user-card-minimal {
      max-width: 24em; /* ~384px si 1em=16px */
      border: none;
      border-radius: 0.75em;
      box-shadow: 0 0.25em 1.25em rgba(0, 0, 0, 0.08);
      overflow: hidden;
      background-color: #ffffff;
    }
    .card-header-minimal {
      background-color: #ffffff;
      padding: 1.875em 1.5625em 0.9375em 1.5625em; /* Padding ajustado */
      border-bottom: none;
      position: relative;
      text-align: center;
    }
    /* Eliminar o ajustar estilos relacionados con el avatar */
    .user-avatar-minimal { /* Esta clase ya no se usa, pero se mantiene si se necesita para otros elementos */
      display: none; /* Oculta el avatar */
    }
    .settings-icon {
      position: absolute;
      top: 0.8em;
      right: 0.8em;
      font-size: 1.3em;
      color: #999;
      transition: color 0.2s ease, transform 0.2s ease;
      cursor: pointer;
      text-decoration: none;
    }
    .settings-icon:hover {
      color: #555;
      transform: rotate(15deg);
    }
    .user-name-minimal {
      font-size: 1.6em;
      font-weight: 600;
      color: #333;
      margin-bottom: 0.25em;
      margin-top: 0.5em; /* Ajuste para el espacio superior al no haber avatar */
    }
    .user-id-minimal {
      font-size: 0.9em;
      color: #888;
      font-weight: 400;
    }
    .card-body-minimal {
      padding: 1.25em 1.5625em 0.3125em 1.5625em;
      text-align: center;
    }
    .balance-label-minimal {
      font-size: 0.95em;
      color: #777;
      margin-bottom: 0.3125em;
    }
    .balance-amount-minimal {
      font-size: 2.2em;
      font-weight: 700;
      color: #28a745;
      margin-bottom: 1.5625em;
    }
    .list-group-minimal {
      border-top: 0.0625em solid #eee;
      margin-top: 1.25em;
    }
    .list-group-item-minimal {
      background-color: transparent;
      border: none;
      padding: 0.75em 0;
      font-size: 0.95em;
      color: #555;
    }
    .list-group-item-minimal strong {
      color: #444;
      font-weight: 500;
    }
    .value-minimal {
      font-weight: 600;
    }
    .value-minimal.positive {
      color: #28a745;
    }
    .value-minimal.negative {
      color: #dc3545;
    }
    .button-group-minimal {
      display: flex;
      gap: 0.625em;
      margin-top: 1.5625em;
    }
    .btn-minimal {
      padding: 0.75em 0.9375em;
      border-radius: 0.5em;
      font-weight: 600;
      letter-spacing: 0.03125em;
      transition: background-color 0.3s ease, transform 0.2s ease;
      flex: 1;
      text-align: center;
      white-space: nowrap;
      font-size: 1em;
    }
    .btn-minimal-primary {
      background-color: #007bff;
      border-color: #007bff;
      color: white;
    }
    .btn-minimal-primary:hover {
      background-color: #0056b3;
      border-color: #0056b3;
      transform: translateY(-0.0625em);
    }
    .btn-minimal-secondary {
      background-color: #6c757d;
      border-color: #6c757d;
      color: white;
    }
    .btn-minimal-secondary:hover {
      background-color: #5a6268;
      border-color: #5a6268;
      transform: translateY(-0.0625em);
    }
    .card-footer-minimal {
      background-color: #ffffff;
      border-top: none;
      padding: 0.9375em 1.5625em 1.5625em 1.5625em;
      color: #999;
      font-size: 0.8em;
      text-align: center;
    }

    .floating-button {
            position: fixed;
            bottom: 20px; /* Ajusta la distancia desde abajo */
            right: 20px;  /* Ajusta la distancia desde la derecha */
            z-index: 1000; /* Asegura que esté por encima de otros elementos */
            border-radius: 50%; /* Para que sea circular */
            width: 60px; /* Tamaño del botón */
            height: 60px; /* Tamaño del botón */
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Sombra para efecto flotante */
            transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    }

    .floating-button i {
            font-size: 1.8rem; /* Tamaño del ícono */
    }

    /* Efecto al pasar el mouse (hover) */
    .floating-button:hover {
            transform: scale(1.1) translateY(-5px); /* Escala y levanta un poco el botón */
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); /* Sombra más pronunciada */
            background-color: #0056b3; /* Color de fondo más oscuro al pasar el mouse */
    }

    .delete-user-btn-discreet {
      position: absolute;
      top: 0.8em;
      left: 0.8em;
      font-size: 1.3em;
      color: #999;
      transition: color 0.2s ease, transform 0.2s ease;
      cursor: pointer;
      text-decoration: none;/
    }

    .delete-user-btn-discreet:hover {
        color: #555; /* Rojo de Bootstrap 'danger' al pasar el ratón */
    }

    .modal-body {
      max-height: calc(100vh - 100px); /* Ejemplo: 100vh menos un espacio para header/footer/margenes */
      overflow-y: auto; /* Permite el scroll vertical solo en esta sección */
    }