/* ============================================================
   BRAND JUNGLE — altura fija de los dashboards

   Problema: los paneles se conmutan con display:none/block dentro de un
   contenedor de altura automática (o con min-height). Cada panel mide lo
   que mide su contenido, así que al cambiar de pestaña el dashboard
   entero crecía o se encogía y la página daba un salto.

   Criterio: el contenedor manda. Se le fija una altura y el panel activo
   se adapta dentro de ella. Si un panel tuviera más contenido del que
   cabe, se desplaza por dentro en vez de estirar el marco.

   Se carga después del <style> de cada caso, así que sus reglas ganan
   por orden sin necesidad de !important.
   ============================================================ */

/* ---------- Reglas comunes a cualquier dashboard ---------- */
.pf-body,
.crm-body,
.crm-shell {
  /* el contenedor deja de crecer con el contenido */
  min-height: 0;
}

/* El panel activo ocupa el alto disponible y reparte su contenido:
   cabecera arriba, cuerpo elástico en medio, pie abajo. */
.pf-panel,
.crm-panel.is-active,
.crm-panel.active,
.feat-panel.is-active {
  min-height: 0;
  max-height: 100%;
}

/* ============================================================
   1 · Dashboard de la plataforma (home y ES)
   ============================================================ */
.pf-body {
  height: clamp(380px, 36vw, 470px);
  overflow: hidden;
}

.pf-nav {
  min-height: 0;
  overflow-y: auto;
}

.pf-main {
  min-height: 0;
  overflow: hidden;
  display: grid;
}

.pf-panel {
  height: 100%;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: stretch;
  overflow: hidden;
}

/* El bloque central es el que cede: se desplaza por dentro si hace falta */
.pf-panel > .pf-chart,
.pf-panel > .pf-rows,
.pf-panel > .pf-board,
.pf-panel > .pf-chat {
  min-height: 0;
  overflow-y: auto;
}

.pf-panel > .pf-stats,
.pf-panel > .pf-panel-foot { min-height: 0; }

/* Las barras se adaptan al alto disponible en vez de imponer 88px */
.pf-bars { height: 100%; min-height: 60px; }
.pf-chart { display: grid; grid-template-rows: auto minmax(0, 1fr); }

.pf-rows ul { overflow-y: auto; min-height: 0; }

@media (max-width: 899px) {
  .pf-body { height: auto; min-height: 0; overflow: visible; }
  .pf-main { overflow: visible; }
  .pf-panel { height: auto; overflow: visible; }
  .pf-bars { height: 88px; }
}

/* ============================================================
   2 · Dashboards de los casos de estudio
   ============================================================ */

/* Harmony — .crm-body traía min-height:540px, que permite crecer */
.crm-body {
  height: clamp(420px, 40vw, 540px);
  min-height: 0;
  overflow: hidden;
}

.crm-body > .crm-main,
.crm-body > nav {
  min-height: 0;
  overflow-y: auto;
}

.crm-panel.is-active,
.crm-panel.active {
  height: 100%;
  overflow-y: auto;
}

/* Harmony — paneles de funcionalidades del móvil */
.feat-body,
.mini-feat-preview {
  min-height: 0;
}

.feat-panel.is-active { overflow-y: auto; }

/* ExplorActive — .crm-main es el contenedor de paneles */
.crm-main {
  min-height: 0;
  overflow: hidden;
  display: grid;
}

@media (max-width: 899px) {
  .crm-body { height: auto; overflow: visible; }
  .crm-main { overflow: visible; }
  .crm-panel.is-active,
  .crm-panel.active { height: auto; overflow: visible; }
}

/* La barra de desplazamiento interna, discreta y en clave de marca */
.pf-panel *::-webkit-scrollbar,
.crm-panel::-webkit-scrollbar,
.pf-nav::-webkit-scrollbar,
.crm-main::-webkit-scrollbar { width: 6px; }

.pf-panel *::-webkit-scrollbar-thumb,
.crm-panel::-webkit-scrollbar-thumb,
.pf-nav::-webkit-scrollbar-thumb,
.crm-main::-webkit-scrollbar-thumb {
  background: rgba(156, 176, 1, 0.35);
  border-radius: 999px;
}

.pf-panel *,
.crm-panel,
.pf-nav,
.crm-main { scrollbar-width: thin; scrollbar-color: rgba(156, 176, 1, 0.35) transparent; }