/* ============================================================
   CampingCR — Fauna Silvestre styles
   ============================================================ */

/* ---------- Page header tint ---------- */
.fauna-header {
  background-image:
    linear-gradient(135deg, rgba(27,47,27,.78) 0%, rgba(20,80,40,.68) 100%),
    url('../../assets/img/hero/hero-bg.jpg');
}

/* ---------- Danger pills (legend) ---------- */
.danger-pill {
  display: inline-flex;
  align-items: center;
  font-size: .75rem;
  font-weight: 600;
  padding: .3rem .85rem;
  border-radius: 999px;
  letter-spacing: .04em;
}
.danger-pill.inofensivo { background: #D1FAE5; color: #065F46; }
.danger-pill.precaucion { background: #FEF3C7; color: #92400E; }
.danger-pill.peligroso  { background: #FEE2E2; color: #991B1B; }
.danger-pill.toxico     { background: #EDE9FE; color: #5B21B6; }

/* ---------- Category quick-filter pills ---------- */
.fauna-pill {
  background: var(--color-light-gray);
  border: 1.5px solid #E5E7EB;
  border-radius: 999px;
  padding: .25rem .7rem;
  font-size: .9rem;
  cursor: pointer;
  transition: all .25s;
  line-height: 1.6;
}
.fauna-pill:hover  { border-color: var(--color-primary); }
.fauna-pill.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* ---------- Fauna Card — Guía de Campo Premium ---------- */
.fauna-card {
  border: 1px solid #EAEADF;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,.10), 0 8px 10px -6px rgba(0,0,0,.08);
  background-color: #F9F7F1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
  transition: transform .3s ease, box-shadow .3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.fauna-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.22);
}

/* Photo */
.fauna-card-img-wrap {
  position: relative;
  overflow: hidden;
  height: 288px;
  border-radius: 1rem 1rem 0 0;
  flex-shrink: 0;
}
.fauna-card-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s ease;
}
.fauna-card:hover .fauna-card-img-wrap img { transform: scale(1.05); }

/* Tags overlay — top of image */
.fauna-card-tags {
  position: absolute;
  top: 1rem;
  left: 1rem;
  right: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: flex-start;
}

/* Category badge */
.fauna-category-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(0,0,0,.60);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  font-size: .72rem;
  font-weight: 600;
  padding: .3rem .75rem;
  border-radius: 999px;
}

/* Danger ribbon */
.fauna-danger-ribbon {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .7rem;
  font-weight: 700;
  padding: .3rem .75rem;
  border-radius: 999px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.fauna-danger-ribbon.inofensivo { background: rgba(209,229,213,.95); color: #1B4D30; }
.fauna-danger-ribbon.precaucion { background: rgba(254,243,199,.92); color: #92400E; }
.fauna-danger-ribbon.peligroso  { background: rgba(254,226,226,.92); color: #991B1B; }
.fauna-danger-ribbon.toxico     { background: rgba(237,233,254,.92); color: #5B21B6; }

/* Placeholder when no photo */
.fauna-img-placeholder {
  width: 100%; height: 100%;
  background: #E8F5EA;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5rem;
}

/* Card body */
.fauna-card-body {
  padding: 2rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.fauna-card-name {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1E293B;
  margin-bottom: .25rem;
  line-height: 1.3;
}
.fauna-card-scientific {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1rem;
  color: #475569;
  font-style: italic;
  margin-bottom: 1.25rem;
}
.fauna-card-desc {
  font-size: .875rem;
  color: #334155;
  line-height: 1.75;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 1rem;
}
.fauna-card-habitat {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  color: #334155;
  font-weight: 500;
  font-size: .85rem;
  margin-bottom: 1rem;
}
.fauna-card-habitat .bi-geo-alt-fill {
  color: #2C4C3B;
  flex-shrink: 0;
  margin-top: .1rem;
}

/* Card actions */
.fauna-card-actions { margin-top: auto; padding-top: 1.5rem; }
.fauna-card-actions .btn-view {
  width: 100%;
  background: #2C4C3B;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: .75rem 1.5rem;
  font-size: .875rem;
  font-weight: 600;
  transition: background .25s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  cursor: pointer;
}
.fauna-card-actions .btn-view:hover { background: #1E3529; }
/* ---------- Detail Modal header colors ---------- */
.detail-header-inofensivo { background: linear-gradient(135deg, #065F46, #10B981); }
.detail-header-precaucion { background: linear-gradient(135deg, #92400E, #F59E0B); }
.detail-header-peligroso  { background: linear-gradient(135deg, #7F1D1D, #EF4444); }
.detail-header-toxico     { background: linear-gradient(135deg, #3B0764, #8B5CF6); }

/* Detail sections */
.detail-section {
  padding: 1.5rem;
  border-bottom: 1px solid #F3F4F6;
}
.detail-section:last-child { border-bottom: none; }
.detail-section-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-gray);
  margin-bottom: .4rem;
}
.detail-what-to-do {
  background: #FFF7ED;
  border-left: 4px solid var(--color-accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 1rem 1.25rem;
}
.detail-what-to-do.peligroso { background: #FEF2F2; border-color: #EF4444; }
.detail-what-to-do.toxico    { background: #F5F3FF; border-color: #8B5CF6; }

/* ---------- IUCN Red List badge ---------- */
.iucn-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .68rem;
  font-weight: 700;
  padding: .25rem .65rem;
  border-radius: 999px;
  letter-spacing: .04em;
  white-space: nowrap;
  border: 1.5px solid transparent;
}
/* card variant — inline in tags row */
.iucn-badge-card {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
/* detail / inline variant */
.iucn-badge-inline { vertical-align: middle; }

/* colour variants */
.iucn-EX { background: rgba(0,0,0,.85);     color: #fff;    border-color: #000; }
.iucn-EW { background: rgba(84,35,68,.85);  color: #fff;    border-color: #542344; }
.iucn-CR { background: rgba(204,0,0,.85);   color: #fff;    border-color: #CC0000; }
.iucn-EN { background: rgba(204,102,0,.85); color: #fff;    border-color: #CC6600; }
.iucn-VU { background: rgba(204,153,0,.85); color: #fff;    border-color: #CC9900; }
.iucn-NT { background: rgba(0,153,0,.85);   color: #fff;    border-color: #009900; }
.iucn-LC { background: rgba(0,102,102,.85); color: #fff;    border-color: #006666; }
.iucn-DD { background: rgba(128,128,128,.85); color: #fff;  border-color: #808080; }
.iucn-NE { background: rgba(170,170,170,.85); color: #333;  border-color: #AAAAAA; }

/* skeleton while loading */
.iucn-skeleton {
  display: inline-block;
  width: 72px; height: 20px;
  border-radius: 999px;
  background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
  background-size: 200% 100%;
  animation: iucn-shimmer 1.2s infinite;
  vertical-align: middle;
}
@keyframes iucn-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------- Fun Facts — Ficha pública ---------- */
.fun-facts-list {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.fun-fact-item {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: .8rem 1rem;
}
.fun-fact-bulb { font-size: 1rem; flex-shrink: 0; line-height: 1.65; }
.fun-fact-text { font-size: .875rem; color: #1F2937; line-height: 1.6; }

/* ---------- Distribution Map button ---------- */
.btn-dist-map {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: .5rem 1.25rem;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition);
}
.btn-dist-map:hover  { background: var(--color-secondary); }
.btn-dist-map.btn-dist-map-disabled,
.btn-dist-map:disabled {
  background: #D1D5DB;
  color: #9CA3AF;
  cursor: not-allowed;
}

/* ---------- Distribution Map Modal ---------- */
.dist-map-modal-header {
  background: linear-gradient(135deg, #1B2F1B 0%, #2D6A4F 100%);
}

/* Skeleton / shimmer placeholder while image loads */
.dist-map-skeleton {
  width: 100%;
  height: 420px;
}
.dist-map-shimmer {
  background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
  background-size: 200% 100%;
  animation: iucn-shimmer 1.2s infinite;
}

/* Map image wrapper — needed for absolute positioning of info btn */
.dist-map-container {
  position: relative;
}

/* Rendered map image */
.dist-map-img {
  width: 100%;
  height: auto;
  display: block;
}

/* ⓘ button overlaid on top-right of map */
.dist-map-info-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(186, 117, 23, 0.92);
  color: #fff;
  border: none;
  font-size: .9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, transform .2s;
  z-index: 2;
}
.dist-map-info-btn:hover {
  background: rgba(148, 93, 17, 0.97);
  transform: scale(1.08);
}

/* Short italic note below the image */
.dist-map-short-note {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 13px;
  font-style: italic;
  color: var(--color-gray);
  margin: 12px 1rem 0;
  padding: 0;
}

/* Collapsible explanation panel */
.dist-map-panel {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .35s ease, opacity .35s ease;
  margin: 0 1rem;
}
.dist-map-panel.open {
  max-height: 800px;
  opacity: 1;
}
.dist-map-panel-inner {
  border-left: 2px solid #BA7517;
  background: var(--color-light-gray);
  padding: 14px 18px;
  margin-top: 12px;
  margin-bottom: 12px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.dist-map-panel-title {
  font-size: .9rem;
  font-weight: 700;
  color: #BA7517;
  margin-bottom: .75rem;
}
.dist-map-panel-inner p {
  font-size: .85rem;
  color: #374151;
  margin-bottom: .55rem;
  line-height: 1.6;
}
.dist-map-panel-inner p:last-of-type { margin-bottom: 0; }
.dist-map-panel-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .85rem;
  margin-bottom: .85rem;
}
.dist-map-badge {
  background: #FEF3C7;
  color: #92400E;
  border: 1px solid #FDE68A;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  padding: .2rem .65rem;
}
.dist-map-panel-close {
  background: none;
  border: 1.5px solid #BA7517;
  color: #BA7517;
  border-radius: 999px;
  padding: .3rem .9rem;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.dist-map-panel-close:hover {
  background: #BA7517;
  color: #fff;
}

/* Error state */
.dist-map-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 240px;
  color: var(--color-gray);
}

/* ---------- Empty state ---------- */
.fauna-empty {
  text-align: center;
  padding: 4rem 1rem;
  grid-column: 1 / -1;
}
.fauna-empty-icon { font-size: 5rem; margin-bottom: 1rem; }

#faunaDetailModal .modal-dialog { max-width: 950px; }
#distMapModal .modal-dialog      { max-width: 1000px; }