/**
 * FULLWIDTH CLIENT THEME - Dashboard
 * Stat cards, banner principal, estado de infraestructura, acciones rapidas, actividad reciente.
 */

/* ============ STAT CARDS ============ */
.fw-stat-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--fw-space-6);
  background: var(--fw-surface);
  border: 1px solid var(--fw-border);
  border-radius: var(--fw-radius-lg);
  box-shadow: var(--fw-shadow-sm);
  transition: var(--fw-transition);
}
.fw-stat-card:hover { box-shadow: var(--fw-shadow-md); transform: translateY(-2px); }
.fw-stat-card-info { display: flex; flex-direction: column; gap: var(--fw-space-1); }
.fw-stat-card-label { font-size: var(--fw-fs-sm); color: var(--fw-text-muted); font-weight: var(--fw-fw-medium); }
.fw-stat-card-value { font-size: var(--fw-fs-2xl); font-weight: var(--fw-fw-bold); color: var(--fw-text-primary); line-height: 1; }
.fw-stat-card-meta { font-size: var(--fw-fs-xs); color: var(--fw-text-muted); display: flex; align-items: center; gap: var(--fw-space-1); }
.fw-stat-card-meta.up { color: var(--fw-success); }
.fw-stat-card-meta.down { color: var(--fw-danger); }
.fw-stat-card-icon {
  width: 48px; height: 48px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--fw-radius-md);
  background: var(--fw-primary-50);
  color: var(--fw-primary);
}
.fw-stat-card-icon svg { width: 22px; height: 22px; }
.fw-stat-card-icon.success { background: var(--fw-success-bg); color: var(--fw-success); }
.fw-stat-card-icon.info { background: var(--fw-info-bg); color: var(--fw-info); }
.fw-stat-card-icon.warning { background: var(--fw-warning-bg); color: var(--fw-warning); }

/* ============ MAIN BANNER (Hero promocional) ============ */
.fw-banner-wrap { position: relative; min-height: 180px; }
.fw-banner {
  position: absolute;
  inset: 0;
  border-radius: var(--fw-radius-xl);
  padding: var(--fw-space-8);
  overflow: hidden;
  color: var(--fw-white);
  min-height: 180px;
  display: none;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(120deg, var(--fw-primary-600) 0%, var(--fw-primary) 55%, var(--fw-primary-400) 100%);
}
.fw-banner.is-active { display: flex; position: relative; }
.fw-banner::after {
  content: '';
  position: absolute;
  right: -60px; top: -60px;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
}
.fw-banner-eyebrow { font-size: var(--fw-fs-xs); font-weight: var(--fw-fw-semibold); text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.85; margin-bottom: var(--fw-space-2); position: relative; z-index: 1; }
.fw-banner-title { font-size: var(--fw-fs-2xl); font-weight: var(--fw-fw-bold); color: var(--fw-white); margin-bottom: var(--fw-space-2); position: relative; z-index: 1; max-width: 60%; }
.fw-banner-subtitle { font-size: var(--fw-fs-sm); opacity: 0.9; margin-bottom: var(--fw-space-5); max-width: 55%; position: relative; z-index: 1; }
.fw-banner-cta { position: relative; z-index: 1; }
.fw-banner-dark { background: linear-gradient(120deg, var(--fw-dark) 0%, var(--fw-dark-700) 100%); }
.fw-banner-carousel-dots { position: absolute; bottom: var(--fw-space-4); left: var(--fw-space-8); display: flex; gap: var(--fw-space-2); z-index: 1; }
.fw-banner-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.4); cursor: pointer; transition: var(--fw-transition); }
.fw-banner-dot.active { width: 20px; border-radius: var(--fw-radius-full); background: var(--fw-white); }

/* ============ INFRA STATUS ============ */
.fw-status-row { display: flex; align-items: center; gap: var(--fw-space-3); padding: var(--fw-space-4) 0; border-bottom: 1px solid var(--fw-border); }
.fw-status-row:last-child { border-bottom: none; }
.fw-status-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.fw-status-dot.operational { background: var(--fw-success); box-shadow: 0 0 0 4px var(--fw-success-bg); }
.fw-status-dot.degraded { background: var(--fw-warning); box-shadow: 0 0 0 4px var(--fw-warning-bg); }
.fw-status-dot.outage { background: var(--fw-danger); box-shadow: 0 0 0 4px var(--fw-danger-bg); }
.fw-status-name { font-size: var(--fw-fs-sm); font-weight: var(--fw-fw-medium); flex: 1; }
.fw-status-label { font-size: var(--fw-fs-xs); color: var(--fw-text-muted); }

/* ============ QUICK ACTIONS ============ */
.fw-quick-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--fw-space-3); }
.fw-quick-action {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--fw-space-2);
  padding: var(--fw-space-5) var(--fw-space-3);
  border-radius: var(--fw-radius-md);
  background: var(--fw-surface-alt);
  color: var(--fw-text-primary);
  text-align: center;
  font-size: var(--fw-fs-xs);
  font-weight: var(--fw-fw-medium);
  transition: var(--fw-transition);
}
.fw-quick-action:hover { background: var(--fw-primary-50); color: var(--fw-primary-700); transform: translateY(-2px); }
.fw-quick-action-icon {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--fw-radius-md);
  background: var(--fw-surface);
  color: var(--fw-primary);
}

/* ============ ACTIVITY TIMELINE ============ */
.fw-timeline { display: flex; flex-direction: column; }
.fw-timeline-item { display: flex; gap: var(--fw-space-4); padding-bottom: var(--fw-space-5); position: relative; }
.fw-timeline-item:last-child { padding-bottom: 0; }
.fw-timeline-item::before {
  content: '';
  position: absolute;
  left: 15px; top: 32px; bottom: 0;
  width: 1px;
  background: var(--fw-border);
}
.fw-timeline-item:last-child::before { display: none; }
.fw-timeline-icon {
  width: 32px; height: 32px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--fw-surface-alt);
  color: var(--fw-text-secondary);
  z-index: 1;
}
.fw-timeline-content { flex: 1; padding-top: var(--fw-space-1); }
.fw-timeline-title { font-size: var(--fw-fs-sm); font-weight: var(--fw-fw-medium); color: var(--fw-text-primary); }
.fw-timeline-time { font-size: var(--fw-fs-xs); color: var(--fw-text-muted); margin-top: 2px; }

@media (max-width: 767px) {
  .fw-banner-title, .fw-banner-subtitle { max-width: 100%; }
  .fw-quick-actions { grid-template-columns: repeat(2, 1fr); }
}