/* ============================================================
   components.css — Estilos de componentes modulares
   ============================================================ */

/* Badges de Categoría */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.cat-Actualidad            { background: #ede9fe; color: #5b21b6; }
.cat-Hermandades           { background: #fce7f3; color: #9d174d; }
.cat-Agenda                { background: #d1fae5; color: #065f46; }
.cat-Costaleros            { background: #fee2e2; color: #991b1b; }
.cat-Musica, .cat-Música   { background: #e0f2fe; color: #0c4a6e; }
.cat-Consejo               { background: #fef3c7; color: #92400e; }
.cat-Itinerarios           { background: #f3f4f6; color: #374151; }
.cat-Cultos                { background: #fdf4ff; color: #701a75; }
.cat-Elecciones            { background: #ecfdf5; color: #064e3b; }
.cat-CulturayExposiciones,
.cat-CulturaExposiciones   { background: #fff7ed; color: #9a3412; }
.cat-default               { background: #f3f4f6; color: #6b7280; }

/* Contadores de caracteres */
.char-ok   { color: #6b7280; }
.char-warn { color: #d97706; }
.char-over { color: #ef4444; font-weight: 600; }

/* Vista previa de tarjeta editorial */
.preview-card {
  font-family: 'Merriweather', serif;
  transition: all 0.2s ease;
}

/* Filas de tabla con hover suave */
.tbl-row:hover {
  background: #faf8f4;
}

/* Modales y fondos con desenfoque */
.modal-overlay {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Pestañas activas */
.tab-btn {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.tab-btn.active {
  background: #58258a;
  color: #ffffff;
}

/* Contenido de pestañas */
.tab-content { display: none; }
.tab-content.active { display: block; }

/* Animaciones IA y carga */
.star-pulse {
  animation: pulseStar 1.6s ease-in-out infinite;
}
@keyframes pulseStar {
  0%, 100% { opacity: .5; transform: scale(.95); }
  50% { opacity: 1; transform: scale(1.05); }
}

/* Fondo decorativo patrón login */
.pattern-bg {
  background-color: #1a1a1a;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(212, 175, 55, 0.07) 0,
    rgba(212, 175, 55, 0.07) 1px,
    transparent 0,
    transparent 50%
  );
  background-size: 20px 20px;
}