/* =============================================================
   Kit de bandeja (.bj-) — js/ui/bandeja.js
   Una fila, un grupo, una antigüedad para todas las bandejas de trabajo.
   Tonos: aviso (ámbar) · info (azul) · alerta (rojo) · listo (verde) · neutro.

   Tokens con respaldo: el home usa ceco-command.css (--surface, --line,
   --r-lg…) y el resto ceco-ui.css (--surface-card, --border-default,
   --radius-md…). Cada var() cae al otro nombre y luego a un literal, para
   que el kit se vea igual en las dos familias de páginas.
   ============================================================= */
:root {
  --bj-surface: var(--surface-card, var(--surface, #ffffff));
  --bj-sunken:  var(--surface-sunken, var(--gray-100, #EEF2F6));
  --bj-line:    var(--border-default, var(--line, #DDE4EB));
  --bj-line-soft: var(--border-subtle, var(--line-soft, #EEF2F6));
  --bj-radius:  var(--radius-md, var(--r-md, 6px));
  --bj-pill:    var(--radius-pill, var(--r-pill, 999px));
  --bj-accent:  var(--accent, #0091D7);
  --bj-accent-soft: var(--accent-soft, #E6F4FB);
  --bj-fg-1: var(--fg-1, #0E1418);
  --bj-fg-2: var(--fg-2, #2F3942);
  --bj-fg-3: var(--fg-3, #6B7884);
  --bj-fg-4: var(--fg-4, #9AA7B4);
  --bj-mono: var(--font-mono, var(--mono, ui-monospace, monospace));
  --bj-sp-3: var(--sp-3, 12px);
  --bj-sp-5: var(--sp-5, 20px);
  --bj-sp-6: var(--sp-6, 24px);
}

.bj-grupo { margin-bottom: var(--bj-sp-5); }
.bj-grupo-t {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--bj-fg-3); margin: 0 0 8px;
}
.bj-grupo-t .bj-n {
  background: var(--bj-sunken); border-radius: 999px; padding: 0 8px;
  font-size: 11px; letter-spacing: 0;
}

/* La fila */
.bj-row {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  background: var(--bj-surface); border: 1px solid var(--bj-line);
  border-radius: var(--bj-radius); padding: 8px 12px; margin-bottom: 6px;
}
.bj-row.is-off { opacity: .62; }
.bj-txt { flex: 1; min-width: 0; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bj-txt b { font-weight: 600; }
.bj-txt .bj-sub { display: block; font-size: 12px; color: var(--bj-fg-3); overflow: hidden; text-overflow: ellipsis; }
.bj-id { font-family: var(--bj-mono); font-size: 12px; color: var(--bj-accent); }

.bj-chip {
  flex: none; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 9px;
  white-space: nowrap;
}
.bj-chip--aviso  { background: #FEF3C7; color: #92400E; }
.bj-chip--info   { background: #EFF6FF; color: #1E3A8A; }
.bj-chip--alerta { background: #FEF2F2; color: #991B1B; }
.bj-chip--listo  { background: #ECFDF5; color: #065F46; }
.bj-chip--neutro { background: var(--bj-sunken); color: var(--bj-fg-3); }
/* Etiqueta pequeña dentro de la fila (pospuesto, en curso…): mismo tono, menos peso. */
.bj-tag { flex: none; font-size: 11px; font-weight: 500; border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.bj-tag.bj-chip--aviso  { background: #FEF3C7; color: #92400E; }
.bj-tag.bj-chip--info   { background: #E6F4FC; color: #005781; }
.bj-tag.bj-chip--alerta { background: #FEF2F2; color: #991B1B; }
.bj-tag.bj-chip--listo  { background: #ECFDF5; color: #065F46; }
.bj-tag.bj-chip--neutro { background: var(--bj-sunken); color: var(--bj-fg-3); }

.bj-age { flex: none; font-size: 12px; color: var(--bj-fg-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bj-age.warn { color: #92400E; font-weight: 600; }
.bj-age.bad  { color: #991B1B; font-weight: 600; }

.bj-cta { flex: none; white-space: nowrap; }
/* CTA cuando la página no carga el kit de botones de ceco-ui (home). */
.bj-cta.bj-cta--plano {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  padding: 4px 10px; border-radius: var(--bj-radius); border: 1px solid var(--bj-line);
  background: var(--bj-sunken); text-decoration: none; color: inherit;
}
.bj-cta.bj-cta--plano:hover { border-color: var(--bj-accent); color: var(--bj-accent); }
/* Botón de texto (tomar · soltar · posponer · reactivar). */
.bj-btn-txt {
  flex: none; font: inherit; font-size: 11.5px; background: none; border: none; cursor: pointer;
  color: var(--bj-fg-3); text-decoration: underline; padding: 2px 4px;
}
.bj-btn-txt:disabled { opacity: .5; cursor: default; }

.bj-mas { font-size: 12.5px; margin: 2px 0 0 4px; }
.bj-nota { font-size: 12px; color: var(--bj-fg-3); margin: 4px 0 0 4px; }
.bj-pie { padding: 8px 14px; font-size: 12px; color: var(--bj-fg-3); background: var(--bj-sunken); }
.bj-eq {
  display: inline-block; margin: 0 4px 0 0; padding: 0 7px;
  background: var(--bj-sunken); border: 1px solid var(--bj-line-soft);
  border-radius: var(--bj-pill); font-size: 12px; white-space: nowrap;
}
.bj-aviso {
  display: flex; align-items: center; gap: 8px; margin-bottom: var(--bj-sp-3);
  padding: 9px 12px; border-radius: var(--bj-radius); font-size: 13px;
  background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA;
}
.bj-vacio { text-align: center; color: var(--bj-fg-3); padding: var(--bj-sp-6); }
.bj-vacio svg { width: 34px; height: 34px; color: #16A34A; }
.bj-vacio p { margin: 8px 0 0; }

/* Panel: tarjeta con encabezado (título · contador · enlace) y filas dentro.
   Las filas dentro de un panel van sin borde propio, separadas por línea. */
.bj-panel {
  margin: 10px 0 4px; border: 1px solid var(--bj-line); border-radius: 10px;
  background: var(--bj-surface); overflow: hidden;
}
.bj-panel-h {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  font-size: 13px; font-weight: 700; border-bottom: 1px solid var(--bj-line-soft);
}
.bj-panel-h .bj-n { background: var(--bj-sunken); border-radius: 999px; padding: 0 8px; font-size: 12px; font-weight: 600; }
.bj-panel-h a { margin-left: auto; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.bj-panel .bj-row, .bj-lista .bj-row {
  border: 0; border-bottom: 1px solid var(--bj-line-soft); border-radius: 0; margin: 0; padding: 8px 14px;
}
.bj-panel .bj-row:last-child { border-bottom: 0; }

/* Esqueleto de carga (shimmer) con la forma de la fila. */
.bj-skel {
  background: linear-gradient(90deg, var(--bj-sunken) 25%, var(--bj-line-soft) 50%, var(--bj-sunken) 75%);
  background-size: 200% 100%; animation: bjshimmer 1.2s infinite; border-radius: 6px;
}
.bj-skel--chip { width: 64px; height: 18px; border-radius: 999px; flex: none; }
.bj-skel--l1 { width: 55%; height: 12px; }
.bj-skel--l2 { width: 32%; height: 12px; }
@keyframes bjshimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .bj-skel { animation: none; } }

/* Lista seleccionable (cola con un ítem abierto al lado) */
.bj-lista {
  background: var(--bj-surface); border: 1px solid var(--bj-line);
  border-radius: var(--bj-radius); overflow: hidden;
}
.bj-lista-h {
  display: flex; justify-content: space-between; padding: 9px 14px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--bj-fg-3); border-bottom: 1px solid var(--bj-line-soft); background: var(--bj-sunken);
}
.bj-lista-h + .bj-lista-h, .bj-item + .bj-lista-h, .bj-lista-vacia + .bj-lista-h { border-top: 1px solid var(--bj-line); }
.bj-item {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; width: 100%; text-align: left;
  padding: 10px 14px; border: 0; border-bottom: 1px solid var(--bj-line-soft);
  background: transparent; cursor: pointer; font: inherit; color: inherit;
}
.bj-item:hover { background: var(--bj-sunken); }
.bj-item.is-on { background: var(--bj-accent-soft); box-shadow: inset 3px 0 0 var(--bj-accent); }
.bj-item:focus-visible { outline: 2px solid var(--bj-accent); outline-offset: -2px; }
.bj-item-t { font-weight: 600; color: var(--bj-fg-1); }
.bj-item-n { font-family: var(--bj-mono); font-size: 12px; color: var(--bj-fg-3); font-variant-numeric: tabular-nums; }
.bj-item-n.ok { color: #065F46; }
.bj-item-s { grid-column: 1 / -1; font-size: 12px; color: var(--bj-fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bj-lista-vacia { margin: 0; padding: 18px 14px; font-size: 13px; color: var(--bj-fg-3); }

/* =============================================================
   Barra de bandeja (2026-10-09) — UNA barra para todas las bandejas:
   buscador · filtros con conteo · Mías · secundarios (select) a la derecha.
   El chip es el de Órdenes ("el estado es la única voz de color"): el punto
   lleva el tono, el activo engrosa el borde y toma el tono suave; "Todas"
   activo se pinta oscuro. Reemplaza .estado-chip, .fb-chip, .cm-chip,
   .rg-chip, .cg-filtro, .filter-chip y .cc-seg (siete copias).
   ============================================================= */
.bj-barra {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--bj-line-soft);
}
.bj-barra .push { flex: 1; }
.bj-barra .form-input, .bj-barra .form-select, .bj-barra input[type="search"], .bj-barra select { height: 30px; font-size: 13px; }
.bj-barra input[type="search"] { max-width: 240px; }
.bj-buscar { position: relative; display: inline-flex; align-items: center; }
.bj-buscar svg { position: absolute; left: 9px; width: 14px; height: 14px; color: var(--bj-fg-4); pointer-events: none; }
.bj-buscar input { padding-left: 29px; }

.bj-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bj-filtro {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
  border-radius: var(--bj-pill); border: 1px solid var(--bj-line);
  background: var(--bj-surface); color: var(--bj-fg-2);
  font: 500 13px/1 var(--font-body, "Inter", system-ui, sans-serif);
  cursor: pointer; white-space: nowrap; user-select: none;
  transition: background var(--dur-fast, 120ms) ease, border-color var(--dur-fast, 120ms) ease, color var(--dur-fast, 120ms) ease;
}
.bj-filtro:hover { background: var(--bj-accent-soft); border-color: var(--bj-accent); }
.bj-filtro:focus-visible { outline: none; box-shadow: var(--ring-focus, 0 0 0 3px rgba(0, 145, 215, .30)); }
.bj-filtro .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; background: var(--bj-fg-4); }
.bj-filtro .cnt {
  margin-left: 2px; padding: 0 6px; height: 18px; min-width: 22px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 11px; font-weight: 600;
  border-radius: 999px; background: rgba(0, 0, 0, .06); font-variant-numeric: tabular-nums;
}
.bj-filtro.active { font-weight: 600; border-width: 1.5px; color: var(--bj-fg-1); }
.bj-filtro--all.active { background: var(--bj-fg-1); color: #fff; border-color: var(--bj-fg-1); }
.bj-filtro--all.active .cnt { background: rgba(255, 255, 255, .20); color: #fff; }
/* Tonos del kit (los mismos cinco de .bj-chip) */
.bj-filtro--alerta .dot { background: #DC2626; }
.bj-filtro--aviso  .dot { background: #D97706; }
.bj-filtro--info   .dot { background: #2563EB; }
.bj-filtro--listo  .dot { background: #16A34A; }
.bj-filtro--neutro .dot { background: var(--bj-fg-4); }
.bj-filtro--alerta.active { background: #FEF2F2; border-color: #DC2626; color: #991B1B; }
.bj-filtro--aviso.active  { background: #FFFBEB; border-color: #D97706; color: #92400E; }
.bj-filtro--info.active   { background: #EFF6FF; border-color: #2563EB; color: #1E3A8A; }
.bj-filtro--listo.active  { background: #ECFDF5; border-color: #16A34A; color: #065F46; }
.bj-filtro--neutro.active { background: var(--bj-sunken); border-color: var(--bj-fg-4); color: var(--bj-fg-2); }
/* Un <select> con forma de chip (vendedor, período…) */
.bj-filtro--sel {
  appearance: none; -webkit-appearance: none; padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7884' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center;
}
/* Segmento: dos o tres chips pegados (Contratos | Gestiones) */
.bj-seg { display: inline-flex; border: 1px solid var(--bj-line); border-radius: var(--bj-pill); overflow: hidden; background: var(--bj-surface); }
.bj-seg .bj-filtro { border: 0; border-radius: 0; }
.bj-seg .bj-filtro.active { background: var(--bj-fg-1); color: #fff; }

/* "Mías": el mismo interruptor en todas las bandejas con dueño (Órdenes,
   Cotizaciones, Centro). Es un chip con casilla; .active o :has(:checked). */
.bj-mias { position: relative; }
.bj-mias input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.bj-mias::before {
  content: ""; width: 13px; height: 13px; flex: none; border-radius: 4px;
  border: 1.5px solid currentColor; background: transparent; box-sizing: border-box;
}
.bj-mias.active, .bj-mias:has(input:checked) { background: var(--bj-accent-soft); border-color: var(--bj-accent); color: #005781; font-weight: 600; }
.bj-mias.active::before, .bj-mias:has(input:checked)::before {
  background: var(--bj-accent) currentColor;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 11px; background-position: center; background-repeat: no-repeat; border-color: var(--bj-accent);
}
.bj-mias:has(input:focus-visible) { box-shadow: var(--ring-focus, 0 0 0 3px rgba(0, 145, 215, .30)); }

@media (max-width: 640px) {
  .bj-barra { flex-wrap: nowrap; overflow-x: auto; margin: 0 -10px 10px; padding: 0 10px 10px; scrollbar-width: none; }
  .bj-barra::-webkit-scrollbar { display: none; }
  .bj-barra .push { display: none; }
  .bj-filtros { flex-wrap: nowrap; }
}