/* ==========================================================================
   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;
    --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-200);
    --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. */
    --nb-focus-ring-width: 2px;
    --nb-focus-ring-color: hsl(var(--nb-color-primary-h) 90% 50%);
    --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-bg-surface);
    --nb-input-fg-muted: var(--nb-text-secondary);
    --nb-input-border: var(--nb-border-default);
    --nb-input-border-focus: var(--nb-primary);
    --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) 88%, #fff 12%);
    --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.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); /* fallback al icono 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-delete: "\e4a6";    /* ph-trash (bold) */
    --nb-icon-action-binoculars: "\ea64"; /* ph-binoculars */

    /* 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 */

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

    /* 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 */

    /* -----------------------------------------------
     * 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;
}