/**
 * Listado Socios Mobile - Ver Más Feature
 * Solo aplica para viewports <= 600px
 */

/* Desktop: el botón "Ver más" no se muestra */
.listado-socios-ver-mas-container {
  display: none;
}

/* Definición de la animación */
@keyframes fadeSlideIn {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile: estilos específicos */
@media (max-width: 600px) {
  /* Ocultar columnas 2-6 por defecto */
  .listado-socios .listado-socios-col-2,
  .listado-socios .listado-socios-col-3,
  .listado-socios .listado-socios-col-4,
  .listado-socios .listado-socios-col-5,
  .listado-socios .listado-socios-col-6 {
    display: none;
    opacity: 0;
  }

  /* Mostrar columna cuando tiene clase .visible con animación */
  .listado-socios .listado-socios-col-2.visible,
  .listado-socios .listado-socios-col-3.visible,
  .listado-socios .listado-socios-col-4.visible,
  .listado-socios .listado-socios-col-5.visible,
  .listado-socios .listado-socios-col-6.visible {
    display: block;
    animation: fadeSlideIn 0.5s ease-out forwards;
  }

  /* Contenedor del botón */
  .listado-socios-ver-mas-container {
    display: flex;
    justify-content: center;
    padding: 20px 0;
    width: 100%;
    transition: opacity 0.3s ease;
  }

  /* Estilo del botón "Ver más" */
  .listado-socios-ver-mas-btn {
    background-color: #0f3780;
    color: #ffffff;
    border: none;
    padding: 12px 30px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.3s ease, transform 0.2s ease,
      box-shadow 0.3s ease;
    box-shadow: 0 2px 8px rgba(15, 55, 128, 0.3);
  }

  .listado-socios-ver-mas-btn:hover {
    background-color: #0fb4d4;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(15, 180, 212, 0.4);
  }

  .listado-socios-ver-mas-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(15, 55, 128, 0.3);
  }

  /* Ocultar botón cuando ya no hay más columnas */
  .listado-socios-ver-mas-container.hidden {
    display: none;
  }
}