/* ═══════════════════════════════════════════════════════════════════════════════
   board.css — GEMELO VANILLA de `Board` (familia Board + Column) — v1.0 · 2026-08-24

   FUENTE ÚNICA: `catalogo-cd/components/Board.jsx` ·
   Ficha: `design-system/COMPONENTE_BOARD.md` v0.1.
   Cada regla de aquí es la MISMA de allí, con las MISMAS medidas. Si difieren, manda el kit.

   El tablero horizontal de etapas del módulo Operación (Centro de Mando): una fila de columnas
   con scroll, cada columna una etapa del pipeline, y dentro una pila de tarjetas de prospecto.
   Cosecha #1 del censo de las 3 apps, de `.oc-*` (backoffice-3.js, handoff CRM v2).

   ⛔ LA TARJETA NO ES DE AQUÍ. Reusa el gemelo `componentes/card/card.css` (montado con
   `data-interactive` para el hover/activo/foco) — este archivo SOLO añade lo que hace a una
   tarjeta de tablero distinta de una Card suelta: el radio compacto y el fondo de "Perdido".
   Redibujar aquí lo que ya resuelve Card sería el defecto contrario al que existe `card.css`.

   REQUISITOS DEL ANFITRIÓN:
     1. Los tokens del canon (`colors_and_type.css`).
     2. `box-sizing: border-box`.
     3. El gemelo de `componentes/card/card.css` montado en cada tarjeta (`.exds-card`), más
        `componentes/badge/badge.css` (conteo, antigüedad, "Perdido") y `componentes/avatar/`
        (responsable) — Board los MONTA, no los redibuja (ver ficha § Composición).
   ═══════════════════════════════════════════════════════════════════════════════ */

.exds-board {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
  align-items: flex-start;
}

.exds-bcol {
  flex: 0 0 236px;
}

.exds-bcol-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px 10px;
}

.exds-bcol-title {
  font: 600 var(--fs-body, 14px) var(--font-sans, "Inter", -apple-system, "system-ui", sans-serif);
  color: var(--fg1, #0F1419);
}

.exds-bcol-count {
  margin-left: auto;
}

.exds-bstack {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.exds-bempty {
  border: 1px dashed var(--color-border-subtle, #E5E7EB);
  /* ⛔ 10 → 12 EL 2026-08-26 · `lint_radio_caja` (relleno 14–18 → 12). Sube, no baja: con 18
     px de acolchado la esquina de 10 se leía demasiado apretada para la caja. */
  border-radius: var(--radius-container, 12px);
  padding: 18px 12px;
  text-align: center;
  color: var(--fg3, #5C6B7A);
  font: 400 var(--fs-body-sm, 13px) var(--font-sans, "Inter", -apple-system, "system-ui", sans-serif);
}

/* La tarjeta de tablero: radio compacto (10, no el 16 de una Card suelta) — lo único que Board
   le cambia a la Card que monta. Todo lo demás (fondo, borde, sombra, hover, activo, foco) lo
   resuelve `card.css` sobre `.exds-card[data-interactive]`.

   ⛔ AQUÍ HABÍA UN SEGUNDO CAMBIO Y SE RETIRÓ EL 2026-08-25: el fondo teñido de la tarjeta
   perdida (`[data-lost="true"] { background: --color-error-tint }`).
   `DECISION-FUENTE: Ricardo, 2026-08-25 — «No quiero rellenos de color, ya que nuestro diseño es
   limpio… el color rojo existe en el contador que está arriba de las tarjetas, en el encabezado
   de la columna del Kanban»` (opción B: acento mínimo).
   El estado lo dicen la COLUMNA —su título «Perdidos», su contador rojo y su punto—, el motivo
   en `--color-error` y la línea «Etapa de origen», que sólo existe en las tarjetas perdidas.
   Es la regla de la REDUNDANCIA (`JERARQUIA_Y_ACCESIBILIDAD.md` §4): la columna ya lo dice y
   TODAS sus tarjetas comparten el estado, así que repetirlo en cada una no informa.
   Medido antes de retirarlo: la tarjeta NO se monta fuera de su columna, y donde el registro sí
   aparece fuera (tabla y cajón de detalle) el estado ya va en PALABRAS, no en color. */
.exds-board .exds-card[data-bcard] {
  border-radius: var(--radius-md, 10px);

  /* ⛔ EL RELLENO SE DICE AQUÍ, Y ES UNA DECISIÓN, NO UN DEFAULT (2026-08-26).
     `DECISION-FUENTE: Ricardo, 2026-08-26 — «3 decisiones: tus recomendaciones aprobadas»`,
     decisión 1 de `plans/antes_despues/_AD_GLOBAL_PASO_9.html`. Expediente con las tres
     salidas medidas: `plans/antes_despues/_G_dec_relleno_tablero_2026-08-26.html`;
     antes/después: `plans/antes_despues/_ad_relleno_tablero_2026-08-26.html`.

     Hasta el 25-ago la tarjeta tenía relleno propio (13 px arriba, 15 a los lados). La
     homologación a Card de esa noche se lo quitó y NO puso nada en su lugar, así que pasó a
     heredar los 24 px por defecto de `card.css` y el tablero se aireó sin que nadie lo
     decidiera. *Un valor que aparece porque una regla se cayó no es un default: es un
     descuido con aspecto de default.*

     14 es el promedio exacto del original (13/15), es un escalón real de la escala
     (`--space-3-5`) y devuelve al tablero su densidad. Medido en la hoja de antes/después:
     tres tarjetas apiladas pasan de 24 px de relleno a 14 y recuperan el alto que tenían.

     ⛔ NO SE TOCA `card.css`: los 24 px siguen siendo el valor de cualquier otra tarjeta del
     sistema. La pieza ya trae la perilla; el tablero sólo le dice su número, que es
     justamente para lo que la perilla existe (ver el porqué en `card.css`). */
  --card-padding: var(--space-3-5, 14px);
}

.exds-bmeta {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 7px;
}

.exds-btype {
  margin-left: auto;
  font: 500 var(--fs-eyebrow, 11px) var(--font-sans, "Inter", -apple-system, "system-ui", sans-serif);
  color: var(--fg3, #5C6B7A);
}

.exds-bname {
  font: 600 var(--fs-body, 14px) var(--font-sans, "Inter", -apple-system, "system-ui", sans-serif);
  color: var(--fg1, #0F1419);
  margin: 0 0 1px;
}

.exds-bmail {
  font: 400 var(--fs-caption, 12px) var(--font-sans, "Inter", -apple-system, "system-ui", sans-serif);
  color: var(--fg2, #4B5563);
  margin: 0 0 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.exds-bsub {
  font: 400 var(--fs-caption, 12px) var(--font-sans, "Inter", -apple-system, "system-ui", sans-serif);
  color: var(--fg3, #5C6B7A);
  margin: 0 0 8px;
}

.exds-bprod {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 400 var(--fs-caption, 12px) var(--font-sans, "Inter", -apple-system, "system-ui", sans-serif);
  color: var(--fg2, #4B5563);
  margin: 0 0 9px;
}

.exds-bfolio {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  color: var(--fg3, #5C6B7A);
}

.exds-bfoot {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border-subtle, #E5E7EB);
}

.exds-bresp {
  font: 500 var(--fs-caption, 12px) var(--font-sans, "Inter", -apple-system, "system-ui", sans-serif);
  color: var(--fg2, #4B5563);
}
.exds-bresp.none {
  color: var(--fg3, #5C6B7A);
  font-style: italic;
}

.exds-bnone {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px dashed var(--color-border-default, #D1D5DB);
  flex-shrink: 0;
  display: inline-block;
}

.exds-blost-reason {
  font: 600 var(--fs-eyebrow, 11px) var(--font-sans, "Inter", -apple-system, "system-ui", sans-serif);
  color: var(--color-error, #DA342B);
  margin: 6px 0 0;
}

/* Entrada del tablero: cascada de la pila visible al montar, una sola vez (papel 4). Las
   columnas fuera de vista no animan hasta acercarse — o no animan: es cromo de trabajo. */
@media (prefers-reduced-motion: no-preference) {
  .exds-card[data-bcard] {
    animation: exds-brise var(--motion-base, 250ms) var(--ease-emphasis, cubic-bezier(0.34, 1.26, 0.58, 1)) both;
  }
  .exds-bstack .exds-card[data-bcard]:nth-child(2) { animation-delay: .045s; }
  .exds-bstack .exds-card[data-bcard]:nth-child(3) { animation-delay: .09s; }
  .exds-bstack .exds-card[data-bcard]:nth-child(4) { animation-delay: .135s; }
  .exds-bstack .exds-card[data-bcard]:nth-child(5) { animation-delay: .18s; }
  .exds-bstack .exds-card[data-bcard]:nth-child(n+6) { animation-delay: .225s; }
}
@keyframes exds-brise {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}