/* ==========================================================================
   nubarchiva – tokens.css (extended)
   Layers:
   1) Primitives: raw values (HSL, spacing, radius, etc.)
   2) Semantics: domain meanings (text, surface, brand, states, etc.)
   3) Component defaults can live in components.css using these semantics.
   ========================================================================== */

:root {
    /* ---------------------------------------------
     * 1) PRIMITIVES (raw/base tokens)
     * -------------------------------------------*/

    /* 1.1 Color – Primary brand in HSL for flexibility */
    --nb-color-primary-h: 219;
    --nb-color-primary-s: 41%;
    --nb-color-primary-l: 46%;

    /* 1.2 Neutral scale (grays) */
    --nb-gray-0: #ffffff;
    --nb-gray-50: #fafbfc;
    --nb-gray-100: #f5f6f8;
    --nb-gray-200: #eceef1;
    --nb-gray-300: #e3e5e8;
    --nb-gray-400: #cfd4da;
    --nb-gray-500: #b6bcc5;
    --nb-gray-600: #8b93a1;
    --nb-gray-700: #6a7180;
    --nb-gray-800: #474d59;
    --nb-gray-900: #1b1b1f;
    --nb-gray-1000: #0b0c0f;

    /* 1.3 Spacing scale (4px base) */
    --nb-space-1: 0.25rem; /* 4px  */
    --nb-space-2: 0.5rem;  /* 8px  */
    --nb-space-3: 0.75rem; /* 12px */
    --nb-space-4: 1rem;    /* 16px */
    --nb-space-5: 1.25rem; /* 20px */
    --nb-space-6: 1.5rem;  /* 24px */
    --nb-space-8: 2rem;    /* 32px */
    --nb-space-10: 2.5rem; /* 40px */
    --nb-space-12: 3rem;   /* 48px */

    /* 1.4 Typography */
    --nb-root-font-compact: 14px;
    --nb-root-font-default: 16px;
    --nb-root-font--comfort: 18px;

    --nb-font-family-sans: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --nb-font-family-serif: Georgia, "Times New Roman", serif;
    --nb-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

    --nb-font-size-xs: 0.75rem;
    --nb-font-size-sm: 0.875rem;
    --nb-font-size-md: 1rem;
    --nb-font-size-lg: 1.125rem;
    --nb-font-size-xl: 1.25rem;
    --nb-font-size-2xl: 1.5rem;
    --nb-font-size-3xl: 1.875rem;

    --nb-line-height-sm: 1.25;
    --nb-line-height-md: 1.5;
    --nb-line-height-lg: 1.75;

    --nb-font-weight-normal: 400;
    --nb-font-weight-medium: 500;
    --nb-font-weight-bold: 700;

    /* 1.5 Radius & Shadows */
    --nb-radius-xs: 4px;
    --nb-radius-sm: 6px;
    --nb-radius-md: 10px;
    --nb-radius-lg: 14px;
    --nb-radius-pill: 999px;

    --nb-shadow-sm: 0 1px 3px rgba(0, 0, 0, .08);
    --nb-shadow-md: 0 4px 10px rgba(0, 0, 0, .10);
    --nb-shadow-lg: 0 10px 24px rgba(0, 0, 0, .12);

    /* 1.6 Z-index layers */
    --nb-z-base: 1;
    --nb-z-sticky: 100;
    /* Banda indicadora de entorno: por encima del navbar fijo de Bootstrap 3 (1030). */
    --nb-z-env-indicator: 1050;
    --nb-z-dropdown: 1100;
    --nb-z-tooltip: 1200;
    --nb-z-modal: 1300;
    --nb-z-toast: 1400;

    /* 1.6.1 Anchura de contenido principal.
       Coincide con Bootstrap 3 .container (max-width en ≥1200px).
       Referenciado por modales y paneles que deben igualar esa anchura. */
    --nb-layout-content-width: 1170px;

    /* 1.6.2 Tamaños de modal — escala semántica abstracta (vocabulario).
       Cada modal del sistema (clase .nb-modal) elige su anchura referenciando
       una de estas cinco primitivas mediante --nb-modal-width en la regla CSS
       de su modificador. Los skins pueden sobreescribir cada tamaño (eje A)
       o cada modal individual (eje B). Ver README §1.6.2 y §2.10. */
    --nb-modal-size-xs:  320px;
    --nb-modal-size-sm:  480px;
    --nb-modal-size-md:  640px;
    --nb-modal-size-lg:  800px;
    --nb-modal-size-xl: 1024px;

    /* 1.6.3 Anclaje superior del modal (personalizable por skin).
       Distancia desde el borde superior del viewport. El skin de un cliente
       puede sobreescribir este valor (p. ej. en clientes con cabecera alta
       que necesitan empujar el modal más abajo). El max-height del modal se
       calcula de forma simétrica (mismo margen arriba y abajo) en
       components.css a partir de este token. */
    --nb-modal-top: 8vh;

    /* 1.7 Transitions & Easing */
    --nb-duration-fast: 120ms;
    --nb-duration-normal: 240ms;
    --nb-duration-slow: 480ms;

    --nb-ease-in: cubic-bezier(0.4, 0, 1, 1);
    --nb-ease-out: cubic-bezier(0, 0, 0.2, 1);
    --nb-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

    /* 1.8 Layout & Breakpoints */
    --nb-container-max: 1200px;
    --nb-sidebar-width: 280px;
    --nb-navbar-height: 64px;

    --nb-breakpoint-sm: 576px;
    --nb-breakpoint-md: 768px;
    --nb-breakpoint-lg: 992px;
    --nb-breakpoint-xl: 1200px;

    /* 1.9 Opacity / Interaction primitives */
    --nb-opacity-disabled: 0.45;
    --nb-opacity-overlay: 0.6;
    --nb-opacity-dimmed: 0.6;
    --nb-hover-scale: 1.02;

    /* 1.10 Direction (i18n) */
    --nb-direction: ltr;

    /* 1.11 Densidad (factor multiplicador). */
    --nb-density-scale-compact: 0.85;
    --nb-density-scale-cozy: 1;
    --nb-density-scale-comfortable: 1.15;
}

:root {
    /* ---------------------------------------------
     * 2) SEMANTICS (domain meanings)
     * -------------------------------------------*/

    /* 2.1 Brand */
    --nb-primary: hsl(var(--nb-color-primary-h) var(--nb-color-primary-s) var(--nb-color-primary-l));
    --nb-primary-contrast: #ffffff;

    --nb-secondary: #00bcd4;
    --nb-accent: #ffc107;

    /* 2.2 Text */
    --nb-text-primary: var(--nb-gray-900);
    --nb-text-secondary: #666666;
    --nb-text-inverse: #ffffff;
    --nb-text-muted: #8b93a1;
    --nb-text-link: var(--nb-primary);
    --nb-text-link-hover: color-mix(in srgb, var(--nb-primary) 90%, #000 10%);

    /* 2.3 Surfaces & Body */
    --nb-bg-body: var(--nb-gray-0);
    --nb-bg-surface: var(--nb-gray-0);
    --nb-bg-content: var(--nb-bg-body);
    --nb-content-area-padding: 0;
    --nb-content-area-gap: var(--nb-space-4);
    --nb-bg-overlay: rgba(0, 0, 0, var(--nb-opacity-overlay));

    /* 2.4 Borders & Dividers */
    --nb-border-default: var(--nb-gray-300);
    --nb-border-strong: var(--nb-gray-400);
    --nb-border-radius-base: var(--nb-radius-xs);

    /* 2.5 Focus/Outlines.
       Las primitivas (width, color) están separadas para ser usables en
       box-shadow (que no acepta el shorthand de outline). El token
       compuesto --nb-focus-ring queda como atajo para outline.
       El color deriva del hue del primario de cada cliente; se usa saturación y
       luminosidad moderadas (no el primario puro) para que el anillo sea visible
       sin resultar agresivo en primarios muy saturados. Vale para cualquier hue. */
    --nb-focus-ring-width: 2px;
    --nb-focus-ring-color: hsl(var(--nb-color-primary-h) 65% 52%);
    --nb-focus-ring: var(--nb-focus-ring-width) solid var(--nb-focus-ring-color);
    --nb-outline-contrast: 2px solid #000;

    /* 2.6 Navigation */
    --nb-navbar-bg: var(--nb-primary);
    --nb-navbar-fg: var(--nb-primary-contrast);

    --nb-sidebar-bg: var(--nb-bg-surface);
    --nb-sidebar-fg: var(--nb-text-primary);

    /* 2.7 Forms */
    --nb-density-scale: var(--nb-density-scale-cozy);
    --nb-control-font: var(--nb-font-size-md);
    --nb-control-pad-x-base: var(--nb-space-3);             /* 0.75rem la escala */
    --nb-control-pad-y-base: calc(var(--nb-space-2) - 1px); /* 0.5rem - 1px, ajusta alto BS3 */
    --nb-control-radius: var(--nb-border-radius-base);

    --nb-control-pad-x: calc(var(--nb-control-pad-x-base) * var(--nb-density-scale));
    --nb-control-pad-y: calc(var(--nb-control-pad-y-base) * var(--nb-density-scale));
    --nb-control-min-height: calc(var(--nb-control-font) * 2 * var(--nb-density-scale));

    --nb-input-bg: #ffffff;
    --nb-input-fg: var(--nb-text-primary);
    --nb-input-bg-readonly: var(--nb-gray-200);   /* distingue el campo de solo lectura del editable */
    --nb-input-fg-muted: var(--nb-text-secondary);
    --nb-input-border: var(--nb-border-default);
    /* Foco de los controles (input/textarea/select): marco sutil.
       - borde: rosa muy claro derivado del hue del primario (no el primario puro,
         que resultaba un marco rojo intenso).
       - halo (--nb-input-focus-ring): el color del anillo con baja opacidad, para
         que se difumine con el fondo en lugar de un anillo sólido. */
    --nb-input-border-focus: hsl(var(--nb-color-primary-h) 35% 74%);
    --nb-input-focus-ring: color-mix(in srgb, var(--nb-focus-ring-color) 18%, transparent);
    --nb-input-placeholder: #888888;
    --nb-label-fg: var(--nb-text-secondary);

    --nb-check-size: 1.1rem;
    --nb-check-border: var(--nb-border-default);

    /* 2.8 Tables */
    --nb-table-header-bg: var(--nb-bg-surface);
    --nb-table-header-fg: var(--nb-text-primary);
    --nb-table-row-hover-bg: #f3f6fb;
    --nb-table-border: var(--nb-border-default);
    --nb-table-footer-bg: var(--nb-bg-surface);
    --nb-table-footer-fg: var(--nb-text-primary);

    /* 2.8.1 Search highlights */
    --nb-highlight-odd-bg: #7EC6E6;
    --nb-highlight-even-bg: #B6D0DB;

    /* 2.8.2 Results footer */
    --nb-results-footer-bg: #dadcff;

    /* 2.9 Status (generic UI states) */
    --nb-status-success: #1e9e67;
    --nb-status-warning: #e1a60a;
    --nb-status-error: #d33b2f;
    --nb-status-info: #2182f3;
    --nb-status-contrast: #ffffff;

    /* 2.10 Controls – Buttons */
    --nb-btn-default-bg: var(--nb-bg-surface);
    --nb-btn-default-fg: var(--nb-text-primary);
    --nb-btn-default-border: var(--nb-border-default);
    --nb-btn-pad-x: calc(var(--nb-control-pad-x-base) * var(--nb-density-scale));
    --nb-btn-pad-y: calc(var(--nb-control-pad-y-base) * var(--nb-density-scale));
    --nb-btn-radius: var(--nb-border-radius-base);

    --nb-btn-default-bg-hover: color-mix(in srgb, var(--nb-btn-default-bg) 92%, #000 8%);
    --nb-btn-default-border-hover: var(--nb-border-strong);

    --nb-btn-primary-bg: var(--nb-primary);
    --nb-btn-primary-fg: var(--nb-primary-contrast);
    --nb-btn-primary-border: color-mix(in srgb, var(--nb-btn-primary-bg) 85%, #000 15%);
    --nb-btn-primary-bg-hover: color-mix(in srgb, var(--nb-btn-primary-bg) 92%, #000 8%);
    --nb-btn-primary-border-hover: color-mix(in srgb, var(--nb-btn-primary-bg) 75%, #000 25%);

    --nb-btn-link-fg: var(--nb-text-link);
    --nb-btn-link-fg-hover: var(--nb-text-link-hover);

    --nb-btn-disabled-opacity: var(--nb-opacity-disabled);

    --nb-btn-success-bg: var(--nb-status-success);
    --nb-btn-success-fg: var(--nb-status-contrast);
    --nb-btn-success-border: color-mix(in srgb, var(--nb-status-success) 85%, #000 15%);
    --nb-btn-success-bg-hover: color-mix(in srgb, var(--nb-status-success) 92%, #000 8%);
    --nb-btn-success-border-hover: color-mix(in srgb, var(--nb-status-success) 75%, #000 25%);

    --nb-btn-info-bg: var(--nb-status-info);
    --nb-btn-info-fg: var(--nb-status-contrast);
    --nb-btn-info-border: color-mix(in srgb, var(--nb-status-info) 85%, #000 15%);
    --nb-btn-info-bg-hover: color-mix(in srgb, var(--nb-status-info) 92%, #000 8%);
    --nb-btn-info-border-hover: color-mix(in srgb, var(--nb-status-info) 75%, #000 25%);

    --nb-btn-warning-bg: var(--nb-status-warning);
    --nb-btn-warning-fg: #000; /* mejor contraste en warning */
    --nb-btn-warning-border: color-mix(in srgb, var(--nb-status-warning) 85%, #000 15%);
    --nb-btn-warning-bg-hover: color-mix(in srgb, var(--nb-status-warning) 90%, #000 10%);
    --nb-btn-warning-border-hover: color-mix(in srgb, var(--nb-status-warning) 70%, #000 30%);

    --nb-btn-danger-bg: var(--nb-status-error);
    --nb-btn-danger-fg: var(--nb-status-contrast);
    --nb-btn-danger-border: color-mix(in srgb, var(--nb-status-error) 85%, #000 15%);
    --nb-btn-danger-bg-hover: color-mix(in srgb, var(--nb-status-error) 92%, #000 8%);
    --nb-btn-danger-border-hover: color-mix(in srgb, var(--nb-status-error) 75%, #000 25%);

    /* 2.10.1 Chips */
    --nb-chip-bg: #f5f5f5;
    --nb-chip-fg: var(--nb-text-secondary);
    --nb-chip-action-fg: #555;
    --nb-chip-hover-bg: #555;
    --nb-chip-hover-fg: #bbb;

    /* 2.10.2 Badges */
    --nb-badge-bg: rgb(48, 48, 48);
    --nb-badge-fg: var(--nb-text-inverse);

    /* 2.10.3 Card / card-grid (tarjeta y rejilla de tarjetas).
       Capa 2 semántica derivada de Capa 1. */
    --nb-card-bg: var(--nb-bg-surface);
    --nb-card-fg: var(--nb-text-primary);
    --nb-card-border: var(--nb-border-default);
    --nb-card-radius: var(--nb-radius-md);
    --nb-card-padding: var(--nb-space-4);
    --nb-card-shadow: var(--nb-shadow-sm);
    --nb-card-shadow-hover: var(--nb-shadow-md);
    --nb-card-grid-gap: var(--nb-space-4);
    --nb-card-grid-min: 16rem; /* ancho mínimo de columna de la rejilla auto-fill */

    /* 2.10.4 Panel / fieldset (contenedor de formulario y de contenido).
       Capa 2 semántica derivada de Capa 1. */
    --nb-panel-bg: var(--nb-bg-surface);
    --nb-panel-radius: var(--nb-border-radius-base);
    --nb-panel-shadow: var(--nb-shadow-sm);
    --nb-panel-heading-fg: var(--nb-text-primary);   /* cabecera y título de panel */
    --nb-legend-fg: var(--nb-text-primary);          /* leyenda de fieldset */

    /* 2.10.5 Rail lateral acoplable.
       Panel lateral no-modal que ancla formularios contextuales. Se fija al viewport con
       altura acotada y desplazamiento interno, dejando la barra de acciones siempre visible. */
    --nb-side-rail-width: var(--nb-sidebar-width);
    --nb-side-rail-bg: var(--nb-bg-surface);
    --nb-side-rail-border: var(--nb-border-default);
    --nb-side-rail-padding: var(--nb-space-3);
    --nb-side-rail-header-bg: var(--nb-bg-surface);
    --nb-side-rail-footer-bg: var(--nb-bg-surface);
    --nb-side-rail-sticky-top: var(--nb-space-4);
    --nb-side-rail-max-height: calc(100vh - var(--nb-space-8));

    /* 2.11 Typography semantics */
    --nb-root-font-size: var(--nb-root-font-default);

    --nb-font-body-family: var(--nb-font-family-sans);
    --nb-font-heading-family: var(--nb-font-family-sans);
    --nb-font-code-family: var(--nb-font-family-mono);

    --nb-font-body-size-small: var(--nb-font-size-sm);
    --nb-font-body-size: var(--nb-font-size-md);
    --nb-font-body-size-bigger: var(--nb-font-size-lg);

    --nb-font-body-weight: var(--nb-font-weight-normal);
    --nb-font-body-line: var(--nb-line-height-md);

    --nb-font-heading-weight: var(--nb-font-weight-bold);
    --nb-font-heading-line: 1.25;

    --nb-letter-spacing-tight: -0.01em;
    --nb-letter-spacing-normal: 0;
    --nb-letter-spacing-wide: 0.02em;

    --nb-h1-size: var(--nb-font-size-3xl);
    --nb-h2-size: var(--nb-font-size-2xl);
    --nb-h3-size: var(--nb-font-size-xl);
    --nb-h4-size: var(--nb-font-size-lg);
    --nb-h5-size: var(--nb-font-size-md);
    --nb-h6-size: var(--nb-font-size-sm);

    --nb-h1-color: var(--nb-text-primary);
    --nb-h2-color: var(--nb-text-primary);
    --nb-h3-color: var(--nb-text-primary);
    --nb-h4-color: var(--nb-text-primary);
    --nb-h5-color: var(--nb-text-primary);
    --nb-h6-color: var(--nb-text-primary);

    --nb-code-font-size: 0.95em;

    --nb-text-measure: 68ch;

    /* 2.12 Icons — Phosphor Bold (self-hosted, @phosphor-icons/web@2.1.2) */
    --nb-icon-font-family: "Phosphor-Bold";
    --nb-icon-font-size: var(--nb-font-body-size);

    /* Codepoints Phosphor v2.1.2 — Acciones */
    --nb-icon-action-search: "\e30c";    /* ph-magnifying-glass */
    --nb-icon-action-secondary-search: var(--nb-icon-action-search); /* mismo glifo que la búsqueda principal */
    --nb-icon-action-return: "\e08a";    /* ph-arrow-u-up-left */
    --nb-icon-action-close: "\e4f6";     /* ph-x */
    --nb-icon-action-expand: "\e3d4";    /* ph-plus */
    --nb-icon-action-collapse: "\e32a";  /* ph-minus */
    --nb-icon-action-print: "\e3dc";     /* ph-printer */
    --nb-icon-action-share: "\e408";     /* ph-share-network */
    --nb-icon-action-download: "\e20c";  /* ph-download-simple */
    --nb-icon-action-help: "\e2ce";      /* ph-info */
    --nb-icon-action-link: "\e2e2";      /* ph-link */
    --nb-icon-action-check: "\e182";     /* ph-check */
    --nb-icon-action-checkbox: "\e188";  /* ph-check-square */
    --nb-icon-action-edit: "\e34c";      /* ph-note-pencil */
    --nb-icon-action-view: "\e220";      /* ph-eye (bold) */
    --nb-icon-action-hide: "\e224";      /* ph-eye-slash */
    --nb-icon-action-delete: "\e4a6";    /* ph-trash (bold) */
    --nb-icon-action-binoculars: "\ea64"; /* ph-binoculars */
    --nb-icon-action-save: "\e248";      /* ph-floppy-disk */
    --nb-icon-action-add: "\e3d6";       /* ph-plus-circle */
    --nb-icon-action-upload: "\e4c0";    /* ph-upload-simple */
    --nb-icon-action-move-up: "\e08e";   /* ph-arrow-up */
    --nb-icon-action-move-down: "\e03e"; /* ph-arrow-down */
    --nb-icon-action-refresh: "\e094";   /* ph-arrows-clockwise */

    /* Codepoints Phosphor v2.1.2 — Estado (semántica de aviso/toast) */
    --nb-icon-status-warning: "\e4e0";   /* ph-warning */
    --nb-icon-status-error: "\e4e2";     /* ph-warning-circle */

    /* Codepoints Phosphor v2.1.2 — Navegación */
    --nb-icon-nav-prev: "\e138";         /* ph-caret-left */
    --nb-icon-nav-next: "\e13a";         /* ph-caret-right */
    --nb-icon-nav-up: "\e13c";           /* ph-caret-up */
    --nb-icon-nav-down: "\e136";         /* ph-caret-down */
    --nb-icon-nav-menu: "\e2f0";         /* ph-list */

    /* Codepoints Phosphor v2.1.2 — Vista */
    --nb-icon-view-list: "\e2f2";        /* ph-list-bullets */
    --nb-icon-view-grid: "\e464";        /* ph-squares-four */
    --nb-icon-view-sort: "\e444";        /* ph-sort-ascending */
    --nb-icon-view-more: "\e208";        /* ph-dots-three-vertical */
    --nb-icon-view-visual: "\e7c8";      /* ph-cursor-click — modo de edición visual (clic sobre la vista renderizada) */
    /* Historial/versiones: usa el glifo de "arrow-counter-clockwise" (volver atrás, restaurar)
       como aproximación semántica, al no estar disponible ph-clock-counter-clockwise. */
    --nb-icon-history: var(--nb-icon-viewer-rotate-left); /* ph-arrow-counter-clockwise (\e038) */

    /* Codepoints Phosphor v2.1.2 — Fichero */
    --nb-icon-file-pdf: "\e702";         /* ph-file-pdf */
    --nb-icon-file-archive: "\e958";     /* ph-file-zip */
    --nb-icon-file-folder: "\e24a";      /* ph-folder */

    /* Codepoints Phosphor v2.1.2 — Visor de imágenes */
    --nb-icon-viewer-zoom-in: "\e310";       /* ph-magnifying-glass-plus */
    --nb-icon-viewer-zoom-out: "\e30e";      /* ph-magnifying-glass-minus */
    --nb-icon-viewer-home: "\e626";          /* ph-frame-corners */
    --nb-icon-viewer-fullscreen: "\e0a2";    /* ph-arrows-out */
    --nb-icon-viewer-rotate-left: "\e038";   /* ph-arrow-counter-clockwise */
    --nb-icon-viewer-rotate-right: "\e036";  /* ph-arrow-clockwise */
    --nb-icon-viewer-flip: "\e83c";          /* ph-swap */

    /* Codepoints Phosphor v2.1.2 — Varios */
    --nb-icon-memory: "\e9c4";           /* ph-memory */
    --nb-icon-code: "\e1bc";             /* ph-code */
    --nb-icon-settings: "\e272";         /* ph-gear-six */
    --nb-icon-copy: "\e1ca";             /* ph-copy */

    /* Codepoints Phosphor v2.1.2 — Tipos de contenido */
    --nb-icon-content-image: "\e2ca";     /* ph-image */
    --nb-icon-content-gallery: "\e836";   /* ph-images */
    --nb-icon-content-grid: "\e296";      /* ph-grid-four */
    --nb-icon-content-cards: "\e0f8";     /* ph-cards */
    --nb-icon-content-slideshow: "\e654"; /* ph-presentation */
    --nb-icon-content-filmstrip: "\e792"; /* ph-film-strip */
    --nb-icon-content-stack: "\e466";     /* ph-stack */
    --nb-icon-content-text: "\e0a8";      /* ph-article */
    --nb-icon-content-video: "\e3d2";     /* ph-play-circle */

    /* -----------------------------------------------
     * 2.13 Visor de imágenes (semántica compartida)
     * Contrato visual para visores con overlay oscuro
     * (lightbox core, portal de difusión, etc.)
     * --------------------------------------------- */
    --nb-viewer-overlay-bg: rgba(0, 0, 0, 0.92);
    --nb-viewer-control-color: #fff;
    --nb-viewer-control-shadow: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.7));
    --nb-viewer-nav-bg: transparent;
    --nb-viewer-nav-bg-hover: transparent;
    --nb-viewer-nav-icon-size: 32px;
    --nb-viewer-tool-bg: rgba(255, 255, 255, 0.1);
    --nb-viewer-tool-bg-hover: rgba(255, 255, 255, 0.25);
    --nb-viewer-tool-size: 44px;
    --nb-viewer-tool-icon-size: 20px;
    --nb-viewer-caption-color: #fff;
    --nb-viewer-caption-font-size: var(--nb-font-body-size);
    --nb-viewer-counter-color: rgba(255, 255, 255, 0.8);
    --nb-viewer-counter-font-size: 13px;
}