:root {
    /* Untitled UI – PRO VARIABLES v6.0 (Figma CUSTOM IQ DS)
     * Fuente única de tokens. Componentes y page/*.css solo usan var(--…). */

    /* Tipografía — tamaños */
    --font-size-display-xs: 24px;
    --line-height-display-xs: 32px;
    --font-size-display-sm: 30px;
    --line-height-display-sm: 38px;
    --font-size-display-md: 36px;
    --line-height-display-md: 44px;
    --font-size-text-xs: 12px;
    --line-height-text-xs: 18px;
    --font-size-text-sm: 14px;
    --line-height-text-sm: 20px;
    --font-size-text-md: 16px;
    --line-height-text-md: 24px;
    --font-size-text-lg: 18px;
    --line-height-text-lg: 28px;
    --font-size-text-xl: 20px;
    --line-height-text-xl: 30px;

    /* Tipografía — pesos */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Controles — alturas */
    --control-height-md: calc(var(--spacing-md) * 2 + var(--line-height-text-md));
    --control-height-sm: 28px;

    /* Iconos */
    --icon-size-xs: 10px;
    --icon-size-sm: 15px;
    --icon-size-md: 20px;
    --icon-size-lg: 25px;

    /* Botones — aliases semánticos (→ tokens base) */
    --btn-height: var(--control-height-md);
    --btn-height-sm: var(--control-height-sm);
    --btn-padding-y: var(--spacing-md);
    --btn-padding-x: var(--spacing-lg);
    --btn-padding-x-sm: 15px;
    --btn-font-size: var(--font-size-text-md);
    --btn-font-size-sm: var(--font-size-text-sm);
    --btn-line-height: var(--line-height-text-md);
    --btn-line-height-sm: var(--control-height-sm);
    --btn-font-weight: var(--font-weight-regular);

    /* Filtros */
    --filters-control-bg: var(--color-white);
    --filters-control-height: var(--control-height-md);
    --filters-gap: var(--spacing-lg);
    --filters-date-width: 255px;

    /* Notificaciones */
    --notification-warning-color: #dc6803;
    --notification-min-width: 300px;
    --notification-max-width: 400px;

    /* Loaders */
    --loader-spinner-size: 50px;
    --loader-min-height: 250px;

    /* Overlays y superficies */
    --overlay-white-soft: rgb(255 255 255 / 88%);
    --overlay-white-medium: rgb(255 255 255 / 75%);
    --overlay-white-light: rgb(255 255 255 / 40%);
    --overlay-white-solid: rgb(255 255 255 / 95%);
    --surface-tooltip-dark: #222;
    --text-on-dark: var(--color-white);

    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-full: 9999px;

    --legend-swatch-width: 20px;
    --legend-swatch-height: 8px;

    --spacing-xxs: 2px;
    --spacing-xs: 4px;
    --spacing-sm: 6px;
    --spacing-md: 8px;
    --spacing-lg: 12px;
    --spacing-xl: 16px;
    --spacing-2xl: 20px;
    --spacing-3xl: 24px;
    --spacing-4xl: 32px;
    --spacing-7xl: 64px;

    --page-workspace-min-height: calc(100dvh - 10rem);
    --surface-accent-gradient: linear-gradient(
        180deg,
        color-mix(in srgb, var(--color-primary-lighter) 30%, transparent),
        color-mix(in srgb, var(--color-primary-lighter) 30%, transparent)
    );

    --color-brand-primary: #019c9b;
    --text-primary: #181d27;
    --text-secondary: #414651;
    --text-tertiary: #535862;
    --text-quaternary: #717680;
    --text-background: #E9EAEB;
    --border-primary: #d5d7da;
    --bg-primary: #ffffff;
    --color-error: #d92d20;

    /* Aliases semánticos del proyecto */
    --color-primary: var(--color-brand-primary);
    --color-primary-lighter: #B0E5E5;
    --color-primary-darker: #027f7f;
    --color-secondary: #02394a;
    --color-background: #f8f8f8;
    --color-muted: var(--text-tertiary);
    --color-white: #fff;
    --color-black: #0A0D12;
    --font-main: 'Albert Sans', sans-serif;

    --badge-color-primary: #E6F7F7;
    --badge-color-primary-border: #8AD8D8;
    --badge-color-secondary: #EFF8FF;
    --badge-color-secondary-border: #B2DDFF;
    --badge-color-tertiary: #F4F3FF;
    --badge-color-tertiary-border: #D9D6FE;
    --badge-color-success: #ECFDF3;
    --badge-color-success-border: #ABEFC6;
    --badge-color-success-text: #067647;
    --badge-color-danger: #FEF3F2;
    --badge-color-danger-border: #FECDCA;
    --badge-color-danger-text: #B42318;
    --badge-color-info: #EFF8FF;
    --badge-color-info-border: #B2DDFF;
    --badge-color-info-text: #175CD3;
}

.content-main > main {
    min-height: var(--page-workspace-min-height);
}

body,
#base {
    font-family: var(--font-main);
    font-optical-sizing: auto;
    font-style: normal;
    background-color: var(--color-background);
    color: var(--color-secondary);
    min-height: 100dvh;

    @media (min-width: 1200px) {
        min-height: 100vh;
        overflow: hidden;
    }
}

#base {
    display: flex;
    flex-direction: column;

    > .uk-tooltip {
        padding: var(--spacing-lg) !important;
        background-color: var(--color-black) !important;
        color: var(--color-white) !important;
        border-radius: var(--radius-xl);
    }

    &.is-collapsed > .uk-tooltip.uk-hidden {
        display: block !important;
    }

    @media (min-width: 1200px) {
        > .uk-grid {
            height: 100vh;
            overflow: hidden;

            > aside,
            > #wrapper {
                height: 100vh;
                transition: width 0.3s ease, max-width 0.3s ease, padding 0.3s ease;
            }

            > #wrapper {
                overflow-x: hidden;
            }

            .uk-visible\@l {
                transition: opacity 0.2s ease;
            }
        }

        &.is-collapsed > .uk-grid {
            > aside {
                width: 5% !important;
                max-width: 5% !important;
                flex: none !important;
                padding-left: var(--spacing-xs) !important;
                padding-right: var(--spacing-xs) !important;
            }

            > #wrapper {
                width: 95% !important;
                max-width: 95% !important;
                flex: none !important;
            }

            .uk-visible\@l {
                opacity: 0 !important;
                width: 0 !important;
                max-width: 0 !important;
                margin: 0 !important;
                padding: 0 !important;
                overflow: hidden !important;
                pointer-events: none;
                white-space: nowrap;
            }

            > aside > div > .uk-flex.uk-flex-between:first-child {
                justify-content: center;
                min-height: var(--icon-size-md);

                > .uk-logo:not(.uk-hidden) {
                    display: none !important;
                }

                > .uk-logo.uk-hidden {
                    display: block !important;
                    width: var(--icon-size-md) !important;
                    height: var(--icon-size-md) !important;
                    padding: 0 !important;
                }

                > a {
                    position: absolute;
                    inset: 0;
                    width: auto;
                    height: auto;
                    min-width: 0;
                    min-height: 0;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    opacity: 0;
                    background-color: var(--color-background);
                }

                > a:hover,
                > a:focus-visible {
                    opacity: 1;
                }
            }

            ul.uk-navbar-nav > li {
                justify-content: center;
                padding-left: 0;
                padding-right: 0;
            }

            ul.uk-navbar-nav > li a {
                justify-content: center;
                padding-left: 0;
                padding-right: 0;
            }

            .uk-margin-auto-top > .uk-flex {
                flex-direction: column;
                justify-content: center;
                gap: var(--spacing-md);
                padding-left: 0;
                padding-right: 0;
            }
        }
    }
}

@media (max-width: 1023px) {
    .footer-links-layout {
        flex-direction: column;
        gap: 1rem;
    }
}

.uk-h1,
.uk-h2,
.uk-h3,
.uk-h4,
.uk-h5,
.uk-h6,
.uk-heading-2xlarge,
.uk-heading-3xlarge,
.uk-heading-large,
.uk-heading-medium,
.uk-heading-small,
.uk-heading-xlarge,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-main);
    color: var(--text-primary);
    font-weight: 600;
}

/* Bridge UIkit headings ← Untitled display */
.uk-heading-small {
    font-size: var(--font-size-display-xs);
    line-height: var(--line-height-display-xs);
}

.uk-heading-medium {
    font-size: var(--font-size-display-sm);
    line-height: var(--line-height-display-sm);
}

.uk-heading-large {
    font-size: var(--font-size-display-md);
    line-height: var(--line-height-display-md);
}

.uk-text-lead {
    font-size: var(--font-size-text-md);
    line-height: var(--line-height-text-md);
    font-weight: 400;
}

.uk-text-default {
    font-size: var(--font-size-text-md);
    line-height: var(--line-height-text-md);
}

.uk-text-small {
    font-size: var(--font-size-text-sm) !important;
    line-height: var(--line-height-text-sm) !important;
}

.uk-text-large {
    font-size: var(--font-size-text-lg);
    line-height: var(--line-height-text-lg);
}

.uk-text-semibold {
    font-weight: 600;
}

.uk-text-medium {
    font-weight: 500;
}

.uk-text-xs {
    font-size: var(--font-size-text-xs);
    line-height: var(--line-height-text-xs);
}

.uk-text-emphasis {
    color: var(--text-primary) !important;
}

.uk-text-muted {
    color: var(--text-tertiary) !important;
}

.uk-text-quaternary {
    color: var(--text-quaternary) !important;
}

.uk-text-secondary {
    color: var(--text-secondary) !important;
}

.uk-text-tertiary {
    color: var(--text-tertiary) !important;
}

.uk-form-label {
    font-size: var(--font-size-text-sm);
    line-height: var(--line-height-text-sm);
    font-weight: 500;
    color: var(--text-secondary);
}

.uk-border-rounded {
    border-radius: var(--radius-xl) !important;
}

.uk-customiq-rounded {
    border-radius: var(--radius-md) !important;
}

.uk-container {
    padding-left: 0;
    padding-right: 0;
}

.uk-margin-small {
    margin-bottom: var(--spacing-lg) !important;
}

* + .uk-margin-small {
    margin-top: var(--spacing-lg) !important;
}

.uk-margin-small-top {
    margin-top: var(--spacing-lg) !important;
}

.uk-margin-small-bottom {
    margin-bottom: var(--spacing-lg) !important;
}

.uk-margin-small-left {
    margin-left: var(--spacing-lg) !important;
}

.uk-margin-small-right {
    margin-right: var(--spacing-lg) !important;
}

.uk-margin-medium {
    margin-bottom: var(--spacing-xl) !important;
}

* + .uk-margin-medium {
    margin-top: var(--spacing-xl) !important;
}

.uk-margin-medium-top {
    margin-top: var(--spacing-xl) !important;
}

.uk-margin-medium-bottom {
    margin-bottom: var(--spacing-xl) !important;
}

.uk-margin-medium-left {
    margin-left: var(--spacing-xl) !important;
}

.uk-margin-medium-right {
    margin-right: var(--spacing-xl) !important;
}

.uk-margin-large {
    margin-bottom: var(--spacing-2xl) !important;
}

* + .uk-margin-large {
    margin-top: var(--spacing-2xl) !important;
}

.uk-margin-large-top {
    margin-top: var(--spacing-2xl) !important;
}

.uk-margin-large-bottom {
    margin-bottom: var(--spacing-2xl) !important;
}

.uk-margin-large-left {
    margin-left: var(--spacing-2xl) !important;
}

.uk-margin-large-right {
    margin-right: var(--spacing-2xl) !important;
}

.uk-margin-3xl {
    margin-bottom: var(--spacing-3xl) !important;
}

.uk-margin-3xl-bottom {
    margin-bottom: var(--spacing-3xl) !important;
}

.uk-padding-left-7xl {
    padding-left: var(--spacing-7xl) !important;
}

.uk-surface-accent {
    border-color: var(--color-primary) !important;
    background-color: var(--color-background);
    background-image: var(--surface-accent-gradient);
}

.uk-padding {
    padding: var(--spacing-xl) !important;
}

.uk-padding-small {
    padding: var(--spacing-md) !important;
}

.uk-padding-2xl {
    padding: var(--spacing-2xl) !important;
}

.uk-padding-large {
    padding: var(--spacing-4xl) !important;
}

@media (max-width: 1199px) {
    .uk-padding-large {
        padding: var(--spacing-xl) !important;
    }
}

/*
 * Mantiene la prioridad nativa de UIkit en composiciones con los bridges
 * anteriores (p. ej. uk-padding-large + uk-padding-remove-horizontal).
 */
.uk-margin-remove {
    margin: 0 !important;
}

.uk-margin-remove-top {
    margin-top: 0 !important;
}

.uk-margin-remove-bottom {
    margin-bottom: 0 !important;
}

.uk-margin-remove-left {
    margin-left: 0 !important;
}

.uk-margin-remove-right {
    margin-right: 0 !important;
}

.uk-margin-remove-vertical {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.uk-margin-remove-horizontal {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.uk-padding-remove {
    padding: 0 !important;
}

.uk-padding-remove-top {
    padding-top: 0 !important;
}

.uk-padding-remove-bottom {
    padding-bottom: 0 !important;
}

.uk-padding-remove-left {
    padding-left: 0 !important;
}

.uk-padding-remove-right {
    padding-right: 0 !important;
}

.uk-padding-remove-vertical {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.uk-padding-remove-horizontal {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.uk-form-icon:not(.uk-form-icon-flip) ~ .uk-input.uk-padding-small {
    padding-left: 40px !important;
}

.uk-form-icon-flip ~ .uk-input.uk-padding-small {
    padding-right: 40px !important;
}

p {
    font-size: var(--font-size-text-sm);
    line-height: var(--line-height-text-sm);
    color: var(--color-secondary);

    @media (min-width: 960px) {
        font-size: var(--font-size-text-md);
        line-height: var(--line-height-text-md);
    }
}

span {
    font-size: var(--font-size-text-xs);
    line-height: var(--line-height-text-xs);
    color: var(--color-muted);

    @media (min-width: 960px) {
        font-size: var(--font-size-text-sm);
        line-height: var(--line-height-text-sm);
    }
}

.loading {
    z-index: 999;
}

.uk-section-xsmall {
    padding-top: 0px;
    padding-bottom: 0px
}

.uk-logo {
  width: auto;
  height: 45px;
  object-fit: contain;
  padding: var(--spacing-xxs);

  &.client {
    height: 55px;
  }
}

.uk-background-primary {
    background-color: var(--color-brand-primary) !important;
}

.uk-width-customiq-search {
    width: 100%;
    max-width: 325px;
    flex: none;
}

.uk-width-customiq-date {
    width: var(--filters-date-width, 255px);
    min-width: var(--filters-date-width, 255px);
    max-width: var(--filters-date-width, 255px);
    flex: none;
    box-sizing: border-box;
}

.uk-width-customiq-select {
    width: 250px;
    max-width: 250px;
    flex: none;
}

@media (min-width: 1600px) {
    .uk-width-small:has(.uk-input),
    .uk-width-small:has(.select),
    .uk-width-small:has(select),
    input.uk-width-small,
    select.uk-width-small {
        width: 200px;
        max-width: 200px;
    }
}

.uk-divider {
    border: none !important;
    border-top: 1px solid var(--border-primary) !important;
}

.uk-text-link {
    color: var(--color-secondary) !important;
    text-decoration: none !important;

    &:hover {
        color: var(--color-primary) !important;
        text-decoration: none !important;
        font-weight: 700 !important;
    }
}

.uk-checkbox {
    border-color: var(--color-primary) !important;

    &:checked {
        background-color: var(--color-primary) !important;
    }

    &:hover {
        background-color: var(--color-primary) !important;
    }
}

.uk-icon:not(.uk-icon-customiq) {
    color: var(--color-primary) !important;
}

#base aside .uk-icon-customiq {
    color: var(--text-tertiary) !important;
}

#base aside .uk-icon:not(.uk-icon-customiq) {
    color: var(--text-tertiary) !important;

    svg {
        width: var(--icon-size-md);
        height: var(--icon-size-md);
    }
}

.uk-text-primary {
    color: var(--color-primary) !important;
}

a:hover {
    text-decoration: none !important;
}

.uk-link,
.uk-link-text,
a.uk-link-text {
    text-decoration: none !important;

    &:hover {
        text-decoration: none !important;
        font-weight: 700 !important;
    }
}

.uk-link.uk-text-small {
    font-weight: 600;
}

.uk-text-warning {
    color: var(--color-error) !important;
}

.uk-form-icon {
    color: var(--text-tertiary) !important;

    .uk-icon-customiq,
    svg {
        width: var(--icon-size-md);
        height: var(--icon-size-md);
    }
}

.uk-spinner {
    color: var(--color-primary) !important;
}

.uk-icon-button {
    width: 15px;
    height: 15px;
    background-color: transparent !important;
}

.uk-input,
.uk-search-input {
    box-sizing: border-box;
    height: var(--control-height-md);
    padding-top: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    font-size: var(--font-size-text-md);
    line-height: var(--line-height-text-md);
    font-weight: 400;
    color: var(--text-primary);
    background-color: var(--color-white) !important;

    &.uk-form-large {
        font-size: var(--font-size-text-md);
        line-height: var(--line-height-text-md);
    }

    &::placeholder {
        color: var(--text-background);
    }

    &:focus,
    &:hover {
        border-color: var(--color-primary) !important;
    }

    &:disabled {
        background-color: var(--color-primary-lighter) !important;
    }

    &[readonly] {
        background-color: var(--color-background) !important;
        cursor: default;

        &:hover,
        &:focus {
            border-color: var(--border-primary) !important;
        }
    }

    @media (min-width: 1200px) {
        font-size: 16px;
    }
}

.uk-card {
    border-radius: 10px;
}

.uk-drop {
    border-radius: 10px;
}

.uk-tooltip {
    box-sizing: border-box;
    max-width: 16rem !important;
    padding: var(--spacing-lg) !important;
    background-color: var(--color-black) !important;
    color: var(--color-white) !important;
    border-radius: var(--radius-xl);
    white-space: normal;
    text-align: left;
    line-height: 1.4;
    overflow-wrap: break-word;
}

.uk-subnav {
    > * > a {
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        height: var(--control-height-md);
        padding: var(--spacing-md) var(--spacing-lg) !important;
        border: 1px solid transparent;
        background-color: transparent !important;
        font-size: var(--font-size-text-md) !important;
        line-height: var(--line-height-text-md) !important;
        font-weight: 600;
        color: var(--text-tertiary) !important;
        text-decoration: none;
        text-transform: none !important;
    }

    > .uk-active > a {
        background-color: var(--bg-primary) !important;
        border-color: var(--border-primary);
        color: var(--text-secondary) !important;
    }

    > * > a:hover {
        color: var(--text-primary) !important;
    }
}

ul.uk-navbar-nav {
    width: 100%;
    align-items: center;
    gap: 0 !important;

    > li {
        display: flex;
        align-items: center;

        a {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 20px;
            height: 25px;
            padding: 0 5px;
            border-radius: 10px;
            font-family: var(--font-main);
            font-weight: 600;
            color: var(--text-tertiary);
            text-transform: none;

            @media (min-width: 1200px) {
              justify-content: flex-start;
              padding: 0 10px;
            }

            .uk-icon-customiq {
                flex-shrink: 0;
            }

            svg {
                stroke: currentColor;
                fill: none;
            }
          }

          &:hover {
            background-color: var(--color-white);
          }

          &.active {
            background-color: var(--text-background);
          }
      }
}

:is(ul.uk-navbar-nav > li, #base aside .uk-margin-auto-top > .uk-flex) {
    padding: var(--spacing-md) var(--spacing-lg);
}

#base aside .uk-margin-auto-top > ul.uk-navbar-nav {
    display: none;
}

@media (min-width: 1200px) {
    #base aside .uk-margin-auto-top > ul.uk-navbar-nav {
        display: block;
    }
}

#base aside .uk-margin-auto-top .uk-border-circle {
    width: var(--control-height-md);
    height: var(--control-height-md);
    box-sizing: border-box;
}

/* Aside: enlaces solo-icono (colapsar menú, cerrar sesión) */
#base aside > div > .uk-flex.uk-flex-between:first-child > a.uk-link,
#base aside .uk-margin-auto-top > .uk-flex > a.uk-link {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-md);
    min-width: var(--icon-size-md);
    height: var(--icon-size-md);
    min-height: var(--icon-size-md);
    padding: 0;
    line-height: 0;
    flex-shrink: 0;
    color: var(--text-tertiary);
}

#base aside > div > .uk-flex.uk-flex-between:first-child > a.uk-link .uk-icon-customiq,
#base aside .uk-margin-auto-top > .uk-flex > a.uk-link .uk-icon-customiq {
    color: inherit;
}

button[uk-toggle*="show-more"].open svg line:first-of-type {
    display: none;
}