/* ==========================================================================
   NEXECO · CRM interno — estilos propios de la herramienta
   --------------------------------------------------------------------------
   Se apoya en nexeco.css (tokens, botones, campos, avisos) y solo añade lo
   que el sitio público no tiene: cabecera compacta, pestañas, tablas, la
   bandeja de chat y la ventana de hoja de vida. Ningún color a mano: todo
   sale de los tokens --nx-*; las únicas rgba son sombras y velo, igual que
   en la hoja principal.
   ========================================================================== */

/* El gris de fondo separa la herramienta del sitio público (que es blanco):
   quien entra aquí nota de inmediato que está "detrás del mostrador". */
body.crm { background: var(--nx-gris-50); }

/* El CRM alterna pantallas con el atributo `hidden`, y varias de esas zonas
   declaran display:flex. La regla [hidden]{display:none} del navegador no
   lleva !important en todos los motores, así que un display de autor la
   pisa y la zona "oculta" queda a la vista (pasó con el hilo y con el botón
   Salir). Este refuerzo devuelve a `hidden` la última palabra. */
body.crm [hidden] { display: none !important; }

/* ---------- Cabecera compacta -------------------------------------------- */
.crm-cabecera {
  position: sticky; top: 0; z-index: 100;
  background: var(--nx-blanco);
  border-bottom: var(--nx-borde);
}
.crm-cabecera__interior {
  max-width: var(--nx-ancho);
  margin-inline: auto;
  padding-inline: var(--nx-e-5);
  min-height: 60px;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--nx-e-4);
}
.crm-cabecera__marca { display: flex; align-items: center; gap: 10px; }
.crm-cabecera__marca img { width: 32px; height: 32px; flex: none; }
.crm-cabecera__titulo {
  font-size: 1.05rem; margin: 0; letter-spacing: -0.01em;
  color: var(--nx-texto);
}
.crm-cabecera__sesion { display: flex; align-items: center; gap: var(--nx-e-3); }
.crm-cabecera__correo {
  font-size: var(--nx-t-peq); color: var(--nx-texto-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40vw;
}

/* ---------- Pantallas ----------------------------------------------------- */
.crm-pantalla { padding-block: var(--nx-e-7); }
.crm-entrar { max-width: 480px; }
.crm-nota-acceso { margin-top: var(--nx-e-4); }

/* Los pasos vienen de nx-pasos, pero aquí van en un <ol> semántico:
   el número lo dibuja el contador, no la lista. */
.crm-pasos { list-style: none; padding-left: 0; margin: var(--nx-e-6) 0 0; }
.crm-pantalla code {
  background: var(--nx-gris-100);
  border: var(--nx-borde);
  border-radius: var(--nx-r-s);
  padding: 2px 7px;
  font-size: 0.85em;
  word-break: break-all;
}

/* ---------- Resumen ------------------------------------------------------- */
.crm-resumen {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--nx-e-4); margin-bottom: var(--nx-e-5);
}
.crm-cifra {
  background: var(--nx-blanco); border: var(--nx-borde);
  border-radius: var(--nx-r-m);
  padding: var(--nx-e-4) var(--nx-e-5);
}
.crm-cifra__numero {
  display: block;
  font-family: var(--nx-fuente-display); font-weight: 800;
  font-size: 1.9rem; line-height: 1.1; letter-spacing: -0.03em;
  color: var(--nx-tinta);
}
.crm-cifra__texto { font-size: var(--nx-t-peq); color: var(--nx-texto-2); }

/* ---------- Pestañas ------------------------------------------------------ */
.crm-pestanas {
  display: flex; gap: var(--nx-e-2);
  border-bottom: var(--nx-borde);
  margin-bottom: var(--nx-e-5);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.crm-pestanas [role="tab"] {
  background: none; border: 0; cursor: pointer;
  font-family: var(--nx-fuente); font-size: 0.95rem; font-weight: 650;
  color: var(--nx-texto-2);
  padding: 12px 16px; white-space: nowrap;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px; /* pisa la línea del contenedor con la suya */
}
.crm-pestanas [role="tab"]:hover { color: var(--nx-azul); }
.crm-pestanas [role="tab"][aria-selected="true"] {
  color: var(--nx-azul);
  border-bottom-color: var(--nx-azul);
}

/* El aviso ambar vive ahora en nexeco.css: lo usan el CRM y la pagina
   de talento, y tenerlo solo aqui dejaba a talento sin estilo de error. */
/* ---------- Tablas -------------------------------------------------------- */
/* La tabla se desliza dentro de su marco; la página nunca en horizontal. */
.crm-tabla-marco {
  background: var(--nx-blanco); border: var(--nx-borde);
  border-radius: var(--nx-r-m);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.crm-tabla {
  width: 100%; border-collapse: collapse;
  font-size: var(--nx-t-peq);
  min-width: 880px; /* por debajo de esto las columnas se aplastan ilegibles */
}
.crm-tabla th {
  text-align: left;
  font-size: var(--nx-t-micro); font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--nx-texto-3);
  background: var(--nx-gris-50);
  padding: 10px 14px;
  border-bottom: var(--nx-borde);
  white-space: nowrap;
}
.crm-tabla td {
  padding: 12px 14px;
  border-bottom: var(--nx-borde);
  vertical-align: top;
  color: var(--nx-texto);
}
.crm-tabla tr:last-child td { border-bottom: 0; }
.crm-tabla td.crm-celda-mensaje { max-width: 340px; }

.crm-contacto a { display: block; margin-bottom: 2px; }

.crm-tabla select {
  font-family: inherit; font-size: var(--nx-t-peq); color: var(--nx-texto);
  padding: 7px 10px;
  border: 1.5px solid var(--nx-gris-300); border-radius: var(--nx-r-s);
  background: var(--nx-blanco);
}

.crm-acciones { display: flex; flex-direction: column; gap: var(--nx-e-2); align-items: flex-start; }

/* Botón de acción irreversible: ámbar, no azul, para que la mano lo piense. */
.crm-boton-peligro {
  /* El ambar de marca sobre blanco da 3,35:1 y este boton borra datos y
     archivos sin vuelta atras: el unico del CRM que hay que poder leer
     con toda claridad. Se usa el ambar oscuro accesible (6,3:1). */
  background: #8A5306; color: var(--nx-blanco); border-color: transparent;
}
/* Oscurecer, no bajar opacidad: la opacidad rebajaba el contraste justo
   cuando el dedo esta encima y a punto de pulsar. */
.crm-boton-peligro:hover { background: #6E4205; color: var(--nx-blanco); }

/* Con ancho libre, la pregunta de borrado estiraba la columna Acciones y
   empujaba la tabla entera. Envuelve en varias lineas en su lugar. */
.crm-confirmar { display: block; max-width: 240px; font-size: var(--nx-t-peq); color: var(--nx-texto-2); }

.crm-ver-mas {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: var(--nx-t-micro); font-weight: 700;
  color: var(--nx-azul);
}
.crm-ver-mas:hover { color: var(--nx-azul-600); }

/* ---------- Filtro de candidatos ------------------------------------------ */
.crm-barra-filtro {
  display: flex; align-items: center; gap: var(--nx-e-3);
  margin-bottom: var(--nx-e-4);
  font-size: var(--nx-t-peq);
}
.crm-barra-filtro label { font-weight: 650; color: var(--nx-texto); }
.crm-barra-filtro select {
  font-family: inherit; font-size: var(--nx-t-peq); color: var(--nx-texto);
  padding: 8px 12px;
  border: 1.5px solid var(--nx-gris-300); border-radius: var(--nx-r-s);
  background: var(--nx-blanco);
}

/* ---------- Conversaciones ------------------------------------------------ */
.crm-conversaciones {
  display: grid; grid-template-columns: 320px 1fr;
  gap: var(--nx-e-4); align-items: start;
}
.crm-lista-conversaciones {
  background: var(--nx-blanco); border: var(--nx-borde);
  border-radius: var(--nx-r-m);
  overflow-y: auto; max-height: 70vh;
}
.crm-conv {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; border-bottom: var(--nx-borde);
  padding: 12px 14px;
  font-family: inherit; font-size: var(--nx-t-peq); color: var(--nx-texto);
}
.crm-conv:last-child { border-bottom: 0; }
.crm-conv:hover { background: var(--nx-gris-50); }
.crm-conv.esta-activa {
  background: var(--nx-azul-suave);
  box-shadow: inset 3px 0 0 var(--nx-azul);
}
.crm-conv__nombre { display: block; font-weight: 650; margin-bottom: 2px; }
.crm-conv__meta {
  font-size: var(--nx-t-micro); color: var(--nx-texto-3);
  margin-right: var(--nx-e-2);
}
.crm-conv__estado {
  display: inline-block;
  font-size: var(--nx-t-micro); font-weight: 700;
  padding: 1px 9px; border-radius: var(--nx-r-pildora);
  background: var(--nx-verde-suave); color: var(--nx-verde-600);
}
.crm-conv.esta-cerrada .crm-conv__estado {
  background: var(--nx-gris-100); color: var(--nx-texto-3);
}

.crm-hilo-vacio {
  border: 2px dashed var(--nx-gris-300); border-radius: var(--nx-r-m);
  padding: var(--nx-e-7) var(--nx-e-5);
  text-align: center; color: var(--nx-texto-3); font-size: var(--nx-t-peq);
  margin: 0;
}

.crm-hilo {
  background: var(--nx-blanco); border: var(--nx-borde);
  border-radius: var(--nx-r-m);
  display: flex; flex-direction: column;
  min-height: 420px; max-height: 70vh;
}
.crm-hilo__cabecera {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--nx-e-3); flex-wrap: wrap;
  padding: var(--nx-e-3) var(--nx-e-4);
  border-bottom: var(--nx-borde);
}
.crm-hilo__quien { min-width: 0; }
.crm-hilo__nombre { display: block; font-weight: 700; }
.crm-hilo__correo {
  display: block; font-size: var(--nx-t-micro); color: var(--nx-texto-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crm-hilo__acciones { display: flex; gap: var(--nx-e-2); flex-wrap: wrap; }

.crm-hilo__mensajes {
  flex: 1; overflow-y: auto;
  padding: var(--nx-e-4);
  display: flex; flex-direction: column; gap: 10px;
}
.crm-burbuja {
  max-width: 78%;
  padding: 9px 14px; border-radius: 14px;
  font-size: var(--nx-t-peq); line-height: 1.55;
  /* Lo que escriba el visitante se respeta tal cual (saltos de línea
     incluidos) y nunca desborda el marco. */
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.crm-burbuja--visitante {
  align-self: flex-start;
  background: var(--nx-gris-100); color: var(--nx-texto);
  border-bottom-left-radius: 4px;
}
.crm-burbuja--equipo {
  align-self: flex-end;
  background: var(--nx-azul); color: var(--nx-blanco);
  border-bottom-right-radius: 4px;
}
.crm-burbuja__hora {
  display: block; margin-top: 3px;
  font-size: var(--nx-t-micro); opacity: .72;
}

.crm-hilo__nota { margin: 0 var(--nx-e-4) var(--nx-e-3); }
.crm-hilo__forma {
  display: flex; gap: var(--nx-e-2); align-items: flex-end;
  padding: var(--nx-e-3) var(--nx-e-4);
  border-top: var(--nx-borde);
}
.crm-hilo__forma textarea {
  flex: 1; resize: none; min-height: 44px;
  font-family: inherit; font-size: var(--nx-t-peq); color: var(--nx-texto);
  padding: 10px 12px; line-height: 1.5;
  border: 1.5px solid var(--nx-gris-300); border-radius: var(--nx-r-s);
}
.crm-hilo__forma textarea:focus {
  outline: none; border-color: var(--nx-azul);
  box-shadow: 0 0 0 4px rgba(18,86,240,.14);
}

/* El botón "Volver a la lista" solo tiene sentido cuando la lista y el hilo
   no caben juntos en pantalla. */
.crm-solo-movil { display: none; }

/* ---------- Ventana de hoja de vida --------------------------------------- */
.crm-velo {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(7,17,32,.55);
  overflow-y: auto;
  padding: var(--nx-e-5);
}
.crm-modal {
  background: var(--nx-blanco);
  border-radius: var(--nx-r-g);
  box-shadow: var(--nx-s-3);
  max-width: 720px; margin: 4vh auto;
  display: flex; flex-direction: column;
  max-height: 88vh;
}
.crm-modal__cabecera {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--nx-e-3);
  padding: var(--nx-e-4) var(--nx-e-5);
  border-bottom: var(--nx-borde);
}
.crm-modal__titulo { margin: 0; font-size: 1.15rem; }
.crm-modal__cuerpo { padding: var(--nx-e-5); overflow-y: auto; }

/* Mientras la ventana está abierta, el fondo no se desplaza. */
body.crm-sin-desplazamiento { overflow: hidden; }

/* Hoja de vida dibujada desde el perfil (respaldo propio del CRM). */
.crm-hv h3 {
  font-size: var(--nx-t-micro); font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--nx-texto-3);
  margin: var(--nx-e-5) 0 var(--nx-e-3);
}
.crm-hv__nombre {
  font-family: var(--nx-fuente-display); font-weight: 800;
  font-size: 1.3rem; letter-spacing: -0.02em; margin-bottom: 2px;
}
.crm-hv__cargo { color: var(--nx-texto-2); font-weight: 650; margin-bottom: var(--nx-e-2); }
.crm-hv__datos { font-size: var(--nx-t-peq); color: var(--nx-texto-3); }
.crm-hv__bloque { margin-bottom: var(--nx-e-4); }
.crm-hv__titulo-bloque { font-weight: 650; margin-bottom: 0; }
.crm-hv__fechas { font-size: var(--nx-t-micro); color: var(--nx-texto-3); margin-bottom: var(--nx-e-1); }
.crm-hv p { font-size: var(--nx-t-peq); }
.crm-hv ul { font-size: var(--nx-t-peq); }

/* ---------- Responsive ---------------------------------------------------- */
@media (max-width: 860px) {
  .crm-conversaciones { grid-template-columns: 1fr; }
  .crm-solo-movil { display: inline-flex; }
  /* Con el hilo abierto, la lista se esconde: en una columna las dos cosas
     a la vez obligan a desplazarse el doble para responder. */
  .crm-conversaciones.muestra-hilo .crm-lista-conversaciones,
  .crm-conversaciones.muestra-hilo .crm-hilo-vacio { display: none; }
  .crm-hilo { max-height: none; min-height: 60vh; }
}

@media (max-width: 620px) {
  .crm-resumen { grid-template-columns: 1fr; }
  .crm-cifra { display: flex; align-items: baseline; gap: var(--nx-e-3); }
  .crm-cifra__numero { font-size: 1.5rem; }
  .crm-cabecera__correo { display: none; }
}

/* El marco de la lista y el de las pestanas recortan el anillo de foco, que
   por defecto se dibuja 3px por FUERA del boton. Dibujarlo por dentro lo
   devuelve a la vista de quien navega con teclado. */
.crm-conv:focus-visible,
.crm-pestanas [role="tab"]:focus-visible { outline-offset: -3px; }

/* Los select de estado se tocan con el dedo desde el celular. */
.crm-tabla select { padding: 11px 12px; }

/* ==========================================================================
   Asesores, tablas de comisión y liquidaciones
   --------------------------------------------------------------------------
   Tres pestañas más, y las primeras del CRM donde se manipula PLATA. De ahí
   dos decisiones que recorren todo este bloque:

   - Toda cifra lleva `font-variant-numeric: tabular-nums` y va alineada a la
     derecha. Con cifras proporcionales, dos totales distintos se ven casi
     iguales de largos y el ojo no detecta el dígito de más.
   - Lo que es de solo lectura se VE de solo lectura (fondo gris, sin borde de
     campo). Un input editable y uno bloqueado que se parecen es una promesa
     que la interfaz no puede cumplir.
   ========================================================================== */

/* El ámbar de marca sobre fondo claro se queda en 3,35:1 y estas pastillas
   son texto pequeño en negrita. Se usa el ámbar oscuro accesible (6,3:1), el
   mismo valor que ya emplea .crm-boton-peligro más arriba, aquí con nombre
   para no repetir el hexadecimal por todo el archivo. */
body.crm { --nx-ambar-oscuro: #8A5306; }

/* ---------- Cuarta cifra del resumen -------------------------------------- */
/* Un total en pesos ocupa el triple que un "12": con el mismo cuerpo de letra
   se salía de la tarjeta. */
.crm-cifra__numero--dinero {
  font-size: 1.4rem;
  font-variant-numeric: tabular-nums;
}
.crm-cifra__detalle {
  display: block;
  font-size: var(--nx-t-micro); color: var(--nx-texto-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- Bloques y formularios ----------------------------------------- */
.crm-bloque { margin-bottom: var(--nx-e-5); }

/* display:grid propio y no heredado de .nx-formulario: esta rejilla la usan
   también bloques que no son <form> (la vigencia de una tabla, el ajuste de
   una liquidación) y sin esto quedaban apilados a ancho completo. */
.crm-forma-rejilla {
  display: grid; gap: var(--nx-e-4);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  align-items: start;
}
.crm-campo-ancho { grid-column: 1 / -1; }
.crm-forma-acciones {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; gap: var(--nx-e-3); align-items: center;
}

/* Un campo deshabilitado tiene que parecerlo: el correo de un asesor ya
   vinculado no se puede tocar y hay que verlo antes de intentarlo. */
.crm-forma-rejilla input:disabled,
.crm-forma-rejilla select:disabled,
.crm-forma-rejilla textarea:disabled {
  background: var(--nx-gris-100); color: var(--nx-texto-3); cursor: not-allowed;
}

/* ---------- Plegables (crear tabla, periodo, liquidación) ------------------ */
/* Son formularios que se usan una vez cada tanto: plegados no compiten con la
   lista, que es lo que se mira todos los días. */
.crm-plegable {
  background: var(--nx-blanco); border: var(--nx-borde);
  border-radius: var(--nx-r-m);
  margin-block: var(--nx-e-4);
}
.crm-plegable > summary {
  cursor: pointer; list-style: none;
  padding: 14px var(--nx-e-5);
  font-size: var(--nx-t-peq); font-weight: 700; color: var(--nx-azul);
}
.crm-plegable > summary::-webkit-details-marker { display: none; }
.crm-plegable > summary::before { content: "+ "; font-weight: 800; }
.crm-plegable[open] > summary::before { content: "\2212 "; }
.crm-plegable > summary:hover { color: var(--nx-azul-600); }
.crm-plegable > form { padding: 0 var(--nx-e-5) var(--nx-e-5); }

/* ---------- Zona de detalle (una tabla o una liquidación abierta) ---------- */
.crm-detalle {
  background: var(--nx-blanco); border: var(--nx-borde);
  border-left: 3px solid var(--nx-azul);
  border-radius: var(--nx-r-m);
  padding: var(--nx-e-5);
  margin-top: var(--nx-e-5);
  display: grid; gap: var(--nx-e-4);
}
.crm-detalle__cabecera {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--nx-e-3); flex-wrap: wrap;
}
.crm-detalle__pie { margin: 0; }
.crm-subtitulo {
  font-size: var(--nx-t-micro); font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--nx-texto-3);
  margin: var(--nx-e-2) 0 0;
}
.crm-nota { font-size: var(--nx-t-micro); color: var(--nx-texto-3); margin: 0; }

.crm-vigencia, .crm-ajuste { gap: var(--nx-e-4); }

/* ---------- Campos dentro de las tablas ----------------------------------- */
/* Ocho columnas con input no caben en 880px sin aplastarse. */
.crm-tabla--ancha { min-width: 1080px; }

.crm-campo-celda {
  width: 100%; min-height: 44px;   /* objetivo táctil */
  font-family: inherit; font-size: var(--nx-t-peq); color: var(--nx-texto);
  padding: 9px 10px;
  border: 1.5px solid var(--nx-gris-300); border-radius: var(--nx-r-s);
  background: var(--nx-blanco);
}
.crm-campo-celda:focus {
  outline: none; border-color: var(--nx-azul);
  box-shadow: 0 0 0 3px rgba(18,86,240,.14);
}
.crm-campo-celda--corto { max-width: 90px; }
.crm-campo-celda--medio { max-width: 140px; }
.crm-campo-celda--cifra { max-width: 140px; text-align: right; font-variant-numeric: tabular-nums; }
/* Mientras la fila viaja al servidor. No se deshabilita el campo: el `change`
   salta al perder el foco, y deshabilitarlo entonces le robaría el foco al
   campo siguiente, al que la persona acaba de llegar con el tabulador. */
.crm-campo-celda[aria-busy="true"] { opacity: .55; }
/* input, no .crm-campo-celda a secas: un <select> siempre cumple :read-only
   (no está en la lista de elementos "read-write" del estándar), así que la
   versión sin `input` pintaba de gris TODOS los selectores, incluidos los
   que sí se pueden cambiar. */
input.crm-campo-celda:read-only,
.crm-campo-celda:disabled {
  background: var(--nx-gris-100); border-color: var(--nx-gris-200);
  color: var(--nx-texto-2); cursor: default;
}

/* ---------- Cifras -------------------------------------------------------- */
.crm-num, .crm-tabla td.crm-num, .crm-tabla th.crm-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.crm-num--fuerte { font-weight: 700; }

.crm-cifras-liq {
  display: flex; flex-wrap: wrap; gap: var(--nx-e-5);
  margin: 0; padding: var(--nx-e-4) var(--nx-e-5);
  background: var(--nx-gris-50); border: var(--nx-borde);
  border-radius: var(--nx-r-m);
}
.crm-cifras-liq dt {
  font-size: var(--nx-t-micro); color: var(--nx-texto-3);
  text-transform: uppercase; letter-spacing: .07em; font-weight: 700;
}
.crm-cifras-liq dd {
  margin: 2px 0 0;
  font-family: var(--nx-fuente-display); font-weight: 800;
  font-size: 1.15rem; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--nx-texto);
}
.crm-cifras-liq__total { margin-left: auto; text-align: right; }
.crm-cifras-liq__total dd { font-size: 1.5rem; color: var(--nx-tinta); }

/* ---------- Acciones de estado -------------------------------------------- */
.crm-acciones-estado {
  display: flex; flex-wrap: wrap; gap: var(--nx-e-3);
  align-items: flex-end;
  padding-top: var(--nx-e-2);
}
.crm-acciones-estado .nx-campo { flex: 1 1 220px; }

/* ---------- Pastillas de estado ------------------------------------------- */
.crm-pastilla {
  display: inline-block; white-space: nowrap;
  font-size: var(--nx-t-micro); font-weight: 700;
  padding: 3px 10px; border-radius: var(--nx-r-pildora);
  background: var(--nx-gris-100); color: var(--nx-texto-2);
}
.crm-pastilla--azul  { background: var(--nx-azul-suave);  color: var(--nx-azul-700); }
.crm-pastilla--verde { background: var(--nx-verde-suave); color: var(--nx-verde-600); }
.crm-pastilla--ambar { background: var(--nx-ambar-suave); color: var(--nx-ambar-oscuro); }

/* ---------- Reclamos ------------------------------------------------------ */
.crm-reclamo {
  border: var(--nx-borde); border-radius: var(--nx-r-m);
  padding: var(--nx-e-4);
  margin-bottom: var(--nx-e-3);
  display: grid; gap: var(--nx-e-3);
}
.crm-reclamo__meta {
  display: flex; gap: var(--nx-e-3); align-items: center; flex-wrap: wrap;
  font-size: var(--nx-t-micro); color: var(--nx-texto-3); margin: 0;
}
/* Lo escribió el asesor: se respeta tal cual y nunca desborda. */
.crm-reclamo__texto {
  margin: 0; font-size: var(--nx-t-peq); color: var(--nx-texto);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.crm-reclamo textarea {
  font-family: inherit; font-size: var(--nx-t-peq); color: var(--nx-texto);
  padding: 10px 12px; line-height: 1.5; resize: vertical;
  border: 1.5px solid var(--nx-gris-300); border-radius: var(--nx-r-s);
}

/* ---------- Historial (bitácora) ------------------------------------------ */
.crm-historial { list-style: none; margin: 0; padding: 0; }
.crm-historial > li {
  border-left: 2px solid var(--nx-gris-200);
  padding: 0 0 var(--nx-e-3) var(--nx-e-4);
  margin-left: var(--nx-e-2);
}
.crm-historial__cabeza {
  margin: 0; font-size: var(--nx-t-peq); font-weight: 650; color: var(--nx-texto);
}
.crm-historial__quien { font-weight: 400; color: var(--nx-texto-3); }
.crm-historial__campos {
  list-style: none; margin: var(--nx-e-1) 0 0; padding: 0;
  font-size: var(--nx-t-micro); color: var(--nx-texto-2);
}
.crm-historial__campos li { font-variant-numeric: tabular-nums; }
.crm-historial__campo { color: var(--nx-texto-3); }
.crm-historial__antes { text-decoration: line-through; }

/* ---------- Responsive ---------------------------------------------------- */
@media (max-width: 1080px) {
  .crm-resumen { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  /* La regla de arriba pone las cifras en una fila con display:flex; la
     tercera línea (qué periodo) tiene que caer debajo, no en la misma fila. */
  .crm-resumen { grid-template-columns: 1fr; }
  .crm-cifra { flex-wrap: wrap; }
  .crm-cifra__detalle { flex-basis: 100%; }
  .crm-cifra__numero--dinero { font-size: 1.25rem; }
  .crm-cifras-liq__total { margin-left: 0; text-align: left; }
  .crm-detalle { padding: var(--nx-e-4); }
}

/* ==========================================================================
   Código de acceso del asesor
   --------------------------------------------------------------------------
   El código viaja por WhatsApp, pero también se dicta por teléfono y se
   teclea a mano en un celular. De ahí las tres decisiones de este bloque:

   - GRANDE y con las letras separadas. En cuerpo pequeño y pegadas,
     NXC-QPQ8-5S2B se dicta mal, y un carácter equivocado es otra llamada.
   - `tabular-nums`, igual que las cifras de dinero: con cifras
     proporcionales el 1 y el 5 ocupan distinto y el ojo salta.
   - `user-select: all`: un solo clic (o un toque largo en el móvil)
     selecciona el código entero, no una de sus tres partes. Es el camino de
     salida cuando el navegador no deja copiar por JavaScript.
   ========================================================================== */
.crm-codigo {
  margin: 0;
  /* Los párrafos del sitio están limitados a 68ch para que se lean cómodos;
     esto no es un párrafo, es un recuadro. Con el tope puesto quedaba
     encogido y pegado a la izquierda, con el código "centrado" dentro de una
     caja descentrada. */
  max-width: none;
  padding: var(--nx-e-5) var(--nx-e-4);
  text-align: center;
  background: var(--nx-gris-50);
  /* Discontinuo: dice "esto es para recortar y llevárselo", no "esto es un
     dato más de la ficha". */
  border: 2px dashed var(--nx-gris-300);
  border-radius: var(--nx-r-m);
  font-family: var(--nx-fuente-display);
  font-weight: 800;
  /* Se encoge en el celular, donde el recuadro ocupa el ancho de la pantalla
     y un tamaño fijo partiría el código en dos líneas. */
  font-size: clamp(1.3rem, 0.95rem + 2.2vw, 2rem);
  letter-spacing: .16em;
  /* El espaciado se añade DESPUÉS de cada letra, también de la última: sin
     esta sangría del mismo tamaño, el código queda descentrado hacia la
     izquierda justo en lo que mide un carácter. */
  text-indent: .16em;
  font-variant-numeric: tabular-nums;
  color: var(--nx-tinta);
  user-select: all; -webkit-user-select: all;
  overflow-wrap: anywhere;
}

/* .crm-detalle es una rejilla con separación fija, y esta línea pertenece al
   recuadro de arriba, no es un bloque suelto: el margen negativo le devuelve
   la mitad de esa separación para que se lea como su pie. */
.crm-codigo__caduca {
  margin: calc(var(--nx-e-2) - var(--nx-e-4)) 0 0;
  max-width: none;                 /* mismo motivo que en .crm-codigo */
  text-align: center;
  font-size: var(--nx-t-micro);
  color: var(--nx-texto-3);
  font-variant-numeric: tabular-nums;
}

/* En esta hoja los bloques se separan con margen INFERIOR (.crm-bloque), y
   los párrafos del sitio no traen margen superior. Un párrafo colocado
   después del último bloque —esta es la nota que va debajo de la tabla de
   asesores— no recibe separación de nadie y se pega al marco. */
.crm-nota-bajo-tabla { margin-top: var(--nx-e-5); }