/* =========================================================
   1. BOTONES DE FILTRO (HORIZONTAL Y ESTADOS ACTIVOS JS)
   ========================================================= */
.fye-filters-wrapper {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 28px 0 36px !important;
  width: 100% !important;
  clear: both !important;
}

.fye-filters-wrapper .bt-tipo {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 8px 18px !important;
  border: 2px solid #cbd5e1 !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  color: #334155 !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

/* Clases de estado activo activadas por mostrarElementos() */
.fye-filters-wrapper .bt-tipo-sel-1 { border-color: #66AA33 !important; background: #66AA33 !important; color: #fff !important; }
.fye-filters-wrapper .bt-tipo-sel-1 .material-symbols-rounded { color: #fff !important; }

.fye-filters-wrapper .bt-tipo-sel-2 { border-color: #B97B7B !important; background: #B97B7B !important; color: #fff !important; }
.fye-filters-wrapper .bt-tipo-sel-2 .material-symbols-rounded { color: #fff !important; }

.fye-filters-wrapper .bt-tipo-sel-3 { border-color: #faa918 !important; background: #faa918 !important; color: #fff !important; }
.fye-filters-wrapper .bt-tipo-sel-3 .material-symbols-rounded { color: #fff !important; }

.fye-filters-wrapper .bt-tipo-sel-4 { border-color: #0284c7 !important; background: #0284c7 !important; color: #fff !important; }
.fye-filters-wrapper .bt-tipo-sel-4 .material-symbols-rounded { color: #fff !important; }

.fye-badge-count {
  opacity: 0.85;
  font-size: 0.85em;
  margin-left: 6px;
}

/* =========================================================
   2. CABECERA DE ACCIONES (ALTA / BAJA)
   ========================================================= */
.fye-actions-header {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 20px !important;
  margin-bottom: 20px !important;
  width: 100% !important;
  clear: both !important;
}

.fye-action-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  text-decoration: none !important;
  color: #14355a !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
}

.fye-action-link .material-symbols-rounded {
  font-size: 20px !important;
}

.fye-action-delete {
  color: #991b1b !important;
}

/* =========================================================
   3. GRID DE TARJETAS (ESTRUCTURA)
   ========================================================= */
.fye-grid-container {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  gap: 24px !important;
  margin-bottom: 40px !important;
  width: 100% !important;
  clear: both !important;
}

.fye-grid-container .fye_bloque {
  float: none !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* =========================================================
   4. DISEÑO DE LA TARJETA V2 + REGLA DE OCULTACIÓN JQUERY
   ========================================================= */
.fye-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  cursor: pointer !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}

/* RESPETA EL OCULTAMIENTO DE JQUERY .hide() */
.fye-card[style*="display: none"],
.fye_bloque[style*="display: none"] {
  display: none !important;
}

.fye-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.08) !important;
}

.fye-card-body {
  display: flex !important;
  flex-direction: column !important;
}

.fye-card-top {
  margin-bottom: 10px !important;
}

.fye-card-tag {
  display: inline-block !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  color: #334155 !important;
  background: #f1f5f9 !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  letter-spacing: 0.03em !important;
}

.fye-card-title {
  font-family: 'Open Sans', sans-serif !important;
  font-size: 1.15rem !important;
  color: #0f172a !important;
  margin: 8px 0 !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}

.fye-card-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  font-size: 0.825rem !important;
  color: #64748b !important;
  margin-bottom: 12px !important;
}

.fye-meta-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.fye-meta-item .material-symbols-rounded {
  font-size: 16px !important;
}

.fye-card-text {
  font-size: 0.875rem !important;
  color: #475569 !important;
  line-height: 1.5 !important;
  margin-bottom: 16px !important;
}

.fye-card-footer {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  border-top: 1px solid #f1f5f9 !important;
  padding-top: 14px !important;
  margin-top: auto !important;
}

.fye-card-date {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 0.8rem !important;
  color: #94a3b8 !important;
}

.fye-card-date .material-symbols-rounded {
  font-size: 16px !important;
}

.fye-card-btn {
  background: #14355a !important;
  color: #ffffff !important;
  padding: 6px 14px !important;
  border-radius: 6px !important;
  font-size: 0.825rem !important;
  font-weight: 600 !important;
}