/* ═══════════════════════════════════════════════════════════════════════════
 * Grabaciones — Estilos
 * Carga: <link rel="stylesheet" href="/css/recordings.css"> en index.html
 * ═══════════════════════════════════════════════════════════════════════════ */

.rec-stats {
  display: flex;
  gap: var(--space-2, 8px);
  align-items: center;
  flex-wrap: wrap;
}
.rec-stats .stat-chip {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  padding: 4px 12px;
  border-radius: var(--radius-full, 12px);
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--font-medium, 500);
  white-space: nowrap;
}

/* ── Filtros ────────────────────────────────────────────────────────────── */
.rec-filters {
  display: flex;
  gap: var(--space-2, 8px);
  margin-bottom: var(--space-4, 16px);
  flex-wrap: wrap;
  align-items: center;
}
.rec-filters input,
.rec-filters select {
  padding: 0.45rem 0.75rem;
  border-radius: var(--radius-md, 6px);
  border: 1px solid var(--border-default);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: var(--text-sm, 0.85rem);
}
.rec-filters input:focus,
.rec-filters select:focus {
  border-color: var(--border-focus);
  outline: none;
}
.rec-filters input[type="text"] { flex: 2; min-width: 200px; }
.rec-filters input[type="date"] { flex: 1; min-width: 140px; }
.rec-filters select { flex: 1; min-width: 140px; }

/* ── Reproductor ───────────────────────────────────────────────────────── */
.rec-player {
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg, 8px);
  padding: var(--space-3, 12px);
  margin-bottom: var(--space-4, 16px);
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
}
.rec-player-uuid {
  font-family: var(--font-mono, 'SF Mono', monospace);
  color: var(--brand-500);
  font-size: var(--text-sm, 0.85rem);
  flex-shrink: 0;
}
.rec-player audio {
  flex: 1;
  height: 36px;
  border-radius: var(--radius-md, 6px);
}
.rec-player audio::-webkit-media-controls-panel {
  background: var(--bg-tertiary);
}
.rec-player .btn-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 8px;
  font-size: 1rem;
}
.rec-player .btn-close:hover { color: var(--text-primary); }

/* ── Tabla ──────────────────────────────────────────────────────────────── */
.rec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm, 0.85rem);
}
.rec-table thead th {
  padding: 0.6rem 0.75rem;
  text-align: left;
  font-weight: var(--font-semibold, 600);
  font-size: var(--text-xs, 0.75rem);
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-default);
  white-space: nowrap;
}
.rec-table tbody td {
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  vertical-align: middle;
}
.rec-table tbody tr:hover {
  background: var(--bg-tertiary);
}
.rec-table tbody tr.row-active {
  background: var(--brand-alpha-10);
}

/* ── Celdas especiales ─────────────────────────────────────────────────── */
.rec-uuid {
  font-family: var(--font-mono, monospace);
  font-size: var(--text-xs, 0.75rem);
  color: var(--text-muted);
  background: var(--bg-tertiary);
  padding: 2px 6px;
  border-radius: var(--radius-sm, 4px);
}
.rec-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-full, 12px);
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--font-medium, 500);
}
/* Colores basados en el campo "color" del catálogo */
.rec-badge.color-success { background: rgba(34,197,94,0.12);  color: #4ade80; }
.rec-badge.color-info    { background: rgba(59,130,246,0.12); color: #60a5fa; }
.rec-badge.color-warn    { background: rgba(251,191,36,0.12); color: #fbbf24; }
.rec-badge.color-danger  { background: rgba(239,68,68,0.12);  color: #f87171; }
.rec-badge.color-muted   { background: var(--bg-tertiary);     color: var(--text-muted); }

/* Compat con clases viejas (por si quedan refs) */
.rec-badge.agreement   { background: rgba(34,197,94,0.12);  color: #4ade80; }
.rec-badge.escalation  { background: rgba(251,191,36,0.12); color: #fbbf24; }
.rec-badge.timeout     { background: var(--bg-tertiary);     color: var(--text-muted); }
.rec-badge.no_agreement { background: rgba(239,68,68,0.12); color: #f87171; }
.rec-badge.transfer    { background: rgba(96,165,250,0.12); color: #60a5fa; }
.rec-badge.flow        { background: var(--bg-tertiary);     color: var(--text-secondary); }

/* ── Botones de acción en fila ─────────────────────────────────────────── */
.rec-actions {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}
.rec-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  font-size: 0.9rem;
  border-radius: var(--radius-sm, 4px);
  color: var(--text-secondary);
  transition: background 150ms, color 150ms;
}
.rec-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}
.rec-btn.danger:hover {
  background: rgba(239,68,68,0.15);
  color: #f87171;
}

/* ── Paginación ────────────────────────────────────────────────────────── */
.rec-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-3, 12px);
  margin-top: var(--space-4, 16px);
  padding: var(--space-2, 8px) 0;
}
.rec-pagination .page-info {
  color: var(--text-secondary);
  font-size: var(--text-sm, 0.85rem);
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .rec-filters { flex-direction: column; }
  .rec-filters input,
  .rec-filters select { min-width: 100% !important; flex: unset !important; }
  .rec-table { font-size: 0.78rem; }
  .rec-table thead th,
  .rec-table tbody td { padding: 0.4rem 0.5rem; }
}