/* ═══════════════════════════════════════
   ▓ COMPONENTE · Comparación de datos — gemelo vanilla ▓
   v1.3 · 2026-10-25 (se RETIRA el lavado ámbar de la fila distinta; el encabezado de columna toma el canon de la Tabla). Ficha: `design-system/COMPONENTE_COMPARACION_DATOS.md`
   Kit: `catalogo-cd/components/ComparacionDatos.jsx`

   Dos columnas de valores con su encabezado («Según el banco» · «Según la ficha») frente a una
   columna de rótulos; la fila que difiere se marca con una pastilla Distinto (texto), que es su
   ÚNICO marcador. Nunca tapa ni recorta un dato.

   v1.3 · 2026-10-25 · RETIRADO: el lavado ámbar de la fila distinta (`--color-warning-wash` y sus dos radios).
   `DECISION-FUENTE: Ricardo, 2026-10-25 — «C. este lavado ámbar no debería existir, no es canon y jamás lo aprobé, quítalo del todo»`
   (hoja `plans/decisiones/_decision_cajonfila_pendientes3_2026-10-25.html`, decisión 3). La pastilla Distinto no cambia.
   v1.3 · 2026-10-25 · el encabezado de columna pasa al canon del encabezado de la Tabla (relleno gris, alto y tipografía).
   `DECISION-FUENTE: Ricardo, 2026-10-25 — «Relleno gris como la Tabla»` (respuesta a «¿es canon o invento ese rótulo? no recuerdo rótulos sin relleno gris»).

   v1.1.1 · 2026-10-08 (RA-41 de verificador-canon): los tokens del rótulo y del valor son los de `.exds-cajon-campo-k/-v`
   (13 px · fg2 / fg1 · 400), como manda la sección Composición de la ficha, para que se lean idénticos al lado de un CajonCampos.

   REQUISITOS DEL ANFITRIÓN:
     1. Los tokens del canon (`colors_and_type.css`).
     2. `componentes/badge/badge.css` cargado (la pastilla Distinto es un Badge, no se redibuja).
     3. `box-sizing: border-box`.
   ═══════════════════════════════════════ */

.exds-cmpd {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-sans, "Inter", -apple-system, system-ui, sans-serif);
  font-size: var(--fs-body-sm, 13px);
  line-height: 1.4;
  text-align: left;
}
.exds-cmpd th,
.exds-cmpd td {
  padding: var(--space-1, 4px) var(--space-2, 8px);
  vertical-align: top;
  text-align: left;
}
.exds-cmpd-esq,
.exds-cmpd-k { width: 80px; }
/* ENCABEZADO DE COLUMNA = el de la Tabla (COMPONENTE_TABLA.md, .exds-tabla-head / .exds-tabla-th; relleno gris decidido por Ricardo el 2026-08-20):
   relleno --color-bg-subtle, 10 arriba y abajo, 13 · 600 · --fg2, línea fina abajo. Lleva el relleno también la esquina vacía (la barra es continua).
   El relleno lateral NO es el 12 de la Tabla sino el de las columnas de abajo (8, y 12 en los bordes dentro de un cajón): así el rótulo cae sobre
   la misma x que sus valores. Con --fg2 sobre --color-bg-subtle el contraste es 6,85:1 (AA).
   La interlínea es la del cuerpo (--lh-normal, 1,55), que es la que la Tabla hereda de su página: 10 + 20,15 + 10 = 40,15 de alto, el mismo de
   la Tabla del catálogo (el resto de la comparación sigue en 1,4). */
.exds-cmpd thead th {
  padding-top: var(--space-2-5, 10px);
  padding-bottom: var(--space-2-5, 10px);
  line-height: var(--lh-normal, 1.55);
  background: var(--color-bg-subtle, #F2F4F6);
  border-bottom: 1px solid var(--color-border-subtle, #E5E7EB);
}
.exds-cmpd-h {
  color: var(--fg2, #4B5563);
  font-size: var(--fs-body-sm, 13px);
  font-weight: var(--fw-semibold, 600);
}
.exds-cmpd-k { color: var(--fg2, #4B5563); font-weight: var(--fw-regular, 400); }
.exds-cmpd-v {
  color: var(--fg1, #0F1419);
  font-weight: var(--fw-regular, 400);
  overflow-wrap: anywhere;
}
.exds-cmpd-v[data-id="si"] { font-family: var(--font-mono, ui-monospace, Menlo, monospace); }
.exds-cmpd-v[data-vacio="si"] { color: var(--fg3, #5C6B7A); font-weight: var(--fw-regular, 400); }

/* La diferencia se dice con TEXTO: la pastilla Distinto es su único marcador. Ya no hay lavado ámbar de fila (v1.3, 2026-10-25). */
.exds-cmpd-marca { display: block; margin-top: var(--space-1, 4px); }

/* Veredicto de coincidencia: una linea ARRIBA de la tabla, rotulo y pastilla. Informa, no decide. */
.exds-cmpd-ver {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  margin-bottom: var(--space-2, 8px);
  font-family: var(--font-sans, "Inter", -apple-system, system-ui, sans-serif);
  font-size: var(--fs-caption, 12px);
  line-height: 1.4;
  color: var(--fg3, #5C6B7A);
}

/* Sólo para lectores de pantalla: el rótulo de la esquina vacía de la tabla. */
.exds-cmpd-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}