/* LINT-ALLOW: rol-color trazo del signo · el glifo es un CONTROL dibujado con currentColor y la ficha COMPONENTE_CAPA_EFIMERA.md (tabla del signo, fila Trazo) fija --color-border-control; ningún token de texto tiene ese papel sobre fondo claro */
/* ═══════════════════════════════════════
   ▓ COMPONENTE · Signo de información (i) — gemelo vanilla ▓
   v1.1 · 2026-10-09. Ficha: `design-system/COMPONENTE_CAPA_EFIMERA.md`
   § «Signo de información de una etiqueta» (v0.9). Kit: `catalogo-cd/components/SignoInfo.jsx`

   El «(i)» que va junto al rótulo de un campo de formulario y abre un tooltip efímero con
   una ayuda breve. Es el DISPARADOR, no la capa: la burbuja es la del gemelo `tooltip`
   (`componentes/tooltip/`), que se carga aparte y se dispara con `data-tip`.

   REQUISITOS DEL ANFITRIÓN:
     1. Los tokens del canon (`colors_and_type.css`).
     2. `box-sizing: border-box`.
     3. `componentes/tooltip/` (hoja + js) cargado — sin él el signo se ve pero no abre nada.

   LO QUE DECIDIÓ RICARDO (2026-08-15 y 2026-09-22): sólo contorno, sin relleno · ícono `info`
   de lucide, no un carácter · un solo gris, sin variante por fondo · el (i) abre un tooltip y
   el (?) de `AyudaColumna` abre un panel: no se intercambian. Cosechado del cotizador público
   (`.info-icon` bajo `.lzc-name-label`), donde sólo vivía en el CSS de una app.
   ═══════════════════════════════════════ */

.exds-signo-info {
  position: relative;
  display: inline;
  margin-left: 4px;
  padding: 0 0 0 14px;
  border: 0;
  background: transparent;
  /* ⛔ EL TRAZO CRUZA EL UMBRAL DE CONTROL (WCAG 1.4.11): 3.12:1 sobre blanco, 2.83:1 sobre el
     gris de la tarjeta (aceptado, con sus cinco condiciones, en la ficha). NO es `--fg4`
     (#B8BDC7, 1.88:1): la hoja de decisión lo etiquetó así por error y la ficha lo corrige. */
  color: var(--color-border-control, #8B92A1);
  cursor: help;
  vertical-align: baseline;
}

/* ⛔ EL SIGNO NUNCA SE SEPARA DE SU RÓTULO (v1.2 · Ricardo, 2026-10-28).
   DECISION-FUENTE: Ricardo, 2026-10-28 — «(i) mal puesta y debe ser icono, no carácter. [...] Comparto forma correcta que vive en cotizador público»; y sobre el título de grupo «Archivo»: «aquí la (i) está muy alejada del texto».
   CAUSA (medida en Chromium): el signo era una caja ATÓMICA (inline-block de 14x14) y entre una palabra y
   una caja atómica el navegador puede partir el renglón aunque no haya espacio: el signo caía solo al
   renglón de abajo y la celda de rótulo pasaba de 1 a 2 o 3 renglones (33 y 53 px de alto). Un WORD
   JOINER pegado a una caja atómica sí la ata, pero no si queda dentro de otro elemento; por eso el signo
   ya no es atómico: es un elemento EN LÍNEA con 14 px de relleno a la izquierda, que lleva el WORD JOINER
   (U+2060, ancho cero, escapado) como primer carácter, y el dibujo va absoluto dentro de ese relleno. Si
   el rótulo no cabe, parte el texto; el signo viaja con su última palabra, a 4 px, centrado en su renglón. */
.exds-signo-info::before {
  content: "\2060";
}

/* ⛔ ALINEACIÓN VERTICAL CON EL RÓTULO (v1.2). Antes: vertical-align calc(0.364em - 7px) sobre una caja
   de 14 px, medido ≤ 0,4 px (ficha, tabla del signo). Ahora el dibujo se centra en el 50 % del área de
   contenido del propio elemento en línea (top 50 % con margen de la mitad de su alto), que es el mismo
   centro de línea que mide el rótulo: medido ≤ 0,5 px en 12, 13 y 14 px. El envoltorio que crea
   tooltip.js (inline-flex, caja atómica) pasa a en línea para no reabrir el corte. */
.exds-tip-wrap:has(> .exds-signo-info) {
  display: inline;
}

/* Título de grupo del cajón (.exds-caj-sec-t): es un flex con gap de 8 y align-items baseline. Sin esto el
   signo quedaba a 8 + 4 = 12 px del texto y 2 px sobre su centro. Se descuenta el gap (queda 4 px) y se
   centra en su renglón. Vale con el signo suelto y con su envoltorio (que ahí sigue siendo flex). */
.exds-caj-sec-t > .exds-signo-info,
.exds-caj-sec-t > .exds-tip-wrap:has(> .exds-signo-info) {
  align-self: center;
  margin-left: calc(-1 * var(--space-2, 8px));
}
.exds-caj-sec-t > .exds-tip-wrap:has(> .exds-signo-info) {
  display: inline-flex;
}
.exds-caj-sec-t > .exds-tip-wrap > .exds-signo-info {
  margin-left: 4px;
}
.exds-caj-sec-t > .exds-signo-info {
  margin-left: calc(4px - var(--space-2, 8px));
}

/* ⛔ EL GLOBO DEL SIGNO (i): ARRIBA, HASTA 3 LÍNEAS Y 260 PX (Ricardo, 2026-10-09).
   DECISION-FUENTE: Ricardo, 2026-10-09 — «6 las 3 conforme a tus recomendaciones», sobre la hoja
   plans/decisiones/_decision_globo_signo_info_2026-10-06.html (decisiones 27, 28 y 29).
   · LADO (27): arriba, que es la posición por omisión del gemelo tooltip (data-tip-pos ausente
     = top). Este bloque no la fija: la deja ser.
   · LARGO (28): la regla del tooltip base («una línea, sin salto») se AJUSTA sólo para el globo que
     abre un signo (i): salta de línea y mide como mucho 260 px. width max-content hace que un texto
     corto no se infle (sin él, el globo, anclado dentro de un disparador de 14 px, se partiría
     palabra por palabra). Se escopa con :has() sobre el envoltorio, igual que la alineación de
     arriba; el tooltip base y todo otro globo siguen en una línea.
   · TOPE DE TRES LÍNEAS: es una regla de CONTENIDO, no de hoja. NO se recorta con line-clamp
     (nunca se tapa un dato, CLAUDE.md 3-quinquies): una ayuda que pasa de tres líneas a 260 px
     no va en este globo, va en el (?) de AyudaColumna que abre un panel.
   · line-height normal deja el globo de UNA línea con la misma altura que el tooltip base (27 px
     medido): sin él heredaría el interlineado del rótulo y cada app lo vería distinto.
   · max-width se acota a la ventana: a 320 px el globo no puede medir más que la pantalla. */
.exds-tip-wrap:has(> .exds-signo-info) > .exds-tip {
  white-space: normal;
  width: max-content;
  max-width: min(260px, calc(100vw - 48px));
  text-align: left;
  line-height: normal;
}

/* LA MEDIDA DEL DIBUJO VIVE EN LA HOJA, NO EN EL ATRIBUTO: quien monta en vanilla escribe su
   propio svg y, sin esta regla, no hereda los 14px de su caja (GOBIERNO.md 0-ter, forma 1). */
.exds-signo-info svg {
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -7px;
  display: block;
  width: 14px;
  height: 14px;
}

/* Zona de toque 24×24 sin engordar el dibujo: 14 + 5·2. Encoger un control no puede encoger
   su zona de toque (WCAG 2.5.8, tamaño mínimo del objetivo). */
.exds-signo-info::after {
  content: "";
  position: absolute;
  inset: -5px;
}

/* Hover y foco suben a --fg3 (5.47:1), que es donde el usuario está interactuando. */
.exds-signo-info:hover,
.exds-signo-info:focus,
.exds-signo-info:focus-visible {
  color: var(--fg3, #5C6B7A);
}