/**
 * FULLWIDTH CLIENT THEME - Widgets & Notification Center & Marketplace
 */

/* ============ WIDGET CONTAINER ============ */
.fw-widget { background: var(--fw-surface); border: 1px solid var(--fw-border); border-radius: var(--fw-radius-lg); box-shadow: var(--fw-shadow-sm); }
.fw-widget-header { display: flex; align-items: center; justify-content: space-between; padding: var(--fw-space-5) var(--fw-space-6); border-bottom: 1px solid var(--fw-border); }
.fw-widget-title { font-size: var(--fw-fs-md); font-weight: var(--fw-fw-semibold); margin: 0; }
.fw-widget-body { padding: var(--fw-space-6); }
.fw-widget-link { font-size: var(--fw-fs-xs); font-weight: var(--fw-fw-semibold); }
.fw-widget-drag-handle { cursor: grab; color: var(--fw-text-muted); }
.fw-widget.fw-sortable-ghost { opacity: 0.4; }
.fw-widget.fw-sortable-drag { box-shadow: var(--fw-shadow-lg); }

/* ============ NOTIFICATION CENTER (estilo chat) ============ */
.fw-notif-panel {
  width: 380px;
  max-height: 520px;
  display: flex;
  flex-direction: column;
  background: var(--fw-surface);
  border: 1px solid var(--fw-border);
  border-radius: var(--fw-radius-lg);
  box-shadow: var(--fw-shadow-xl);
  overflow: hidden;
}
.fw-notif-panel-header { display: flex; align-items: center; justify-content: space-between; padding: var(--fw-space-4) var(--fw-space-5); border-bottom: 1px solid var(--fw-border); }
.fw-notif-list { overflow-y: auto; flex: 1; }
.fw-notif-item {
  display: flex; gap: var(--fw-space-3);
  padding: var(--fw-space-4) var(--fw-space-5);
  border-bottom: 1px solid var(--fw-border);
  cursor: pointer;
  transition: var(--fw-transition);
}
.fw-notif-item:hover { background: var(--fw-surface-alt); }
.fw-notif-item.unread { background: var(--fw-primary-50); }
.fw-notif-icon {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.fw-notif-icon.info { background: var(--fw-info-bg); color: var(--fw-info); }
.fw-notif-icon.success { background: var(--fw-success-bg); color: var(--fw-success); }
.fw-notif-icon.warning { background: var(--fw-warning-bg); color: var(--fw-warning); }
.fw-notif-icon.danger { background: var(--fw-danger-bg); color: var(--fw-danger); }
.fw-notif-body { flex: 1; min-width: 0; }
.fw-notif-title { font-size: var(--fw-fs-sm); font-weight: var(--fw-fw-semibold); color: var(--fw-text-primary); }
.fw-notif-text { font-size: var(--fw-fs-xs); color: var(--fw-text-secondary); margin-top: 2px; }
.fw-notif-time { font-size: 0.6875rem; color: var(--fw-text-muted); margin-top: var(--fw-space-2); }
.fw-notif-action { display: inline-block; margin-top: var(--fw-space-2); font-size: var(--fw-fs-xs); font-weight: var(--fw-fw-semibold); }
.fw-notif-panel-footer { padding: var(--fw-space-3) var(--fw-space-5); text-align: center; border-top: 1px solid var(--fw-border); font-size: var(--fw-fs-xs); font-weight: var(--fw-fw-semibold); }

/* ============ MARKETPLACE ============ */
.fw-market-filters { display: flex; gap: var(--fw-space-2); flex-wrap: wrap; margin-bottom: var(--fw-space-6); }
.fw-market-filter {
  padding: var(--fw-space-2) var(--fw-space-4);
  border-radius: var(--fw-radius-full);
  border: 1px solid var(--fw-border);
  font-size: var(--fw-fs-xs);
  font-weight: var(--fw-fw-medium);
  color: var(--fw-text-secondary);
  cursor: pointer;
  transition: var(--fw-transition);
  background: var(--fw-surface);
  flex-shrink: 0;
}
.fw-market-filter:hover { border-color: var(--fw-primary); color: var(--fw-primary); }
.fw-market-filter.active { background: var(--fw-dark); border-color: var(--fw-dark); color: var(--fw-white); }

.fw-market-card {
  display: flex; flex-direction: column;
  background: var(--fw-surface);
  border: 1px solid var(--fw-border);
  border-radius: var(--fw-radius-lg);
  overflow: hidden;
  transition: var(--fw-transition);
  height: 100%;
}
.fw-market-card:hover { box-shadow: var(--fw-shadow-md); transform: translateY(-3px); border-color: var(--fw-border-strong); }
.fw-market-card-media {
  height: 120px;
  display: flex; align-items: center; justify-content: center;
  background: var(--fw-primary-50);
  color: var(--fw-primary);
}
.fw-market-card-media svg { width: 40px; height: 40px; }
.fw-market-card-body { padding: var(--fw-space-5); display: flex; flex-direction: column; gap: var(--fw-space-2); flex: 1; }
.fw-market-card-category { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fw-text-muted); font-weight: var(--fw-fw-semibold); }
.fw-market-card-title { font-size: var(--fw-fs-md); font-weight: var(--fw-fw-semibold); margin: 0; }
.fw-market-card-desc { font-size: var(--fw-fs-xs); color: var(--fw-text-secondary); flex: 1; }
.fw-market-card-footer { display: flex; align-items: center; justify-content: space-between; padding-top: var(--fw-space-3); border-top: 1px solid var(--fw-border); margin-top: var(--fw-space-2); }
.fw-market-card-price { font-size: var(--fw-fs-lg); font-weight: var(--fw-fw-bold); color: var(--fw-text-primary); }
.fw-market-card-price span { font-size: var(--fw-fs-xs); font-weight: var(--fw-fw-regular); color: var(--fw-text-muted); }

/* ============ STATUS WIDGET (BetterStack / iframe / html) ============ */
.fw-status-widget-frame { width: 100%; border: none; border-radius: var(--fw-radius-md); min-height: 120px; }

/* ============ NOTIFICATION PANEL (ancho fijo en desktop) ============ */
.fw-notif-dropdown { width: 380px; }

/* ============ MOBILE ============ */
@media (max-width: 480px) {
  .fw-notif-dropdown {
    position: fixed;
    left: var(--fw-space-3);
    right: var(--fw-space-3);
    top: calc(var(--fw-header-height) + 8px);
    width: auto;
    max-height: calc(100vh - var(--fw-header-height) - 24px);
  }
  .fw-notif-panel { width: 100%; max-height: none; }
  .fw-dropdown-menu { max-width: calc(100vw - 2rem); }

  /* Fila de categorias/acciones con scroll horizontal: sin barra visible, sin que los chips se achiquen */
  .fw-store-mobile-categories.fw-market-filters { -ms-overflow-style: none; scrollbar-width: none; }
  .fw-store-mobile-categories.fw-market-filters::-webkit-scrollbar { display: none; }
}