/* ==========================================================================
   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);
}

/* Zebra striping: filas pares con un fondo muy suave para facilitar la lectura horizontal.
   El hover usa un gris algo más marcado para que la fila bajo el cursor destaque sobre la zebra. */
.kcrm-table tbody tr:nth-of-type(even) {
  background: #fbfbfc;
}

.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);
}

/* Enlace dentro de una celda (Nombre / N°) hacia la ficha. Hereda el color de la celda
   y sólo se resalta en rojo + subrayado al pasar el cursor — navegación sin ruido visual. */
.kcrm-cell-link {
  color: inherit;
  text-decoration: none;
}

.kcrm-cell-link:hover {
  color: var(--kcrm-red);
  text-decoration: underline;
}

.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); }

/* Estado editable inline en el encabezado del lead.
   El trigger es una pill que actúa como dropdown-toggle: reusa los colores semánticos del pill
   base y al hacer hover muestra un lápiz como pista de "click para cambiar". */
.kcrm-status-inline { position: relative; }

.kcrm-status-inline__btn {
  border: 0;
  cursor: pointer;
  padding-right: 0.625rem;
  transition: filter 0.15s ease, box-shadow 0.15s ease;
}
.kcrm-status-inline__btn:hover,
.kcrm-status-inline__btn:focus-visible {
  filter: brightness(0.95);
  box-shadow: 0 0 0 2px rgba(115, 103, 240, 0.18);
  outline: none;
}
.kcrm-status-inline__btn::after { display: none; }   /* sustituimos el caret por el lápiz */

.kcrm-status-inline__edit {
  margin-left: 0.375rem;
  font-size: 0.875rem;
  opacity: 0.55;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.kcrm-status-inline__btn:hover .kcrm-status-inline__edit,
.kcrm-status-inline__btn[aria-expanded="true"] .kcrm-status-inline__edit {
  opacity: 1;
  transform: scale(1.08);
}

/* Menú del desplegable */
.kcrm-status-menu {
  min-width: 280px;
  max-width: 360px;
  padding: 0;
  border: 1px solid rgba(67, 89, 113, 0.12);
  border-radius: 0.625rem;
  overflow: hidden;
  /* Animación sutil al abrir. Bootstrap añade .show al menú; usamos eso como gatillo. */
  animation: kcrmStatusMenuIn 0.14s ease-out;
}

@keyframes kcrmStatusMenuIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

.kcrm-status-menu__header {
  padding: 0.625rem 0.875rem;
  background: rgba(67, 89, 113, 0.04);
  border-bottom: 1px solid rgba(67, 89, 113, 0.08);
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.kcrm-status-menu__title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--kcrm-muted);
}
.kcrm-status-menu__hint {
  font-size: 0.6875rem;
  color: var(--kcrm-muted);
  opacity: 0.75;
}

.kcrm-status-menu__list {
  max-height: 320px;
  overflow-y: auto;
  padding: 0.25rem;
}

.kcrm-status-menu__item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  background: transparent;
  border: 0;
  border-radius: 0.5rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease;
}
.kcrm-status-menu__item:hover,
.kcrm-status-menu__item:focus-visible {
  background: rgba(115, 103, 240, 0.08);
  outline: none;
}
.kcrm-status-menu__item.is-current {
  background: rgba(67, 89, 113, 0.06);
  cursor: default;
}
.kcrm-status-menu__item.is-current:hover {
  /* El item actual no se puede reseleccionar; no le damos hover de "acción". */
  background: rgba(67, 89, 113, 0.06);
}

/* Dot semántico — reutiliza el color del pill correspondiente. */
.kcrm-status-menu__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background: currentColor;
}
/* Cuando va dentro del dot, el color base lo aporta la clase kcrm-pill--xxx via `color:`. */
.kcrm-status-menu__dot.kcrm-pill--success { color: #28c76f; background: #28c76f; }
.kcrm-status-menu__dot.kcrm-pill--warning { color: #ff9f43; background: #ff9f43; }
.kcrm-status-menu__dot.kcrm-pill--danger  { color: #ea5455; background: #ea5455; }
.kcrm-status-menu__dot.kcrm-pill--info    { color: #00cfe8; background: #00cfe8; }
.kcrm-status-menu__dot.kcrm-pill--muted   { color: var(--kcrm-muted); background: var(--kcrm-muted); }
.kcrm-status-menu__dot.kcrm-pill--brand   { color: var(--kcrm-red); background: var(--kcrm-red); }

.kcrm-status-menu__text {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}
.kcrm-status-menu__code {
  font-weight: 600;
  font-size: 0.8125rem;
  line-height: 1.2;
}
.kcrm-status-menu__desc {
  font-size: 0.75rem;
  color: var(--kcrm-muted);
  margin-top: 0.125rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kcrm-status-menu__check {
  font-size: 1rem;
  color: #28c76f;
  flex-shrink: 0;
}

/* ----- 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);
}

/* ----- Copiar al portapapeles (icono al hover) ----- */
/* El dato (chip mailto/VoIP o el valor de un campo) va envuelto en .kcrm-copyable junto a un
   botón-icono que sólo aparece al pasar el cursor. No reemplaza la acción del chip. */
.kcrm-copyable {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
}

.kcrm-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--kcrm-text-soft);
  cursor: pointer;
  padding: 0.125rem;
  border-radius: 4px;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.kcrm-copy-btn i {
  font-size: 0.875rem;
}

.kcrm-copyable:hover .kcrm-copy-btn,
.kcrm-copy-btn:focus-visible {
  opacity: 1;
}

.kcrm-copy-btn:hover {
  color: var(--kcrm-red);
  background: var(--kcrm-bg-soft);
}

.kcrm-copy-btn.is-copied {
  opacity: 1;
  color: #28a745;
}

/* En dispositivos sin hover (táctiles) el icono está siempre visible. */
@media (hover: none) {
  .kcrm-copy-btn {
    opacity: 1;
  }
}

.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); }

/* Cabecera de sección de la ficha: chip de icono con tinte de marca + título oscuro y una
   línea fina que recorre el resto del ancho y se desvanece. Diferencia con claridad el
   subtítulo de los campos (label/value) que van debajo, con un acabado moderno y sobrio. */
.kcrm-section-title {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--kcrm-title);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0.25rem 0 1.25rem;
}

/* La variante "Dirección" mete el icono+texto dentro de un <span>; lo alineamos igual. */
.kcrm-section-title > span {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
}

/* Icono dentro de un cuadrado redondeado con tinte de marca: ancla visual de la sección. */
.kcrm-section-title > i,
.kcrm-section-title > span > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.5rem;
  background: rgba(237, 28, 36, 0.1);
  color: var(--kcrm-red);
  font-size: 1rem;
  flex-shrink: 0;
}

/* Línea divisoria de marca que completa el ancho a la derecha del título: arranca a media
   intensidad de rojo y se desvanece, para que se vea la división sin recargar. Solo en las
   fichas (que usan `div.kcrm-section-title`); NO en las cabeceras de las gráficas del home
   (que usan `h6.kcrm-section-title`). En la variante con acción a la derecha ("Dirección") la
   línea es un elemento explícito (`__rule`) intercalado entre el título y el botón; ahí se
   omite el ::after para no duplicarla. */
div.kcrm-section-title:not(.justify-content-between)::after,
.kcrm-section-title__rule {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  border-radius: 2px;
  background: linear-gradient(to right, rgba(237, 28, 36, 0.5), rgba(237, 28, 36, 0));
}

/* En "Dirección" la línea va entre el título y el botón: separación a ambos lados. */
.kcrm-section-title__rule {
  margin: 0 0.75rem;
}

/* ----- Dashboard charts ----- */

.kcrm-chart-card .card-header {
  padding-bottom: 0.5rem;
  border-bottom: 0;
}

.kcrm-chart-card .card-body { padding-top: 0.5rem; }

.kcrm-chart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  color: var(--kcrm-muted);
  text-align: center;
}

.kcrm-chart-empty i { font-size: 2.25rem; margin-bottom: 0.5rem; opacity: 0.55; }

/* ----- 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;
}

/* Modal de adjunto landing (PDF / imagen) — viewer ocupa la mayoría del alto del modal. */
.kcrm-attachment-body {
  min-height: 70vh;
  position: relative;
  background: var(--bs-body-bg);
}

.kcrm-attachment-loading,
.kcrm-attachment-error,
.kcrm-attachment-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
  text-align: center;
  padding: 2rem;
}

.kcrm-attachment-viewer {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kcrm-attachment-iframe {
  width: 100%;
  height: 80vh;
  border: 0;
}

.kcrm-attachment-img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  display: block;
}