/* Capital N — components.css : barra, botones, badges, tablas, gate, toasts.
   Estilo corporativo moderno: blanco/gris, bordó como acento, bordes finos. */

/* ===== Barra superior ===== */
#cn-bar {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 28px;
  height: 60px;
  background: var(--cn-surface);
  border-bottom: 1px solid var(--cn-border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.cn-bar__brand { display: flex; align-items: center; padding-right: 16px; border-right: 1px solid var(--cn-border); height: 32px; }
.cn-bar__menu { display: flex; align-items: center; gap: 24px; flex: 1; }
.cn-bar__nav { display: flex; gap: 0; flex: 1; }
.cn-bar__burger { display: none; flex-direction: column; justify-content: center; gap: 4px; width: 40px; height: 34px; margin-left: auto; padding: 0 9px; border: 1px solid var(--cn-border-2); border-radius: var(--cn-radius); background: var(--cn-surface); cursor: pointer; }
.cn-bar__burger span { display: block; height: 2px; border-radius: 2px; background: var(--cn-ink); }
.cn-bar__nav a {
  display: inline-flex; align-items: center; height: 60px;
  color: var(--cn-ink-soft);
  padding: 0 14px;
  font-size: var(--cn-text-base);
  font-weight: 500;
}
.cn-bar__nav a:hover { background: var(--cn-bg-soft); text-decoration: none; color: var(--cn-ink); }
.cn-bar__nav a.is-active { color: var(--cn-red); background: var(--cn-bg-soft); font-weight: 600; box-shadow: inset 0 -2px 0 var(--cn-red); }
.cn-bar__user { display: flex; align-items: center; gap: 10px; }
.cn-bar__id { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.cn-bar__name { font-weight: 600; font-size: var(--cn-text-base); }
.cn-bar__rol {
  font-size: var(--cn-text-xs); text-transform: uppercase; letter-spacing: .08em;
  color: var(--cn-ink-soft); background: var(--cn-bg-soft);
  padding: 3px 8px; border-radius: var(--cn-radius-sm);
}

/* ===== Botones ===== */
.cn-btn {
  font: inherit; font-size: var(--cn-text-base); font-weight: 500; cursor: pointer;
  border: 1px solid var(--cn-border-2);
  background: var(--cn-surface);
  color: var(--cn-ink);
  padding: 9px 16px; border-radius: var(--cn-radius);
  transition: background .15s, border-color .15s, opacity .15s;
}
.cn-btn:hover { background: var(--cn-bg-soft); }
.cn-btn:disabled { opacity: .5; cursor: default; }
.cn-btn--primary { background: var(--cn-red); border-color: var(--cn-red); color: #fff; }
.cn-btn--primary:hover { background: var(--cn-red-dark); border-color: var(--cn-red-dark); }
.cn-btn--ghost { border-color: transparent; background: transparent; color: var(--cn-ink-soft); }
.cn-btn--ghost:hover { background: var(--cn-bg-soft); }
.cn-btn--buy { background: var(--cn-ejecutada); border-color: var(--cn-ejecutada); color: #fff; }
.cn-btn--buy:hover { filter: brightness(.94); }
.cn-btn--sell { background: var(--cn-red); border-color: var(--cn-red); color: #fff; }
.cn-btn--sell:hover { background: var(--cn-red-dark); border-color: var(--cn-red-dark); }
/* botones de cambio de estado (drawer) */
.cn-btn--enproc { background: var(--cn-en_proceso); border-color: var(--cn-en_proceso); color: #fff; }
.cn-btn--enproc:hover { filter: brightness(.95); }
.cn-btn--exec { background: var(--cn-ejecutada); border-color: var(--cn-ejecutada); color: #fff; }
.cn-btn--exec:hover { filter: brightness(.95); }
.cn-btn--rej { background: #fff; border-color: var(--cn-rechazada); color: var(--cn-rechazada); }
.cn-btn--rej:hover { background: var(--cn-rechazada-bg); }
.cn-btn--exp { background: #fff; border-color: var(--cn-expirada); color: var(--cn-expirada); }
.cn-btn--exp:hover { background: var(--cn-expirada-bg); }
.cn-btn--del { background: #fff; border-color: var(--cn-border-2); color: var(--cn-ink-soft); }
.cn-btn--del:hover { background: var(--cn-rechazada-bg); border-color: var(--cn-rechazada); color: var(--cn-rechazada); }

/* ===== Tarjetas ===== */
.cn-card {
  background: var(--cn-surface);
  border: 1px solid var(--cn-border);
  border-radius: var(--cn-radius);
  box-shadow: var(--cn-shadow);
  padding: 24px;
}
main#app > .cn-card { margin-top: 18px; }
.cn-card__title { font-size: var(--cn-text-lg); font-weight: 600; margin: 0 0 5px; }
.cn-card__text { color: var(--cn-ink-soft); font-size: var(--cn-text-base); margin: 0 0 16px; }
.cn-roles { margin: 0 0 16px; padding-left: 18px; color: var(--cn-ink-soft); font-size: var(--cn-text-base); line-height: 1.5; }
.cn-roles li { margin-bottom: 4px; }
.cn-roles li:last-child { margin-bottom: 0; }
.cn-roles strong { color: var(--cn-ink); }
.cn-note {
  background: var(--cn-surface);
  border: 1px solid var(--cn-border);
  border-left: 3px solid var(--cn-red);
  border-radius: var(--cn-radius);
  padding: 16px 18px;
  color: var(--cn-ink-soft);
  font-size: var(--cn-text-base);
}

/* ===== Tabs / solapas ===== */
.cn-tabs { display: inline-flex; gap: 4px; background: var(--cn-bg-soft); padding: 4px; border-radius: var(--cn-radius); margin-bottom: 20px; }
.cn-tab { font: inherit; font-size: var(--cn-text-md); font-weight: 500; border: 0; background: transparent; color: var(--cn-ink-soft); padding: 7px 15px; border-radius: var(--cn-radius-sm); cursor: pointer; }
.cn-tab:hover { color: var(--cn-ink); }
.cn-tab.is-active { background: var(--cn-surface); color: var(--cn-ink); box-shadow: var(--cn-shadow); }

/* ===== Log de proceso (sync) ===== */
.cn-log {
  margin: 16px 0 0;
  max-height: 240px;
  overflow: auto;
  background: var(--cn-bg-soft);
  border: 1px solid var(--cn-border);
  border-radius: var(--cn-radius);
  padding: 12px 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--cn-text-sm);
  color: var(--cn-ink-soft);
  white-space: pre-wrap;
}
.cn-log:empty { display: none; }

/* ===== Formulario de carga (2 columnas densas) ===== */
.cn-form { max-width: 100%; }
/* la tarjeta se ajusta al ancho del form (sin vacío a la derecha) */
#cn-form-host { border-top: 2px solid var(--cn-border); transition: border-top-color .2s; }
#cn-form-host.is-buy  { border-top-color: var(--cn-ejecutada); }
#cn-form-host.is-sell { border-top-color: var(--cn-red); }
.cn-row-top { display: flex; align-items: flex-end; gap: 18px; margin-bottom: 14px; }
.cn-row-top .cn-field { margin-bottom: 0; }
.cn-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 30px; align-items: start; }
@media (max-width: 1180px) { .cn-form-grid { grid-template-columns: 1fr 1fr; } }
#cn-dyn, #f_price_wrap, #f_gtd_wrap { display: contents; }
.cn-field--full { grid-column: 1 / -1; }
.cn-inline { display: flex; gap: 8px; }
.cn-inline > input { flex: 1; min-width: 0; }
.cn-inline > select { flex: 0 0 130px; min-width: 0; }
.cn-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 11px; }
.cn-field > label { font-size: var(--cn-text-xs); font-weight: 600; color: var(--cn-ink-soft); }

/* Ícono de ayuda (ⓘ) + tooltip al pasar el cursor o enfocar con teclado. CSS puro (sin JS inline). */
.cn-help {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; margin-left: 5px; vertical-align: middle;
  border: 1px solid var(--cn-border-2); border-radius: 50%;
  font-size: var(--cn-text-xs); font-weight: 700; font-style: normal; line-height: 1;
  color: var(--cn-muted); background: var(--cn-surface); cursor: help; user-select: none;
}
.cn-help:hover, .cn-help:focus { color: var(--cn-red); border-color: var(--cn-red); outline: none; }
.cn-help::after {
  content: attr(data-tip);
  position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  width: max-content; max-width: 240px; white-space: normal; text-align: left;
  background: var(--cn-tooltip-bg); color: #fff; font-size: var(--cn-text-xs); font-weight: 400; line-height: 1.35;
  padding: 7px 10px; border-radius: var(--cn-radius-sm); box-shadow: 0 6px 18px rgba(0,0,0,.22);
  opacity: 0; visibility: hidden; transition: opacity .12s ease; pointer-events: none; z-index: 60;
}
.cn-help::before {
  content: ""; position: absolute; left: 50%; bottom: calc(100% + 3px); transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--cn-tooltip-bg);
  opacity: 0; visibility: hidden; transition: opacity .12s ease; pointer-events: none; z-index: 60;
}
.cn-help:hover::after, .cn-help:focus::after,
.cn-help:hover::before, .cn-help:focus::before { opacity: 1; visibility: visible; }
.cn-field input, .cn-field select, .cn-field textarea {
  font: inherit; font-size: var(--cn-text-md); color: var(--cn-ink); background: var(--cn-surface);
  border: 1px solid var(--cn-border-2); border-radius: var(--cn-radius); padding: 8px 10px;
}
.cn-field input:focus, .cn-field select:focus, .cn-field textarea:focus {
  outline: none; border-color: var(--cn-red); box-shadow: 0 0 0 3px rgba(var(--cn-red-rgb),.12);
}
.cn-field .cn-readonly { background: var(--cn-bg-soft); color: var(--cn-muted); }
/* Campo tipo checkbox (ej. "Is full liquidation") */
.cn-field--check { flex-direction: row; align-items: center; gap: 6px; }
.cn-checkline { display: inline-flex; align-items: center; gap: 7px; font-size: var(--cn-text-sm); font-weight: 500; color: var(--cn-ink-soft); cursor: pointer; }
.cn-field--check input[type="checkbox"] { width: 16px; height: 16px; padding: 0; border: 0; box-shadow: none; accent-color: var(--cn-red); flex: 0 0 auto; cursor: pointer; }

/* Combobox del identificador (catálogo de instrumentos): buscar por símbolo + "qué es" debajo */
.cn-combo { position: relative; }
.cn-combo input { width: 100%; }   /* que ocupe toda la columna, alineado con los demás campos */
.cn-combo__panel { position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 40; background: var(--cn-surface); border: 1px solid var(--cn-border-2); border-radius: var(--cn-radius); box-shadow: var(--cn-shadow-lg); max-height: 260px; overflow: auto; }
.cn-combo__item { display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--cn-border); background: var(--cn-surface); padding: 7px 10px; cursor: pointer; font: inherit; }
.cn-combo__item:last-child { border-bottom: 0; }
.cn-combo__item:hover { background: var(--cn-bg-soft); }
.cn-combo__sym { font-size: var(--cn-text-md); font-weight: 600; color: var(--cn-ink); }
.cn-combo__what { font-size: var(--cn-text-xs); color: var(--cn-muted); }
.cn-combo__more { padding: 6px 10px; font-size: var(--cn-text-xs); color: var(--cn-muted); border-top: 1px solid var(--cn-border); }
.cn-combo__hint { font-size: var(--cn-text-xs); color: var(--cn-muted); margin-top: 3px; min-height: 1em; }
.cn-combo__hint.is-warn { color: var(--cn-red); font-weight: 600; }

.cn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cn-grid:empty { display: none; }
.cn-form-actions { margin-top: 20px; }

/* toggle Buy / Sell */
.cn-side { display: inline-flex; border: 1px solid var(--cn-border-2); border-radius: var(--cn-radius); overflow: hidden; height: 38px; }
/* flex:1 → Buy y Sell reparten el ancho del toggle (cuando es 100%, en celular, no queda un hueco
   blanco a la derecha; en desktop el toggle es de ancho-contenido y se ven igual). */
.cn-side button { flex: 1; font: inherit; font-size: var(--cn-text-base); font-weight: 600; cursor: pointer; border: 0; background: var(--cn-surface); color: var(--cn-ink-soft); padding: 0 20px; white-space: nowrap; }
.cn-side button.is-buy.is-active  { background: var(--cn-ejecutada); color: #fff; }
.cn-side button.is-sell.is-active { background: var(--cn-red); color: #fff; }
/* Side de Option: desplegable combinado (Buy/Sell Open/Close), coloreado por buy/sell */
.cn-side-sel { font: inherit; font-size: var(--cn-text-base); font-weight: 600; height: 38px; padding: 0 12px; min-width: 140px; border: 1px solid var(--cn-border-2); border-radius: var(--cn-radius); cursor: pointer; }
.cn-side-sel.is-buy  { background: var(--cn-ejecutada); border-color: var(--cn-ejecutada); color: #fff; }
.cn-side-sel.is-sell { background: var(--cn-red); border-color: var(--cn-red); color: #fff; }
.cn-side-sel:focus { outline: none; box-shadow: 0 0 0 3px rgba(var(--cn-red-rgb),.18); }
/* opciones del desplegable abierto: Buy en verde, Sell en bordó (sobre fondo blanco) */
.cn-side-sel option { background: #fff; font-weight: 600; }
.cn-side-sel option.opt-buy  { color: var(--cn-ejecutada); }
.cn-side-sel option.opt-sell { color: var(--cn-red); }

/* ===== Badges de estado (suaves) ===== */
.cn-pill {
  display: inline-block; font-size: var(--cn-text-xs); font-weight: 600;
  letter-spacing: .02em; text-transform: uppercase;
  padding: 3px 9px; border-radius: var(--cn-radius-sm);
}
.cn-pill--pendiente  { color: var(--cn-pendiente);  background: var(--cn-pendiente-bg); }
.cn-pill--en_proceso { color: var(--cn-en_proceso); background: var(--cn-en_proceso-bg); }
.cn-pill--ejecutada  { color: var(--cn-ejecutada);  background: var(--cn-ejecutada-bg); }
.cn-pill--rechazada  { color: var(--cn-rechazada);  background: var(--cn-rechazada-bg); }
.cn-pill--expirada   { color: var(--cn-expirada);   background: var(--cn-expirada-bg); }
/* Pre-Trades — estados de evento (borrador/abierto/cerrado/cancelado) y de solicitud
   (cargado/aprobado/rechazado/cancelado). Reusan la paleta de estados existente. */
.cn-pill--borrador   { color: var(--cn-ink-soft);   background: var(--cn-bg-soft); }
.cn-pill--abierto    { color: var(--cn-ejecutada);  background: var(--cn-ejecutada-bg); }
.cn-pill--cerrado    { color: var(--cn-expirada);   background: var(--cn-expirada-bg); }
.cn-pill--cargado    { color: var(--cn-pendiente);  background: var(--cn-pendiente-bg); }
.cn-pill--aprobado   { color: var(--cn-ejecutada);  background: var(--cn-ejecutada-bg); }
.cn-pill--rechazado  { color: var(--cn-rechazada);  background: var(--cn-rechazada-bg); }
.cn-pill--cancelado  { color: var(--cn-ink-soft);   background: var(--cn-bg-soft); }
/* Pre-Trades — estados DERIVADOS del evento (post-cierre): ejecución / liquidación. */
.cn-pill--en_ejecucion { color: var(--cn-pendiente);  background: var(--cn-pendiente-bg); }
.cn-pill--ejecutado    { color: var(--cn-ejecutada);  background: var(--cn-ejecutada-bg); }
.cn-pill--liquidado    { color: var(--cn-en_proceso); background: var(--cn-en_proceso-bg); }
/* Pre-Trades — borde izquierdo de la tarjeta de evento según su estado DERIVADO (sobre .cn-cardn). */
.cn-cardn--ev-borrador     { border-left-color: var(--cn-cat-neutral); }
.cn-cardn--ev-abierto      { border-left-color: var(--cn-ejecutada); }
.cn-cardn--ev-cerrado      { border-left-color: var(--cn-expirada); }
.cn-cardn--ev-en_ejecucion { border-left-color: var(--cn-pendiente); }
.cn-cardn--ev-ejecutado    { border-left-color: var(--cn-ejecutada); }
.cn-cardn--ev-liquidado    { border-left-color: var(--cn-en_proceso); }
.cn-cardn--ev-cancelado    { border-left-color: var(--cn-rechazada); }

/* Pre-Trades — cabecera del detalle del evento (card full-width, NO usa las clases del drawer). */
.cn-pt-head__top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.cn-pt-head__title { font-size: var(--cn-text-xl); font-weight: 700; margin: 0; letter-spacing: -.01em; }
.cn-pt-head__title .cn-dimtxt { font-weight: 400; }
.cn-pt-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px 28px; margin-bottom: 18px; }
.cn-pt-meta__item { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cn-pt-meta__item span { font-size: var(--cn-text-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--cn-muted); font-weight: 600; }
.cn-pt-meta__item b { font-size: var(--cn-text-base); color: var(--cn-ink); font-weight: 600; }
.cn-pt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; border-top: 1px solid var(--cn-border); padding-top: 16px; }
/* Totales del evento, compactos y alineados a la derecha de la fila de acciones (junto a Cancelar). */
.cn-pt-evtot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-left: auto; }
.cn-pt-evtot__item { display: flex; flex-direction: column; gap: 2px; text-align: right; }
.cn-pt-evtot__item span { font-size: var(--cn-text-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--cn-muted); font-weight: 600; }
.cn-pt-evtot__item b { font-size: var(--cn-text-base); color: var(--cn-ink); font-weight: 700; letter-spacing: -.01em; }
.cn-pt-evtot__item--accent b { color: var(--cn-red); }
/* mis-pretrades (operativo): barra de totales arriba de la lista plana (no hay card de cabecera). */
.cn-mp-tot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 28px; padding: 13px 16px; margin-bottom: 14px; background: var(--cn-bg-soft); border: 1px solid var(--cn-border); border-radius: var(--cn-radius); }
.cn-mp-tot__item { display: flex; flex-direction: column; gap: 2px; }
.cn-mp-tot__item span { font-size: var(--cn-text-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--cn-muted); font-weight: 600; }
.cn-mp-tot__item b { font-size: var(--cn-text-lg); color: var(--cn-ink); font-weight: 700; letter-spacing: -.01em; }
.cn-mp-tot__item--accent b { color: var(--cn-red); }
/* Barra arriba del card de detalle: volver (izq) + descargar listado (der). */
.cn-pt-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* Botón de solo-ícono (gris, se aclara al hover). Ej: descargar listado. */
.cn-btn--icon { display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: var(--cn-muted); padding: 7px 10px; }
.cn-btn--icon:hover { color: var(--cn-ink); }
/* Ficha del evento elegido en el form de carga de Pre-Trade (mini-card bajo el picker). */
.cn-pt-ficha { display: flex; flex-direction: column; gap: 3px; margin-top: 7px; padding: 9px 12px; background: var(--cn-bg-soft); border: 1px solid var(--cn-border); border-radius: var(--cn-radius-lg); font-size: var(--cn-text-md); color: var(--cn-ink-soft); }
/* Acción + ícono "i" con explicación (tooltip nativo vía title). */
.cn-act-wrap { display: inline-flex; align-items: center; gap: 5px; }
.cn-info { display: inline-flex; align-items: center; color: var(--cn-muted); cursor: help; }
.cn-info:hover, .cn-info:focus-visible { color: var(--cn-ink-soft); }
/* Card de evento clickeable (abre el detalle). */
.cn-cardn--clickable { cursor: pointer; }
.cn-cardn--clickable:hover { box-shadow: var(--cn-shadow); border-color: var(--cn-border-2); }
.cn-cardn--clickable:focus-visible { outline: 2px solid var(--cn-red); outline-offset: 2px; }
/* Subtítulo de sección dentro del detalle (Solicitudes). */
.cn-pt-subt { font-size: var(--cn-text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--cn-ink-soft); margin: 22px 0 12px; }

/* Pre-Trades — panel UNIFICADO de solicitudes: cabecera (título + filtro), tira de totales y tabla
   viven en un solo bloque (.cn-card) en vez de flotar sueltos sobre el fondo. */
.cn-pt-panel { margin-top: 16px; padding: 0; overflow: hidden; }
.cn-pt-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; padding: 15px 20px; border-bottom: 1px solid var(--cn-border); }
.cn-pt-panel__head .cn-pt-subt { margin: 0; }
.cn-pt-panel__head .cn-filters { margin: 0; }
/* La tabla dentro del panel NO lleva su marco propio (el panel ya es el marco). */
.cn-pt-panel .cn-table-wrap { border: 0; border-radius: 0; }
.cn-pt-panel .cn-alert { margin: 14px 20px 0; }
.cn-pt-panel .cn-empty { padding: 30px; }

/* ===== Tablas ===== */
.cn-table { width: 100%; border-collapse: collapse; background: var(--cn-surface); font-size: var(--cn-text-base); }
.cn-table th, .cn-table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--cn-border); }
.cn-table th { font-size: var(--cn-text-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--cn-muted); font-weight: 600; }
.cn-table tbody tr:hover { background: var(--cn-bg-soft); cursor: pointer; }
/* Órdenes rechazadas: atenuadas (van al final de la grilla); el color vuelve al pasar el mouse. */
.cn-table tbody tr.cn-tr--rechazada { opacity: .5; }
.cn-table tbody tr.cn-tr--rechazada:hover { opacity: 1; }

/* ===== Gate (login / sin acceso) ===== */
.cn-gate {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--cn-bg);
  padding: 20px;
  z-index: 100;
}
.cn-gate__card {
  background: var(--cn-surface);
  border: 1px solid var(--cn-border);
  border-radius: var(--cn-radius-lg);
  box-shadow: 0 1px 2px rgba(var(--cn-shadow-rgb),.04), 0 12px 40px rgba(var(--cn-shadow-rgb),.08);
  padding: 44px 44px 38px;
  text-align: center;
  max-width: 350px;
}
.cn-gate__card .cn-logo { margin-bottom: 28px; }
.cn-gate__title { font-size: var(--cn-text-xl); color: var(--cn-ink); margin: 0 0 6px; }
.cn-gate__text { color: var(--cn-ink-soft); margin: 0 0 24px; font-size: var(--cn-text-base); }
.cn-gate__card .cn-btn { width: 100%; }

/* ===== Gestión: toolbar, chips, links, tarjetas, modal ===== */
.cn-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.cn-toolbar--end { justify-content: flex-end; }   /* solo el botón a la derecha (sin chips) */
.cn-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.cn-chip { font: inherit; font-size: var(--cn-text-sm); border: 1px solid var(--cn-border-2); background: var(--cn-surface); color: var(--cn-ink-soft); padding: 5px 12px; border-radius: var(--cn-radius-full); cursor: pointer; }
.cn-chip:hover { background: var(--cn-bg-soft); }
.cn-chip.is-active { background: var(--cn-ink); color: #fff; border-color: var(--cn-ink); }

.cn-links { display: flex; flex-direction: column; gap: 8px; }
.cn-linkrow { display: flex; justify-content: space-between; align-items: center; gap: 16px; background: var(--cn-surface); border: 1px solid var(--cn-border); border-radius: var(--cn-radius); padding: 12px 16px; }
.cn-linkrow__main { display: flex; flex-direction: column; gap: 2px; }
.cn-linkrow__main a { font-weight: 600; }
.cn-linkrow__desc { font-size: var(--cn-text-sm); color: var(--cn-ink-soft); }
.cn-linkrow__act { display: flex; gap: 4px; }
.cn-linkrow__act .cn-btn, .cn-cardn__act .cn-btn { padding: 5px 10px; font-size: var(--cn-text-sm); }

.cn-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.cn-cardn { background: var(--cn-surface); border: 1px solid var(--cn-border); border-left: 3px solid var(--cn-border-2); border-radius: var(--cn-radius); padding: 16px; box-shadow: var(--cn-shadow); display: flex; flex-direction: column; }
.cn-cardn--nota        { border-left-color: var(--cn-cat-neutral); }
.cn-cardn--idea        { border-left-color: var(--cn-cat-idea); }
.cn-cardn--seguimiento { border-left-color: var(--cn-en_proceso); }   /* era #1F5FB8 = --cn-en_proceso */
.cn-cardn--encuentro   { border-left-color: var(--cn-cat-encuentro); }
.cn-cardn--soporte     { border-left-color: var(--cn-ejecutada); }    /* era #1A7A47 = --cn-ejecutada */
.cn-cardn__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.cn-cardn__title { font-weight: 600; font-size: var(--cn-text-lg); margin-bottom: 6px; }
.cn-cardn__body { color: var(--cn-ink-soft); font-size: var(--cn-text-md); margin-bottom: 12px; }
.cn-cardn__foot { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--cn-text-sm); color: var(--cn-ink-soft); border-top: 1px solid var(--cn-border); padding-top: 10px; margin-top: auto; }
.cn-cardn__autor { margin-left: auto; color: var(--cn-muted); font-style: italic; }
.cn-cardn__act { display: flex; justify-content: flex-end; gap: 4px; margin-top: 10px; }
.cn-tagn { font-size: var(--cn-text-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--cn-ink-soft); background: var(--cn-bg-soft); padding: 3px 8px; border-radius: var(--cn-radius-sm); }
.cn-pille { font-size: var(--cn-text-xs); font-weight: 600; text-transform: uppercase; padding: 2px 8px; border-radius: var(--cn-radius-sm); }
.cn-pille--pendiente { color: var(--cn-pendiente);  background: var(--cn-pendiente-bg); }
.cn-pille--en_curso  { color: var(--cn-en_proceso); background: var(--cn-en_proceso-bg); }
.cn-pille--entregado { color: var(--cn-ejecutada);  background: var(--cn-ejecutada-bg); }

/* botones de icono (editar / eliminar) */
.cn-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid transparent; border-radius: var(--cn-radius-sm); background: transparent; color: var(--cn-muted); cursor: pointer; transition: background .15s, color .15s; }
.cn-iconbtn:hover { background: var(--cn-bg-soft); color: var(--cn-ink); }
.cn-iconbtn--danger:hover { background: var(--cn-rechazada-bg); color: var(--cn-rechazada); }
/* Variante chica para usar en línea (ej. lápiz junto a un valor en .cn-dl__row). */
.cn-iconbtn--inline { width: 24px; height: 24px; margin-left: 4px; vertical-align: middle; }
.cn-ic { width: 16px; height: 16px; display: block; }

/* tarjetas de links */
.cn-cardl { background: var(--cn-surface); border: 1px solid var(--cn-border); border-left: 3px solid var(--cn-red); border-radius: var(--cn-radius); box-shadow: var(--cn-shadow); padding: 16px; display: flex; flex-direction: column; gap: 5px; cursor: pointer; transition: box-shadow .15s, border-color .15s; }
.cn-cardl:hover { box-shadow: var(--cn-shadow-md); border-left-color: var(--cn-red-dark); }
.cn-cardl:focus-visible { outline: 2px solid var(--cn-red); outline-offset: 2px; }
.cn-cardl__title { font-weight: 600; font-size: var(--cn-text-lg); color: var(--cn-ink); }
.cn-cardl:hover .cn-cardl__title { color: var(--cn-red); }
.cn-cardl__desc { font-size: var(--cn-text-md); color: var(--cn-ink-soft); }
.cn-cardl__act { display: flex; justify-content: flex-end; gap: 4px; margin-top: 10px; }
.cn-cardl__act .cn-btn { padding: 5px 10px; font-size: var(--cn-text-sm); }
.cn-cardn--agenda { border-left-color: var(--cn-cat-encuentro); }

/* z-index 400 > drawer (300): un modal abierto DESDE el drawer (ej. ejecución) queda siempre encima. */
.cn-modal { position: fixed; inset: 0; background: rgba(var(--cn-shadow-rgb),.45); display: flex; align-items: center; justify-content: center; z-index: 400; padding: 20px; }
/* max-height en dvh (dynamic viewport height): con el teclado abierto en móvil el alto disponible
   se achica y el modal sigue entrando/scrolleando, en vez de quedar cortado bajo el teclado. */
.cn-modal__card { background: var(--cn-surface); border-radius: var(--cn-radius-lg); padding: 24px; width: 100%; max-width: 460px; box-shadow: var(--cn-shadow-xl); max-height: 90dvh; overflow: auto; }
.cn-modal__act { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
/* Preview del import de cuentas */
.cn-prev__warn { background: var(--cn-rechazada-bg); border: 1px solid var(--cn-rechazada); color: var(--cn-rechazada); border-radius: var(--cn-radius); padding: 9px 12px; font-size: var(--cn-text-md); font-weight: 600; margin-bottom: 12px; }
.cn-prev__sec { margin-bottom: 14px; }
.cn-prev__h { font-size: var(--cn-text-sm); font-weight: 700; margin-bottom: 6px; }
.cn-prev__h.is-baja { color: var(--cn-rechazada); }
.cn-prev__h.is-ofi { color: #8a6d00; }
.cn-prev__list { max-height: 200px; overflow: auto; border: 1px solid var(--cn-border); border-radius: var(--cn-radius); padding: 8px 10px; font-size: var(--cn-text-sm); display: flex; flex-direction: column; gap: 3px; }

/* ===== Toasts ===== */
#cn-toasts { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 10px; z-index: 200; }
.cn-toast {
  padding: 11px 15px; border-radius: var(--cn-radius); color: #fff; font-size: var(--cn-text-md);
  box-shadow: 0 6px 20px rgba(var(--cn-shadow-rgb),.18);
  opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; max-width: 320px;
}
.cn-toast.is-visible { opacity: 1; transform: translateY(0); }
.cn-toast--info  { background: var(--cn-ink); }
.cn-toast--ok    { background: var(--cn-ejecutada); }
.cn-toast--error { background: var(--cn-red); }

/* ===== Responsive (celular / tablet) ===== */
@media (max-width: 820px) {
  #cn-bar { gap: 14px; padding: 0 16px; }
  .cn-bar__brand { border-right: 0; padding-right: 0; }
  .cn-bar__burger { display: flex; }
  .cn-bar__menu {
    display: none;
    position: absolute; top: 60px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 6px;
    background: var(--cn-surface);
    border-bottom: 1px solid var(--cn-border);
    box-shadow: var(--cn-shadow-lg);
    padding: 12px 16px 16px;
    z-index: 20;
  }
  .cn-bar__menu.is-open { display: flex; }
  .cn-bar__nav { flex-direction: column; gap: 2px; }
  .cn-bar__nav a { height: auto; padding: 11px 12px; font-size: var(--cn-text-lg); }
  /* Sección de usuario (Marketing + identidad + Salir): en celular se ordena en filas claras.
     Marketing queda como pill a ancho completo arriba; abajo, nombre + rol a la izquierda y Salir
     a la derecha. Antes iba todo apretado en una sola fila (el nombre se partía en dos líneas). */
  .cn-bar__user { flex-wrap: wrap; align-items: center; gap: 10px; border-top: 1px solid var(--cn-border); padding-top: 12px; margin-top: 4px; }
  .cn-bar__sidelink { flex: 1 1 100%; justify-content: center; height: 40px; font-size: var(--cn-text-base); }
  .cn-bar__id { flex: 1 1 auto; min-width: 0; gap: 8px; }
  .cn-bar__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cn-bar__user .cn-btn { margin-left: auto; flex: 0 0 auto; }

  main#app { padding: 22px 16px 56px; }
  .cn-card { padding: 18px; }

  /* formularios y grillas a una columna. minmax(0, 1fr) (NO 1fr pelado): el piso `auto` de 1fr usa
     el min-content de los campos y un control que no encoge (un <select>/input ancho) REVENTABA la
     columna y desbordaba la pantalla. Con min 0, la columna siempre entra al ancho disponible. */
  .cn-form-grid, .cn-grid { grid-template-columns: minmax(0, 1fr); }
  .cn-row-top { flex-wrap: wrap; gap: 14px; }
  .cn-form { max-width: 100%; }

  .cn-toolbar { flex-direction: column; align-items: stretch; }
  .cn-toolbar .cn-btn { width: 100%; }
  .cn-cards { grid-template-columns: 1fr; }

  .cn-tabs { display: flex; width: 100%; }
  .cn-tab { flex: 1; text-align: center; }

  .cn-page-title { font-size: var(--cn-text-2xl); }
}


/* ===== Listado de órdenes ===== */
/* Filtros: en celular se ocultan tras el botón "Filtros" (.cn-filterbox__toggle, visible solo en
   ≤640px). En desktop el botón está oculto y los filtros se ven siempre (fila flex como antes). */
.cn-filterbox { margin-bottom: 16px; }
.cn-filterbox__toggle {
  display: none;   /* aparece solo en celular (ver @media 640px) */
  font: inherit; font-size: var(--cn-text-md); font-weight: 600; color: var(--cn-ink-soft);
  align-items: center; gap: 8px; width: 100%; text-align: left; cursor: pointer;
  padding: 9px 12px; border: 1px solid var(--cn-border-2); border-radius: var(--cn-radius);
  background: var(--cn-surface);
}
.cn-filterbox__toggle::after { content: "▸"; margin-left: auto; color: var(--cn-muted); }
.cn-filterbox.is-open .cn-filterbox__toggle::after { content: "▾"; }
.cn-filters { display: flex; gap: 10px; flex-wrap: wrap; }
.cn-filters input, .cn-filters select {
  font: inherit; font-size: var(--cn-text-md); padding: 8px 10px;
  border: 1px solid var(--cn-border-2); border-radius: var(--cn-radius);
  background: var(--cn-surface); color: var(--cn-ink);
}
.cn-filters input[type="text"] { flex: 0 1 260px; min-width: 160px; }
.cn-filters__search { margin-left: auto; }
.cn-filters__actions { display: contents; }   /* en desktop los botones son hijos directos del flex */

/* Aviso de órdenes de días anteriores sin resolver — colapsable solo en celular (ver @media 640px).
   En desktop se ve siempre expandido: el encabezado es un título no interactivo y la lista visible. */
.cn-alert { background: var(--cn-warn-bg); border: 1px solid var(--cn-warn-bd); border-left: 3px solid var(--cn-warn); border-radius: var(--cn-radius); padding: 11px 14px; margin-bottom: 14px; }
.cn-alert__toggle { font: inherit; width: 100%; text-align: left; background: none; border: 0; padding: 0; cursor: default; display: flex; align-items: center; gap: 8px; font-size: var(--cn-text-sm); font-weight: 600; color: var(--cn-warn-ink); }
.cn-alert__sign { flex: 0 0 auto; font-weight: 700; }
.cn-alert__sumtxt { flex: 1 1 auto; min-width: 0; }
.cn-alert__chev { display: none; flex: 0 0 auto; color: var(--cn-warn); }   /* visible solo en celular */
.cn-alert__title { font-size: var(--cn-text-sm); font-weight: 600; color: var(--cn-warn-ink); margin-bottom: 9px; }   /* legacy */
.cn-alert__list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.cn-alert__item { font: inherit; font-size: var(--cn-text-sm); color: var(--cn-ink); background: var(--cn-surface); border: 1px solid var(--cn-border-2); border-radius: var(--cn-radius-sm); padding: 5px 9px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.cn-alert__item:hover { border-color: var(--cn-red); background: var(--cn-bg-soft); }
.cn-table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--cn-border); border-radius: var(--cn-radius); background: var(--cn-surface); }
.cn-sb { font-size: var(--cn-text-xs); font-weight: 700; letter-spacing: .03em; padding: 2px 7px; border-radius: var(--cn-radius-sm); }
.cn-sb--buy  { color: var(--cn-ejecutada); background: var(--cn-ejecutada-bg); }
.cn-sb--sell { color: var(--cn-rechazada); background: var(--cn-rechazada-bg); }
.cn-dimtxt { color: var(--cn-muted); font-size: .85em; }
.cn-nowrap { white-space: nowrap; }
.cn-empty { text-align: center; color: var(--cn-muted); padding: 26px; }

/* En celular, la grilla de órdenes (8 columnas) deja de ser una tabla con scroll horizontal y pasa a
   TARJETAS apiladas (cada fila = una card etiqueta/valor). Más prolijo y legible en pantallas chicas.
   Solo aplica a las tablas marcadas con .cn-table--cards (la grilla de órdenes); el resto no cambia. */
@media (max-width: 640px) {
  /* El contenedor deja de scrollear en horizontal cuando la tabla es de tarjetas (el contenido ya
     entra al ancho del celular). Otras tablas (usuarios/auditoría) conservan su scroll. */
  .cn-table-wrap:has(.cn-table--cards) { overflow-x: visible; }
  .cn-table--cards thead { display: none; }
  .cn-table--cards, .cn-table--cards tbody { display: block; width: 100%; }
  .cn-table--cards tr { display: block; padding: 12px 14px; border-bottom: 1px solid var(--cn-border); }
  .cn-table--cards tbody tr:last-child { border-bottom: 0; }
  .cn-table--cards td {
    display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
    padding: 3px 0; border: 0; text-align: right; min-width: 0; overflow-wrap: anywhere;
  }
  .cn-table--cards td::before {
    content: attr(data-label); flex: 0 0 auto; text-align: left;
    color: var(--cn-muted); font-size: var(--cn-text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  }
  /* La celda principal (la orden en sí) va full-width arriba, sin etiqueta y con un poco de aire. */
  .cn-table--cards td.cn-cell-main { display: block; text-align: left; margin-bottom: 7px; overflow-wrap: anywhere; }
  .cn-table--cards td.cn-cell-main::before { display: none; }
  .cn-table--cards td.cn-nowrap { white-space: normal; }

  /* ---- Filtros: ocultos tras el botón "Filtros"; al abrir, grilla prolija de 2 columnas. ---- */
  .cn-filterbox__toggle { display: flex; }
  .cn-filters { display: none; }
  .cn-filterbox.is-open .cn-filters {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; margin-top: 10px;
  }
  .cn-filterbox.is-open .cn-filters > input[type="date"],
  .cn-filterbox.is-open .cn-filters__search { grid-column: 1 / -1; }
  .cn-filterbox.is-open .cn-filters select,
  .cn-filterbox.is-open .cn-filters input { width: 100%; min-width: 0; flex: initial; }
  .cn-filterbox.is-open .cn-filters__search { margin-left: 0; }
  .cn-filters__actions { grid-column: 1 / -1; display: flex; gap: 10px; justify-content: flex-end; }
  .cn-filters__actions .cn-btn { flex: 0 0 auto; }

  /* ---- Aviso "días anteriores sin resolver": colapsado; se expande al tocar el encabezado. ---- */
  .cn-alert__toggle { cursor: pointer; }
  .cn-alert__chev { display: inline-flex; }
  .cn-alert__chev::before { content: "▸"; }
  .cn-alert.is-open .cn-alert__chev::before { content: "▾"; }
  .cn-alert__list { display: none; }
  .cn-alert.is-open .cn-alert__list { display: flex; }

  /* ---- Form de carga: compactar y proporcionar para menos scroll. ---- */
  .cn-inline > select { flex: 0 0 42%; }
  .cn-combo__panel { max-height: 50vh; }
  .cn-field { margin-bottom: 8px; gap: 4px; }
  .cn-row-top .cn-field { flex: 1 1 100%; }
  .cn-row-top .cn-field select,
  .cn-row-top .cn-field .cn-side,
  .cn-row-top .cn-field .cn-side-sel { width: 100%; }
  .cn-row-top .cn-explora-btn { margin-left: 0; align-self: stretch; width: 100%; }

  /* ---- Comodidad de escritura en celular + FIN del zoom automático de iOS ----
     Safari iOS hace zoom al enfocar un control con font-size < 16px. Con 16px no zoomea, y NO
     usamos maximum-scale / user-scalable=no (rompería el pinch-zoom y la accesibilidad). El
     viewport de los HTML lleva interactive-widget=resizes-content para que el teclado reacomode
     el contenido (Chromium/Android) en vez de taparlo. Enumeramos los selectores reales de la app
     (misma especificidad y más abajo en la cascada → ganan a sus reglas de desktop) y dejamos un
     catch-all amplio para cualquier control suelto (modales, buscadores, etc.). */
  .cn-field input, .cn-field select, .cn-field textarea,
  .cn-filters input, .cn-filters select,
  textarea.cn-msg, .cn-side-sel,
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select, textarea { font-size: 16px; }
  /* Form de carga a UNA columna: más cómodo que dos en un teléfono. minmax(0,1fr) evita el blowout. */
  .cn-form-grid { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  /* Targets táctiles holgados (≈44px) y acción primaria a lo ancho. */
  .cn-field input, .cn-field select { min-height: 44px; }
  .cn-form-actions .cn-btn { width: 100%; min-height: 46px; }

  /* Tooltips de ayuda (ⓘ) en celular: se anclan al CAMPO (no al ícono diminuto) y ocupan su ancho,
     así NUNCA desbordan horizontalmente. Un tooltip absoluto de 240px anclado al ícono sumaba al
     ancho de la página (overflow horizontal, aun oculto). La flecha se omite (ya no apunta al ícono). */
  .cn-field { position: relative; }
  .cn-help { position: static; }
  .cn-help::after { left: 0; right: 0; width: auto; max-width: none; transform: none; }
  .cn-help::before { display: none; }

  /* Densidad en celular: menos scroll SIN amontonar. Encabezado más compacto y sin aire muerto
     abajo; la tarjeta con un poco menos de padding. (Los campos mantienen su alto táctil de 44px.) */
  main#app { padding-bottom: 28px; }
  .cn-page-title { font-size: var(--cn-text-2xl); }
  .cn-page-sub { margin-bottom: 14px; }
  .cn-card { padding: 16px; }
}

/* ===== Drawer de detalle ===== */
.cn-drawer-ov { position: fixed; inset: 0; background: rgba(var(--cn-shadow-rgb),.35); z-index: 300; opacity: 0; transition: opacity .2s; }
.cn-drawer-ov.is-open { opacity: 1; }
.cn-drawer { position: absolute; top: 0; right: 0; height: 100%; width: 430px; max-width: 92vw; background: var(--cn-surface); box-shadow: -10px 0 40px rgba(var(--cn-shadow-rgb),.18); padding: 26px 24px; overflow-y: auto; transform: translateX(100%); transition: transform .2s; }
.cn-drawer-ov.is-open .cn-drawer { transform: translateX(0); }
.cn-drawer__close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border: 0; border-radius: var(--cn-radius-sm); background: transparent; color: var(--cn-ink-soft); font-size: var(--cn-text-lg); cursor: pointer; }
.cn-drawer__close:hover { background: var(--cn-bg-soft); }
.cn-drawer__num { font-weight: 700; font-size: var(--cn-text-xl); margin-bottom: 8px; }
.cn-drawer__head { margin-bottom: 14px; }
.cn-drawer__line { padding: 12px 14px; background: var(--cn-bg-soft); border-radius: var(--cn-radius); margin-bottom: 8px; }
.cn-dl { display: flex; flex-direction: column; gap: 7px; }
.cn-dl__row { display: flex; justify-content: space-between; gap: 16px; font-size: var(--cn-text-md); }
.cn-dl__row span { color: var(--cn-ink-soft); }
.cn-dl__row b { text-align: right; }
.cn-dl__sep { font-size: var(--cn-text-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--cn-muted); font-weight: 700; margin: 16px 0 8px; border-top: 1px solid var(--cn-border); padding-top: 12px; }
.cn-drawer__notes { font-size: var(--cn-text-md); color: var(--cn-ink-soft); white-space: pre-wrap; }
.cn-drawer__actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.cn-drawer__actions .cn-btn { flex: 1; min-width: 120px; }
.cn-msg { width: 100%; box-sizing: border-box; font: inherit; font-size: var(--cn-text-md); line-height: 1.45; padding: 12px; margin-top: 4px; border: 1px solid var(--cn-border-2); border-radius: var(--cn-radius); color: var(--cn-ink); background: var(--cn-bg-soft); white-space: pre-wrap; resize: vertical; }
/* mensaje al cliente: pestaña colapsable + botones chicos y formales */
.cn-msgbox { margin-top: 16px; border-top: 1px solid var(--cn-border); padding-top: 12px; }
.cn-msgbox > summary { cursor: pointer; font-size: var(--cn-text-xs); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--cn-muted); }
.cn-msgbox > summary:hover { color: var(--cn-ink); }
.cn-msgbox[open] > summary { margin-bottom: 10px; }
.cn-msg-actions { display: flex; gap: 8px; margin-top: 10px; }
.cn-btn--sm { padding: 6px 13px; font-size: var(--cn-text-sm); font-weight: 500; }
.cn-btn--wa { background: #fff; border-color: var(--cn-wa-bd); color: var(--cn-wa-ink); }

/* ABM de instrumentos (Usuarios) */
.cn-instr-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 14px 0 10px; }
.cn-instr-bar input[type="text"] { flex: 1; min-width: 220px; font: inherit; font-size: var(--cn-text-md); padding: 8px 10px; border: 1px solid var(--cn-border-2); border-radius: var(--cn-radius); background: var(--cn-surface); color: var(--cn-ink); }
.cn-instr-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 2px; border-bottom: 1px solid var(--cn-border); }
.cn-instr-act { display: flex; gap: 6px; flex-shrink: 0; }
.cn-tag { display: inline-block; font-size: var(--cn-text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--cn-ink-soft); background: var(--cn-bg-soft); padding: 2px 7px; border-radius: var(--cn-radius-sm); margin-left: 6px; }
.cn-btn--wa:hover { background: var(--cn-wa-bg); border-color: var(--cn-wa-bd-hover); }

/* importar excel */
.cn-filerow { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
/* Input de archivo oculto + label como botón (look consistente con el resto) */
.cn-file-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cn-file-label { cursor: pointer; }
.cn-file-input:focus-visible + .cn-file-label { border-color: var(--cn-red); box-shadow: 0 0 0 3px rgba(var(--cn-red-rgb),.12); }
.cn-file-name { font-size: var(--cn-text-md); color: var(--cn-muted); }
.cn-file-name.has-file { color: var(--cn-ink); font-weight: 500; }
.cn-adv { margin-top: 16px; }
.cn-adv summary { cursor: pointer; font-size: var(--cn-text-md); color: var(--cn-ink-soft); }
.cn-adv summary:hover { color: var(--cn-ink); }

/* form: checkbox y ayuda */
.cn-check { display: flex; align-items: center; gap: 8px; font-size: var(--cn-text-md); font-weight: 400; color: var(--cn-ink); height: 36px; }
.cn-check input { width: 16px; height: 16px; }
.cn-hint { font-size: var(--cn-text-xs); color: var(--cn-muted); margin-top: 4px; }

/* lista de checkboxes (oficiales) */
.cn-checklist { display: flex; flex-direction: column; gap: 4px; max-height: 190px; overflow: auto; border: 1px solid var(--cn-border-2); border-radius: var(--cn-radius); padding: 10px 12px; background: var(--cn-surface); }
.cn-checklist .cn-check { height: auto; font-size: var(--cn-text-md); }

/* auditoría */
.cn-audit-ch { max-width: 480px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cn-ink-soft); }
.cn-json { background: var(--cn-bg-soft); border: 1px solid var(--cn-border); border-radius: var(--cn-radius); padding: 10px 12px; font-size: var(--cn-text-sm); overflow: auto; max-height: 260px; white-space: pre; margin: 4px 0 0; }

/* botón "+" compacto */
.cn-btn--plus { font-size: var(--cn-text-xl); font-weight: 700; line-height: 1; padding: 7px 14px; }

/* paginador del listado */
.cn-pager { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 14px; }
.cn-pager span { font-size: var(--cn-text-md); color: var(--cn-ink-soft); }
.cn-pager .cn-btn { padding: 6px 12px; }

/* utilidad: separación superior (reemplaza el style inline de instrumentos.js) */
.cn-mt-lg { margin-top: 18px; }
.cn-mb-md { margin: 0 0 14px; }

/* hub de Usuarios — tres tarjetas-botón */
.cn-hub { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 6px; }
.cn-hubcard {
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
  text-align: left; padding: 22px 20px; cursor: pointer; font-family: inherit;
  text-decoration: none; color: inherit;   /* sirve también como <a> (card-link a Auditoría) */
  min-height: 160px; position: relative;
  background: var(--cn-surface); border: 1px solid var(--cn-border);
  border-radius: var(--cn-radius); box-shadow: var(--cn-shadow);
  transition: box-shadow .15s, border-color .15s, transform .05s;
}
/* text-decoration:none también en :hover: si no, el `a:hover` global (base.css) subraya el texto
   de las cards que son <a> (Auditoría/Marketing) y quedan distintas a las <button>. */
.cn-hubcard:hover { border-color: var(--cn-border-2); box-shadow: var(--cn-shadow-md); text-decoration: none; }
.cn-hubcard:active { transform: translateY(1px); }
.cn-hubcard:focus-visible { outline: 2px solid var(--cn-red); outline-offset: 2px; }
.cn-hubcard__ic { color: var(--cn-red); display: inline-flex; }
.cn-hubcard__ic svg { width: 26px; height: 26px; }
.cn-hubcard__tt { font-size: var(--cn-text-xl); font-weight: 600; color: var(--cn-ink); }
.cn-hubcard__sub { font-size: var(--cn-text-md); color: var(--cn-muted); }
.cn-hubcard__count { margin-top: auto; padding-top: 10px; font-size: var(--cn-text-sm); color: var(--cn-muted); }
.cn-hubcard__count b { font-size: var(--cn-text-2xl); font-weight: 700; color: var(--cn-ink); }
/* Badge de notificación (ej. especies sugeridas pendientes) arriba a la derecha de la card. */
.cn-hubcard__badge { position: absolute; top: 12px; right: 12px; min-width: 20px; height: 20px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--cn-radius-full); background: var(--cn-red); color: #fff; font-size: var(--cn-text-xs); font-weight: 700; line-height: 1; box-shadow: 0 1px 3px rgba(var(--cn-shadow-rgb), .25); }

/* Caja destacada de "Especies sugeridas" (acciones pendientes del admin). */
.cn-sug { margin-top: 18px; background: var(--cn-pendiente-bg); border: 1px solid var(--cn-border); border-left: 3px solid var(--cn-pendiente); border-radius: var(--cn-radius); padding: 14px 16px; }
.cn-sug__h { margin: 0; font-size: var(--cn-text-lg); font-weight: 600; color: var(--cn-ink); display: flex; align-items: center; gap: 8px; }
.cn-sug__n { min-width: 20px; height: 20px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--cn-radius-full); background: var(--cn-red); color: #fff; font-size: var(--cn-text-xs); font-weight: 700; }
.cn-sug__sub { margin: 2px 0 10px; font-size: var(--cn-text-md); color: var(--cn-ink-soft); }

/* Bloque colapsable (import masivo: tarea ocasional, se guarda plegada). */
.cn-collapse { margin: 4px 0 14px; border: 1px solid var(--cn-border); border-radius: var(--cn-radius); background: var(--cn-bg-soft); }
.cn-collapse > summary { cursor: pointer; padding: 10px 14px; font-size: var(--cn-text-base); font-weight: 600; color: var(--cn-ink-soft); list-style: none; }
.cn-collapse > summary::-webkit-details-marker { display: none; }
.cn-collapse > summary::before { content: "▸"; margin-right: 8px; color: var(--cn-muted); }
.cn-collapse[open] > summary::before { content: "▾"; }
.cn-collapse__body { padding: 0 14px 12px; }
#u-back { margin-bottom: 14px; }
@media (max-width: 820px) { .cn-hub { grid-template-columns: 1fr; } }

/* ===== Buscador de fondos (drawer/overlay) — ver BUSCADOR_SPEC.md ===== */
.cn-explora-btn { margin-left: auto; align-self: flex-end; }   /* fila de arriba: pegado a la derecha */
.cn-busc { padding: 24px; }                               /* hereda .cn-modal (overlay fijo + centrado) */
.cn-busc__card {
  background: var(--cn-surface); border-radius: var(--cn-radius-lg); box-shadow: var(--cn-shadow-xl);
  width: 100%; max-width: 980px; height: 90vh; max-height: 90vh;
  display: flex; flex-direction: column; overflow: hidden;
}
.cn-busc__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--cn-border); }
.cn-busc__head .cn-card__title { margin: 0; }
/* Filtros en dos filas: búsqueda ancha arriba; abajo una fila de controles COMPACTOS y parejos
   (flex con base igual + max-width: un valor largo en un option no puede estirar su select). */
.cn-busc__filters { display: flex; flex-direction: column; gap: 10px; padding: 14px 22px; border-bottom: 1px solid var(--cn-border); }
.cn-busc__filters input, .cn-busc__filters select {
  font: inherit; font-size: var(--cn-text-base); padding: 8px 11px; border: 1px solid var(--cn-border-2);
  border-radius: var(--cn-radius); background: var(--cn-surface); color: var(--cn-ink);
}
.cn-busc__search { width: 100%; }
.cn-busc__frow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cn-busc__frow select, .cn-busc__frow input {
  flex: 1 1 0; min-width: 128px; max-width: 200px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Filtro con valor elegido: acento visible para ver de un vistazo qué está filtrando */
.cn-busc__frow .is-set { border-color: var(--cn-red); color: var(--cn-red); font-weight: 600; }
.cn-busc__clear { flex: 0 0 auto; margin-left: auto; }
.cn-busc__body { display: flex; flex: 1; min-height: 0; }
.cn-busc__side { width: 240px; flex: 0 0 240px; overflow-y: auto; border-right: 1px solid var(--cn-border); padding: 10px; }
.cn-busc__gest {
  display: block; width: 100%; text-align: left; font: inherit; font-size: var(--cn-text-md); cursor: pointer;
  border: 0; background: transparent; color: var(--cn-ink-soft); padding: 8px 10px; border-radius: var(--cn-radius-sm);
}
.cn-busc__gest:hover { background: var(--cn-bg-soft); color: var(--cn-ink); }
.cn-busc__gest.is-active { background: var(--cn-bg-soft); color: var(--cn-red); font-weight: 600; }
.cn-busc__main { flex: 1; min-width: 0; overflow-y: auto; padding: 14px 22px; }
.cn-busc__count { margin-bottom: 10px; }
.cn-busc__list { display: flex; flex-direction: column; gap: 6px; }
.cn-busc__item {
  display: flex; align-items: center; gap: 10px; text-align: left; width: 100%; cursor: pointer; font: inherit;
  border: 1px solid var(--cn-border); border-radius: var(--cn-radius); background: var(--cn-surface); padding: 10px 12px;
}
.cn-busc__item:hover { border-color: var(--cn-border-2); background: var(--cn-bg-soft); }
.cn-busc__itxt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.cn-busc__fn { font-weight: 600; color: var(--cn-ink); font-size: var(--cn-text-base); }
.cn-busc__fn .cn-pill { margin-left: 6px; vertical-align: middle; }
/* Estrella de favorito (fila y ficha): outline por defecto; marcada → se llena (currentColor) */
.cn-busc__fav { flex: 0 0 auto; }
.cn-busc__fav.is-on, .cn-busc__favbtn.is-on { color: var(--cn-pendiente); }
.cn-busc__fav.is-on svg path, .cn-busc__favbtn.is-on svg path { fill: currentColor; }
.cn-busc__favbtn { display: inline-flex; align-items: center; gap: 6px; }
/* Encabezado de grupo dentro de "Favoritos" (Recomendados por la mesa / Mis favoritos) */
.cn-busc__sect { font-size: var(--cn-text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--cn-muted); margin: 8px 0 2px; }
.cn-busc__sect:first-child { margin-top: 0; }
/* Entrada "Favoritos" del panel lateral: separada visualmente del resto de las gestoras */
.cn-busc__gest--fav { border-bottom: 1px solid var(--cn-border); border-radius: 6px 6px 0 0; margin-bottom: 6px; }
.cn-busc__ficha { max-width: 620px; }
.cn-busc__back {
  display: inline-flex; align-items: center; font: inherit; font-size: var(--cn-text-sm); cursor: pointer;
  border: 0; background: transparent; color: var(--cn-ink-soft); padding: 2px 0; margin-bottom: 8px;
}
.cn-busc__back:hover { color: var(--cn-red); }
.cn-busc__fname { font-size: var(--cn-text-xl); font-weight: 700; color: var(--cn-ink); margin: 0 0 1px; letter-spacing: -.01em; }
.cn-busc__fsub { font-size: var(--cn-text-md); color: var(--cn-muted); margin-bottom: 10px; }
.cn-busc__dl .cn-dl__row { padding: 5px 0; border-bottom: 1px solid var(--cn-border); }
.cn-busc__dl .cn-dl__row:last-child { border-bottom: 0; }
.cn-busc__act { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--cn-border); }
.cn-busc__act { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cn-busc__act .cn-btn { padding: 11px 22px; }
.cn-busc__act .cn-btn--sm { padding: 9px 14px; }   /* los toggles de favorito/recomendación quedan chicos */
@media (max-width: 820px) {
  .cn-busc__body { flex-direction: column; }
  .cn-busc__side { width: auto; flex: 0 0 auto; max-height: 140px; border-right: 0; border-bottom: 1px solid var(--cn-border); }
  .cn-busc__card { height: 92vh; max-height: 92vh; }
}

/* Cost: lápiz para destrabar el ticket fijo + marca de "editado a mano" (override excepcional) */
.cn-cost { display: flex; align-items: center; gap: 6px; }
.cn-cost input { flex: 1 1 auto; min-width: 0; }
.cn-cost__edit { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--cn-border-2); border-radius: var(--cn-radius); background: var(--cn-surface); color: var(--cn-ink-soft); cursor: pointer; }
.cn-cost__edit:hover { color: var(--cn-manual); border-color: var(--cn-manual); }
.cn-cost input.cn-cost--manual { border-color: var(--cn-manual); background: var(--cn-manual-bg); color: var(--cn-manual); }
.cn-flag-manual { display: inline-block; font-size: var(--cn-text-xs); font-weight: 700; color: var(--cn-manual); background: var(--cn-manual-bg); border-radius: var(--cn-radius-full); padding: 1px 8px; white-space: nowrap; }
.cn-dl__row--manual b { color: var(--cn-manual); }

/* Campanita de notificaciones push en la barra de arriba (push.js). */
.cn-bell { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; background: transparent; color: var(--cn-ink-soft); cursor: pointer; border-radius: var(--cn-radius); }
.cn-bell:hover { background: rgba(0, 0, 0, .06); }
.cn-bell.is-on { color: #b11e2a; }   /* rojo de marca: push activo en este dispositivo */

/* ===== Marketing — repositorio de PDFs descargables (marketing.js) ===== */
.cn-mkt__count { font-size: var(--cn-text-md); color: var(--cn-muted); font-weight: 500; }
.cn-mkt__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 16px; }
/* Acceso a Marketing del lado del nombre (oficial/productor) — barra superior. */
.cn-bar__sidelink { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; border-radius: var(--cn-radius-full); font-size: var(--cn-text-md); font-weight: 600; color: var(--cn-red); background: var(--cn-rechazada-bg); border: 1px solid transparent; transition: background .15s, border-color .15s, color .15s; }
.cn-bar__sidelink:hover { text-decoration: none; border-color: var(--cn-red); }
.cn-bar__sidelink.is-active { background: var(--cn-red); color: #fff; }
.cn-mkt-card { display: flex; flex-direction: column; background: var(--cn-surface); border: 1px solid var(--cn-border); border-radius: var(--cn-radius); padding: 18px; box-shadow: var(--cn-shadow); transition: box-shadow .15s, border-color .15s, transform .15s; }
.cn-mkt-card:hover { border-color: var(--cn-border-2); box-shadow: var(--cn-shadow-md); transform: translateY(-2px); }
.cn-mkt-card__icon { width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--cn-radius-lg); background: var(--cn-rechazada-bg); color: var(--cn-red); margin-bottom: 14px; }
.cn-mkt-card__icon svg { width: 24px; height: 24px; }
.cn-mkt-card__body { flex: 1 1 auto; }
.cn-mkt-card__title { font-size: var(--cn-text-lg); font-weight: 600; line-height: 1.3; margin: 0 0 4px; word-break: break-word; }
.cn-mkt-card__meta { font-size: var(--cn-text-sm); color: var(--cn-muted); }
.cn-mkt-card__actions { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.cn-mkt-card__actions .cn-btn { flex: 1 1 auto; text-align: center; }
/* Tablet/celular grande: 2 columnas (evita el salto brusco a 1) y toolbar en fila (no apilada). */
@media (max-width: 820px) {
  .cn-mkt__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cn-mkt .cn-toolbar { flex-direction: row; align-items: center; }
  .cn-mkt .cn-toolbar .cn-btn { width: auto; }
  .cn-mkt__upload { flex: 0 0 auto; }
}
@media (max-width: 640px) {
  .cn-mkt__grid { grid-template-columns: 1fr; }
  /* En celular chico: toolbar apilada y botón "Subir PDF" a ancho completo, cómodo. */
  .cn-mkt .cn-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
  .cn-mkt__upload, .cn-mkt__upload .cn-btn { width: 100%; }
  .cn-mkt-card { padding: 16px; }
}

/* ===== Accesibilidad (U4) =====
   Foco de teclado UNIFICADO: anillo bordó visible SOLO al navegar con teclado (:focus-visible → no
   aparece al click de mouse, así que no cambia el look en uso normal). Cubre los interactivos que no
   tenían indicación de foco propia (botones, tabs, chips, ícono-botones, nav, cerrar drawer, toggles
   Buy/Sell, ítems del aviso, summaries colapsables). Las tarjetas ya tenían su propio :focus-visible. */
.cn-btn:focus-visible,
.cn-tab:focus-visible,
.cn-chip:focus-visible,
.cn-iconbtn:focus-visible,
.cn-bar__nav a:focus-visible,
.cn-bar__sidelink:focus-visible,
.cn-bar__burger:focus-visible,
.cn-drawer__close:focus-visible,
.cn-side button:focus-visible,
.cn-alert__item:focus-visible,
.cn-filterbox__toggle:focus-visible,
.cn-msgbox > summary:focus-visible,
.cn-adv summary:focus-visible,
.cn-collapse > summary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--cn-red-rgb), .35);
}

/* Respeto de "reducir movimiento" (WCAG 2.3.3): quien lo pide a nivel SO no ve transiciones/animaciones.
   No cambia nada para el resto. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}