/* Nova sobre Khamba: lo propio de Nova y una capa de compatibilidad para las clases
   que usaban las páginas con la plantilla anterior (badge-* light, btn-xs, etc.). */

/* ---------- Marca ---------- */
:root {
  --primary: #4f46e5;
  --primary-hover: #4338ca;
  --bs-primary: #4f46e5;
  --bs-primary-rgb: 79, 70, 229;
  --bs-link-color: #4f46e5;
  --bs-link-color-rgb: 79, 70, 229;
  --bs-border-radius: 10px;
}
.sidebar .logo, .auth-art .logo { background: linear-gradient(135deg, #6366f1, #4338ca); }

/* ---------- Botones de Bootstrap con el color de la marca ---------- */
.btn { font-weight: 600; border-radius: 10px; }
.btn-primary {
  --bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary);
  --bs-btn-hover-bg: var(--primary-hover); --bs-btn-hover-border-color: var(--primary-hover);
  --bs-btn-active-bg: #3730a3; --bs-btn-active-border-color: #3730a3;
  --bs-btn-disabled-bg: var(--primary); --bs-btn-disabled-border-color: var(--primary);
}
.btn-outline-primary {
  --bs-btn-color: var(--primary); --bs-btn-border-color: var(--primary);
  --bs-btn-hover-bg: var(--primary); --bs-btn-hover-border-color: var(--primary);
  --bs-btn-active-bg: var(--primary-hover); --bs-btn-active-border-color: var(--primary-hover);
}
.btn-xs { padding: 3px 9px; font-size: 12px; border-radius: 8px; }
/* "light": botón suave del mismo color */
.btn.light { border-color: transparent; }
.btn-primary.light { background: #eef2ff; color: #4338ca; }
.btn-primary.light:hover { background: #e0e7ff; color: #3730a3; }
.btn-success.light { background: #d1fae5; color: #047857; }
.btn-success.light:hover { background: #a7f3d0; color: #065f46; }
[data-bs-theme=dark] .btn-primary.light { background: #1e1b4b; color: #a5b4fc; }
[data-bs-theme=dark] .btn-success.light { background: #0d2a20; color: #34d399; }

.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--primary); box-shadow: 0 0 0 4px rgba(79, 70, 229, .12);
}
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
.form-label { font-size: 13px; font-weight: 600; }
.form-control, .form-select { border-radius: 10px; border-color: var(--border); background-color: var(--card); color: var(--text); }
.alert { border-radius: 12px; }

/* ---------- Etiquetas "badge-* light" de la plantilla anterior → píldoras de Khamba ---------- */
.badge.light {
  font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 20px; display: inline-flex; align-items: center; gap: 5px;
}
.badge-primary.light { background: #e0e7ff; color: #4338ca; }
.badge-info.light { background: #dbeafe; color: #1d4ed8; }
.badge-success.light { background: #d1fae5; color: #047857; }
.badge-warning.light { background: #fef3c7; color: #b45309; }
.badge-danger.light { background: #fee2e2; color: #b91c1c; }
.badge-secondary.light { background: #e5e7eb; color: #374151; }
[data-bs-theme=dark] .badge-primary.light { background: #1e1b4b; color: #a5b4fc; }
[data-bs-theme=dark] .badge-info.light { background: #0c1d3b; color: #93c5fd; }
[data-bs-theme=dark] .badge-success.light { background: #0d2a20; color: #34d399; }
[data-bs-theme=dark] .badge-warning.light { background: #2a2110; color: #fbbf24; }
[data-bs-theme=dark] .badge-danger.light { background: #2c1214; color: #f87171; }
[data-bs-theme=dark] .badge-secondary.light { background: #242832; color: #cbd5e1; }
/* Estados con la píldora de Khamba (insignia()) */
.s-Info { background: #dbeafe; color: #1d4ed8; }
.s-Primary { background: #e0e7ff; color: #4338ca; }
[data-bs-theme=dark] .s-Delivered { background: #0d2a20; color: #34d399; }
[data-bs-theme=dark] .s-Pending, [data-bs-theme=dark] .s-Low { background: #2a2110; color: #fbbf24; }
[data-bs-theme=dark] .s-Cancelled, [data-bs-theme=dark] .s-Critical { background: #2c1214; color: #f87171; }
[data-bs-theme=dark] .s-Info, [data-bs-theme=dark] .s-Processing { background: #0c1d3b; color: #93c5fd; }
[data-bs-theme=dark] .s-Primary, [data-bs-theme=dark] .s-Shipped { background: #1e1b4b; color: #a5b4fc; }

/* ---------- Tablas ---------- */
.table-x td .btn, .table-x td form { white-space: nowrap; }
.table-x a { color: var(--text); font-weight: 600; }
.table-x a:hover { color: var(--primary); }
.vacio { color: var(--muted); padding: 28px 8px; text-align: center; }
.vacio i[data-lucide], .vacio svg { width: 28px; height: 28px; display: block; margin: 0 auto 8px; opacity: .6; }

/* ---------- Topbar ---------- */
.topbar .search input { padding-right: 14px; }
.top-actions { margin-left: auto; }
.avatar-ini {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px;
  background: linear-gradient(135deg, #6366f1, #4338ca); color: #fff; border: 0;
}
.sb-bottom form { margin: 0; }
.sb-bottom button.sb-link { width: 100%; background: none; border: 0; text-align: left; font: inherit; }

/* ---------- Listas (row-item de Khamba) ---------- */
.row-item .meta { min-width: 0; }
.row-item .meta small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.row-item .end small { white-space: nowrap; }

/* ---------- Tarjetas de métricas ---------- */
.kpi .val small { font-size: 14px; font-weight: 600; color: var(--muted); margin-left: 4px; }

/* ---------- Conversación (detalle de llamada y "Probar por texto") ---------- */
.burbuja { max-width: 75%; padding: .65rem .9rem; border-radius: 1rem; white-space: pre-wrap; line-height: 1.45; }
.burbuja.cliente { background: var(--hover); color: var(--text); border-bottom-left-radius: .25rem; }
.burbuja.nova { background: var(--primary); color: #fff; border-bottom-right-radius: .25rem; }
.burbuja.sistema { background: transparent; color: var(--muted); font-style: italic; max-width: 100%; font-size: 13px; }
.chat-caja { border: 1px solid var(--border); border-radius: var(--r); background: var(--bg); }

/* ---------- Pipeline ---------- */
.kanban { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 1rem; align-items: flex-start; }
.kanban-col { flex: 0 0 280px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: .75rem; }
.kanban-col.sobre { outline: 2px dashed var(--primary); outline-offset: -2px; }
.kanban-lista { min-height: 80px; display: flex; flex-direction: column; gap: .5rem; }
.kanban-card { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: .65rem .75rem; cursor: grab; transition: .15s; }
.kanban-card:hover { border-color: var(--primary); }
.kanban-card a { color: var(--text); }
.kanban-card.arrastrando { opacity: .5; }

/* ---------- Línea de tiempo del contacto ---------- */
.timeline-item { border-left: 2px solid var(--border); padding: 0 0 1rem 1rem; position: relative; }
.timeline-item::before { content: ""; position: absolute; left: -6px; top: .3rem; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); }
.timeline-item.llamada::before { background: #0ea5e9; }
.timeline-item.recado::before { background: #f59e0b; }

/* ---------- Detalle (pares etiqueta/valor) ---------- */
.dato { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.dato:last-child { border-bottom: 0; }
.dato > span:first-child { color: var(--muted); }

/* ---------- Llamar a Nova ---------- */
.llamada-hero { text-align: center; padding: 12px 0 4px; }
.llamada-hero .orbe {
  width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 16px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #6366f1, #4338ca); box-shadow: 0 12px 32px rgba(79, 70, 229, .35);
}
.llamada-hero .orbe svg { width: 40px; height: 40px; }
.llamada-hero .orbe.viva { animation: onda 1.6s infinite; }
@keyframes onda { 0% { box-shadow: 0 0 0 0 rgba(79, 70, 229, .55); } 100% { box-shadow: 0 0 0 26px rgba(79, 70, 229, 0); } }