/* ════════════════════════════════════════════════════════════════════
   GH · Descripción lateral · botón + panel off-canvas (drawer derecha)
   Prefijo .ghdl- · aislado del tema · verdes de marca
   ════════════════════════════════════════════════════════════════════ */

.ghdl {
  --ghdl-green:      #2EA76F;
  --ghdl-green-dark: #0F3D2E;
  --ghdl-grad:       linear-gradient(135deg, #2EA76F 0%, #0F3D2E 100%);
  --ghdl-text:       #1a2b22;
  --ghdl-border:     #e2e8e4;
  --ghdl-ease:       cubic-bezier(0.4, 0, 0.2, 1);
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
}

/* ─── Botón · bajo la descripción, centrado ───────────────────────── */
.ghdl__bar {
  display: flex;
  justify-content: center;
  margin: 8px 0 20px;
}
/* Relleno verde en reposo (hasta 2026-09-19 era un contorno que solo se
   rellenaba al pasar el ratón). Mismo lenguaje que el lanzador del estudio
   de hogar: degradado suave en reposo; al pasar, degradado más oscuro, se
   eleva 1px y crece la sombra; al pulsar, vuelve a su sitio. */
.ghdl__trigger {
  appearance: none;
  border: 1px solid var(--gh-green-600, #258759);
  background: var(--gh-green-grad-soft, var(--ghdl-green));
  color: #fff;
  padding: 10px 22px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 650;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(46, 167, 111, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition: background 0.2s var(--ghdl-ease), box-shadow 0.2s var(--ghdl-ease),
              transform 0.2s var(--ghdl-ease), border-color 0.2s var(--ghdl-ease);
}
.ghdl__trigger:hover,
.ghdl__trigger:focus-visible {
  background: var(--gh-green-grad, var(--ghdl-green-dark));
  border-color: var(--gh-green-700, #1F6F4A);
  box-shadow: 0 10px 24px rgba(46, 167, 111, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transform: translateY(-1px);
}
.ghdl__trigger:focus-visible {
  outline: 2px solid var(--gh-green-500, #2EA76F);
  outline-offset: 3px;
}
.ghdl__trigger:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(46, 167, 111, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
@media (prefers-reduced-motion: reduce) {
  .ghdl__trigger { transition: none; }
  .ghdl__trigger:hover,
  .ghdl__trigger:focus-visible,
  .ghdl__trigger:active { transform: none; }
}

/* ─── Overlay ─────────────────────────────────────────────────────── */
.ghdl__overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 61, 46, 0.45);
  opacity: 0;
  transition: opacity 0.3s var(--ghdl-ease);
  z-index: 1090;
}
.ghdl__overlay.ghdl__overlay--open { opacity: 1; }

/* ─── Panel (drawer) · entra desde la derecha ─────────────────────── */
.ghdl__panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  /* Ensanchado el 2026-08-16 (700 → 860): la descripción de gama es texto
     largo con listas y se leía estrecha. */
  width: min(860px, calc(94vw / var(--gh-zoom, 1)));
  background: #fff;
  box-shadow: -8px 0 30px rgba(15, 61, 46, 0.18);
  transform: translateX(100%);
  transition: transform 0.32s var(--ghdl-ease);
  z-index: 1100;
  display: flex;
  flex-direction: column;
  color: var(--ghdl-text);
}
.ghdl__panel.ghdl__panel--open { transform: translateX(0); }

.ghdl__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  border-bottom: 1px solid var(--ghdl-border);
  flex: 0 0 auto;
}
.ghdl__panel-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ghdl-green-dark);
}
.ghdl__close {
  appearance: none;
  border: none;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  color: var(--ghdl-text);
  cursor: pointer;
  padding: 0 4px;
  transition: color 0.2s var(--ghdl-ease);
}
.ghdl__close:hover { color: var(--ghdl-green); }

.ghdl__panel-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1 1 auto;
  line-height: 1.6;
}
.ghdl__panel-body :first-child { margin-top: 0; }
.ghdl__panel-body :last-child { margin-bottom: 0; }

/* Evita el scroll del fondo cuando el panel está abierto */
body.ghdl-open { overflow: hidden; }