/* ============================================================
   css/herramientas.css — sección «Herramientas» (2026-09-12)
   ------------------------------------------------------------
   Mockup elegido por Fernando: variante B (docs/design/direcciones/herramientas-2026-09-B*.html).
   Portado con clases definitivas `.herr-*` (launcher) y `.ndp-*` (pantalla de la herramienta
   «Exportar NDP B2B»). Reusa del sistema global (app.css/tokens.css) todo lo que ya existe:
   `.group`/`.group-hd`/`.chip`/`.btn*`/`.switch`/`.spinner*` — acá solo lo que es EXCLUSIVO de
   esta sección (§4.1 nº6, un dato/una regla, un lugar).
   ============================================================ */

/* ---- Launcher (#/herramientas) ---- */
.herr-row {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: 64px; padding: 10px 12px; color: inherit; text-decoration: none;
}
.herr-row + .herr-row { border-top: 1px solid var(--border); }
.herr-row .icon-cell {
  width: 38px; height: 38px; border-radius: 10px; flex: 0 0 38px;
  display: flex; align-items: center; justify-content: center;
  background: var(--blue-soft); color: var(--blue-text);
}
.herr-row.is-soon .icon-cell { background: var(--gray-soft); color: var(--text-3); }
.herr-row.is-soon { cursor: default; }
.herr-row .txt { flex: 1; min-width: 0; }
.herr-name { font-size: var(--fs-body); font-weight: 700; letter-spacing: -.01em; }
.herr-desc { font-size: var(--fs-sm); color: var(--text-2); line-height: 1.35; margin-top: 2px; }
.herr-row .chev { color: var(--text-3); flex-shrink: 0; }

/* ---- Pantalla de la herramienta (#/herramientas/ndp-b2b) ---- */
.ndp-stack { display: flex; flex-direction: column; gap: var(--sp-4); }
/* Desktop ≥900px: opciones a la izquierda (máx 640) + "Últimos exports" en rail (320) — mismo
   patrón `rail2` del mockup, nombre propio para no chocar con otras grillas de la app. */
.ndp-layout { display: flex; flex-direction: column; gap: var(--sp-4); align-items: start; }
@media (min-width: 900px) {
  .ndp-layout { display: grid; grid-template-columns: minmax(0, 640px) 320px; gap: var(--sp-5); }
}

.ndp-opt {
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding: var(--sp-4); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
}
.ndp-opt-hd {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-3);
}
.ndp-fld label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.ndp-fld .ndp-help { font-size: 12px; color: var(--text-3); margin-top: 6px; line-height: 1.35; }
.ndp-in {
  display: flex; align-items: center; width: 100%; box-sizing: border-box;
  min-height: 44px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--bg-app); color: var(--text-1); font-size: var(--fs-body); font: inherit;
}
.ndp-in::placeholder { color: var(--text-3); }
input.ndp-in[type="number"] { -moz-appearance: textfield; }
.ndp-pct { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }

/* Nota fija del MAX (texto exacto del contrato) — mismo lenguaje visual que `.alert-banner warn`
   del resto de la app, con las variables ámbar que ya trae tokens.css. */
.ndp-nota {
  display: flex; gap: 10px; padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--yellow-soft); border: 1px solid var(--yellow-border); color: var(--yellow-text);
  font-size: 12.5px; line-height: 1.4;
}
.ndp-nota svg { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; }

/* Selector múltiple genérico (Rubros, Talles — H10, 2026-09-12) — control de una línea + popover
   con buscador y casillas. Reemplazó a la nube de chips detrás de un `<details>`: Fernando la vio
   en prod y pidió "algo más sutil como un filtro desplegable que se puedan tildar o destildar".
   UNA sola definición de estilos para las dos instancias (`.ndp-sel-*`, §4.1 nº6 — el componente
   JS es `crearSelectorMultiple()` en herramienta-ndp.js). El control tiene el mismo look que
   `.ndp-in` (caja de 44px); el popover cuelga de `.ndp-sel-wrap` (position:relative — ningún
   ancestro de `.ndp-opt` recorta overflow, así que no hace falta montarlo en `document.body` como
   `.fchip-pop`). */
.ndp-sel-wrap { position: relative; }
.ndp-sel-ctl {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  width: 100%; box-sizing: border-box; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg-app);
  color: var(--text-1); font-size: var(--fs-body); font: inherit; text-align: left; cursor: pointer;
}
.ndp-sel-ctl:hover { border-color: var(--text-4); }
.ndp-sel-ctl[aria-expanded="true"] { border-color: var(--blue-border); }
.ndp-sel-ctl .chev { flex-shrink: 0; transition: transform var(--t-fast) var(--ease); }
.ndp-sel-ctl[aria-expanded="true"] .chev { transform: rotate(90deg); }
.ndp-sel-resumen { font-weight: 500; color: var(--text-2); }
/* "Ninguno" tildado ⇒ no hay nada que exportar — mismo lenguaje de alerta suave que el resto de
   la app (§4.1 nº8: el hueco no se pinta con el color de la buena noticia). */
.ndp-sel-resumen.is-none { color: var(--red-text); font-weight: 600; }

.ndp-sel-pop {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: var(--z-popover);
  display: flex; flex-direction: column; max-height: 320px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--sh-2); overflow: hidden;
}
.ndp-sel-pop-hd {
  flex: 0 0 auto; display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-2); border-bottom: 1px solid var(--border);
}
.ndp-sel-buscar {
  display: flex; align-items: center; width: 100%; box-sizing: border-box;
  min-height: 40px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--bg-app); color: var(--text-1); font-size: var(--fs-sm); font: inherit;
}
.ndp-sel-buscar::placeholder { color: var(--text-3); }
.ndp-sel-acc { display: flex; align-items: center; gap: var(--sp-3); padding: 0 2px; }
.ndp-sel-link {
  padding: 4px 0; border: 0; background: none; color: var(--blue-text);
  font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.ndp-sel-link:hover { text-decoration: underline; }
.ndp-sel-lista { flex: 1 1 auto; overflow-y: auto; padding: var(--sp-2); }
.ndp-sel-row {
  position: relative; display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 8px; border-radius: var(--r-sm); cursor: pointer;
}
.ndp-sel-row:hover { background: var(--surface-2); }
.ndp-sel-row.active { background: var(--blue-soft); }
.ndp-cb {
  flex: 0 0 18px; width: 18px; height: 18px; border-radius: 5px;
  border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center;
  color: #fff; box-sizing: border-box;
}
.ndp-sel-row.active .ndp-cb { background: var(--blue-solid); border-color: var(--blue-solid); }
.ndp-sel-nombre { flex: 1; min-width: 0; font-size: 13.5px; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ndp-sel-row.active .ndp-sel-nombre { color: var(--blue-text); font-weight: 600; }
.ndp-sel-n { font-size: 11.5px; font-weight: 600; color: var(--text-3); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.ndp-sel-row.active .ndp-sel-n { color: var(--blue-text); }
.ndp-sel-vacio { padding: var(--sp-2) 4px; font-size: 13px; color: var(--text-3); }
@media (pointer: coarse) { .ndp-sel-row::after { content: ""; position: absolute; inset: -4px 0; } }

.ndp-sel-fuente { font-size: 12px; color: var(--text-3); margin: 6px 0 0; }

.ndp-tog { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 44px; }
.ndp-tog .ndp-tog-txt { font-size: var(--fs-sm); font-weight: 500; color: var(--text-1); }
.ndp-tog .ndp-help { margin-top: 2px; }

/* Estado (idle/generando/listo/error/en_curso/cooldown) — un solo `.ndp-st` visible a la vez. */
.ndp-st {
  display: flex; gap: var(--sp-3); align-items: flex-start; padding: 14px 16px;
  border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface);
}
.ndp-st .ndp-ic {
  width: 36px; height: 36px; border-radius: 10px; flex: 0 0 36px;
  display: flex; align-items: center; justify-content: center;
}
.ndp-st.is-ok .ndp-ic { background: var(--green-soft); color: var(--green-text); }
.ndp-st.is-run .ndp-ic { background: var(--blue-soft); color: var(--blue-text); }
.ndp-st.is-bad .ndp-ic { background: var(--red-soft); color: var(--red-text); }
.ndp-st.is-wait .ndp-ic { background: var(--gray-soft); color: var(--text-2); }
.ndp-st b { font-weight: 700; }
.ndp-st .ndp-sub { font-size: 12.5px; color: var(--text-2); margin-top: 2px; line-height: 1.35; }
.ndp-st .ndp-body { flex: 1; min-width: 0; }

/* «Últimos exports» — mismo patrón que `.group.emails-group` de la ficha (§4.1 nº6: filas
   texto/chip/botón), clases propias para no acoplar dos features que hoy se parecen pero no son
   la misma. */
.ndp-ult .ndp-row { display: flex; align-items: center; gap: var(--sp-3); padding: 12px 14px; min-height: 60px; }
.ndp-ult .ndp-row + .ndp-row { border-top: 1px solid var(--border); }
.ndp-ult .ndp-row .txt { flex: 1; min-width: 0; }
.ndp-ult .l1 { font-size: 13.5px; font-weight: 600; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ndp-ult .l1 .code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; font-weight: 500; color: var(--text-3); }
.ndp-ult .l2 { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.ndp-ult .ndp-chips-row { margin-top: 6px; gap: 6px; }
.ndp-ult .ndp-rot { font-size: 12px; color: var(--text-3); flex-shrink: 0; }
.ndp-vacio { font-size: var(--fs-sm); color: var(--text-2); margin: 0; padding: 12px 14px; }

@media (min-width: 900px) {
  .ndp-rail { position: sticky; top: var(--sp-4); }
}

/* Condiciones comerciales de la cuenta elegida (ADR-033 §4.1/§5, 2026-09-16) — el bloque que
   aparece debajo de las celdas de descuento al elegir cliente: precarga, radios de no acumulables,
   e informativas/programadas. Fondo `--surface-2` (neutro: no es una alerta, es información) y los
   textos en `--text-1`/`--text-2` — sin color nuevo. El error de carga usa `--red-text` (AA sobre
   surface en los dos temas, tokens.css). */
.ndp-cond { display: flex; flex-direction: column; gap: 8px; }
.ndp-cond-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px;
  padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface-2);
  font-size: 12.5px; line-height: 1.45; color: var(--text-2);
}
.ndp-cond-row b { color: var(--text-1); font-weight: 600; }
.ndp-cond-lbl { flex-basis: 100%; color: var(--text-1); font-weight: 500; }
.ndp-cond-elegir { flex-direction: column; align-items: stretch; }
.ndp-cond-radio { display: flex; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; color: var(--text-1); }
.ndp-cond-radio input { width: 18px; height: 18px; flex-shrink: 0; margin: 0; }
.ndp-cond-lista { flex-direction: column; align-items: stretch; }
.ndp-cond-lista ul { margin: 0; padding-left: 18px; }
.ndp-cond-lista li { margin: 2px 0; }
.ndp-cond-vacio { color: var(--text-3); }
/* CC12 — descuentos-REGLA («Las aplica Administración al facturar»): texto largo que ENVUELVE (una
   regla es una instrucción, cortarla sería cambiarla) y el chip rojo de conflicto alineado con él.
   Sin color nuevo: `.chip.red` trae su propio fondo `--red-soft`, ya medido en los dos temas. */
.ndp-cond-regla { overflow-wrap: anywhere; }
.ndp-cond-regla .chip { vertical-align: middle; }
/* El chip «Conflicto» hereda `.chip.red` (soft translúcido + `--red-text`), calibrado para la ficha. Sobre la
   tarjeta del NDP (`--surface-2`) el alfa compuesto da 3,49:1 en oscuro y 4,35 en claro (medido 16/9, misma
   lección que `.ndp-cond-error`): el fondo pasa a `--surface`, que es lo que devuelve el chip a AA. */
.ndp-cond-regla .chip.red { background: var(--surface); }
/* El error va sobre `--surface` (no `--surface-2`): `--red-text` sobre surface-2 en oscuro da 4,02:1
   (medido); sobre surface, 4,94. */
.ndp-cond-error { color: var(--red-text); background: var(--surface); border: 1px solid var(--red-border); }