/* ============================================================
   badges-tipo.css — Badge de tipo de representación
   ============================================================
   Fuente ÚNICA del color de Embajada / Consulado / Rep. Permanente /
   Delegación. Antes las mismas clases estaban definidas en SEIS sitios con
   TRES paletas distintas:

     destinos.ejs · empleos.ejs      #F55138 / #317039   (naranja / verde)
     perfil.ejs · dashboard/index.ejs · landing-style.css
                                     #495057 / #6c757d   (grises)
     style.css (tema, vendor)        #1e4c94 / #0d8a54   (azul / verde)

   El síntoma: la pestaña "Mis Favoritos" de perfil.ejs mostraba en gris los
   mismos badges que en /empleos salen en color. Y perfil.ejs YA escribía
   `var(--badge-embajada, #495057)` — esperaba una definición central que nunca
   se escribió, así que siempre ganaba el gris de reserva.

   Se cargan desde el bloque contentFor('css') de cada página, que en el layout
   va DESPUÉS de style.css (layout.ejs:370 vs :373), así que estas reglas ganan
   al tema sin necesidad de !important en el color.

   Las variables se declaran aparte del bloque de reglas a propósito: una página
   que necesite otro tamaño (Destinos los pinta más grandes, el dashboard más
   pequeños) redefine padding y tamaño en su <style>, pero NUNCA el color.

   NOTA: public/assets/css/landing-style.css conserva su propia copia en grises.
   No se toca aquí: la cargan la landing, el blog y las páginas estáticas, que
   son otro contexto visual y no muestran estos badges.
   ============================================================ */

:root {
  --badge-embajada: #F55138;
  --badge-consulado: #317039;
  --badge-reper: #adb5bd;
  --badge-delegacion: #adb5bd;
  --badge-contratados: #2196F3;
}

.badge-embajada,
.badge-consulado,
.badge-reper,
.badge-delegacion,
.badge-contratados {
  font-size: 0.75rem;
  padding: 6px 12px;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.badge-embajada    { background: var(--badge-embajada);    color: #fff !important; }
.badge-consulado   { background: var(--badge-consulado);   color: #fff !important; }
.badge-contratados { background: var(--badge-contratados); color: #fff !important; }

/* REPER y DELEGACIÓN se quedan en gris a propósito: no existen en /empleos,
   así que no hay color de referencia que copiar. Texto oscuro por contraste. */
.badge-reper      { background: var(--badge-reper);      color: #212529 !important; }
.badge-delegacion { background: var(--badge-delegacion); color: #212529 !important; }