:root {
  /* Tokens de color — paleta B2B industrial profesional (especificación §44).
     Se ajustará cuando existan los colores corporativos definitivos. */
  --smelpro-azul-900: #0b2436;
  --smelpro-azul-800: #12364f;
  --smelpro-azul-700: #1a4a6b;
  --smelpro-acento: #1f7a8c;
  --smelpro-acento-suave: #e3f2f4;
  --smelpro-texto: #1f2d3a;
  --smelpro-texto-suave: #5b6b7a;
  --smelpro-fondo: #f3f6f8;
  --smelpro-borde: #d9e2e8;
  --smelpro-ok: #2e7d32;
  --smelpro-warn: #b26a00;
  --smelpro-danger: #b3261e;
}

body.bg-app {
  background-color: var(--smelpro-fondo);
  color: var(--smelpro-texto);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* Resumen económico: tarjetas de igual tamaño y jerarquía tipográfica. */
.resumen-economico-card {
  min-height: 4.75rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.resumen-economico-card strong {
  line-height: 1.2;
  letter-spacing: .01em;
}
@media (max-width: 575.98px) {
  .resumen-economico-card { min-height: 4.5rem; }
}

.app-navbar {
  background: linear-gradient(90deg, var(--smelpro-azul-900), var(--smelpro-azul-700));
}

/* Logo oficial Smelpro en la navbar: proporción manual (842x596 ≈ 1.41),
   sin deformar, adaptado a la altura existente del navbar. */
.navbar-logo {
  height: 30px;
  width: auto;
  object-fit: contain;
  display: inline-block;
}

.app-card {
  background: #fff;
  border: 1px solid var(--smelpro-borde);
  border-radius: 0.75rem;
}

.app-card .card-header {
  background: var(--smelpro-azul-900);
  color: #fff;
  border-radius: 0.75rem 0.75rem 0 0;
  font-weight: 600;
}

/* Color de la etiqueta de rol. El RESPALDO es importante: el badge de Bootstrap
   pinta el texto de blanco, así que un rol sin color propio queda blanco sobre
   blanco (la celda parece vacía) — pasó con «Personal (trabajador)» el
   27/09/2026, reportado por Gerencia. Cualquier rol nuevo sin color se ve gris;
   las reglas específicas van después, así que ganan por orden. */
[class*="app-rol-"] { background: #6c757d; }
.app-rol-ceo { background: #6a1b9a; }
.app-rol-vendedor { background: #1565c0; }
.app-rol-operaciones { background: #00695c; }
.app-rol-admin_tecnico { background: #455a64; }
.app-rol-catalogo { background: #0277bd; }
.app-rol-inventario { background: #5e35b1; }
.app-rol-personal { background: #00838f; }

.app-tabla th {
  background: var(--smelpro-azul-800);
  color: #fff;
  font-weight: 600;
  font-size: 0.85rem;
}

/* Badges genéricos de estados/movimientos: texto oscuro sobre fondo claro (legible).
   Los `estado-*` específicos (BORRADOR, ENVIADA…) añaden su propio color encima. */
.app-badge-estado {
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  background: var(--bs-secondary-bg-subtle, #e9ecef);
  color: var(--bs-body-color, #212529);
  border: 1px solid rgba(0, 0, 0, 0.10);
}

.estado-BORRADOR { background: #eceff1; color: #37474f; }
.estado-PREPARANDO { background: #fff3e0; color: #b26a00; }
.estado-ENVIADA { background: #e3f2fd; color: #1565c0; }
.estado-SEGUIMIENTO { background: #e8f5e9; color: #2e7d32; }
.estado-GANADA { background: #2e7d32; color: #fff; }
.estado-PERDIDA { background: #ffebee; color: #b3261e; }
.estado-CANCELADA { background: #eceff1; color: #607d8b; }

/* Cabecera de revisión y resumen compacto de cliente/contacto. */
.revision-cabecera { min-width: 0; }
.revision-asunto { font-size: 1.05rem; line-height: 1.35; }
.revision-meta { line-height: 1.45; }
.revision-pill {
  color: #1f5f91;
  background: #e8f2fb;
  border: 1px solid #c4d9ea;
  font-weight: 600;
}
.revision-condiciones-toggle { color: inherit; }
.revision-condiciones-toggle:hover { color: var(--smelpro-azul-700); }
.revision-condiciones-resumen {
  color: var(--smelpro-texto-suave);
  background: #f8fafc;
  border-bottom: 1px solid var(--smelpro-borde);
  line-height: 1.45;
}
.contacto-preview {
  /* Vista previa compacta del contacto: Cargo · Correo · Teléfono. */
  font-size: 0.8rem;
  color: var(--smelpro-texto-suave);
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}
.contacto-sin-registros {
  font-size: 0.8rem;
  color: var(--smelpro-texto-suave);
}

/* Composicion interna: franja sobria, diferenciada de los encabezados azules */
.composicion-badge {
  background: #eef2f6;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.tabla-componentes thead th {
  background: #eaf1f6;
  color: #52687a;
  font-weight: 600;
  font-size: 0.75rem;
  border-bottom: 1px solid #cbd8e1;
}

/* Jerarquía visual de ítems y componentes internos de la cotización. */
.item-principal-row > td,
.item-principal-row.tiene-componentes > td {
  background-color: #fff !important;
  background-image: none !important;
  border-top: 1px solid #d6e0e7;
  border-bottom-color: #d6e0e7;
}
.item-principal-row.tiene-componentes > td {
  background-color: #f8fbfe !important;
  border-top-color: #b9d2ea;
}
.item-principal-row.tiene-componentes > td:first-child {
  box-shadow: inset 3px 0 0 #2f75b5;
}
.item-principal-row:hover > td,
.item-principal-row.tiene-componentes:hover > td {
  background-color: #eef5fa !important;
}
.item-controles {
  display: grid;
  grid-template-columns: 1.25rem 1.85rem 1.65rem;
  align-items: center;
  column-gap: .4rem;
  width: max-content;
  min-width: 5.5rem;
}
.item-controles .js-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  margin: 0 !important;
  color: #58758d !important;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.18rem;
  opacity: .95;
}
.item-controles .js-drag-handle:hover { color: #1f5f91 !important; }
.item-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.65rem;
  color: #fff;
  background: #123f79;
  border-radius: .3rem;
  font-size: .8rem;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(11, 36, 54, .18);
}
.item-collapse-toggle,
.item-collapse-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
}
.item-collapse-toggle {
  padding: 0;
  color: #1f5f91;
  background: #f1f7fc;
  border: 1px solid #b8ccdc;
  border-radius: .42rem;
  font-size: .9rem;
  transition: color .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.item-collapse-toggle:hover,
.item-collapse-toggle[aria-expanded="true"] {
  color: #fff;
  background: #2f75b5;
  border-color: #2f75b5;
}
.item-collapse-toggle:focus-visible { outline: 0; box-shadow: 0 0 0 .18rem rgba(47, 117, 181, .22); }
.item-collapse-toggle .bi-chevron-down { transition: transform .18s ease; }
.item-collapse-toggle[aria-expanded="false"] .bi-chevron-down { transform: rotate(-90deg); }
.componentes-row > td { background: #f4f8fb !important; }
.componentes-panel {
  margin: .35rem .75rem .25rem 2rem;
  padding: .28rem .55rem;
  background: #f7f9fb;
  border: 1px solid #d5e0e8;
  border-left: 3px solid #8eacc4;
  border-radius: .45rem;
}
.componentes-panel .tabla-componentes { margin-top: .25rem; }
.componentes-row > td > .tabla-componentes {
  width: calc(100% - 2.75rem);
  margin-left: 2rem !important;
  margin-right: .75rem;
  border: 1px solid #d5e0e8;
  border-radius: .35rem;
  overflow: hidden;
}
.componente-interno-row > td {
  background-color: #fff !important;
  border-color: #dde5eb;
  padding-top: .3rem;
  padding-bottom: .3rem;
}
.componente-interno-row:hover > td { background-color: #eef5fa !important; }
.componente-numero {
  display: inline-block;
  min-width: 2.2rem;
  color: #365b78;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 767.98px) {
  .componentes-panel { margin-left: .65rem; margin-right: .35rem; }
}

/* Listado principal de cotizaciones: columnas compactas y cliente/asunto amplios. */
.cotizaciones-lista .col-fecha { width: 7.5rem; }
.cotizaciones-lista .col-pea { width: 8.5rem; }
.cotizaciones-lista .col-cliente { width: 21%; }
.cotizaciones-lista .col-descripcion { width: 23%; }
.cotizaciones-lista .col-vendedor { width: 13%; }
.cotizaciones-lista .col-revision { width: 6rem; }
.cotizaciones-lista .col-estado { width: 8rem; }
.cotizaciones-lista .col-accion { width: 5rem; }
.cotizaciones-lista .cliente-cell,
.cotizaciones-lista .descripcion-cell,
.cotizaciones-lista .vendedor-cell {
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cotizaciones-lista .descripcion-cell { color: var(--smelpro-texto); }
@media (max-width: 991.98px) {
  .cotizaciones-lista { min-width: 900px; }
}

/* Paginación común server-side para listados. */
.list-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1.25rem;
  flex-wrap: wrap;
  background: #fff;
}
.list-pagination-info { white-space: nowrap; }
.list-pagination-size select { width: 4.5rem; }
.list-pagination-nav { margin-left: auto; }
.list-pagination .page-link { color: var(--smelpro-azul-700); }
.list-pagination .page-item.active .page-link {
  color: #fff;
  background: var(--smelpro-azul-800);
  border-color: var(--smelpro-azul-800);
}
@media (max-width: 575.98px) {
  .list-pagination-info { width: 100%; }
  .list-pagination-nav { margin-left: 0; width: 100%; overflow-x: auto; }
}

/* Ficha comercial: vista previa del administrador y modal del cotizador. */
.ficha-preview-img {
  max-width: 260px;
  max-height: 200px;
  object-fit: contain;
  border: 1px solid var(--smelpro-borde);
  border-radius: .3rem;
}
.ficha-modal-img {
  display: inline-block;
  max-width: 100%;
  max-height: 320px;
  object-fit: contain;
  border: 1px solid var(--smelpro-borde);
  border-radius: .3rem;
}
.ficha-descripcion {
  white-space: pre-line;
  color: var(--smelpro-texto);
}

/* Desplegable del buscador de catálogo (nuevo ítem) */
.dropdown-catalogo {
  position: absolute;
  z-index: 1080;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--smelpro-borde);
  border-radius: 0.5rem;
  box-shadow: 0 6px 18px rgba(11, 36, 54, 0.12);
}

/* Selector de NIVEL compacto tipo badge (no desborda el modal) */
.nivel-badge {
  appearance: none;
  -webkit-appearance: none;
  background-color: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  font-weight: 600;
  color: #0f172a;
  padding: 0.3rem 1.5rem 0.3rem 0.7rem;
  max-width: 100%;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2364748b'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
}
.nivel-badge:focus {
  border-color: var(--smelpro-azul-500, #1d4ed8);
  box-shadow: 0 0 0 0.15rem rgba(29, 78, 216, 0.15);
}
.nivel-badge option {
  font-weight: 400;
}
.dropdown-catalogo .item-opcion {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  cursor: pointer;
  border-bottom: 1px solid #eef2f6;
  font-size: 0.85rem;
}
.dropdown-catalogo .item-opcion:hover,
.dropdown-catalogo .item-opcion.seleccionado {
  background: var(--smelpro-acento-suave);
}
.dropdown-catalogo .item-opcion .cod {
  font-family: "Consolas", monospace;
  font-size: 0.78rem;
  color: var(--smelpro-acento);
  white-space: nowrap;
}
.dropdown-catalogo .item-opcion .desc {
  /* Hasta dos líneas antes de recortar: con el modal ensanchado (modal-lg) las
     descripciones del catálogo se leen completas, y si alguna fuera más larga
     igual se muestra entera en el tooltip (title). Antes era una sola línea con
     puntos suspensivos y no se alcanzaba a leer (pedido de Gerencia 13/09/2026). */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
  line-height: 1.25;
  color: var(--smelpro-texto);
  flex: 1;
}
.dropdown-catalogo .item-opcion .precio {
  color: #2e7d32;
  font-weight: 600;
  font-size: 0.78rem;
  white-space: nowrap;
}

/* ===========================================================================
   �rdenes de compra (m�dulo postventa) � badges de estados calculados.
   Misma paleta que los estados de cotizaciones (no se crea una nueva).
   =========================================================================== */
.oc-op-PENDIENTE_OC { background: #fff3e0; color: #b26a00; }
.oc-op-EN_PROCESO { background: #e3f2fd; color: #1565c0; }
.oc-op-ENTREGADO_CERRADO { background: #e8f5e9; color: #2e7d32; }
/* Cobranza de la OC (25/10/2026): escala tipo semáforo por ciclo y urgencia.
   Gris = sin facturar (fuera del ciclo); azul = por cobrar (seguimiento normal);
   ámbar = pago por validar (acción de Gerencia); rojo = vencido (alerta);
   verde = pagado (cerrado). El orden cuenta el ciclo: gris -> azul -> ámbar
   -> verde, y el rojo es el desvío que exige atención inmediata. */
.oc-cob-NO_FACTURADO { background: #f5f5f5; color: #616161; }
.oc-cob-POR_COBRAR { background: #e3f2fd; color: #1565c0; }
.oc-cob-POR_VALIDAR { background: #fff3cd; color: #7a5400; }
.oc-cob-VENCIDO { background: #ffebee; color: #b3261e; }
.oc-cob-PAGADO { background: #e8f5e9; color: #2e7d32; }
.oc-fac-POR_COBRAR { background: #e3f2fd; color: #1565c0; }
.oc-fac-VENCIDA { background: #ffebee; color: #b3261e; }
.oc-fac-PENDIENTE_VALIDACION { background: #fff3cd; color: #7a5400; }
.oc-fac-PAGADA { background: #e8f5e9; color: #2e7d32; }

/* ===========================================================================
   CRM / Seguimiento comercial — mismos tokens y paleta del sistema.
   =========================================================================== */
.crm-subnav .nav-link { color: var(--smelpro-azul-700); }
.crm-subnav .nav-link.active { background: var(--smelpro-azul-800); }
.crm-subnav .nav-link.disabled { color: #a6b3bf; }

.app-badge-etapa {
  background: #eef2f6;
  color: #1a4a6b;
  border: 1px solid #cbd8e1;
  font-size: 0.72rem;
  font-weight: 600;
}
.app-badge-actividad {
  background: #e8f2fb;
  color: #1f5f91;
  font-size: 0.68rem;
}
.app-badge-seg-vencido { background: #ffebee; color: #b3261e; }
.app-badge-seg-hoy { background: #fff3e0; color: #b26a00; }
.app-badge-seg-proximo { background: #e8f5e9; color: #2e7d32; }
.app-badge-seg-sin_programar { background: #eceff1; color: #607d8b; }

.crm-timeline-item {
  padding: 0.5rem 0 0.65rem 0;
  border-bottom: 1px solid #eef2f6;
}
.crm-timeline-item:last-child { border-bottom: 0; }

/* Dashboard CRM: tarjetas de KPI (icono + cifra + nota). */
.crm-kpi { display: flex; align-items: flex-start; gap: 0.65rem; }
.crm-kpi-icon {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--smelpro-azul-100, #e3f0fb);
  color: var(--smelpro-azul-800, #0b2436);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
}
.crm-kpi a, a.crm-kpi:hover { text-decoration: none; }

/* Avatar con la inicial del autor en la línea de tiempo del negocio (CRM). */
.crm-avatar-inicial {  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--smelpro-azul-100, #e3f0fb);
  color: var(--smelpro-azul-800, #0b2436);
  font-weight: 700;
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}

.tabular-nums { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------
   CRM · Pipeline (tablero Kanban) — columnas por etapa y tarjetas.
   Mismos tokens del sistema; scroll horizontal en pantallas chicas.
   --------------------------------------------------------------------------- */
.crm-board {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  overflow-x: auto;
  padding-bottom: 0.75rem;
}
.crm-columna {
  flex: 0 0 270px;
  width: 270px;
  background: #eef2f6;
  border: 1px solid var(--smelpro-borde);
  border-radius: 0.6rem;
}
.crm-columna-head {
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--smelpro-borde);
}
.crm-columna-titulo {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--smelpro-azul-900);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.crm-columna-resumen { font-size: 0.78rem; color: var(--smelpro-texto-suave); }
.crm-columna-count { font-weight: 700; color: var(--smelpro-azul-700); }
.crm-columna-body {
  min-height: 90px;
  max-height: 68vh;
  overflow-y: auto;
  padding: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  transition: background-color 0.15s ease;
}
.crm-columna-body.crm-drop-activo {
  background: var(--smelpro-acento-suave);
  outline: 2px dashed var(--smelpro-acento);
  outline-offset: -3px;
}
.crm-card {
  background: #fff;
  border: 1px solid var(--smelpro-borde);
  border-left: 3px solid var(--smelpro-acento);
  border-radius: 0.5rem;
  padding: 0.55rem 0.65rem;
  box-shadow: 0 1px 2px rgba(11, 36, 54, 0.06);
  cursor: grab;
}
.crm-card:hover { border-color: #b9d2ea; box-shadow: 0 3px 8px rgba(11, 36, 54, 0.10); }
.crm-card.crm-card-arrastrando { opacity: 0.5; }
.crm-card-empresa {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--smelpro-azul-900);
}
.crm-card-drag { margin-left: auto; color: #93a7b8; font-size: 0.8rem; }
.crm-card-nombre {
  display: block;
  font-size: 0.78rem;
  color: var(--smelpro-texto);
  text-decoration: none;
  margin: 0.15rem 0 0.35rem 0;
}
.crm-card-nombre:hover { color: var(--smelpro-azul-700); text-decoration: underline; }
.crm-card-meta { font-size: 0.75rem; color: var(--smelpro-texto-suave); }
.crm-card-monto {
  font-size: 0.85rem;
  font-weight: 700;
  color: #2e7d32;
  font-variant-numeric: tabular-nums;
  margin-top: 0.15rem;
}
.crm-card-pie { margin-top: 0.35rem; }
.crm-card-actividad {
  margin-top: 0.3rem;
  font-size: 0.7rem;
  color: var(--smelpro-texto-suave);
}
.crm-vacio {
  font-size: 0.78rem;
  color: var(--smelpro-texto-suave);
  text-align: center;
  padding: 0.75rem 0.25rem;
}
.crm-ver-mas {
  display: block;
  text-align: center;
  font-size: 0.75rem;
  color: var(--smelpro-azul-700);
  text-decoration: none;
  padding: 0.35rem;
  border: 1px dashed var(--smelpro-borde);
  border-radius: 0.4rem;
}
.crm-ver-mas:hover { background: #fff; }
.crm-leyenda {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  margin-right: 0.25rem;
  vertical-align: middle;
}
.crm-leyenda-vencido { background: #b3261e; }
.crm-leyenda-hoy { background: #b26a00; }
.crm-leyenda-proximo { background: #2e7d32; }
.crm-leyenda-sin { background: #90a4ae; }
.crm-leyenda-estancado { background: #6f42c1; }

/* ---------------------------------------------------------------------------
   CRM · Bloque 1 y 2 de la auditoría (docs/25)
   - Tarjeta compacta: menos padding, separadores finos y acciones en línea.
   - `crm-card-estancado`: negocio sin contacto humano reciente (equivale al
     «rotting» de Pipedrive, con umbral de 14 días).
   --------------------------------------------------------------------------- */
.crm-card { padding: 0.45rem 0.55rem; }
.crm-card-estancado {
  border-left-color: #6f42c1;
  background: #fbf8ff;
}
.crm-card-linea {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem;
  font-size: 0.72rem;
  color: var(--smelpro-texto-suave);
}
.crm-card-linea .crm-card-monto { margin-top: 0; }
.crm-card-accion {
  margin-top: 0.25rem;
  font-size: 0.72rem;
  color: var(--smelpro-azul-900);
}
/* Una sola línea de estado: badge + contacto/estancado (antes eran 2-3 filas
   que estiraban la tarjeta de 160 a 223 px). */
.crm-card-pie {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: nowrap;
  overflow: hidden;
}
.crm-card-contacto,
.crm-card-sin-contacto {
  font-size: 0.66rem;
  color: #7a8b98;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crm-card-alerta {
  font-size: 0.66rem;
  font-weight: 700;
  color: #6f42c1;
  white-space: nowrap;
}
.crm-card-evento {
  margin-top: 0.15rem;
  font-size: 0.66rem;
  color: #9aa9b5;
}
/* Acciones de la tarjeta: UNA fila (Seguim. + iconos de contacto + Hecho).
   `nowrap` evita que un icono se caiga a una segunda línea. El ancho se cuidó
   al detalle: la fila ocupaba 236 px dentro de una caja de 212 px y entraba
   raspando, así que los botones son compactos (los iconos conservan su tamaño
   táctil) y el aire va entre el botón azul y el grupo de iconos. */
.crm-card-botones {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
}
.crm-card-botones .btn {
  --bs-btn-padding-y: 0.1rem;
  --bs-btn-padding-x: 0.32rem;
  --bs-btn-font-size: 0.68rem;
  --bs-btn-line-height: 1.25;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.5rem;
  white-space: nowrap;
}
.crm-card-contacto-iconos {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin-left: auto;
}
.crm-card-contacto-iconos .btn { min-width: 1.6rem; }
.crm-card-hecho { display: inline-flex; margin: 0; }
.crm-card .btn,
.crm-card form,
.crm-card a.btn { cursor: pointer; }

/* Celda de acciones de los listados (Negocios, Seguimientos): dos filas
   alineadas a la derecha y con el mismo tamaño de botón, para que la columna
   se lea ordenada en lugar de flotando. */
.crm-acciones-celda {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
}
.crm-acciones-celda .crm-contacto { justify-content: flex-end; }
.crm-acciones-fila {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
}
/* Variante de UNA sola fila para listados donde el contacto directo no hace
   falta (lista de empresas): los botones no se parten ni dejan huecos. */
.crm-acciones-fila-inline {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
  flex-wrap: nowrap;
}

/* Dashboard · «Seguimientos que requieren atención»: la altura NO debe depender
   del volumen de datos. Sin tope, la tarjeta crecía hasta 1.400 px y su columna
   estiraba toda la fila, dejando un hueco de ~480 px debajo de «Pipeline»
   (reporte de Gerencia, 13/09/2026). Con tope + scroll interno, el resumen ocupa
   siempre lo mismo y el detalle completo vive en la pantalla Seguimientos
   (a la que llevan los «Ver todos», ya con el filtro del bloque).

   Además la tarjeta se ESTIRA (flex) para que su borde inferior quede a la altura
   de la columna izquierda (Pipeline + Origen), como pidió Gerencia: el cuerpo
   scrollea y la nota del pie queda anclada abajo. */
.crm-atencion-card {
  display: flex;
  flex-direction: column;
  /* 25.25rem ≈ 404 px: en pantallas altas la tarjeta queda a nivel del final de la
     columna izquierda (Pipeline + Origen). Se deja un pelo por debajo a propósito,
     porque el bloque de categorías que va debajo empieza a continuación y así no
     queda un borde «colgando» 11 px sobre el siguiente. */
  min-height: 25.25rem;
}
.crm-atencion-scroll {
  flex: 1 1 auto;
  min-height: 0; /* permite encoger y habilita el scroll interno */
  max-height: 64vh;
  overflow-y: auto;
}

/* Tarjeta del tablero · línea de la cotización vinculada (CRM-4): PEA + estado.
   Solo aparece si el negocio tiene cotizaciones; el monto de la cotización NO se
   repite acá (el de la tarjeta es el del negocio). */
.crm-card-pea {
  display: flex;
  align-items: center;
  font-size: 0.76rem;
  color: var(--smelpro-acento);
  margin-top: 0.15rem;
}
.crm-card-pea .badge {
  font-size: 0.65rem;
  font-weight: 600;
}
/* «Origen» cierra la columna izquierda: se estira para que su borde inferior
   quede a la altura de la tarjeta de atención (columna derecha), con el gráfico
   y la lista centrados en el espacio disponible. */
.crm-origen-card {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.crm-origen-cuerpo {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Avatar de empresa: inicial en círculo (no hay logos cargados; ver docs/26 §4.5). */.crm-avatar-empresa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.6rem;
  background: var(--smelpro-acento-suave);
  color: var(--smelpro-azul-900);
  font-weight: 700;
  font-size: 1.25rem;
  flex: 0 0 auto;
}
/* Versión compacta para las filas de la lista de empresas. */
.crm-avatar-empresa-sm {
  width: 1.9rem;
  height: 1.9rem;
  font-size: 0.9rem;
  border-radius: 0.45rem;
}
/* Acciones de contacto dentro de la tabla de contactos. */
.crm-contacto-acciones {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}
.crm-contacto-acciones .btn {
  --bs-btn-padding-y: 0.1rem;
  --bs-btn-padding-x: 0.35rem;
  --bs-btn-font-size: 0.7rem;
}

@media (max-width: 767.98px) {
  .crm-columna { flex-basis: 240px; width: 240px; }
  .crm-columna-body { max-height: none; }
}