/* ═══════════════════════════════════════
   ▓ COMPONENTE · Badge — gemelo vanilla ▓
   v1.0 · 2026-08-23. Ficha: `design-system/COMPONENTE_BADGE.md`
   Kit: `catalogo-cd/components/Badge.jsx`

   La pastilla que dice UNA condición semántica. El mismo estado se ve idéntico en las tres
   superficies. Cuatro variantes, y la variante manda sobre todo lo demás:

     · tint      (por defecto) — fondo teñido + contorno de su familia. SOLO TEXTO: sin ícono
                  y sin punto, porque el fondo YA es la señal.
     · etiqueta  — contorno gris, sin color. No es un estado: es una clasificación.
     · plain     — sin fondo. Punto + texto, los dos en el color BASE de la familia.
     · count     — contador sólido. NO usa `tono`: usa `enfasis`.

   ⛔ RELLENO SÓLIDO = SOLO CONTADORES, NUNCA UN ESTADO.

   REQUISITOS DEL ANFITRIÓN:
     1. Los tokens del canon (`colors_and_type.css`).
     2. `box-sizing: border-box`.
   ═══════════════════════════════════════ */

/* ── BASE ────────────────────────────────────────────────────────────────────
   Lo que comparten las cuatro variantes. Todo lo demás cuelga de `data-variant`. */
.exds-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans, "Inter", -apple-system, system-ui, sans-serif);
  font-weight: 500;
  font-size: var(--fs-caption, 12px);
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;                  /* sin esto se aplasta dentro de una fila flex apretada */
}

/* ── VARIANTE `tint` (por defecto) · fondo teñido + contorno de la familia ────
   ⛔ EL CONTORNO NO ES ADORNO (Ricardo, 2026-08-19: «propuesta aceptada»).
   Sin él, una pastilla de estado sobre una TARJETA BLANCA se derrite: el ámbar daba 1,22:1
   contra el blanco y el éxito 1,20. Y no se arreglaba aclarando ni oscureciendo el fondo,
   porque ese mismo fondo tiene que aguantar el texto a 4,5:1 — el fondo ámbar que cumple las
   dos sólo existe al filo de ambas.
   *Cuando la solución sólo existe en el filo, es que se está moviendo la perilla equivocada:*
   la visibilidad la resuelve el BORDE, y el fondo queda libre para tener color. */
.exds-badge:not([data-variant]),
.exds-badge[data-variant="tint"],
.exds-badge[data-variant="etiqueta"] {
  height: 20px;
  padding: 0 10px 0 8px;           /* asimétrico: la píldora se ve centrada, no medida */
  border-radius: var(--radius-pill, 999px);
  border: 1px solid transparent;
}

/* ── VARIANTE `etiqueta` · contorno gris, sin color ──────────────────────────
   ⛔ LO QUE SEPARA ETIQUETA DE ESTADO ES LA FORMA, NO EL COLOR (Ricardo, 2026-08-12) — y
   así el color queda libre para significar, que era el objetivo de toda la revisión.
   Hizo falta porque al decidir que las etiquetas van en GRIS chocaban con el estado
   `neutral`, que YA era gris: «Sin asignar» y «Proveedor» quedaban idénticas.
   Lleno contra vacío es CATEGÓRICO —se ve de un vistazo—, mientras que dos grises distintos
   volverían a pedir una comparación de memoria que sabemos que nadie hace. */
.exds-badge[data-variant="etiqueta"] {
  background: transparent;
  border-color: var(--color-border-default, #D1D5DB);
  color: var(--fg2, #4B5563);
}

/* ── LAS SEIS FAMILIAS, en la variante teñida ────────────────────────────────
   fondo = tint · texto = deep · contorno = stroke. */
.exds-badge[data-tono="success"]:not([data-variant="plain"]):not([data-variant="count"]):not([data-variant="etiqueta"]) {
  background: var(--color-success-tint, #E7FEF6);
  color: var(--color-success-deep, #038157);
  border-color: var(--color-success-stroke, #5CD9A9);
}
.exds-badge[data-tono="warning"]:not([data-variant="plain"]):not([data-variant="count"]):not([data-variant="etiqueta"]) {
  background: var(--color-warning-tint, #FEF6EE);
  color: var(--color-warning-deep, #B05B00);
  border-color: var(--color-warning-stroke, #E2B483);
}
.exds-badge[data-tono="error"]:not([data-variant="plain"]):not([data-variant="count"]):not([data-variant="etiqueta"]) {
  background: var(--color-error-tint, #FEE8E7);
  color: var(--color-error-deep, #D61005);
  border-color: var(--color-error-stroke, #ED9F9B);
}
.exds-badge[data-tono="info"]:not([data-variant="plain"]):not([data-variant="count"]):not([data-variant="etiqueta"]) {
  background: var(--color-info-tint, #E7F1FE);
  color: var(--color-info-deep, #0664E0);
  border-color: var(--color-info-stroke, #9BBFED);
}
/* ⛔ `neutral` y `pause` NO SON FAMILIAS SEMÁNTICAS (COMPONENTE_SEMANTICOS §0-ter lo declara
   de `--color-notice` con todas las letras). Su texto vive en `--fg2`, no en un `-deep` de
   color. `pause` = detenido esperando a un TERCERO — es neutro, no ámbar (Ricardo, 17-jul):
   que algo espere no es un problema. */
.exds-badge[data-tono="neutral"]:not([data-variant="plain"]):not([data-variant="count"]):not([data-variant="etiqueta"]),
.exds-badge:not([data-tono]):not([data-variant="plain"]):not([data-variant="count"]):not([data-variant="etiqueta"]) {
  background: var(--color-bg-subtle, #F2F4F6);
  color: var(--fg2, #4B5563);
  border-color: var(--color-notice-stroke, rgba(110, 115, 120, 0.22));
}
.exds-badge[data-tono="pause"]:not([data-variant="plain"]):not([data-variant="count"]):not([data-variant="etiqueta"]) {
  background: var(--color-notice-tint, #E8E9EA);
  color: var(--fg2, #4B5563);
  border-color: var(--color-notice-stroke, rgba(110, 115, 120, 0.22));
}

/* ── VARIANTE `plain` · sin fondo → punto + texto ────────────────────────────
   ⛔ EL PUNTO VA EN LA BASE **PORQUE ESTA VARIANTE NO TIENE FONDO**, y esa condición ES la
   regla, no un detalle del caso.
   `DECISION-FUENTE: Ricardo, 2026-08-20 — «El punto solamente se pone en color base cuando no
   lleva ningún tipo de relleno ni de fondo. Por ejemplo, en el banner sutil; pero en banners
   con relleno tint o con cualquier otro tipo de relleno, el dot va del mismo color que el
   texto.»`
   Y desde ese mismo día **el TEXTO acompaña al punto**: también va en base, así que los dos
   vuelven a ser el MISMO tono. Antes eran dos —punto en base, palabra en `-deep`—, y la
   incoherencia no estaba en el punto, que ya obedecía: estaba en que el texto no se aplicaba
   la regla. */
.exds-badge[data-variant="plain"] {
  gap: var(--space-1-5, 6px);
  background: none;
  border: none;
  padding: 0;
}
.exds-badge[data-variant="plain"][data-tono="success"] { color: var(--color-success-deep, #038157); }
.exds-badge[data-variant="plain"][data-tono="error"]   { color: var(--color-error, #DA342B); }
.exds-badge[data-variant="plain"][data-tono="info"]    { color: var(--color-info, #1A73E8); }
/* ⛔ LA EXCEPCIÓN DEL AVISO, medida y no opinada. Sobre blanco la base del rojo da 4,66 (era
   5,96 hasta el 2026-08-29, cuando Ricardo la cambió a #DA342B — y este mismo comentario se
   reescribió ESE DÍA y nació ya con el número viejo dentro: *un comentario que se toca no se
   revisa entero, se parchea la línea que traía a uno aquí*), la
   del azul 4,51 — se leen. ⛔ LA DEL VERDE DA 4,07 Y NO LLEGA: esta línea decía que sí, y
   era falso por 0,43 (corregido 2026-08-29 · el `success` plano pasa a `-deep`, 4,90). *Un
   comentario que declara cumplido un número que no cumple no es un descuido de redacción:
   es lo que impide que el siguiente que pase lo arregle.* La del naranja da **2,46**, y no se arregla
   oscureciéndolo: para pasar habría que llevarlo a #AD5A00, que es su propia variante
   profunda. *Oscurecer la base no arregla la familia: la fusiona.* Por eso `warning` —y sólo
   él— conserva `-deep` en el TEXTO. Su PUNTO sigue en base, y la asimetría es deliberada:
   Ricardo firmó el 09-ago que el punto puede quedar por debajo del contraste porque nunca es
   el único portador del significado. En un texto la palabra ES el elemento, y ahí la exención
   no alcanza. */
.exds-badge[data-variant="plain"][data-tono="warning"] { color: var(--color-warning-deep, #B05B00); }
.exds-badge[data-variant="plain"][data-tono="neutral"],
.exds-badge[data-variant="plain"][data-tono="pause"],
.exds-badge[data-variant="plain"]:not([data-tono])     { color: var(--fg2, #4B5563); }

/* el punto de `plain` — siempre en la BASE de su familia, incluido el aviso */
.exds-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill, 999px);
  flex-shrink: 0;
  background: var(--color-notice, #6E7378);
}
.exds-badge[data-tono="success"] .exds-badge-dot { background: var(--color-success, #0B8F6B); }
.exds-badge[data-tono="warning"] .exds-badge-dot { background: var(--color-warning, #FF8400); }
.exds-badge[data-tono="error"]   .exds-badge-dot { background: var(--color-error, #DA342B); }
.exds-badge[data-tono="info"]    .exds-badge-dot { background: var(--color-info, #1A73E8); }

/* ── VARIANTE `count` · el contador ──────────────────────────────────────────
   ⛔ NO LLEVA `tono`, Y ES A PROPÓSITO. Un contador es una CANTIDAD, y una cantidad no es un
   éxito ni un error: «12» no es verde ni rojo. Mezclar los dos ejes es lo que dejó al
   contador con cuatro tratamientos y ningún criterio.

   ⛔ SE ORGANIZA POR CUÁNTA ATENCIÓN PIDE (Ricardo, 2026-08-12).
   `DECISION-FUENTE: Ricardo aprueba el eje de énfasis — ambiente · respuesta · atención.`
   No «por pieza anfitriona», que era la lectura natural: eso no es una regla, es la
   descripción de cómo quedó — dos pestañas de dos pantallas podrían salir distintas y las dos
   serían «correctas», que es exactamente cómo se llega a cuatro tratamientos.
   El eje bueno se contesta con una pregunta sobre el DATO, no sobre el sitio:
   **«¿el usuario tiene que hacer algo con este número?»**

   ⛔ FORMA: `min-width` = alto, así un dígito es un CÍRCULO y dos o más una PÍLDORA —
   nunca una elipse. Y el radio es stadium (`--radius-pill`), NUNCA 50%. */
.exds-badge[data-variant="count"] {
  justify-content: center;
  min-width: var(--badge-count-size, 20px);
  height: var(--badge-count-size, 20px);
  padding: 0 6px;
  border-radius: var(--radius-pill, 999px);
  font-weight: 600;
  font-size: var(--fs-eyebrow, 11px);
  font-variant-numeric: tabular-nums;   /* los dígitos no bailan al cambiar la cifra */
}

/* `ambiente` (por defecto) — cuántos hay. No pide nada. El más común: pestañas, módulos.
   El aro interior de medio píxel NO es un adorno: es lo que lo separa del fondo cuando el
   contador cae sobre una fila ya teñida (hover, activo). Era el tratamiento que la barra
   lateral llevaba dibujado a mano; ahora es el que viene de fábrica. */
.exds-badge[data-variant="count"]:not([data-enfasis]),
.exds-badge[data-variant="count"][data-enfasis="ambiente"] {
  background: rgba(15, 20, 25, .06);
  box-shadow: inset 0 0 0 .5px rgba(15, 20, 25, .08);
  color: var(--fg2, #4B5563);
}
/* `respuesta` — el resultado de algo que el usuario PIDIÓ: un filtro, una búsqueda. */
.exds-badge[data-variant="count"][data-enfasis="respuesta"] {
  background: var(--color-action-ink, #21272C);
  color: var(--fg-inverse, #FFFFFF);
}
/* `atencion` — hay algo sin ver que le toca a él.
   ⛔ RESERVADO A NOTIFICACIONES Y **SÓLO EN EL CROMO** (campana, barra superior), donde el
   ícono ya dice de qué se trata. Dentro de una LISTA de contenido va `info`: ahí un punto
   verde junto a una fila ya significa «validado», y usar el mismo para «no lo has visto»
   pone dos significados opuestos en la misma señal. Ricardo, 2026-08-19.

   GATE-ALLOW: la cifra en blanco sobre el esmeralda mide 4,07:1 — por debajo del 4,5:1 que
   AA exige para texto de 11px (SÍ despeja el 3:1 de un componente/control). `DECISION-FUENTE:
   Ricardo, 2026-08-26 — eligió la opción A ("como está hoy") y, al advertirle que ese valor
   no llega al mínimo de legibilidad, confirmó: «Déjalo y decláralo como excepción».`
   ✔ DESVIACIÓN ACEPTADA, sabiéndola: no es la primera vez que este mismo verde se acepta así
   —el «Listo» del acordeón guiado (`PATRON_ACORDEON_GUIADO.md`) y el contador de la barra del
   Centro de notificaciones (`.ncx2 .seg .sc`, `homologacion/mesa.md` § Addenda 2026-08-06)
   viven con el mismo número declarado.
   ⛔ CADUCA — deja de valer y hay que volver a medir — el día que el contador crezca de 11px,
   o que el verde de marca (`--color-emerald`) cambie de valor. Hasta entonces, vale. */
.exds-badge[data-variant="count"][data-enfasis="atencion"] {
  background: var(--color-emerald, #0B8F6B);
  color: var(--fg-inverse, #FFFFFF);
}
/* `sobre-oscuro` — para cuando el contador vive DENTRO de una superficie oscura.
   `DECISION-FUENTE: Ricardo 2026-08-17 — «vamos a regresar al contador blanco original».`
   Los otros tres están pensados para fondo CLARO: dentro de un botón ink, `ambiente`
   desaparece y `respuesta` es oscuro sobre oscuro. Es la pareja INVERSA del botón —pastilla
   `--color-surface`, número `--color-action-ink`—, los dos tokens ya canónicos y ya
   emparejados, así que la variante **no estrena un solo color**. Ésa era la condición para
   cosecharla en vez de decidir una pieza nueva. Medido: 15,09:1 los dos.
   ⛔ NO es «lo que había»: el 16-ago pidió gris oscuro, se construyó, se le enseñó pintado
   con el CSS real y volviéndolo a ver eligió el blanco. *El gris tenía los números mejores
   —1,24:1 la pastilla, que no compite con la etiqueta— y aun así se ve peor. Un número no
   decide un diseño; sólo evita decidirlo a ciegas.* No lo «arregles» de vuelta al gris. */
.exds-badge[data-variant="count"][data-enfasis="sobre-oscuro"] {
  background: var(--color-surface, #FFFFFF);
  color: var(--color-action-ink, #21272C);
}

/* ── EL RESORTE AL APARECER · un aviso que LLEGA (Ricardo, 2026-07-26) ───────
   Se pone sólo cuando el contador aparece, no en cada cambio de cifra. */
@keyframes exds-badge-pop { 0% { transform: scale(0); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
.exds-badge-pop { animation: exds-badge-pop var(--motion-slow, 400ms) var(--ease-emphasis, cubic-bezier(.2,.9,.3,1.4)) both; }

/* ⛔ Apagar el movimiento NO es dejar sin señal — pero aquí sí, y por eso se dice: el resorte
   es puro deleite, la cifra ya está escrita y el contador se ve igual quieto. Distinto del
   anillo del Progress, que ES el dato y por eso no se apaga. */
@media (prefers-reduced-motion: reduce) {
  .exds-badge-pop { animation: none; }
}