/* ===== GLASS MORPHISM ===== */

.glass {
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius-lg);
}

.glass-strong {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: var(--radius-lg);
}

/* ===== GLOW EFFECTS ===== */

.glow-cyan {
  box-shadow: 0 0 20px rgba(0, 229, 255, 0.15), inset 0 0 20px rgba(0, 229, 255, 0.03);
}

.glow-emerald {
  box-shadow: 0 0 20px rgba(0, 255, 163, 0.12), inset 0 0 20px rgba(0, 255, 163, 0.03);
}

.glow-red {
  box-shadow: 0 0 20px rgba(255, 59, 107, 0.18), inset 0 0 20px rgba(255, 59, 107, 0.04);
}

.glow-amber {
  box-shadow: 0 0 15px rgba(255, 176, 32, 0.15), inset 0 0 15px rgba(255, 176, 32, 0.03);
}

/* ===== BADGES ===== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-wide);
}

.badge-cyan {
  background: var(--cyan-dim);
  color: var(--cyan);
  border: 1px solid rgba(0, 229, 255, 0.25);
}

.badge-emerald {
  background: var(--emerald-dim);
  color: var(--emerald);
  border: 1px solid rgba(0, 255, 163, 0.25);
}

.badge-red {
  background: var(--red-dim);
  color: var(--red);
  border: 1px solid rgba(255, 59, 107, 0.25);
}

.badge-amber {
  background: var(--amber-dim);
  color: var(--amber);
  border: 1px solid rgba(255, 176, 32, 0.25);
}

/* ===== PROGRESS BAR ===== */

.progress-track {
  height: 4px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 99px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 1s ease;
}

.fill-cyan {
  background: linear-gradient(90deg, var(--cyan), rgba(0, 229, 255, 0.4));
}

.fill-emerald {
  background: linear-gradient(90deg, var(--emerald), rgba(0, 255, 163, 0.4));
}

.fill-red {
  background: linear-gradient(90deg, var(--red), rgba(255, 59, 107, 0.4));
}

.fill-amber {
  background: linear-gradient(90deg, var(--amber), rgba(255, 176, 32, 0.4));
}

/* ===== DOT INDICATOR ===== */

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.dot-cyan {
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
}

.dot-emerald {
  background: var(--emerald);
  box-shadow: 0 0 8px var(--emerald);
}

.dot-red {
  background: var(--red);
  box-shadow: 0 0 8px var(--red);
  animation: blink 1.4s ease-in-out infinite;
}

.dot-amber {
  background: var(--amber);
  box-shadow: 0 0 8px var(--amber);
}

/* ===== STATUS INDICATORS ===== */

.status-ok {
  color: var(--emerald);
  background: var(--emerald-dim);
}

.status-warn {
  color: var(--amber);
  background: var(--amber-dim);
}

.status-crit {
  color: var(--red);
  background: var(--red-dim);
}

/* ===== CHIPS ===== */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
  font-weight: 600;
}

/* ===== STOCK CARDS ===== */

.stock-card {
  padding: var(--spacing-2xl);
  position: relative;
  overflow: hidden;
}

.stock-card::after {
  content: '';
  position: absolute;
  top: -30px;
  right: -30px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  opacity: 0.06;
  pointer-events: none;
}

.stock-card.cyan-card::after {
  background: var(--cyan);
}

.stock-card.emerald-card::after {
  background: var(--emerald);
}

.stock-card.red-card::after {
  background: var(--red);
}

.stock-card.amber-card::after {
  background: var(--amber);
}

/* ===== DROP ZONES ===== */

.drop-zone {
  border: 2px dashed rgba(0, 229, 255, 0.2);
  border-radius: 20px;
  padding: 40px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
  background: rgba(0, 229, 255, 0.02);
}

.drop-zone:hover,
.drop-zone.drag-over {
  border-color: rgba(0, 229, 255, 0.5);
  background: rgba(0, 229, 255, 0.05);
  box-shadow: 0 0 30px rgba(0, 229, 255, 0.08);
}

/* ===== ALERT ITEMS ===== */

.alert-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-md);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all var(--transition-normal);
}

.alert-item:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}

/* ===== AVATAR ===== */

.tecnico-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-display);
  background: linear-gradient(135deg, var(--cyan-dim), var(--emerald-dim));
  border: 1px solid rgba(0, 229, 255, 0.2);
  flex-shrink: 0;
}