/* CRM Xtrim v2.7.9
   Encabezados sticky, paginación compacta y sistema visual global coherente. */

:root {
  --crm-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --crm-text: #172033;
  --crm-muted: #667085;
  --crm-border: #d9e3f1;
  --crm-surface: #ffffff;
  --crm-soft: #f7faff;
  --crm-primary: #285bd7;
  --crm-radius-sm: 10px;
  --crm-radius-md: 14px;
  --crm-control-height: 44px;
}

html, body, button, input, select, textarea, table {
  font-family: var(--crm-font-family);
}

body {
  color: var(--crm-text);
  font-size: 14px;
  line-height: 1.45;
}

h1, h2, h3, h4,
.page-title,
.card-head h2,
.drawer h2,
.drawer-panel h2 {
  color: var(--crm-text);
  letter-spacing: -0.02em;
}

h1, .topbar h1 { font-size: clamp(22px, 2vw, 28px); line-height: 1.15; }
h2, .content-card h2, .drawer h2 { font-size: clamp(20px, 1.7vw, 25px); line-height: 1.2; }
h3, .content-card h3 { font-size: 17px; line-height: 1.25; }

.content-card,
.drawer-panel,
.cap-modal,
.metric-card {
  border-color: var(--crm-border);
}

.btn,
.icon-button,
button,
input,
select,
textarea {
  font-size: 14px;
}

.btn,
.opx-command,
.ct-toolbar-button {
  min-height: var(--crm-control-height);
  border-radius: 12px;
  font-weight: 800;
}

input,
select,
textarea,
.opx-select,
.ct-search,
.ct-filter-panel select,
.ct-filter-panel input {
  border-color: #ced9ea;
  border-radius: 12px;
}

input:focus,
select:focus,
textarea:focus {
  outline: 3px solid rgba(40, 91, 215, .12);
  border-color: #7b9fe8;
}

/* Tabla de Leads: scroll vertical interno y encabezado siempre visible. */
.opx-table-wrap {
  max-height: clamp(360px, 62vh, 720px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  position: relative;
}

.opx-table thead th {
  position: sticky;
  top: 0;
  z-index: 12;
  background: #f7faff;
  box-shadow: inset 0 -1px #dce5f0, 0 3px 8px rgba(15, 23, 42, .05);
}

/* Tabla de Contactos: mismo comportamiento sticky. */
.ct-table-scroll {
  max-height: clamp(360px, 62vh, 720px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  position: relative;
}

.ct-table thead th {
  position: sticky;
  top: 0;
  z-index: 12;
  background: #f7faff;
  box-shadow: inset 0 -1px #dce5f0, 0 3px 8px rgba(15, 23, 42, .05);
}

/* Evita que el encabezado sticky quede por debajo de las primeras columnas operativas. */
.opx-table thead th[data-col="select"],
.opx-table thead th[data-col="edit"],
.opx-table thead th[data-col="progress"],
.ct-table thead th[data-col="select"],
.ct-table thead th[data-col="edit"],
.ct-table thead th[data-col="activity"] {
  z-index: 13;
}

/* Drag and drop visible en el selector de columnas de Contactos. */
.ct-column-item {
  cursor: grab;
  user-select: none;
  border: 1px solid transparent;
  border-bottom-color: #e7edf5;
  border-radius: 12px;
  padding: 0 8px;
  transition: background .16s ease, border-color .16s ease, opacity .16s ease, transform .16s ease;
}

.ct-column-item:active { cursor: grabbing; }
.ct-column-item.dragging {
  opacity: .42;
  background: #eef4ff;
  border-color: #9db8ff;
}
.ct-column-item.drag-over {
  background: #f5f8ff;
  border: 2px dashed var(--crm-primary);
  transform: translateY(1px);
}
.ct-drag {
  color: #667085;
  font-size: 22px;
  line-height: 1;
}

/* Paginación coherente y compacta en ambos módulos. */
.opx-footer,
.ct-footer {
  min-height: 68px;
  background: #f8fbff;
  border-top: 1px solid #e1e8f2;
}

.opx-page-size-wrap select,
.ct-footer select {
  min-width: 76px;
  height: 42px;
  font-weight: 800;
}

.opx-pager button,
.ct-pager button {
  min-width: 42px;
  height: 42px;
  border-radius: 11px;
  font-size: 14px;
}

/* Consistencia de tablas en el resto de la aplicación. */
.data-table,
table {
  color: var(--crm-text);
}

.data-table th,
.opx-table th,
.ct-table th {
  font-size: 12.5px;
  font-weight: 900;
  color: #25324a;
}

.data-table td,
.opx-table td,
.ct-table td {
  font-size: 13px;
  color: #172033;
}

.data-table tbody tr:hover,
.opx-table tbody tr:hover,
.ct-table tbody tr:hover {
  background: #f8fbff;
}

.inline-message,
.form-message,
.empty-state,
.opx-empty,
.ct-empty-history {
  font-size: 14px;
  color: var(--crm-muted);
}

/* Paneles laterales y modales con la misma escala visual. */
.drawer-panel header,
.opx-detail-head,
.ct-columns-drawer header,
.opx-columns-drawer header {
  background: #fff;
}

.drawer-panel label,
.contact-form-grid label,
.opx-activity-form label,
.opx-detail-field label,
.ct-filter-panel label {
  font-size: 12px;
  font-weight: 800;
  color: #475467;
}

.drawer-panel input,
.drawer-panel select,
.drawer-panel textarea,
.contact-form-grid input,
.contact-form-grid select,
.contact-form-grid textarea {
  font-size: 14px;
}

@media (max-width: 900px) {
  .opx-table-wrap,
  .ct-table-scroll {
    max-height: 58vh;
  }
}

@media (max-height: 720px) {
  .opx-table-wrap,
  .ct-table-scroll {
    max-height: 52vh;
  }
}