/* ==========================================================
   Estilo visual para Patrones filogenéticos en Quarto
   Basado en la apariencia del manual BEAGLE
   ========================================================== */

:root {
  --unisse-green: #99AD2E;
  --unisse-green-dark: #758A18;
  --unisse-brown: #5F3C2B;
  --unisse-white: #FFFFFF;
  --unisse-soft-green: #EEF3D4;
  --unisse-dark-teal: #41605D;
  --unisse-text: #2F2B25;
}

/* Fondo general */
body {
  background-color: var(--unisse-cream) !important;
  color: var(--unisse-text);
}

/* Contenido sin cajas blancas duras */
main.content,
.content,
.quarto-content {
  background-color: transparent !important;
}

/* Encabezados */
h1, h2, h3, h4 {
  color: var(--unisse-brown);
  font-weight: 700;
}

h1.title {
  color: var(--unisse-brown);
}

h2 {
  border-bottom: 3px solid var(--unisse-green);
  padding-bottom: 0.25rem;
}

/* Enlaces */
a {
  color: var(--unisse-green-dark);
}

a:hover {
  color: var(--unisse-brown);
}

/* Barra lateral izquierda */
#quarto-sidebar.sidebar {
  background: linear-gradient(
    180deg,
    var(--unisse-green) 0%,
    var(--unisse-green-dark) 100%
  ) !important;
  border-right: none !important;
}

/* ==========================================================
   Logo nativo de Quarto en sidebar
   IMPORTANTE:
   No usar display: block !important aquí, porque Quarto genera
   una versión desktop y otra móvil del logo. Forzar display hace
   que aparezcan dos logos.
   ========================================================== */

#quarto-sidebar .sidebar-header {
  width: 100% !important;
  text-align: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#quarto-sidebar .sidebar-logo-container {
  width: 100% !important;
  text-align: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Control de tamaño del logo */
#quarto-sidebar img.sidebar-logo,
#quarto-sidebar .sidebar-logo img {
  width: 140px !important;
  max-width: 140px !important;
  height: auto !important;
  margin: 18px auto 14px auto !important;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.12));
}

/* Oculta el título del sidebar para que domine el logo */
#quarto-sidebar .sidebar-title {
  display: none !important;
}

/* Texto del sidebar */
#quarto-sidebar .sidebar-item a,
#quarto-sidebar .sidebar-item .sidebar-link,
#quarto-sidebar .sidebar-section h2,
#quarto-sidebar .sidebar-section .sidebar-section-text {
  color: #ffffff !important;
}

/* Elemento activo del sidebar */
#quarto-sidebar .sidebar-item .active > .sidebar-link,
#quarto-sidebar .sidebar-item .sidebar-link.active {
  background: rgba(95, 60, 43, 0.30) !important;
  color: #ffffff !important;
  border-left: 5px solid #ffffff;
}

/* Hover del sidebar */
#quarto-sidebar .sidebar-item .sidebar-link:hover {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
  text-decoration: none;
}

/* Barra superior en pantallas pequeñas */
.navbar {
  background-color: var(--unisse-green) !important;
}

.navbar-title,
.navbar a {
  color: #ffffff !important;
}

/* TOC derecho */
#quarto-sidebar-secondary.sidebar {
  background: transparent !important;
  border-left: 2px solid rgba(153, 173, 46, 0.25) !important;
}

#quarto-sidebar-secondary .sidebar-item .sidebar-link.active {
  color: var(--unisse-brown) !important;
  border-left: 3px solid var(--unisse-green);
}

/* Bloques de código */
pre.sourceCode,
div.sourceCode {
  border-left: 5px solid var(--unisse-green);
  border-radius: 8px;
}

code {
  color: var(--unisse-brown);
}

/* Cajas tipo nota */
.callout.callout-style-default {
  border-left-color: var(--unisse-green) !important;
}

.callout-note {
  background-color: var(--unisse-soft-green) !important;
}

/* Tablas */
table {
  background-color: rgba(255,255,255,0.35);
}

thead {
  border-bottom: 3px solid var(--unisse-green);
}

/* Botones y navegación */
.btn,
.page-link {
  border-color: var(--unisse-green) !important;
}

.btn-primary {
  background-color: var(--unisse-green) !important;
  border-color: var(--unisse-green-dark) !important;
}

/* Portada del index */
.beagle-hero {
  text-align: center;
  padding: 2rem 1rem 1rem 1rem;
}

.beagle-hero img {
  max-width: 260px;
  margin-bottom: 1rem;
}

.beagle-hero h1 {
  font-size: 2.4rem;
  margin-bottom: 0.2rem;
}

.beagle-hero p {
  font-size: 1.15rem;
  color: var(--unisse-brown);
}