.theme-dark:root {
  /* Fondo detrás (barra superior, paneles laterales) */
  --tv-color-platform-background: #202231;

  /* Fondo del pane (detrás de las velas) */
  --tv-color-pane-background: #2f334a;

  /* Hover en los botones de la barra de herramientas */
  --tv-color-toolbar-button-background-hover: #222535;

  /* Fondo del popup/context menus */
  --tv-color-popup-background: #2f334a;

  /* Hover de elementos dentro del popup toolbox */
  --tv-color-popup-element-toolbox-background-hover: #222535;

  /* ============== NUEVAS PROPIEDADES PARA COMPLETAR ============== */

  /* Estado “expandido” (ej. botón pulsado que se desplegó) */
  --tv-color-toolbar-button-background-expanded: #3b3f59;

  /* Botón activo */
  --tv-color-toolbar-button-background-active: #3b3f59;

  /* Botón activo en hover */
  --tv-color-toolbar-button-background-active-hover: #33384f;

  /* Texto de botones de la barra (por defecto) */
  --tv-color-toolbar-button-text: #ffffff;
  /* Hover en texto/íconos de la barra */
  --tv-color-toolbar-button-text-hover: #ffffff;
  /* Texto de botón activo */
  --tv-color-toolbar-button-text-active: #ffffff;
  /* Texto de botón activo en hover */
  --tv-color-toolbar-button-text-active-hover: #ffffff;

  /* Texto de items activos (por ejemplo, toggles) */
  --tv-color-item-active-text: #ffffff;

  /* Fondo de botón toggle cuando está activo (ej. imán, bloquear dibujos) */
  --tv-color-toolbar-toggle-button-background-active: #3b3f59;
  /* Hover del botón toggle activo */
  --tv-color-toolbar-toggle-button-background-active-hover: #33384f;

  /* Línea divisoria en la barra de herramientas */
  --tv-color-toolbar-divider-background: #2f334a;

  /* Color del loader de “guardar diseño” */
  --tv-color-toolbar-save-layout-loader: #8589a3;

  /* ============= MENÚ EMERGENTE (POPUP) ============= */

  /* Texto principal de los items en popup */
  --tv-color-popup-element-text: #ffffff;
  /* Texto en hover */
  --tv-color-popup-element-text-hover: #ffffff;
  /* Fondo en hover de un item */
  --tv-color-popup-element-background-hover: #222535;
  /* Línea divisoria dentro del popup */
  --tv-color-popup-element-divider-background: #2f334a;

  /* Texto secundario o desactivado en popup (ej. hints, etc.) */
  --tv-color-popup-element-secondary-text: #bbbbbb;
  --tv-color-popup-element-hint-text: #888888;

  /* Texto cuando el item está activo */
  --tv-color-popup-element-text-active: #ffffff;
  /* Fondo del item cuando está activo */
  --tv-color-popup-element-background-active: #3b3f59;

  /* Texto de “toolbox” dentro del popup (e.g. submenús) */
  --tv-color-popup-element-toolbox-text: #ffffff;
  --tv-color-popup-element-toolbox-text-hover: #ffffff;
  /* Texto activo en hover (toolbox) */
  --tv-color-popup-element-toolbox-text-active-hover: #ffffff;
  /* Fondo hover del toolbox */
  --tv-color-popup-element-toolbox-background-hover: #222535;
  /* Fondo cuando está activo + hover */
  --tv-color-popup-element-toolbox-background-active-hover: #3b3f59;
}