/* Estilos base + tema "gaming" (complementa Tailwind CDN) */
body { font-family: 'Segoe UI', system-ui, sans-serif; }

/* ---- Sidebar con degradado tipo gaming ---- */
.sidebar-gradient {
  background:
    radial-gradient(circle at 15% 8%, rgba(34, 211, 238, 0.22), transparent 40%),
    radial-gradient(circle at 90% 85%, rgba(236, 72, 153, 0.18), transparent 45%),
    radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, #312e81 0%, #4338ca 40%, #6d28d9 75%, #7c3aed 100%);
  background-size: auto, auto, 22px 22px, auto;
  background-position: 0 0, 0 0, 0 0, 0 0;
  position: relative;
}

.nav-link { border-left: 3px solid transparent; transition: all .15s ease; }
.nav-link:hover { border-left-color: #a78bfa; }
.nav-link.active {
  background: rgba(167, 139, 250, 0.18);
  border-left-color: #22d3ee;
  color: #fff;
  font-weight: 600;
}

/* ---- Tarjetas ---- */
.card {
  background: #fff;
  border-radius: 0.9rem;
  box-shadow: 0 2px 8px rgba(30, 27, 75, 0.08);
  padding: 1.25rem;
  transition: box-shadow .15s ease;
}
.card:hover { box-shadow: 0 4px 16px rgba(30, 27, 75, 0.12); }

/* Tarjetas de estadísticas con degradado (dashboard) */
.stat-card {
  border-radius: 0.9rem;
  padding: 1.25rem;
  color: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}
.stat-purple { background: linear-gradient(135deg, #7c3aed, #4338ca); }
.stat-cyan   { background: linear-gradient(135deg, #06b6d4, #0891b2); }
.stat-pink   { background: linear-gradient(135deg, #ec4899, #db2777); }
.stat-amber  { background: linear-gradient(135deg, #f59e0b, #d97706); }

table th {
  text-align: left;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: #64748b;
  padding: 0.5rem 0.75rem;
}
table td {
  padding: 0.6rem 0.75rem;
  border-top: 1px solid #eef1f5;
  font-size: 0.9rem;
}

.badge {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}
.badge-green { background: #dcfce7; color: #166534; }
.badge-yellow { background: #fef9c3; color: #854d0e; }
.badge-red { background: #fee2e2; color: #991b1b; }
.badge-blue { background: #dbeafe; color: #1e40af; }
.badge-gray { background: #f1f5f9; color: #475569; }

/* ---- Botones de acción con más color (estilo "arcade") ---- */
.btn-primary {
  background: linear-gradient(135deg, #6366f1, #7c3aed);
  color: #fff; font-weight: 600; border-radius: 0.6rem;
  padding: .55rem 1rem; transition: transform .1s ease, box-shadow .15s ease;
  box-shadow: 0 2px 8px rgba(99,102,241,0.35);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(99,102,241,0.45); }

.btn-success { background: linear-gradient(135deg, #10b981, #059669); color: #fff; font-weight: 600; border-radius: 0.6rem; padding: .55rem 1rem; }
.btn-danger  { background: linear-gradient(135deg, #ef4444, #dc2626); color: #fff; font-weight: 600; border-radius: 0.6rem; padding: .55rem 1rem; }
.btn-warning { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; font-weight: 600; border-radius: 0.6rem; padding: .55rem 1rem; }
.btn-cyan    { background: linear-gradient(135deg, #22d3ee, #0891b2); color: #fff; font-weight: 600; border-radius: 0.6rem; padding: .55rem 1rem; }

/* Íconos de estaciones por tipo (acento de color en tarjetas de Estaciones) */
.station-ps5 { border-top: 4px solid #6366f1; }
.station-switch { border-top: 4px solid #ef4444; }
.station-vr { border-top: 4px solid #06b6d4; }
.station-sim { border-top: 4px solid #f59e0b; }
.station-pc { border-top: 4px solid #10b981; }