/* === Barra inferior móvil tipo app (SwingerLat) === */
@media (max-width: 768px) {
  .mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background-color: #111; /* fondo oscuro */
    border-top: 1px solid #333;
    display: flex;
    justify-content: space-around;
    padding: 8px 0;
  }

  .mobile-bottom-nav .nav-icons {
    display: flex;
    justify-content: space-around;
    width: 100%;
  }

  .mobile-bottom-nav .nav-item {
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
  }

  .mobile-bottom-nav .nav-item i {
    font-size: 20px;
    margin-bottom: 2px;
  }

  .mobile-bottom-nav .nav-item .badge {
    position: absolute;
    top: -2px;
    right: 10px;
    background-color: #e74c3c;
    color: white;
    font-size: 10px;
    border-radius: 10px;
    padding: 0 5px;
  }

  body {
    padding-bottom: 70px; /* evita que el contenido quede tapado */
  }
}

/* === Footer completo visible (SwingerLat) === */
.footer {
  background-color: #1b1c25;
  color: #c5c6d0;
  text-align: center;
  padding: 22px 10px 48px !important; /* aumenta padding inferior */
  width: 100%;
  overflow: visible !important; /* evita recorte */
  box-sizing: border-box;
  line-height: 1.6;
}

/* En pantallas pequeñas (móvil) añade espacio extra */
@media (max-width: 768px) {
  .footer {
    padding-bottom: 70px !important; /* asegura que no lo tape la barra */
  }
}

/* === CHECKS ESTILO WHATSAPP SWINGERLAT === */

/* Contenedor del estado de mensaje */
.message-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  font-size: 12px;
  color: var(--meta-color, #aaa);
  margin-top: 3px;
}

/* Iconos individuales */
.message-status {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: bold;
  gap: 1px;
  margin-left: 3px;
  opacity: 0.8;
  transition: color 0.3s ease, opacity 0.3s ease, transform 0.2s ease;
}

/* Check simple (enviado) */
.check-sent {
  color: #999;
  opacity: 0.7;
}

/* Doble check (entregado pero no leído) */
.check-delivered {
  color: #ccc;
  opacity: 0.8;
}

/* Doble check azul (leído) — WhatsApp style adaptado */
.check-seen {
  color: #34B7F1; /* azul clásico WhatsApp */
  opacity: 1;
  text-shadow: 0 0 6px rgba(52, 183, 241, 0.4);
  transform: scale(1.05);
}

/* Animación de aparición */
@keyframes checkAppear {
  from { transform: scale(0.6); opacity: 0.2; }
  to { transform: scale(1); opacity: 1; }
}

.check-animated {
  animation: checkAppear 0.25s ease-out;
}

/* === Colores adaptados al tema === */

/* MODO OSCURO */
body.theme-dark .check-sent { color: #777; }
body.theme-dark .check-delivered { color: #999; }
body.theme-dark .check-seen { color: #34B7F1; }

/* MODO CLARO */
body.theme-light .check-sent { color: #666; }
body.theme-light .check-delivered { color: #999; }
body.theme-light .check-seen { color: #0A84FF; }

/* === Ajuste de iconos superiores (campana y saldo) === */
.header .d-flex.align-items-center.order-lg-2.ml-auto {
  display: flex;
  align-items: center;
  gap: 8px !important; /* reduce la separación entre campana y billete */
}

.header .nav-item,
.header .nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

/* Ajustar tamaño y espaciado del icono de saldo */
.header .btn-outline-primary.btn-sm {
  padding: 4px 8px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.header .btn-outline-primary.btn-sm i {
  font-size: 17px;
  margin-right: 4px;
}

/* === CHECKS SwingerLat: color azul modo claro/oscuro === */
body.theme-light .check-seen {
  color: #0056D6 !important; /* azul intenso para modo claro */
  opacity: 1 !important;
}

body.theme-dark .check-seen {
  color: #34B7F1 !important; /* azul WhatsApp para modo oscuro */
  opacity: 1 !important;
}

/* === Corrección para vista móvil ==29/10/2025= */
@media (max-width: 768px) {
  body.theme-light .check-seen {
    color: #0056D6 !important;
  }
  body.theme-dark .check-seen {
    color: #34B7F1 !important;
  }
}