/* ============================================================
   GBoX WordPress Plugin — gbox-preview.css
   Estilos de la vista previa de capas clara y directa
   ============================================================ */

.gbox-preview-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.gbox-preview-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 12px;
}

.gbox-preview-tab {
  padding: 6px 14px;
  border-radius: var(--gbox-r-full);
  background: var(--gbox-surface-3);
  border: 1.5px solid var(--gbox-border);
  font-size: 12px;
  font-weight: 700;
  color: var(--gbox-text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
}

.gbox-preview-tab.is-active {
  background: var(--gbox-gold);
  color: #FFF;
  border-color: var(--gbox-gold);
  box-shadow: 0 4px 12px rgba(201,151,59,0.3);
}

.gbox-layer-card {
  background: var(--gbox-surface-2);
  border: 1.5px solid var(--gbox-border);
  border-radius: var(--gbox-r-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gbox-layer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--gbox-border-light);
  padding-bottom: 8px;
}

.gbox-layer-title { font-size: 15px; font-weight: 800; color: var(--gbox-text); }
.gbox-layer-size { font-size: 12px; color: var(--gbox-text-muted); font-weight: 600; }

.gbox-walls-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}

.gbox-preview-wall {
  background: var(--gbox-surface);
  border: 1px solid var(--gbox-border-light);
  border-radius: var(--gbox-r-md);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.gbox-preview-wall-name {
  font-size: 10px; font-weight: 700; color: var(--gbox-text-light); text-transform: uppercase;
}

.gbox-preview-item {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--gbox-surface-2);
  padding: 4px 6px;
  border-radius: var(--gbox-r-sm);
  border: 1px solid var(--gbox-border-light);
}

.gbox-preview-item-img {
  width: 28px; height: 28px; border-radius: 4px; object-fit: cover;
}

.gbox-preview-item-name {
  font-size: 11px; font-weight: 700; color: var(--gbox-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1;
}

.gbox-preview-item-price {
  font-size: 10px; font-weight: 800; color: var(--gbox-gold-dark);
}