/* ==========================================================================
   Konector CRM — Design System (lists, details, menu)
   ========================================================================== */

:root {
  /* Marca */
  --kcrm-red: #ed1c24;
  --kcrm-red-dark: #b3151c;

  /* Tipografía */
  --kcrm-title: #5d596c;       /* títulos por defecto (secciones internas, headings de cards, empty states) */
  --kcrm-list-title: #32465B;  /* título superior de las listas (Personas, Leads) */
  --kcrm-muted: #6e6b7b;       /* subtítulos, texto secundario */
  --kcrm-text-soft: #a5a3ae;   /* texto auxiliar (cabeceras menú, emails secundarios, etc.) */

  /* Superficies */
  --kcrm-border: #ebeef0;
  --kcrm-bg-soft: #f8f7fa;
}

/* ----- Vertical menu ----- */

.layout-menu .menu-inner > .menu-header {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--kcrm-text-soft);
  padding: 1rem 1.5rem 0.4rem;
}

.layout-menu .menu-item.active > .menu-link {
  position: relative;
  font-weight: 600;
}

.layout-menu .menu-item.active > .menu-link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--kcrm-red);
}

.kcrm-menu-footer {
  border-top: 1px solid rgba(67, 89, 113, 0.12);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  position: relative;
}

.kcrm-menu-footer .kcrm-avatar {
  flex-shrink: 0;
}

.kcrm-menu-footer__info {
  flex: 1;
  min-width: 0;
}

.kcrm-menu-footer__name {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--kcrm-title);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kcrm-menu-footer__email {
  display: block;
  font-size: 0.75rem;
  color: var(--kcrm-text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kcrm-menu-footer .dropdown-toggle::after {
  display: none;
}

/* ----- Avatar / initials circle ----- */

.kcrm-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--kcrm-red);
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  user-select: none;
}

.kcrm-avatar--xs { width: 24px; height: 24px; font-size: 0.625rem; }
.kcrm-avatar--sm { width: 32px; height: 32px; font-size: 0.75rem; }
.kcrm-avatar--md { width: 40px; height: 40px; font-size: 0.875rem; }
.kcrm-avatar--lg { width: 64px; height: 64px; font-size: 1.25rem; }
.kcrm-avatar--xl { width: 88px; height: 88px; font-size: 1.875rem; }

.kcrm-avatar--soft {
  background: rgba(237, 28, 36, 0.12);
  color: var(--kcrm-red);
}

/* ----- Page header bar ----- */

/*
  Note on z-index: the Vuexy template renders a `<div class="content-backdrop fade">`
  inside `.content-wrapper` and applies `z-index: 1080` to the layout-menu — under some
  layout combinations the content area ends up underneath these stacking layers and
  buttons stop being clickable / look flat. The original code worked around this with
  inline `z-index: 1050` on the back button. We replicate the same value here so the
  whole action bar (and its buttons) sit on top.
*/
.kcrm-page-header,
.kcrm-actions-bar {
  position: relative;
  z-index: 1050;
}

.kcrm-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0.5rem 0 1.25rem;
}

.kcrm-actions-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.25rem 0 1rem;
}

.kcrm-page-header > *,
.kcrm-page-header__actions > .btn,
.kcrm-actions-bar > .btn,
.kcrm-actions-bar > .d-flex > .btn {
  position: relative;
  z-index: 1;
}

.kcrm-page-header__title {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0 0 0.25rem;
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--kcrm-title);
}

/* Modificador para cabeceras de listado (Personas, Leads): usa --kcrm-list-title
 * para poder darle un color diferenciado del resto de títulos sin afectar a los Details. */
.kcrm-page-header--list .kcrm-page-header__title {
  color: var(--kcrm-list-title);
}

.kcrm-page-header__count {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--kcrm-muted);
  background: var(--kcrm-bg-soft);
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
}

.kcrm-page-header__subtitle {
  margin: 0;
  font-size: 0.875rem;
  color: var(--kcrm-muted);
}

.kcrm-page-header__actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* ----- Filter chips ----- */

.kcrm-filter-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.875rem 1.125rem;
}

.kcrm-filter-bar__search {
  position: relative;
  flex: 1 1 280px;
  min-width: 220px;
  max-width: 420px;
}

.kcrm-filter-bar__search i {
  position: absolute;
  top: 50%;
  left: 0.75rem;
  transform: translateY(-50%);
  color: var(--kcrm-muted);
  pointer-events: none;
}

.kcrm-filter-bar__search input {
  padding-left: 2.25rem;
}

.kcrm-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  padding: 0 1.125rem 0.875rem;
}

.kcrm-active-filters:empty {
  display: none;
}

.kcrm-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  background: rgba(115, 103, 240, 0.08);
  border: 1px solid rgba(115, 103, 240, 0.15);
  color: var(--kcrm-title);
  font-size: 0.75rem;
}

.kcrm-filter-chip__label {
  font-weight: 600;
  color: var(--kcrm-muted);
}

.kcrm-filter-chip__remove {
  background: none;
  border: 0;
  padding: 0;
  margin-left: 0.125rem;
  display: inline-flex;
  cursor: pointer;
  color: var(--kcrm-muted);
  line-height: 1;
}

.kcrm-filter-chip__remove:hover {
  color: var(--kcrm-red);
}

/* ----- List table ----- */

.kcrm-table {
  width: 100%;
}

.kcrm-table thead th {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--kcrm-muted);
  background: #fafafa;
  border-bottom: 1px solid var(--kcrm-border);
  white-space: nowrap;
}

.kcrm-table tbody td {
  vertical-align: middle;
  font-size: 0.875rem;
  border-bottom: 1px solid var(--kcrm-border);
}

.kcrm-table tbody tr:hover {
  background: var(--kcrm-bg-soft);
}

.kcrm-cell-primary {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 220px;
}

.kcrm-cell-primary__name {
  font-weight: 600;
  color: var(--kcrm-title);
  line-height: 1.2;
}

.kcrm-cell-primary__meta {
  font-size: 0.75rem;
  color: var(--kcrm-muted);
  line-height: 1.2;
}

.kcrm-cell-stack {
  line-height: 1.2;
}

.kcrm-cell-stack__primary {
  color: var(--kcrm-title);
  font-weight: 500;
}

.kcrm-cell-stack__secondary {
  font-size: 0.75rem;
  color: var(--kcrm-muted);
}

.kcrm-row-actions {
  display: inline-flex;
  gap: 0.125rem;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.kcrm-table tbody tr:hover .kcrm-row-actions,
.kcrm-table tbody tr:focus-within .kcrm-row-actions {
  opacity: 1;
}

/* ----- Status pills ----- */

.kcrm-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.1875rem 0.625rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

.kcrm-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
}

.kcrm-pill--success { background: rgba(40, 199, 111, 0.12); color: #28c76f; }
.kcrm-pill--warning { background: rgba(255, 159, 67, 0.12); color: #ff9f43; }
.kcrm-pill--danger  { background: rgba(234, 84, 85, 0.12);  color: #ea5455; }
.kcrm-pill--info    { background: rgba(0, 207, 232, 0.12);  color: #00cfe8; }
.kcrm-pill--muted   { background: rgba(110, 107, 123, 0.12); color: var(--kcrm-muted); }
.kcrm-pill--brand   { background: rgba(237, 28, 36, 0.12);  color: var(--kcrm-red); }

/* ----- Empty state ----- */

.kcrm-empty {
  text-align: center;
  padding: 3rem 1.5rem;
}

.kcrm-empty__icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--kcrm-bg-soft);
  color: var(--kcrm-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  font-size: 2rem;
}

.kcrm-empty__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--kcrm-title);
  margin: 0 0 0.25rem;
}

.kcrm-empty__text {
  font-size: 0.875rem;
  color: var(--kcrm-muted);
  margin: 0 0 1rem;
}

/* ----- Entity hero ----- */

.kcrm-hero {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem;
  border-radius: 0.5rem;
  background:
    radial-gradient(circle at 90% 0, rgba(237, 28, 36, 0.08) 0, transparent 55%),
    #fff;
  border: 1px solid var(--kcrm-border);
  box-shadow: 0 2px 6px rgba(67, 89, 113, 0.04);
  margin-bottom: 1.25rem;
}

.kcrm-hero__main {
  flex: 1;
  min-width: 0;
}

.kcrm-hero__name {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0 0 0.25rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--kcrm-title);
}

.kcrm-hero__meta {
  font-size: 0.8125rem;
  color: var(--kcrm-muted);
  margin: 0 0 0.625rem;
}

.kcrm-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.kcrm-hero__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  background: var(--kcrm-bg-soft);
  font-size: 0.75rem;
  color: var(--kcrm-title);
  text-decoration: none;
  border: 1px solid var(--kcrm-border);
}

.kcrm-hero__chip:hover {
  color: var(--kcrm-red);
  border-color: rgba(237, 28, 36, 0.3);
}

.kcrm-hero__chip i {
  color: var(--kcrm-muted);
}

.kcrm-hero__actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* ----- Detail tabs ----- */

.kcrm-tabs.nav-pills {
  background: #fff;
  padding: 0.375rem;
  border-radius: 0.5rem;
  border: 1px solid var(--kcrm-border);
  gap: 0.125rem;
  margin-bottom: 1.25rem;
}

.kcrm-tabs.nav-pills .nav-link {
  color: var(--kcrm-muted);
  font-weight: 500;
  font-size: 0.875rem;
  padding: 0.5rem 0.875rem;
  border-radius: 0.375rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.kcrm-tabs.nav-pills .nav-link.active {
  background: var(--kcrm-red);
  color: #fff;
  box-shadow: 0 2px 4px rgba(237, 28, 36, 0.25);
}

.kcrm-tabs.nav-pills .nav-link:not(.active):hover {
  background: var(--kcrm-bg-soft);
  color: var(--kcrm-title);
}

/* ----- Field grid (label / value) ----- */

.kcrm-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem 1.5rem;
}

.kcrm-field {
  min-width: 0;
}

.kcrm-field__label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--kcrm-muted);
  margin-bottom: 0.25rem;
}

.kcrm-field__value {
  display: block;
  font-size: 0.875rem;
  color: var(--kcrm-title);
  word-break: break-word;
  min-height: 1.25rem;
}

.kcrm-field__value--empty {
  color: #c8c7cf;
}

/* Botones VoIP click-to-call. El "modo llamando" se activa tras un Call OK y el siguiente click
 * dispara EndCall. Reutiliza .kcrm-hero__chip cuando va al hero, o .kcrm-voip-btn--inline cuando
 * va dentro de una celda de la ficha. */
button.kcrm-voip-btn {
  border: 0;
  font: inherit;
  cursor: pointer;
}
button.kcrm-voip-btn:disabled { opacity: 0.6; cursor: wait; }
.kcrm-voip-btn--inline {
  background: transparent;
  color: var(--kcrm-link, #696cff);
  padding: 0 0.25rem;
  margin-left: 0.5rem;
  vertical-align: baseline;
}
.kcrm-voip-btn--inline:hover { color: var(--kcrm-link-hover, #5e60d6); }
.kcrm-voip-btn--calling {
  background: #ffece9 !important;
  color: #d63838 !important;
  border-color: #f5b8b1 !important;
}
.kcrm-voip-btn--calling:hover { background: #ffd9d4 !important; }

/* Enlace externo dentro de fichas — abre en otra pestaña, ícono "external link" y trunca el
 * texto largo sin perder el href real (visible vía title=). */
.kcrm-link-ext {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  color: var(--kcrm-link, #696cff);
  text-decoration: none;
}
.kcrm-link-ext:hover { text-decoration: underline; }
.kcrm-link-ext__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.kcrm-field__copy {
  background: none;
  border: 0;
  padding: 0 0 0 0.25rem;
  color: var(--kcrm-muted);
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1;
}

.kcrm-field__copy:hover { color: var(--kcrm-red); }

.kcrm-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--kcrm-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 1rem;
  padding-bottom: 0.625rem;
  border-bottom: 1px solid var(--kcrm-border);
}

/* ----- Dashboard cues ----- */

.kcrm-cue {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem 1.125rem;
  background: #fff;
  border: 1px solid var(--kcrm-border);
  border-radius: 0.5rem;
  text-decoration: none;
  color: inherit;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
  height: 100%;
}

.kcrm-cue:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(67, 89, 113, 0.10);
  border-color: rgba(237, 28, 36, 0.25);
  color: inherit;
  text-decoration: none;
}

.kcrm-cue__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 0.5rem;
  background: var(--kcrm-bg-soft);
  color: var(--kcrm-muted);
  font-size: 1.375rem;
  flex-shrink: 0;
}

.kcrm-cue__body {
  flex: 1;
  min-width: 0;
}

.kcrm-cue__count {
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--kcrm-title);
  line-height: 1.1;
}

.kcrm-cue__label {
  font-size: 0.8125rem;
  color: var(--kcrm-muted);
  margin-top: 0.125rem;
}

.kcrm-cue__approx-badge {
  display: inline-block;
  margin-left: 0.25rem;
  padding: 0 0.25rem;
  border-radius: 0.25rem;
  background: var(--kcrm-bg-soft);
  color: var(--kcrm-muted);
  font-size: 0.6875rem;
  vertical-align: middle;
}

/* Cuando el cue marcado como "alert on positive" tiene un valor > 0, se pinta en rojo
 * para igualar el estilo Unfavorable del role center BC (Hot Leads, Overdue Interactions). */
.kcrm-cue--alert .kcrm-cue__count {
  color: var(--kcrm-red);
}

.kcrm-cue--alert .kcrm-cue__icon {
  background: rgba(237, 28, 36, 0.10);
  color: var(--kcrm-red);
}

.kcrm-cue--alert {
  border-color: rgba(237, 28, 36, 0.30);
}

.kcrm-cue--zero .kcrm-cue__count {
  color: var(--kcrm-text-soft);
  font-weight: 600;
}

/* Variante "hero" para el bloque "Para ti hoy": número más grande, padding generoso, icono
 * más pesado. Mantiene la misma paleta y CTA implícito (toda la card es enlace). */
.kcrm-cue--hero {
  padding: 1.375rem 1.5rem;
  gap: 1.125rem;
}

.kcrm-cue--hero .kcrm-cue__icon {
  width: 56px;
  height: 56px;
  font-size: 1.75rem;
  border-radius: 0.625rem;
}

.kcrm-cue--hero .kcrm-cue__count {
  font-size: 2.25rem;
  line-height: 1;
}

.kcrm-cue--hero .kcrm-cue__label {
  font-size: 0.9375rem;
  font-weight: 600;
  margin-top: 0.25rem;
}

/* Línea de pista debajo del label — sólo aparece en heroes para dar contexto rápido. */
.kcrm-cue__hint {
  margin-top: 0.125rem;
  font-size: 0.75rem;
  color: var(--kcrm-text-soft);
}

/* ----- Filas marcadas (interacciones vencidas, etc.) ----- */

/* Fila destacada como "vencida" — borde izquierdo rojo + leve tinte para escanear rápido. */
.kcrm-table tbody tr.kcrm-row--overdue td:first-child {
  border-left: 3px solid var(--kcrm-red);
}
.kcrm-table tbody tr.kcrm-row--overdue {
  background: rgba(237, 28, 36, 0.04);
}
.kcrm-table tbody tr.kcrm-row--overdue:hover {
  background: rgba(237, 28, 36, 0.08);
}

/* ----- Overlay "cargando" para listados con DataTables server-side ----- */

/* Aplica a la `.card` que contiene el DataTable. Cuando se añade `is-loading`, atenúa el
   contenido y muestra un spinner centrado, así el usuario sabe que el filtro/orden está
   aplicándose y no piensa que la UI está congelada. Se activa via `processing.dt`. */
.kcrm-table-loadable {
  position: relative;
}

.kcrm-table-loadable.is-loading > :not(.kcrm-table-loading-overlay) {
  pointer-events: none;
  opacity: 0.55;
  transition: opacity 0.15s ease-in;
}

.kcrm-table-loading-overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 5;
  background: rgba(255, 255, 255, 0.35);
  border-radius: inherit;
}

.kcrm-table-loadable.is-loading .kcrm-table-loading-overlay {
  display: flex;
}

.kcrm-table-loading-overlay__spinner {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 3px solid rgba(105, 108, 255, 0.25);
  border-top-color: var(--bs-primary, #696cff);
  animation: kcrm-spin 0.7s linear infinite;
}

.kcrm-table-loading-overlay__label {
  font-size: 0.8125rem;
  color: var(--kcrm-text-soft);
  font-weight: 500;
}

@keyframes kcrm-spin {
  to { transform: rotate(360deg); }
}

/* Pequeñas reglas extraídas de `style=` inline para poder pasar CSP a enforcement
   sin depender de `style-src 'unsafe-inline'` en los archivos del template. */
.kcrm-beta-badge {
  font-size: 0.625rem;
}

.kcrm-menu-user-line {
  max-width: 200px;
}