/**
 * Tenant Grid Component - Estilos Encapsulados
 * 
 * Componente compartido para mostrar grid de tenants
 * Todos los estilos están encapsulados con la clase .tenant-grid-container
 * para evitar conflictos con otras hojas de estilos.
 * 
 * @version 2.0.0
 * @date 2026-02-08
 */

/* ========================================
   CONTENEDOR PRINCIPAL
   ======================================== */

.tenant-grid-container {
  margin-bottom: 40px;
}

/* ========================================
   GRID LAYOUT
   ======================================== */

.tenant-grid-container .tenant-grid {
  margin: 0 auto;
  width: 950px;
  height: 250px;
  padding-top: 10px;
  
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  column-gap: 20px;
  row-gap: 20px;
  overflow-x: hidden;
}

/* ========================================
   ITEMS DEL GRID
   ======================================== */

.tenant-grid-container .tenant-grid__item {
  display: flex;
  width: 140px;
  height: 100px;
  
  /* Sombra */
  box-shadow: -1px -1px 9px 0px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: -1px -1px 9px 0px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: -1px -1px 9px 0px rgba(0, 0, 0, 0.5);
  
  /* Background image (se establece dinámicamente) */
  background-size: 120px;
  background-position: center center;
  background-repeat: no-repeat;
  
  /* Animación de carousel */
  animation: carousel 45s linear infinite;
}

/* Pausar animación al hacer hover sobre el contenedor */
.tenant-grid-container:hover .tenant-grid__item {
  animation-play-state: paused;
}

/* Animación de movimiento horizontal */
@keyframes carousel {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-180vw);
  }
}

/* Estado de carga (antes de lazy load) */
.tenant-grid-container .tenant-grid__item[data-image-url] {
  opacity: 0.3;
  background-color: #f5f5f5;
}

/* Estado cargado (después de lazy load) */
.tenant-grid-container .tenant-grid__item:not([data-image-url]) {
  opacity: 1;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/* Tablets y pantallas medianas (≤1024px) */
@media (max-width: 1024px) {
  .tenant-grid-container .tenant-grid {
    width: 90%;
  }
}

/* Móviles y pantallas pequeñas (≤768px) */
@media (max-width: 768px) {
  .tenant-grid-container .tenant-grid {
    width: 90%;
    height: 200px;
  }
  
  .tenant-grid-container .tenant-grid__item {
    width: 120px;
    height: 80px;
    background-size: 100px;
  }
}

/* Móviles pequeños (≤480px) */
@media (max-width: 480px) {
  .tenant-grid-container .tenant-grid {
    width: 95%;
    height: 180px;
    column-gap: 10px;
    row-gap: 10px;
  }
  
  .tenant-grid-container .tenant-grid__item {
    width: 90px;
    height: 70px;
    background-size: 70px;
  }
}

/* ========================================
   ESTADOS DE CARGA
   ======================================== */

/* Skeleton loading (opcional) */
.tenant-grid-container .tenant-grid__item[data-image-url]::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e0e0e0 50%,
    #f0f0f0 75%
  );
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}