/* ==========================================================================
   Demo Maricre — Vista 2: Consola de ventas (consola.js).
   Usa los tokens de maricre.css (--mc-*, --wa-*). Prefijo propio: .cn-*
   Densa pero legible; en mobile las tablas pasan a tarjetas (container queries).
   ========================================================================== */
:root {
  /* Texto de acento y de estados con contraste AA sobre sus fondos suaves. */
  --cn-acento: var(--mc-bordo);
  --cn-t-exito: #17703d;
  --cn-t-alerta: #8a5200;
  --cn-t-error: #b3261e;
  --cn-t-info: #1f5a99;
  --cn-t-violeta: #5b3ea6;
  --cn-t-queso: #7a5200;
  --cn-norte: #2f6fb8;
  --cn-sur: #d99a0b;
  --cn-wa-link: #02679a;
  --cn-t-humano: #8f1d2c;
  --cn-av-fondo: 90%;
  --cn-av-texto: 30%;
  --cn-av-sat: 55%;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cn-acento: #f19aa6; --cn-t-exito: #72d69e; --cn-t-alerta: #f4b865; --cn-t-error: #ff9a90; --cn-t-info: #8dbdf2;
    --cn-t-violeta: #c0adf6; --cn-t-queso: #f5c95a; --cn-norte: #5b9be0; --cn-sur: #e6b23c; --cn-wa-link: #9ad8f5; --cn-t-humano: #ffc9d1;
    --cn-av-fondo: 26%; --cn-av-texto: 84%; --cn-av-sat: 32%;
  }
}
:root[data-theme="dark"] {
  --cn-acento: #f19aa6; --cn-t-exito: #72d69e; --cn-t-alerta: #f4b865; --cn-t-error: #ff9a90; --cn-t-info: #8dbdf2;
  --cn-t-violeta: #c0adf6; --cn-t-queso: #f5c95a; --cn-norte: #5b9be0; --cn-sur: #e6b23c; --cn-wa-link: #9ad8f5; --cn-t-humano: #ffc9d1;
  --cn-av-fondo: 26%; --cn-av-texto: 84%; --cn-av-sat: 32%;
}

.cn { display: grid; gap: 16px; }
.cn [hidden], .cn-dlg [hidden] { display: none !important; }

/* Los hijos de grillas no empujan el ancho de la página (los segmentados y
   tablas anchas scrollean dentro de su caja, nunca la página). */
.cn > *, .cn-panel > *, .cn-bloque > *, .cn-stock-dos > * { min-width: 0; }
.cn-lista-cab, .cn-barra > * { min-width: 0; max-width: 100%; }

/* Chips con contraste AA (claro y oscuro) dentro de la consola y sus diálogos */
:is(.cn, .cn-dlg) .mc-chip.exito { color: var(--cn-t-exito); }
:is(.cn, .cn-dlg) .mc-chip.alerta { color: var(--cn-t-alerta); }
:is(.cn, .cn-dlg) .mc-chip.error { color: var(--cn-t-error); }
:is(.cn, .cn-dlg) .mc-chip.info { color: var(--cn-t-info); }
:is(.cn, .cn-dlg) .mc-chip.violeta { color: var(--cn-t-violeta); }
:is(.cn, .cn-dlg) .mc-chip.queso { color: var(--cn-t-queso); }
:is(.cn, .cn-dlg) .mc-chip.bordo { color: var(--cn-acento); }
.cn .mc-seg button[aria-pressed="true"] { color: var(--cn-acento); }
:is(.cn, .cn-dlg) .mc-adaptable { color: var(--cn-t-violeta); }
.cn a { color: var(--cn-acento); }

.cn-tenue { color: var(--mc-tinta-3); }
.cn-cargando { display: flex; align-items: center; gap: 8px; padding: 18px; color: var(--mc-tinta-3); font-size: 14px; }
.cn-vacio { padding: 26px 16px; text-align: center; color: var(--mc-tinta-2); font-size: 14px; }
.cn-vacio p { margin: 4px 0; }

/* ---------- Encabezado de la vista ---------- */
.cn-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.cn-titulo { min-width: 0; flex: 1 1 420px; }
.cn-titulo h1 { font-size: 22px; line-height: 1.2; margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; letter-spacing: -.01em; }
.cn-titulo p { margin: 4px 0 0; color: var(--mc-tinta-2); font-size: 14px; max-width: 78ch; }
.cn-controles { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.cn-como { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--mc-tinta-2); min-width: 0; }
.cn-select {
  appearance: none; -webkit-appearance: none; min-width: 0; max-width: 100%;
  padding: 7px 30px 7px 11px; border-radius: 10px; border: 1px solid var(--mc-linea);
  background: var(--mc-superficie) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%237a716b' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 10px center;
  color: var(--mc-tinta); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.cn-select:hover { border-color: var(--mc-tinta-3); }
.cn-select option { background: var(--mc-superficie); color: var(--mc-tinta); }

.cn-check-caja { display: inline-flex; align-items: center; gap: 6px; }
/* Leyenda de los ejemplos precargados (reemplaza al filtro "solo mis conversaciones") */
.cn-leyenda-ej { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12.5px; color: var(--mc-tinta-2); }
.cn-det-ejemplo {
  margin: 0; padding: 8px 14px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12.5px; line-height: 1.4;
  color: var(--cn-t-queso); background: var(--mc-queso-suave); border-bottom: 1px solid var(--mc-linea);
}
.cn-ej-nota { display: block; margin-top: 4px; font-size: 12px; white-space: normal; }
.cn-check { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--mc-tinta-2); cursor: pointer; }
.cn-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--mc-bordo); }

.cn-sync { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--mc-tinta-2); }
.cn-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--mc-exito); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mc-exito) 22%, transparent); }
.cn-sync.error { color: var(--cn-t-error); }
.cn-sync.error .cn-punto { background: var(--mc-error); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mc-error) 22%, transparent); }
.cn-refrescar { width: 28px; height: 28px; font-size: 16px; }

/* ---------- KPIs ---------- */
.cn-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1100px) { .cn-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cn-kpi {
  position: relative; overflow: hidden; display: grid; gap: 2px; align-content: start; text-align: left;
  padding: 12px 14px 12px 16px; border-radius: var(--mc-radio); border: 1px solid var(--mc-linea);
  background: var(--mc-superficie); box-shadow: var(--mc-sombra); cursor: pointer; transition: border-color .15s, transform .08s;
}
.cn-kpi::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--cn-kpi-c, var(--mc-linea)); }
.cn-kpi:hover { border-color: var(--mc-tinta-3); }
.cn-kpi:active { transform: translateY(1px); }
.cn-kpi.alerta { --cn-kpi-c: var(--mc-alerta); }
.cn-kpi.queso { --cn-kpi-c: var(--mc-queso); }
.cn-kpi.error { --cn-kpi-c: var(--mc-error); }
.cn-kpi.exito { --cn-kpi-c: var(--mc-exito); }
.cn-kpi-etq { font-size: 12.5px; font-weight: 700; color: var(--mc-tinta-2); }
.cn-kpi-valor { font-size: 28px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--mc-tinta); }
.cn-kpi-sub { font-size: 12.5px; color: var(--mc-tinta-3); line-height: 1.35; }

/* ---------- Pestañas ---------- */
.cn-tabs {
  display: flex; gap: 2px; border-bottom: 1px solid var(--mc-linea); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scrollbar-width: thin; margin-bottom: -4px;
}
.cn-tab {
  flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px 9px; margin-bottom: -1px;
  border: 0; border-bottom: 3px solid transparent; border-radius: 9px 9px 0 0; background: transparent;
  color: var(--mc-tinta-2); font-weight: 700; font-size: 14px; white-space: nowrap; cursor: pointer;
}
.cn-tab:hover { background: var(--mc-superficie-2); color: var(--mc-tinta); }
.cn-tab[aria-selected="true"] { color: var(--cn-acento); border-bottom-color: var(--cn-acento); }
.cn-badge {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center;
  font-size: 11.5px; font-weight: 800; background: var(--mc-alerta-suave); color: var(--cn-t-alerta);
}
.cn-badge:empty { display: none; }

.cn-panel { display: grid; gap: 12px; min-width: 0; }
.cn-panel-cab h2 { font-size: 17px; margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cn-panel-cab p { margin: 3px 0 0; font-size: 13.5px; color: var(--mc-tinta-2); max-width: 100ch; }
.cn-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.cn-barra-der { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cn-ayuda { margin: -4px 0 0; font-size: 12.5px; color: var(--mc-tinta-2); }
.cn-seg { grid-auto-columns: auto; max-width: 100%; overflow-x: auto; overflow-y: hidden; }
.cn-seg button { white-space: nowrap; padding: 6px 10px; }
.cn-seg-n { display: inline-block; min-width: 1.4em; font-variant-numeric: tabular-nums; opacity: .8; }
.cn-bloque { display: grid; gap: 10px; min-width: 0; }
.cn-bloque h3 { font-size: 15px; margin: 4px 0 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---------- Avatares ---------- */
.cn-avatar {
  flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  font-size: 14px; font-weight: 800; letter-spacing: .02em;
  background: hsl(var(--h) var(--cn-av-sat) var(--cn-av-fondo)); color: hsl(var(--h) 60% var(--cn-av-texto));
}
.cn-avatar.grande { width: 44px; height: 44px; font-size: 15px; }

/* ---------- Bandeja ---------- */
.cn-bandeja {
  display: grid; grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  height: clamp(560px, calc(100dvh - 240px), 940px);
  background: var(--mc-superficie); border: 1px solid var(--mc-linea); border-radius: var(--mc-radio); box-shadow: var(--mc-sombra); overflow: hidden;
}
.cn-col-lista { display: flex; flex-direction: column; min-height: 0; min-width: 0; border-right: 1px solid var(--mc-linea); }
.cn-lista-cab { padding: 10px; border-bottom: 1px solid var(--mc-linea); }
.cn-lista-cab .cn-seg { width: 100%; grid-auto-columns: auto; }
.cn-lista-cab .cn-seg button { padding: 6px 4px; font-size: 12px; }
.cn-conv-lista { list-style: none; margin: 0; padding: 6px; overflow: auto; flex: 1; min-height: 0; display: grid; gap: 2px; align-content: start; }
.cn-conv {
  width: 100%; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: start; text-align: left;
  padding: 10px; border-radius: 11px; border: 1px solid transparent; background: transparent; cursor: pointer; position: relative;
}
.cn-conv:hover { background: var(--mc-superficie-2); }
.cn-conv[aria-current="true"] { background: var(--mc-superficie-2); border-color: var(--mc-linea); box-shadow: inset 3px 0 0 var(--cn-acento); }
.cn-conv.p3::after, .cn-conv.p2::after { content: ""; position: absolute; top: 12px; right: 10px; width: 8px; height: 8px; border-radius: 50%; }
.cn-conv.p3::after { background: var(--mc-error); }
.cn-conv.p2::after { background: var(--mc-alerta); }
.cn-conv-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; min-width: 0; }   /* un nombre largo se corta con "…" en vez de ensanchar la fila */
.cn-conv-fila { display: flex; align-items: baseline; gap: 8px; padding-right: 14px; }
.cn-conv-nombre { font-size: 14px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-conv-fila time { font-size: 11.5px; color: var(--mc-tinta-2); white-space: nowrap; }
.cn-conv-ultimo { font-size: 13px; color: var(--mc-tinta-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; }
.cn-conv-quien { font-weight: 700; color: var(--mc-tinta-2); }
.cn-conv-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
/* Un chip largo ("Derivado a Martín Ríos y Sofía Paz · Ventas y Administración") parte la línea en 375 px. */
.cn-conv-chips .mc-chip { font-size: 11px; padding: 2px 7px; white-space: normal; max-width: 100%; overflow-wrap: anywhere; }
.cn-vacio-li { list-style: none; }

.cn-col-detalle { min-width: 0; min-height: 0; display: flex; flex-direction: column; container: cndet / inline-size; }
.cn-det { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.cn-det-vacio { margin: auto; max-width: 420px; padding: 30px 20px; text-align: center; color: var(--mc-tinta-2); font-size: 14px; }
.cn-det-vacio p { margin: 6px 0; }
.cn-det-vacio-ico { font-size: 34px; }
.cn-det-cab { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 10px 14px; border-bottom: 1px solid var(--mc-linea); }
.cn-volver { display: none; }
.cn-det-quien { min-width: 0; flex: 1 1 200px; }
.cn-det-quien h3 { margin: 0; font-size: 16px; line-height: 1.25; scroll-margin-top: 150px; }
.cn-det-quien h3:focus { outline: none; }
.cn-det-quien h3:focus-visible { outline: 2px solid var(--mc-queso); }
.cn-det-quien p { margin: 1px 0 0; font-size: 12.5px; color: var(--mc-tinta-3); }
.cn-det-chips { display: flex; flex-wrap: wrap; gap: 5px; flex-basis: 100%; }
.cn-det-cuerpo { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); overflow: auto; }
.cn-det-chat { display: flex; flex-direction: column; min-height: 0; height: min(620px, 72dvh); }
.cn-det-info { padding: 12px 14px 16px; display: grid; gap: 14px; align-content: start; border-top: 1px solid var(--mc-linea); }
@container cndet (min-width: 620px) {
  .cn-det-cuerpo { grid-template-columns: minmax(0, 1fr) minmax(230px, 28%); overflow: hidden; }
  .cn-det-chat { height: auto; }
  .cn-det-info { overflow: auto; border-top: 0; border-left: 1px solid var(--mc-linea); }
  .cn-det-chips { flex-basis: auto; }
}

.cn-transcript {
  flex: 1; min-height: 0; overflow: auto; margin: 0; padding: 14px 14px 18px; list-style: none;
  display: flex; flex-direction: column; gap: 6px; background-color: var(--wa-fondo);
  background-image: radial-gradient(color-mix(in srgb, var(--wa-tinta-2) 14%, transparent) 1px, transparent 1.2px);
  background-size: 18px 18px;
}
.cn-msg {
  max-width: min(80%, 560px); padding: 6px 9px 5px; border-radius: 9px; font-size: 14px; line-height: 1.42;
  color: var(--wa-tinta); box-shadow: 0 1px 1px rgb(0 0 0 / .1); overflow-wrap: anywhere; display: grid; gap: 3px;
}
.cn-msg.entra { align-self: flex-start; background: var(--wa-entrante); border-top-left-radius: 2px; }
.cn-msg.sale { align-self: flex-end; background: var(--wa-saliente); border-top-right-radius: 2px; }
.cn-msg.sale.humano { box-shadow: 0 1px 1px rgb(0 0 0 / .1), inset 0 0 0 1.5px color-mix(in srgb, var(--cn-acento) 55%, transparent); }
.cn-msg-quien { font-size: 12px; font-weight: 700; color: color-mix(in srgb, var(--wa-tinta) 84%, transparent); }
.cn-msg.humano .cn-msg-quien { color: var(--cn-t-humano); }
.cn-msg time { justify-self: end; font-size: 11px; color: color-mix(in srgb, var(--wa-tinta) 78%, transparent); margin-top: -2px; }
.cn-msg-audio { font-size: 12.5px; font-weight: 700; color: color-mix(in srgb, var(--wa-tinta) 75%, transparent); }
.cn-msg-trans { font-style: italic; }
.cn-msg-botones { display: flex; flex-wrap: wrap; gap: 4px; }
.cn-msg-botones span {
  font-size: 12.5px; font-weight: 600; color: var(--cn-wa-link); padding: 3px 9px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--cn-wa-link) 35%, transparent);
}
.cn-msg-origen { font-size: 11.5px; font-style: italic; color: color-mix(in srgb, var(--wa-tinta) 70%, transparent); }
/* Mensajes de WhatsApp (C8) en el transcript, como los ve el cliente: formato, foto con pie,
   interactivos con encabezado, pie y botones (de lectura), lista y ubicación. */
.cn-msg-txt .wa-lista { margin: 1px 0; padding-left: 20px; }
.cn-msg-txt .wa-cita { margin: 2px 0; padding-left: 8px; border-left: 3px solid color-mix(in srgb, var(--wa-tinta) 30%, transparent); color: color-mix(in srgb, var(--wa-tinta) 78%, transparent); }
.cn-msg-txt code { font-family: var(--mc-fuente-mono); font-size: 12.5px; }
.cn-msg-txt code.wa-mono { white-space: pre-wrap; }
.cn-msg.cn-wa-t-imagen, .cn-msg.cn-wa-t-botones, .cn-msg.cn-wa-t-plantilla, .cn-msg.cn-wa-t-lista { width: min(300px, 80%); }
.cn-wa-foto {
  display: block; width: 100%; max-width: 240px; aspect-ratio: 1 / 1; padding: 0; border: 0; border-radius: 6px;
  background: #fff; cursor: zoom-in; font: inherit;
}
.cn-wa-foto:disabled { cursor: default; }
.cn-wa-foto .mc-foto-ico { font-size: 30px; }
.cn-wa-cab { font-size: 14.5px; }
.cn-wa-pie { font-size: 12px; color: color-mix(in srgb, var(--wa-tinta) 70%, transparent); }
.cn-wa-botones { display: grid; margin: 3px -9px -2px; border-top: 1px solid color-mix(in srgb, var(--wa-tinta) 14%, transparent); }
.cn-wa-botones span {
  padding: 6px 9px; text-align: center; font-size: 13px; font-weight: 600; color: var(--cn-wa-link);
  border-bottom: 1px solid color-mix(in srgb, var(--wa-tinta) 10%, transparent);
}
.cn-wa-botones span:last-child { border-bottom: 0; }
.cn-wa-filas { font-size: 12.5px; }
.cn-wa-filas summary { cursor: pointer; color: color-mix(in srgb, var(--wa-tinta) 75%, transparent); }
.cn-wa-filas ul { margin: 4px 0 0; padding-left: 18px; }
.cn-msg.cn-wa-t-ubicacion { grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; }
.cn-msg.cn-wa-t-ubicacion > .cn-msg-quien, .cn-msg.cn-wa-t-ubicacion > time { grid-column: 1 / -1; }
.cn-wa-mapa {
  width: 54px; height: 44px; border-radius: 6px; display: grid; place-items: center; font-size: 20px;
  background: repeating-linear-gradient(0deg, transparent 0 9px, rgb(255 255 255 / .7) 9px 11px), repeating-linear-gradient(90deg, transparent 0 11px, rgb(255 255 255 / .7) 11px 13px), #e4ddcf;
}
.cn-wa-ubi { display: grid; gap: 1px; font-size: 13px; }
.cn-wa-ubi span { color: color-mix(in srgb, var(--wa-tinta) 72%, transparent); }
.cn-wa-cita {
  display: grid; gap: 1px; padding: 4px 8px; border-radius: 6px; font-size: 12.5px; line-height: 1.3;
  background: color-mix(in srgb, var(--wa-tinta) 6%, transparent); border-left: 4px solid #06a57c;
}
.cn-wa-cita b { color: var(--cn-t-exito); font-size: 12px; }
.cn-wa-cita > span { color: color-mix(in srgb, var(--wa-tinta) 72%, transparent); }
/* Lo que registró el sistema (pedido, derivación): para el equipo, fuera de las burbujas. */
.cn-msg-sis { align-self: flex-end; width: min(420px, 88%); display: grid; gap: 4px; }
.cn-msg-sis-t { font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--mc-tinta-3); text-align: right; }
.cn-msg-sis .cn-tmini { background: var(--mc-superficie); color: var(--mc-tinta); border: 1px solid var(--mc-linea); border-left-width: 3px; }
.cn-msg.aviso {
  align-self: center; max-width: 92%; display: block; text-align: center; box-shadow: none; font-size: 12px; line-height: 1.35;
  background: var(--mc-queso-suave); color: var(--mc-tinta-2); border-radius: 8px; padding: 4px 10px;
}
.cn-msg.aviso time { margin-left: 6px; color: var(--mc-tinta-2); }
.cn-tmini {
  display: block; font-size: 12.5px; line-height: 1.6; padding: 6px 8px; border-radius: 7px;
  background: color-mix(in srgb, var(--wa-tinta) 6%, transparent); border-left: 3px solid color-mix(in srgb, var(--wa-tinta) 25%, transparent);
}
.cn-tmini > b:first-child { margin-right: 6px; }
.cn-tmini > span:not(.mc-chip) { display: inline-block; margin-right: 10px; }
.cn-tmini > .cn-requiere { display: block; margin: 4px 0 0; }
.cn-tmini .mc-chip { font-size: 11px; padding: 1px 7px; margin-right: 8px; }
/* Foto de producto en el transcript: la misma que vio el cliente, en chico. */
.cn-tmini.cn-tfoto { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 9px; align-items: start; line-height: 1.4; }
.cn-tfoto-img {
  width: 84px; aspect-ratio: 3 / 2; padding: 0; border: 1px solid color-mix(in srgb, var(--wa-tinta) 16%, transparent); border-radius: 6px;
  cursor: zoom-in; font: inherit;
}
.cn-tfoto-img:disabled { cursor: default; }
.cn-tfoto-img .mc-foto-ico { font-size: 22px; }
.cn-tmini.cn-tfoto > span.cn-tfoto-txt { display: grid; gap: 1px; min-width: 0; margin: 0; }
.cn-tfoto-txt > b { font-size: 13px; }
.cn-tfoto-pie { margin-top: 2px; font-size: 13px; }

.cn-composer { display: grid; gap: 7px; padding: 10px 12px 12px; border-top: 1px solid var(--mc-linea); background: var(--mc-superficie); }
.cn-composer-yo { font-size: 12.5px; color: var(--mc-tinta-2); }
.cn-composer textarea {
  width: 100%; min-height: 44px; max-height: 160px; resize: vertical; font: inherit; font-size: 14px; padding: 9px 11px;
  border-radius: 10px; border: 1px solid var(--mc-linea); background: var(--mc-superficie-2); color: var(--mc-tinta);
}
.cn-composer textarea:focus-visible { outline: 2px solid var(--mc-queso); outline-offset: 1px; }
.cn-composer-acc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cn-composer-acc .cn-enviar { margin-left: auto; min-width: 92px; }
.cn-composer-nota { margin: 0; font-size: 12px; color: var(--mc-tinta-3); }

.cn-info-bloque { display: grid; gap: 6px; font-size: 13.5px; }
.cn-info-bloque h4 { margin: 0; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--mc-tinta-3); display: flex; align-items: center; gap: 6px; }
.cn-info-bloque p { margin: 0; }
.cn-info-bloque.destacado { background: var(--mc-queso-suave); border-radius: 10px; padding: 10px 12px; }
.cn-info-meta { font-size: 12.5px; color: var(--mc-tinta-2); }
.cn-tickets { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cn-tickets li { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--mc-linea); border-radius: 9px; background: var(--mc-superficie-2); font-size: 12.5px; }
.cn-ticket-fila { display: flex; align-items: center; gap: 6px; justify-content: space-between; }
.cn-tickets small { color: var(--mc-tinta-3); }
.cn-ped-caja { display: grid; gap: 6px; padding: 10px; border: 1px solid var(--mc-linea); border-radius: 10px; background: var(--mc-superficie-2); }
.cn-ped-caja-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cn-ped-total { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; }
.cn-ped-caja .cn-tenue { font-size: 12.5px; }
.cn-ped-lineas { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 12.5px; }
.cn-ped-lineas li { display: flex; gap: 8px; justify-content: space-between; }
.cn-ped-lineas b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cn-ped-acc { display: flex; gap: 6px; flex-wrap: wrap; }
.cn-requiere { margin: 0; font-size: 12.5px; padding: 6px 8px; border-radius: 7px; background: var(--mc-alerta-suave); color: var(--cn-t-alerta); }
/* Aprobación por área: quién ya aprobó y quién falta */
.cn-aprob-fila { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cn-aprob { display: inline-block; font-size: 12.5px; padding: 4px 8px; border-radius: 7px; border: 1px solid var(--mc-linea); color: var(--mc-tinta-2, var(--mc-tinta)); overflow-wrap: anywhere; }
.cn-aprob.ok { color: var(--cn-t-exito); }
.cn-erp { font-size: 12.5px; color: var(--cn-t-exito); margin: 0; }

/* ---------- Tablas (→ tarjetas en angosto) ---------- */
.cn-tabla-wrap {
  container: cnt / inline-size; min-width: 0; overflow-x: auto;
  background: var(--mc-superficie); border: 1px solid var(--mc-linea); border-radius: var(--mc-radio); box-shadow: var(--mc-sombra);
}
.cn-tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.cn-tabla thead th {
  position: sticky; top: 0; text-align: left; white-space: nowrap; padding: 9px 12px; background: var(--mc-superficie-2);
  border-bottom: 1px solid var(--mc-linea); font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--mc-tinta-3);
}
.cn-tabla tbody th, .cn-tabla td { padding: 9px 12px; text-align: left; vertical-align: middle; font-weight: normal; border-bottom: 1px solid var(--mc-linea); }
.cn-tabla tbody tr:last-child > * { border-bottom: 0; }
.cn-tabla .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cn-tabla tbody tr.cn-fila:hover > * { background: color-mix(in srgb, var(--mc-superficie-2) 75%, transparent); }
.cn-tabla tbody th small, .cn-tabla td small { display: block; font-size: 12px; color: var(--mc-tinta-3); margin-top: 1px; }
.cn-tabla .cn-acc { white-space: nowrap; text-align: right; }
.cn-tabla .cn-acc .mc-btn + .mc-btn { margin-left: 4px; }
.cn-clic { cursor: pointer; }
.cn-link { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--mc-tinta); cursor: pointer; text-align: left; text-decoration: underline; text-decoration-color: var(--mc-linea); text-underline-offset: 3px; }
.cn-link:hover { text-decoration-color: currentColor; color: var(--cn-acento); }

.cn-expandir { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 2px 0; font: inherit; font-weight: 800; color: var(--mc-tinta); cursor: pointer; white-space: nowrap; }
.cn-flecha { display: inline-block; transition: transform .15s; color: var(--mc-tinta-3); }
.cn-expandir[aria-expanded="true"] .cn-flecha { transform: rotate(90deg); }
.cn-origen { display: block; font-size: 12px; color: var(--mc-tinta-3); font-weight: 600; margin-top: 1px; }
.cn-fila.abierta > * { background: var(--mc-superficie-2); border-bottom-color: transparent; }
.cn-fila-det > td { background: var(--mc-superficie-2); padding: 4px 12px 14px; }

.cn-lineas-caja { display: grid; gap: 10px; }
.cn-lineas { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border: 1px solid var(--mc-linea); border-radius: 10px; background: var(--mc-superficie); overflow: hidden; }
.cn-lineas li { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto 100px; gap: 10px; align-items: center; padding: 7px 10px; border-bottom: 1px solid var(--mc-linea); font-size: 13px; }
.cn-lineas li:last-child { border-bottom: 0; }
.cn-l-cant { font-weight: 700; font-variant-numeric: tabular-nums; }
.cn-l-nom small { display: block; font-size: 11.5px; color: var(--mc-tinta-3); }
.cn-l-pu { white-space: nowrap; color: var(--mc-tinta-2); font-variant-numeric: tabular-nums; }
.cn-l-tot { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cn-totales { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 22px; margin: 0; font-size: 13px; }
.cn-totales div { display: flex; gap: 8px; }
.cn-totales dt { color: var(--mc-tinta-3); }
.cn-totales dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; }
.cn-totales .total dd { font-weight: 800; }
.cn-lineas-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0; font-size: 12.5px; color: var(--mc-tinta-2); }

.cn-grupo th {
  background: var(--mc-superficie-2); font-size: 11.5px !important; font-weight: 800 !important; letter-spacing: .06em; text-transform: uppercase;
  color: var(--mc-tinta-2); padding-top: 7px !important; padding-bottom: 7px !important;
}
.cn-prod { font-weight: 700; }
.cn-prod-chips { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.cn-prod-chips .mc-chip { font-size: 11px; padding: 1px 7px; }
/* Stock: la foto del catálogo en chico al lado del nombre (se carga al llegar con el scroll). */
.cn-prod-id { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 9px; align-items: start; }
.cn-prod-id > span:last-child { display: grid; gap: 1px; min-width: 0; }
.cn-stock-foto { width: 48px; aspect-ratio: 3 / 2; border-radius: 5px; border: 1px solid var(--mc-linea); margin-top: 2px; }
.cn-stock-foto .mc-foto-ico { font-size: 16px; }
.cn-stock-mas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 4px 4px; font-size: 13px; }

@container cnt (max-width: 1080px) { .cn-tabla .cn-opt { display: none; } }
@container cnt (max-width: 760px) {
  .cn-tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cn-tabla, .cn-tabla tbody, .cn-tabla tr, .cn-tabla td, .cn-tabla tbody th { display: block; }
  .cn-tabla tr.cn-fila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; padding: 12px 14px; border-bottom: 1px solid var(--mc-linea); }
  .cn-tabla tr.cn-fila > * { padding: 0; border: 0; min-width: 0; }
  .cn-tabla tr.cn-fila > th { grid-column: 1 / -1; }
  .cn-tabla td[data-etq]::before {
    content: attr(data-etq); display: block; margin-bottom: 2px;
    font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--mc-tinta-3);
  }
  .cn-tabla .num { text-align: left; }
  .cn-tabla .cn-opt { display: block; }
  .cn-tabla td.cn-acc { grid-column: 1 / -1; text-align: left; white-space: normal; }
  .cn-tabla td.cn-acc::before { display: none; }
  .cn-tabla td.cn-acc .mc-btn { min-height: 38px; }
  .cn-tabla tr.cn-fila-det > td { padding: 0 14px 14px; }
  .cn-tabla tr.cn-fila.abierta, .cn-tabla tbody tr.cn-fila:hover { background: var(--mc-superficie-2); border-bottom-color: transparent; }
  .cn-tabla tr.cn-fila.abierta > *, .cn-tabla tbody tr.cn-fila:hover > * { background: transparent; }
  .cn-tabla tr.cn-grupo th { padding: 7px 14px; }
  .cn-tabla.stock tr.cn-fila, .cn-tabla.zonas tr.cn-fila { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cn-tabla.cartera td.cn-habituales { grid-column: 1 / -1; }
  .cn-lineas li { grid-template-columns: 56px minmax(0, 1fr) auto; }
  .cn-l-pu { grid-column: 2; }
  .cn-l-tot { grid-column: 3; grid-row: 1; }
}
@container cnt (max-width: 420px) {
  .cn-tabla tr.cn-fila { padding: 11px 12px; gap: 8px 12px; }
  .cn-tabla td[data-ancho] { grid-column: 1 / -1; }
}

/* Barras de frecuencia y cuenta corriente */
.cn-frec, .cn-cc { display: grid; gap: 4px; min-width: 132px; font-size: 13px; }
.cn-frec small { font-size: 12px; color: var(--mc-tinta-3); }
.cn-frec-bar, .cn-cc-bar {
  position: relative; display: block; height: 7px; border-radius: 999px;
  background: var(--mc-superficie-2); border: 1px solid var(--mc-linea);
}
.cn-frec-bar > span, .cn-cc-bar > span { position: absolute; inset: 0 auto 0 0; width: var(--p); border-radius: inherit; background: var(--mc-exito); }
.cn-frec-bar.alerta > span { background: var(--mc-alerta); }
.cn-frec-bar.error > span { background: var(--mc-error); }
.cn-frec-bar::after { content: ""; position: absolute; left: var(--m); top: -4px; bottom: -4px; width: 2px; border-radius: 2px; background: var(--mc-tinta-2); }
.cn-cc-bar > span { background: var(--mc-info); }
.cn-cc-bar.excede > span { background: var(--mc-error); }
.cn-cc .mc-chip { justify-self: start; font-size: 11px; padding: 1px 7px; }
.cn-habituales { font-size: 12.5px; color: var(--mc-tinta-2); max-width: 280px; }

/* CRM */
.cn-crm-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; background: var(--mc-superficie); border: 1px solid var(--mc-linea); border-radius: var(--mc-radio); overflow: hidden; }
.cn-crm-item { display: grid; grid-template-columns: 86px auto minmax(0, 1fr); gap: 4px 12px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--mc-linea); font-size: 13px; }
.cn-crm-item:last-child { border-bottom: 0; }
.cn-crm-cuando { font-size: 12px; color: var(--mc-tinta-3); white-space: nowrap; }
.cn-crm-que { display: flex; gap: 4px; flex-wrap: wrap; }
.cn-crm-que .mc-chip { font-size: 11px; padding: 1px 7px; }
.cn-crm-detalle { min-width: 0; overflow-wrap: anywhere; }
.cn-crm-mas { padding: 6px 10px; text-align: center; }
.cn-crm-lista > .cn-vacio, .cn-crm-lista > .cn-tenue { padding: 14px; list-style: none; }
@media (max-width: 640px) {
  .cn-crm-item { grid-template-columns: auto minmax(0, 1fr); }
  .cn-crm-detalle { grid-column: 1 / -1; }
}

/* Stock */
.cn-busca input {
  width: min(280px, 100%); padding: 7px 11px; border-radius: 10px; border: 1px solid var(--mc-linea);
  background: var(--mc-superficie); color: var(--mc-tinta); font: inherit; font-size: 14px;
}
.cn-busca { flex: 1 1 200px; max-width: 300px; }
.cn-busca input { width: 100%; }
.cn-leyenda { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--mc-tinta-2); margin-left: auto; flex-wrap: wrap; }
.cn-ley { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.cn-ley.norte { background: var(--cn-norte); }
.cn-ley.sur { background: var(--cn-sur); margin-left: 8px; }
.cn-stock-celda { display: grid; grid-template-columns: minmax(56px, 1fr) auto; grid-template-rows: auto auto; align-items: center; gap: 2px 8px; min-width: 140px; }
.cn-sbar { display: block; height: 9px; border-radius: 999px; background: var(--mc-superficie-2); border: 1px solid var(--mc-linea); overflow: hidden; }
.cn-sbar > span { display: block; height: 100%; width: var(--p); background: var(--cn-norte); border-radius: inherit; }
.cn-sbar.sur > span { background: var(--cn-sur); }
.cn-snum { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 3ch; text-align: right; }
.cn-snivel { grid-column: 1 / -1; font-size: 11.5px; font-weight: 700; }
.cn-snivel.sin { color: var(--cn-t-error); }
.cn-snivel.bajo { color: var(--cn-t-alerta); }
.cn-stock-dos { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .cn-stock-dos { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; } }
.cn-promos { display: grid; gap: 8px; }
.cn-promo {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: start; padding: 11px 12px;
  background: var(--mc-superficie); border: 1px solid var(--mc-linea); border-radius: 12px;
}
.cn-promo-pct {
  height: 46px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; font-size: 17px;
  background: var(--mc-queso-suave); color: var(--cn-t-queso); font-variant-numeric: tabular-nums;
}
.cn-promo h4 { margin: 0; font-size: 14px; line-height: 1.3; }
.cn-promo-prod { margin: 3px 0 0; font-size: 12.5px; color: var(--mc-tinta-2); }
.cn-promo-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; }
.cn-promo-chips .mc-chip { font-size: 11px; padding: 1px 7px; }
.cn-dias { display: flex; flex-wrap: wrap; gap: 4px; }
.cn-dias .mc-chip { font-size: 11.5px; padding: 1px 8px; }
.cn-locs { margin-top: 3px; font-size: 12.5px; font-weight: normal; }
.cn-locs summary { cursor: pointer; color: var(--mc-tinta-3); }
.cn-locs p { margin: 4px 0 0; color: var(--mc-tinta-2); max-width: 44ch; }

/* ---------- Campañas ---------- */
.cn-camp-lista { display: grid; gap: 14px; }
.cn-camp { padding: 16px; container: cncamp / inline-size; display: grid; gap: 14px; min-width: 0; }
.cn-camp-cab { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; }
.cn-camp-cab h3 { margin: 0; font-size: 16px; }
.cn-camp-cab p { margin: 3px 0 0; font-size: 13.5px; color: var(--mc-tinta-2); max-width: 72ch; }
.cn-camp-chips { display: flex; flex-wrap: wrap; gap: 5px; align-content: flex-start; }
.cn-camp-grid { display: grid; gap: 16px; }
@container cncamp (min-width: 780px) { .cn-camp-grid { grid-template-columns: minmax(0, 1.2fr) minmax(290px, .9fr); } }
.cn-camp h4 { margin: 0 0 8px; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--mc-tinta-3); display: flex; align-items: center; gap: 6px; }
.cn-aud { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cn-aud li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center;
  padding: 9px 11px; border: 1px solid var(--mc-linea); border-radius: 10px; background: var(--mc-superficie-2); font-size: 13.5px;
}
.cn-aud .cn-tenue { font-size: 12.5px; }
.cn-aud-motivo { display: block; font-size: 12.5px; color: var(--mc-tinta-2); margin-top: 1px; }
.cn-fuera { display: inline-flex; align-items: center; gap: 4px; }
@container cncamp (max-width: 460px) { .cn-aud li { grid-template-columns: minmax(0, 1fr); } .cn-aud li .mc-btn { justify-self: start; } }
.cn-wa {
  border-radius: 14px; padding: 12px; border: 1px solid var(--mc-linea); display: grid; gap: 3px;
  background-color: var(--wa-fondo);
  background-image: radial-gradient(color-mix(in srgb, var(--wa-tinta-2) 14%, transparent) 1px, transparent 1.2px);
  background-size: 18px 18px;
}
.cn-wa-cab { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--wa-tinta); margin-bottom: 6px; }
.cn-wa-logo { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--mc-bordo); color: var(--mc-queso); font-size: 12px; font-weight: 800; }
.cn-wa-burbuja {
  background: var(--wa-entrante); color: var(--wa-tinta); border-radius: 9px; border-top-left-radius: 2px; padding: 8px 10px 5px;
  font-size: 14px; line-height: 1.45; box-shadow: 0 1px 1px rgb(0 0 0 / .1); display: grid; gap: 2px; overflow-wrap: anywhere;
}
.cn-wa-hora { justify-self: end; font-size: 11px; color: color-mix(in srgb, var(--wa-tinta) 65%, transparent); }
.cn-wa-botones { display: grid; gap: 3px; }
.cn-wa-boton {
  background: var(--wa-entrante); color: var(--cn-wa-link); border-radius: 9px; padding: 8px; text-align: center;
  font-size: 14px; font-weight: 600; box-shadow: 0 1px 1px rgb(0 0 0 / .08);
}
.cn-var {
  display: inline-block; padding: 0 5px; border-radius: 5px; font-size: 12.5px; font-weight: 700; font-style: normal; line-height: 1.5;
  background: var(--mc-violeta-suave); color: var(--cn-t-violeta); border: 1px dashed color-mix(in srgb, var(--mc-violeta) 55%, transparent);
}
.cn-wa-pie { margin: 6px 2px 0; font-size: 12px; color: color-mix(in srgb, var(--wa-tinta) 72%, transparent); }

/* ---------- Diálogos propios (se montan en <body>, fuera de .cn) ---------- */
.cn .mc-btn.exito { background: #17713d; border-color: #17713d; }
.cn .mc-btn.exito:hover { background: #125c31; }
.mc-btn.cn-peligro { background: var(--mc-error); border-color: var(--mc-error); color: #fff; }
.mc-btn.cn-peligro:hover { background: color-mix(in srgb, var(--mc-error) 85%, #000); }
.cn-dlg { display: grid; gap: 10px; font-size: 14px; }
.cn-dlg p { margin: 0; }
.cn-dlg label { font-weight: 700; font-size: 13px; }
.cn-dlg textarea {
  width: 100%; font: inherit; font-size: 14px; padding: 9px 11px; border-radius: 10px; resize: vertical;
  border: 1px solid var(--mc-linea); background: var(--mc-superficie-2); color: var(--mc-tinta);
}
.cn-dlg textarea[aria-invalid="true"] { border-color: var(--mc-error); }
.cn-rechazo-rapidos { display: flex; flex-wrap: wrap; gap: 6px; }
.cn-rechazo-quien { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cn-rechazo-quien .cn-select { flex: 1; min-width: 0; }
.cn-rechazo-rapidos .mc-chip { cursor: pointer; font-size: 12.5px; padding: 5px 10px; }
.cn-rechazo-rapidos .mc-chip:hover { border-color: var(--mc-tinta-3); }
.cn-error { color: var(--cn-t-error); font-size: 13px; font-weight: 600; }
.cn-ficha h3 { margin: 6px 0 0; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--mc-tinta-3); }
.cn-ficha-chips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.cn-ficha-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px 16px; margin: 0; }
.cn-ficha-datos dt { font-size: 11.5px; color: var(--mc-tinta-3); font-weight: 700; }
.cn-ficha-datos dd { margin: 1px 0 0; font-size: 14px; }
.cn-ficha-items { margin: 0; padding-left: 18px; font-size: 13.5px; color: var(--mc-tinta-2); }
.cn-ficha .cn-crm-lista { max-height: 260px; overflow: auto; }
.cn-ficha .cn-crm-item { grid-template-columns: auto minmax(0, 1fr); }
.cn-ficha .cn-crm-detalle { grid-column: 1 / -1; }

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .cn-bandeja { grid-template-columns: minmax(0, 1fr); height: auto; overflow: visible; }
  .cn-col-lista { border-right: 0; }
  .cn-conv-lista { overflow: visible; }
  .cn-bandeja[data-detalle="1"] .cn-col-lista { display: none; }
  .cn-bandeja[data-detalle="0"] .cn-col-detalle { display: none; }
  .cn-volver { display: inline-flex; }
  .cn-det { height: auto; }
  .cn-det-cuerpo { overflow: visible; }
}
@media (max-width: 820px) {
  .cn { gap: 12px; }
  .cn-titulo h1 { font-size: 19px; }
  .cn-titulo p { font-size: 13.5px; }
  .cn-controles { width: 100%; }
  .cn-como:not(.cn-filtro-cat) { width: 100%; max-width: 460px; }
  .cn-como:not(.cn-filtro-cat) .cn-select { flex: 1; }
  .cn-barra-der { margin-left: 0; }
  .cn-leyenda { margin-left: 0; }
}
@media (max-width: 560px) {
  .cn-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cn-kpi { padding: 10px 10px 10px 13px; }
  .cn-kpi-valor { font-size: 21px; }
  .cn-kpi-etq, .cn-kpi-sub { font-size: 12px; }
  .cn-tab { padding: 9px 11px 8px; font-size: 13.5px; }
  .cn-seg { width: 100%; }
  .cn-barra-der, .cn-barra-der #cn-csv { width: 100%; }
  .cn-msg { max-width: 88%; }
  .cn-det-cab { padding: 10px 12px; }
  .cn-camp { padding: 12px; }
  .cn-promo { grid-template-columns: 52px minmax(0, 1fr); }
  .cn-busca { max-width: none; }
}
/* Celular: las 5 pestañas no entran en una fila y el scroll horizontal no se descubre
   ("Cartera" y "Stock y promos" quedaban fuera de pantalla). Pasan a píldoras en 2 filas. */
@media (max-width: 479.98px) {
  .cn-tabs { flex-wrap: wrap; gap: 6px; overflow: visible; border-bottom: 0; margin-bottom: 0; }
  .cn-tab {
    padding: 7px 11px; margin: 0; border: 1px solid var(--mc-linea); border-radius: 999px;
    background: var(--mc-superficie); font-size: 13px;
  }
  .cn-tab[aria-selected="true"] {
    border-color: var(--cn-acento); background: color-mix(in srgb, var(--cn-acento) 9%, var(--mc-superficie));
  }
  /* Filtros: los de Pedidos son 5 y «Rechazados» / «Todos» quedaban fuera de pantalla. */
  .cn-seg { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .cn-flecha, .cn-kpi { transition: none; }
}