/* =========================================================
   PANEL REDIMENSIONABLE
   ========================================================= */

#content-container.resizable-panel{
  overflow: visible;
  min-height: 225px;
  max-height: 85vh;
  position: relative;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  will-change: height;
  transition:
    height 260ms ease,
    min-height 260ms ease,
    max-height 260ms ease;
}

/* Mientras arrastras a mano, sin animación */
#content-container.resizable-panel.is-resizing{
  transition: none !important;
}

/* Grip fuera, abrazando la esquina superior derecha */
#content-container .resize-grip-tr{
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
  width: 22px;
  height: 22px;
  border-radius: 8px;
  background-color: #ff4fd8;
  background-image: url("/assets/imagenes/resize.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,.45);
  cursor: ns-resize;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  border: 1px solid rgba(255,255,255,.18);
}

#content-container .resize-grip-tr::before{
  content: none !important;
}

#content-container .resize-grip-tr:hover{
  filter: brightness(1.08);
}

/* Área scrollable mantiene el scroll interno */
#tabs-scroll-area.tabs-scroll-area{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 6px 6px 10px 6px;
  will-change: opacity, transform, height;
  transition:
    opacity 220ms ease,
    transform 220ms ease,
    height 260ms ease,
    padding 220ms ease;
}