/* ==========================================================================
   nubarchiva – components.css (Bootstrap 3.2 friendly)
   Requires: tokens.css
   Load after bootstrap.css
   ========================================================================== */

html {
    direction: var(--nb-direction);
    font-size: var(--nb-root-font-size);
}

body {
    background: var(--nb-bg-body);
    color: var(--nb-text-primary);
    font-family: var(--nb-font-body-family);
    font-size: var(--nb-font-body-size);
    line-height: var(--nb-font-body-line);
}

/* Links */
a {
    color: var(--nb-text-link);
}

a:focus {
    color: inherit;
    text-decoration: none;
}

a:hover, a:focus-visible {
    color: var(--nb-text-link-hover);
    text-decoration: none;
}

/* Anillo solo en teclado (WCAG 2.4.7). Selectores explícitos para anular
   las reglas equivalentes de Bootstrap 3.2 (a:focus, button:focus, …),
   que tienen especificidad mayor que :focus solo. */
:focus,
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus,
input[type="file"]:focus,
.btn:focus,
.btn:active:focus,
.btn.active:focus {
    outline: none;
    outline-offset: 0;
}

:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
input[type="radio"]:focus-visible,
input[type="checkbox"]:focus-visible,
input[type="file"]:focus-visible,
.btn:focus-visible,
.btn:active:focus-visible,
.btn.active:focus-visible {
    outline: 3px solid var(--nb-input-focus-ring);
    outline-offset: 0;
}

/* Headings with typography semantics */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--nb-font-heading-family);
    font-weight: var(--nb-font-heading-weight);
    letter-spacing: var(--nb-letter-spacing-tight);
    line-height: var(--nb-font-heading-line);
    margin-top: 0;
    margin-bottom: var(--nb-space-4);
}

h1, .h1 {
    font-size: var(--nb-h1-size);
    color: var(--nb-h1-color);
}

h2, .h2 {
    font-size: var(--nb-h2-size);
    color: var(--nb-h2-color);
}

h3, .h3 {
    font-size: var(--nb-h3-size);
    color: var(--nb-h3-color);
}

h4, .h4 {
    font-size: var(--nb-h4-size);
    color: var(--nb-h4-color);
}

h5, .h5 {
    font-size: var(--nb-h5-size);
    color: var(--nb-h5-color);
}

h6, .h6 {
    font-size: var(--nb-h6-size);
    color: var(--nb-h6-color);
}

small, .small {
    color: var(--nb-text-muted);
}

.lead {
    font-size: var(--nb-font-size-lg);
    color: var(--nb-text-secondary);
}

hr {
    border-color: var(--nb-border-default);
}

.page-header {
    border-bottom-color: var(--nb-border-default);
    margin: var(--nb-space-6) 0 var(--nb-space-4);
}

/* Code / monospace */
code, kbd, pre, samp {
    font-family: var(--nb-font-code-family);
    font-size: var(--nb-code-font-size);
}

pre {
    background: var(--nb-bg-surface);
    color: var(--nb-text-primary);
    border: 1px solid var(--nb-border-default);
    border-radius: var(--nb-border-radius-base);
}

/* ==========================================================================
   COMPONENT: Icons (.nb-icon)
   Phosphor Icons — clases semánticas desacopladas de la librería.
   Los skins redefinen --nb-icon-font-family en su theme.css.
   ========================================================================== */

/* @font-face — Phosphor Bold (alojada en el propio producto, @phosphor-icons/web@2.1.2).
   La declaración pertenece al componente, no al tema. */
@font-face {
    font-family: "Phosphor-Bold";
    src: url("icons/fonts/Phosphor-Bold.woff2") format("woff2"),
         url("icons/fonts/Phosphor-Bold.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.nb-icon {
    display: inline-block;
    font-size: var(--nb-icon-font-size);
    line-height: 1;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    speak: never;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.nb-icon::before {
    font-family: var(--nb-icon-font-family);
}

/* Acciones */
.nb-icon--search::before   { content: var(--nb-icon-action-search); }
.nb-icon--secondary-search::before { content: var(--nb-icon-action-secondary-search); }
.nb-icon--return::before   { content: var(--nb-icon-action-return); }
.nb-icon--close::before    { content: var(--nb-icon-action-close); }
.nb-icon--expand::before   { content: var(--nb-icon-action-expand); }
.nb-icon--collapse::before { content: var(--nb-icon-action-collapse); }
.nb-icon--print::before    { content: var(--nb-icon-action-print); }
.nb-icon--share::before    { content: var(--nb-icon-action-share); }
.nb-icon--download::before { content: var(--nb-icon-action-download); }
.nb-icon--help::before     { content: var(--nb-icon-action-help); }
.nb-icon--link::before     { content: var(--nb-icon-action-link); }
.nb-icon--check::before    { content: var(--nb-icon-action-check); }
.nb-icon--checkbox::before { content: var(--nb-icon-action-checkbox); }
.nb-icon--edit::before       { content: var(--nb-icon-action-edit); }
.nb-icon--view::before       { content: var(--nb-icon-action-view); }
.nb-icon--hide::before       { content: var(--nb-icon-action-hide); }
.nb-icon--delete::before     { content: var(--nb-icon-action-delete); }
.nb-icon--binoculars::before { content: var(--nb-icon-action-binoculars); }
.nb-icon--save::before       { content: var(--nb-icon-action-save); }
.nb-icon--add::before        { content: var(--nb-icon-action-add); }
.nb-icon--upload::before     { content: var(--nb-icon-action-upload); }
.nb-icon--move-up::before    { content: var(--nb-icon-action-move-up); }
.nb-icon--move-down::before  { content: var(--nb-icon-action-move-down); }
.nb-icon--refresh::before    { content: var(--nb-icon-action-refresh); }

/* Estado (semántica de aviso/toast) */
.nb-icon--warning::before    { content: var(--nb-icon-status-warning); }
.nb-icon--error::before      { content: var(--nb-icon-status-error); }

/* Navegación */
.nb-icon--nav-prev::before { content: var(--nb-icon-nav-prev); }
.nb-icon--nav-next::before { content: var(--nb-icon-nav-next); }
.nb-icon--nav-up::before   { content: var(--nb-icon-nav-up); }
.nb-icon--nav-down::before { content: var(--nb-icon-nav-down); }
.nb-icon--nav-menu::before { content: var(--nb-icon-nav-menu); }

/* Vista */
.nb-icon--view-list::before { content: var(--nb-icon-view-list); }
.nb-icon--view-grid::before { content: var(--nb-icon-view-grid); }
.nb-icon--view-sort::before { content: var(--nb-icon-view-sort); }
.nb-icon--view-more::before { content: var(--nb-icon-view-more); }
.nb-icon--view-visual::before { content: var(--nb-icon-view-visual); }
.nb-icon--history::before   { content: var(--nb-icon-history); }

/* Fichero */
.nb-icon--file-pdf::before     { content: var(--nb-icon-file-pdf); }
.nb-icon--file-archive::before { content: var(--nb-icon-file-archive); }
.nb-icon--folder::before       { content: var(--nb-icon-file-folder); }

/* Visor de imágenes */
.nb-icon--viewer-zoom-in::before     { content: var(--nb-icon-viewer-zoom-in); }
.nb-icon--viewer-zoom-out::before    { content: var(--nb-icon-viewer-zoom-out); }
.nb-icon--viewer-home::before        { content: var(--nb-icon-viewer-home); }
.nb-icon--viewer-fullscreen::before  { content: var(--nb-icon-viewer-fullscreen); }
.nb-icon--viewer-rotate-left::before { content: var(--nb-icon-viewer-rotate-left); }
.nb-icon--viewer-rotate-right::before{ content: var(--nb-icon-viewer-rotate-right); }
.nb-icon--viewer-flip::before        { content: var(--nb-icon-viewer-flip); }

/* Varios */
.nb-icon--memory::before   { content: var(--nb-icon-memory); }
.nb-icon--code::before     { content: var(--nb-icon-code); }
.nb-icon--settings::before { content: var(--nb-icon-settings); }
.nb-icon--copy::before     { content: var(--nb-icon-copy); }

/* Tipos de contenido */
.nb-icon--image::before     { content: var(--nb-icon-content-image); }
.nb-icon--gallery::before   { content: var(--nb-icon-content-gallery); }
.nb-icon--grid::before      { content: var(--nb-icon-content-grid); }
.nb-icon--cards::before     { content: var(--nb-icon-content-cards); }
.nb-icon--slideshow::before { content: var(--nb-icon-content-slideshow); }
.nb-icon--filmstrip::before { content: var(--nb-icon-content-filmstrip); }
.nb-icon--stack::before     { content: var(--nb-icon-content-stack); }
.nb-icon--text::before      { content: var(--nb-icon-content-text); }
.nb-icon--video::before     { content: var(--nb-icon-content-video); }

/* ==========================================================================
   COMPONENT: Modales (.nb-modal)
   Geometría universal + reglas auxiliares (backdrop, scroll-lock).
   La clase .nb-modal aporta el centrado y el tamaño por defecto; cada modal
   del sistema añade un modificador propio (declarado en el módulo que lo
   emite) que mapea --nb-modal-width a uno de los tokens --nb-modal-size-*.
   Ver README §2.10 para la doctrina completa.
   ========================================================================== */

.nb-modal {
    position: fixed;
    top: var(--nb-modal-top);
    left: 50%;
    transform: translateX(-50%);

    width: var(--nb-modal-width, var(--nb-modal-size-md));
    max-width: calc(100% - 30px);
    max-height: calc(100vh - 2 * var(--nb-modal-top));
    overflow-y: auto;

    z-index: var(--nb-z-modal);
}

@media (max-width: 767px) {
    .nb-modal {
        top: 0;
        left: 0;
        transform: none;
        width: 100%;
        max-width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
        padding-top:    env(safe-area-inset-top);
        padding-right:  env(safe-area-inset-right);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left:   env(safe-area-inset-left);
        overscroll-behavior: contain;
    }
}

.modal-backdrop {
    z-index: calc(var(--nb-z-modal) - 1);
}

body:has(.modal-backdrop) {
    overflow: hidden;
}

/* ==========================================================================
   COMPONENT: Toast (.nb-toast)
   Aviso transitorio NO modal, con accion opcional. Lo emite el componente de
   plataforma ToastRegion/ToastPanel (dga-commons).

   Patron "alert" accesible (AA): fondo claro de superficie + borde de acento de
   color + texto oscuro -> contraste de texto garantizado (>= 4.5:1). El color de
   estado solo se usa en el borde izquierdo y el icono, nunca como fondo saturado
   con texto blanco. La region es fija (z = --nb-z-toast, por encima del modal) y
   PREEXISTE en el DOM con sus dos live regions (polite/assertive).
   ========================================================================== */

.nb-toast-region {
    position: fixed;
    right: var(--nb-space-3);
    bottom: var(--nb-space-3);
    z-index: var(--nb-z-toast);
    width: auto;
    max-width: calc(100% - 2 * var(--nb-space-3));
    /* La region vacia no debe interceptar clics; cada toast los recupera. */
    pointer-events: none;
}

.nb-toast-region__live {
    display: flex;
    flex-direction: column;
    gap: var(--nb-space-2);
}

/* Separacion entre la subregion cortes y la asertiva solo cuando ambas tienen toasts. */
.nb-toast-region__live:not(:empty) + .nb-toast-region__live:not(:empty) {
    margin-top: var(--nb-space-2);
}

.nb-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: var(--nb-space-2);
    min-width: 260px;
    max-width: 420px;
    padding: var(--nb-space-2) var(--nb-space-3);
    background: var(--nb-bg-surface);
    color: var(--nb-text-primary);
    border: 1px solid var(--nb-border-default);
    border-left: 4px solid var(--nb-toast-accent, var(--nb-status-info));
    border-radius: var(--nb-radius-sm);
    box-shadow: var(--nb-shadow-lg);
    /* Entrada por animacion CSS pura: se ejecuta al crear el nodo (incluido el
       re-render del refresco Ajax), sin depender de ninguna clase puesta por JS. */
    animation: nb-toast-in .18s ease both;
}

@keyframes nb-toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

.nb-toast.nb-toast--leaving {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease;
}

.nb-toast__icon {
    flex: 0 0 auto;
    color: var(--nb-toast-accent);
    font-size: 1.125rem;
    line-height: 1.4;
}

.nb-toast__message {
    flex: 1 1 auto;
    font-size: var(--nb-font-body-size);
    line-height: 1.4;
}

.nb-toast__action {
    flex: 0 0 auto;
    align-self: center;
    font-weight: 600;
    color: var(--nb-toast-accent);
    text-decoration: underline;
    cursor: pointer;
    white-space: nowrap;
}

.nb-toast__action:hover {
    text-decoration: none;
}

.nb-toast__action:focus {
    outline: var(--nb-focus-ring);
    outline-offset: 2px;
}

.nb-toast__close {
    flex: 0 0 auto;
    align-self: flex-start;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: var(--nb-radius-sm);
    color: var(--nb-text-secondary);
    text-decoration: none;
    cursor: pointer;
    transition: color .15s, background-color .15s;
}

.nb-toast__close:hover {
    color: var(--nb-text-primary);
    background-color: var(--nb-btn-default-bg);
    text-decoration: none;
}

.nb-toast__close:focus {
    outline: var(--nb-focus-ring);
    outline-offset: 1px;
}

/* Acento de color por variante (consumido por borde izquierdo e icono). */
.nb-toast--success { --nb-toast-accent: var(--nb-status-success); }
.nb-toast--info    { --nb-toast-accent: var(--nb-status-info); }
.nb-toast--warning { --nb-toast-accent: var(--nb-status-warning); }
.nb-toast--error   { --nb-toast-accent: var(--nb-status-error); }

@media (prefers-reduced-motion: reduce) {
    .nb-toast {
        animation: none;
    }
    .nb-toast.nb-toast--leaving {
        transition: none;
    }
}

@media (max-width: 767px) {
    .nb-toast-region {
        left: var(--nb-space-3);
        right: var(--nb-space-3);
    }

    .nb-toast {
        min-width: 0;
        max-width: 100%;
    }
}

/* Labels (elements) */
label, .control-label {
    color: var(--nb-label-fg);
    font-family: var(--nb-font-body-family);
    font-weight: var(--nb-font-weight-medium);
    letter-spacing: var(--nb-letter-spacing-normal);
}

label.required::after {
    content: " *";
    color: var(--nb-status-error);
}

.help-block {
    color: var(--nb-text-muted);
    margin-top: var(--nb-space-2);
}

/* Navbar */
.navbar {
    min-height: var(--nb-navbar-height);
    border: none;
    border-radius: 0;
}

.navbar-default {
    background-color: var(--nb-navbar-bg);
    color: var(--nb-navbar-fg);
}

.navbar-default .navbar-brand,
.navbar-default .navbar-nav > li > a {
    color: var(--nb-navbar-fg);
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-brand:hover {
    opacity: .9;
}

/* Navbar inverse variant */
.navbar-inverse {
    background-color: var(--nb-text-primary);
    color: var(--nb-text-inverse);
    border: none;
}

.navbar-inverse .navbar-brand, .navbar-inverse .navbar-nav > li > a {
    color: var(--nb-text-inverse);
}

.navbar-inverse .navbar-toggle .icon-bar {
    background-color: var(--nb-text-inverse);
}

.navbar-toggle {
    border-color: transparent;
}

.navbar a.nb-nav-active,
.navbar a.nb-nav-active:hover,
.navbar a.nb-nav-active:focus {
    color: var(--nb-text-primary);
    cursor: default;
    font-style: italic;
    font-weight: var(--nb-font-weight-medium);
    text-decoration: none;
    pointer-events: none;
}

/* Buttons */
.btn {
    font-size: var(--nb-font-body-size);
    font-weight: var(--nb-font-weight-normal);
    line-height: var(--nb-font-body-line);
    border-radius: var(--nb-btn-radius);
    padding: var(--nb-btn-pad-y) var(--nb-btn-pad-x);
    transition: transform var(--nb-duration-fast) var(--nb-ease-out),
                filter var(--nb-duration-fast) var(--nb-ease-out);
}

.btn:active {
    transform: translateY(1px);
}

.btn:disabled, .btn.disabled {
    opacity: var(--nb-btn-disabled-opacity);
    cursor: not-allowed;
}

/* Botón decorativo: acompaña visualmente a una fila de controles sin ser accionable. Al quedar
   fuera del alcance del puntero no ofrece cursor de acción denegada ni reacciona al posarse. */
.btn[aria-hidden="true"] {
    cursor: default;
    pointer-events: none;
}

.btn-primary {
    background-color: var(--nb-btn-primary-bg);
    border-color: var(--nb-btn-primary-border);
    color: var(--nb-primary-contrast);
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--nb-btn-primary-bg-hover);
    border-color: var(--nb-btn-primary-border-hover);
    color: var(--nb-btn-primary-fg);
}

.btn-default {
    background: var(--nb-btn-default-bg);
    color: var(--nb-btn-default-fg);
    border: 1px solid var(--nb-btn-default-border);
}

.btn-default:hover, .btn-default:focus {
    background: var(--nb-btn-default-bg-hover);
    border-color: var(--nb-btn-default-border-hover);
}

/* btn-link */
.btn-link {
    color: var(--nb-btn-link-fg);
    font-weight: var(--nb-font-weight-medium);
    border-color: transparent;
}

.btn-link:hover, .btn-link:focus {
    color: var(--nb-btn-link-fg-hover);
    text-decoration: underline;
    background-color: transparent;
    border-color: transparent;
}

.btn-link[disabled], fieldset[disabled] .btn-link {
    color: var(--nb-text-muted);
    text-decoration: none;
    pointer-events: none;
}

/* Contextual buttons */
.btn-success {
    background: var(--nb-btn-success-bg);
    color: var(--nb-btn-success-fg);
    border-color: var(--nb-btn-success-border);
}

.btn-success:hover, .btn-success:focus {
    background: var(--nb-btn-success-bg-hover);
    border-color: var(--nb-btn-success-border-hover);
}

.btn-info {
    background: var(--nb-btn-info-bg);
    color: var(--nb-btn-info-fg);
    border-color: var(--nb-btn-info-border);
}

.btn-info:hover, .btn-info:focus {
    background: var(--nb-btn-info-bg-hover);
    border-color: var(--nb-btn-info-border-hover);
}

.btn-warning {
    background: var(--nb-btn-warning-bg);
    color: var(--nb-btn-warning-fg);
    border-color: var(--nb-btn-warning-border);
}

.btn-warning:hover, .btn-warning:focus {
    background: var(--nb-btn-warning-bg-hover);
    border-color: var(--nb-btn-warning-border-hover);
}

.btn-danger {
    background: var(--nb-btn-danger-bg);
    color: var(--nb-btn-danger-fg);
    border-color: var(--nb-btn-danger-border);
}

.btn-danger:hover, .btn-danger:focus {
    background: var(--nb-btn-danger-bg-hover);
    border-color: var(--nb-btn-danger-border-hover);
}

/* Forms */
.form-group {
    margin-bottom: calc(var(--nb-space-4) * var(--nb-density-scale));
}

.form-control {
    background-color: var(--nb-input-bg);
    border: 1px solid var(--nb-input-border);
    border-radius: var(--nb-control-radius);
    box-shadow: none;
    color: var(--nb-input-fg);
    font-size: var(--nb-control-font);
    min-height: var(--nb-control-min-height);
    padding: var(--nb-control-pad-y) var(--nb-control-pad-x);
    transition: border-color var(--nb-duration-normal) var(--nb-ease-in-out),
                box-shadow var(--nb-duration-normal) var(--nb-ease-in-out);
}

.form-control::placeholder {
    color: var(--nb-input-placeholder);
}

.form-control[readonly],
.form-control[readonly="readonly"] {
    background-color: var(--nb-input-bg-readonly);
    color: var(--nb-input-fg-muted);
}

/* nb-icon dentro de input-group-addon: heredar font-size del addon (BS3 lo controla) */
.input-group-addon .nb-icon {
    font-size: inherit;
}

.form-control:focus {
    border-color: var(--nb-input-border);
    box-shadow: none;
    outline: none;
}

.form-control:focus-visible {
    border-color: var(--nb-input-border-focus);
    outline: 3px solid var(--nb-input-focus-ring);
    outline-offset: 0;
}

.has-error .control-label, .has-error .help-block {
    color: var(--nb-status-error);
}

.has-error .form-control {
    border-color: var(--nb-status-error);
    box-shadow: none;
}

.has-success .control-label, .has-success .help-block {
    color: var(--nb-status-success);
}

.has-success .form-control {
    border-color: var(--nb-status-success);
}

.has-warning .control-label, .has-warning .help-block {
    color: var(--nb-status-warning);
}

.has-warning .form-control {
    border-color: var(--nb-status-warning);
}

.has-info .control-label, .has-info .help-block {
    color: var(--nb-status-info);
}

.has-info .form-control {
    border-color: var(--nb-status-info);
}

.input-group-addon {
    border-radius: var(--nb-control-radius);
    background: color-mix(in srgb, var(--nb-bg-surface) 85%, #fff 15%);
    border-color: var(--nb-border-default);
    color: var(--nb-text-primary);
}

/* ---------- Fieldset / Legend ---------- */
fieldset {
    border: 1px solid var(--nb-border-default);
    border-radius: var(--nb-panel-radius);
    padding: calc(var(--nb-space-4) * var(--nb-density-scale));
    background: var(--nb-panel-bg);
}

legend {
    font-size: var(--nb-font-size-md);
    padding: 0 var(--nb-space-2);
    color: var(--nb-legend-fg);
    border: none;
    width: auto;
    margin-bottom: var(--nb-space-3);
    font-weight: var(--nb-font-weight-medium);
}

.panel > legend {
    margin-left: var(--nb-space-3);
    margin-right: var(--nb-space-3);
}


/* Panels (cards) */
.panel {
    background-color: var(--nb-panel-bg);
    border: 1px solid var(--nb-border-default);
    border-radius: var(--nb-panel-radius);
    box-shadow: var(--nb-panel-shadow);
}

.panel-heading {
    background-color: var(--nb-panel-bg);
    color: var(--nb-panel-heading-fg);
    border-bottom: 1px solid var(--nb-border-default);
    border-top-left-radius: var(--nb-panel-radius);
    border-top-right-radius: var(--nb-panel-radius);
}

.panel-footer {
    background-color: var(--nb-panel-bg);
    border-top: 1px solid var(--nb-border-default);
}

.panel-title {
    font-size: var(--nb-font-size-md);
    font-weight: var(--nb-font-heading-weight);
    color: var(--nb-panel-heading-fg);
    margin: 0;
}

/* Panel variants */
.panel-primary {
    border-color: color-mix(in srgb, var(--nb-primary) 60%, #fff 40%);
}

.panel-primary > .panel-heading {
    color: var(--nb-primary-contrast);
    background-color: var(--nb-primary);
    border-color: color-mix(in srgb, var(--nb-primary) 75%, #000 25%);
}

.panel-success {
    border-color: color-mix(in srgb, var(--nb-status-success) 60%, #fff 40%);
}

.panel-success > .panel-heading {
    color: var(--nb-status-contrast);
    background-color: var(--nb-status-success);
    border-color: color-mix(in srgb, var(--nb-status-success) 75%, #000 25%);
}

.panel-info {
    border-color: color-mix(in srgb, var(--nb-status-info) 60%, #fff 40%);
}

.panel-info > .panel-heading {
    color: var(--nb-status-contrast);
    background-color: var(--nb-status-info);
    border-color: color-mix(in srgb, var(--nb-status-info) 75%, #000 25%);
}

.panel-warning {
    border-color: color-mix(in srgb, var(--nb-status-warning) 60%, #fff 40%);
}

.panel-warning > .panel-heading {
    color: #000;
    background-color: var(--nb-status-warning);
    border-color: color-mix(in srgb, var(--nb-status-warning) 75%, #000 25%);
}

.panel-danger {
    border-color: color-mix(in srgb, var(--nb-status-error) 60%, #fff 40%);
}

.panel-danger > .panel-heading {
    color: var(--nb-status-contrast);
    background-color: var(--nb-status-error);
    border-color: color-mix(in srgb, var(--nb-status-error) 75%, #000 25%);
}

/* Card / card-grid: una tarjeta (.nb-card con sus partes) y una rejilla adaptable
   (.nb-card-grid). Capa 3: solo consume los tokens --nb-card-* (Capa 2). */
.nb-card {
    display: flex;
    flex-direction: column;
    background: var(--nb-card-bg);
    color: var(--nb-card-fg);
    border: 1px solid var(--nb-card-border);
    border-radius: var(--nb-card-radius);
    box-shadow: var(--nb-card-shadow);
    /* Sin overflow:hidden en la raíz: recortaría menús/tooltips que desbordan la tarjeta
       (p.ej. un dropdown de acciones). El recorte a sangre es responsabilidad de __media. */
    transition: box-shadow var(--nb-duration-fast) ease-in-out;
}

.nb-card:hover,
.nb-card:focus-within {
    box-shadow: var(--nb-card-shadow-hover);
}

/* La media va a sangre: se recorta a las esquinas superiores de la tarjeta. */
.nb-card__media {
    display: block;
    overflow: hidden;
    border-top-left-radius: var(--nb-card-radius);
    border-top-right-radius: var(--nb-card-radius);
}

.nb-card__body {
    padding: var(--nb-card-padding);
}

.nb-card__title {
    font-size: var(--nb-font-size-lg);
    font-weight: var(--nb-font-weight-medium);
    color: var(--nb-card-fg);
}

.nb-card__meta {
    color: var(--nb-text-muted);
    font-size: var(--nb-font-size-sm);
}

.nb-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--nb-card-grid-min), 1fr));
    gap: var(--nb-card-grid-gap);
}

/* Rail lateral acoplable: panel no-modal con cabecera, cuerpo desplazable y pie. Se fija al
   viewport con altura acotada; el cuerpo se desplaza y la barra de acciones queda anclada
   al fondo. */
.nb-side-rail {
    display: flex;
    flex-direction: column;
    background: var(--nb-side-rail-bg);
    border: 1px solid var(--nb-side-rail-border);
    border-radius: var(--nb-radius-md);
    position: sticky;
    top: var(--nb-side-rail-sticky-top);
    max-height: var(--nb-side-rail-max-height);
    overflow-y: auto;
}

.nb-side-rail__header {
    padding: var(--nb-side-rail-padding);
    background: var(--nb-side-rail-header-bg);
    border-bottom: 1px solid var(--nb-side-rail-border);
}

.nb-side-rail__body {
    padding: var(--nb-side-rail-padding);
    flex: 1 1 auto;
    min-height: 0;
}

/* Los formularios montados en el rail reutilizan .modal-body/.modal-footer (Bootstrap), cuyo
   padding lateral se solapa con el del rail y estrecha el contenido. Dentro del rail, el margen
   lateral lo aporta solo el rail: se anula el padding lateral del cuerpo del formulario para que
   los campos aprovechen todo el ancho. */
.nb-side-rail .modal-body {
    padding-left: 0;
    padding-right: 0;
}

.nb-side-rail__footer {
    padding: var(--nb-side-rail-padding);
    border-top: 1px solid var(--nb-side-rail-border);
}

/* Los grupos colapsables del formulario aprovechan todo el ancho del cuerpo del rail (compensan
   su padding lateral) para que los campos no queden estrechados por paddings acumulados. */
.nb-side-rail .nb-collapsible-group {
    margin-left: calc(-1 * var(--nb-side-rail-padding));
    margin-right: calc(-1 * var(--nb-side-rail-padding));
}

/* Grupo de formulario plegable: sección <details>/<summary> nativa, sin JS. La cabecera
   (summary) responde a la pulsación y el contenido se pliega. */
.nb-collapsible-group {
    border: 1px solid var(--nb-border-default);
    border-radius: var(--nb-radius-sm);
    margin-bottom: var(--nb-space-3);
    padding: 0 var(--nb-space-2);
}

.nb-collapsible-group__summary {
    cursor: pointer;
    padding: var(--nb-space-2) 0;
    font-weight: var(--nb-font-weight-medium);
    color: var(--nb-text-primary);
    /* Cabecera con el texto a la izquierda y el indicador de colapso a la derecha. */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nb-space-2);
    list-style: none; /* se sustituye el marcador nativo por el chevron nb-icon */
}

.nb-collapsible-group__summary::-webkit-details-marker {
    display: none;
}

/* Indicador de colapso: chevron que apunta abajo cuando el grupo está abierto y a la derecha
   cuando está cerrado (convención nativa de <details>). */
.nb-collapsible-group__marker {
    color: var(--nb-text-muted);
    flex: 0 0 auto;
    transition: transform var(--nb-duration-fast) ease;
}

.nb-collapsible-group:not([open]) > .nb-collapsible-group__summary .nb-collapsible-group__marker {
    transform: rotate(-90deg);
}

.nb-collapsible-group[open] > .nb-collapsible-group__summary {
    border-bottom: 1px solid var(--nb-border-default);
    margin-bottom: var(--nb-space-3);
}

/* Barra de acciones del rail: anclada al fondo, permanece visible mientras el cuerpo del
   formulario se desplaza. */
.nb-side-rail__actions {
    position: sticky;
    bottom: 0;
    background: var(--nb-side-rail-footer-bg);
    border-top: 1px solid var(--nb-side-rail-border);
    /* Compensa el padding lateral del cuerpo del formulario para cubrir el ancho completo. */
    margin: var(--nb-space-3) calc(-1 * var(--nb-side-rail-padding)) 0;
    padding: var(--nb-space-3) var(--nb-side-rail-padding);
    display: flex;
    gap: var(--nb-space-2);
    z-index: 1;
}

/* Alerts */
.alert {
    border-left: 4px solid var(--nb-border-strong);
    border-radius: var(--nb-border-radius-base);
}

.alert-success {
    background: color-mix(in srgb, var(--nb-status-success) 12%, #fff 88%);
    border-color: color-mix(in srgb, var(--nb-status-success) 35%, #fff 65%);
    color: var(--nb-status-success);
    border-left-color: var(--nb-status-success);
}

.alert-info {
    background: color-mix(in srgb, var(--nb-status-info) 12%, #fff 88%);
    border-color: color-mix(in srgb, var(--nb-status-info) 35%, #fff 65%);
    color: var(--nb-status-info);
    border-left-color: var(--nb-status-info);
}

.alert-warning {
    background: color-mix(in srgb, var(--nb-status-warning) 14%, #fff 86%);
    border-color: color-mix(in srgb, var(--nb-status-warning) 40%, #fff 60%);
    color: var(--nb-status-warning);
    border-left-color: var(--nb-status-warning);
}

.alert-danger {
    background: color-mix(in srgb, var(--nb-status-error) 12%, #fff 88%);
    border-color: color-mix(in srgb, var(--nb-status-error) 35%, #fff 65%);
    color: var(--nb-status-error);
    border-left-color: var(--nb-status-error);
}

/* FeedbackPanel (Wicket) — tematizado como el componente .alert del sistema.
   SSOT del estilo del FeedbackPanel (antes vivía en colores fijos BS3 en
   components/panel/res/feedback.css, ya migrado aquí con tokens). Aplica a
   cualquier FeedbackPanel (estándar de Wicket o el de dga-commons). Selector con
   la misma especificidad que el legacy (ul.feedbackPanel li.feedbackPanelX). */
ul.feedbackPanel {
    list-style: none;
    margin: 0 0 var(--nb-space-3) 0;
    padding: 0;
}

ul.feedbackPanel li {
    display: block;
    list-style: none;
    margin: 0 0 var(--nb-space-2) 0;
    padding: var(--nb-space-2) var(--nb-space-3);
    border: 1px solid var(--nb-border-strong);
    border-left-width: 4px;
    border-radius: var(--nb-border-radius-base);
}

ul.feedbackPanel li:last-child {
    margin-bottom: 0;
}

ul.feedbackPanel li.feedbackPanelINFO {
    background: color-mix(in srgb, var(--nb-status-info) 12%, #fff 88%);
    border-color: color-mix(in srgb, var(--nb-status-info) 35%, #fff 65%);
    border-left-color: var(--nb-status-info);
    color: var(--nb-status-info);
}

ul.feedbackPanel li.feedbackPanelSUCCESS {
    background: color-mix(in srgb, var(--nb-status-success) 12%, #fff 88%);
    border-color: color-mix(in srgb, var(--nb-status-success) 35%, #fff 65%);
    border-left-color: var(--nb-status-success);
    color: var(--nb-status-success);
}

ul.feedbackPanel li.feedbackPanelWARNING {
    background: color-mix(in srgb, var(--nb-status-warning) 14%, #fff 86%);
    border-color: color-mix(in srgb, var(--nb-status-warning) 40%, #fff 60%);
    border-left-color: var(--nb-status-warning);
    color: var(--nb-status-warning);
}

ul.feedbackPanel li.feedbackPanelERROR {
    background: color-mix(in srgb, var(--nb-status-error) 12%, #fff 88%);
    border-color: color-mix(in srgb, var(--nb-status-error) 35%, #fff 65%);
    border-left-color: var(--nb-status-error);
    color: var(--nb-status-error);
}

/* Dentro de un .alert (MessageLevelFeedbackPanels) el wrapper ya da el estilo:
   el li no debe pintar su propia caja. */
.alert ul.feedbackPanel li {
    padding: 0;
    margin-bottom: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: inherit;
}

/* Tables */
.table {
    border-color: var(--nb-table-border);
}

.table > thead > tr > th {
    background: var(--nb-table-header-bg);
    color: var(--nb-table-header-fg);
    border-bottom: 1px solid var(--nb-table-border);
}

.table > tfoot > tr > th,
.table > tfoot > tr > td {
    background: var(--nb-table-footer-bg);
    color: var(--nb-table-footer-fg);
    border-top: 1px solid var(--nb-table-border);
}

.table > tbody > tr:hover {
    background: var(--nb-table-row-hover-bg);
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--nb-gray-100);
}

.table-bordered {
    border: 1px solid var(--nb-table-border);
}

.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
    border: 1px solid var(--nb-table-border);
}

.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > td {
    padding: 6px;
}

.table > tbody > tr.active > td,
.table > tbody > tr.active > th,
.table > tbody > tr > td.active,
.table > tbody > tr > th.active {
    background-color: var(--nb-gray-100);
}

/* Table responsive wrapper */
.table-responsive {
    border: 1px solid var(--nb-border-default);
}

/* Badges */
.badge {
    border-radius: var(--nb-radius-pill);
    font-weight: var(--nb-font-weight-medium);
}

/* Labels */
.label {
    border-radius: var(--nb-border-radius-base);
    font-weight: var(--nb-font-weight-medium);
}

.label-default {
    background: var(--nb-gray-600);
    color: #fff;
}

.label-primary {
    background: var(--nb-primary);
    color: var(--nb-primary-contrast);
}

.label-info {
    background: var(--nb-status-info);
    color: var(--nb-status-contrast);
}

.label-success {
    background: var(--nb-status-success);
    color: var(--nb-status-contrast);
}

.label-warning {
    background: var(--nb-status-warning);
    color: #000;
}

.label-danger {
    background: var(--nb-status-error);
    color: var(--nb-status-contrast);
}

/* Sidebar helper */
.nb-sidebar {
    background: var(--nb-sidebar-bg);
    color: var(--nb-sidebar-fg);
    width: var(--nb-sidebar-width);
    border-right: 1px solid var(--nb-border-default);
}

/* Modals */
.dialogPanel .selectButtons,
.selectPanel .selectButtons {
    text-align: right;
    /* Separación del pie de acciones respecto al contenido (antes quedaba pegado al campo/mensaje). */
    margin-top: var(--nb-space-4);
}

.modal-content {
    background: var(--nb-bg-surface);
    color: var(--nb-text-primary);
    border: 1px solid var(--nb-border-default);
    border-radius: var(--nb-border-radius-base);
    box-shadow: var(--nb-shadow-lg);
}

/* Dropdowns */
.dropdown-menu {
    background: var(--nb-bg-surface);
    border: 1px solid var(--nb-border-default);
    border-radius: var(--nb-border-radius-base);
}

.dropdown-menu > li > a {
    color: var(--nb-text-primary);
}

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
    background: var(--nb-table-row-hover-bg);
    color: var(--nb-text-primary);
}

.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
    background: var(--nb-primary);
    color: var(--nb-primary-contrast);
}

/* Acción destructiva dentro de un menú: el texto en color de error y, al posarse o enfocar,
   fondo de error con texto en contraste. */
.dropdown-menu > li > a.nb-dropdown-item--danger {
    color: var(--nb-status-error);
}

.dropdown-menu > li > a.nb-dropdown-item--danger:hover,
.dropdown-menu > li > a.nb-dropdown-item--danger:focus {
    background: var(--nb-status-error);
    color: var(--nb-status-contrast);
}

/* Tooltip */
.tooltip-inner {
    background: var(--nb-text-primary);
    color: var(--nb-text-inverse);
}

.tooltip.top .tooltip-arrow {
    border-top-color: var(--nb-text-primary);
}

/* Pagination & Pager */
.pagination > li > a, .pagination > li > span {
    color: var(--nb-text-primary);
    background: var(--nb-bg-surface);
    border: 1px solid var(--nb-border-default);
}

.pagination > li > a:hover, .pagination > li > span:hover {
    background: var(--nb-gray-100);
}

.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover {
    background: var(--nb-primary);
    border-color: color-mix(in srgb, var(--nb-primary) 85%, #000 15%);
    color: var(--nb-primary-contrast);
}

.pager li > a, .pager li > span {
    background: var(--nb-bg-surface);
    border: 1px solid var(--nb-border-default);
    color: var(--nb-text-primary);
}

.pager li > a:hover {
    background: var(--nb-gray-100);
}

/* List groups */
.list-group-item {
    color: var(--nb-text-primary);
    border-color: var(--nb-border-default);
}

.list-group-item:hover {
    background: var(--nb-table-row-hover-bg);
}

.list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover {
    background: var(--nb-primary);
    border-color: color-mix(in srgb, var(--nb-primary) 85%, #000 15%);
    color: var(--nb-primary-contrast);
}

.list-group-item-success {
    color: var(--nb-status-success);
    background: color-mix(in srgb, var(--nb-status-success) 10%, #fff 90%);
}

.list-group-item-info {
    color: var(--nb-status-info);
    background: color-mix(in srgb, var(--nb-status-info) 10%, #fff 90%);
}

.list-group-item-warning {
    color: var(--nb-status-warning);
    background: color-mix(in srgb, var(--nb-status-warning) 10%, #fff 90%);
}

.list-group-item-danger {
    color: var(--nb-status-error);
    background: color-mix(in srgb, var(--nb-status-error) 10%, #fff 90%);
}

/* Jumbotron */
.jumbotron {
    background: color-mix(in srgb, var(--nb-primary) 6%, #fff 94%);
    color: var(--nb-text-primary);
    border: 1px solid var(--nb-border-default);
    border-radius: var(--nb-border-radius-base);
}

/* Media */
.media, .media-body, .media-left, .media-right {
    color: var(--nb-text-primary);
}

.media-heading {
    color: var(--nb-text-primary);
    font-weight: var(--nb-font-heading-weight);
}

/* Progress bars */
.progress {
    background-color: var(--nb-gray-100);
    border-radius: var(--nb-border-radius-base);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .05);
}

.progress-bar {
    background-color: var(--nb-primary);
}

.progress-bar-success {
    background-color: var(--nb-status-success);
}

.progress-bar-info {
    background-color: var(--nb-status-info);
}

.progress-bar-warning {
    background-color: var(--nb-status-warning);
}

.progress-bar-danger {
    background-color: var(--nb-status-error);
}

/* Popovers */
.popover {
    background: var(--nb-bg-surface);
    color: var(--nb-text-primary);
    border: 1px solid var(--nb-border-default);
    border-radius: var(--nb-border-radius-base);
    box-shadow: var(--nb-shadow-md);
}

.popover-title {
    background: var(--nb-gray-100);
    color: var(--nb-text-primary);
    border-bottom: 1px solid var(--nb-border-default);
}

.popover.right .arrow:after {
    border-right-color: var(--nb-bg-surface);
}

.popover.left .arrow:after {
    border-left-color: var(--nb-bg-surface);
}

.popover.top .arrow:after {
    border-top-color: var(--nb-bg-surface);
}

.popover.bottom .arrow:after {
    border-bottom-color: var(--nb-bg-surface);
}

/* Carousel */
.carousel-control.left, .carousel-control.right {
    background-image: none;
    color: var(--nb-text-inverse);
    text-shadow: none;
}

.carousel-control:hover, .carousel-control:focus {
    color: var(--nb-primary-contrast);
}

.carousel-indicators li {
    border: 1px solid var(--nb-border-default);
    background: var(--nb-gray-200);
}

.carousel-indicators .active {
    background: var(--nb-primary);
    border-color: color-mix(in srgb, var(--nb-primary) 85%, #000 15%);
}

.carousel-caption {
    background: rgba(0, 0, 0, .45);
    color: #fff;
    border-radius: var(--nb-border-radius-base);
    padding: var(--nb-space-3) var(--nb-space-4);
}

/* Close button */
.close {
    color: var(--nb-text-secondary);
    text-shadow: none;
    opacity: .8;
}

.close:hover, .close:focus {
    color: var(--nb-text-primary);
    opacity: 1;
}

/* Utilities mapping */
.text-muted {
    color: var(--nb-text-muted);
}

.text-primary {
    color: var(--nb-primary);
}

.text-success {
    color: var(--nb-status-success);
}

.text-info {
    color: var(--nb-status-info);
}

.text-warning {
    color: var(--nb-status-warning);
}

.text-danger {
    color: var(--nb-status-error);
}

.bg-primary {
    background-color: var(--nb-primary);
    color: var(--nb-primary-contrast);
}

.bg-info {
    background-color: color-mix(in srgb, var(--nb-status-info) 15%, #fff 85%);
}

.bg-success {
    background-color: color-mix(in srgb, var(--nb-status-success) 15%, #fff 85%);
}

.bg-warning {
    background-color: color-mix(in srgb, var(--nb-status-warning) 18%, #fff 82%);
}

.bg-danger {
    background-color: color-mix(in srgb, var(--nb-status-error) 15%, #fff 85%);
}

/* ==========================================================================
   COMPONENT: Browse Field (.nb-browse-field)
   Patrón: input + botón de búsqueda (lupa)
   Usado en: ModalBrowseLink, *Field.html (PlaceField, PersonField, etc.)
   ========================================================================== */

:root {
    --nb-browse-btn-color: var(--nb-btn-default-fg);
    --nb-browse-btn-opacity: var(--nb-opacity-dimmed);
    --nb-browse-btn-opacity-hover: 1;
    --nb-browse-btn-border: var(--nb-input-border);
}

/* Sin botón browse: comportarse como input normal.
   Bootstrap 3 usa display:table que colapsa sin el input-group-btn,
   y quita el border-radius del input. */
.nb-browse-field:not(:has(.input-group-btn)) {
    display: block;
}

.nb-browse-field:not(:has(.input-group-btn)) .form-control {
    border-radius: var(--nb-control-radius);
}

/* El botón comparte borde y altura con el campo al que va adosado */
.nb-browse-field .input-group-btn > .btn {
    border-color: var(--nb-browse-btn-border);
    min-height: var(--nb-control-min-height);
}

/* Campo y botón forman un solo control: el anillo de foco rodea el grupo completo y son sus
   partes las que indican cuál de las dos lo tiene. */
.nb-browse-field:has(:focus-visible) {
    outline: 3px solid var(--nb-input-focus-ring);
    outline-offset: 0;
    border-radius: var(--nb-control-radius);
}

.nb-browse-field .form-control:focus-visible,
.nb-browse-field .input-group-btn > .btn:focus-visible {
    outline: none;
}

/* Con el foco en el botón, este se ilumina como al posar el puntero */
.nb-browse-field .input-group-btn > .btn:focus-visible {
    background: var(--nb-btn-default-bg-hover);
}

/* El icono del botón browse está "dimmed" por defecto */
.nb-browse-field .btn .glyphicon {
    color: var(--nb-browse-btn-color);
    opacity: var(--nb-browse-btn-opacity);
    transition: opacity var(--nb-duration-normal) var(--nb-ease-out);
}

/* En hover/focus el icono se muestra al 100% */
.nb-browse-field .btn:hover .glyphicon,
.nb-browse-field .btn:focus .glyphicon {
    opacity: var(--nb-browse-btn-opacity-hover);
}

/* ==========================================================================
   COMPONENT: Content Area (.nb-content-area)
   Marca una zona de contenido visible sobre el fondo de la página.
   Cada página opta explícitamente por marcar sus zonas con esta clase.
   El token --nb-bg-content define el color (por defecto blanco).
   ========================================================================== */

.nb-content-area {
    background-color: var(--nb-bg-content);
    padding: var(--nb-content-area-padding);
}

.nb-content-area::after {
    content: "";
    display: table;
    clear: both;
}

.nb-content-area > :last-child {
    margin-bottom: 0;
}

/* Separación tokenizada entre cajas adyacentes en FLUJO VERTICAL.
 * El selector :not(.row) excluye los siblings dentro de una .row (donde son
 * adyacentes horizontalmente, no verticalmente, y el margin-top desplazaría
 * la caja siguiente respecto a la primera). */
:not(.row) > .nb-content-area + .nb-content-area {
    margin-top: var(--nb-content-area-gap);
}

/* Coherencia BS3 cuando .nb-content-area se aplica directamente a un .col-*.
 *
 * .nb-content-area sobrescribe el padding del col (token
 * --nb-content-area-padding) y la caja ocupa el col entero.
 *
 * El .row padre lleva `margin: 0 -15px` para cancelar el `padding: 0 15px`
 * BS3 de los cols. Con cols sin padding, ese margen negativo no compensa nada
 * y desplaza las cajas 15 px fuera del contenedor padre, de modo que el row
 * prescinde de él cuando sus cols hijos son .nb-content-area.
 *
 * Las cajas adyacentes quedan entonces pegadas (BS3 puro con cols sin
 * padding); la separación entre ellas la aporta el skin con CSS propio.
 */
.row:has(> [class*="col-"].nb-content-area) {
    margin-left: 0;
    margin-right: 0;
}

/* ==========================================================================
   Select2 — Adaptación a Bootstrap 3.2 / tokens nubarchiva
   Requires: wicketstuff-select2 (carga select2.css automáticamente)

   NOTA: select2.css se carga vía AJAX (bajo demanda) DESPUÉS de este fichero.
   Para que estas reglas prevalezcan, se usa el prefijo `body` que añade
   especificidad suficiente (tipo + clase > clase sola).
   No se puede usar una clase propia (ej: .nb-select2) porque:
   - Select2 NO copia las clases del <select> al contenedor <span> generado
   - El dropdown se renderiza como hijo directo de <body>, fuera del modal
   ========================================================================== */

/* Dropdown: z-index por encima de modales anidados de Wicket.
   Wicket incrementa z-index en +2 por cada modal (backdrop + ventana).
   Con +10 cubrimos hasta 5 modales anidados. */
body .select2-dropdown {
    z-index: calc(var(--nb-z-modal) + 10);
}

/* Selector cerrado: imitar form-control de BS3 */
body .select2-container--default .select2-selection--single {
    height: 34px;
    padding: var(--nb-space-1) var(--nb-space-3);
    font-size: var(--nb-font-body-size);
    line-height: var(--nb-font-body-line);
    color: var(--nb-input-fg);
    background-color: var(--nb-input-bg);
    border: 1px solid var(--nb-input-border);
    border-radius: var(--nb-radius-sm);
    transition: border-color var(--nb-duration-fast) var(--nb-ease-out);
}

/* Texto del valor seleccionado: alineación vertical */
body .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--nb-input-fg);
    line-height: 22px;
    padding-left: 0;
}

/* Placeholder */
body .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--nb-input-placeholder);
}

/* Flecha del dropdown: alineación vertical */
body .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 32px;
}

/* Foco: el anillo común, igual que el resto de controles */
body .select2-container--default.select2-container--focus .select2-selection--single,
body .select2-container--default.select2-container--open .select2-selection--single {
    outline: 3px solid var(--nb-input-focus-ring);
    outline-offset: 0;
}

/* Dropdown abierto: bordes */
body .select2-container--default .select2-dropdown {
    border-color: var(--nb-input-border-focus);
}

/* Campo de búsqueda dentro del dropdown */
body .select2-container--default .select2-search--dropdown .select2-search__field {
    font-size: var(--nb-font-body-size);
    padding: var(--nb-space-1) var(--nb-space-2);
    border: 1px solid var(--nb-input-border);
    border-radius: var(--nb-radius-sm);
}

body .select2-container--default .select2-search--dropdown .select2-search__field:focus {
    outline: 3px solid var(--nb-input-focus-ring);
    outline-offset: 0;
}

/* Opciones del dropdown */
body .select2-container--default .select2-results__option {
    font-size: var(--nb-font-body-size);
    padding: var(--nb-space-1) var(--nb-space-3);
}

/* Opción hover/resaltada */
body .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--nb-primary);
    color: var(--nb-primary-contrast);
}

/* Botón clear (x) */
body .select2-container--default .select2-selection__clear {
    font-size: var(--nb-font-body-size);
    color: var(--nb-text-muted);
    margin-right: var(--nb-space-2);
}

/* ==========================================================================
   Indicador de entorno
   Pastilla flotante que identifica el entorno no productivo (desarrollo,
   integración, QA, preproducción). El texto lo aporta el core en el atributo
   data-nb-env-label del <body>; el color se resuelve por la clase env-* del
   mismo <body>. En producción (sin clase de entorno) no se pinta nada.
   Los skins la reposicionan o recolorean con los tokens --nb-env-indicator-*.
   ========================================================================== */

:root {
    --nb-env-indicator-offset: var(--nb-space-2);
    --nb-env-indicator-bg: var(--nb-gray-800);
    --nb-env-indicator-fg: var(--nb-gray-0);
}

/* env-dev usa el tono neutro por defecto declarado en :root. */
body.env-int {
    --nb-env-indicator-bg: var(--nb-status-info);
    --nb-env-indicator-fg: var(--nb-gray-900);
}

body.env-qa {
    --nb-env-indicator-bg: var(--nb-status-success);
    --nb-env-indicator-fg: var(--nb-gray-900);
}

body.env-pre {
    --nb-env-indicator-bg: var(--nb-status-warning);
    --nb-env-indicator-fg: var(--nb-gray-900);
}

body[data-nb-env-label]::after {
    content: attr(data-nb-env-label);
    position: fixed;
    top: var(--nb-env-indicator-offset);
    left: var(--nb-env-indicator-offset);
    z-index: var(--nb-z-env-indicator);
    padding: var(--nb-space-1) var(--nb-space-2);
    background: var(--nb-env-indicator-bg);
    color: var(--nb-env-indicator-fg);
    font-size: var(--nb-font-body-size-small);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-radius: var(--nb-radius-sm);
    box-shadow: var(--nb-shadow-sm);
    pointer-events: none;
}