/* ============================================
  Archivo: biodiversidad_ra.css
  Descripción: Estilos para la sección "Especies" del módulo de biodiversidad RA del sistema web Ecorut@s.
  Notas:
    - Incluye estilos para títulos, tarjetas informativas y botón interactivo.
    - El botón está basado en un diseño de Uiverse.io (autor: Deri-Kurniawan).
============================================ */

/* =========================
  1. VARIABLES DE COLOR
========================= */
:root {
  --color-negro: black;
  --color-blanco: white;
}

/* =========================
  2. TÍTULOS Y SEPARADORES
========================= */

/* Título principal de la página */
.titulo-principal h1 {
  color: var(--color-negro);
  font-weight: bold;
}

/* Línea decorativa bajo el título */
.separador {
  border-color: var(--color-negro) !important;
}

/* =========================
  3. TARJETAS DE ESPECIES
  Estructura informativa en bloques
========================= */

/* Sombra para las tarjetas */
.card {
  box-shadow: 0 4px 6px var(--color-negro);
}

/* Encabezado dentro de la tarjeta */
.card-body h3 {
  color: var(--color-negro);
  font-weight: bold;
}

/* Subtítulo dentro de la tarjeta */
.card-body h5 {
  color: var(--color-negro);
  font-weight: bold;
}

/* Texto descriptivo de la especie */
.card-body .card-text {
  font-weight: bold;
}

/* Listas dentro de las tarjetas */
.card-body ul {
  list-style-type: disc;
  padding-left: 20px;
}

/* Sublistas (anidadas) */
.card-body ul ul {
  list-style-type: circle;
  padding-left: 20px;
}

/* Scroll personalizado para contenidos largos */
.scroll-info-especie {
  max-height: 650px; /* Altura máxima ajustable */
  overflow-y: auto;
  padding-right: 10px;
}

/* =========================
  4. BOTÓN INTERACTIVO
  Basado en diseño de Deri-Kurniawan (Uiverse.io)
========================= */

.button {
  position: relative;
  padding: 12px 32px;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-negro);
  background-color: var(--color-blanco);
  border: none;
  border-radius: 50px;
  overflow: hidden;
  z-index: 1;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 6px 10px var(--color-negro);
  cursor: pointer;
}

/* Animación al pasar el cursor */
.button:hover {
  transform: scale(1.05);
  color: var(--color-negro);
  box-shadow: 0 10px 20px var(--color-negro);
}

/* Animación al presionar el botón */
.button:active {
  transform: scale(0.9);
}

/* Efecto de desplazamiento de fondo animado */
.button::before {
  content: "";
  position: absolute;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #007bff, #00bfff); /* Degradado azul */
  transition: all 0.85s ease-in-out;
  z-index: -1;
  border-radius: 50px;
}

/* Activación de animación en hover */
.button:hover::before {
  right: 100%;
}

/* =========================
  5. DISEÑO RESPONSIVO
  Ajustes para diferentes tamaños de pantalla
========================= */

/* Dispositivos medianos (tablets) */
@media screen and (max-width: 768px) {
  .titulo-principal h1 {
    font-size: 31px;
  }

  .card-body h3 {
    font-size: 23px;
  }

  .card-body h5 {
    font-size: 20px;
  }

  .card-body .card-text {
    font-size: 14px;
  }

  .button {
    font-size: 14px;
    padding: 13px;
  }
}

/* Dispositivos pequeños (móviles) */
@media screen and (max-width: 576px) {
  .titulo-principal h1 {
    font-size: 29px;
  }

  .card-body h3 {
    font-size: 21px;
  }

  .card-body h5 {
    font-size: 18px;
  }

  .card-body .card-text {
    font-size: 12px;
  }

  .button {
    font-size: 12px;
    padding: 11px;
  }
}