/* =====================================================================
   BCRD UI Kit — Capa de tema
   Mapea Bootstrap 5 / Metronic 8 a los tokens del UI Kit BCRD, para que
   las vistas existentes adopten la identidad sin cambiar su marcado.
   ---------------------------------------------------------------------
   DEBE cargarse DESPUES del style.bundle.css del tema de Metronic
   (metronic/themes/<tema>/css/style.bundle.css).

   OJO AL ESCRIBIR COMENTARIOS: una ruta con comodin como
   "themes/" + asterisco + "/css" cierra el comentario a destiempo, porque
   el asterisco seguido de barra es el fin de comentario en CSS. Eso fue
   exactamente lo que paso aqui: el parser tomaba el resto de la cabecera
   como si fuera un selector, buscaba la primera llave y se tragaba entero
   el bloque :root de la seccion 1. Resultado: ninguna de las variables
   --kt-* ni --bs-* de abajo se aplicaba, y Metronic seguia mandando con
   su azul en todos los estados (:hover, :focus, .show...).
   No usar nunca asterisco-barra dentro de un comentario.
   Si algo se rompe, este es el único archivo que hay que desactivar:
   bcrd-tokens.css y bcrd-components.css no tocan nada existente.
   ===================================================================== */

/* =====================================================================
   1. VARIABLES DE BOOTSTRAP / METRONIC
   ===================================================================== */

:root,
[data-theme='light'],
[data-theme='dark'] {
    /*  Este bloque vale para los dos temas: todo lo de dentro apunta a
        tokens --color-*, y esos sí cambian de valor según el tema
        (bcrd-tokens.css). Así el mapeo a Bootstrap/Metronic se escribe una
        sola vez. Lo específico del modo oscuro está en § 1.3. */
    /* --- Bootstrap --- */
    --bs-primary: var(--color-primary-fill);
    --bs-primary-rgb: 122, 103, 38;
    --bs-link-color: var(--color-primary-text);
    --bs-link-hover-color: var(--color-primary-active);
    --bs-secondary: var(--color-secondary);
    --bs-secondary-rgb: 51, 51, 51;
    --bs-success: var(--color-success-text);
    --bs-success-rgb: 0, 107, 0;
    --bs-danger: var(--color-danger-text);
    --bs-danger-rgb: 204, 0, 0;
    --bs-body-color: var(--color-secondary);
    --bs-body-color-rgb: 51, 51, 51;
    --bs-border-color: var(--color-border);
    --bs-font-sans-serif: var(--bcrd-font-family);
    --bs-body-font-family: var(--bcrd-font-family);
    --bs-body-font-size: 16px;
    --bs-body-font-weight: 400;
    --bs-border-radius: var(--bcrd-radius);

    /* --- Metronic --- */
    --kt-primary: var(--color-primary-fill);
    --kt-primary-rgb: 122, 103, 38;
    --kt-primary-active: var(--color-primary-fill-active);
    --kt-primary-light: var(--color-primary-soft);
    --kt-primary-inverse: var(--color-surface);

    --kt-secondary: var(--color-secondary);
    --kt-success: var(--color-success-text);
    --kt-success-light: rgba(0, 107, 0, 0.1);
    --kt-success-inverse: var(--color-surface);
    --kt-danger: var(--color-danger-text);
    --kt-danger-light: rgba(255, 0, 0, 0.08);
    --kt-danger-inverse: var(--color-surface);

    --kt-body-color: var(--color-secondary);
    --kt-text-muted: var(--color-text-muted);
    --kt-border-color: var(--color-border);

    /*  Metronic pinta el texto de las filas rayadas y las activas con su
        propio color (#181C32 en claro, #FFFFFF en oscuro), distinto del
        color de cuerpo. Se unifican al del kit en los dos temas. */
    --kt-table-color: var(--color-secondary);
    --kt-table-striped-color: var(--color-secondary);
    --kt-table-active-color: var(--color-secondary);
    --kt-table-hover-colorr: var(--color-secondary); /* sic: el typo es de Metronic */
    --kt-gray-100: var(--color-surface-subtle);
    --kt-gray-200: var(--color-surface-muted);
    --kt-gray-300: var(--color-border);
    --kt-gray-400: var(--color-border-strong);
    --kt-gray-600: var(--color-text-muted);
    --kt-gray-800: var(--color-secondary);
    --kt-gray-900: var(--color-secondary);

    --kt-font-sans-serif: var(--bcrd-font-family);
}

/* ---------------------------------------------------------------------
   1.1 NEUTRALIZACIÓN DEL AZUL DE METRONIC
   Metronic define 34 variables con su azul de marca (#009EF7) en
   `:root, [data-theme=light]`. El bloque de arriba sólo reasignaba
   --kt-primary, así que el azul seguía saliendo por todas las demás:
   el ícono del menú activo (--kt-menu-link-color-active), los checkbox
   marcados, las pestañas pill, el acordeón, el botón de scroll-top y el
   fondo del ícono activo del aside del theme9.
   Aquí se reasignan TODAS. Regla: si encima va texto blanco se usa
   --color-primary-fill (5.53:1); si el dorado es el texto o el ícono,
   --color-primary-text. Ver README.md § Accesibilidad.
   --------------------------------------------------------------------- */

:root,
[data-theme='light'],
[data-theme='dark'] {
    /* Enlaces y texto de marca */
    --kt-text-primary: var(--color-primary-text);
    --kt-link-color: var(--color-primary-text);
    --kt-btn-link-color: var(--color-primary-text);
    --kt-breadcrumb-active-color: var(--color-primary-text);

    /* Menú lateral — el azul que se veía en los íconos venía de aquí */
    --kt-menu-link-color-active: var(--color-primary-text);
    --kt-menu-link-color-here: var(--color-primary-text);
    --kt-menu-link-color-hover: var(--color-primary-text);
    --kt-menu-link-color-show: var(--color-primary-text);

    /* Superficies activas con texto blanco encima */
    --kt-component-active-bg: var(--color-primary-fill);
    --kt-component-checked-bg: var(--color-primary-fill);
    --kt-component-hover-color: var(--color-primary-text);
    --kt-dropdown-link-active-bg: var(--color-primary-fill);
    --kt-list-group-active-bg: var(--color-primary-fill);
    --kt-list-group-active-border-colorg: var(--color-primary-fill); /* sic: el typo es de Metronic */
    --kt-nav-pills-link-active-bg: var(--color-primary-fill);
    --kt-ribbon-label-bg: var(--color-primary-fill);
    --kt-scrolltop-bg-color: var(--color-primary-fill);
    --kt-scrolltop-bg-color-hover: var(--color-primary-fill-hover);

    /* Casillas y radios */
    --kt-form-check-input-checked-bg-color: var(--color-primary-fill);
    --kt-form-check-input-checked-bg-color-solid: var(--color-primary-fill);
    --kt-form-check-input-checked-border-color: var(--color-primary-fill);
    --kt-form-check-input-indeterminate-bg-color: var(--color-primary-fill);
    --kt-form-check-input-indeterminate-border-color: var(--color-primary-fill);

    /* Acordeón */
    --kt-accordion-button-active-color: var(--color-primary-text);
    --kt-accordion-icon-active-color: var(--color-primary-text);

    /* Paginación */
    --kt-pagination-active-bg: var(--color-primary-fill);
    --kt-pagination-focus-color: var(--color-secondary);
    --kt-pagination-hover-color: var(--color-secondary);
}

/* Estas tres las declara Metronic en `html:not([data-theme=dark])`, que
   pesa más que `:root`. Hay que igualar la especificidad o no se aplican. */
html:not([data-theme='dark']),
html[data-theme='dark'] {
    --kt-aside-menu-icon-bg-color-active: var(--color-primary-fill);
    --kt-aside-menu-icon-icon-color-hover: var(--color-primary-text);
    --kt-header-button-icon-color-active: var(--color-primary-text);
}

/* ---------------------------------------------------------------------
   1.3 CHASIS EN MODO OSCURO
   Metronic pinta su modo oscuro en un azul-violeta (#1e1e2d, #2B2B40,
   #323248, #151521). Con el dorado institucional encima, ese tinte azul
   ensucia la marca. Aquí se reasigna a los neutros de la paleta oscura.

   Sólo hace falta para lo que NO reestiliza el kit: el chasis (aside,
   header, fondo de página) y unos pocos componentes de Metronic. Las
   tarjetas, tablas, inputs, modales, menús, botones y paginación ya salen
   de var(--color-*) y se adaptan solas.
   --------------------------------------------------------------------- */

[data-theme='dark'] {
    /* Fondo de la página y del chasis */
    --kt-page-bg: #141414;
    --kt-body-bg: var(--color-surface);
    --kt-body-bg-rgb: 30, 30, 30;
    --kt-body-color: var(--color-secondary);

    /* Rampa de grises: en oscuro va al revés que en claro */
    --kt-gray-100: #242424;
    --kt-gray-100-rgb: 36, 36, 36;
    --kt-gray-200: var(--color-surface-muted);
    --kt-gray-200-rgb: 48, 48, 48;
    --kt-gray-300: var(--color-border);
    --kt-gray-300-rgb: 61, 61, 61;
    --kt-gray-400: var(--color-border-strong);
    --kt-gray-600: var(--color-text-muted);
    --kt-gray-800: var(--color-secondary);
    --kt-gray-900: var(--color-secondary);
    --kt-text-gray-100: #242424;
    --kt-text-gray-200: var(--color-surface-muted);
    --kt-text-gray-300: var(--color-border);
    --kt-text-gray-800: var(--color-secondary);
    --kt-text-gray-900: var(--color-secondary);
    --kt-text-muted: var(--color-text-muted);

    /* Bordes y separadores */
    --kt-border-color: var(--color-border);
    --kt-card-bg: var(--color-surface);
    --kt-card-border-color: var(--color-border);
    --kt-accordion-border-color: var(--color-border);
    --kt-nav-tabs-border-color: var(--color-border);
    --kt-list-group-border-color: var(--color-border);
    --kt-thumbnail-border-color: var(--color-border);

    /* Tablas */
    --kt-table-border-color: var(--color-border);
    --kt-table-hover-bg: var(--color-surface-subtle);
    --kt-table-active-bg: var(--color-surface-subtle);
    --kt-table-striped-bg: rgba(255, 255, 255, 0.03);
    --kt-table-caption-color: var(--color-text-muted);

    /* Formularios */
    --kt-input-bg: var(--color-surface-subtle);
    --kt-input-focus-bg: var(--color-surface-subtle);
    --kt-input-solid-bg: var(--color-surface-subtle);
    --kt-input-solid-bg-focus: var(--color-surface-muted);
    --kt-input-color: var(--color-secondary);
    --kt-input-focus-color: var(--color-secondary);
    --kt-input-solid-color: var(--color-secondary);
    --kt-input-border-color: var(--color-border);
    --kt-input-focus-border-color: var(--color-border-strong);
    --kt-input-placeholder-color: var(--color-text-placeholder);
    --kt-input-solid-placeholder-color: var(--color-text-placeholder);
    --kt-input-disabled-bg: var(--color-surface-muted);
    --kt-input-disabled-border-color: var(--color-border);
    --kt-input-group-addon-bg: var(--color-surface-muted);
    --kt-input-group-addon-border-color: var(--color-border);
    --kt-input-group-addon-color: var(--color-text-muted);
    --kt-form-check-input-bg-solid: var(--color-surface-muted);
    --kt-form-check-input-border: 1px solid var(--color-border);
    --kt-form-select-border-color: var(--color-border);
    --kt-form-select-focus-border-color: var(--color-border-strong);

    /* Modales, dropdowns y avisos flotantes */
    --kt-modal-bg: var(--color-surface);
    --kt-modal-content-bg: var(--color-surface);
    --kt-modal-header-border-color: var(--color-border);
    --kt-modal-footer-border-color: var(--color-border);
    --kt-dropdown-bg: var(--color-surface);
    --kt-menu-dropdown-bg-color: var(--color-surface);
    --kt-tooltip-bg: var(--color-surface-muted);
    --kt-tooltip-color: var(--color-secondary);
    --kt-popover-header-bg: var(--color-surface-muted);
    --kt-popover-header-color: var(--color-secondary);
    --kt-popover-body-color: var(--color-secondary);
    --kt-popover-border-color: var(--color-border);

    /* Menú lateral */
    --kt-menu-link-bg-color-active: var(--color-primary-soft);
    --kt-menu-link-bg-color-here: var(--color-primary-soft);
    --kt-menu-link-bg-color-hover: var(--color-surface-subtle);
    --kt-menu-link-bg-color-show: var(--color-surface-subtle);
}

/* Igual que en claro, estas las declara Metronic con un selector que pesa
   más que `:root` y hay que igualarlo. */
html[data-theme='dark'] {
    --kt-aside-bg-color: var(--color-surface);
    --kt-aside-menu-icon-bg-color: var(--color-surface-subtle);
    --kt-aside-menu-icon-icon-color: var(--color-text-muted);
    --kt-header-general-bg-color: #141414;
    --kt-header-button-bg-color: var(--color-surface-subtle);
    --kt-header-button-icon-color: var(--color-secondary);
    --kt-header-mobile-bg-color: var(--color-surface);
    --kt-header-search-bg-color: var(--color-surface-subtle);
    --kt-header-search-font-color: var(--color-secondary);
    --kt-header-search-icon-color: var(--color-secondary);
    --kt-header-search-placeholder-color: var(--color-text-placeholder);
}


/* =====================================================================
   2. TIPOGRAFÍA GLOBAL
   ===================================================================== */

/*  Familia unificada 'Gotham': un solo nombre con los cuatro pesos mapeados
    a sus archivos en bcrd-fonts.css. Es lo que permite que 400 caiga en Book,
    500 en Medium y 700 en Bold sin que el navegador sintetice nada.
    `.fw-bolder` y `.fw-boldest` (Metronic) van en la lista porque piden 700:
    si heredaran una familia de un solo peso, saldría negrita falsa. */
body,
.fw-normal,
.fw-semibold,
.fw-bold,
.fw-bolder,
.fw-boldest,
strong,
b,
.form-control,
.form-select,
.btn,
.menu,
.table,
input,
select,
textarea,
button {
    font-family: var(--bcrd-font-family);
}

body {
    /*  Metronic fija `html, body { font-size: 13px !important }`, así que aquí
        hace falta !important para recuperar el control del tamaño base.

        NOTA: el UI Kit especifica 16px (`--bcrd-text-body`, Text/Body del
        Figma). La aplicación viene corriendo en 14px porque custom.css lo
        forzaba; se conserva ese 14px para no reescalar las ~250 vistas de
        golpe. Para alinearlo con el kit, cambiar esta línea por
        `font-size: var(--bcrd-text-body) !important;` y revisar las vistas. */
    font-size: 14px !important;
    font-weight: var(--bcrd-font-book);
    line-height: var(--bcrd-line-height);
    color: var(--color-secondary);
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-family: var(--bcrd-font-family);
    color: var(--color-secondary);
    line-height: var(--bcrd-line-height-tight);
}

h1, .h1 { font-size: var(--bcrd-h1); font-weight: var(--bcrd-font-bold); }
h2, .h2 { font-size: var(--bcrd-h2); font-weight: var(--bcrd-font-medium); }
h3, .h3 { font-size: var(--bcrd-h3); font-weight: var(--bcrd-font-medium); }
h4, .h4 { font-size: var(--bcrd-h4); font-weight: var(--bcrd-font-medium); }
h5, .h5 { font-size: var(--bcrd-h5); font-weight: var(--bcrd-font-medium); }
h6, .h6 { font-size: var(--bcrd-label-lg); font-weight: var(--bcrd-font-medium); }

/* Gotham no tiene SemiBold: 600 se resuelve a Medium (ver bcrd-fonts.css) */
.fw-semibold { font-weight: var(--bcrd-font-medium) !important; }
.fw-bold, .fw-bolder { font-weight: var(--bcrd-font-bold) !important; }
.fw-normal { font-weight: var(--bcrd-font-book) !important; }
.fw-light { font-weight: var(--bcrd-font-light) !important; }

a { color: var(--color-primary-text); }
a:hover { color: var(--color-primary-fill-active); }

.text-muted { color: var(--color-text-muted) !important; }
.text-primary { color: var(--color-primary-text) !important; }
.text-success { color: var(--color-success-text) !important; }
.text-danger { color: var(--color-danger-text) !important; }
.bg-primary { background-color: var(--color-primary-fill) !important; }
.bg-light-primary { background-color: var(--color-primary-soft) !important; }
.text-gray-700, .text-gray-800, .text-gray-900 { color: var(--color-secondary) !important; }

/* =====================================================================
   3. BOTONES
   Geometría del UI Kit: alto 35px, padding 12px 30px, radio 5px.
   ===================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--bcrd-spacing-1) ;  /* 4px: separacion icono-texto del UI Kit */
    border-radius: var(--bcrd-radius);
    font-family: var(--bcrd-font-family);
    font-weight: var(--bcrd-font-medium);
    transition: background-color var(--bcrd-transition),
                border-color var(--bcrd-transition),
                color var(--bcrd-transition),
                box-shadow var(--bcrd-transition);
}

.btn:not(.btn-icon):not(.btn-sm):not(.btn-lg) {
    min-height: var(--bcrd-button-height);
    padding: 12px 30px;
    font-size: var(--bcrd-label);
    line-height: 1;
}

.btn.btn-sm:not(.btn-icon) {
    min-height: var(--bcrd-control-height);
    padding: 6px 15px;
    font-size: var(--bcrd-label-sm);
}

.btn:focus-visible {
    outline: none;
    box-shadow: var(--bcrd-focus-ring) !important;
}


/* ---------- 3.0 Iconos (Font Awesome Pro) ----------
   El parche manual de Metronic forzaba .btn i { font-size:1.2rem } y quitaba
   el padding-right. Aqui la separacion la da el `gap` del flex, asi que el
   icono no necesita padding propio: si lo tuviera, se sumaria al gap. */
.btn i,
.btn .svg-icon {
    font-size: 1em;
    padding-right: 0;
    padding-left: 0;
    line-height: 1;
    flex-shrink: 0;
    /*  Metronic declara `.btn i { display: inline-flex }`, así que el <i> es un
        contenedor flex y el glifo (su ::before) es un ítem flex pegado al
        INICIO de la caja. Font Awesome da al ícono un ancho fijo de 1.25em
        (20px a 16px) y centra el glifo con `text-align: center`, pero eso no
        aplica dentro de un flex. Resultado medido en el "+" de 40x40: 10px a
        la izquierda y 16px a la derecha, 3px descentrado. */
    justify-content: center;
    align-items: center;
}

/*  Red de seguridad: si cualquier otra regla convierte un ícono de Font
    Awesome en contenedor flex, el glifo sigue centrado. En un ícono que no
    es flex estas dos propiedades no hacen nada. */
i[class*='fa-'] {
    justify-content: center;
    align-items: center;
}

/*  El kit de Font Awesome puede sustituir cada <i> por un
    <svg class="svg-inline--fa">. Cuando lo hace, la regla `.btn i` de arriba
    deja de aplicar, asi que las reglas de tamano y color de icono de este
    archivo nombran siempre las dos formas: `i` y `.svg-inline--fa`. */

/*  Botones de solo icono: cuadrados de verdad y con el icono a 16px.

    Lo de "cuadrados" es el arreglo de fondo: un boton sin `.btn-icon` recibe
    `padding: 12px 30px`, asi que un boton de solo icono salia como un
    rectangulo de ~74x35 con el glifo perdido en el centro. Habia 40 asi en las
    vistas; ya llevan la clase.

    Lo de 16px es porque a 1em (14px) el icono se pierde dentro de una caja de
    43px — es lo que hacia que el boton de Excel se viera diminuto. */
.btn.btn-icon {
    gap: 0;
    padding-left: 0;
    padding-right: 0;
    /*  Tamaño ENTERO. Metronic lo calcula como `calc(1.5em + 1.55rem + 2px)`,
        que con la raíz a 13px da 43.59px. Con un ícono de 16px eso deja
        13.795px a cada lado: el glifo cae a medio píxel y el antialiasing lo
        pinta más cargado hacia un lado. Es lo que hacía que el engranaje del
        panel de notificaciones no se viera centrado aunque su caja sí lo
        estuviera (medido: desvío de 0.01px).
        40 - 16 = 24 -> 12px exactos por lado. */
    width: 40px;
    height: 40px;
    aspect-ratio: 1;
}

.btn.btn-icon i,
.btn.btn-icon .svg-inline--fa {
    font-size: 16px;
}

/* Pequeño: 32 - 14 = 18 -> 9px exactos por lado */
.btn.btn-icon.btn-sm {
    width: 32px;
    height: 32px;
}

.btn.btn-icon.btn-sm i,
.btn.btn-icon.btn-sm .svg-inline--fa {
    font-size: 14px;
}

/*  Dentro de un input-group el botón tiene que medir lo mismo que el campo.
    Antes el campo medía 44.63px y el botón 43.59px, y se veía un escalón de
    un píxel entre los dos. No sirve estirarlo con `aspect-ratio`: Chrome
    estira el alto pero no recalcula el ancho, y el botón deja de ser
    cuadrado. Se fijan los dos a 44px enteros (el campo pasa de 44.63 a 44,
    imperceptible) y el ícono cae a 14px exactos por lado. */
.input-group:not(.input-group-sm):not(.input-group-lg) > .form-control:not(textarea):not(.form-control-sm):not(.form-control-lg),
.input-group:not(.input-group-sm):not(.input-group-lg) > .form-select:not(.form-select-sm):not(.form-select-lg) {
    height: 44px;
}

.input-group:not(.input-group-sm):not(.input-group-lg) > .btn.btn-icon {
    width: 44px;
    height: 44px;
}

/* Un boton a ancho completo necesita flex, no inline-flex */
.btn.w-100,
.btn.btn-block,
.btn.d-block {
    display: flex;
}

/* Iconos dentro de enlaces de menu y celdas de tabla */
.menu-link i,
.table i {
    line-height: 1;
}

/* ---------- 3.1 btn-primary (sólido dorado, según el UI Kit) ---------- */
.btn.btn-primary,
.btn-primary {
    background-color: var(--color-primary-fill) !important;
    border: none !important;
    color: var(--color-surface) !important;
}

.btn-check:checked + .btn.btn-primary,
.btn-check:active + .btn.btn-primary,
.btn.btn-primary:hover:not(.btn-active),
.btn.btn-primary:focus:not(.btn-active),
.btn.btn-primary.show,
.show > .btn.btn-primary {
    background-color: var(--color-primary-fill-hover) !important;
    border-color: var(--color-primary-fill-hover) !important;
    color: var(--color-surface) !important;
    box-shadow: none !important;
}

.btn.btn-primary:active:not(.btn-active),
.btn.btn-primary.active {
    background-color: var(--color-primary-fill-active) !important;
    color: var(--color-surface) !important;
    box-shadow: var(--bcrd-shadow-pressed) !important;
}

.btn.btn-primary:disabled,
.btn.btn-primary.disabled {
    background-color: var(--color-border-strong) !important;
    color: var(--color-text-disabled) !important;
    box-shadow: none !important;
}

.btn.btn-primary i,
.btn.btn-primary .svg-icon {
    color: var(--color-surface) !important;
}

/* El parche manual de Metronic ocultaba este caret con display:none.
   Se restaura: un dropdown necesita mostrar que lo es, y el componente
   Dropdown del Figma lleva chevron. */
.btn.btn-primary.dropdown-toggle::after {
    color: var(--color-surface) !important;
}

/*  El caret lo dibuja Bootstrap con `::after` en cualquier .dropdown-toggle.
    En los botones de accion de las tablas el marcado traia ademas un
    <span class="fa-caret-down">, asi que salian dos. Se quito el manual
    (datatables.record-actions.js y los Index.js de las vistas) y se deja
    este, que es automatico en todo el proyecto. */
.btn.btn-light.dropdown-toggle::after,
.btn.btn-tertiary-bcrd.dropdown-toggle::after {
    color: var(--color-secondary) !important;
}

/* ---------- 3.2 btn-secondary / btn-outline-secondary ---------- */
.btn.btn-secondary,
.btn.btn-outline.btn-outline-secondary,
.btn.btn-outline-secondary {
    background-color: var(--color-surface) !important;
    border: var(--bcrd-border-width-strong) solid var(--color-secondary) !important;
    color: var(--color-secondary) !important;
}

.btn.btn-secondary:hover,
.btn.btn-outline-secondary:hover,
.btn.btn-outline.btn-outline-secondary:hover {
    background-color: var(--color-surface) !important;
    border-color: var(--color-secondary) !important;
    color: var(--color-secondary) !important;
}

.btn.btn-secondary:active,
.btn.btn-secondary.active,
.btn.btn-outline-secondary:active,
.btn.btn-outline-secondary.active {
    background-color: var(--color-border) !important;
    color: var(--color-secondary) !important;
    box-shadow: var(--bcrd-shadow-pressed) !important;
}

.btn.btn-secondary:disabled,
.btn.btn-outline-secondary:disabled {
    background-color: var(--color-surface-subtle) !important;
    border-color: var(--color-text-disabled) !important;
    color: var(--color-text-disabled) !important;
}

/* ---------- 3.3 btn-light / btn-light-primary (terciario) ---------- */
.btn.btn-light,
.btn.btn-light-primary {
    background-color: var(--color-surface-subtle) !important;
    border: var(--bcrd-border-width) solid var(--color-border-strong) !important;
    color: var(--color-secondary) !important;
    font-weight: var(--bcrd-font-book);
}

/*  Metronic pinta el hover/focus del terciario con
    `.btn.btn-light-primary:hover:not(.btn-active) { background: var(--kt-primary) !important }`,
    que pesa más que un `:hover` a secas. Hay que igualar el `:not()` o el
    botón se rellena de dorado al pasar por encima — que es lo que le pasaba
    al "Cancelar" de los modales. */
.btn.btn-light:hover,
.btn.btn-light-primary:hover,
.btn.btn-light:hover:not(.btn-active),
.btn.btn-light-primary:hover:not(.btn-active),
.btn.btn-light:focus:not(.btn-active),
.btn.btn-light-primary:focus:not(.btn-active),
.btn.btn-light.show,
.btn.btn-light-primary.show,
.btn-check:checked + .btn.btn-light-primary,
.btn-check:active + .btn.btn-light-primary {
    background-color: var(--color-surface) !important;
    border-color: var(--color-border-strong) !important;
    color: var(--color-secondary) !important;
}

.btn.btn-light:active:not(.btn-active),
.btn.btn-light-primary:active:not(.btn-active) {
    background-color: var(--color-surface-muted) !important;
    border-color: var(--color-border-strong) !important;
    color: var(--color-secondary) !important;
}

/*  El icono de un boton terciario va del mismo #333 que su texto y su borde.
    Sin esto heredaba el dorado de `--kt-primary` y el boton quedaba con dos
    colores (el de Reiniciar, por ejemplo). */
.btn.btn-light i,
.btn.btn-light .svg-inline--fa,
.btn.btn-light-primary i,
.btn.btn-light-primary .svg-inline--fa,
.btn.btn-light .svg-icon,
.btn.btn-light-primary .svg-icon {
    color: var(--color-secondary) !important;
}

.btn.btn-light:disabled i,
.btn.btn-light-primary:disabled i,
.btn.btn-light:disabled .svg-inline--fa,
.btn.btn-light-primary:disabled .svg-inline--fa {
    color: var(--color-text-disabled) !important;
}

/* ---------- 3.4 Éxito / peligro (exportar Excel, PDF, eliminar) ------ */
.btn.btn-success,
.btn.btn-outline-success,
.btn.btn-outline.btn-outline-success {
    background-color: var(--color-surface-subtle) !important;
    border: var(--bcrd-border-width-strong) solid var(--color-success-text) !important;
    color: var(--color-secondary) !important;
}

.btn.btn-success:hover,
.btn.btn-outline-success:hover {
    background-color: var(--color-surface) !important;
    border-color: var(--color-success-text) !important;
    color: var(--color-secondary) !important;
}

.btn.btn-success:disabled,
.btn.btn-outline-success:disabled {
    background-color: var(--color-surface) !important;
    border-color: var(--color-success-soft) !important;
    color: var(--color-text-disabled) !important;
}

.btn.btn-danger,
.btn.btn-outline-danger,
.btn.btn-outline.btn-outline-danger {
    background-color: var(--color-surface-subtle) !important;
    border: var(--bcrd-border-width-strong) solid var(--color-danger-text) !important;
    color: var(--color-secondary) !important;
}

.btn.btn-danger:hover,
.btn.btn-outline-danger:hover {
    background-color: var(--color-surface) !important;
    border-color: var(--color-danger-text) !important;
    color: var(--color-secondary) !important;
}

.btn.btn-danger:disabled,
.btn.btn-outline-danger:disabled {
    background-color: var(--color-surface) !important;
    border-color: var(--color-danger-soft) !important;
    color: var(--color-text-disabled) !important;
}

/* Variantes `-light-` de Metronic (btn-light-danger, btn-light-success).
   Sin esto caían al relleno translúcido de Metronic y quedaban de otro
   estilo que su pareja `btn-outline-*`: es lo que hacía que Rechazar y
   Aceptar no pegaran uno al lado del otro. Se igualan al patrón del kit. */
.btn.btn-light-danger,
.btn.btn-active-light-danger {
    background-color: var(--color-surface-subtle) !important;
    border: var(--bcrd-border-width-strong) solid var(--color-danger-text) !important;
    color: var(--color-secondary) !important;
}

.btn.btn-light-danger:hover,
.btn.btn-active-light-danger:hover {
    background-color: var(--color-surface) !important;
    border-color: var(--color-danger-text) !important;
    color: var(--color-secondary) !important;
}

.btn.btn-light-success,
.btn.btn-active-light-success {
    background-color: var(--color-surface-subtle) !important;
    border: var(--bcrd-border-width-strong) solid var(--color-success-text) !important;
    color: var(--color-secondary) !important;
}

.btn.btn-light-success:hover,
.btn.btn-active-light-success:hover {
    background-color: var(--color-surface) !important;
    border-color: var(--color-success-text) !important;
    color: var(--color-secondary) !important;
}

/* El ícono lleva el color semántico; el texto se queda en #333, que es lo
   que da el 12.6:1 del kit. Un texto rojo o verde sobre #F8F8F8 bajaría
   el contraste y además compite con el borde. */
.btn.btn-danger i,
.btn.btn-outline-danger i,
.btn.btn-light-danger i {
    color: var(--color-danger-text) !important;
}

.btn.btn-success i,
.btn.btn-outline-success i,
.btn.btn-light-success i {
    color: var(--color-success-text) !important;
}

/* Deshabilitado: tiene que leerse como deshabilitado, no como roto. El
   borde se apaga junto con el texto y el ícono, y el cursor lo confirma. */
.btn.btn-danger:disabled,
.btn.btn-danger.disabled,
.btn.btn-outline-danger:disabled,
.btn.btn-light-danger:disabled,
.btn.btn-success:disabled,
.btn.btn-success.disabled,
.btn.btn-outline-success:disabled,
.btn.btn-light-success:disabled {
    background-color: var(--color-surface-muted) !important;
    border-color: var(--color-border-strong) !important;
    color: var(--color-text-disabled) !important;
    cursor: not-allowed;
    opacity: 1; /* Bootstrap baja a .65 y lo deja ilegible sobre gris */
}

.btn.btn-danger:disabled i,
.btn.btn-outline-danger:disabled i,
.btn.btn-light-danger:disabled i,
.btn.btn-success:disabled i,
.btn.btn-outline-success:disabled i,
.btn.btn-light-success:disabled i {
    color: var(--color-text-disabled) !important;
}

/* Pareja de acciones (Rechazar / Aceptar) con separación del kit y que
   no se apilen apretadas en móvil. */
.btn-actions-bcrd {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bcrd-spacing-2);
}

/* ---------- 3.5 Botones de ícono ---------- */
.btn.btn-icon.btn-active-light-primary:hover,
.btn.btn-active-light-primary:hover,
.btn.btn-active-color-primary:hover {
    background-color: var(--color-primary-soft) !important;
    color: var(--color-primary-text) !important;
}

.btn.btn-active-color-primary:hover i,
.btn.btn-active-light-primary:hover i {
    color: var(--color-primary-text) !important;
}

/* =====================================================================
   4. FORMULARIOS
   ===================================================================== */

.form-label,
label.form-label,
.col-form-label {
    font-family: var(--bcrd-font-family);
    font-size: var(--bcrd-label-lg);
    font-weight: var(--bcrd-font-medium);
    color: var(--color-secondary);
    margin-bottom: 5px;
}

.form-control,
.form-select {
    background-color: var(--color-surface);
    border: var(--bcrd-border-width) solid var(--color-border-interactive);
    border-radius: var(--bcrd-radius);
    font-family: var(--bcrd-font-family);
    font-size: var(--bcrd-text-body-sm);
    font-weight: var(--bcrd-font-book);
    color: var(--color-secondary);
    transition: border-color var(--bcrd-transition),
                box-shadow var(--bcrd-transition);
}

.form-control::placeholder {
    color: var(--color-text-placeholder);
    opacity: 1;
}

.form-control:hover:not(:disabled):not([readonly]),
.form-select:hover:not(:disabled) {
    border-color: var(--color-text-muted);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--color-surface);
    border-color: var(--color-primary-fill);
    box-shadow: var(--bcrd-shadow-focus);
    color: var(--color-secondary);
}

.form-control.is-invalid,
.form-select.is-invalid,
.form-control.input-validation-error,
.input-validation-error {
    border-color: var(--color-danger-text) !important;
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    background-color: var(--color-border);
    border-color: var(--color-border);
    color: var(--color-text-disabled);
}

.invalid-feedback,
.field-validation-error,
span.field-validation-error {
    color: var(--color-danger-text);
    font-size: var(--bcrd-text-caption);
    font-weight: var(--bcrd-font-book);
}

.form-text {
    color: var(--color-text-muted);
    font-size: var(--bcrd-text-caption);
    font-weight: var(--bcrd-font-light);
}

/* ---------- 4.1 Checkbox / radio ---------- */
.form-check-input {
    width: 18px;
    height: 18px;
    background-color: var(--color-surface-subtle);
    border: var(--bcrd-border-width) solid var(--color-border-interactive);
    border-radius: var(--bcrd-radius);
}

.form-check-input[type='radio'] {
    border-radius: 50%;
}

.form-check-input:checked {
    background-color: var(--color-primary-fill);
    border-color: var(--color-primary-fill);
}

.form-check-input:focus {
    border-color: var(--color-primary);
    box-shadow: var(--bcrd-focus-ring);
}

.form-check-input:disabled {
    background-color: var(--color-border);
    border-color: var(--color-text-disabled);
}

.form-check-label {
    font-size: var(--bcrd-text-body-sm);
    font-weight: var(--bcrd-font-book);
    color: var(--color-secondary);
}

/* ---------- 4.2 Switch ---------- */
.form-switch .form-check-input {
    width: 48px;
    height: 24px;
    background-color: var(--color-surface);
    border: var(--bcrd-border-width) solid var(--color-border-interactive);
    border-radius: var(--bcrd-radius-pill);
}

.form-switch .form-check-input:checked {
    background-color: var(--color-primary-fill);
    border-color: var(--color-primary-fill);
}

/* ---------- 4.3 input-group ---------- */
.input-group-text {
    background-color: var(--color-surface-muted);
    border: var(--bcrd-border-width) solid var(--color-border);
    border-radius: var(--bcrd-radius);
    color: var(--color-text-muted);
    font-family: var(--bcrd-font-family);
    font-size: var(--bcrd-text-input);
}

/* ---------- 4.4 Select2 ---------- */
.select2-container--bootstrap-5 .select2-selection,
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
    border: var(--bcrd-border-width) solid var(--color-border-interactive) !important;
    border-radius: var(--bcrd-radius) !important;
    font-family: var(--bcrd-font-family);
    font-size: var(--bcrd-text-body-sm) !important;
    color: var(--color-secondary);
}

.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: var(--color-primary-fill) !important;
    box-shadow: var(--bcrd-shadow-focus) !important;
}

.select2-container--bootstrap-5 .select2-dropdown {
    border-color: var(--color-border) !important;
    border-radius: var(--bcrd-radius) !important;
}

.select2-container--bootstrap-5 .select2-results__option--highlighted[aria-selected],
.select2-container--bootstrap-5 .select2-results__option--highlighted {
    background-color: var(--color-primary-soft) !important;
    color: var(--color-secondary) !important;
}

.select2-container--bootstrap-5 .select2-results__option[aria-selected='true'],
.select2-container--bootstrap-5 .select2-results__option--selected {
    background-color: var(--color-primary-fill) !important;
    color: var(--color-surface) !important;
}

/* =====================================================================
   5. CONTENEDORES
   ===================================================================== */

.card {
    background-color: var(--color-surface);
    border: var(--bcrd-border-width) solid var(--color-border);
    border-radius: var(--bcrd-radius);
    box-shadow: none;
}

.card > .card-header {
    background-color: var(--color-surface-muted);
    border-bottom: var(--bcrd-border-width) solid var(--color-border);
    border-top-left-radius: var(--bcrd-radius);
    border-top-right-radius: var(--bcrd-radius);
    min-height: auto;
    padding: 10px 15px;
}

.card > .card-header .card-title,
.card > .card-header .card-label {
    font-family: var(--bcrd-font-family);
    font-size: var(--bcrd-h5);
    font-weight: var(--bcrd-font-medium);
    color: var(--color-secondary);
    margin: 0;
}

.card > .card-body {
    padding: 15px;
}

.card > .card-footer {
    background-color: var(--color-surface);
    border-top: var(--bcrd-border-width) solid var(--color-border);
    padding: 10px 15px;
}

/* ---------- 5.1 Tablas ---------- */
.table {
    --bs-table-bg: var(--color-surface);
    --bs-table-striped-bg: var(--color-surface-subtle);
    --bs-table-hover-bg: var(--color-primary-soft);
    --bs-table-color: var(--color-secondary);
    --bs-table-border-color: var(--color-border);
    font-family: var(--bcrd-font-family);
    color: var(--color-secondary);
}

.table > thead > tr > th,
.table thead th {
    background-color: var(--color-surface-muted);
    border-bottom: var(--bcrd-border-width) solid var(--color-border) !important;
    font-size: var(--bcrd-label);
    font-weight: var(--bcrd-font-medium);
    color: var(--color-secondary);
    text-transform: none;
    letter-spacing: normal;
    /*  10px a los lados dejaba el texto pegado al borde de la tarjeta.
        El ritmo vertical lo siguen controlando las utilidades `gy-*`. */
    padding: 12px var(--bcrd-spacing-3);
    vertical-align: middle;
    white-space: nowrap;
}

.table > tbody > tr > td,
.table tbody td {
    border-bottom: var(--bcrd-border-width) solid var(--color-border);
    font-size: var(--bcrd-text-body-sm);
    font-weight: var(--bcrd-font-book);
    color: var(--color-secondary);
    padding: 8px var(--bcrd-spacing-3);
    vertical-align: middle;
}

/*  Metronic pone `padding-left: 0` en la primera celda y `padding-right: 0`
    en la última (`.table th:first-child` / `:last-child`), lo que pegaba la
    primera columna al borde. Se les deja un margen menor que el interior,
    para que la tabla respire sin descuadrarse con el resto de la tarjeta. */
.table > thead > tr > *:first-child,
.table > tbody > tr > *:first-child {
    padding-left: var(--bcrd-spacing-3);
}

.table > thead > tr > *:last-child,
.table > tbody > tr > *:last-child {
    padding-right: var(--bcrd-spacing-3);
}

.table.table-row-dashed > tbody > tr {
    border-bottom-color: var(--color-border);
}

.table.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: var(--color-surface-subtle);
    background-color: var(--color-surface-subtle);
}

/* DataTables: contenedor con el borde y radio del UI Kit */
.dataTables_wrapper .table {
    border: var(--bcrd-border-width) solid var(--color-border);
    border-radius: var(--bcrd-radius);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}

/* =====================================================================
   6. NAVEGACIÓN
   ===================================================================== */

/* ---------- 6.1 Tabs ---------- */
.nav-tabs {
    border-bottom: var(--bcrd-border-width) solid var(--color-border);
}

.nav-tabs .nav-link {
    height: var(--bcrd-control-height);
    padding: 10px;
    display: inline-flex;
    align-items: center;
    background-color: var(--color-surface-subtle);
    border: var(--bcrd-border-width) solid var(--color-border);
    border-bottom: none;
    border-radius: var(--bcrd-radius) var(--bcrd-radius) 0 0;
    font-family: var(--bcrd-font-family);
    font-size: var(--bcrd-label);
    font-weight: var(--bcrd-font-medium);
    color: var(--color-secondary);
}

.nav-tabs .nav-link:hover {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-primary-active);
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-secondary);
}

/* Variante de pestañas con línea (Metronic) */
.nav-line-tabs .nav-item .nav-link.active,
.nav-line-tabs .nav-item .nav-link:hover:not(.disabled) {
    border-bottom-color: var(--color-primary-fill);
    color: var(--color-primary-text);
}

/* ---------- 6.1.a Logo del panel lateral ----------
   El aside del theme9 mide 140px fijos (`.aside { width: 140px }`; 100px por
   debajo de 992px). El logo completo a 40px de alto ocupa 131.7px, así que
   entraba de borde a borde y el logotipo quedaba ilegible y pegado al filo.

   Dentro del panel se muestra sólo el ISOTIPO. No hace falta un segundo
   archivo: se recorta el mismo PNG con object-fit tomando la franja
   izquierda. Medido sobre el archivo (326x99): el isotipo va de x=5 a x=106
   y el logotipo arranca en x=123, así que un recorte de alto x 1.2
   (x=0..118.8) deja el edificio completo sin tocar la primera letra.

   El logo completo se conserva en la cabecera móvil y en la pantalla de
   acceso, donde sí hay espacio horizontal. */
.aside .brand-logo img,
.aside .aside-logo img {
    width: calc(40px * var(--bcrd-logo-isotype-ratio));
    height: 40px;
    max-width: 100%;
    object-fit: cover;
    object-position: left center;
}

/* El enlace no debe ocupar más que el logo ya recortado */
.aside .brand-logo {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    overflow: hidden;
}

/* ---------- 6.1.b Íconos del menú lateral ----------
   Metronic colorea los íconos del menú con reglas del tipo
   `.menu-icon i { ... }`, pero AppMenu/_UserMenuItem.cshtml los pinta con
   un <span class="fa-solid fa-...">, no con <i>. Ninguna de esas reglas
   llegaba a aplicar y el ícono acababa heredando el color del enlace —
   que era el azul de Metronic. Ya está corregido en § 1.1; aquí se fija
   el color explícitamente para los dos elementos, de forma que el menú no
   dependa de qué etiqueta use la plantilla. */
.menu .menu-item .menu-link .menu-icon i,
.menu .menu-item .menu-link .menu-icon span[class*='fa-'] {
    color: var(--color-text-muted);
}

.menu .menu-item .menu-link:hover .menu-icon i,
.menu .menu-item .menu-link:hover .menu-icon span[class*='fa-'],
.menu .menu-item.here > .menu-link .menu-icon i,
.menu .menu-item.here > .menu-link .menu-icon span[class*='fa-'],
.menu .menu-item.show > .menu-link .menu-icon i,
.menu .menu-item.show > .menu-link .menu-icon span[class*='fa-'],
.menu .menu-item .menu-link.active .menu-icon i,
.menu .menu-item .menu-link.active .menu-icon span[class*='fa-'] {
    color: var(--color-primary-text);
}

/* Sobre una superficie dorada (aside del theme9 con el ícono activo de
   fondo lleno) el ícono va en blanco, no en dorado sobre dorado. */
.aside .aside-menu .menu > .menu-item > .menu-link.active .menu-icon i,
.aside .aside-menu .menu > .menu-item > .menu-link.active .menu-icon span[class*='fa-'] {
    color: var(--color-surface);
}

/* ---------- 6.2 Paginación ----------
   Componente Pagination del Figma (nodo 494:83): celdas de 35x35 pegadas
   entre sí, separadas por una línea de 1px, esquinas redondeadas sólo en
   los extremos del grupo, y los cuatro controles de salto (primera,
   anterior, siguiente, última) con la misma caja que los números.
   Metronic las separaba con `margin-right: .25rem` y redondeaba cada una
   por su cuenta, que es lo que hacía que se vieran como fichas sueltas. */

.pagination,
.dataTables_paginate .pagination {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Metronic: `.page-item { margin-right: .25rem }` — el hueco del Figma es 0 */
.pagination .page-item,
.dataTables_paginate .paginate_button {
    margin: 0 !important;
}

.pagination .page-item .page-link,
.pagination .page-link,
.dataTables_paginate .paginate_button .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 35px;
    height: 35px;
    /* El Figma fija 35x35. El padding sólo entra en juego a partir de 3
       dígitos, para que "100" no se salga de la caja. */
    padding: 0 10px;
    background-color: var(--color-surface-muted);
    border: none;
    border-right: var(--bcrd-border-width) solid var(--color-border-strong);
    border-radius: 0;
    font-family: var(--bcrd-font-family);
    font-size: var(--bcrd-text-input);
    font-weight: var(--bcrd-font-book);
    line-height: 1;
    color: var(--color-secondary);
    text-decoration: none;
}

.pagination .page-item .page-link:hover,
.pagination .page-link:hover {
    background-color: var(--color-border);
    color: var(--color-secondary);
}

.pagination .page-item.active .page-link,
.pagination .page-item .page-link.active,
.dataTables_paginate .paginate_button.current .page-link,
.dataTables_paginate .paginate_button.active .page-link {
    background-color: var(--color-primary-fill) !important;
    border-right-color: var(--color-primary-fill);
    color: var(--color-surface) !important;
}

.pagination .page-item.disabled .page-link,
.dataTables_paginate .paginate_button.disabled .page-link {
    background-color: var(--color-surface-muted);
    color: var(--color-text-disabled);
    pointer-events: none;
}

/* Esquinas sólo en los extremos del grupo. No se usa `overflow: hidden`
   en el <ul> porque recortaría el anillo de foco de las celdas. */
.pagination .page-item:first-child .page-link {
    border-top-left-radius: var(--bcrd-radius);
    border-bottom-left-radius: var(--bcrd-radius);
}

.pagination .page-item:last-child .page-link {
    border-right: none;
    border-top-right-radius: var(--bcrd-radius);
    border-bottom-right-radius: var(--bcrd-radius);
}

/* El anillo de foco tiene que pintarse por encima de la celda vecina */
.pagination .page-item .page-link:focus-visible {
    position: relative;
    z-index: 1;
}

/* Los iconos de salto heredan el color de la celda: sin esto Metronic les
   aplica su propio color y quedaban de otro tono que los números. */
.pagination .page-item .page-link i,
.pagination .page-item .page-link .fa,
.dataTables_paginate .paginate_button .page-link i {
    color: inherit;
    font-size: 13px;
    line-height: 1;
}

/* Metronic dibuja `.previous` / `.next` como máscaras SVG con su propio
   color de fondo. Aquí los saltos son iconos de Font Awesome Pro. */
.pagination .page-item .page-link .previous,
.pagination .page-item .page-link .next {
    display: none;
}

/* ---------- 6.3 Breadcrumb ---------- */
.breadcrumb .breadcrumb-item,
.breadcrumb .breadcrumb-item a {
    font-family: var(--bcrd-font-family);
    font-size: var(--bcrd-text-input);
    color: var(--color-text-muted);
}

.breadcrumb .breadcrumb-item.active {
    color: var(--color-secondary);
    font-weight: var(--bcrd-font-medium);
}

/* ---------- 6.4 Menú lateral (aside) ---------- */
.menu .menu-item .menu-link {
    border-radius: var(--bcrd-radius);
    font-family: var(--bcrd-font-family);
    color: var(--color-secondary);
}

.menu .menu-item .menu-link .menu-title {
    font-family: var(--bcrd-font-family);
    font-size: var(--bcrd-label-lg);
    font-weight: var(--bcrd-font-medium);
}

.menu .menu-item .menu-link:hover:not(.disabled):not(.active) {
    background-color: var(--color-surface-muted);
    color: var(--color-secondary);
}

.menu .menu-item .menu-link.active,
.menu .menu-item.here > .menu-link {
    background-color: var(--color-primary-soft) !important;
    color: var(--color-primary-text) !important;
}

.menu .menu-item .menu-link.active .menu-title,
.menu .menu-item .menu-link.active .menu-icon i {
    color: var(--color-primary-text) !important;
}

/* =====================================================================
   7. INDICADORES Y AVISOS
   ===================================================================== */

.badge {
    padding: 5px 10px;
    border-radius: var(--bcrd-radius-sm);
    font-family: var(--bcrd-font-family);
    font-size: var(--bcrd-label-sm);
    font-weight: var(--bcrd-font-medium);
    line-height: 1;
}

.badge.badge-primary,
.badge.bg-primary,
.badge.badge-light-primary {
    background-color: var(--color-primary-fill) !important;
    color: var(--color-surface) !important;
}

.badge.badge-success, .badge.bg-success { background-color: var(--color-success-text) !important; color: var(--color-surface) !important; }
.badge.badge-danger,  .badge.bg-danger  { background-color: var(--color-danger-text) !important;  color: var(--color-surface) !important; }
.badge.badge-secondary, .badge.bg-secondary {
    background-color: var(--color-surface-muted) !important;
    color: var(--color-secondary) !important;
}

/* Alertas con la estética del callout del UI Kit */
.alert {
    padding: 15px;
    background-color: var(--color-primary-soft);
    border: none;
    border-left: var(--bcrd-border-accent) solid var(--color-primary);
    border-radius: var(--bcrd-radius-sm);
    font-family: var(--bcrd-font-family);
    font-size: var(--bcrd-text-input);
    color: var(--color-secondary);
}

.alert.alert-success, .alert.alert-light-success {
    background-color: rgba(0, 107, 0, 0.08);
    border-left-color: var(--color-success-text);
    color: var(--color-secondary);
}

.alert.alert-danger, .alert.alert-light-danger {
    background-color: rgba(255, 0, 0, 0.06);
    border-left-color: var(--color-danger);
    color: var(--color-secondary);
}

.alert.alert-warning, .alert.alert-light-warning,
.alert.alert-info, .alert.alert-light-info {
    background-color: var(--color-primary-soft);
    border-left-color: var(--color-primary);
    color: var(--color-secondary);
}

/* ---------- 7.1 Modales ---------- */
.modal-content {
    border: var(--bcrd-border-width) solid var(--color-border);
    border-radius: var(--bcrd-radius);
}

.modal-header {
    background-color: var(--color-surface-muted);
    border-bottom: var(--bcrd-border-width) solid var(--color-border);
    border-top-left-radius: var(--bcrd-radius);
    border-top-right-radius: var(--bcrd-radius);
    padding: 10px 15px;
}

.modal-header .modal-title {
    font-family: var(--bcrd-font-family);
    font-size: var(--bcrd-h5);
    font-weight: var(--bcrd-font-medium);
    color: var(--color-secondary);
}

.modal-body { padding: 15px; }

.modal-footer {
    border-top: var(--bcrd-border-width) solid var(--color-border);
    padding: 10px 15px;
    gap: var(--bcrd-spacing-2);
}

/* ---------- 7.2 SweetAlert2 / toastr ---------- */
.swal2-popup { border-radius: var(--bcrd-radius); font-family: var(--bcrd-font-family); }
.swal2-styled.swal2-confirm {
    background-color: var(--color-primary-fill) !important;
    border-radius: var(--bcrd-radius) !important;
    color: var(--color-surface) !important;
}
.swal2-styled.swal2-cancel {
    background-color: var(--color-surface) !important;
    border: var(--bcrd-border-width-strong) solid var(--color-secondary) !important;
    border-radius: var(--bcrd-radius) !important;
    color: var(--color-secondary) !important;
}

#toast-container > div { border-radius: var(--bcrd-radius); font-family: var(--bcrd-font-family); }
#toast-container > .toast-success { background-color: var(--color-success-text); }
#toast-container > .toast-error   { background-color: var(--color-danger-text); }
#toast-container > .toast-info    { background-color: var(--color-primary-fill); }

/* ---------- 7.3 Foco accesible global ---------- */
:focus-visible {
    outline: 2px solid var(--color-primary-fill);
    outline-offset: 2px;
}

/* =====================================================================
   8. INTERACCIÓN Y MOVIMIENTO
   Hallazgos de la auditoría de UI. Todo por debajo de 300ms y con
   curvas marcadas: en una herramienta que se usa a diario, la animación
   que se nota es la que estorba.
   ===================================================================== */

/* ---------- 8.1 Respuesta a la pulsación ----------
   Un botón que no reacciona al presionarlo se siente muerto. 3% de
   escala es suficiente: se percibe sin llamar la atención. */
.btn,
.btn-primary-bcrd,
.btn-secondary-bcrd,
.btn-tertiary-bcrd,
.btn-pdf-bcrd,
.btn-excel-bcrd,
.btn-primary-icon-bcrd,
.btn-menu-bcrd,
.pagination .page-link,
.pill-bcrd {
    transition: background-color var(--bcrd-duration-fast) ease,
                border-color var(--bcrd-duration-fast) ease,
                color var(--bcrd-duration-fast) ease,
                box-shadow var(--bcrd-duration-fast) var(--bcrd-ease-out),
                transform var(--bcrd-duration-press) var(--bcrd-ease-out);
}

.btn:active:not(:disabled):not(.disabled),
.btn-primary-bcrd:active:not(:disabled),
.btn-secondary-bcrd:active:not(:disabled),
.btn-tertiary-bcrd:active:not(:disabled),
.btn-pdf-bcrd:active:not(:disabled),
.btn-excel-bcrd:active:not(:disabled),
.btn-primary-icon-bcrd:active:not(:disabled) {
    transform: scale(0.97);
}

/* Las celdas de paginación no escalan: van pegadas unas a otras y al
   encoger una se abriría un hueco. El estado presionado se marca en color. */
.pagination .page-item:not(.disabled) .page-link:active {
    background-color: var(--color-border-strong);
}

/* Un ítem de menú a ancho completo no debe encogerse: se desplaza. */
.btn-menu-bcrd:active:not(:disabled),
.menu .menu-item .menu-link:active {
    transform: translateY(1px);
}

/* ---------- 8.2 Áreas táctiles ----------
   En pantalla táctil no hay puntero fino: los objetivos pequeños fallan.
   WCAG 2.5.8 pide 24×24 como mínimo; aquí se va a 44×44 salvo en las
   acciones dentro de tabla, donde 36px mantiene la densidad usable. */
@media (pointer: coarse) {
    .btn:not(.btn-icon),
    .pagination .page-link,
    .dataTables_paginate .paginate_button {
        min-height: 44px;
    }

    .pagination .page-link,
    .dataTables_paginate .paginate_button {
        min-width: 44px;
    }

    .btn.btn-icon {
        min-width: 44px;
        min-height: 44px;
    }

    .table .btn.btn-sm,
    .table .btn.btn-icon {
        min-width: 36px;
        min-height: 36px;
    }

    /* Separación entre objetivos contiguos, para no pulsar el vecino */
    .table td .btn + .btn {
        margin-left: var(--bcrd-spacing-2);
    }
}

/* ---------- 8.3 Estado vacío ----------
   Una tabla vacía sin explicación parece un error de carga. */
.dataTables_empty,
.bcrd-empty {
    padding: var(--bcrd-spacing-6) var(--bcrd-spacing-3) !important;
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--bcrd-text-body-sm);
}

.dataTables_empty::before,
.bcrd-empty::before {
    content: '\f119';                     /* cara neutra de Font Awesome */
    font-family: 'Font Awesome 6 Pro', 'Font Awesome 6 Free';
    font-weight: 400;
    display: block;
    margin-bottom: var(--bcrd-spacing-2);
    font-size: 28px;
    color: var(--color-border-strong);
}

/* ---------- 8.4 Tablas anchas ----------
   Sin contenedor, una tabla ancha empuja el layout y aparece scroll
   horizontal en toda la página. */
.table-responsive,
.dataTables_wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ---------- 8.5 Foco visible en todo elemento interactivo ----------
   El anillo de la marca, no el del navegador, y nunca `outline: none`
   sin sustituto. */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
.page-link:focus-visible,
.menu-link:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible,
a:focus-visible {
    outline: 2px solid var(--color-primary-fill);
    outline-offset: 2px;
}

/* El elemento pulsado no debe arrastrar el anillo mientras se mantiene */
.btn:active:focus:not(:focus-visible) {
    outline: none;
}

/* ---------- 8.6 Cursor ----------
   Si algo se puede pulsar, tiene que parecerlo. */
.clickable-item,
[data-bs-toggle],
.page-link,
.menu-link,
label.form-check-label,
.switch-bcrd,
.panel-bcrd__title {
    cursor: pointer;
}

.btn:disabled,
.btn.disabled,
.form-control:disabled,
.form-select:disabled {
    cursor: not-allowed;
}

/* ---------- 8.7 Movimiento reducido ----------
   No es "cero animación": se conservan color y opacidad, que ayudan a
   entender el cambio de estado, y se elimina todo desplazamiento. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }

    .btn:active,
    .btn-primary-bcrd:active,
    .btn-secondary-bcrd:active,
    .btn-tertiary-bcrd:active,
    .btn-pdf-bcrd:active,
    .btn-excel-bcrd:active,
    .btn-primary-icon-bcrd:active,
    .btn-menu-bcrd:active,
    .menu .menu-item .menu-link:active {
        transform: none !important;
    }

    .btn,
    .btn-primary-bcrd,
    .btn-secondary-bcrd,
    .btn-tertiary-bcrd,
    .pagination .page-link {
        transition: background-color 120ms linear,
                    border-color 120ms linear,
                    color 120ms linear !important;
    }
}

/* =====================================================================
   9. SPINNER DE CARGA
   El loader de la aplicación lo dibuja spin.js (abp.ui.setBusy). Venía
   con 8 barras blancas muy gruesas — invisible sobre fondo claro y lejos
   del kit. La configuración nueva está en
   wwwroot/Common/Scripts/main-customize.js: 12 líneas finas redondeadas
   en el dorado institucional, que es el componente `loader` del Figma
   (nodo 1252:426) en movimiento.
   Aquí sólo va lo que spin.js no puede poner por atributo.
   ===================================================================== */

/* ---------- 9.0 Overlay de abp.ui.setBusy ----------
   El comportamiento está en wwwroot/Common/Scripts/main-customize.js, que
   sustituye la implementación de spin.js de ABP. Aquí va el aspecto. */
.bcrd-busy-overlay {
    position: absolute;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Velo claro: el dorado del spinner se apaga sobre un velo gris. */
    background-color: var(--bcrd-veil);
}

/* Sobre toda la página el overlay no debe irse con el scroll */
.bcrd-busy-overlay--page {
    position: fixed;
    z-index: 2000;
}

/* En un contenedor alto (una tabla larga) el spinner se queda arriba, a la
   vista, en vez de centrarse a mitad de un bloque que no se ve. */
.bcrd-busy-overlay:not(.bcrd-busy-overlay--page) {
    align-items: flex-start;
    padding-top: 80px;
}

/* Restos de spin.js, por si alguna vista lo invoca directamente */
.spinner {
    line-height: 0;
}

/* Overlay de abp.blockUI: velo claro de la marca en vez del gris de la
   librería, para que el dorado del spinner no quede apagado. */
.blockUI.blockOverlay {
    background-color: var(--color-surface) !important;
    opacity: 0.6 !important;
}

.blockUI.blockMsg {
    border: none !important;
    background: transparent !important;
}

/* ---------- 9.0 Un solo indicador de carga ----------
   En las tablas se dibujaban DOS a la vez y se pisaban:

   1. `abp.ui.setBusy(settings.nTable)` desde datatables.ajax.js — el spinner
      dorado de spin.js, el mismo de toda la aplicación.
   2. El indicador propio de DataTables (`processing: true` en varias vistas):
      una caja blanca con "Procesando…" y cuatro puntos en el azul de
      Bootstrap (`rgba(13,110,253,.9)`, de datatables.bundle.css).

   Se conserva el dorado, que es el de la marca y el que sale en el resto de
   la aplicación. La caja de DataTables se deja invisible pero presente en el
   árbol de accesibilidad, para que el lector de pantalla siga anunciando
   "Procesando…" cuando la tabla se recarga. */
div.dataTables_wrapper div.dataTables_processing,
div.dataTables_processing {
    width: 1px !important;
    height: 1px !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: -1px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    clip-path: inset(50%);
}

/* ---------- 9.1 Spinner en CSS ----------
   Alternativa sin JS, para usarla dentro de un botón, una celda o un
   contenedor vacío: <span class="spinner-bcrd"></span>
   El anillo usa --color-primary (#967D2D): es un elemento gráfico, no
   texto, así que le aplica el mínimo de 3:1 de WCAG 1.4.11, que cumple. */
.spinner-bcrd {
    display: inline-block;
    width: var(--bcrd-spinner-size, 24px);
    height: var(--bcrd-spinner-size, 24px);
    border: var(--bcrd-spinner-width, 3px) solid var(--color-surface-muted);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: bcrd-spin 700ms linear infinite;
    vertical-align: middle;
}

.spinner-bcrd.spinner-bcrd-sm {
    --bcrd-spinner-size: 16px;
    --bcrd-spinner-width: 2px;
}

.spinner-bcrd.spinner-bcrd-lg {
    --bcrd-spinner-size: 40px;
    --bcrd-spinner-width: 4px;
}

/* Dentro de un botón hereda el color del texto para no romper el contraste */
.btn .spinner-bcrd {
    border-color: currentColor;
    border-top-color: transparent;
}

@keyframes bcrd-spin {
    to { transform: rotate(360deg); }
}

/* Ícono giratorio de Font Awesome usado como carga suelta (fuera de un
   botón, que ya fija el color de su propio contenido). */
.fa-spin.text-primary-bcrd,
.spinner-icon-bcrd {
    color: var(--color-primary) !important;
}

@media (prefers-reduced-motion: reduce) {
    .spinner-bcrd {
        animation-duration: 1800ms;
    }
}


/* =====================================================================
   10. PANEL DE NOTIFICACIONES
   Dropdown de la campana del header. La cabecera es `.bg-primary`, así
   que ya salía dorada, pero lo de dentro seguía con los colores de
   Metronic: el contador y el engranaje eran cajas grises sobre el dorado
   y el enlace de "marcar como leído" iba en el verde de Bootstrap.
   ===================================================================== */

#header_notification_bar .dropdown-menu {
    border: var(--bcrd-border-width) solid var(--color-border);
    border-radius: var(--bcrd-radius);
    box-shadow: var(--bcrd-shadow-panel);
    overflow: hidden;
}

/* ---------- Cabecera dorada ---------- */
#header_notification_bar .dropdown-menu .bg-primary {
    background-color: var(--color-primary-fill) !important;
    padding-bottom: var(--bcrd-spacing-3);
}

#header_notification_bar .dropdown-menu .bg-primary h4 {
    margin: 0;
    font-family: var(--bcrd-font-family);
    font-size: var(--bcrd-text-subtitle);
    font-weight: var(--bcrd-font-medium);
    color: var(--color-surface);
}

/* Contador de no leídas: pastilla translúcida con borde blanco. Sobre el
   dorado, un botón gris de Metronic se leía como un control deshabilitado. */
#header_notification_bar .dropdown-menu .bg-primary .btn.btn-outline-secondary,
#header_notification_bar .dropdown-menu .bg-primary .btn.btn-text {
    background-color: var(--bcrd-on-primary-veil) !important;
    border: var(--bcrd-border-width) solid var(--bcrd-on-primary-line) !important;
    color: var(--color-surface) !important;
}

#header_notification_bar .dropdown-menu .bg-primary .btn.btn-outline-secondary:hover,
#header_notification_bar .dropdown-menu .bg-primary .btn.btn-text:hover {
    background-color: var(--bcrd-on-primary-veil-hover) !important;
    border-color: var(--color-surface) !important;
    color: var(--color-surface) !important;
}

#header_notification_bar .dropdown-menu .bg-primary .btn i {
    color: var(--color-surface) !important;
}

/* ---------- Lista ---------- */
#header_notification_bar .symbol-label {
    background-color: var(--color-primary-soft);
    color: var(--color-primary-text);
}

#header_notification_bar .symbol-label i {
    color: var(--color-primary-text);
}

#header_notification_bar .user-notification-item-unread .symbol-label {
    background-color: var(--color-primary-soft);
}

#header_notification_bar .user-notification-item-clickable {
    cursor: pointer;
}

/* El texto de la notificación es texto, no un enlace. Metronic lo pinta
   con el color de enlace (antes azul, ahora dorado) porque la plantilla lo
   envuelve en un <a> sin href. Se devuelve al color de cuerpo, y el dorado
   se reserva para el hover, que es cuando sí se comporta como enlace. */
#header_notification_bar .user-notification-item-unread a,
#header_notification_bar .d-flex .flex-grow-1 a {
    color: var(--color-secondary);
    text-decoration: none;
}

#header_notification_bar .d-flex .flex-grow-1 a.text-muted {
    color: var(--color-text-muted) !important;
}

#header_notification_bar .user-notification-item-clickable:hover .flex-grow-1 a {
    color: var(--color-primary-text);
}

/* "Marcar como leído" iba en el verde de Bootstrap, fuera de paleta. */
#header_notification_bar .set-notification-as-read {
    color: var(--color-primary-text) !important;
    font-weight: var(--bcrd-font-medium);
    text-decoration: none;
}

#header_notification_bar .set-notification-as-read:hover {
    color: var(--color-primary-active) !important;
    text-decoration: underline;
}

#header_notification_bar .notification-empty-text {
    color: var(--color-text-muted);
    font-size: var(--bcrd-text-body-sm);
}

/* ---------- Pie ----------
   Los dos botones venían con `col col-xs-12` y se repartían el ancho, así
   que "Marcar todos como leídos" partía en dos líneas y quedaba 18px más
   alto que su compañero. Se igualan y se les deja reducir la letra. */
#header_notification_bar .dropdown-menu .m-1 {
    display: flex;
    gap: var(--bcrd-spacing-2);
    align-items: stretch;
}

#header_notification_bar .dropdown-menu .m-1 .btn {
    flex: 1 1 0;
    min-width: 0;
    /* Altura fija: el botón con borde mide 2px más por lado que el sólido,
       y se notaba que uno quedaba más alto que el otro. */
    height: var(--bcrd-button-height);
    min-height: var(--bcrd-button-height);
    padding-top: 0;
    padding-bottom: 0;
    padding-left: var(--bcrd-spacing-2);
    padding-right: var(--bcrd-spacing-2);
    font-size: var(--bcrd-label-sm);
    text-align: center;
}

/* ---------- Badge del contador sobre la campana ----------
   El marcado usa `top-0 start-100 translate-middle`, que ancla el badge a la
   esquina del BOTÓN. Como el botón mide ~43px y la campana sólo 16px, el
   contador quedaba flotando lejos del ícono. Se ancla al ícono. */
#header_notification_bar .unread-notification-count {
    top: 4px !important;
    right: 4px !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    /*  Círculo exacto con un dígito y píldora a partir de dos. `badge-circle`
        de Metronic fuerza `border-radius: 50%`, que con padding horizontal
        deforma el badge en una elipse; se sustituye por un radio de píldora. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    /*  `.badge.badge-circle` de Metronic fija `width: 1.75rem` (22.75px) y
        `min-width: unset`, así que el contador salía siempre ovalado. Se
        suelta el ancho y manda `min-width`. */
    width: auto !important;
    min-width: 18px;
    height: 18px;
    /*  Con un dígito manda `min-width` y sale un círculo de 18x18; a partir
        de dos, el contenido lo estira en píldora. El padding tiene que ser
        pequeño o el círculo se vuelve elipse. */
    padding: 0 2px;
    border-radius: var(--bcrd-radius-pill) !important;
    background-color: var(--color-danger-text) !important;
    border: 2px solid var(--color-surface);
    color: var(--color-surface) !important;
    font-family: var(--bcrd-font-family);
    font-size: 10px;
    font-weight: var(--bcrd-font-medium);
    line-height: 1;
}