/* Insignias públicas («verificados», docs/insignias.md). Una fuente: este archivo. Los colores son tokens propios, por tema, con contraste >= 3:1 sobre las superficies
   de cada tema (lo verifica test/insignias.test.js). El color NUNCA es lo único que distingue: cada insignia tiene además una silueta distinta (escudo, escudo con
   corona, placa) y las etiquetas Plus y Adherente llevan texto. Tema oscuro = por defecto (igual que styles.css); claro = :root[data-theme="light"]. */
:root {
  --ins-azul: #6aaaff;
  --ins-azul-sobre: #0a0a0a;
  --ins-oro: #e6b94d;
  --ins-oro-sobre: #0a0a0a;
  --ins-plata: #cfd6de;
  --ins-plata-sobre: #0a0a0a;
  /* Sobre superficies que son blancas en los DOS temas (la tarjeta del carnet en Inicio): siempre la paleta de claro. */
  --ins-azul-fijo: #1a5fc4;
  --ins-azul-fijo-sobre: #ffffff;
  --ins-oro-fijo: #8a6208;
  --ins-oro-fijo-sobre: #ffffff;
  --ins-plata-fijo: #5b6672;
  --ins-plata-fijo-sobre: #ffffff;
}
.ih-carnet { --ins-azul: var(--ins-azul-fijo); --ins-azul-sobre: var(--ins-azul-fijo-sobre); --ins-oro: var(--ins-oro-fijo); --ins-oro-sobre: var(--ins-oro-fijo-sobre); --ins-plata: var(--ins-plata-fijo); --ins-plata-sobre: var(--ins-plata-fijo-sobre); }
:root[data-theme="light"] {
  --ins-azul: #1a5fc4;
  --ins-azul-sobre: #ffffff;
  --ins-oro: #8a6208;
  --ins-oro-sobre: #ffffff;
  --ins-plata: #5b6672;
  --ins-plata-sobre: #ffffff;
}

.ins { display: inline-flex; align-items: center; justify-content: center; flex: none; vertical-align: -0.2em; line-height: 1; cursor: default; border-radius: var(--r-4, 4px); }
.ins:focus-visible { outline: 2px solid var(--focus-ring, currentColor); outline-offset: 2px; }
.ins-t14 { width: 14px; height: 14px; }
.ins-t16 { width: 16px; height: 16px; }
.ins-t20 { width: 20px; height: 20px; }
.ins-t24 { width: 24px; height: 24px; }
.ins-svg { width: 100%; height: 100%; display: block; }
.ins-azul { --ins-c: var(--ins-azul); --ins-s: var(--ins-azul-sobre); }
.ins-oro { --ins-c: var(--ins-oro); --ins-s: var(--ins-oro-sobre); }
.ins-plata { --ins-c: var(--ins-plata); --ins-s: var(--ins-plata-sobre); }
.ins-forma { fill: var(--ins-c); }
.ins-check { fill: none; stroke: var(--ins-s); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ins-borde { fill: none; stroke: var(--ins-s); stroke-width: 0.9; opacity: .9; }
.ins-plata .ins-borde { stroke-dasharray: 1.6 1.2; }
.ins-t14 .ins-borde { display: none; }

/* Etiquetas con texto (Plus, Adherente): el pill único, un poco más chico para ir al lado del nombre. */
.pill.ins-pill { padding: 1px 8px; font-size: var(--t-11); vertical-align: middle; }
.ins-nombre { display: inline-flex; align-items: center; gap: var(--sp-1, 4px); max-width: 100%; }
.ins-nombre-t { overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* Aviso al tocar y mantener (en pantallas táctiles el title no se ve). */
.ins-tip { position: fixed; z-index: var(--z-toast, 90); max-width: min(280px, 90vw); padding: var(--sp-2, 8px) var(--sp-3, 12px); border-radius: var(--r-8, 8px); background: var(--surface-card); color: var(--text-primary); border: 1px solid var(--border-default); font-size: var(--t-13); box-shadow: 0 6px 24px var(--overlay-strong); pointer-events: none; animation: insTip .12s ease-out; }
@keyframes insTip { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ins-tip { animation: none; } }