/**
 * Estilos para WP Google Drive Viewer v9.1
 * 
 * Diseño plano y moderno con dos vistas:
 * - Vista de cuadrícula (grid): Tarjetas en formato de galería
 * - Vista de lista (list): Listado lineal estilo explorador de archivos
 * 
 * @package WPGDrive
 * @version 9.1
 */

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

.wpgdrive-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* ========================================
   BREADCRUMB (MIGAS DE PAN)
   ======================================== */

/**
 * Navegación por carpetas
 * Muestra el camino desde la raíz hasta la carpeta actual
 */
.wpgdrive-breadcrumb {
  font-size: 28px;
  font-weight: 300;
  color: #333;
  margin-bottom: 20px;
  letter-spacing: 0.5px;
}

.wpgdrive-breadcrumb a {
  color: #333;
  text-decoration: none;
  transition: color 0.2s;
}

.wpgdrive-breadcrumb a:hover {
  color: #666;
}

/* Separador entre niveles */
.wpgdrive-breadcrumb .separator {
  margin: 0 8px;
  color: #999;
}

/* Carpeta actual (no es enlace) */
.wpgdrive-breadcrumb .current {
  color: #666;
}

/* ========================================
   BOTONES DE CAMBIO DE VISTA
   ======================================== */

/**
 * Botones para alternar entre vista de cuadrícula y lista
 * Ubicados en la esquina superior derecha
 */
.wpgdrive-view-toggle {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  justify-content: flex-end;
}

.view-btn {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px 12px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.view-btn:hover {
  background: #f8f9fa;
  border-color: #999;
}

/* Botón activo (vista actual) */
.view-btn.active {
  background: #1a73e8;
  border-color: #1a73e8;
  color: white;
}

.view-btn svg {
  display: block;
}

/* SVG del botón activo en color blanco */
.view-btn.active svg {
  stroke: white;
}

/* ========================================
   CONTENEDOR DE ARCHIVOS - VISTA GRID
   ======================================== */

/**
 * Vista de cuadrícula (por defecto)
 * Muestra archivos en formato de tarjetas
 */
.wpgdrive-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0;
  margin-top: 20px;
}

/* ========================================
   VISTA DE LISTA
   ======================================== */

/**
 * Vista de lista activada mediante data-view="list"
 * Muestra archivos en formato lineal tipo explorador
 * Orden: [Icono] [Botones] [Nombre]
 */
.wpgdrive-wrapper[data-view="list"] .wpgdrive-content {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.wpgdrive-wrapper[data-view="list"] .wpgdrive-item {
  padding: 12px 20px;
  border-bottom: 1px solid #eee;
}

.wpgdrive-wrapper[data-view="list"] .wpgdrive-item:hover {
  background: #f8f9fa;
  transform: none;
  box-shadow: none;
}

/* Estructura horizontal en vista de lista */
.wpgdrive-wrapper[data-view="list"] .item-content,
.wpgdrive-wrapper[data-view="list"] .item-link {
  flex-direction: row;
  align-items: center;
  gap: 15px;
  justify-content: flex-start;
}

/* Icono más pequeño en vista de lista */
.wpgdrive-wrapper[data-view="list"] .wpgdrive-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 0;
  flex-shrink: 0;
}

/* Botones de acción después del icono */
.wpgdrive-wrapper[data-view="list"] .item-actions {
  margin-top: 0;
  margin-left: 0;
  order: 2; /* Segundo en el orden */
  flex-shrink: 0;
}

/* Nombre del archivo al final, ocupando espacio disponible */
.wpgdrive-wrapper[data-view="list"] .name {
  text-align: left;
  margin: 0;
  flex: 1;
  min-height: auto;
  justify-content: flex-start;
  order: 3; /* Tercero en el orden */
}

/* ========================================
   ITEM INDIVIDUAL (ARCHIVO O CARPETA)
   ======================================== */

/**
 * Cada archivo/carpeta en vista de cuadrícula
 * Diseño plano sin bordes
 */
.wpgdrive-item {
  padding: 20px;
  transition: all 0.2s ease;
  background: transparent;
  cursor: pointer;
}

/* Efecto hover en vista de cuadrícula */
.wpgdrive-item:hover {
  background: #f8f9fa;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}

/* ========================================
   CONTENIDO DEL ITEM
   ======================================== */

/**
 * Contenedor del contenido de archivos y carpetas
 * Por defecto en columna (vista grid)
 */
.item-content,
.item-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

/* ========================================
   ICONOS DE ARCHIVOS
   ======================================== */

/**
 * Iconos que representan el tipo de archivo
 * (carpeta, PDF, imagen, video, etc.)
 */
.wpgdrive-icon {
  width: 80px;
  height: 80px;
  margin-bottom: 12px;
  object-fit: contain;
}

/* ========================================
   NOMBRE DEL ARCHIVO/CARPETA
   ======================================== */

/**
 * Texto con el nombre del archivo o carpeta
 * Se muestra sin extensión
 */
.name {
  font-size: 14px;
  color: #202124;
  margin: 8px 0;
  text-align: center;
  word-wrap: break-word;
  line-height: 1.4;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ========================================
   ACCIONES (VER, DESCARGAR, REPRODUCIR)
   ======================================== */

/**
 * Contenedor de botones de acción para archivos
 * - Ver/Reproducir
 * - Descargar
 */
.item-actions {
  display: flex;
  gap: 12px;
  margin-top: 8px;
  justify-content: center;
}

/**
 * Cada botón de acción individual
 */
.action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  transition: all 0.2s;
}

/* Iconos de imagen (ojo, descargar) */
.action-icon img {
  width: 24px;
  height: 24px;
  opacity: 0.7;
  transition: opacity 0.2s;
}

/* Iconos SVG (play para multimedia) */
.action-icon svg {
  width: 24px;
  height: 24px;
  opacity: 0.7;
  transition: opacity 0.2s;
  color: #1a73e8;
}

/* Efecto hover en iconos */
.action-icon:hover img,
.action-icon:hover svg {
  opacity: 1;
}

/* ========================================
   RESPONSIVE - DISPOSITIVOS MÓVILES
   ======================================== */

/**
 * Ajustes para pantallas pequeñas (< 768px)
 */
@media (max-width: 768px) {
  /* Grid más compacto */
  .wpgdrive-content {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
  
  /* Breadcrumb más pequeño */
  .wpgdrive-breadcrumb {
    font-size: 20px;
  }
  
  /* Iconos más pequeños en grid */
  .wpgdrive-icon {
    width: 60px;
    height: 60px;
  }
  
  /* Texto más pequeño */
  .name {
    font-size: 13px;
  }
  
  /* Botones centrados en móvil */
  .wpgdrive-view-toggle {
    justify-content: center;
  }
  
  /* Vista de lista optimizada para móvil */
  .wpgdrive-wrapper[data-view="list"] .wpgdrive-icon {
    width: 32px;
    height: 32px;
  }
  
  .wpgdrive-wrapper[data-view="list"] .name {
    font-size: 12px;
  }
}