/* ── Scrollbar personalizado ── */
.custom-scroll::-webkit-scrollbar { width: 5px; }
.custom-scroll::-webkit-scrollbar-track { background: transparent; }
.custom-scroll::-webkit-scrollbar-thumb { background: #374151; border-radius: 99px; }
.custom-scroll::-webkit-scrollbar-thumb:hover { background: #4b5563; }

/* ── Fondo grid (login) ── */
.bg-grid-pattern {
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ── Nav item activo ── */
.nav-item.active {
  background-color: rgba(22, 163, 74, 0.15);
  color: #4ade80;
}
.nav-item.active span:first-child { filter: none; }

/* ── Burbujas de chat ── */
.bubble-user {
  background: #1f2937;
  border: 1px solid #374151;
  border-radius: 0 16px 16px 16px;
  max-width: 75%;
  align-self: flex-start;
}
.bubble-staff {
  background: #1e3a5f;
  border: 1px solid #1d4ed8;
  border-radius: 16px 0 16px 16px;
  max-width: 75%;
  align-self: flex-end;
}
.bubble-ai {
  background: #14291a;
  border: 1px solid #166534;
  border-radius: 16px 0 16px 16px;
  max-width: 75%;
  align-self: flex-end;
}

/* ── Ticket card ── */
.ticket-card {
  background: #1f2937;
  border: 1px solid #374151;
  border-radius: 12px;
  transition: border-color 0.15s, background 0.15s;
  cursor: pointer;
}
.ticket-card:hover { border-color: #4b5563; background: #243040; }
.ticket-card.important {
  border-color: #991b1b;
  background: #1c1010;
}
.ticket-card.important:hover { border-color: #ef4444; }

/* ── Badge de confianza ── */
.conf-high   { color: #4ade80; }
.conf-medium { color: #facc15; }
.conf-low    { color: #f87171; }

/* ── AI mode toggle ── */
#btn-learning.active-mode  { background: #1d4ed8; box-shadow: 0 0 12px rgba(29,78,216,0.4); }
#btn-autonomous.active-mode{ background: #15803d; box-shadow: 0 0 12px rgba(21,128,61,0.4); }

/* ── Toast animation ── */
#toast { transition: opacity 0.3s; }
#toast.show { opacity: 1; }
#toast.hide { opacity: 0; }

/* ── Animación pulso para importantes ── */
@keyframes pulse-red {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.3); }
  50%       { box-shadow: 0 0 0 6px rgba(239,68,68,0); }
}
.pulse-important { animation: pulse-red 2s infinite; }

/* ── Tabla de usuarios ── */
.users-table th { color: #9ca3af; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 8px 12px; }
.users-table td { padding: 10px 12px; border-bottom: 1px solid #1f2937; font-size: 0.85rem; }
.users-table tr:last-child td { border-bottom: none; }
.users-table tr:hover td { background: rgba(255,255,255,0.02); }

/* ── Schedule grid ── */
.schedule-day { min-width: 100px; }
.shift-block {
  background: rgba(22,163,74,0.2);
  border: 1px solid rgba(22,163,74,0.4);
  border-radius: 8px;
  font-size: 0.75rem;
  padding: 4px 8px;
  color: #4ade80;
}