:root{
  --verde-funo: #7bbf3f; /* ajusta si quieres */
}

.btn-success,
.btn-primary,
.btn-descarga{
  background-color: var(--verde-funo) !important;
  border-color: var(--verde-funo) !important;
  color: #fff !important;
  font-weight: 600;
}

.btn-success:hover,
.btn-primary:hover,
.btn-descarga:hover{
  background-color: #6aa832 !important;
  border-color: #6aa832 !important;
}

.recursos-busqueda{
  min-width: 280px;
  max-width: 520px;
}

.gap-2{ gap: .5rem; }
.gap-3{ gap: 1rem; }

.recurso-card-img{
  height: 180px;
  object-fit: cover;
}

.asset-item{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: .5rem;
  padding: .75rem;
  background: #fff;
}

.asset-item small{
  display: block;
}
/* Header: buscador + botón alineados */
.recursos-acciones{
  gap: .75rem;
  width: 520px;           /* ajusta según tu gusto */
  justify-content: flex-end;
}

.recursos-acciones .recursos-busqueda{
  flex: 1 1 auto;
  min-width: 260px;
}

.recursos-acciones .btn-descarga{
  flex: 0 0 auto;
  white-space: nowrap;
}

/* En móvil sí se apilan y ocupan 100% */
@media (max-width: 768px){
  .recursos-acciones{
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .recursos-acciones .btn-descarga{
    width: 100%;
    justify-content: center;
  }
}

/* ==============================
   BOTÓN LISTA DE DESCARGA (CTA)
================================ */
.btn-descarga{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  padding: .55rem 1rem;
  box-shadow: 0 6px 14px rgba(0,0,0,.15);
}

.badge-descarga{
  background: #fff;
  color: #2e7d32; /* verde FUNO Vet */
  font-weight: 700;
  padding: .25rem .5rem;
  border-radius: 12px;
}
/* ==============================
   BOTÓN LIMPIAR FILTROS
================================ */
#btnLimpiar{
  background: #f5f5f5 !important;
  border: 1px solid #cfcfcf !important;
  color: #333 !important;
  font-weight: 500;
}

#btnLimpiar:hover{
  background: #eaeaea !important;
}
/* ==============================
   BOTONES DE TARJETA PRODUCTO
================================ */
.card .btn{
  font-weight: 600;
}

.card .btn-outline-primary{
  border-width: 2px;
}

.card .btn-primary{
  box-shadow: 0 4px 10px rgba(0,0,0,.15);
}
/* ==============================
   MODALES (VISIBILIDAD)
================================ */
.modal-backdrop{
  opacity: .5 !important;
}

.modal{
  z-index: 1055;
}
/* ==============================
   RESPONSIVE (MÓVIL)
================================ */
@media (max-width: 768px){
  /* el header de recursos se apila */
  .recursos-busqueda{
    min-width: 100% !important;
    max-width: 100% !important;
  }

  /* fuerza que el botón de lista se vea como CTA en móvil */
  .btn-descarga{
    width: 100%;
    justify-content: center;
  }
}
/* ==============================
   BOTÓN FLOTANTE (LISTA)
================================ */
.btn-float{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 2000;

  border: none;
  border-radius: 999px;
  padding: 12px 16px;
  font-weight: 700;

  background: #2e7d32; /* verde FUNO Vet */
  color: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);

  display: none; /* solo móvil por defecto */
  align-items: center;
  gap: 10px;
}

.btn-float__badge{
  background: #fff;
  color: #2e7d32;
  border-radius: 999px;
  padding: 2px 8px;
  font-weight: 800;
}

/* En móvil se muestra */
@media (max-width: 768px){
  .btn-float{ display: inline-flex; }
}
/* ==============================
   ANIMACIÓN (FEEDBACK)
================================ */
@keyframes pop{
  0%{ transform: scale(1); }
  35%{ transform: scale(1.08); }
  100%{ transform: scale(1); }
}

.anim-pop{
  animation: pop .22s ease;
}
/* ==============================
   BOTÓN "VACIAR LISTA"
================================ */
#mlVaciar{
  background-color: #f5f5f5 !important;
  border: 2px solid #cfcfcf !important;
  color: #333 !important;
  font-weight: 600;
}

#mlVaciar:hover{
  background-color: #e6e6e6 !important;
  border-color: #b5b5b5 !important;
}
/* ==============================
   BOTÓN "QUITAR" (ACCIONES)
================================ */
.btn-outline-danger{
  color: #c62828 !important;
  border: 2px solid #ef9a9a !important;
  font-weight: 600;
}

.btn-outline-danger:hover{
  background-color: #c62828 !important;
  color: #fff !important;
  border-color: #c62828 !important;
}

.btn-outline-secondary{
  background-color: #ffffff !important;
  border: 2px solid #cfcfcf !important;
  color: #333 !important;
  font-weight: 600;
}

.btn-outline-secondary:hover{
  background-color: #f2f2f2 !important;
  border-color: #b5b5b5 !important;
  color: #111 !important;
}

/* Si tu theme aplica opacidad a botones o links dentro del modal */
.modal .btn-outline-secondary{
  opacity: 1 !important;
  visibility: visible !important;
}
/* ==============================
   BOTONES – ESQUINAS REDONDEADAS
================================ */

/* Base para TODOS los botones */
.btn,
button,
a.btn{
  border-radius: 8px !important;   /* leve, elegante */
}

/* Botones pequeños */
.btn-sm{
  border-radius: 6px !important;
}

/* Botones grandes o CTA */
.btn-lg,
.btn-descarga,
.btn-float{
  border-radius: 10px !important;
}

/* Badges dentro de botones (contador) */
.badge,
.badge-descarga,
.btn-float__badge{
  border-radius: 999px !important; /* pill */
}