/* ==========================================================
   Estilo visual para el manual BEAGLE en Quarto
   Paleta tomada del logo:
   Verde principal: #99AD2E
   Café texto/logo: #5F3C2B
   Fondo crema: #FEFAED
   Verde oscuro auxiliar: #41605D
   ========================================================== */

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

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

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

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

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

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

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

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

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

#quarto-sidebar .sidebar-title,
#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;
}

#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;
}

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

/* Logo en barra lateral */
#quarto-sidebar .sidebar-logo img {
  max-width: 155px;
  height: auto;
  display: block;
  margin: 16px auto 12px auto;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.12));
}

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

/* Barra superior en pantallas pequeñas */
.navbar {
  background-color: var(--beagle-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(--beagle-brown) !important;
  border-left: 3px solid var(--beagle-green);
}

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

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

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

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

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

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

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

.btn-primary {
  background-color: var(--beagle-green) !important;
  border-color: var(--beagle-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(--beagle-brown);
}