/*
 * Perfiles de color globales. "actual" conserva los tokens originales del
 * sistema. "institucional" aplica la paleta del manual en zonas de identidad
 * y la combina con superficies funcionales neutras.
 */
body.app-shell {
    --app-brand: var(--app-primary);
    --app-accent: #fd7e14;
    --app-primary-contrast: #ffffff;
    --app-navbar-start: #1a468f;
    --app-navbar-middle: #173c79;
    --app-navbar-end: #122f61;
    --app-sidebar-surface: #ffffff;
    --app-sidebar-subnav: #e8f3ff;
    --app-sidebar-subnav-hover: #d9ebff;
    --app-sidebar-subnav-border: #b9d6f3;
    --app-sidebar-subnav-hover-border: #94bfe9;
}

body.app-shell.theme-dark {
    --app-brand: var(--app-primary);
    --app-accent: #ffd37a;
    --app-primary-contrast: #ffffff;
    --app-navbar-start: #1a468f;
    --app-navbar-middle: #173c79;
    --app-navbar-end: #122f61;
    --app-sidebar-surface: var(--app-surface);
    --app-sidebar-subnav: var(--app-surface-raised);
    --app-sidebar-subnav-hover: var(--app-surface-subtle);
    --app-sidebar-subnav-border: var(--app-border);
    --app-sidebar-subnav-hover-border: var(--app-border-strong);
}

body.app-shell[data-color-profile="institucional"]:not(.theme-dark) {
    --app-canvas: color-mix(in srgb, #305ca2 6%, #ffffff);
    --app-surface: #ffffff;
    --app-surface-raised: #ffffff;
    --app-surface-subtle: color-mix(in srgb, #305ca2 5%, #ffffff);
    --app-surface-muted: color-mix(in srgb, #305ca2 9%, #ffffff);
    --app-input: #ffffff;
    --app-input-muted: color-mix(in srgb, #305ca2 7%, #ffffff);
    --app-text: #002151;
    --app-text-secondary: #002d79;
    --app-text-muted: #5b5b5e;
    --app-text-disabled: color-mix(in srgb, #5b5b5e 62%, #ffffff);
    --app-border: color-mix(in srgb, #305ca2 22%, #ffffff);
    --app-border-strong: color-mix(in srgb, #305ca2 38%, #ffffff);
    --app-brand: #305ca2;
    --app-primary: #305ca2;
    --app-primary-hover: #002d79;
    --app-primary-active: #002151;
    --app-primary-soft: rgba(48, 92, 162, 0.12);
    --app-primary-border: rgba(48, 92, 162, 0.26);
    --app-primary-contrast: #ffffff;
    --app-focus: #305ca2;
    --app-info: #002d79;
    --app-info-soft: color-mix(in srgb, #305ca2 10%, #ffffff);
    --app-accent: #f6e200;
    --app-navbar-start: #2baae2;
    --app-navbar-middle: #2baae2;
    --app-navbar-end: #2baae2;
    --app-navbar-background: #2baae2;
    --app-navbar-brand-background: #2baae2;
    --app-sidebar-surface: #ffffff;
    --app-sidebar-subnav: color-mix(in srgb, #305ca2 9%, #ffffff);
    --app-sidebar-subnav-hover: color-mix(in srgb, #305ca2 14%, #ffffff);
    --app-sidebar-subnav-border: color-mix(in srgb, #305ca2 30%, #ffffff);
    --app-sidebar-subnav-hover-border: color-mix(in srgb, #305ca2 46%, #ffffff);
    --app-sidebar-item: color-mix(in srgb, #305ca2 7%, #ffffff);
    --app-sidebar-item-hover: color-mix(in srgb, #305ca2 14%, #ffffff);
    --app-sidebar-item-active: #002d79;
    --app-sidebar-item-border: color-mix(in srgb, #305ca2 28%, #ffffff);
    --app-sidebar-item-hover-border: #305ca2;
    --app-sidebar-item-text: #305ca2;
    --app-sidebar-item-active-text: #ffffff;
    --app-sidebar-item-accent: #002d79;
    --app-sidebar-item-active-shadow: 0 5px 12px rgba(15, 33, 58, 0.2);
}

body.app-shell[data-color-profile="institucional"].theme-dark {
    /*
     * En oscuro, los colores institucionales identifican acciones y estados;
     * las superficies permanecen neutras para evitar bloques azules saturados.
     */
    --app-canvas: #0c1728;
    --app-surface: #15243a;
    --app-surface-raised: #1b2d47;
    --app-surface-subtle: #1d304c;
    --app-surface-muted: #111f33;
    --app-input: #101f34;
    --app-input-muted: #14253c;
    --app-text: #f4f7fb;
    --app-text-secondary: #d8e1ee;
    --app-text-muted: #abb9cc;
    --app-text-disabled: #8394ab;
    --app-border: rgba(126, 160, 207, 0.22);
    --app-border-strong: #3b587e;
    --app-brand: #4777b8;
    --app-primary: #4777b8;
    --app-primary-hover: #3e6fae;
    --app-primary-active: #305ca2;
    --app-primary-soft: rgba(71, 119, 184, 0.18);
    --app-primary-border: rgba(111, 150, 201, 0.34);
    --app-primary-contrast: #ffffff;
    --app-focus: #7ea0cf;
    --app-info: #7ea0cf;
    --app-info-soft: rgba(71, 119, 184, 0.16);
    --app-accent: #eabf24;
    --app-navbar-start: #2baae2;
    --app-navbar-middle: #2baae2;
    --app-navbar-end: #2baae2;
    --app-navbar-background: #2baae2;
    --app-navbar-brand-background: #2baae2;
    --app-sidebar-surface: #111f33;
    --app-sidebar-subnav: #192b45;
    --app-sidebar-subnav-hover: #203754;
    --app-sidebar-subnav-border: var(--app-border);
    --app-sidebar-subnav-hover-border: var(--app-border-strong);
    --app-sidebar-open-subnav: var(--app-sidebar-subnav);
    --app-sidebar-open-subnav-border: var(--app-sidebar-subnav-border);
    --app-sidebar-item: #1b2d47;
    --app-sidebar-item-hover: #243b58;
    --app-sidebar-item-active: #002d79;
    --app-sidebar-item-border: #314b6d;
    --app-sidebar-item-hover-border: #4777b8;
    --app-sidebar-item-text: #d8e1ee;
    --app-sidebar-item-active-text: #ffffff;
    --app-sidebar-item-accent: #002d79;
    --app-sidebar-item-active-shadow: 0 5px 12px rgba(0, 0, 0, 0.24);
}

body.app-shell[data-color-profile="personalizado"]:not(.theme-dark) {
    --app-canvas: var(--custom-claro-fondo);
    --app-surface: var(--custom-claro-superficie);
    --app-surface-raised: var(--custom-claro-superficie);
    --app-surface-subtle: color-mix(in srgb, var(--custom-claro-marca) 7%, var(--custom-claro-superficie));
    --app-surface-muted: color-mix(in srgb, var(--custom-claro-marca) 11%, var(--custom-claro-superficie));
    --app-input: var(--custom-claro-superficie);
    --app-input-muted: color-mix(in srgb, var(--custom-claro-marca) 8%, var(--custom-claro-superficie));
    --app-border: color-mix(in srgb, var(--custom-claro-marca) 24%, var(--custom-claro-superficie));
    --app-border-strong: color-mix(in srgb, var(--custom-claro-marca) 40%, var(--custom-claro-superficie));
    --app-brand: var(--custom-claro-marca);
    --app-primary: var(--custom-claro-principal);
    --app-primary-hover: color-mix(in srgb, var(--custom-claro-principal) 84%, #000000);
    --app-primary-active: color-mix(in srgb, var(--custom-claro-principal) 70%, #000000);
    --app-primary-soft: color-mix(in srgb, var(--custom-claro-marca) 13%, transparent);
    --app-primary-border: color-mix(in srgb, var(--custom-claro-principal) 25%, transparent);
    --app-primary-contrast: var(--custom-claro-contraste);
    --app-focus: var(--custom-claro-marca);
    --app-info: var(--custom-claro-marca);
    --app-accent: var(--custom-claro-acento);
    --app-navbar-start: var(--custom-claro-marca);
    --app-navbar-middle: color-mix(in srgb, var(--custom-claro-marca) 65%, var(--custom-claro-principal));
    --app-navbar-end: var(--custom-claro-principal);
    --app-navbar-background: linear-gradient(105deg, var(--app-navbar-start), var(--app-navbar-middle) 65%, var(--app-navbar-end));
    --app-navbar-brand-background: var(--app-navbar-start);
    --app-sidebar-surface: var(--custom-claro-superficie);
    --app-sidebar-subnav: color-mix(in srgb, var(--custom-claro-marca) 11%, var(--custom-claro-superficie));
    --app-sidebar-subnav-hover: color-mix(in srgb, var(--custom-claro-marca) 18%, var(--custom-claro-superficie));
    --app-sidebar-subnav-border: color-mix(in srgb, var(--custom-claro-marca) 32%, var(--custom-claro-superficie));
    --app-sidebar-subnav-hover-border: color-mix(in srgb, var(--custom-claro-marca) 48%, var(--custom-claro-superficie));
}

body.app-shell[data-color-profile="personalizado"].theme-dark {
    --app-canvas: var(--custom-oscuro-fondo);
    --app-surface: var(--custom-oscuro-superficie);
    --app-surface-raised: color-mix(in srgb, var(--custom-oscuro-superficie) 90%, #ffffff);
    --app-surface-subtle: color-mix(in srgb, var(--custom-oscuro-marca) 13%, var(--custom-oscuro-superficie));
    --app-surface-muted: color-mix(in srgb, var(--custom-oscuro-superficie) 88%, #000000);
    --app-input: color-mix(in srgb, var(--custom-oscuro-superficie) 80%, #000000);
    --app-input-muted: color-mix(in srgb, var(--custom-oscuro-superficie) 87%, #000000);
    --app-border: color-mix(in srgb, var(--custom-oscuro-marca) 28%, transparent);
    --app-border-strong: color-mix(in srgb, var(--custom-oscuro-marca) 52%, var(--custom-oscuro-superficie));
    --app-brand: var(--custom-oscuro-marca);
    --app-primary: var(--custom-oscuro-principal);
    --app-primary-hover: color-mix(in srgb, var(--custom-oscuro-principal) 84%, #ffffff);
    --app-primary-active: color-mix(in srgb, var(--custom-oscuro-principal) 70%, #ffffff);
    --app-primary-soft: color-mix(in srgb, var(--custom-oscuro-marca) 17%, transparent);
    --app-primary-border: color-mix(in srgb, var(--custom-oscuro-principal) 34%, transparent);
    --app-primary-contrast: var(--custom-oscuro-contraste);
    --app-focus: var(--custom-oscuro-marca);
    --app-info: var(--custom-oscuro-marca);
    --app-accent: var(--custom-oscuro-acento);
    --app-navbar-start: var(--custom-oscuro-marca);
    --app-navbar-middle: color-mix(in srgb, var(--custom-oscuro-marca) 62%, var(--custom-oscuro-principal));
    --app-navbar-end: color-mix(in srgb, var(--custom-oscuro-principal) 70%, var(--custom-oscuro-fondo));
    --app-navbar-background: linear-gradient(105deg, var(--app-navbar-start), var(--app-navbar-middle) 65%, var(--app-navbar-end));
    --app-navbar-brand-background: var(--app-navbar-start);
    --app-sidebar-surface: var(--app-surface);
    --app-sidebar-subnav: var(--app-surface-raised);
    --app-sidebar-subnav-hover: var(--app-surface-subtle);
    --app-sidebar-subnav-border: var(--app-border);
    --app-sidebar-subnav-hover-border: var(--app-border-strong);
    --app-sidebar-open-subnav: var(--app-sidebar-subnav);
    --app-sidebar-open-subnav-border: var(--app-sidebar-subnav-border);
}

/* La opción seleccionada se identifica solo con el azul oscuro institucional. */
body.app-shell[data-color-profile="institucional"] .app-sidebar .nav-sidebar > .nav-item.menu-open > .nav-link:not(.logout-red) > .nav-icon,
body.app-shell[data-color-profile="institucional"] .app-sidebar .nav-sidebar > .nav-item.app-menu-current > .nav-link:not(.logout-red) > .nav-icon {
    color: var(--app-sidebar-item-active-text) !important;
}

body.app-shell[data-color-profile="institucional"] .app-sidebar .nav-sidebar > .nav-item.menu-open > .nav-link:not(.logout-red) .right,
body.app-shell[data-color-profile="institucional"] .app-sidebar .nav-sidebar > .nav-item.app-menu-current > .nav-link:not(.logout-red) .right {
    color: var(--app-sidebar-item-active-text) !important;
}

body.app-shell[data-color-profile="institucional"] .content-wrapper,
body.app-shell[data-color-profile="personalizado"] .content-wrapper {
    background-color: var(--app-canvas);
}

body.app-shell:not([data-color-profile="actual"]) .app-sidebar .nav-treeview .nav-icon[style*="#3c8dbc"] {
    color: var(--app-brand) !important;
}

body.app-shell:not([data-color-profile="actual"]) .app-sidebar .nav-treeview .nav-icon[style*="#fd7e14"] {
    color: var(--app-accent) !important;
}