/* ==========================================================================
   COMPONENTE: BADGES Y ETIQUETAS (BADGES)
   Construcciones JGP2410 C.A.
   ========================================================================== */

/* --- Clase Base y Selectores Compatibles --- */
.badge,
.gallery-item__badge,
.comparison-card__badge,
.badge-waterproofing,
.badge-civil,
.badge-remodel,
.badge-featured,
.badge-area,
.badge-before,
.badge-process,
.badge-after,
.badge-primary,
.badge-outline,
.badge-outline-light {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.15;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
}

/* Iconos dentro de badges */
.badge svg,
.gallery-item__badge svg,
.comparison-card__badge svg {
  width: 12px;
  height: 12px;
}

/* --- Variantes de Especialidad / Categoría --- */

/* Impermeabilización (Azul Principal) */
.badge-waterproofing {
  background-color: var(--color-primary-blue);
  color: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Azul Primario Genérico */
.badge-primary {
  background-color: var(--color-primary-blue);
  color: var(--color-white);
}

/* Obras Civiles (Azul Profundo de Alto Contraste) */
.badge-civil {
  background-color: var(--color-deep-blue);
  color: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Remodelación Comercial / Drywall (Gris Oscuro) */
.badge-remodel {
  background-color: var(--color-gray-dark);
  color: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Proyecto Destacado / Eyebrow de Alto Impacto (Amarillo Institucional)
   REGLA DE ACCESIBILIDAD: Texto oscuro sobre amarillo */
.badge-featured {
  background-color: var(--color-yellow);
  color: var(--color-deep-blue);
  font-weight: var(--font-weight-extrabold);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  border: none;
}

/* Superficie / Metraje Documentado */
.badge-area {
  background-color: rgba(8, 29, 77, 0.94);
  color: var(--color-yellow);
  border: 1px solid rgba(255, 194, 14, 0.55);
  font-family: var(--font-headings);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  font-weight: var(--font-weight-bold);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* --- Variantes de Roles Fotográficos (Antes / Proceso / Después) --- */

/* Antes (Azul Profundo / Estado Inicial) */
.badge-before {
  background-color: var(--color-deep-blue);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Proceso (Azul Institucional / Fase Constructiva) */
.badge-process {
  background-color: var(--color-primary-blue);
  color: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Después (Amarillo Señalización / Resultado Final) */
.badge-after {
  background-color: var(--color-yellow);
  color: var(--color-deep-blue);
  font-weight: var(--font-weight-extrabold);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  border: none;
}

/* --- Variantes de Estilo Adicionales --- */

/* Borde sutil con relleno suave para fondos claros */
.badge-outline {
  background-color: rgba(11, 42, 111, 0.08);
  color: var(--color-primary-blue);
  border: 1px solid var(--color-primary-blue);
  font-weight: var(--font-weight-bold);
}

/* Para fondos oscuros */
.badge-outline-light {
  background-color: rgba(255, 255, 255, 0.12);
  color: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Badges sobre tarjetas de proyectos e imágenes */
.card-project__badges .badge,
.gallery-item__badge,
.comparison-card__badge {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Si badge-outline se usa dentro de card-project__badges sobre imagen */
.card-project__badges .badge-outline {
  background-color: rgba(8, 29, 77, 0.9);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* --- Ajustes Responsive para Pantallas Móviles --- */
@media (max-width: 640px) {
  .badge,
  .gallery-item__badge,
  .comparison-card__badge,
  .badge-waterproofing,
  .badge-civil,
  .badge-remodel,
  .badge-featured,
  .badge-area,
  .badge-before,
  .badge-process,
  .badge-after,
  .badge-primary,
  .badge-outline,
  .badge-outline-light {
    padding: 3px 8px;
    font-size: 0.6875rem;
    letter-spacing: 0.03em;
    gap: 4px;
    max-width: 100%;
  }

  .badge-area {
    font-size: 0.75rem;
  }
}