/* ── Dashboard Supervisor ───────────────────────────────── */
.dash-tabs {
  display: flex;
  gap: .5rem;
  margin-bottom: 1.25rem;
  border-bottom: 2px solid var(--border, #e5e7eb);
  padding-bottom: .25rem;
}
.dash-tab {
  padding: .45rem 1.1rem;
  border: none;
  background: none;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 500;
  color: var(--muted, #6b7280);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color .15s, border-color .15s;
}
.dash-tab.active {
  color: #4A1A6B;
  border-bottom-color: #4A1A6B;
}

/* ── Cards de resumen ───────────────────────────────────── */
.dash-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.25rem;
}
@media (max-width: 900px) { .dash-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .dash-cards { grid-template-columns: 1fr 1fr; } }

.dash-card {
  background: #fff;
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  display: flex;
  flex-direction: column;
  gap: .25rem;
  border-left: 4px solid var(--accent, #5DCAA5);
}
.dash-card-label {
  font-size: .78rem;
  color: var(--muted, #6b7280);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.dash-card-value {
  font-size: 2rem;
  font-weight: 700;
  color: #2C2C2A;
  line-height: 1.1;
}
.dash-card-sub {
  font-size: .78rem;
  color: var(--muted, #6b7280);
}
.dash-card.green  { border-left-color: #5DCAA5; }
.dash-card.blue   { border-left-color: #3b82f6; }
.dash-card.gray   { border-left-color: #9ca3af; }
.dash-card.purple { border-left-color: #7c3aed; }
.dash-card.orange { border-left-color: #f97316; }
.dash-card.yellow { border-left-color: #eab308; }
.dash-card.alert .dash-card-value { color: #D85A30; }

/* ── Tabla de agentes ───────────────────────────────────── */
.badge-en-llamada {
  display: inline-block;
  padding: .2rem .6rem;
  border-radius: 99px;
  font-size: .75rem;
  font-weight: 600;
  background: #d1fae5;
  color: #065f46;
  animation: blink 1.4s ease-in-out infinite;
}
.badge-disponible {
  display: inline-block;
  padding: .2rem .6rem;
  border-radius: 99px;
  font-size: .75rem;
  font-weight: 600;
  background: #d1fae5;
  color: #065f46;
}
.badge-inactivo {
  display: inline-block;
  padding: .2rem .6rem;
  border-radius: 99px;
  font-size: .75rem;
  font-weight: 600;
  background: #f3f4f6;
  color: #6b7280;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: .45; }
}

/* ── Bottom layout ──────────────────────────────────────── */
.dash-bottom {
  display: grid;
  grid-template-columns: 40% 1fr;
  gap: 1rem;
  margin-top: 1.25rem;
}
@media (max-width: 800px) { .dash-bottom { grid-template-columns: 1fr; } }

.dash-timeline {
  max-height: 400px;
  overflow-y: auto;
}
.timeline-item {
  padding: .55rem .75rem;
  border-bottom: 1px solid var(--border, #e5e7eb);
  font-size: .82rem;
  display: flex;
  gap: .5rem;
  align-items: flex-start;
}
.timeline-item:last-child { border-bottom: none; }
.timeline-icon { font-size: 1rem; flex-shrink: 0; }
.timeline-text { color: #374151; line-height: 1.4; }
.timeline-hora { color: var(--muted, #6b7280); font-size: .75rem; }

/* ── Score badges ───────────────────────────────────────── */
.score-a { background:#d1fae5; color:#065f46; }
.score-b { background:#fef3c7; color:#92400e; }
.score-c { background:#fee2e2; color:#991b1b; }
.score-badge {
  display: inline-block;
  padding: .15rem .5rem;
  border-radius: 6px;
  font-weight: 700;
  font-size: .82rem;
}

/* ── Agents mgmt table ─────────────────────────────────── */
.agents-mgmt-actions { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.agents-mgmt-actions select {
  padding: .25rem .5rem;
  font-size: .8rem;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  font-family: inherit;
}
.btn-sm {
  padding: .25rem .65rem;
  font-size: .8rem;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
}
.btn-success { background: #5DCAA5; color: #fff; }
.btn-danger  { background: #ef4444; color: #fff; }
.btn-assign  { background: #4A1A6B; color: #fff; }