@import url('https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Fira+Sans+Extra+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Merriweather+Sans:ital,wght@0,300..800;1,300..800&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css');

/*? Scrollbars delgados en TODO componente del kit. `scrollbar-width` solo se nota en los elementos que de
    verdad desplazan (listas, modales, tablas, paneles); en el resto no hace nada. `:where()` deja la
    especificidad en 0: cualquier componente que declare la suya (p. ej. `scrollbar-width: none` en un
    carrusel) sigue ganando. Ojo: un `scrollbar-width` distinto de `auto` hace que Chrome ignore los
    `::-webkit-scrollbar` del mismo elemento; el color se ajusta con `scrollbar-color`. */
:where([class*="upaep__"]) {
    scrollbar-width: thin;
}

/**
 * @name KANON (antes -> UPAEP-UIKIT-CSS)
 * @description Librería de estilos para el desarrollo de aplicaciones web
 * @version 3.0.0
 * @autor Mario Montes Gómez
 * @create 23/Noviembre/2023
 * @date 17/Septiembre/2026
 *
 * MONOLITO.
 * ⚠ NO es la fuente de `web-dist/core/ui.css`, y volcarla encima BORRA trabajo.
 *
 * `tools/build-web-dist.ps1` no existe en el repositorio: los tres bundles
 * (`core/ui.css`, `core/ui.compat.css` y el alias histórico `style.css`) están
 * VENDORIZADOS —ningún generador los escribe—, como comprueba
 * `npm run verify:dist-origen`.
 *
 * Esta hoja bifurcó ANTES de la pasada de accesibilidad que sí tiene
 * `core/ui.css` (U-01, U-04, U-05, U-06, U-07, U-10, U-12, U-15, U-17, U-31,
 * U-50, U-54): contrastes medidos de los roles `-on-*-subtle`, `--ui-text-muted`,
 * `--ui-border`, `--ui-code`, `--ui-link`, la paleta funcional `--ui-action-*`
 * y su remapeo en modo oscuro, los roles de deshabilitado y
 * `.upaep__visually-hidden`. Aquí siguen los valores anteriores.
 *
 * El 10/Septiembre/2026 el trabajo NUEVO de esta hoja se integró a mano en
 * `core/ui.css` —btn-close, formas `__tinted`/`__clean` de alert y toast,
 * tracker reescrito y la derivación de color de `.upaep__btn`— dejando intacto
 * lo de arriba. El alias `web-dist/style.css` sí se deriva de esta hoja (solo
 * cambia `url('../img/` por `url('assets/img/`), porque comparte su historia.
 *
 * Si vuelves a tocar aquí algo que deba llegar a producción, PÓRTALO; no copies
 * el archivo entero sobre `core/ui.css`.
 *
 * 3.0.0 · Vinculación de las variables de color de `.upaep__btn`:
 *         `--upaep-btn-cont-color` deriva de `--upaep-btn-color` y
 *         `--upaep-btn-hover-cont-color` de `--upaep-btn-hover-color`, así que
 *         cada variante tiene UNA sola fuente de valor. Variantes `__tinted`
 *         y `__clean` de Alert y Notification, portadas de Trinity.
 */

/*? ------ Variables Globaes ------ */
:root {
    /*? upaep-gradient */
    --upaep-gradient-dark: rgba(0, 0, 0, 0.4);
    --upaep-gradient-white: rgba(255, 255, 255, 0.5);
    --upaep-gradient1: transparent linear-gradient(90deg, #FF000A 0%, #A91CAE 100%) 0% 0% no-repeat padding-box;
    --upaep-gradient2: transparent linear-gradient(90deg, #E40C22 0%, #21345C 100%) 0% 0% no-repeat padding-box;
    --upaep-gradient3: transparent linear-gradient(90deg, #FFC400 0%, #F15A24 100%) 0% 0% no-repeat padding-box;
    --upaep-gradient4: transparent linear-gradient(90deg, #E40C22 0%, #FF000A 100%) 0% 0% no-repeat padding-box;
    --upaep-gradient5: transparent linear-gradient(90deg, #3FA9F5 0%, #280FBC 100%) 0% 0% no-repeat padding-box;
    /*? upaep shadow */
    --upaep-box-shadow: 1px 2px 8px rgb(60 60 60 / 40%);
    --upaep-drop-shadow: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.7));
    /*? upaep colors */
    --upaep-color-red: #E30921;
    --upaep-color-cherry: #920318;
    --upaep-color-grey: #909496;
    --upaep-color-light-grey: #B5BABD;
    --upaep-color-dark-grey: #52565A;
    --upaep-color-blue-primary: #1D335B;
    --upaep-color-blue-primary-hover: #234885;
    --upaep-color-blue-light: #D3EFFF;
    --upaep-color-yellow-primary: #FECB15;
    --upaep-color-gold: #CDA434;
    --upaep-color-background: #F5F5F5;
    --upaep-color-tenue-gray: #EEEEEE;
    --upaep-color-ingenierias: #003E92;
    --upaep-color-economico-administrativas: #930d19;
    --upaep-color-negocios: #930d19;
    --upaep-color-artes-humanidades: #F36A10;
    --upaep-color-ciecnias-creativas: #511F7F;
    --upaep-color-ciecnias-humanas-sociales: #F36A10;
    /* Aliases con la ortografía correcta (los nombres con typo se conservan por compatibilidad) */
    --upaep-color-ciencias-creativas: var(--upaep-color-ciecnias-creativas);
    --upaep-color-ciencias-humanas-sociales: var(--upaep-color-ciecnias-humanas-sociales);
    --upaep-color-ciencias-sociales: #9F0000;
    --upaep-color-ciencias-biologicas: #00A894;
    --upaep-color-ciencias-vida-salud: #00A894;
    --upaep-color-ciencias-salud: #0079c7;
    --upaep-color-ciencias-medicas: #0079c7;
    --upaep-color-lenguas-cultura: #FFA800;
    --upaep-color-error-light: #FEC4CA;
    --upaep-color-error-hover-light: #F6B7BE;
    --upaep-color-success-light: #B9F0D4;
    --upaep-color-success-hover-light: #9AE1BD;
    --upaep-color-warning-light: #F5DC80;
    --upaep-color-warning-hover-light: #E9D071;
    --upaep-color-error: #DC3545;
    --upaep-color-error-hover: #bc2433;
    --upaep-color-success: #28A745;
    --upaep-color-success-hover: #1f973a;
    --upaep-color-warning: #FFC107;
    --upaep-color-warning-hover: #e5ac03;
    --upaep-color-white: #FFFFFF;
    --upaep-color-white-hover: #FEFEFE;
    --upaep-color-black: #000000;
    --upaep-color-primary: #e10023;
    --upaep-color-primary-hover: #c2001e;
    --upaep-color-secondary: #fecb15;
    --upaep-color-secondary-hover: #eeba00;
    --upaep-color-tertiary: #d0d0d0;
    --upaep-color-tertiary-hover: #b8b8b8;
    --upaep-color-whats: #25d366;
    --upaep-color-dissabled: #EFEFEF;
    --upaep-color-dissabled-red: #F5ACB7;
    --upaep-color-dissabled-error: #EEBBC0;
    --upaep-color-dissabled-yellow: #FEEEB3;
    --upaep-color-dissabled-warning: #F9E5A9;
    --upaep-color-dissabled-success: #B3DDBD;
    /* Aliases con la ortografía correcta (los nombres con typo se conservan por compatibilidad) */
    --upaep-color-disabled: var(--upaep-color-dissabled);
    --upaep-color-disabled-red: var(--upaep-color-dissabled-red);
    --upaep-color-disabled-error: var(--upaep-color-dissabled-error);
    --upaep-color-disabled-yellow: var(--upaep-color-dissabled-yellow);
    --upaep-color-disabled-warning: var(--upaep-color-dissabled-warning);
    --upaep-color-disabled-success: var(--upaep-color-dissabled-success);
    --upaep-color-border-red: #B9001D;
    --upaep-color-border-grey: #8E9396;
    --upaep-color-border-grey-icon: #E8E8E8;
    --upaep-color-border-dissabled: #D6D6D6;
    --upaep-color-border-disabled: var(--upaep-color-border-dissabled);
    --upaep-color-border-error: #BC2433;
    --upaep-color-border-warning: #E5AC03;
    --upaep-color-blue-link: #0085FF;
    --upaep-color-blue-link-hover: #0865c5;
    --upaep-color-blue-sky: #437EEA;
    --upaep-color-blue-sky-hover: #3564BC;
    --upaep-color-blue-sky-light: #C3DAFA;
    --upaep-color-blue-sky-light-hover: #9ac3f6;
    --upaep-color-none: none;
    /*? color educacion continua*/
    --upaep-color-educacion-continnua-ingenieria: #004494;
    --upaep-color-educacion-continnua-administracion: #A6091E;
    --upaep-color-educacion-continnua-gastronomia: #E20026;
    --upaep-color-educacion-continnua-desarrollo-organizacional: #E8526B;
    --upaep-color-educacion-continnua-humanidades: #EE7F00;
    --upaep-color-educacion-continnua-arquitectura: #6D1F80;
    --upaep-color-educacion-continnua-educacion: #E75113;
    --upaep-color-educacion-continnua-derecho: #BC5A15;
    --upaep-color-educacion-continnua-comunicacion: #A64D94;
    --upaep-color-educacion-continnua-ciencias-biologicas: #00AA9B;
    --upaep-color-educacion-continnua-salud: #0081C7;
    --upaep-color-educacion-continnua-lengua-cultura: #FABB00;
    --upaep-color-educacion-continnua-relaciones-internacionales: #FFEF44;
    --upaep-color-educacion-continnua-soft-skills: #8E959A;
    /*? color colegios / altum / prepas */
    --upaep-color-preescolar: #5AB437;
    --upaep-color-primaria: #FFD700;
    --upaep-color-secundaria: #FF8200;
    --upaep-color-prepa: #734DC6;
    --upaep-color-altum: #FB002B;
    /*? upaep font family */
    --upaep-ff-fira-sans: 'Fira Sans', sans-serif;
    --upaep-ff-fira-sans-condensed: 'Fira Sans Condensed', sans-serif;
    --upaep-ff-fira-sans-extracondensed: "Fira Sans Extra Condensed", sans-serif;
    --upaep-ff-merriweather: 'Merriweather', serif;
    --upaep-ff-merriweather-sans: 'Merriweather Sans', sans-serif;
    --upaep-ff-roboto: 'Roboto', sans-serif;
    --upaep-ff-roboto-condensed: "Roboto Condensed", sans-serif;
    --upaep-ff-fontawesome: 'FontAwesome';
    --upaep-ff-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --upaep-ff-space-mono: "Space Mono", monospace;
    --fa-width: auto;
    /*? upaep font weight */
    --upaep-fw-bolder: bolder;
    --upaep-fw-bold: bold;
    --upaep-fw-900: 900;
    --upaep-fw-800: 800;
    --upaep-fw-700: 700;
    --upaep-fw-semibold: 600;
    --upaep-fw-medium: 500;
    --upaep-fw-regular: 400;
    --upaep-fw-light: 300;
    --upaep-fw-200: 200;
    --upaep-fw-100: 100;
    --upaep-fw-normal: normal;
    --upaep-fw-lighter: lighter;
    /*? upaep font style */
    --upaep-fs-italic: italic;
    --upaep-fs-normal: normal;
    --upaep-fs-oblique: oblique;
    --upaep-fs-inherit: inherit;
    --upaep-fs-initial: initial;
    --upaep-fs-unset: unset;
    /*? upaep font size */
    --upaep-fz2: .125rem;
    --upaep-fz4: .25rem;
    --upaep-fz6: .375rem;
    --upaep-fz8: .5rem;
    --upaep-fz10: .625rem;
    --upaep-fz12: .75rem;
    --upaep-fz14: .875rem;
    --upaep-fz15: .9375rem;
    --upaep-fz16: 1rem;
    --upaep-fz18: 1.125rem;
    --upaep-fz20: 1.25rem;
    --upaep-fz22: 1.375rem;
    --upaep-fz24: 1.5rem;
    --upaep-fz25: 1.5625rem;
    --upaep-fz26: 1.625rem;
    --upaep-fz28: 1.75rem;
    --upaep-fz30: 1.875rem;
    --upaep-fz32: 2rem;
    --upaep-fz34: 2.125rem;
    --upaep-fz36: 2.25rem;
    --upaep-fz38: 2.375rem;
    --upaep-fz40: 2.5rem;
    --upaep-fz42: 2.625rem;
    --upaep-fz44: 2.75rem;
    --upaep-fz46: 2.875rem;
    --upaep-fz48: 3rem;
    --upaep-fz50: 3.125rem;
    --upaep-fz52: 3.25rem;
    --upaep-fz54: 3.375rem;
    --upaep-fz56: 3.5rem;
    --upaep-fz58: 3.625rem;
    --upaep-fz60: 3.75rem;
    /*? size */
    --upaep-size-xxs: 360px;
    --upaep-size-xs: 375px;
    --upaep-size-sm: 480px;
    --upaep-size-md: 924px;
    --upaep-size-lg: 1024px;
    --upaep-size-xl: 1450px;
    --upaep-size-xxl: 1920px;
    /*? orientation */
    --upaep-portrait: portrait;
    --upaep-landscape: landscape;
    /*? z-index */
    --upaep-zindex-btn-float: 100;
    --upaep-zindex-menubar: 100;
    --upaep-zindex-tag: 1000;
    --upaep-zindex-footer: 1010;
    --upaep-zindex-header: 1010;
    --upaep-zindex-dropdown: 1015;
    --upaep-zindex-autocomplete: 1015;
    --upaep-zindex-selectpicker: 1015;
    --upaep-zindex-selectfilters: 1015;
    --upaep-zindex-timepicker: 1015;
    --upaep-zindex-datepicker: 1015;
    --upaep-zindex-sticky: 1020;
    --upaep-zindex-fixed: 1030;
    --upaep-zindex-backdrop: 1035;
    --upaep-zindex-sidebar: 1050;
    --upaep-zindex-navbar: 1060;
    --upaep-zindex-tooltip: 1080;
    --upaep-zindex-popover: 1100;
    --upaep-zindex-offcanvas-backdrop: 1120;
    --upaep-zindex-offcanvas: 1130;
    --upaep-zindex-modal-backdrop: 1150;
    --upaep-zindex-modal: 1200;
    --upaep-zindex-spinner: 1210;
    --upaep-zindex-notification-container: 1220;
    --upaep-zindex-notification: 1250;
    --upaep-zindex-coffi: 1300;
    /*? otros */
    --gutter-y: 0;
    --gutter-x: 1.5rem;
    --secondary: #52565A;
    --primary: #ab0909;
    --colorblue: #1f335c;
    --colorblue1: #86B7FE;
    --colorblue2: #18172c;
    --colorblue-light: #EAEFF6;
    --colordark: #212529;
    --colordark2: #333333;
    --colordark3: #52565a;
    --colorred: #e10023;
    --colorred: #dc3545;
    --colorred: #ab0909;
    --colorgreen: #198754;
    --colorgreen1: #067703;
    --colorgreen2: #3ae38b;
    --colorgreen3: #B9EFD3;
    --colorpink: #F2CED4;
    --colorgrey1: #8f9496;
    --colorgrey2: #cfcfcf;
    --colorgrey3: #eeeeee;
    --colorgrey4: #e8e9ed;
    --colorgrey5: #434257;
    --colorgrey6: #ced4da;
    --colorgrey7: #dee2e6;
    --coloryellow: #ffcc00;
    --gradient: linear-gradient(0deg, #e4406f 0%, #ca2374 50%, #9c297f 100%);
    --gradient1: linear-gradient(90deg, rgba(131, 58, 180, 1) 0%, rgba(255, 14, 144, 1) 23%, rgba(253, 29, 29, 1) 49%, rgba(232, 22, 58, 1) 75%, rgba(219, 7, 7, 1) 100%);
    --gradient2: linear-gradient(135deg, #e8a038 0, #ee9637 8.33%, #f38a38 16.67%, #f77c3a 25%, #f96d3d 33.33%, #fa5b41 41.67%, #f94646 50%, #f72b4c 58.33%, #f40055 66.67%, #ef005f 75%, #ea006a 83.33%, #e20077 91.67%, #d90085 100%);
    --gradient3: linear-gradient(135deg, #b962e9 0, #cc58db 5%, #dc4ecc 10%, #e844bc 15%, #f23bab 20%, #f9349a 25%, #fd3189 30%, #ff3178 35%, #ff3667 40%, #fd3d56 45%, #f94646 50%, #f34f36 55%, #eb5924 60%, #e2620d 65%, #d86b00 70%, #cc7300 75%, #bf7a00 80%, #b18100 85%, #a38700 90%, #938d00 95%, #839100 100%);
}

/*? =====================================================================
    CAPA DE ROLES SEMÁNTICOS — design system multi-marca
    ---------------------------------------------------------------------
    Los COMPONENTES consumen estos tokens `--ui-*`. El modo oscuro
    (`[data-theme="dark"]`) los remapea aquí mismo; cada MARCA es un
    plugin aparte en `brands/<marca>.css` que redefine estos roles bajo
    `[data-brand="<marca>"]`. Por defecto (UPAEP/claro) los roles mapean a
    los valores actuales → CERO cambio visual.
    ===================================================================== */

/* Primitivos institucionales compartidos (constantes entre marcas) */
:root {
    --brand-navy: #00305F;
    --brand-navy-2: #07223C;
    --brand-gold: #BF9A57;
    --brand-gold-deep: #8A6B2F;
}

:root,
[data-brand="upaep"] {
    /*? Par del color-scheme: dark de abajo — los controles nativos en claro. */
    color-scheme: light;

    /* ---- Marca (acento) ---- */
    --ui-primary: var(--upaep-color-primary);
    --ui-primary-hover: var(--upaep-color-primary-hover);
    --ui-primary-border: #af051f;
    --ui-on-primary: var(--upaep-color-white);
    --ui-secondary: var(--upaep-color-secondary);
    --ui-secondary-hover: var(--upaep-color-secondary-hover);
    --ui-secondary-border: #eeb104;
    --ui-on-secondary: var(--upaep-color-black);
    --ui-tertiary: var(--upaep-color-tertiary);
    --ui-tertiary-hover: var(--upaep-color-tertiary-hover);
    --ui-tertiary-border: #adadad;
    --ui-on-tertiary: var(--upaep-color-black);

    /* ---- Estados semánticos (relleno · texto-sobre · borde · tenue) ---- */
    --ui-success: var(--upaep-color-success);
    --ui-success-hover: var(--upaep-color-success-hover);
    --ui-success-border: #1f7634;
    --ui-on-success: var(--upaep-color-white);
    --ui-success-subtle: var(--upaep-color-dissabled-success);
    --ui-on-success-subtle: #39804a;

    --ui-danger: var(--upaep-color-error);
    --ui-danger-hover: var(--upaep-color-error-hover);
    --ui-danger-border: #b7192c;
    --ui-on-danger: var(--upaep-color-white);
    --ui-danger-subtle: var(--upaep-color-dissabled-error);
    --ui-on-danger-subtle: #bb4752;

    --ui-warning: var(--upaep-color-warning);
    --ui-warning-hover: var(--upaep-color-warning-hover);
    --ui-warning-border: #e29400;
    --ui-on-warning: var(--upaep-color-black);
    --ui-warning-subtle: var(--upaep-color-dissabled-warning);
    --ui-on-warning-subtle: #ce6d11;

    --ui-info: var(--upaep-color-blue-sky);
    --ui-info-hover: var(--upaep-color-blue-sky-hover);
    --ui-info-border: #2950cc;
    --ui-on-info: var(--upaep-color-white);
    --ui-info-subtle: #c3dafa;
    --ui-on-info-subtle: #2950cc;

    /* ---- Superficies y texto ---- */
    --ui-surface: var(--upaep-color-white);
    --ui-surface-2: var(--upaep-color-background);
    --ui-surface-2-border: #dcdcdc;
    --ui-surface-3: var(--upaep-color-tenue-gray);
    --ui-text: var(--upaep-color-blue-primary);
    --ui-text-strong: var(--upaep-color-black);
    --ui-text-muted: var(--upaep-color-grey);
    --ui-text-on-surface: var(--upaep-color-dark-grey);
    --ui-border: var(--upaep-color-border-grey);

    /* ---- Foco / sombra / tipografía ---- */
    --ui-focus-ring: rgba(29, 51, 91, .25);
    /*? El trio del anillo de foco, que hasta ahora solo existia en `ui.css`.
       `--ui-focus-ring` (arriba) es otra cosa: un rgba translucido que usan
       varios componentes como sombra; estos tres son el anillo en si.

       El color sale de `--ui-text-strong` y NO de `currentColor`: sobre una
       superficie solida la tinta es el blanco del texto y el aro se volveria
       invisible contra el propio control. */
    --ui-focus-ring-color: var(--ui-text-strong, var(--upaep-color-dark-grey));
    --ui-focus-ring-width: 2px;
    --ui-focus-ring-offset: 2px;
    --ui-shadow: var(--upaep-box-shadow);
    --ui-ripple: rgba(0, 0, 0, .30);
    --ui-font-base: var(--upaep-ff-fira-sans);
    --ui-font-heading: var(--upaep-ff-fira-sans-condensed);

    /* ---- Acento institucional (rojo UPAEP #E30921; las marcas lo mapean a su color) ---- */
    --ui-accent: var(--upaep-color-red);
    --ui-on-accent: var(--upaep-color-white);

    /* ---- Superficie inversa (barras oscuras, chips neutros oscuros) ---- */
    --ui-surface-inverse: #000000;
    --ui-on-surface-inverse: #ffffff;

    /* ---- Rellenos sólidos endurecidos (contraste AA) de estados — usados por toasts ---- */
    --ui-success-strong: #1E7E34;
    --ui-warning-strong: #EDAE00;
    --ui-info-strong: var(--upaep-color-blue-sky-hover);

    /* ---- Neutros CONSTANTES entre marcas (solo cambian con el tema) ---- */
    --ui-neutral: var(--upaep-color-dark-grey);      /* superficie neutra oscura: headers, chip de selección */
    --ui-on-neutral: var(--upaep-color-white);
    --ui-border-subtle: #dcdcdc;                     /* bordes/rieles grises suaves */
    --ui-divider: #dddddd;                           /* hairline/riel no completado (tracker, sidebar, separadores) */
    --ui-surface-hover: #dee2e6;                     /* hover tenue de filas/ítems */
    --ui-control-ring: rgba(82, 86, 90, .25);        /* anillo de foco de controles de formulario */
    --ui-counter: var(--upaep-color-blue-primary);   /* relleno navy de badges/contadores */
    --ui-on-counter: var(--upaep-color-white);
    --ui-link: var(--upaep-color-blue-link);
    --ui-link-hover: var(--upaep-color-blue-link-hover);
}

/*? --- Modo oscuro NEUTRAL (independiente de marca) --- */
[data-theme="dark"] {
    /*? Le dice al NAVEGADOR que pinte sus propios controles en oscuro: la ✕ de
       un [type=search], las flechitas de un [type=number], las barras de scroll
       y el selector de fecha. Sin esto esos widgets se quedan claros —son del
       UA, ningún token del kit los alcanza— y son justo los que se notan. */
    color-scheme: dark;
    --ui-surface: #1b1b1e;
    --ui-surface-2: #232327;
    --ui-surface-2-border: #3a3a40;
    --ui-surface-3: #2c2c31;
    --ui-text: #ececf0;
    --ui-text-strong: #ffffff;
    --ui-text-muted: #9a9aa2;
    --ui-text-on-surface: #c9c9d0;
    --ui-border: #3a3a40;
    --ui-focus-ring: rgba(255, 255, 255, .22);
    /*? Solo el color se remapea: el grosor y la separacion no dependen del tema. */
    --ui-focus-ring-color: var(--ui-text-strong, #ffffff);
    --ui-shadow: 1px 2px 8px rgb(0 0 0 / 60%);
    --ui-ripple: rgba(255, 255, 255, .35);
    --ui-surface-inverse: #26262b;

    /* neutros en oscuro */
    --ui-neutral: #3a3a40;
    --ui-border-subtle: #3a3a40;
    --ui-divider: #2f2f34;
    --ui-surface-hover: #2c2c31;
    --ui-control-ring: rgba(255, 255, 255, .20);
    --ui-counter: #2c4a7a;
    --ui-link: #4da3ff;
    --ui-link-hover: #7cbcff;

    /* estados tenues en oscuro (relleno translúcido + texto claro) */
    --ui-success-subtle: rgba(40, 167, 69, .18);
    --ui-on-success-subtle: #7ee2a1;
    --ui-danger-subtle: rgba(220, 53, 69, .18);
    --ui-on-danger-subtle: #f2a3ac;
    --ui-warning-subtle: rgba(255, 193, 7, .16);
    --ui-on-warning-subtle: #f0cf6a;
    --ui-info-subtle: rgba(67, 126, 234, .20);
    --ui-on-info-subtle: #a9c5f7;
}

/*? ------ Global ------ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/*? ══════════ UN SOLO LENGUAJE DE FOCO ══════════════════════════════════
   Se declara una vez, para todo lo que puede recibir foco por teclado —los
   roles interactivos no nativos incluidos, que son los que mas se olvidan—.
   Portada desde `ui.css`, donde vivia sola.

   `:where()` mantiene la especificidad en CERO. Eso es el punto: cualquier
   componente puede seguir afinando su foco sin pelearse con esta regla ni
   recurrir a `!important`, pero ninguno se queda ya SIN aro. Es una red de
   seguridad, no una imposicion.

   `:focus-visible` y no `:focus`: el aro aparece navegando con teclado, no al
   hacer clic.

   Medido con navegador antes de portarla, sobre 17 controles del kit: NINGUNO
   acaba con doble indicador. Los campos de formulario (`.upaep__input`,
   `.upaep__select`, textarea, range) no la notan siquiera, porque su propia
   regla de foco declara `outline` con especificidad (0,4,0) y le gana; el aro
   de esos controles lo siguen diciendo su borde y su `box-shadow`. Lo que
   cambia es todo lo que antes solo tenia el `outline: auto 1px` del navegador
   y sin separacion: checkbox, radio, enlaces, tag, switch, summary y los
   `[role]`/`[tabindex]` no nativos. `.upaep__btn` y `.upaep__btn-close` ya
   traen su propio aro de 2px y no cambian.
   ═══════════════════════════════════════════════════════════════════════ */
:where(a[href], area, button, input, select, textarea, summary, iframe, object,
       embed, [tabindex]:not([tabindex="-1"]), [contenteditable="true"],
       [role="button"], [role="link"], [role="menuitem"], [role="menuitemcheckbox"],
       [role="menuitemradio"], [role="option"], [role="tab"], [role="checkbox"],
       [role="radio"], [role="switch"], [role="slider"], [role="spinbutton"],
       [role="textbox"], [role="combobox"], [role="treeitem"]):focus-visible {
    outline: var(--ui-focus-ring-width, 2px) solid var(--ui-focus-ring-color, currentColor);
    outline-offset: var(--ui-focus-ring-offset, 2px);
}

/*? ------ html tag ------ */
body {
    font-family: var(--upaep-ff-fira-sans);
    font-display: swap;

    &:has(.upaep__modal:is(.is-show)) {
        overflow: hidden;
    }

    &:has(.upaep__offcanvas:is(.is-show)) {
        overflow: hidden;
    }

    &:has(.upaep__view-sidebar.is-offcanvas:is(.is-show)) {
        overflow: hidden;
    }

    &:has(.upaep__navbar-collapse:is(.is-show)) {
        overflow: hidden;
    }

    &:has(.upaep__tooltip:is(.is-show)) {
        overflow-x: hidden;
    }
}

hr {
    margin: 1rem 0;
    color: inherit;
    border: 1px solid;
    opacity: 0.25;
}

p {
    margin: 0 0 1rem 0;
}

abbr[title] {
    text-decoration: underline dotted;
    cursor: help;
    text-decoration-skip-ink: none;
}

address {
    margin: 0 0 1rem 0;
    font-style: normal;
    line-height: inherit;
}

ol,
ul {
    padding: 0 0 0 2rem;
}

ol,
ul,
dl {
    margin: 0 0 1rem 0;
}

ol ol,
ul ul,
ol ul,
ul ol {
    margin: 0;
}

dt {
    font-weight: var(--upaep-fw-700);
}

dd {
    margin: 0 0 0.5rem 0;
}

blockquote {
    margin: 0 0 1rem;
}

b,
strong {
    font-weight: var(--upaep-fw-bolder);
}

small,
.small {
    font-size: var(--upaep-fz14);
}

mark,
.mark {
    padding: .25rem;
    color: var(--upaep-color-black);
    background-color: var(--upaep-color-background);
}

sub,
sup {
    position: relative;
    font-size: var(--upaep-fz12);
    line-height: 0;
    vertical-align: baseline;
}

sub {
    inset: auto auto -.25rem auto;
}

sup {
    inset: -.5rem auto auto auto;
}

a {
    color: var(--ui-link, var(--upaep-color-blue-link));
    text-decoration: underline;

    &:hover {
        color: var(--ui-link-hover, var(--upaep-color-blue-link-hover));
    }

    &:not([href]):not([class]),
    &:not([href]):not([class]):hover {
        color: inherit;
        text-decoration: none;
    }
}

pre,
code,
kbd,
samp {
    font-family: var(--upaep-ff-monospace);
    font-size: var(--upaep-fz16);
}

pre {
    display: block;
    margin: 0 0 1rem 0;
    overflow: auto;
    font-size: var(--upaep-fz14);
}

pre code {
    font-size: inherit;
    color: inherit;
    word-break: normal;
}

code {
    font-size: var(--upaep-fz14);
    color: #d63384;
    word-wrap: break-word;
}

a>code {
    color: inherit;
}

kbd {
    padding: 0.1875rem 0.375rem;
    font-size: var(--upaep-fz14);
    color: var(--upaep-color-white);
    background-color: var(--upaep-color-black);
    border-radius: 0.25rem;
}

kbd kbd {
    padding: 0;
    font-size: var(--upaep-fz16);
}

figure {
    margin: 0 0 1rem;
}

img,
svg {
    vertical-align: middle;
}

table {
    caption-side: bottom;
    border-collapse: collapse;
}

caption {
    padding: .5rem 0 .5rem 0;
    color: var(--upaep-color-dark-grey);
    text-align: left;
}

th {
    text-align: inherit;
    text-align: -webkit-match-parent;
}

thead,
tbody,
tfoot,
tr,
td,
th {
    border-color: inherit;
    border-style: solid;
    border-width: 0;
}

label {
    display: inline-block;
}

input,
button,
select,
optgroup,
textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

button:not(:disabled),
[type=button]:not(:disabled),
[type=reset]:not(:disabled),
[type=submit]:not(:disabled) {
    cursor: pointer;
}

button:focus:not(:focus-visible) {
    outline: 0;
}

button,
select {
    text-transform: none;
}

select {
    word-wrap: normal;
}

[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator {
    display: none !important;
}

textarea {
    resize: vertical;
}

fieldset {
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0;
}

legend {
    float: left;
    width: 100%;
    padding: 0;
    margin-bottom: 0.5rem;
    font-size: calc(1.275rem + 0.3dvw);
    line-height: inherit;
}

legend+* {
    clear: left;
}

::-webkit-datetime-edit-fields-wrapper,
::-webkit-datetime-edit-text,
::-webkit-datetime-edit-minute,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-year-field {
    padding: 0;
}

::-webkit-inner-spin-button {
    height: auto;
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
}

::-webkit-search-decoration {
    -webkit-appearance: none;
}

::-webkit-color-swatch-wrapper {
    padding: 0;
}

::-webkit-file-upload-button {
    font: inherit;
    -webkit-appearance: button;
}

::file-selector-button {
    font: inherit;
    -webkit-appearance: button;
}

output {
    display: inline-block;
}

iframe {
    border: 0;
}

summary {
    display: list-item;
    cursor: pointer;
}

progress {
    vertical-align: baseline;
}

footer {
    --footer-bg: var(--upaep-color-black);
    --footer-width: 100%;
    --footer-minheigth: 60px;
    --footer-padding: 40px 0;
    --footer-zindex: var(--upaep-zindex-footer);
    --footer-border-top: 2px solid #ac241e;
    background-color: var(--footer-bg);
    width: var(--footer-width);
    padding: var(--footer-padding);
    z-index: var(--footer-zindex);
    position: relative;
    float: left;
}

header {
    --header-bg: #e6e6e6;
    --header-position: relative;
    --header-width: 100%;
    --header-height: auto;
    --header-zindex: var(--upaep-zindex-header);
    --header-float: left;
    --header-inset: ;
    width: var(--header-width);
    height: var(--header-height);
    background-color: var(--header-bg);
    position: var(--header-position);
    z-index: var(--header-zindex);
    float: var(--header-float);
    inset: var(--header-inset);
}

@media (prefers-reduced-motion: no-preference) {
    :root {
        scroll-behavior: smooth;
    }
}

.upaep__block {
    --upaep-block-width: 100%;
    --upaep-block-height: auto;
    --upaep-block-padding: 1.5rem;
    --upaep-block-margin: 1rem 0;
    --upaep-block-border-size: 1px;
    --upaep-block-border-style: solid;
    --upaep-block-border-color: var(--upaep-color-border-grey);
    --upaep-block-border-radius: 10px;
    --upaep-block-bg: #f8f9fa;
    --upaep-block-example-bg: transparent;
    --upaep-block-code-bg: transparent;
    --upaep-block-dom-bg: transparent;
    --upaep-block-actions-bg: transparent;
    width: var(--upaep-block-width);
    height: var(--upaep-block-height);
    padding: var(--upaep-block-padding);
    margin: var(--upaep-block-margin);
    border: var(--upaep-block-border-size) var(--upaep-block-border-style) var(--upaep-block-border-color);
    border-radius: var(--upaep-block-border-radius);
    background: var(--upaep-block-bg);
    position: relative;

    .upaep__block-example {
        background: var(--upaep-block-example-bg);
        width: 100%;
        height: auto;
        padding: 1.5rem;
        margin: 1rem 0;
        display: flex;
        align-items: center;
        position: relative;

        .upaep__block-dom {
            background: var(--upaep-block-dom-bg);
            width: 50%;
            height: auto;
            padding: 1rem;
        }

        .upaep__block-actions {
            background: var(--upaep-block-actions-bg);
            width: 50%;
            height: auto;
            padding: 1rem;
        }

        .upaep__block-icon-code {
            position: absolute;
            inset: auto 10px 10px auto;
            cursor: pointer;
            font-size: var(--upaep-fz20);
            color: var(--upaep-color-dark-grey);

            &::before {
                font-family: var(--upaep-ff-fontawesome);
                content: "\f121";
            }

            &:hover {
                color: var(--upaep-color-black);
            }
        }
    }

    .upaep__block-content {
        background: var(--upaep-block-example-bg);
        width: 100%;
        height: auto;
        padding: 1.5rem;
        margin: 1rem 0;

        .upaep__block-icon-copy {
            position: absolute;
            inset: 10px 10px auto auto;
            cursor: pointer;
            font-size: var(--upaep-fz20);
            color: var(--upaep-color-dark-grey);

            &::before {
                font-family: var(--upaep-ff-fontawesome);
                content: "\f0c5";
            }

            &:hover {
                color: var(--upaep-color-black);
            }
        }

        .upaep__block-code-type {
            font-size: var(--upaep-fz18);
            color: var(--upaep-color-dark-grey);
            font-weight: var(--upaep-fw-bold);
            margin: .5rem 0;
        }

        .upaep__block-code {
            .token.punctuation {
                color: #999;
            }

            .token.attr-name,
            .token.builtin,
            .token.char,
            .token.inserted,
            .token.selector,
            .token.string {
                color: #690;
            }

            .token.atrule,
            .token.attr-value,
            .token.keyword {
                color: #07a;
            }

            code[class*=language-],
            pre[class*=language-] {
                color: #000;
                background: 0 0;
                text-shadow: 0 1px #fff;
                font-family: "Fira Sans", sans-serif;
                text-align: left;
                white-space: pre;
                word-spacing: normal;
                word-break: normal;
                word-wrap: normal;
                line-height: 1.5;
                -moz-tab-size: 4;
                tab-size: 4;
                -webkit-hyphens: none;
                -ms-hyphens: none;
                hyphens: none;
                font-size: 15.55555px;
            }

            .token.boolean,
            .token.constant,
            .token.deleted,
            .token.number,
            .token.property,
            .token.symbol,
            .token.tag {
                color: #905;
            }
        }
    }

}

/*? ------ General ------ */

.sliderBanner {
    & .carousel-indicators {
        margin: 10px 0;
    }

    & .__indicator {
        background: var(--upaep-color-white);
        border-radius: 50px;
        width: 15px;
        height: 15px;
        border: 0;

        &.active {
            background: var(--ui-accent, var(--upaep-color-red));
        }
    }
}

.__overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.upaep__fullscreen,
.__fullscreen,
.fullscreen {
    max-width: 100%;
    width: 100%;
    height: 100%;
}

.upaep__difuminado {
    height: 175px;
    left: 0;
    right: 0;
    opacity: 0;
    position: absolute;
}

.upaep__difuminado.__bottom {
    background: linear-gradient(180deg, hsla(0, 0%, 100%, .0001), #fff);
    bottom: 0;
}

.upaep__difuminado.__top {
    background: linear-gradient(0deg, hsla(0, 0%, 100%, .0001), #fff);
    top: 0;
}

.upaep__backdrop {
    width: 100dvw;
    height: 100dvh;
    position: fixed;
    inset: 0 auto auto 0;
    z-index: var(--upaep-zindex-backdrop);
    background: var(--upaep-gradient-dark);

    &.__offcanvas {
        z-index: var(--upaep-zindex-offcanvas-backdrop);
    }

    &.__modal {
        z-index: var(--upaep-zindex-modal-backdrop);
    }
}

.upaep__backdrop:not(.is-show) {
    display: none;
}

.offcanvasAccesos {
    background: var(--upaep-color-white);
    transition: transform .5s ease-in !important;
}

.offcanvasAccesos .accmenu-items {
    color: var(--upaep-color-dark-grey);
}

.offcanvasAccesos .upaep__menu-item {
    color: var(--upaep-color-dark-grey);
}

.offcanvasAccesos .upaep__menu-items .upaep__menu-list .upaep__menu-list-item.__link a {
    color: var(--upaep-color-dark-grey);
}

.offcanvasMenu {
    background: var(--upaep-color-white);
    transition: transform .5s ease-in !important;
}

.offcanvasMenu .offcanvas-header {
    justify-content: end;
}

.offcanvasMenu .offcanvas-header .__close {
    font-size: var(--upaep-fz30);
    cursor: pointer;
    margin: 0 1rem;
}

.offcanvasMenu .upaep__menu-items {
    color: var(--upaep-color-black);
}

.offcanvasMenu .upaep__menu-item {
    color: var(--upaep-color-black);
}

.offcanvasMenu .upaep__menu-items .upaep__menu-list .upaep__menu-list-item.__link a {
    color: var(--upaep-color-black);
}

.offcanvasMenu.__black {
    background: var(--upaep-color-black);
}

.offcanvasMenu.__black .upaep__menu-items {
    color: var(--upaep-color-white);
}

.offcanvasMenu.__black .upaep__menu-item {
    color: var(--upaep-color-white);
}

.offcanvasMenu.__black .upaep__menu-items .upaep__menu-list .upaep__menu-list-item.__link a {
    color: var(--upaep-color-white);
}

.offcanvasMenu.__black .offcanvas-header .__close {
    color: var(--upaep-color-white);
}

.offcanvasMenu.__white {
    background: var(--upaep-color-white);
}

.offcanvasMenu.__white .upaep__menu-items {
    color: var(--upaep-color-dark-grey);
}

.offcanvasMenu.__white .upaep__menu-item {
    color: var(--upaep-color-dark-grey);
}

.offcanvasMenu.__white .upaep__menu-items .upaep__menu-list .upaep__menu-list-item.__link a {
    color: var(--upaep-color-dark-grey);
}

.offcanvasMenu.__white .offcanvas-header .__close {
    color: var(--upaep-color-dark-grey);
}

/*? ------ Estructura ------ */

.upaep__main {
    --upaep-main-width: 100%;
    --upaep-main-height: auto;
    --upaep-main-padding: 1rem;
    --upaep-main-margin: 0;
    --upaep-main-bg: transparent;
    width: var(--upaep-main-width);
    height: var(--upaep-main-height);
    padding: var(--upaep-main-padding);
    margin: var(--upaep-main-margin);
    background: var(--upaep-main-bg);
}

.upaep__panel {
    width: 100%;
    background: var(--upaep-color-white);
}

.upaep__panel-2 {
    position: relative;
}

.upaep__section {
    --upaep-section-width: 100%;
    --upaep-section-height: auto;
    --upaep-section-minheight: 200px;
    --upaep-section-padding: 0;
    --upaep-section-margin: 0;
    --upaep-section-bg: ;
    position: relative;
    width: var(--upaep-section-width);
    height: var(--upaep-section-height);
    min-height: var(--upaep-section-minheight);
    padding: var(--upaep-section-padding);
    margin: var(--upaep-section-margin);
    background: var(--upaep-section-bg);
}

.upaep__titles {
    padding: 1rem;
}

.upaep__content {
    --upaep-content-width: 100%;
    --upaep-content-height: auto;
    --upaep-content-padding: 0;
    --upaep-content-margin: 0;
    width: var(--upaep-content-width);
    height: var(--upaep-content-height);
    padding: var(--upaep-content-padding);
    margin: var(--upaep-content-margin);
}

.upaep__top {
    --upaep-top-width: 100%;
    --upaep-top-height: auto;
    --upaep-top-padding: 2rem;
    width: var(--upaep-top-width);
    height: var(--upaep-top-height);
    padding: var(--upaep-top-padding);
}

.upaep__bottom {
    --upaep-bottom-width: 100%;
    --upaep-bottom-height: auto;
    --upaep-bottom-padding: 2rem;
    width: var(--upaep-bottom-width);
    height: var(--upaep-bottom-height);
    padding: var(--upaep-bottom-padding);
}

.upaep__left {
    --upaep-left-width: 100%;
    --upaep-left-height: auto;
    --upaep-left-padding: 2rem;
    width: var(--upaep-left-width);
    height: var(--upaep-left-height);
    padding: var(--upaep-left-padding);
}

.upaep__right {
    --upaep-right-width: 100%;
    --upaep-right-height: auto;
    --upaep-right-padding: 2rem;
    width: var(--upaep-right-width);
    height: var(--upaep-right-height);
    padding: var(--upaep-right-padding);
}

.upaep__center {
    --upaep-center-width: 100%;
    --upaep-center-height: auto;
    --upaep-center-padding: 2rem;
    width: var(--upaep-center-width);
    height: var(--upaep-center-height);
    padding: var(--upaep-center-padding);
}

.upaep__banner {
    --upaep-banner-width: 100%;
    --upaep-banner-height: 100dvh;
    --upaep-banner-padding: 0;
    --upaep-banner-margin: 0;
    --upaep-banner-bg: transparent;
    --upaep-banner-inner-width: 100%;
    --upaep-banner-inner-height: 100%;
    --upaep-banner-card-width: 100%;
    --upaep-banner-card-height: 100%;
    --upaep-banner-card-overlay-width: 100%;
    --upaep-banner-card-overlay-height: 100%;
    --upaep-banner-card-overlay-inset: 0;
    --upaep-banner-card-overlay-content-width: 100%;
    --upaep-banner-card-overlay-content-height: 100%;
    --upaep-banner-underline-width: 100%;
    --upaep-banner-underline-height: 15px;
    --upaep-banner-underline-bg: var(--ui-accent, var(--upaep-color-red));
    --upaep-banner-underline-inset: auto auto 0 0;
    --upaep-banner-resource-width: auto;
    --upaep-banner-resource-height: 100%;
    --upaep-banner-resource-bg: var(--upaep-color-black);
    --upaep-banner-videocontrols: ;
    --upaep-banner-form-width: 35%;
    --upaep-banner-form-height: 100%;
    --upaep-banner-form-content-width: 100%;
    --upaep-banner-form-content-height: 100%;
    --upaep-banner-form-content-padding: 1rem;
    --upaep-banner-form-content-bg: rgba(0, 0, 0, 0.6);
    --upaep-banner-title-fz: var(--upaep-fz56);
    --upaep-banner-title-fw: var(--upaep-fw-bold);
    --upaep-banner-title-color: var(--upaep-color-white);
    --upaep-banner-title-padding: 0;
    --upaep-banner-title-margin: 1rem;
    --upaep-banner-title-textshadow: 3px 3px 3px var(--upaep-color-black);
    --upaep-banner-subtitle-fz: var(--upaep-fz18);
    --upaep-banner-subtitle-fw: var(--upaep-fw-regular);
    --upaep-banner-subtitle-color: var(--upaep-color-white);
    --upaep-banner-subtitle-padding: 0;
    --upaep-banner-subtitle-margin: 1rem;
    --upaep-banner-subtitle-textshadow: 3px 3px 3px var(--upaep-color-black);
    --upaep-banner-text-fz: var(--upaep-fz16);
    --upaep-banner-text-fw: var(--upaep-fw-regular);
    --upaep-banner-text-color: var(--upaep-color-white);
    --upaep-banner-text-padding: 0;
    --upaep-banner-text-margin: 0;
    --upaep-banner-text-textshadow: 3px 3px 3px var(--upaep-color-black);
    width: var(--upaep-banner-width);
    height: var(--upaep-banner-height);
    padding: var(--upaep-banner-padding);
    margin: var(--upaep-banner-margin);
    background: var(--upaep-banner-bg);
}

.upaep__banner-parallax {
    position: relative;
}

.upaep__banner-inner {
    width: var(--upaep-banner-inner-width);
    height: var(--upaep-banner-inner-height);
    position: fixed;
    overflow: hidden;
}

.upaep__banner-card {
    width: var(--upaep-banner-card-width);
    height: var(--upaep-banner-card-height);
    position: relative;
}

.upaep__banner-card-overlay {
    width: var(--upaep-banner-card-overlay-width);
    height: var(--upaep-banner-card-overlay-height);
    inset: var(--upaep-banner-card-overlay-inset);
    position: absolute;
}

.upaep__banner-card-overlay .upaep__banner-card-overlay-content {
    width: var(--upaep-banner-card-overlay-content-width);
    height: var(--upaep-banner-card-overlay-content-height);
}

.upaep__banner-card.upaep__banner-underline::after {
    width: var(--upaep-banner-underline-width);
    height: var(--upaep-banner-underline-height);
    background: var(--upaep-banner-underline-bg);
    inset: var(--upaep-banner-underline-inset);
    position: absolute;
    content: "";
}

.upaep__banner-card.upaep__banner-underline.__ingenierias,
.upaep__banner-card.upaep__banner-underline.__college-engineering {
    --upaep-banner-underline-bg: var(--upaep-color-ingenierias);
}

.upaep__banner-card.upaep__banner-underline.__economico-administrativas,
.upaep__banner-card.upaep__banner-underline.__college-economic-administrative {
    --upaep-banner-underline-bg: var(--upaep-color-economico-administrativas);
}

.upaep__banner-card.upaep__banner-underline.__negocios,
.upaep__banner-card.upaep__banner-underline.__escuela-de-negocios,
.upaep__banner-card.upaep__banner-underline.__economico-negocios,
.upaep__banner-card.upaep__banner-underline.__college-business {
    --upaep-banner-underline-bg: var(--upaep-color-negocios);
}

.upaep__banner-card.upaep__banner-underline.__artes-humanidades,
.upaep__banner-card.upaep__banner-underline.__college-arts-humanities {
    --upaep-banner-underline-bg: var(--upaep-color-artes-humanidades);
}

.upaep__banner-card.upaep__banner-underline.__humana-sociales,
.upaep__banner-card.upaep__banner-underline.__ciencias-humanas-sociales,
.upaep__banner-card.upaep__banner-underline.__human-social-sciences {
    --upaep-banner-underline-bg: var(--upaep-color-artes-humanidades);
}

.upaep__banner-card.upaep__banner-underline.__ciencias-creativas,
.upaep__banner-card.upaep__banner-underline.__college-creative-sciences,
.upaep__banner-card.upaep__banner-underline.__creative-sciences {
    --upaep-banner-underline-bg: var(--upaep-color-ciecnias-creativas);
}

.upaep__banner-card.upaep__banner-underline.__ciencias-sociales,
.upaep__banner-card.upaep__banner-underline.__college-social-sciences {
    --upaep-banner-underline-bg: var(--upaep-color-ciencias-sociales);
}

.upaep__banner-card.upaep__banner-underline.__ciencias-biologicas,
.upaep__banner-card.upaep__banner-underline.__college-biological-sciences {
    --upaep-banner-underline-bg: var(--upaep-color-ciencias-biologicas);
}

.upaep__banner-card.upaep__banner-underline.__ciencias-de-la-vida-la-salud:after,
.upaep__banner-card.upaep__banner-underline.__ciencias-vida-salud,
.upaep__banner-card.upaep__banner-underline.__life-health-sciences {
    --upaep-banner-underline-bg: var(--upaep-color-ciencias-vida-salud);
}

.upaep__banner-card.upaep__banner-underline.__ciencias-salud,
.upaep__banner-card.upaep__banner-underline.__ciencias-de-la-salud,
.upaep__banner-card.upaep__banner-underline.__college-health-sciences {
    --upaep-banner-underline-bg: var(--upaep-color-ciencias-salud);
}

.upaep__banner-card.upaep__banner-underline.__ciencias-medicas,
.upaep__banner-card.upaep__banner-underline.__college-medical-sciences {
    --upaep-banner-underline-bg: var(--upaep-color-ciencias-medicas);
}

.upaep__banner-card.upaep__banner-underline.__lenguas-cultura,
.upaep__banner-card.upaep__banner-underline.__estudios-de-lengua-cultura,
.upaep__banner-card.upaep__banner-underline.__college-languages-culture {
    --upaep-banner-underline-bg: var(--upaep-color-lenguas-cultura);
}

.upaep__banner-resource {
    width: var(--upaep-banner-resource-width);
    height: var(--upaep-banner-resource-height);
    background: var(--upaep-banner-resource-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.upaep__banner-card .video-controls {
    width: auto;
    height: auto;
    position: absolute;
    inset: auto 0 5% auto;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: end;
}

.upaep__banner-card .video-controls .controls.reproduce.is-play::before {
    content: '\f144';
}

.upaep__banner-card .video-controls .controls.reproduce.is-pause::before {
    content: '\f28b';
}

.upaep__banner-card .video-controls .controls.volume.is-max::before {
    content: '\f028';
}

.upaep__banner-card .video-controls .controls.volume.is-min::before {
    content: '\f6a9';
}

.upaep__banner-card .video-controls .controls {
    width: 50px;
    height: 50px;
    font-family: var(--upaep-ff-fontawesome);
    font-weight: 900;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--upaep-fz30);
    color: var(--upaep-color-white);
    filter: var(--upaep-drop-shadow);
    cursor: pointer;
    margin: .5rem;
}

.upaep__banner-resource:has(video) {
    background: var(--upaep-color-black);
}

.upaep__banner-card-form {
    width: var(--upaep-banner-form-width);
    height: var(--upaep-banner-form-height);
}

.upaep__banner-card-form .form_content {
    width: var(--upaep-banner-form-content-width);
    height: var(--upaep-banner-form-content-height);
    padding: var(--upaep-banner-form-content-padding);
    background: var(--upaep-banner-form-content-bg);
}

.upaep__banner-card-texts {
    width: 100%;
    height: 100%;
    color: var(--upaep-color-white);
    padding: 0;
    display: flex;
    justify-content: start;
    align-items: end;
}

.upaep__banner-card-texts .upaep__banner-card-title>* {
    font-size: var(--upaep-banner-title-fz);
    font-weight: var(--upaep-banner-title-fw);
    color: var(--upaep-banner-title-color);
    padding: var(--upaep-banner-title-padding);
    margin: var(--upaep-banner-title-margin);
    text-shadow: var(--upaep-banner-title-textshadow);
    line-height: 20px;
}

.upaep__banner-card-texts .upaep__banner-card-subtitle>* {
    font-size: var(--upaep-banner-subtitle-fz);
    font-weight: var(--upaep-banner-subtitle-fw);
    color: var(--upaep-banner-subtitle-color);
    padding: var(--upaep-banner-subtitle-padding);
    margin: var(--upaep-banner-subtitle-margin);
    text-shadow: var(--upaep-banner-subtitle-textshadow);
}

.upaep__banner-card-texts p {
    font-size: var(--upaep-banner-text-fz);
    font-weight: var(--upaep-banner-text-fw);
    color: var(--upaep-banner-text-color);
    padding: var(--upaep-banner-text-padding);
    margin: var(--upaep-banner-text-margin);
    text-shadow: var(--upaep-banner-text-textshadow);
}

.upaep__banner-card a[data-upress] {
    cursor: pointer;
}

.upaep__banner-form {
    position: absolute;
    inset: 0 auto auto 0;
    z-index: 10;
}

.upaep__banner-buttons {
    position: absolute;
    inset: 0 0 auto auto;
    z-index: 10;
}

.upaep__banner-secondary {
    --upaep-banner-secondary-width: 100%;
    --upaep-banner-secondary-height: auto;
    --upaep-banner-secondary-img-width: 100%;
    --upaep-banner-secondary-img-height: auto;
    --upaep-banner-secondary-img-objectfit: contain;
    width: var(--upaep-banner-secondary-width);
    height: var(--upaep-banner-secondary-height);

    img {
        width: var(--upaep-banner-secondary-img-width);
        height: var(--upaep-banner-secondary-img-height);
        object-fit: var(--upaep-banner-secondary-img-objectfit);
    }
}

.upaep__masonry {
    --upaep-masonry-width: 100%;
    --upaep-masonry-height: auto;
    --upaep-masonry-columns: 360px 2;
    --upaep-masonry-column-gap: 20px;
    --upaep-masonry-item-width: 100%;
    --upaep-masonry-item-height: auto;
    --upaep-masonry-item-margin: 0 0 20px 0;
    --upaep-masonry-item-padding: 1rem;
    width: var(--upaep-masonry-width);
    height: var(--upaep-masonry-height);
    columns: var(--upaep-masonry-columns);
    column-gap: var(--upaep-masonry-column-gap);
    transition: all .5s;
}

.upaep__masonry-item {
    width: var(--upaep-masonry-item-width);
    height: var(--upaep-masonry-item-height);
    margin: var(--upaep-masonry-item-margin);
    padding: var(--upaep-masonry-item-padding);
    display: inline-block;
    box-sizing: border-box;
    transition: all .5s;

    &.is-inactive {
        display: none;
    }
}

.upaep__contacto {
    --upaep-contacto-width: 100%;
    --upaep-contacto-height: auto;
    --upaep-contacto-minheight: 100dvh;
    --upaep-contacto-bg: var(--upaep-color-black);
    --upaep-contacto-content-width: 100%;
    --upaep-contacto-content-height: auto;
    width: var(--upaep-contacto-width);
    height: var(--upaep-contacto-height);
    min-height: var(--upaep-contacto-minheight);
    background: var(--upaep-contacto-bg);
    border-bottom: 1px solid;
}

.upaep__contacto-content {
    width: var(--upaep-contacto-content-width);
    height: var(--upaep-contacto-content-height);
    display: flex;
    justify-content: center;
}

.form_content iframe {
    width: 100%;
    height: 85dvh;
}

.formContacto {
    width: 80%;
    height: 100%;
    border-radius: 10px;
    padding: 1rem;
    background: var(--colordark);

    & .ratio {
        height: 75dvh;
    }

    & iframe {
        height: 100%;
    }

    &:has(.g-recaptcha) {
        iframe {
            height: 80px;
        }
    }
}

.upaep__asesor-content {
    width: 100%;
}

.upaep__contacta-asesor {
    width: 100%;
    height: 100%;
    background: var(--colordark);
    border-radius: 10px;
    padding: 1rem;
    margin: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.asesor_line {
    --upaep-line-width: 85%;
    --upaep-line-bg: var(--upaep-color-white);
    --upaep-line-border-color: var(--upaep-color-white);
    --upaep-line-border-radius: 10px;
    -margin: 1rem auto;
}

.upaep__contacta-info,
.upaep__contacta-form {
    --upaep-contacta-info-width: 100%;
    --upaep-contacta-info-height: 100%;
    width: var(--upaep-contacta-info-width);
    height: var(--upaep-contacta-info-height);
}

.upaep__contacta-info-item {
    --upaep-contacta-info-item-width: auto;
    --upaep-contacta-info-item-height: auto;
    --upaep-contacta-info-item-padding: 0 1rem;
    --upaep-contacta-info-item-margin: 1rem;
    --upaep-contacta-info-itemimg-width: 60px;
    --upaep-contacta-info-itemimg-img-width: 60px;
    --upaep-contacta-info-itemimg-img-height: 60px;
    --upaep-contacta-info-itemimg-img-margin: 0 auto;
    --upaep-contacta-info-itemtext-text-fz: var(--upaep-fz18);
    --upaep-contacta-info-itemtext-text-fw: var(--upaep-fw-regular);
    --upaep-contacta-info-itemtext-text-color: var(--upaep-color-white);
    --upaep-contacta-info-itemtext-text-padding: 0;
    --upaep-contacta-info-itemtext-text-margin: 0;
    width: var(--upaep-contacta-info-item-width);
    height: var(--upaep-contacta-info-item-height);
    padding: var(--upaep-contacta-info-item-padding);
    margin: var(--upaep-contacta-info-item-margin);
    display: flex;
    align-items: center;
    gap: 10px;

    & a {
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    & .upaep__contacta-info-img {
        width: var(--upaep-contacta-info-itemimg-width);

        & img {
            width: var(--upaep-contacta-info-itemimg-img-width);
            height: var(--upaep-contacta-info-itemimg-img-height);
            margin: var(--upaep-contacta-info-itemimg-img-margin);
            display: block;
        }
    }

    & .upaep__contacta-info-text {
        width: 90%;

        & p,
        & p a {
            font-size: var(--upaep-contacta-info-itemtext-text-fz);
            font-weight: var(--upaep-contacta-info-itemtext-text-fw);
            color: var(--upaep-contacta-info-itemtext-text-color);
            padding: var(--upaep-contacta-info-itemtext-text-padding);
            margin: var(--upaep-contacta-info-itemtext-text-margin);
        }
    }

    & .upaep__btn {
        --upaep-btn-margin: 0;
        max-width: 165px;
    }
}

.upaep__contacta-info-item.__whats {
    --upaep-contacta-info-itemtext-text-fz: var(--upaep-fz28);
    --upaep-contacta-info-itemtext-text-fw: var(--upaep-fw-bold);
}

.upaep__contacta-info-item.__asesor .upaep__contacta-info-text p.__saludo {
    color: var(--ui-accent, var(--upaep-color-red));
    font-size: var(--upaep-fz28);
}

.upaep__contacta-info-item.__asesor .upaep__contacta-info-text p.__encargado {
    color: var(--upaep-color-white);
    font-size: var(--upaep-fz18);
}

.upaep__contacta-info-item.__asesor .upaep__contacta-info-text p.__text {
    color: var(--upaep-color-white);
    font-size: var(--upaep-fz18);
    font-weight: bold;
}

.upaep__contacta-info-item.__tel {
    --upaep-contacta-info-itemtext-text-fz: var(--upaep-fz28);
    --upaep-contacta-info-itemtext-text-fw: var(--upaep-fw-bold);
}

.upaep__contacta-horario {
    padding: 1rem;
    width: 80%;

    & .__text {
        font-size: var(--upaep-fz22);
        color: var(--upaep-color-white);
    }

    & .__horario {
        font-size: var(--upaep-fz22);
        color: var(--upaep-color-white);
        font-weight: bold;
    }
}

.upaep__formulario {
    --upaep-formulario-width: 100%;
    --upaep-formulario-height: auto;
    --upaep-formulario-padding: 2rem;
    --upaep-formulario-margin: 0;
    --upaep-formulario-bg: transparent;
    --upaep-formulario-border-size: 1px;
    --upaep-formulario-border-style: solid;
    --upaep-formulario-border-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-formulario-border-radius: 10px;
    width: var(--upaep-formulario-width);
    height: var(--upaep-formulario-height);
    padding: var(--upaep-formulario-padding);
    margin: var(--upaep-formulario-margin);
    background: var(--upaep-formulario-bg);
    border: var(--upaep-formulario-border-size) var(--upaep-formulario-border-style) var(--upaep-formulario-border-color);
    border-radius: var(--upaep-formulario-border-radius);
}

.upaep__container,
.upaep__container-fluid,
.upaep__container-xxl,
.upaep__container-xl,
.upaep__container-lg,
.upaep__container-md,
.upaep__container-sm {
    width: 100%;
    padding: 0 calc(1.5rem * 0.5) 0 calc(1.5rem * 0.5);
    margin: 0 auto;
}

.upaep__group {
    --upaep-group-count-width: 25px;
    --upaep-group-count-height: 25px;
    --upaep-group-count-padding: .5rem;
    --upaep-group-count-margin: 0;
    --upaep-group-count-border-radius: 50%;
    --upaep-group-count-bg: var(--ui-counter, var(--upaep-color-blue-primary));
    --upaep-group-count-fz: var(--upaep-fz18);
    --upaep-group-count-fw: var(--upaep-fw-normal);
    --upaep-group-count-color: var(--ui-on-counter, var(--upaep-color-white));

    .upaep__group-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 5px;
        font-size: var(--upaep-fz20);
        font-weight: var(--upaep-fw-bold);
        margin: 0 0 .5rem 0;

        .upaep__group-title {
            display: flex;
            gap: 5px;
        }

        .upaep__group-count {
            width: var(--upaep-group-count-width);
            height: var(--upaep-group-count-height);
            padding: var(--upaep-group-count-padding);
            margin: var(--upaep-group-count-margin);
            border-radius: var(--upaep-group-count-border-radius);
            background: var(--upaep-group-count-bg);
            font-size: var(--upaep-group-count-fz);
            font-weight: var(--upaep-group-count-fw);
            color: var(--upaep-group-count-color);
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 5px;
        }

        .upaep__group-text {
            color: var(--ui-text-strong, var(--upaep-color-black));
        }
    }

    .upaep__group-inputs {
        width: 100%;
    }

    .upaep__group-inputs-duplicate {
        width: 100%;
    }

    .upaep__group-button {
        width: 100%;
        display: flex;
        justify-content: end;

        .upaep__btn {
            --upaep-btn-margin: 1rem 0;

            .__icon-plus {
                width: 20px;
                height: 20px;
            }
        }
    }

    .upaep__group-text {
        color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
        font-size: var(--upaep-fz18);
        font-weight: var(--upaep-fw-regular);
    }
}

.upaep__clone-nodes {
    --upaep-clone-nodes-margin: 1rem 0;
    --upaep-clone-nodes-padding: .5rem;
    --upaep-clone-nodes-bg: ;
    --upaep-clone-nodes-border-size: ;
    --upaep-clone-nodes-border-style: ;
    --upaep-clone-nodes-border-color: ;
    --upaep-clone-nodes-border-radius: 10px;
    --upaep-clone-counter-padding: 0 .75rem;
    --upaep-clone-counter-margin: 0;
    --upaep-clone-counter-fz: var(--upaep-fz16);
    --upaep-clone-counter-fw: var(--upaep-fw-semibold);
    --upaep-clone-counter-color: var(--ui-on-counter, var(--upaep-color-white));
    --upaep-clone-counter-bg: var(--ui-counter, var(--upaep-color-blue-primary));
    --upaep-clone-counter-border-radius: 50px;
    --upaep-clone-counter-minwidth: 30px;
    --upaep-clone-counter-minheight: 30px;
    --upaep-clone-node-width: 100%;
    --upaep-clone-node-col: 1;
    --upaep-clone-node-gap: 10px;
    --upaep-clone-node-margin: 0;
    --upaep-clone-node-header-padding: 0 0 .25rem 0;
    --upaep-clone-node-header-bg: ;
    --upaep-clone-node-header-borde-bottom-size: 2px;
    --upaep-clone-node-header-borde-bottom-style: solid;
    --upaep-clone-node-header-borde-bottom-color: #dbdcdd;
    --upaep-clone-node-title-fz: var(--upaep-fz18);
    --upaep-clone-node-title-fw: var(--upaep-fw-bold);
    --upaep-clone-node-title-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-clone-node-inner-bg: ;
    --upaep-clone-node-inner-margin: 0;
    --upaep-clone-node-inner-padding: .5rem 0 0 0;
    width: 100%;
    height: auto;
    margin: var(--upaep-clone-nodes-margin);
    padding: var(--upaep-clone-nodes-padding);
    background: var(--upaep-clone-nodes-bg);
    border: var(--upaep-clone-nodes-border-size) var(--upaep-clone-nodes-border-style) var(--upaep-clone-nodes-border-color);
    border-radius: var(--upaep-clone-nodes-border-radius);
    display: flex;
    flex-direction: column;
    gap: 1rem;

    .upaep__clone-nodes-wrapper {
        width: auto;
        display: flex;
        flex-direction: column;
        gap: 1rem;

        &> :only-child {
            .upaep__clone-node-delete {
                display: none;
            }
        }
    }

    &.is-group {
        .upaep__clone-nodes-wrapper {
            display: flex;
            flex-direction: row;
            gap: var(--upaep-clone-node-gap);
            flex-wrap: wrap;
        }

        .upaep__clone-node {
            --upaep-clone-node-width: calc(100% / 12 * calc(12 / var(--upaep-clone-node-col)) - var(--upaep-clone-node-gap));
        }
    }

    &.is-inline {
        &:has(.upaep__clone-node-inner> :only-child) {
            .upaep__clone-node {
                align-items: center;
            }

            .upaep__clone-node-delete {
                margin: 0;
            }
        }

        .upaep__clone-node-delete {
            margin: .5rem 0 0 0;
        }

        .upaep__clone-node-header {
            display: none;
        }
    }

    .upaep__clone-node {
        width: var(--upaep-clone-node-width);
        gap: var(--upaep-clone-node-gap);
        margin: var(--upaep-clone-node-margin);
        display: flex;
        align-items: start;
    }

    .upaep__clone-node-counter {
        padding: var(--upaep-clone-counter-padding);
        margin: var(--upaep-clone-counter-margin);
        font-size: var(--upaep-clone-counter-fz);
        font-weight: var(--upaep-clone-counter-fw);
        color: var(--upaep-clone-counter-color);
        background: var(--upaep-clone-counter-bg);
        border-radius: var(--upaep-clone-counter-border-radius);
        min-width: var(--upaep-clone-counter-minwidth);
        min-height: var(--upaep-clone-counter-minheight);
        width: auto;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
    }

    .upaep__clone-node-header {
        gap: var(--upaep-clone-node-gap);
        padding: var(--upaep-clone-node-header-padding);
        background: var(--upaep-clone-node-header-bg);
        border-bottom: var(--upaep-clone-node-header-borde-bottom-size) var(--upaep-clone-node-header-borde-bottom-style) var(--upaep-clone-node-header-borde-bottom-color);
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .upaep__clone-node-title {
        font-size: var(--upaep-clone-node-title-fz);
        font-weight: var(--upaep-clone-node-title-fw);
        color: var(--upaep-clone-node-title-color);
        width: auto;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
    }

    .upaep__clone-node-header-template {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: .5rem;
    }

    .upaep__clone-node-wrapper {
        width: 100%;
    }

    .upaep__clone-node-inner {
        width: 100%;
        background: var(--upaep-clone-node-inner-bg);
        margin: var(--upaep-clone-node-inner-margin);
        padding: var(--upaep-clone-node-inner-padding);
    }

    .upaep__clone-node-template {
        width: 100%;
    }

    .upaep__clone-node-delete {
        width: auto;
        flex: 0 0 auto;
        animation: a_fadeIn .3s ease-in-out;
    }

    .upaep__clone-nodes-button {
        width: 100%;
        display: flex;
        justify-content: end;

        .upaep__btn {
            --upaep-btn-margin: 0;
        }

        /*? El icono del botón de agregar es un SVG inline hijo de un flex: sin esto el
           `flex-shrink` por defecto lo aplasta cuando el texto del botón es largo. */
        .upaep__btn svg {
            flex: 0 0 auto;
        }
    }

    /*? ------ Reordenamiento (is-sortable) ------ */
    .upaep__clone-node-handle {
        --upaep-clone-handle-color: var(--ui-text-muted, #6b6f73);
        --upaep-clone-handle-color-hover: var(--ui-accent, var(--upaep-color-red));
        --upaep-clone-handle-padding: .25rem;

        padding: var(--upaep-clone-handle-padding);
        color: var(--upaep-clone-handle-color);
        cursor: grab;
        /*? Sin esto el navegador se queda el gesto táctil como scroll y el arrastre
           nunca llega a los pointermove. Es el equivalente táctil del preventDefault. */
        touch-action: none;
        align-self: center;
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;

        &:hover {
            color: var(--upaep-clone-handle-color-hover);
        }
    }

    .upaep__clone-node-move-group {
        flex: 0 0 auto;
        align-self: center;
        display: inline-flex;
        flex-direction: column;
        /*? Sin esto los dos discos se tocan y el hover se lee como una cápsula. */
        gap: 2px;
    }

    .upaep__clone-node-move {
        --upaep-clone-move-size: 28px;
        --upaep-clone-move-color: var(--ui-text-muted, #6b6f73);
        --upaep-clone-move-color-hover: var(--ui-accent, var(--upaep-color-red));
        /*? El disco se tiñe de `currentColor`, que en :hover ya es el color de acento:
           así no hay que declarar un segundo color ni repetir el token de la marca.
           Mismo recurso que usa el ripple del botón (--upaep-ripple-color). */
        --upaep-clone-move-bg-hover: color-mix(in srgb, currentColor 14%, transparent);
        --upaep-clone-move-bg-active: color-mix(in srgb, currentColor 24%, transparent);

        /*? Caja cuadrada + radio del 50% = disco. 28px deja el objetivo táctil por
           encima de los 24px que pide WCAG 2.5.8 sin agrandar la fila del nodo. */
        width: var(--upaep-clone-move-size);
        height: var(--upaep-clone-move-size);
        padding: 0;
        color: var(--upaep-clone-move-color);
        background: none;
        border: 0;
        border-radius: 50%;
        cursor: pointer;
        line-height: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: color .15s ease, background-color .15s ease;

        &:hover:not(:disabled) {
            color: var(--upaep-clone-move-color-hover);
            background: var(--upaep-clone-move-bg-hover);
        }

        &:active:not(:disabled) {
            background: var(--upaep-clone-move-bg-active);
        }

        /*? Los extremos se apagan (el primero no sube, el último no baja) en vez de
           desaparecer: si se ocultaran, la fila cambiaría de ancho al reordenar.
           Sin disco en hover, porque no hay nada que pulsar. */
        &:disabled {
            opacity: .35;
            cursor: default;
        }
    }

    /*? Nodo en vuelo. `is-chosen` y `is-dragging` quedan libres para que el consumidor
       los pinte a su gusto; el kit solo atenúa el original con `is-ghost`. */
    .upaep__clone-node.is-ghost {
        opacity: .5;
    }

    /*? Estado deshabilitado. `disabledDuplicateNodes()` ya ponía la clase y apagaba los
       botones, pero nada lo reflejaba: el bloque se veía idéntico a uno activo.
       Los botones conservan su propio `:disabled`, así que aquí solo se atenúa el
       conjunto y se corta la interacción con el contenido. */
    &.is-disabled {
        --upaep-clone-nodes-disabled-opacity: .6;

        opacity: var(--upaep-clone-nodes-disabled-opacity);

        .upaep__clone-nodes-wrapper {
            pointer-events: none;
            user-select: none;
        }
    }
}

/*? Cursor durante el arrastre. Va en <body> y no en el tirador porque el puntero se sale
   del tirador en cuanto empieza el gesto, y el cursor volvía a la flecha a media maniobra. */
body.upaep__clone-nodes-grabbing,
body.upaep__clone-nodes-grabbing * {
    cursor: grabbing !important;
    user-select: none !important;
}

/*? ------ Tipografía ------ */

/*? html tag */
h1,
.upaep__h1 {
    --h-color: inset;
    --h-fw: var(--upaep-fw-semibold);
    --h-fz: var(--upaep-fz48);
    --h-lineheight: 1.2;
    --h-margin: 0 0 .5rem 0;
    color: var(--h-color);
    font-size: var(--h-fz);
    font-weight: var(--h-fw);
    line-height: var(--h-lineheight);
    margin: var(--h-margin);
}

/*? html tag */
h2,
.upaep__h2 {
    --h-color: inset;
    --h-fw: var(--upaep-fw-regular);
    --h-fz: var(--upaep-fz34);
    --h-lineheight: 1.2;
    --h-margin: 0 0 .5rem 0;
    color: var(--h-color);
    font-size: var(--h-fz);
    font-weight: var(--h-fw);
    line-height: var(--h-lineheight);
    margin: var(--h-margin);
}

/*? html tag */
h3,
.upaep__h3 {
    --h-color: inset;
    --h-fw: var(--upaep-fw-bold);
    --h-fz: var(--upaep-fz24);
    --h-lineheight: 1.2;
    --h-margin: 0 0 .5rem 0;
    color: var(--h-color);
    font-size: var(--h-fz);
    font-weight: var(--h-fw);
    line-height: var(--h-lineheight);
    margin: var(--h-margin);
}

/*? html tag */
h4,
.upaep__h4 {
    --h-color: inset;
    --h-fw: var(--upaep-fw-medium);
    --h-fz: var(--upaep-fz20);
    --h-lineheight: 1.2;
    --h-margin: 0 0 .5rem 0;
    color: var(--h-color);
    font-size: var(--h-fz);
    font-weight: var(--h-fw);
    line-height: var(--h-lineheight);
    margin: var(--h-margin);
}

.upaep__title {
    --upaep-title-color: var(--upaep-color-blue-primary);
    --upaep-title-fw: var(--upaep-fw-semibold);
    --upaep-title-fz: var(--upaep-fz48);
    --upaep-title-lineheight: 1.2;
    --upaep-title-margin: 0 0 .5rem 0;
    --upaep-title-padding: 0;
    --upaep-title-align: center;
    color: var(--upaep-title-color);
    font-size: var(--upaep-title-fz);
    font-weight: var(--upaep-title-fw);
    line-height: var(--upaep-title-lineheight);
    margin: var(--upaep-title-margin);
    padding: var(--upaep-title-padding);
    text-align: var(--upaep-title-align);
}

.upaep__subtitle {
    --upaep-subtitle-color: var(--upaep-color-black);
    --upaep-subtitle-fw: var(--upaep-fw-regular);
    --upaep-subtitle-fz: var(--upaep-fz16);
    --upaep-subtitle-lineheight: 1.2;
    --upaep-subtitle-margin: 0 0 .5rem 0;
    --upaep-subtitle-padding: 0;
    --upaep-subtitle-align: center;
    color: var(--upaep-subtitle-color);
    font-size: var(--upaep-subtitle-fz);
    font-weight: var(--upaep-subtitle-fw);
    line-height: var(--upaep-subtitle-lineheight);
    margin: var(--upaep-subtitle-margin);
    padding: var(--upaep-subtitle-padding);
    text-align: var(--upaep-subtitle-align);
}

.upaep__subtitle-2 {
    --upaep-subtitle-color: var(--upaep-color-black);
    --upaep-subtitle-fw: var(--upaep-fw-regular);
    --upaep-subtitle-fz: var(--upaep-fz14);
    --upaep-subtitle-lineheight: 1.2;
    --upaep-subtitle-margin: 0 0 .5rem 0;
    --upaep-subtitle-padding: 0;
    --upaep-subtitle-align: start;
    color: var(--upaep-subtitle-color);
    font-size: var(--upaep-subtitle-fz);
    font-weight: var(--upaep-subtitle-fw);
    line-height: var(--upaep-subtitle-lineheight);
    margin: var(--upaep-subtitle-margin);
    padding: var(--upaep-subtitle-padding);
    text-align: var(--upaep-subtitle-align);
}

.upaep__text {
    --upaep-text-color: inset;
    --upaep-text-fw: var(--upaep-fw-medium);
    --upaep-text-fz: var(--upaep-fz16);
    --upaep-text-margin: 0 0 .5rem 0;
    --upaep-text-padding: 0;
    --upaep-text-align: start;
    color: var(--upaep-text-color);
    font-size: var(--upaep-text-fz);
    font-weight: var(--upaep-text-fw);
    margin: var(--upaep-text-margin);
    padding: var(--upaep-text-padding);
    text-align: var(--upaep-text-align);
}

.upaep__subtext {
    --upaep-subtext-color: inset;
    --upaep-subtext-fw: var(--upaep-fw-medium);
    --upaep-subtext-fz: var(--upaep-fz14);
    --upaep-subtext-margin: 0 0 .5rem 0;
    --upaep-subtext-padding: 0;
    --upaep-subtext-align: start;
    color: var(--upaep-subtext-color);
    font-size: var(--upaep-subtext-fz);
    font-weight: var(--upaep-subtext-fw);
    padding: var(--upaep-subtext-padding);
    text-align: var(--upaep-subtext-align);
}

.upaep__caption {
    --upaep-caption-color: var(--upaep-color-black);
    --upaep-caption-fw: var(--upaep-fw-medium);
    --upaep-caption-fz: var(--upaep-fz12);
    --upaep-caption-margin: 0 0 .5rem 0;
    color: var(--upaep-caption-color);
    font-size: var(--upaep-caption-fz);
    font-weight: var(--upaep-caption-fw);
}

.upaep__overline {
    --upaep-overline-color: var(--upaep-color-black);
    --upaep-overline-fw: var(--upaep-fw-medium);
    --upaep-overline-fz: var(--upaep-fz10);
    --upaep-overline-margin: 0 0 .5rem 0;
    color: var(--upaep-overline-color);
    font-size: var(--upaep-overline-fz);
    font-weight: var(--upaep-overline-fw);
}

.upaep__line {
    --upaep-line-width: 100%;
    --upaep-line-height: 5px;
    --upaep-line-bg: var(--ui-accent, var(--upaep-color-red));
    --upaep-line-opacity: 1;
    --upaep-line-border-size: 1px;
    --upaep-line-border-style: solid;
    --upaep-line-border-color: var(--ui-accent, var(--upaep-color-red));
    --upaep-line-border-radius: 0;
    width: var(--upaep-line-width);
    height: var(--upaep-line-height);
    background: var(--upaep-line-bg);
    opacity: var(--upaep-line-opacity);
    border: var(--upaep-line-border-size) var(--upaep-line-border-style) var(--upaep-line-border-color);
    border-radius: var(--upaep-line-border-radius);
}

/*? ------ Button ------ */
.upaep__btn {
    --upaep-btn-width: auto;
    --upaep-btn-height: auto;
    --upaep-btn-padding: .625rem 1.5rem;
    --upaep-btn-margin: 1rem;
    --upaep-btn-border-size: 1px;
    --upaep-btn-border-color: var(--ui-surface-2, var(--upaep-color-background));
    --upaep-btn-border-radius: 10px;
    --upaep-btn-text-align: center;
    --upaep-btn-fz: var(--upaep-fz14);
    --upaep-btn-fw: var(--upaep-fw-medium);
    --upaep-btn-color: var(--ui-text-strong, var(--upaep-color-black));
    /*? ── UNA SOLA FUENTE DE VALOR PARA EL COLOR DEL BOTÓN ─────────────────
       `--upaep-btn-color` pinta el botón; `--upaep-btn-cont-color` pinta el
       `<p>`/`<a>`/`<span>` que lleva dentro. Son el MISMO color: el segundo
       existe para poder separarlos en un caso concreto, no para tener que
       repetirlo. Se declaraban por separado y con el mismo valor literal en las
       44 variantes del kit, así que cambiar el color de una obligaba a acordarse
       de tocar dos líneas —y quien no se acordaba dejaba el texto interior del
       color anterior—. Ahora DERIVA, y las variantes solo declaran
       `--upaep-btn-color`: el contenido las sigue solo.

       Quien necesite de verdad un texto interior distinto sigue pudiendo
       declarar `--upaep-btn-cont-color` en su variante; su declaración gana. */
    --upaep-btn-cont-color: var(--upaep-btn-color);
    --upaep-btn-cont-fw: var(--upaep-fw-regular);
    --upaep-btn-cont-fz: var(--upaep-fz14);
    --upaep-btn-bg: var(--ui-surface-2, var(--upaep-color-background));
    --upaep-btn-hover-bg: var(--ui-surface-3, var(--upaep-color-tenue-gray));
    --upaep-btn-hover-border-size: 1px;
    --upaep-btn-hover-border-color: var(--ui-surface-3, var(--upaep-color-tenue-gray));
    /*? Estaba VACÍO, y un `var()` sin valor invalida la declaración al calcular:
       `color: var(--upaep-btn-hover-color)` equivalía a `unset`, que en una
       propiedad heredada como `color` es `inherit`. El botón base perdía su
       propio color al pasar el ratón y adoptaba el del contenedor. Por defecto
       el hover NO cambia el color: apunta al mismo rol que en reposo. */
    --upaep-btn-hover-color: var(--upaep-btn-color);
    /*? El par de `--upaep-btn-cont-color` para el hover. No estaba declarado en
       ninguna parte, así que `&:hover p { color: var(--upaep-btn-hover-cont-color) }`
       también resolvía a `inherit`: funcionaba de casualidad —heredaba del propio
       botón, que sí tenía el color de hover— y dejaba de funcionar en cuanto algo
       se interponía. Declarado y derivado, ya no depende del accidente. */
    --upaep-btn-hover-cont-color: var(--upaep-btn-hover-color);
    --upaep-btn-disabled-bg: var(--ui-surface-2, var(--upaep-color-background));
    --upaep-btn-disabled-border-color: var(--ui-surface-2, var(--upaep-color-background));
    --upaep-btn-opacity-disabled: .6;
    /*? Anillo de foco. Antes NO había regla propia: el botón se quedaba con el
       `outline: auto 1px` por defecto del navegador y sin `outline-offset`,
       mientras `.upaep__btn-close` —el otro botón del kit— ya traía el suyo por
       tokens. La regla global `:where(…):focus-visible` que uniformaría a todos
       existe solo en `ui.css` (la hoja con la pasada de accesibilidad), así que
       aquí hay que declararlo en el componente, igual que hizo el de cierre.

       El fallback cae en `--ui-text-strong` y NO en `currentColor`: en una
       variante sólida la tinta es el blanco del texto y el anillo se volvería
       invisible sobre el propio botón. Misma trampa y misma solución que en
       `--upaep-btn-close-focus-color`. */
    --upaep-btn-focus-color: var(--ui-focus-ring-color, var(--ui-text-strong, currentColor));
    --upaep-btn-focus-width: var(--ui-focus-ring-width, 2px);
    --upaep-btn-focus-offset: var(--ui-focus-ring-offset, 2px);
    --upaep-btn-color-underline: var(--ui-accent, var(--upaep-color-red));
    --upaep-btn-icon-left: ;
    --upaep-btn-icon-left-color: ;
    --upaep-btn-icon-right: ;
    --upaep-btn-icon-right-color: ;
    /*? El botón es contenedor de posicionamiento por defecto: de él dependen los
       badges anclados con --upaep-badge-inset, el divisor de .upaep__btn-group
       .__divisor y el subrayado de .__underline. Antes solo lo era durante el
       clic (vía .is-ripple), así que esos hijos absolutos se anclaban al padre
       y saltaban de sitio. .__flotante lo cambia a fixed con este mismo token. */
    --upaep-btn-position: relative;
    /*? Se consumía en `opacity: var(--upaep-btn-opacity)` sin haberse declarado
       nunca: la declaración era inválida y `opacity` caía a su valor inicial. El
       resultado era el correcto por casualidad; declararlo lo hace intencional y
       deja el token disponible para atenuar un botón sin tocar la propiedad. */
    --upaep-btn-opacity: 1;
    position: var(--upaep-btn-position);
    font-size: var(--upaep-btn-fz);
    font-weight: var(--upaep-btn-fw);
    color: var(--upaep-btn-color);
    border: var(--upaep-btn-border-size) solid var(--upaep-btn-border-color);
    width: var(--upaep-btn-width);
    height: var(--upaep-btn-height);
    padding: var(--upaep-btn-padding);
    margin: var(--upaep-btn-margin);
    background: var(--upaep-btn-bg);
    border-radius: var(--upaep-btn-border-radius);
    text-align: var(--upaep-btn-text-align);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    opacity: var(--upaep-btn-opacity);
    gap: 5px;

    & p,
    & a,
    & span {
        margin: 0;
        text-decoration: none;
        color: var(--upaep-btn-cont-color);
        font-size: var(--upaep-btn-cont-fz);
        font-weight: var(--upaep-btn-cont-fw);
    }

    &>p::before,
    &>a::before,
    &>span::before {
        content: var(--upaep-btn-icon-left);
        font-family: var(--upaep-ff-fontawesome);
        color: var(--upaep-btn-icon-left-color);
        margin: 0 .5rem;
    }

    &>p::after,
    &>a::after,
    &>span::after {
        content: var(--upaep-btn-icon-right);
        font-family: var(--upaep-ff-fontawesome);
        color: var(--upaep-btn-icon-right-color);
        margin: 0 .5rem;
    }

    &:hover p,
    &:hover a,
    &:hover span {
        color: var(--upaep-btn-hover-cont-color);
    }

    &:hover {
        color: var(--upaep-btn-hover-color);
        background: var(--upaep-btn-hover-bg);
        border: var(--upaep-btn-hover-border-size) solid var(--upaep-btn-hover-border-color);
    }

    &:disabled {
        color: var(--upaep-btn-disabled-color);
        background: var(--upaep-btn-disabled-bg);
        border: var(--upaep-btn-border-size) solid var(--upaep-btn-disabled-border-color);
        opacity: var(--upaep-btn-opacity-disabled);
        pointer-events: none;
    }

    /*? `aria-disabled` no se atendía: el botón NO se atenuaba, mantenía el cursor
       de mano y el `:hover` sí pintaba, así que parecía pulsable y no respondía
       al presionarlo. Solo el ripple y el `:active` estaban guardados.

       Se pinta como `:disabled` pero SIN `pointer-events: none`: un botón con
       `aria-disabled` sigue siendo enfocable y recibiendo el clic a propósito
       —esa es su razón de ser—, y es la app la que decide ignorarlo.

       Esta regla neutraliza el hover por ORDEN, no por especificidad: va después
       y empata a (0,2,0) con `&:hover`. Añadirle `:not([aria-disabled="true"])`
       al `:hover` habría sido lo natural, pero eso lo sube a (0,4,0) y le
       ganaría a reglas de consumidores que ya pisan `.upaep__btn:hover` a
       (0,3,0) —hay una en `otros/select/style2.css`—. */
    &[aria-disabled="true"] {
        color: var(--upaep-btn-disabled-color);
        background: var(--upaep-btn-disabled-bg);
        border: var(--upaep-btn-border-size) solid var(--upaep-btn-disabled-border-color);
        opacity: var(--upaep-btn-opacity-disabled);
        cursor: not-allowed;
    }

    /*? El anillo va por `outline` y no por `box-shadow`: sobrevive a un ancestro
       con `overflow` oculto, y al no tocar el fondo no despinta una variante
       sólida. `:focus-visible` y no `:focus`: aparece con teclado, no al hacer
       clic. Tres componentes del kit (selectpicker, autocomplete, selectfilters)
       ya escriben `box-shadow` en `.upaep__btn:focus`; son propiedades distintas
       y conviven. */
    &:focus-visible {
        outline: var(--upaep-btn-focus-width) solid var(--upaep-btn-focus-color);
        outline-offset: var(--upaep-btn-focus-offset);
    }

    /*? Tinte del ripple: se deriva del color de texto del botón, así que cada
       variante obtiene contraste sola (blanco sobre __primary/__blue/__black,
       negro sobre la base/__light) sin declarar nada.
       --upaep-ripple-alpha regula la intensidad; --upaep-ripple-color acepta
       un color fijo si se quiere ignorar el texto del botón. */
    --upaep-ripple-alpha: 50%;
    --upaep-ripple-color: color-mix(in srgb, currentColor var(--upaep-ripple-alpha), transparent);

    .circle-ripple {
        --upaep-ripple-bg: radial-gradient(circle, var(--upaep-ripple-color) 0%, transparent 70%);
    }

    /*? .is-ripple solo marca el estado «hay un ripple activo»: el recorte lo hace
       .upaep__ripple-layer sobre sí misma, así que el botón nunca declara
       overflow y los badges que sobresalen no se recortan. Ya no pinta nada:
       queda solo como gancho de estado, al modo de las demás `is-*` del kit. */

    /*? ------ Estado presionado ------
       RIPPLE y ACTIVE son cosas distintas: el ripple es un efecto opcional que
       `no-ripple` / `data-no-ripple` apagan, y esto es el estado del botón, que
       sigue funcionando igual con ripple o sin él.

       Antes la única señal de pulsación era `opacity: .9` guardada con
       `:not(.is-ripple)` —«atenúa solo si no hay ripple»—, o sea que la opacidad
       hacía de suplente del ripple. Tres defectos, medidos con navegador:

       1. El guard no llegaba a proteger nada: el runtime pone `.is-ripple` en
          `click`, es decir en el mouseup, cuando `:active` ya terminó. TODOS los
          botones atenuaban al mantener pulsado, con ripple o sin él.
       2. Con dos clics seguidos, la 2ª pulsación NO atenuaba, porque `.is-ripple`
          seguía puesto del círculo anterior: el feedback aparecía y desaparecía
          según la cadencia del clic.
       3. `opacity` ya estaba pedida por `:disabled` y por `--upaep-btn-opacity`.
          Un botón atenuado a .5 SUBÍA a .9 al presionarlo, y con la barra
          espaciadora mantenida la atenuación se comía el propio anillo de foco.

       Ahora la pulsación escribe el fondo, como ya hacía `.upaep__btn-close`, y
       `opacity` vuelve a significar solo «deshabilitado o atenuado»: el anillo de
       foco no se toca y un botón atenuado sigue atenuado mientras se pulsa.

       El fondo se deriva del de hover con la misma treta que
       `--upaep-ripple-color`: cada variante recibe su tinte sin declarar nada,
       igual que el ripple. Es la señal por defecto porque es la única que no
       toca ni el layout ni la caja: no reflow, no cambio de tamaño y no recorta
       el área clicable.

       La escala va a 1 —apagada— a propósito, y `.upaep__btn-close` la tiene
       apagada también: los dos botones del kit dicen la pulsación solo con el
       fondo. Antes el de cierre traía `scale(.92)`, que en sus 36 px costaba
       ~1 px; se retiró para que hablen el mismo idioma.

       El motivo de que aquí no pueda encenderse por defecto es que **el coste
       de `scale` crece con el ancho**: el botón se encoge BAJO el puntero, así
       que el mouseup de un clic iniciado junto al borde cae ya fuera y el
       `click` se pierde. Medida de la banda muerta en el borde con `.98`: 0 px
       en un botón de icono de 35 px, 1 px a 101 px, 2 px a 282 px (`.__lg`) y
       4 px a 420 px. El layout no se mueve —`offsetWidth` y los vecinos siguen
       igual—, pero el área clicable sí.

       Subirla es opt-in y el coste es ese, así que conviene solo en botones
       pequeños o de icono. Si se busca el hundido en un botón ancho, el gesto
       barato es `translateY(1px)`: medido, cuesta 0 px de área clicable en los
       dos bordes y a cualquier ancho, porque desplaza la caja en vez de
       encogerla.

       Para dejar la pulsación sin cambio de fondo:
       `--upaep-btn-active-bg: var(--upaep-btn-hover-bg)`.

       ── El polo de la mezcla y la DIRECCIÓN del press ──
       Que el polo sea `currentColor` no es un detalle: es lo que mantiene la
       dirección correcta en los dos temas. La tinta se declara SIEMPRE junto al
       fondo en la misma variante, así que las dos giran juntas y el press cae
       del lado que le toca sin saber nada del tema.

       No se usó `--ui-text-strong` —el polo de `.upaep__btn-close.__solid`—
       justamente por eso. Ese rol SÍ se remapea en `[data-theme="dark"]`, y
       ahí solo funciona si el fondo se remapea con él: es el caso de
       `--ui-neutral` en `__solid`, y NO el de las variantes de este botón, que
       tiran de colores de marca (`--ui-primary`, `--ui-danger`, `--colordark3`…)
       que no están en la lista del tema oscuro. Medido con navegador: cambiar
       el polo general a `--ui-text-strong` arregla 4 variantes en tema claro y
       rompe 8 en oscuro. (De paso: `.upaep__btn-close.__primary` tiene ese
       mismo desajuste latente —fondo ciego al tema con polo sensible a él—,
       pero eso es de ese componente.)

       La excepción son las variantes sólidas de tinta BLANCA cuyo hover
       oscurece: ahí mezclar hacia el blanco del icono devuelve el fondo hacia
       arriba y el botón se lee como que se levanta al pulsarlo, no como que se
       hunde. Son `__primary`, `__error`, `__success` y `__grey`, y cada una
       reescribe este token con un polo NEGRO —ciego al tema, como sus fondos—.
       Las otras ocho no lo necesitan: `__secondary`/`__tertiary`/`__light`/
       `__warning` tienen tinta negra, y `__dark`/`__black`/`__blue` aclaran ya
       en el hover, así que seguir hacia su tinta blanca continúa la dirección. */
    --upaep-btn-active-bg: color-mix(in srgb, currentColor 12%, var(--upaep-btn-hover-bg));
    --upaep-btn-active-scale: 1;
    --upaep-btn-active-transition: .12s ease;
    /*? Solo `transform`, y solo sirve si alguien baja `--upaep-btn-active-scale`:
       transicionar el fondo animaría también el hover de todos los botones del
       kit, que hoy es instantáneo. La red global de
       `prefers-reduced-motion: reduce` del final del archivo ya la neutraliza. */
    transition: transform var(--upaep-btn-active-transition);

    /*? `aria-disabled` se excluye a mano: `:disabled` no puede estar `:active`
       —además lleva `pointer-events: none`—, pero un botón con `aria-disabled`
       sigue siendo pulsable a propósito y no debe dar feedback de pulsación. */
    &:active:not(:disabled):not([aria-disabled="true"]) {
        background: var(--upaep-btn-active-bg);
        transform: scale(var(--upaep-btn-active-scale));
    }
}

/*? Badge dentro de un botón: `.upaep__btn span` (0-1-1) le gana a `.upaep__badge`
   (0-1-0), así que anulaba los tokens propios del badge y había que forzar el
   color por estilo inline. Con (0-2-0) se devuelven al badge. */
.upaep__btn .upaep__badge {
    color: var(--upaep-badge-color);
    font-size: var(--upaep-badge-fz);
    font-weight: var(--upaep-badge-fw);
}

/*? ...y el badge no debe heredar el glifo de .__icon-left-* / .__icon-right-*,
   que se inyecta en todo span hijo directo del botón. */
.upaep__btn > .upaep__badge::before,
.upaep__btn > .upaep__badge::after {
    content: none;
}

.upaep__btn.__icon-left-plus {
    --upaep-btn-icon-left: '\2b';
}

.upaep__btn.__icon-right-plus {
    --upaep-btn-icon-right: '\2b';
}

.upaep__btn.__icon-left-carret {
    --upaep-btn-icon-left: '\f0d9';
}

.upaep__btn.__icon-right-carret {
    --upaep-btn-icon-right: '\f0da';
}

.upaep__btn.__icon-left-arrow {
    --upaep-btn-icon-left: '\f060';
}

.upaep__btn.__icon-right-arrow {
    --upaep-btn-icon-right: '\f061';
}

.upaep__btn.__icon-left-check {
    --upaep-btn-icon-left: '\f00c';
}

.upaep__btn.__icon-right-check {
    --upaep-btn-icon-right: '\f00c';
}

.upaep__btn.__icon-left-circle-check {
    --upaep-btn-icon-left: '\f058';
}

.upaep__btn.__icon-right-circle-check {
    --upaep-btn-icon-right: '\f058';
}

.upaep__btn.__icon-left-xmark {
    --upaep-btn-icon-left: '\f00d';
}

.upaep__btn.__icon-right-xmark {
    --upaep-btn-icon-right: '\f00d';
}

.upaep__btn.__icon-left-circle-xmark {
    --upaep-btn-icon-left: '\f057';
}

.upaep__btn.__icon-right-circle-xmark {
    --upaep-btn-icon-right: '\f057';
}

.upaep__btn.__rounded {
    --upaep-btn-border-radius: 50px;
}

.upaep__btn.__sm {
    --upaep-btn-fz: var(--upaep-fz14);
    --upaep-btn-width: 130px;
}

.upaep__btn.__lg {
    --upaep-btn-fz: var(--upaep-fz16);
    --upaep-btn-width: 282px;
}

.upaep__btn.__my-0 {
    --upaep-btn-margin: 0 1rem;
}

.upaep__btn.__mx-0 {
    --upaep-btn-margin: 1rem 0;
}

.upaep__btn.__m-0 {
    --upaep-btn-margin: 0;
}

a.upaep__underline,
p.upaep__underline,
.upaep__btn.upaep__underline,
.upaep__btn.__underline,
a.__underline,
p.__underline {
    position: relative;
    --upaep-btn-color: var(--upaep-color-black);
    --upaep-btn-bg: var(--upaep-color-none);
    --upaep-btn-hover-color: var(--upaep-color-black);
    /*? Era `--upaep-color-color-none`, un token que no existe: el `var()` sin
       fallback dejaba `background` y `border` del hover inválidos y caían a su
       valor inicial. El render era el correcto por casualidad —transparente y
       sin borde, que es lo que quiere una variante fantasma—; con el token real
       lo es a propósito. `--upaep-btn-active-bg` se declara aquí porque la
       mezcla del bloque base no puede operar sobre `none`. */
    --upaep-btn-hover-bg: var(--upaep-color-none);
    --upaep-btn-hover-border-color: var(--upaep-color-none);
    --upaep-btn-active-bg: var(--upaep-color-none);
    --upaep-btn-disabled-color: var(--upaep-color-black);
    --upaep-btn-disabled-bg: var(--upaep-color-none);
    --upaep-btn-disabled-border-color: var(--upaep-color-none);
    --upaep-btn-border-size: 0;
    --upaep-btn-border-radius: 0;

    &::before,
    &::before,
    &::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        height: 3px;
        width: 100%;
        transform: scaleX(0);
        background-color: var(--upaep-btn-color-underline);
        transform-origin: bottom center;
        transition: transform .25s ease-out;
        z-index: 5;
    }

    &:hover::before,
    &:hover::before,
    &:hover::before {
        transform: scaleX(1);
        transform-origin: bottom center;
    }
}


a.upaep__link,
p.upaep__link,
a.__link,
p.__link {
    --upaep-link-fz: var(--upaep-fz18);
    --upaep-link-fw: var(--upaep-fw-bold);
    --upaep-link-color: var(--upaep-color-black);
    --upaep-link-color-underline: var(--ui-accent, var(--upaep-color-red));
    --upaep-link-margin: 1rem;
    --upaep-link-icon: ;
    --upaep-link-icon-color: var(--ui-accent, var(--upaep-color-red));
    --upaep-link-icon-margin: 0 5px;
    font-size: var(--upaep-link-fz);
    font-weight: var(--upaep-link-fw);
    color: var(--upaep-link-color);
    margin: var(--upaep-link-margin);
    position: relative;
    text-decoration: none;
    cursor: pointer;

    &::before,
    &::before {
        content: "";
        position: absolute;
        inset: auto auto -1px 0;
        height: 3px;
        width: 100%;
        transform: scaleX(0);
        background-color: var(--upaep-link-color-underline);
        transform-origin: bottom center;
        transition: transform .25s ease-out;
        z-index: 5;
    }

    &:hover::before,
    &:hover::before {
        transform: scaleX(1);
        transform-origin: bottom center;
    }

    &::after {
        content: var(--upaep-link-icon);
        color: var(--upaep-link-icon-color);
        margin: var(--upaep-link-icon-margin);
        font-family: var(--upaep-ff-fontawesome);
        font-style: normal;
        font-variant: normal;
        line-height: 1;
        text-rendering: auto;
    }

    &.__icon-arrow {
        --upaep-link-icon: '\f061';
    }

    &.__icon-circle-arrow {
        --upaep-link-icon: '\f0a9';
    }

    &.__icon-chevron {
        --upaep-link-icon: '\f054';
    }

    &.__icon-circle-chevron {
        --upaep-link-icon: '\f138';
    }
}

.upaep__btn.__primary {
    --upaep-btn-color: var(--ui-on-primary, var(--upaep-color-white));
    --upaep-btn-bg: var(--ui-primary, var(--upaep-color-primary));
    --upaep-btn-border-color: var(--ui-primary, var(--upaep-color-primary));
    --upaep-btn-hover-color: var(--ui-on-primary, var(--upaep-color-white));
    --upaep-btn-hover-bg: var(--ui-primary-hover, var(--upaep-color-primary-hover));
    --upaep-btn-hover-border-color: var(--ui-primary-hover, var(--upaep-color-primary-hover));
    /*? Polo negro y no `currentColor`: la tinta es blanca y el hover oscurece,
       así que mezclar hacia la tinta aclararía el press. Ver la nota del polo
       en el bloque base de `.upaep__btn`. */
    --upaep-btn-active-bg: color-mix(in srgb, var(--upaep-btn-hover-bg) 86%, var(--upaep-color-black));
    --upaep-btn-disabled-color: var(--ui-on-primary, var(--upaep-color-white));
    --upaep-btn-disabled-bg: var(--ui-primary, var(--upaep-color-primary));
    --upaep-btn-disabled-border-color: var(--ui-primary, var(--upaep-color-primary));
}

.upaep__btn.__secondary {
    --upaep-btn-color: var(--ui-on-secondary, var(--upaep-color-black));
    --upaep-btn-bg: var(--ui-secondary, var(--upaep-color-secondary));
    --upaep-btn-border-color: var(--ui-secondary, var(--upaep-color-secondary));
    --upaep-btn-hover-color: var(--ui-on-secondary, var(--upaep-color-black));
    --upaep-btn-hover-bg: var(--ui-secondary-hover, var(--upaep-color-secondary-hover));
    --upaep-btn-hover-border-color: var(--ui-secondary-hover, var(--upaep-color-secondary-hover));
    --upaep-btn-disabled-color: var(--ui-on-secondary, var(--upaep-color-black));
    --upaep-btn-disabled-bg: var(--ui-secondary, var(--upaep-color-secondary));
    --upaep-btn-disabled-border-color: var(--ui-secondary, var(--upaep-color-secondary));
}

.upaep__btn.__tertiary {
    --upaep-btn-color: var(--ui-on-tertiary, var(--upaep-color-black));
    --upaep-btn-bg: var(--ui-tertiary, var(--upaep-color-tertiary));
    --upaep-btn-border-color: var(--ui-tertiary, var(--upaep-color-tertiary));
    --upaep-btn-hover-color: var(--ui-on-tertiary, var(--upaep-color-black));
    --upaep-btn-hover-bg: var(--ui-tertiary-hover, var(--upaep-color-tertiary-hover));
    --upaep-btn-hover-border-color: var(--ui-tertiary-hover, var(--upaep-color-tertiary-hover));
    --upaep-btn-disabled-color: var(--ui-on-tertiary, var(--upaep-color-black));
    --upaep-btn-disabled-bg: var(--ui-tertiary, var(--upaep-color-tertiary));
    --upaep-btn-disabled-border-color: var(--ui-tertiary, var(--upaep-color-tertiary));
}

.upaep__btn.__blue {
    --upaep-btn-color: var(--upaep-color-white);
    --upaep-btn-bg: var(--upaep-color-blue-primary);
    --upaep-btn-border-color: var(--upaep-color-blue-primary);
    --upaep-btn-hover-color: var(--upaep-color-white);
    --upaep-btn-hover-bg: var(--upaep-color-blue-primary-hover);
    --upaep-btn-hover-border-color: var(--upaep-color-blue-primary-hover);
    --upaep-btn-disabled-color: var(--upaep-color-white);
    --upaep-btn-disabled-bg: var(--upaep-color-blue-primary);
    --upaep-btn-disabled-border-color: var(--upaep-color-blue-primary);
}

.upaep__btn.__grey {
    --upaep-btn-color: var(--upaep-color-white);
    --upaep-btn-bg: var(--colordark3);
    --upaep-btn-border-color: var(--colordark3);
    --upaep-btn-hover-color: var(--upaep-color-white);
    --upaep-btn-hover-bg: #3e3e3e;
    --upaep-btn-hover-border-color: #3e3e3e;
    /*? Polo negro y no `currentColor`: la tinta es blanca y el hover oscurece,
       así que mezclar hacia la tinta aclararía el press. Ver la nota del polo
       en el bloque base de `.upaep__btn`. */
    --upaep-btn-active-bg: color-mix(in srgb, var(--upaep-btn-hover-bg) 86%, var(--upaep-color-black));
    --upaep-btn-disabled-color: var(--upaep-color-white);
    --upaep-btn-disabled-bg: var(--colordark3);
    --upaep-btn-disabled-border-color: var(--colordark3);
}

.upaep__btn.__black {
    --upaep-btn-color: var(--upaep-color-white);
    --upaep-btn-bg: var(--upaep-color-black);
    --upaep-btn-border-color: var(--upaep-color-black);
    --upaep-btn-hover-color: var(--upaep-color-white);
    --upaep-btn-hover-bg: #292929;
    --upaep-btn-hover-border-color: #292929;
    --upaep-btn-disabled-color: var(--upaep-color-white);
    --upaep-btn-disabled-bg: var(--upaep-color-black);
    --upaep-btn-disabled-border-color: var(--upaep-color-black);
}

.upaep__btn.__dark {
    --upaep-btn-color: var(--upaep-color-white);
    --upaep-btn-bg: #212529;
    --upaep-btn-border-color: #212529;
    --upaep-btn-hover-color: var(--upaep-color-white);
    --upaep-btn-hover-bg: #424649;
    --upaep-btn-hover-border-color: #424649;
    --upaep-btn-disabled-color: var(--upaep-color-white);
    --upaep-btn-disabled-bg: #212529;
    --upaep-btn-disabled-border-color: #212529;
}

.upaep__btn.__light {
    --upaep-btn-color: var(--upaep-color-black);
    --upaep-btn-bg: #f8f9fa;
    --upaep-btn-border-color: #f8f9fa;
    --upaep-btn-hover-color: var(--upaep-color-black);
    --upaep-btn-hover-bg: #d3d4d5;
    --upaep-btn-hover-border-color: #d3d4d5;
    --upaep-btn-disabled-color: var(--upaep-color-black);
    --upaep-btn-disabled-bg: #f8f9fa;
    --upaep-btn-disabled-border-color: #f8f9fa;
}

.upaep__btn.__error {
    --upaep-btn-color: var(--ui-on-danger, var(--upaep-color-white));
    --upaep-btn-bg: var(--ui-danger, var(--upaep-color-error));
    --upaep-btn-border-color: var(--ui-danger, var(--upaep-color-error));
    --upaep-btn-hover-color: var(--ui-on-danger, var(--upaep-color-white));
    --upaep-btn-hover-bg: var(--ui-danger-hover, var(--upaep-color-error-hover));
    --upaep-btn-hover-border-color: var(--ui-danger-hover, var(--upaep-color-error-hover));
    /*? Polo negro y no `currentColor`: la tinta es blanca y el hover oscurece,
       así que mezclar hacia la tinta aclararía el press. Ver la nota del polo
       en el bloque base de `.upaep__btn`. */
    --upaep-btn-active-bg: color-mix(in srgb, var(--upaep-btn-hover-bg) 86%, var(--upaep-color-black));
    --upaep-btn-disabled-color: var(--ui-on-danger, var(--upaep-color-white));
    --upaep-btn-disabled-bg: var(--ui-danger, var(--upaep-color-error));
    --upaep-btn-disabled-border-color: var(--ui-danger, var(--upaep-color-error));
}

.upaep__btn.__success {
    --upaep-btn-color: var(--ui-on-success, var(--upaep-color-white));
    --upaep-btn-bg: var(--ui-success, var(--upaep-color-success));
    --upaep-btn-border-color: var(--ui-success, var(--upaep-color-success));
    --upaep-btn-hover-color: var(--ui-on-success, var(--upaep-color-white));
    --upaep-btn-hover-bg: var(--ui-success-hover, var(--upaep-color-success-hover));
    --upaep-btn-hover-border-color: var(--ui-success-hover, var(--upaep-color-success-hover));
    /*? Polo negro y no `currentColor`: la tinta es blanca y el hover oscurece,
       así que mezclar hacia la tinta aclararía el press. Ver la nota del polo
       en el bloque base de `.upaep__btn`. */
    --upaep-btn-active-bg: color-mix(in srgb, var(--upaep-btn-hover-bg) 86%, var(--upaep-color-black));
    --upaep-btn-disabled-color: var(--ui-on-success, var(--upaep-color-white));
    --upaep-btn-disabled-bg: var(--ui-success, var(--upaep-color-success));
    --upaep-btn-disabled-border-color: var(--ui-success, var(--upaep-color-success));
}

.upaep__btn.__warning {
    --upaep-btn-color: var(--ui-on-warning, var(--upaep-color-black));
    --upaep-btn-bg: var(--ui-warning, var(--upaep-color-warning));
    --upaep-btn-border-color: var(--ui-warning, var(--upaep-color-warning));
    --upaep-btn-hover-color: var(--ui-on-warning, var(--upaep-color-black));
    --upaep-btn-hover-bg: var(--ui-warning-hover, var(--upaep-color-warning-hover));
    --upaep-btn-hover-border-color: var(--ui-warning-hover, var(--upaep-color-warning-hover));
    --upaep-btn-disabled-color: var(--ui-on-warning, var(--upaep-color-black));
    --upaep-btn-disabled-bg: var(--ui-warning, var(--upaep-color-warning));
    --upaep-btn-disabled-border-color: var(--ui-warning, var(--upaep-color-warning));
}

.upaep__btn.__sky,
.upaep__btn.__blue-sky {
    --upaep-btn-color: var(--upaep-color-white);
    --upaep-btn-bg: var(--ui-info, var(--upaep-color-blue-sky));
    --upaep-btn-border-color: var(--ui-info, var(--upaep-color-blue-sky));
    --upaep-btn-hover-color: var(--upaep-color-white);
    --upaep-btn-hover-bg: var(--upaep-color-blue-sky-hover);
    --upaep-btn-hover-border-color: var(--upaep-color-blue-sky-hover);
    --upaep-btn-disabled-color: var(--upaep-color-white);
    --upaep-btn-disabled-bg: var(--ui-info, var(--upaep-color-blue-sky));
    --upaep-btn-disabled-border-color: var(--ui-info, var(--upaep-color-blue-sky));
}

.upaep__btn.__slice {
    --upaep-btn-width: 60px;
    --upaep-btn-height: 60px;
    --upaep-btn-border-radius: 50px;
    --upaep-btn-padding: 0;
    --upaep-btn-margin: 1rem;
    --upaep-btn-width-transition: 170px;
    box-shadow: var(--upaep-box-shadow);
    overflow: hidden;
    transition: width .3s ease-in;
    justify-content: start;

    & img {
        width: 55px;
        height: 55px;
        padding: .5rem;
        margin: 0 .2rem;
        object-fit: cover;
    }

    & span {
        max-width: 0;
        font-size: var(--upaep-fz20);
        color: var(--upaep-color-white);
        margin: 0 5px;
    }

    &:hover {
        width: var(--upaep-btn-width-transition);
    }

}

.upaep__btn.__contacto {
    --upaep-btn-color: var(--upaep-color-white);
    --upaep-btn-bg: var(--ui-accent, var(--upaep-color-red));
    --upaep-btn-border-color: var(--ui-accent, var(--upaep-color-red));
    --upaep-btn-hover-color: var(--upaep-color-white);
    --upaep-btn-hover-bg: var(--ui-accent, var(--upaep-color-red));
    --upaep-btn-hover-border-color: var(--ui-accent, var(--upaep-color-red));
    --upaep-btn-disabled-color: var(--upaep-color-white);
    --upaep-btn-disabled-bg: var(--ui-accent, var(--upaep-color-red));
    --upaep-btn-disabled-border-color: var(--ui-accent, var(--upaep-color-red));
    --upaep-btn-width: 60px;
    --upaep-btn-height: 60px;
    --upaep-btn-border-radius: 50px;
    --upaep-btn-padding: 0;
    --upaep-btn-margin: 1rem;
    --upaep-btn-width-transition: 170px;
    box-shadow: var(--upaep-box-shadow);
    overflow: hidden;
    position: fixed;
    z-index: var(--upaep-zindex-btn-float);
    inset: auto 0 0 auto;
    transition: width .3s ease-in;
    justify-content: start;

    & img {
        width: 45px;
        height: 45px;
        padding: 0;
        margin: 0 .5rem;
        object-fit: cover;
    }

    & span {
        max-width: 0;
        font-size: var(--upaep-fz20);
        color: var(--upaep-color-white);
        margin: 0 5px;
    }

    &:hover {
        width: var(--upaep-btn-width-transition);
    }
}

.upaep__btn.__whats {
    --upaep-btn-color: var(--upaep-color-white);
    --upaep-btn-border-color: var(--upaep-color-whats);
    --upaep-btn-bg: var(--upaep-color-whats);
    --upaep-btn-hover-color: var(--upaep-color-white);
    --upaep-btn-hover-bg: var(--upaep-color-whats);
    --upaep-btn-hover-border-color: var(--upaep-color-whats);
    --upaep-btn-disabled-color: var(--upaep-color-white);
    --upaep-btn-disabled-bg: var(--upaep-color-whats);
    --upaep-btn-disabled-border-color: var(--upaep-color-whats);
    --upaep-btn-width: 60px;
    --upaep-btn-height: 60px;
    --upaep-btn-border-radius: 50px;
    --upaep-btn-padding: 0;
    --upaep-btn-margin: 1rem;
    --upaep-btn-width-transition: 170px;
    box-shadow: var(--upaep-box-shadow);
    overflow: hidden;
    position: fixed;
    z-index: var(--upaep-zindex-btn-float);
    inset: auto 0 10% auto;
    transition: width .3s ease-in;
    justify-content: start;

    & img {
        width: 45px;
        height: 45px;
        padding: 0;
        margin: 0 .5rem;
        object-fit: cover;
    }

    & span {
        max-width: 0;
        font-size: var(--upaep-fz20);
        color: var(--upaep-color-white);
        margin: 0 5px;
    }

    &:hover {
        width: var(--upaep-btn-width-transition);
    }
}

.upaep__btn.__flotante {
    --upaep-btn-position: fixed;
    --upaep-btn-inset: 10% 0 0 10%;
    position: var(--upaep-btn-position);
    inset: var(--upaep-btn-inset);
    z-index: var(--upaep-zindex-btn-float);
}

.upaep__btn-up {
    position: fixed;
    bottom: 5%;
    right: 0;
    display: none;
    cursor: pointer;
    z-index: 100;
    background: none;
    border: none;

    &::before {
        font-family: 'FontAwesome';
        content: '\f139';
        color: var(--ui-accent, var(--upaep-color-red));
        font-size: 3rem;
        margin: 0 15px;
        filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.7));
    }
}

.upaep__btn-down {
    position: absolute;
    bottom: 5%;
    left: 46%;
    cursor: pointer;
    background: none;
    border: none;

    &::before {
        font-family: 'FontAwesome';
        content: '\f103';
        color: var(--upaep-color-white);
        font-size: 3rem;
        margin: 0 15px;
        filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.7));
    }
}

.upaep__btn.__tab {
    --upaep-btn-color: var(--upaep-color-white);
    --upaep-btn-bg: var(--ui-accent, var(--upaep-color-red));
    --upaep-btn-border-color: none;
    --upaep-btn-border-radius: 10px 10px 0 0;
    --upaep-btn-hover-color: var(--upaep-color-white);
    --upaep-btn-hover-bg: var(--ui-accent, var(--upaep-color-red));
    --upaep-btn-hover-border-color: none;
    --upaep-btn-hover-border-radius: 10px 10px 0 0;
    --upaep-btn-disabled-color: var(--upaep-color-white);
    --upaep-btn-disabled-bg: var(--ui-accent, var(--upaep-color-red));
    --upaep-btn-disabled-border-color: var(--ui-accent, var(--upaep-color-red));

    &:not(.is-active) {
        --upaep-btn-bg: none;
    }
}

.upaep__btn.__modalidad {
    min-width: 100px;
    --upaep-btn-height: 25px;
    --upaep-btn-padding: 0;
    --upaep-btn-color: var(--upaep-color-light-grey);
    --upaep-btn-bg: var(--upaep-color-white);
    --upaep-btn-border-color: var(--upaep-color-light-grey);
    --upaep-btn-border-radius: 10px 10px 0 0;
    --upaep-btn-hover-color: var(--upaep-color-dark-grey);
    --upaep-btn-hover-bg: var(--upaep-color-white);
    --upaep-btn-hover-border-color: var(--upaep-color-dark-grey);
    --upaep-btn-hover-border-radius: 10px 10px 0 0;
    --upaep-btn-disabled-color: var(--upaep-color-light-grey);
    --upaep-btn-disabled-bg: var(--upaep-color-white);
    --upaep-btn-disabled-border-color: var(--upaep-color-light-grey);
}

.upaep__btn.__menu {
    --upaep-btn-width: 165px;
    --upaep-btn-height: 35px;
    --upaep-btn-color: var(--upaep-color-black);
    --upaep-btn-cont-fw: var(--upaep-fw-bold);
    --upaep-btn-bg: var(--upaep-color-white);
    --upaep-btn-border-color: var(--upaep-color-white);
    --upaep-btn-border-radius: 50px;
    --upaep-btn-hover-color: var(--upaep-color-black);
    --upaep-btn-hover-bg: var(--upaep-color-white);
    --upaep-btn-hover-border-color: var(--upaep-color-white);
    --upaep-btn-hover-border-radius: 50px;
    --upaep-btn-disabled-color: var(--upaep-color-black);
    --upaep-btn-disabled-bg: var(--upaep-color-white);
    --upaep-btn-disabled-border-color: var(--upaep-color-light-grey);

    & a {
        width: 100%;
        display: flex;
        justify-content: end;
        align-items: center;
        flex-direction: row-reverse;
        padding: 0;
    }

    & img {
        height: 25px;
        width: 25px;
        margin: 5px;
    }

    & span {
        font-size: var(--upaep-fz14);
    }
}

.upaep__btn.__back {
    --upaep-btn-width: 35px;
    --upaep-btn-height: 35px;
    --upaep-btn-margin: 0;
    --upaep-btn-padding: .5rem;
    --upaep-btn-border-radius: 50px;
    --upaep-btn-color: var(--ui-accent, var(--upaep-color-red));
    --upaep-btn-bg: var(--upaep-color-white);
    --upaep-btn-border-color: var(--upaep-color-white);
    --upaep-btn-hover-color: var(--ui-accent, var(--upaep-color-red));
    --upaep-btn-hover-bg: var(--upaep-color-background);
    --upaep-btn-hover-border-color: var(--upaep-color-background);
    --upaep-btn-disabled-color: var(--ui-accent, var(--upaep-color-red));
    --upaep-btn-disabled-bg: var(--upaep-color-white);
    --upaep-btn-disabled-border-color: var(--upaep-color-white);
    box-shadow: var(--upaep-box-shadow);

    &.__back-top {
        position: fixed;
        inset: auto 10px 10px auto;

        .__icon-back {
            rotate: 90deg;
        }
    }
}

.upaep__btn.__delete {
    --upaep-btn-width: 35px;
    --upaep-btn-height: 35px;
    --upaep-btn-margin: 0;
    --upaep-btn-padding: .5rem;
    --upaep-btn-border-radius: 50px;
    --upaep-btn-color: var(--ui-accent, var(--upaep-color-red));
    --upaep-btn-bg: var(--upaep-color-white);
    --upaep-btn-border-color: var(--upaep-color-white);
    --upaep-btn-hover-color: var(--ui-accent, var(--upaep-color-red));
    --upaep-btn-hover-bg: var(--upaep-color-background);
    --upaep-btn-hover-border-color: var(--upaep-color-background);
    --upaep-btn-disabled-color: var(--ui-accent, var(--upaep-color-red));
    --upaep-btn-disabled-bg: var(--upaep-color-white);
    --upaep-btn-disabled-border-color: var(--upaep-color-white);

    img,
    svg {
        width: 25px;
        height: 25px;
        /*? El SVG inline es hijo flex del botón: sin esto lo encoge el `flex-shrink` por
           defecto y el icono sale aplastado. Con <img> no pasaba porque tenía width fijo. */
        flex: 0 0 auto;
    }
}

.upaep__btn.__spinner-inactive {
    .__spinner {
        display: none;
    }
}


.upaep__btn.__radio {
    --upaep-btn-margin: 0;
    --upaep-btn-checked-color: var(--ui-surface, var(--upaep-color-white));
    --upaep-btn-checked-bg: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-btn-checked-border-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    transition: background .5s, color .5s;

    input[type="radio"] {
        display: none;
    }

    &:has(input[type="radio"]:checked) {
        transition: background .5s, color .5s;
        color: var(--upaep-btn-checked-color);
        background: var(--upaep-btn-checked-bg);
        border-color: var(--upaep-btn-checked-border-color);
    }

    &:has(input[type="radio"]:invalid) {
        transition: background .5s, color .5s;
        border-color: var(--ui-danger, var(--upaep-color-error));
    }

    &:has(input[type="radio"]:valid) {
        transition: background .5s, color .5s;
        border-color: var(--ui-success, var(--upaep-color-success));
    }
}

.upaep__btn.__checkbox {
    --upaep-btn-margin: 0;
    --upaep-btn-checked-color: var(--ui-surface, var(--upaep-color-white));
    --upaep-btn-checked-bg: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-btn-checked-border-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    transition: background .5s, color .5s;

    input[type="checkbox"] {
        display: none;
    }

    &:has(input[type="checkbox"]:checked) {
        transition: background .5s, color .5s;
        color: var(--upaep-btn-checked-color);
        background: var(--upaep-btn-checked-bg);
        border-color: var(--upaep-btn-checked-border-color);
    }

    &:has(input[type="checkbox"]:invalid) {
        transition: background .5s, color .5s;
        border-color: var(--ui-danger, var(--upaep-color-error));
    }

    &:has(input[type="checkbox"]:valid) {
        transition: background .5s, color .5s;
        border-color: var(--ui-success, var(--upaep-color-success));
    }
}

/*? ------ Button Group ------ */
.upaep__btn-group {
    position: relative;
    display: inline-flex;
    vertical-align: middle;

    &.__separate {
        gap: .8rem
    }

    &.__vertical {
        flex-direction: column;
        /*? stretch (no flex-start): en columna, con flex-start cada botón se
           encogía a su propio contenido y la pila quedaba dispareja, en contra
           del radio compartido arriba/abajo. Con stretch todos toman el ancho
           del grupo, que sigue siendo el del botón más ancho (inline-flex). */
        align-items: stretch;
        justify-content: center;
    }

    &.__divisor {
        --divisor-width: 1px;
        --divisor-height: 25px;
        --divisor-bg: var(--upaep-color-tenue-gray);
        --divisor-inset: calc(50% - (var(--divisor-height) / 2)) 0 auto auto;

        .upaep__btn:not(:last-child)::after {
            content: "";
            position: absolute;
            translate: -50%;
            width: var(--divisor-width);
            height: var(--divisor-height);
            background: var(--divisor-bg);
            inset: var(--divisor-inset);
        }

        &.__vertical {
            --divisor-inset: auto auto 0 calc(50% - (var(--divisor-height) / 2));

            .upaep__btn:not(:last-child)::after {
                translate: 0;
                height: var(--divisor-width);
                width: var(--divisor-height);
            }
        }
    }

    .upaep__btn {
        --upaep-btn-margin: 0;
    }

    &:not(.__separate) {
        .upaep__btn {
            --upaep-btn-border-radius: 0;

            &:not(.__rounded):first-child {
                --upaep-btn-border-radius: 10px 0 0 10px;
            }

            &:not(.__rounded):last-child {
                --upaep-btn-border-radius: 0 10px 10px 0;
            }

            &:is(.__rounded):first-child {
                --upaep-btn-border-radius: 50px 0 0 50px;
            }

            &:is(.__rounded):last-child {
                --upaep-btn-border-radius: 0 50px 50px 0;
            }
        }

        &.__vertical {
            .upaep__btn {
                --upaep-btn-margin: 0;
                --upaep-btn-border-radius: 0;

                &:first-child {
                    --upaep-btn-border-radius: 10px 10px 0 0;
                }

                &:last-child {
                    --upaep-btn-border-radius: 0 0 10px 10px;
                }
            }
        }
    }


}

.upaep__btn-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

/*? ------ Ripple ------ */
.upaep__ripple {
    position: relative;
    overflow: hidden;
}

/*? Capa donde el runtime inserta los círculos. Se recorta a sí misma con la forma
   del elemento anfitrión, de modo que este no necesita declarar overflow y sus
   hijos que sobresalen (badges anclados con inset negativo) no se recortan. */
.upaep__ripple-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}

.circle-ripple {
    /*? --upaep-ripple-size sí se hereda del botón (el círculo no lo declara), así
       que es el knob para fijar el tamaño a mano. Sin él, el runtime lo ajusta al
       lado mayor del botón. --upaep-ripple-width/height siguen sirviendo, pero
       solo sobre el propio círculo. */
    --upaep-ripple-width: var(--upaep-ripple-size, 100px);
    --upaep-ripple-height: var(--upaep-ripple-size, 100px);
    --upaep-ripple-bg: radial-gradient(circle, var(--ui-ripple, rgba(255, 255, 255, .35)) 0%, transparent 70%);
    --upaep-ripple-timing: .3s;
    width: var(--upaep-ripple-width);
    height: var(--upaep-ripple-height);
    background: var(--upaep-ripple-bg);
    position: absolute;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    animation: scale-ripple var(--upaep-ripple-timing) ease-in-out;
}

@keyframes scale-ripple {
    to {
        transform: translate(-50%, -50%) scale(3);
        opacity: 0;
    }
}

/*? ------ Header y Footer ------ */

.upaep__header {
    --upaep-header-width: 100%;
    --upaep-header-height: auto;
    --upaep-header-bg: var(--upaep-color-background);
    --upaep-header-up-width: 100%;
    --upaep-header-up-height: 65px;
    --upaep-header-right-width: 150px;
    --upaep-header-right-height: 100%;
    --upaep-header-right-bg: var(--ui-accent, var(--upaep-color-red));
    --upaep-header-logo-margin: 0 1rem;
    --upaep-header-logo-padding: 10px 15px;
    --upaep-header-logo-width: 130px;
    --upaep-header-titulod-color: var(--upaep-color-dark-grey);
    --upaep-header-titulod-fw: var(--upaep-fw-bold);
    --upaep-header-titulod-fz: var(--upaep-fz28);
    --upaep-header-center-position: absolute;
    --upaep-header-language-width: 33px;
    --upaep-header-language-bg: var(--colordark);
    --upaep-header-language-border-radius: 50%;
    --upaep-header-language-padding: 5px;
    --upaep-header-menu-color: var(--upaep-color-white);
    --upaep-header-menu-fz: var(--upaep-fz15);
    --upaep-header-menu-fw: var(--upaep-fw-bold);
    --upaep-header-menu-margin: 0 0 0 1.5rem;
    --upaep-header-menu-padding: 0;
    --upaep-header-down-width: 100%;
    --upaep-header-down-height: 40px;
    --upaep-header-down-padding: 0;
    --upaep-header-down-bg: var(--colordark);
    --upaep-header-titutlom-color: var(--upaep-color-white);
    --upaep-header-titutlom-fz: var(--upaep-fz20);
    --upaep-header-titutlom-fw: var(--upaep-fw-bold);
    --upaep-header-titutlom-margin: 0 1rem;
    width: var(--upaep-header-width);
    height: var(--upaep-header-height);
    background: var(--upaep-header-bg);
}

.upaep__header-up,
.upaep__header__up {
    width: var(--upaep-header-up-width);
    height: var(--upaep-header-up-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.upaep__header-left,
.upaep__header__left {
    display: flex;
    align-items: center;
}

.upaep__header-logo,
.upaep__header__logo {
    margin: var(--upaep-header-logo-margin);
    padding: var(--upaep-header-logo-padding);
}

.upaep__header-logo img,
.upaep__header__logo img {
    width: var(--upaep-header-logo-width);
}

.upaep__header-titulo_d,
.upaep__header__titulo_d {
    color: var(--upaep-header-titulod-color);
    font-weight: var(--upaep-header-titulod-fw);
    font-size: var(--upaep-header-titulod-fz);
    margin: 0;
}

.upaep__header-center,
.upaep__header__center {
    position: var(--upaep-header-center-position);
    right: 11rem;
}

.upaep__button-language img,
.upaep__button__language img {
    width: var(--upaep-header-language-width);
    cursor: pointer;
}

.upaep__header-right,
.upaep__header__right {
    width: var(--upaep-header-right-width);
    height: var(--upaep-header-right-height);
    background: var(--upaep-header-right-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);
    cursor: pointer;
}

.upaep__header-menu span,
.upaep__header__menu span {
    color: var(--upaep-header-menu-color);
    font-size: var(--upaep-header-menu-fz);
    font-weight: var(--upaep-header-menu-fw);
    margin: var(--upaep-header-menu-margin);
    padding: var(--upaep-header-menu-padding);
    display: flex;
    justify-content: center;
    align-items: center;
}

.upaep__header-down,
.upaep__header__down {
    width: var(--upaep-header-down-width);
    height: var(--upaep-header-down-height);
    background: var(--upaep-header-down-bg);
    display: flex;
    align-items: center;
}

.upaep__header_titulo_m,
.upaep__header__titulo_m {
    color: var(--upaep-header-titutlom-color);
    font-size: var(--upaep-header-titutlom-fz);
    font-weight: var(--upaep-header-titutlom-fw);
    margin: var(--upaep-header-titutlom-margin);
    display: flex;
    align-items: center;
    height: 100%;
}

footer:has(.upaep__footer .upaep__footer-simple) {
    --footer-width: 100%;
    --footer-bg: #4d4d4d;
    --footer-padding: 15px 0px;
    min-height: var(--footer-minheigth);
    border-top: var(--footer-border-top);
    text-align: center;
}

.upaep__footer {
    --upaep-footer-width: 100%;
    --upaep-footer-height: auto;
    --upaep-footer-bg: var(--upaep-color-black);
    --upaep-footer-simple-width: 100%;
    --upaep-footer-simple-bg: #4d4d4d;
    --upaep-footer-simple-img-width: 500px;
    --upaep-footer-up-maxwidth: 1400px;
    --upaep-footer-up-width: 100%;
    --upaep-footer-up-height: auto;
    --upaep-footer-up-padding: 1rem;
    --upaep-footer-up-margin: 0 auto;
    --upaep-footer-up_content-width: 100%;
    --upaep-footer-up_content-height: auto;
    --upaep-footer-up_content-padding: 0;
    --upaep-footer-up_content-margin: 0 auto;
    --upaep-footer-content-width: 100%;
    --upaep-footer-content-height: auto;
    --upaep-footer-content-padding: 1rem;
    --upaep-footer-content-margin: .5rem;
    --upaep-footer-content-color: var(--upaep-color-white);
    --upaep-footer-list-item-fz: var(--upaep-fz14);
    --upaep-footer-list-item-padding: .5rem 1rem;
    --upaep-footer-list-item-color: var(--upaep-color-white);
    --upaep-footer-logo-width: 100%;
    --upaep-footer-logo-height: auto;
    --upaep-footer-logo-padding: 1rem;
    --upaep-footer-logo-maxwidth: 110px;
    --upaep-footer-logo-maxheight: 250px;
    --upaep-footer-direccion-width: 50%;
    --upaep-footer-direccion-margin: 1rem auto;
    --upaep-footer-direccion-fz: var(--upaep-fz12);
    --upaep-footer-direccion-color: var(--upaep-color-tenue-gray);
    --upaep-footer-telefono-width: 65%;
    --upaep-footer-telefono-margin: 1rem auto;
    --upaep-footer-telefono-fz: var(--upaep-fz18);
    --upaep-footer-telefono-fw: var(--upaep-fw-bold);
    --upaep-footer-siguenos-width: 100%;
    --upaep-footer-siguenos-height: auto;
    --upaep-footer-siguenos-padding: 2rem;
    --upaep-footer-siguenos-p-fw: var(--upaep-fw-bold);
    --upaep-footer-siguenos-a-width: 25%;
    --upaep-footer-siguenos-a-margin: 0 1rem 1rem 0;
    --upaep-footer-siguenos-img-width: 35px;
    --upaep-footer-siguenos-img-height: 35px;
    --upaep-footer-siguenos-img-padding: 0 auto;
    --upaep-footer-banners-width: 100%;
    --upaep-footer-banners-height: auto;
    --upaep-footer-banners-padding: 0 2rem;
    --upaep-footer-banners-img-width: 125px;
    --upaep-footer-banners-img-height: auto;
    --upaep-footer-banners-img-padding: 0px 17px 15px 0;
    --upaep-footer-banners-img-margin: 0 15px 0 0;
    width: var(--upaep-footer-width);
    height: var(--upaep-footer-height);
    background: var(--upaep-footer-bg);
}

.upaep__footer:has(.upaep__footer-simple) {
    --upaep-footer-bg: var(--ui-neutral, var(--upaep-color-dark-grey));
}

.upaep__footer .upaep__footer-simple {
    width: var(--upaep-footer-simple-width);
    background: var(--upaep-footer-simple-bg);
    display: flex;
    justify-content: center;
    align-items: center;
}

.upaep__footer .upaep__footer-simple img {
    width: var(--upaep-footer-simple-img-width);
}

.upaep__footer-up,
.upaep__footer__up {
    max-width: var(--upaep-footer-up-maxwidth);
    width: var(--upaep-footer-up-width);
    height: var(--upaep-footer-up-height);
    padding: var(--upaep-footer-up-padding);
    margin: var(--upaep-footer-up-margin);
}

.upaep__footer-up_content,
.upaep__footer__up_content {
    width: var(--upaep-footer-up_content-width);
    height: var(--upaep-footer-up_content-height);
    padding: var(--upaep-footer-up_content-padding);
    margin: var(--upaep-footer-up_content-margin);
    display: flex;
    justify-content: space-around;
    flex-direction: row;
}

.upaep__footer-left,
.upaep__footer-center,
.upaep__footer-right,
.upaep__footer__left,
.upaep__footer__center,
.upaep__footer__right {
    width: var(--upaep-footer-content-width);
    height: var(--upaep-footer-content-height);
    padding: var(--upaep-footer-content-padding);
    margin: var(--upaep-footer-content-margin);
    color: var(--upaep-footer-content-color);
}

.upaep__footer .upaep__list-item {
    font-size: var(--upaep-footer-list-item-fz);
    padding: var(--upaep-footer-list-item-padding);
    text-align: start;
}

.upaep__footer .upaep__list-item a {
    color: var(--upaep-footer-list-item-color);
}

.upaep__footer-logo,
.upaep__footer_logo {
    width: var(--upaep-footer-logo-width);
    height: var(--upaep-footer-logo-height);
    padding: var(--upaep-footer-logo-padding);
    display: flex;
    justify-content: center;
}

.upaep__footer-logo img,
.upaep__footer_logo img {
    max-width: var(--upaep-footer-logo-maxwidth);
    max-height: var(--upaep-footer-logo-maxheight);
    object-fit: cover;
}

.upaep__footer-direccion,
.upaep__footer_direccion {
    width: var(--upaep-footer-direccion-width);
    margin: var(--upaep-footer-direccion-margin);
    font-size: var(--upaep-footer-direccion-fz);
    color: var(--upaep-footer-direccion-color);
    text-align: center;
}

.upaep__footer-telefono,
.upaep__footer_telefono {
    width: var(--upaep-footer-telefono-width);
    margin: var(--upaep-footer-telefono-margin);
    font-size: var(--upaep-footer-telefono-fz);
    font-weight: var(--upaep-footer-telefono-fw);
    text-align: center;
}

.upaep__footer-siguenos,
.upaep__footer_siguenos {
    width: var(--upaep-footer-siguenos-width);
    height: var(--upaep-footer-siguenos-height);
    padding: var(--upaep-footer-siguenos-padding);
}

.upaep__footer-siguenos p,
.upaep__footer_siguenos p {
    padding: var(--upaep-footer-siguenos-p-fw);
}

.upaep__footer-redessociales,
.upaep__footer_redessociales {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.upaep__footer-siguenos a,
.upaep__footer_siguenos a {
    width: var(--upaep-footer-siguenos-a-width);
    margin: var(--upaep-footer-siguenos-a-margin);
    text-decoration: none;
    flex: 0 0 auto;
}

.upaep__footer-siguenos img,
.upaep__footer_siguenos img {
    width: var(--upaep-footer-siguenos-img-width);
    height: var(--upaep-footer-siguenos-img-height);
    margin: var(--upaep-footer-siguenos-img-padding);
}

.upaep__footer-banners,
.upaep__footer_banners {
    width: var(--upaep-footer-banners-width);
    height: var(--upaep-footer-banners-height);
    padding: var(--upaep-footer-banners-padding);
}

.upaep__footer-banners img,
.upaep__footer_banners img {
    width: var(--upaep-footer-banners-img-width);
    height: var(--upaep-footer-banners-img-height);
    padding: var(--upaep-footer-banners-img-padding);
    margin: var(--upaep-footer-banners-img-margin);
}

/*? ------ Card ------ */
.upaep__card {
    --upaep-card-minwidth: 0;
    --upaep-card-maxwidth: auto;
    --upaep-card-minheight: 0;
    --upaep-card-maxheight: auto;
    --upaep-card-width: 100%;
    --upaep-card-height: 100%;
    --upaep-card-margin: 1rem;
    --upaep-card-padding: ;
    --upaep-card-position: relative;
    --upaep-card-a-width: auto;
    --upaep-card-a-height: auto;
    --upaep-card-bg: ;
    --upaep-card-border-size: 0;
    --upaep-card-border-style: solid;
    --upaep-card-border-color: var(--ui-surface-2, var(--upaep-color-background));
    --upaep-card-border-radius: 10px;
    --upaep-card-header-width: 100%;
    --upaep-card-header-height: auto;
    --upaep-card-header-padding: .5rem 1rem;
    --upaep-card-header-bg: ;
    --upaep-card-header-border-bottom-size: 1px;
    --upaep-card-header-border-bottom-color: var(--upaep-gradient-white);
    --upaep-card-header-fz: var(--upaep-fz22);
    --upaep-card-header-fw: var(--upaep-fw-bold);
    --upaep-card-header-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-card-header-align: center;
    --upaep-card-footer-width: 100%;
    --upaep-card-footer-height: auto;
    --upaep-card-footer-padding: .5rem 1rem;
    --upaep-card-footer-bg: ;
    --upaep-card-footer-border-top-size: 1px;
    --upaep-card-footer-border-top-color: var(--upaep-gradient-white);
    --upaep-card-content-width: 100%;
    --upaep-card-content-height: 100%;
    --upaep-card-content-padding: 1rem;
    --upaep-card-content-margin: 0;
    --upaep-card-content-border-radius: 0;
    --upaep-card-content-bg: ;
    --upaep-card-img-content-width: 100%;
    --upaep-card-img-content-height: 100%;
    --upaep-card-img-content-border-radius: 10px 10px 0 0;
    --upaep-card-img-content-bg: ;
    --upaep-card-img-width: 100%;
    --upaep-card-img-height: 100%;
    --upaep-card-img-padding: 0;
    --upaep-card-img-objectfit: cover;
    --upaep-card-img-border-radius: 10px 10px 0 0;
    --upaep-card-icon_content-width: 100%;
    --upaep-card-icon_content-height: 100%;
    --upaep-card-icon_content-border-radius: 10px 10px 0 0;
    --upaep-card-icon-bg: ;
    --upaep-card-icon-width: 100%;
    --upaep-card-icon-height: 100%;
    --upaep-card-icon-objectfit: cover;
    --upaep-card-icon-border-radius: 10px 10px 0 0;
    --upaep-card-boxshadow: ;
    --upaep-card-title-width: auto;
    --upaep-card-title-height: auto;
    --upaep-card-title-fz: var(--upaep-fz20);
    --upaep-card-title-fw: var(--upaep-fw-bold);
    --upaep-card-title-margin: 0;
    --upaep-card-title-padding: 0;
    --upaep-card-title-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-card-title-align: start;
    --upaep-card-subtitle-width: auto;
    --upaep-card-subtitle-height: auto;
    --upaep-card-subtitle-fz: var(--upaep-fz20);
    --upaep-card-subtitle-fw: var(--upaep-fw-bold);
    --upaep-card-subtitle-margin: 0;
    --upaep-card-subtitle-padding: 0;
    --upaep-card-subtitle-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-card-subtitle-align: start;
    --upaep-card-text-width: auto;
    --upaep-card-text-height: auto;
    --upaep-card-text-padding: 0;
    --upaep-card-text-fz: var(--upaep-fz16);
    --upaep-card-text-fw: var(--upaep-fw-regular);
    --upaep-card-text-margin: 0;
    --upaep-card-text-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-card-text-align: start;
    min-width: var(--upaep-card-minwidth);
    max-width: var(--upaep-card-maxwidth);
    min-height: var(--upaep-card-minheight);
    max-height: var(--upaep-card-maxheight);
    width: var(--upaep-card-width);
    height: var(--upaep-card-height);
    margin: var(--upaep-card-margin);
    padding: var(--upaep-card-padding);
    position: var(--upaep-card-position);
    border: var(--upaep-card-border-size) var(--upaep-card-border-style) var(--upaep-card-border-color);
    border-radius: var(--upaep-card-border-radius);
    box-shadow: var(--upaep-card-boxshadow);
    background: var(--upaep-card-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    word-wrap: break-word;

    & a:not(.upaep__btn) {
        text-decoration: none;
        width: var(--upaep-card-a-width);
        height: var(--upaep-card-a-height);
    }

    & .upaep__card-header {
        width: var(--upaep-card-header-width);
        height: var(--upaep-card-header-height);
        padding: var(--upaep-card-header-padding);
        background: var(--upaep-card-header-bg);
        border-bottom: var(--upaep-card-header-border-bottom-size) solid var(--upaep-card-header-border-bottom-color);
        font-size: var(--upaep-card-header-fz);
        font-weight: var(--upaep-card-header-fw);
        color: var(--upaep-card-header-color);
        text-align: var(--upaep-card-header-align);

        p {
            margin: 0;
        }
    }

    & .upaep__card-footer {
        width: var(--upaep-card-footer-width);
        height: var(--upaep-card-footer-height);
        padding: var(--upaep-card-footer-padding);
        background: var(--upaep-card-footer-bg);
        border-top: var(--upaep-card-footer-border-top-size) solid var(--upaep-card-footer-border-top-color);
    }

    & .upaep__card-content {
        flex: 1 1 auto;
        width: var(--upaep-card-content-width);
        height: var(--upaep-card-content-height);
        padding: var(--upaep-card-content-padding);
        margin: var(--upaep-card-content-margin);
        background: var(--upaep-card-content-bg);
        border-radius: var(--upaep-card-content-border-radius);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    & .upaep__card-img {
        width: var(--upaep-card-img-content-width);
        height: var(--upaep-card-img-content-height);
        border-radius: var(--upaep-card-img-content-border-radius);
        background: var(--upaep-card-img-content-bg);
        display: flex;
        justify-content: center;
        align-items: center;

        & img {
            width: var(--upaep-card-img-width);
            height: var(--upaep-card-img-height);
            object-fit: var(--upaep-card-img-objectfit);
            border-radius: var(--upaep-card-img-border-radius);
            padding: var(--upaep-card-img-padding);
        }
    }

    & .upaep__card-icon {
        width: var(--upaep-card-icon_content-width);
        height: var(--upaep-card-icon_content-height);
        border-radius: var(--upaep-card-img-content-border-radius);
        box-shadow: var(--upaep-box-shadow);
        background: var(--upaep-card-icon-bg);
        display: flex;
        justify-content: center;
        align-items: center;

        & img {
            width: var(--upaep-card-icon-width);
            height: var(--upaep-card-icon-height);
            object-fit: var(--upaep-card-icon-objectfit);
            border-radius: var(--upaep-card-icon-border-radius);
        }
    }


    & .upaep__card-texts {
        width: 100%;
    }

    & .upaep__card-button {
        width: 100%;
        height: 20%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    & .upaep__card-overlay {
        position: absolute;
        inset: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    & .upaep__card-title {
        width: var(--upaep-card-title-width);
        height: var(--upaep-card-title-height);
        font-size: var(--upaep-card-title-fz);
        font-weight: var(--upaep-card-title-fw);
        margin: var(--upaep-card-title-margin);
        padding: var(--upaep-card-title-padding);
        color: var(--upaep-card-title-color);
        text-align: var(--upaep-card-title-align);
    }

    & .upaep__card-subtitle {
        width: var(--upaep-card-subtitle-width);
        height: var(--upaep-card-subtitle-height);
        font-size: var(--upaep-card-subtitle-fz);
        font-weight: var(--upaep-card-subtitle-fw);
        margin: var(--upaep-card-subtitle-margin);
        padding: var(--upaep-card-subtitle-padding);
        color: var(--upaep-card-subtitle-color);
        text-align: var(--upaep-card-subtitle-align);
    }

    & .upaep__card-text {
        width: var(--upaep-card-text-width);
        height: var(--upaep-card-text-height);
        padding: var(--upaep-card-text-padding);
        font-size: var(--upaep-card-text-fz);
        font-weight: var(--upaep-card-text-fw);
        margin: var(--upaep-card-text-margin);
        padding: var(--upaep-card-text-padding);
        color: var(--upaep-card-text-color);
        text-align: var(--upaep-card-text-align);
    }
}

.upaep__card.__basic {
    --upaep-card-width: 300px;
    --upaep-card-height: 400px;
    --upaep-card-margin: 1rem;
    --upaep-card-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-card-border-radius: 15px;
    --upaep-card-content-width: 100%;
    --upaep-card-content-height: 30%;
    --upaep-card-img-content-width: 100%;
    --upaep-card-img-content-height: 50%;
    --upaep-card-boxshadow: 0px 0px 8px #0000007D;
    --upaep-card-title-fz: var(--upaep-fz18);
    --upaep-card-text-fz: var(--upaep-fz14);
}

.upaep__card.__img {
    --upaep-card-maxwidth: 300px;
    --upaep-card-height: 400px;
    --upaep-card-img-content-width: 100%;
    --upaep-card-img-content-height: 50%;
    --upaep-card-img-border-radius: 10px 10px 0 0;
    --upaep-card-content-height: 50%;
    --upaep-card-boxshadow: var(--upaep-box-shadow);
    --upaep-card-text-width: 100%;
    --upaep-card-text-height: auto;
    --upaep-card-text-fz: var(--upaep-fz20);
    --upaep-card-text-fw: var(--upaep-fw-bold);
    --upaep-card-text-color: var(--ui-text, var(--upaep-color-blue-primary));
    --upaep-card-text-align: center;
}

.upaep__card.__icons {
    --upaep-card-maxwidth: 250px;
    --upaep-card-minheight: 250px;
    --upaep-card-height: 250px;
    --upaep-card-margin: 1rem 0;
    --upaep-card-content-padding: 0;
    --upaep-card-img-content-height: 50%;
    --upaep-card-img-border-radius: 10px 10px 0 0;
    --upaep-card-boxshadow: var(--upaep-box-shadow);
    --upaep-card-icon_content-width: 80px;
    --upaep-card-icon_content-height: 80px;
    --upaep-card-img-content-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-card-icon-width: auto;
    --upaep-card-icon-height: 50px;
    --upaep-card-icon-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-card-img-content-border-radius: 50px;
    --upaep-card-icon-border-radius: 50px;
    --upaep-card-text-height: 50%;
    --upaep-card-text-padding: .5rem;
    --upaep-card-text-fz: var(--upaep-fz16);
    --upaep-card-text-fw: var(--upaep-fw-bold);
    --upaep-card-text-color: var(--ui-text, var(--upaep-color-blue-primary));
    --upaep-card-text-align: center;

    & .upaep__card-content {
        flex-direction: column;
    }

    & a {
        text-decoration: none;
        width: 100%;
        height: 100%;
    }

    & .upaep__card-text {
        display: flex;
        justify-content: center;
        align-items: center;

        p {
            margin: 0;
        }
    }

    & .__overlay {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.upaep__card.__slice {
    --upaep-card-width: 300px;
    --upaep-card-height: 300px;
    --upaep-card-margin: 10px 0;
    --upaep-card-padding: 0;
    --upaep-card-bg: none;
    --upaep-card-border-size: 1px;
    --upaep-card-border-radius: 10px;
    --upaep-card-content-width: 100%;
    --upaep-card-content-height: auto;
    --upaep-card-content-margin: 0;
    --upaep-card-content-padding: 1rem;
    --upaep-card-content-border-radius: 10px;
    --upaep-card-content-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-card-img-content-width: 100%;
    --upaep-card-img-content-height: 50%;
    --upaep-card-img-content-border-radius: 10px 10px 0 0;
    --upaep-card-img-border-radius: 10px 10px 0 0;
    --upaep-card-boxshadow: 1px 2px 8px rgb(60 60 60 / 40%);
    --upaep-card-title-fz: var(--upaep-fz18);
    --upaep-card-title-fw: var(--upaep-fw-bold);
    --upaep-card-title-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-card-title-align: center;
    --upaep-card-title-height: 40px;
    transition: height .5s;

    & .upaep__card-slice-content {
        width: 100%;
        height: 100%;
        overflow: hidden;
        cursor: pointer;
        margin: 0;
    }

    & .upaep__card-title {
        display: flex;
        align-items: center;
        justify-content: center;

        p {
            margin: 0;
        }
    }

    & a {
        text-decoration: none;
        color: var(--upaep-color-black);
        font-weight: var(--upaep-fw-bold);
    }

}

.upaep__card.__sliced {
    --upaep-card-width: 300px;
    --upaep-card-height: 300px;
    --upaep-card-margin: 0;
    --upaep-card-padding: 0;
    --upaep-card-bg: none;
    --upaep-card-border-size: 1px;
    --upaep-card-border-color: var(--upaep-color-background);
    --upaep-card-border-radius: 10px;
    --upaep-card-content-width: 100%;
    --upaep-card-content-height: 100%;
    --upaep-card-content-margin: 0;
    --upaep-card-content-padding: 0;
    --upaep-card-content-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-card-img-content-width: 100%;
    --upaep-card-img-content-height: 50%;
    --upaep-card-img-content-border-radius: 10px 10px 0 0;
    --upaep-card-img-border-radius: 10px 10px 0 0;
    --upaep-card-boxshadow: 1px 2px 8px rgb(60 60 60 / 40%);
    --upaep-card-title-fz: var(--upaep-fz18);
    --upaep-card-title-fw: var(--upaep-fw-bold);
    --upaep-card-title-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-card-title-align: center;
    --upaep-card-title-height: 100%;
    --upaep-card-text-height: 100%;
    transition: height .5s;

    & .upaep__card-content {
        width: 100%;
        height: 100%;
        flex-direction: column;
        overflow: hidden;
        border-radius: 10px;
        cursor: pointer;
    }


    & .upaep__card-title {
        display: flex;
        align-items: center;
        justify-content: center;

        p {
            margin: 0;
        }
    }

    &:hover .upaep__card-text {
        --upaep-card-text-padding: 1rem;
    }

    & a {
        text-decoration: none;
        color: var(--upaep-color-black);
        font-weight: var(--upaep-fw-bold);
    }
}

.upaep__card.__news {
    --upaep-card-minheight: 400px;
    --upaep-card-maxwidth: 400px;
    --upaep-card-width: 100%;
    --upaep-card-height: 100%;
    --upaep-card-border-size: 0;
    --upaep-card-border-radius: 0;
    --upaep-card-content-width: 100%;
    --upaep-card-content-height: 50%;
    --upaep-card-img-content-width: 100%;
    --upaep-card-img-content-height: 50%;
    --upaep-card-img-content-border-radius: 0;
    --upaep-card-img-width: 100%;
    --upaep-card-img-height: 250px;
    --upaep-card-img-objectfit: cover;
    --upaep-card-img-border-radius: 0;
    --upaep-card-boxshadow: none;
    --upaep-card-title-fz: var(--upaep-fz25);
    --upaep-card-title-fw: var(--upaep-fw-bold);
    --upaep-card-title-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-card-title-align: start;
    --upaep-card-text-fz: var(--upaep-fz14);
    --upaep-card-text-fw: var(--upaep-fw-bold);
    --upaep-card-text-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    justify-content: start;

    >a {
        width: 100%;
        height: 100%;
    }

    & .upaep__card-content {
        flex-direction: column;
        align-items: start;
        justify-content: start;

        .upaep__card-title {
            line-height: 31px;
        }

        >span {
            width: auto;
            margin: 1rem 0 0;
            font-size: var(--upaep-fz18);
            text-align: start;
            position: relative;
            font-style: italic;
            color: var(--ui-link, var(--upaep-color-blue-link));

            &::after {
                font-family: var(--upaep-ff-fontawesome);
                font-style: normal;
                content: "\f0da";
                position: absolute;
                inset: auto;
                margin: 0 0 0 5px;
            }

            &:hover {

                color: var(--ui-link-hover, var(--upaep-color-blue-link-hover));
            }
        }
    }

    @media(width <=480px) {
        --upaep-card-title-fz: var(--upaep-fz18);
    }
}

.upaep__card.__bicolor {
    --upaep-card-width: 275px;
    --upaep-card-height: 275px;
    --upaep-card-content-width: 100%;
    --upaep-card-content-height: 50%;
    --upaep-card-content-padding: 1rem;
    --upaep-card-content-margin: 0;
    --upaep-card-content-border-radius: 0 0 10px 10px;
    --upaep-card-content-bg: transparent linear-gradient(180deg, #FFFEFE 0%, #D3DAE8 100%);
    --upaep-card-img-content-bg: transparent linear-gradient(180deg, #BF171E 0%, #FF000A 100%);
    --upaep-card-img-content-width: 100%;
    --upaep-card-img-content-height: 50%;
    --upaep-card-img-content-border-radius: 10px 10px 0 0;
    --upaep-card-img-width: 50%;
    --upaep-card-img-padding: 1rem;
    --upaep-card-img-objectfit: contain;
    --upaep-card-boxshadow: ;
    --upaep-card-title-fz: var(--upaep-fz20);
    --upaep-card-title-fw: var(--upaep-fw-bold);
    --upaep-card-title-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-card-title-align: center;
}

.upaep__card.__contacta {
    --upaep-card-bg: var(--upaep-color-black);
    --upaep-card-margin: 0;
    --upaep-card-border-size: none;
    --upaep-card-border-color: var(--upaep-color-background);
    --upaep-card-header-bg: var(--ui-accent, var(--upaep-color-red));
    --upaep-card-header-border-bottom-color: var(--upaep-gradient-white);
    --upaep-card-header-color: var(--upaep-color-white);
}

.upaep__card.__no-results,
.upaep__card.__no-resultados,
.upaep__card.__noresultados {
    --upaep-card-height: 300px;
    --upaep-card-margin: 2rem 0;
    --upaep-card-padding: 2rem;
    --upaep-card-bg: none;
    --upaep-card-border-radius: 15px;
    --upaep-card-content-width: 100%;
    --upaep-card-content-height: auto;
    --upaep-card-img-content-width: 100%;
    --upaep-card-img-content-height: auto;
    --upaep-card-img-width: 200px;
    --upaep-card-img-height: 200px;
    --upaep-card-boxshadow: none;
    --upaep-card-title-fz: var(--upaep-fz18);
    --upaep-card-title-color: var(--upaep-color-white);
    --upaep-card-text-fz: var(--upaep-fz14);

    &:not(.is-active) {
        display: none;
    }
}

.upaep__card.__adn {
    --upaep-card-height: 400px;
    --upaep-card-margin: 0;
    --upaep-card-border-radius: 0;
    --upaep-card-bg: url('../img/Fondo_ADN_1850.webp') no-repeat center center;
    background-size: cover;
}

.upaep__card.__program {
    --upaep-card-width: 100%;
    --upaep-card-height: auto;
    --upaep-card-margin: 0;
    --upaep-card-border-size: 0;
    --upaep-card-border-radius: 10px;
    --upaep-card-boxshadow: none;
    --upaep-card-title-fz: var(--upaep-fz24);
    --upaep-card-title-fw: var(--upaep-fw-bold);
    --upaep-card-title-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaepr-card-header-mark-width: 65px;
    --upaepr-card-header-mark-height: 20px;
    --upaepr-card-header-mark-margin: 5px;
    --upaepr-card-header-mark-bg: var(--ui-accent, var(--upaep-color-red));

    & .upaep__card-header {
        display: flex;
        align-items: center;
    }

    & .upaep__card-header .upaep__card-title {
        margin: 0;
    }

    & .upaep__card-header::before {
        width: var(--upaepr-card-header-mark-width);
        height: var(--upaepr-card-header-mark-height);
        margin: var(--upaepr-card-header-mark-margin);
        background: var(--upaepr-card-header-mark-bg);
        content: '';
        display: inline-flex;
    }
}

.upaep__card.__program.__ingenierias {
    --upaepr-card-header-mark-bg: var(--upaep-color-ingenierias);
}

.upaep__card.__program.__economico-administrativas {
    --upaepr-card-header-mark-bg: var(--upaep-color-economico-administrativas);
}

.upaep__card.__program.__economico-negocios {
    --upaepr-card-header-mark-bg: var(--upaep-color-negocios);
}

.upaep__card.__program.__artes-humanidades {
    --upaepr-card-header-mark-bg: var(--upaep-color-artes-humanidades);
}

.upaep__card.__program.__ciencias-humanas-sociales,
.upaep__card.__program.__humana-sociales {
    --upaepr-card-header-mark-bg: var(--upaep-color-ciecnias-humanas-sociales);
}

.upaep__card.__program.__ciencias-creativas {
    --upaepr-card-header-mark-bg: var(--upaep-color-ciecnias-creativas);
}

.upaep__card.__program.__ciencias-sociales {
    --upaepr-card-header-mark-bg: var(--upaep-color-ciencias-sociales);
}

.upaep__card.__program.__ciencias-biologicas {
    --upaepr-card-header-mark-bg: var(--upaep-color-ciencias-biologicas);
}

.upaep__card.__program.__ciencias-vida-salud {
    --upaepr-card-header-mark-bg: var(--upaep-color-ciencias-vida-salud);
}

.upaep__card.__program.__ciencias-salud {
    --upaepr-card-header-mark-bg: var(--upaep-color-ciencias-salud);
}

.upaep__card.__program.__ciencias-medicas {
    --upaepr-card-header-mark-bg: var(--upaep-color-ciencias-medicas);
}

.upaep__card.__program.__lenguas-cultura {
    --upaepr-card-header-mark-bg: var(--upaep-color-lenguas-cultura);
}

.upaep__card.__program.__escuela-negocios {
    --upaepr-card-header-mark-bg: var(--upaep-color-negocios);
}

.upaep__card.__program.__general {
    --upaepr-card-header-mark-bg: var(--upaep-color-ciencias-salud);
}

.upaep__card.__claustro {
    --upaep-card-width: 250px;
    --upaep-card-height: 400px;
    --upaep-card-img-content-width: 100%;
    --upaep-card-img-content-height: 60%;
    --upaep-card-border-radius: 10px;
    --upaep-card-boxshadow: none;
    --upaep-card-text-color: var(--upaep-color-white);
    --upaep-card-text-align: center;
    --upaep-card-content-width: 100%;
    --upaep-card-content-height: 40%;
    --upaep-card-content-bg: var(--ui-accent, var(--upaep-color-red));
    --upaep-card-content-border-radius: 0 0 10px 10px;

    & .upaep__card-content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        cursor: pointer;

        & .upaep__card-top {
            width: 100%;
            height: 40%;
            display: flex;
            justify-content: center;
            align-items: center;

            & .upaep__card-text {
                width: 100%;
                height: auto;
                color: var(--upaep-color-white);
                text-align: center;
                font-size: var(--upaep-fz14);
                font-weight: bold;
            }
        }

        & .upaep__card-center {
            width: 100%;
            height: 35%;
            display: flex;
            justify-content: center;
            align-items: center;

            & .upaep__card-text {
                width: 100%;
                height: auto;
                color: var(--upaep-color-white);
                text-align: center;
                font-size: var(--upaep-fz14);
                font-weight: var(--upaep-fw-regular);
            }
        }

        & .upaep__card-bottom {
            width: 100%;
            height: 25%;
            display: flex;
            justify-content: center;
            align-items: center;

            & img {
                width: 85px;
                height: 85%;
            }
        }
    }
}

.upaep__card.__claustro-interncional {
    --upaep-card-width: 250px;
    --upaep-card-height: 450px;
    --upaep-card-margin: 1rem;
    --upaep-card-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-card-border-radius: 10px;
    --upaep-card-content-width: 100%;
    --upaep-card-content-height: 50%;
    --upaep-card-content-bg: var(--ui-surface-3, var(--upaep-color-tenue-gray));
    --upaep-card-footer-bg: var(--ui-surface-3, var(--upaep-color-tenue-gray));
    --upaep-card-img-content-width: 100%;
    --upaep-card-img-content-height: 50%;
    --upaep-card-img-width: 175px;
    --upaep-card-img-height: 175px;
    --upaep-card-img-border-radius: 0;
    --upaep-card-boxshadow: 0px 0px 8px #0000007D;
    --upaep-card-title-fz: var(--upaep-fz18);
    --upaep-card-title-align: center;
    --upaep-card-text-fz: var(--upaep-fz14);
    --upaep-card-text-align: center;

    &:not(.__img-no-border) {
        --upaep-card-content-bg: var(--ui-surface, var(--upaep-color-white));
        --upaep-card-footer-bg: var(--ui-surface, var(--upaep-color-white));
        --upaep-card-img-border-radius: 50%;

        .upaep__card-img {
            align-items: center;

            img {
                box-shadow: var(--upaep-box-shadow);
            }
        }
    }

    .upaep__card-img {
        align-items: end;
    }

    .upaep__card-content {
        flex-direction: column;
        justify-content: start;
    }

    .upaep__card-text {
        &.__campus {
            --upaep-card-text-color: #184FB7;
            --upaep-card-text-fz: var(--upaep-fz12);
            letter-spacing: 3.36px;
        }

        &.__pais {
            --upaep-card-text-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
            --upaep-card-text-fz: var(--upaep-fz12);
            --upaep-card-text-fw: var(--upaep-fw-regular);
            letter-spacing: 3.36px;
        }

        &:has(.__shorthand),
        &:has(.__name) {
            --upaep-card-text-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
            --upaep-card-text-fz: var(--upaep-fz18);
            --upaep-card-text-fw: var(--upaep-fw-bold);
        }
    }

    .upaep__card-footer {
        border-radius: 0 0 10px 10px;
    }

    .upaep__line {
        --upaep-line-height: 1px;
        --upaep-line-bg: none;
        --upaep-line-border-style: dashed;
        --upaep-line-border-color: #FFA800;
        margin: .5rem 0;
    }

    .upaep__card-button {
        height: auto;

        .upaep__btn {
            --upaep-btn-height: 32px;
        }
    }

    .upaep__btn.__more {
        padding: .35rem 1rem;
        margin: .5rem auto;
    }

    .__icon-flag {
        width: 30px;
        height: auto;
        object-fit: cover;
        margin: 0 auto .5rem;
        display: block;
        box-shadow: var(--upaep-box-shadow);
    }
}

.upaep__card.__plan-estudios {
    --upaep-card-width: 90%;
    --upaep-card-height: auto;
    --upaep-card-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-card-border-radius: 10px;
    --upaep-card-boxshadow: var(--upaep-box-shadow);
    --upaep-card-text-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-card-text-align: center;
    --upaep-card-content-width: 100%;
    --upaep-card-content-height: 40%;
    --upaep-card-content-padding: 1rem 2rem;
    --upaep-card-content-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-card-content-border-radius: 10px;
    --upaep-card-title-fz: var(--upaep-fz18);

    & .upaep__card-title {
        margin: 0;
    }

    & .upaep__card-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 5px;

        & .upaep__card-texts {
            width: 100%;
        }

        & .upaep__card-unidad {
            width: 60px;

            & p {
                width: 50px;
                height: 50px;
                border-radius: 50px;
                background: var(--ui-counter, var(--upaep-color-blue-primary));
                display: flex;
                justify-content: center;
                align-items: center;
                color: var(--ui-on-counter, var(--upaep-color-white));
                margin: 0;
            }
        }
    }
}

.upaep__cards.__chess {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

.upaep__card.__chess {
    --upaep-card-chess-bg: ;
    --upaep-card-content-width: 50%;
    --upaep-card-content-height: 50dvh;
    --upaep-card-content-padding: 1.5rem;
    --upaep-card-img-border-radius: 0;
    --upaep-card-img-content-width: 50%;
    --upaep-card-img-content-height: 50dvh;
    --upaep-card-icon-width: 65px;
    --upaep-card-icon-height: 65px;
    --upaep-card-icon-objectfit: contain;
    --upaep-card-icon_content-height: auto;
    --upaep-card-title-fz: var(--upaep-fz24);
    --upaep-card-title-color: var(--upaep-color-white);
    --upaep-card-title-align: center;
    --upaep-card-text-fz: var(--upaep-fz16);
    --upaep-card-text-color: var(--upaep-color-white);
    display: flex;
    flex: 1;
    margin: 0;

    &.__r {
        flex-direction: row-reverse;
        width: 100%;
    }

    &.__l {
        flex-direction: row;
        width: 100%;
    }

    .upaep__card-content {
        background-attachment: fixed;
        background-size: cover;
        background-position: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .upaep__card-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: none;
    }

    .upaep__card-texts {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .upaep__card-text {
        word-wrap: break-word;
        text-wrap: balance;
        text-align: center;
    }
}

.upaep__card.__payment {
    --upaep-card-width: 400px;
    --upaep-card-height: 300px;
    --upaep-card-margin: 0;
    --upaep-card-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-card-border-radius: 15px;
    --upaep-card-content-width: 100%;
    --upaep-card-content-height: 30%;
    --upaep-card-img-content-width: 100%;
    --upaep-card-img-content-height: 50%;
    --upaep-card-boxshadow: 0px 0px 8px #0000007D;
    --upaep-card-title-fz: var(--upaep-fz30);
    --upaep-card-title-color: var(--ui-accent, var(--upaep-color-red));
    --upaep-card-text-fz: var(--upaep-fz20);

    .upaep__card-content {
        flex-direction: column;
    }

    .upaep__card-titles {
        width: 100%;
        height: 30%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .upaep__card-total {
        width: 100%;
        height: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .upaep__card-button {
        width: 100%;
        height: 20%;

        .upaep__btn {
            --upaep-btn-color: var(--ui-on-primary, var(--upaep-color-white));
            --upaep-btn-bg: var(--ui-primary, var(--upaep-color-primary));
            --upaep-btn-border-color: var(--ui-primary, var(--upaep-color-primary));
            --upaep-btn-hover-color: var(--ui-on-primary, var(--upaep-color-white));
            --upaep-btn-hover-bg: var(--ui-primary-hover, var(--upaep-color-primary-hover));
            --upaep-btn-hover-border-color: var(--ui-primary-hover, var(--upaep-color-primary-hover));
            --upaep-btn-disabled-color: var(--ui-on-primary, var(--upaep-color-white));
            --upaep-btn-disabled-bg: var(--ui-primary, var(--upaep-color-primary));
            --upaep-btn-disabled-border-color: var(--ui-primary, var(--upaep-color-primary));
            --upaep-btn-margin: 1rem 0;
        }
    }

    .upaep__card-text {
        display: flex;
        align-items: center;

        .__total {
            font-size: var(--upaep-fz50);
        }

        .__point {
            font-size: var(--upaep-fz50);
        }

        .__decimal {
            font-size: var(--upaep-fz0);
        }
    }
}

.upaep__card.__trinity {
    --upaep-card-width: 100%;
    --upaep-card-height: 150px;
    --upaep-card-margin: 1rem 0;
    --upaep-card-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-card-border-radius: 15px;
    --upaep-card-content-width: 100%;
    --upaep-card-content-height: 30%;
    --upaep-card-img-content-width: 50%;
    --upaep-card-img-content-height: 100%;
    --upaep-card-img-content-bg: var(--upaep-color-blue-primary);
    --upaep-card-img-content-border-radius: 10px 0 0 10px;
    --upaep-card-img-width: 50%;
    --upaep-card-img-height: 50%;
    --upaep-card-boxshadow: 0px 0px 8px #0000007D;
    --upaep-card-title-fz: var(--upaep-fz22);
    --upaep-card-title-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-card-text-fz: var(--upaep-fz14);
    transition: width .5s;

    a {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
    }
}

/*? ------ Inputfields ------ */

.upaep__input {
    --upaep-input-width: 100%;
    --upaep-input-height: auto;
    --upaep-input-padding: .35rem .75rem;
    --upaep-input-margin: 0 0 .5rem 0;
    --upaep-input-fz: var(--upaep-fz16);
    --upaep-input-fw: var(--upaep-fw-regular);
    --upaep-input-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-input-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-input-opacity: 1;
    --upaep-input-border-size: 2px;
    /*? Contorno del CAMPO, no un divisor: --ui-border en oscuro (#3a3a40) da 1.52:1
       contra la superficie y no se ve donde empieza el control (WCAG 1.4.11 pide 3:1).
       --ui-text-muted vale casi el mismo gris en claro (#909496 vs #8E9396) y 6.1:1 en oscuro. */
    --upaep-input-border-color: var(--ui-text-muted, var(--upaep-color-border-grey));
    --upaep-input-border-radius: 10px;
    --upaep-input-boxshadow: ;
    --upaep-input-appearance: none;
    --upaep-input-placeholder-fz: var(--upaep-fz16);
    --upaep-input-placeholder-fw: var(--upaep-fw-regular);
    --upaep-input-placeholder-color: var(--ui-text-muted, #909496);
    --upaep-input-placeholder-opacity: 1;
    --upaep-input-focus-color: ;
    --upaep-input-focus-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-input-focus-border-size: 2px;
    --upaep-input-focus-border-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-input-focus-outline: 0;
    --upaep-input-focus-boxshadow: 0 0 0 0.25rem var(--ui-control-ring, rgba(82, 86, 90, 0.25));
    --upaep-input-disabled-bg: var(--ui-surface-3, var(--upaep-color-tenue-gray));
    --upaep-input-disabled-opacity: .5;
    --upaep-input-readonly-bg: var(--ui-surface-3, var(--upaep-color-tenue-gray));
    --upaep-input-readonly-opacity: 1;
    --upaep-input-hover-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-input-hover-border-size: 2px;
    --upaep-input-hover-border-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-input-hover-fz: var(--upaep-fz16);
    --upaep-input-hover-fw: var(--upaep-fw-regular);
    --upaep-input-hover-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-input-border-bottom-size: 2px;
    --upaep-input-border-bottom-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    width: var(--upaep-input-width);
    height: var(--upaep-input-height);
    padding: var(--upaep-input-padding);
    margin: var(--upaep-input-margin);
    font-size: var(--upaep-input-fz);
    font-weight: var(--upaep-input-fw);
    color: var(--upaep-input-color);
    background: var(--upaep-input-bg);
    box-shadow: var(--upaep-input-boxshadow);
    border: var(--upaep-input-border-size) solid var(--upaep-input-border-color);
    border-radius: var(--upaep-input-border-radius);
    opacity: var(--upaep-input-opacity);
    display: block;
    line-height: 1.5;
    appearance: var(--upaep-input-appearance);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

    &:disabled {
        background: var(--upaep-input-disabled-bg);
        opacity: var(--upaep-input-disabled-opacity);
    }

    &[readonly] {
        background: var(--upaep-input-readonly-bg);
        opacity: var(--upaep-input-readonly-opacity);
        border: 0;
    }

    &::placeholder {
        color: var(--upaep-input-placeholder-color);
        font-size: var(--upaep-input-placeholder-fz);
        font-weight: var(--upaep-input-placeholder-fw);
        opacity: var(--upaep-input-placeholder-opacity);
    }

    &:hover:not(:disabled):not([readonly]) {
        background: var(--upaep-input-hover-bg);
        border: var(--upaep-input-hover-border-size) solid var(--upaep-input-hover-border-color);
        font-size: var(--upaep-input-hover-fz);
        font-weight: var(--upaep-input-hover-fw);
        color: var(--upaep-input-hover-color);
    }

    &:focus:hover:not(:disabled):not([readonly]),
    &:focus:not(:disabled):not([readonly]) {
        background: var(--upaep-input-focus-bg);
        border: var(--upaep-input-focus-border-size) solid var(--upaep-input-focus-border-color);
        outline: var(--upaep-input-focus-outline);
        box-shadow: var(--upaep-input-focus-boxshadow);
        color: var(--upaep-input-focus-color);
    }
}

.upaep__input.__rounded:not([type="color"]):not([type="range"]):not(textarea),
.upaep__input-group:not(.__float-icon):has(span~.upaep__input.__rounded:not([type="color"]):not([type="range"]):not(textarea)) .upaep__input {
    --upaep-input-border-radius: 50px;
    --upaep-input-padding: .35rem 1rem;
}

.upaep__input-group:is(.__float-icon) .upaep__input.__rounded:not([type="color"]):not([type="range"]):not(textarea) {
    --upaep-input-border-radius: 50px;
}

.upaep__input-group .upaep__selectpicker {
    --upaep-selectpicker-margin: 0;
}

.upaep__input[type=file] {
    overflow: hidden;
}

.upaep__input[type=file]:hover:not(:disabled):not([readonly]) {
    --upaep-input-hover-bg: var(--ui-surface, var(--upaep-color-white));
}

.upaep__input[type=file]:not(:disabled):not([readonly]) {
    cursor: pointer;
}

.upaep__input::-webkit-file-upload-button {
    padding: 0.375rem 0.75rem;
    margin: -0.375rem -0.75rem;
    margin-inline-end: 0.75rem;
    color: var(--ui-text-strong, var(--upaep-color-black));
    background: var(--ui-surface-3, var(--upaep-color-tenue-gray));
    pointer-events: none;
    border: 0;
    border-inline-end-width: var(--bs-border-width);
    border-radius: 0;
    transition: color 0.15s ease-in-out, background 0.15s ease-in-out, border 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.upaep__input[type="color"] {
    --upaep-input-width: 3rem;
    --upaep-input-height: 2.5rem;
    --upaep-input-padding: .35rem;
}

.upaep__input[type="color"]:not(:disabled):not([readonly]) {
    cursor: pointer;
}

.upaep__input[type="range"] {
    --upaep-input-width: 100%;
    --upaep-input-height: 1.5rem;
    --upaep-input-padding: 0;
    --upaep-input-appearance: auto;
}

.upaep__input.__underline {
    --upaep-input-border-size: 0;
    --upaep-input-border-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-input-border-radius: 0;
    --upaep-input-focus-border-size: 0;
    --upaep-input-focus-boxshadow: 0px 3px 0px 0px var(--upaep-color-border-grey);
    --upaep-input-hover-border-size: 0;
    border-bottom: var(--upaep-input-border-bottom-size) solid var(--upaep-input-border-bottom-color);

    /*? El shorthand `border` de :hover/:focus del bloque base reinicia el borde
       inferior; aquí se vuelve a pintar, y solo para esta variante. */
    &:hover:not(:disabled):not([readonly]),
    &:focus:hover:not(:disabled):not([readonly]),
    &:focus:not(:disabled):not([readonly]) {
        border-bottom: var(--upaep-input-border-bottom-size) solid var(--upaep-input-border-bottom-color);
    }
}

.was-validated .upaep__input:valid:not(.upaep__input-tokenfield):not(.upaep__input.__selectpicker):not(.upaep__autocomplete-input),
.__validated .upaep__input:valid:not(.upaep__input-tokenfield):not(.upaep__input.__selectpicker):not(.upaep__autocomplete-input),
.upaep__input.is-success,
.upaep__input.is-valid {
    --upaep-input-border-color: var(--ui-success, var(--upaep-color-success));
    --upaep-input-boxshadow: ;
    --upaep-input-focus-border-color: var(--ui-success, var(--upaep-color-success));
    --upaep-input-focus-boxshadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.25);
    --upaep-input-hover-border-color: var(--ui-success-hover, var(--upaep-color-success-hover));
    --upaep-input-border-bottom-color: var(--ui-success, var(--upaep-color-success));
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjZThlYWVkIj48cGF0aCBkPSJtNDI0LTI5NiAyODItMjgyLTU2LTU2LTIyNiAyMjYtMTE0LTExNC01NiA1NiAxNzAgMTcwWm01NiAyMTZxLTgzIDAtMTU2LTMxLjVUMTk3LTE5N3EtNTQtNTQtODUuNS0xMjdUODAtNDgwcTAtODMgMzEuNS0xNTZUMTk3LTc2M3E1NC01NCAxMjctODUuNVQ0ODAtODgwcTgzIDAgMTU2IDMxLjVUNzYzLTc2M3E1NCA1NCA4NS41IDEyN1Q4ODAtNDgwcTAgODMtMzEuNSAxNTZUNzYzLTE5N3EtNTQgNTQtMTI3IDg1LjVUNDgwLTgwWm0wLTgwcTEzNCAwIDIyNy05M3Q5My0yMjdxMC0xMzQtOTMtMjI3dC0yMjctOTNxLTEzNCAwLTIyNyA5M3QtOTMgMjI3cTAgMTM0IDkzIDIyN3QyMjcgOTNabTAtMzIwWiIgZmlsbD0iIzI4YTc0NSIvPjwvc3ZnPg==");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);

    &:hover:not(:disabled):not([readonly]),
    &:focus:hover:not(:disabled):not([readonly]),
    &:focus:not(:disabled):not([readonly]) {
        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjZThlYWVkIj48cGF0aCBkPSJtNDI0LTI5NiAyODItMjgyLTU2LTU2LTIyNiAyMjYtMTE0LTExNC01NiA1NiAxNzAgMTcwWm01NiAyMTZxLTgzIDAtMTU2LTMxLjVUMTk3LTE5N3EtNTQtNTQtODUuNS0xMjdUODAtNDgwcTAtODMgMzEuNS0xNTZUMTk3LTc2M3E1NC01NCAxMjctODUuNVQ0ODAtODgwcTgzIDAgMTU2IDMxLjVUNzYzLTc2M3E1NCA1NCA4NS41IDEyN1Q4ODAtNDgwcTAgODMtMzEuNSAxNTZUNzYzLTE5N3EtNTQgNTQtMTI3IDg1LjVUNDgwLTgwWm0wLTgwcTEzNCAwIDIyNy05M3Q5My0yMjdxMC0xMzQtOTMtMjI3dC0yMjctOTNxLTEzNCAwLTIyNyA5M3QtOTMgMjI3cTAgMTM0IDkzIDIyN3QyMjcgOTNabTAtMzIwWiIgZmlsbD0iIzI4YTc0NSIvPjwvc3ZnPg==");
        background-repeat: no-repeat;
        background-position: right calc(0.375em + 0.1875rem) center;
        background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    }

    &:not([type="color"]):not([type="range"]):not(textarea):not(.__icon) {
        --upaep-input-padding: .35rem 1.8rem .35rem 1rem;
    }

    &~.upaep__label,
    &~span .upaep__label {
        --upaep-label-color: var(--upaep-color-success);
    }
}

.was-validated .upaep__input:is(.__underline):valid,
.__validated .upaep__input:is(.__underline):valid,
.upaep__input:is(.__underline).is-success,
.upaep__input:is(.__underline).is-valid {
    --upaep-input-focus-boxshadow: 0 3px 0 0 rgba(40, 167, 69, 0.25);
}

.upaep__input.is-warning {
    --upaep-input-border-color: var(--ui-warning, var(--upaep-color-warning));
    --upaep-input-boxshadow: ;
    --upaep-input-focus-border-color: var(--ui-warning, var(--upaep-color-warning));
    --upaep-input-focus-boxshadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
    --upaep-input-hover-border-color: var(--ui-warning-hover, var(--upaep-color-warning-hover));
    --upaep-input-border-bottom-color: var(--ui-warning, var(--upaep-color-warning));

    &~.upaep__label,
    &~span .upaep__label {
        --upaep-label-color: var(--upaep-color-warning);
    }
}

.upaep__input:is(.__underline).is-warning {
    --upaep-input-focus-boxshadow: 0 3px 0 0 rgba(255, 193, 7, 0.25);
}

.was-validated .upaep__input:invalid:not(.upaep__input-tokenfield):not(.upaep__input.__selectpicker):not(.upaep__autocomplete-input),
.__validated .upaep__input:invalid:not(.upaep__input-tokenfield):not(.upaep__input.__selectpicker):not(.upaep__autocomplete-input),
.upaep__input.is-error,
.upaep__input.is-invalid {
    --upaep-input-border-color: var(--ui-danger, var(--upaep-color-error));
    --upaep-input-boxshadow: ;
    --upaep-input-focus-border-color: var(--ui-danger, var(--upaep-color-error));
    --upaep-input-focus-boxshadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
    --upaep-input-hover-border-color: var(--ui-danger-hover, var(--upaep-color-error-hover));
    --upaep-input-border-bottom-color: var(--ui-danger, var(--upaep-color-error));
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjZThlYWVkIj48cGF0aCBkPSJNNDgwLTI4MHExNyAwIDI4LjUtMTEuNVQ1MjAtMzIwcTAtMTctMTEuNS0yOC41VDQ4MC0zNjBxLTE3IDAtMjguNSAxMS41VDQ0MC0zMjBxMCAxNyAxMS41IDI4LjVUNDgwLTI4MFptLTQwLTE2MGg4MHYtMjQwaC04MHYyNDBabTQwIDM2MHEtODMgMC0xNTYtMzEuNVQxOTctMTk3cS01NC01NC04NS41LTEyN1Q4MC00ODBxMC04MyAzMS41LTE1NlQxOTctNzYzcTU0LTU0IDEyNy04NS41VDQ4MC04ODBxODMgMCAxNTYgMzEuNVQ3NjMtNzYzcTU0IDU0IDg1LjUgMTI3VDg4MC00ODBxMCA4My0zMS41IDE1NlQ3NjMtMTk3cS01NCA1NC0xMjcgODUuNVQ0ODAtODBabTAtODBxMTM0IDAgMjI3LTkzdDkzLTIyN3EwLTEzNC05My0yMjd0LTIyNy05M3EtMTM0IDAtMjI3IDkzdC05MyAyMjdxMCAxMzQgOTMgMjI3dDIyNyA5M1ptMC0zMjBaIiBmaWxsPSIjZGMzNTQ1Ii8+PC9zdmc+");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);

    &:hover:not(:disabled):not([readonly]),
    &:focus:hover:not(:disabled):not([readonly]),
    &:focus:not(:disabled):not([readonly]) {
        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjZThlYWVkIj48cGF0aCBkPSJNNDgwLTI4MHExNyAwIDI4LjUtMTEuNVQ1MjAtMzIwcTAtMTctMTEuNS0yOC41VDQ4MC0zNjBxLTE3IDAtMjguNSAxMS41VDQ0MC0zMjBxMCAxNyAxMS41IDI4LjVUNDgwLTI4MFptLTQwLTE2MGg4MHYtMjQwaC04MHYyNDBabTQwIDM2MHEtODMgMC0xNTYtMzEuNVQxOTctMTk3cS01NC01NC04NS41LTEyN1Q4MC00ODBxMC04MyAzMS41LTE1NlQxOTctNzYzcTU0LTU0IDEyNy04NS41VDQ4MC04ODBxODMgMCAxNTYgMzEuNVQ3NjMtNzYzcTU0IDU0IDg1LjUgMTI3VDg4MC00ODBxMCA4My0zMS41IDE1NlQ3NjMtMTk3cS01NCA1NC0xMjcgODUuNVQ0ODAtODBabTAtODBxMTM0IDAgMjI3LTkzdDkzLTIyN3EwLTEzNC05My0yMjd0LTIyNy05M3EtMTM0IDAtMjI3IDkzdC05MyAyMjdxMCAxMzQgOTMgMjI3dDIyNyA5M1ptMC0zMjBaIiBmaWxsPSIjZGMzNTQ1Ii8+PC9zdmc+");
        background-repeat: no-repeat;
        background-position: right calc(0.375em + 0.1875rem) center;
        background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    }

    &:not([type="color"]):not([type="range"]):not(textarea):not(.__icon) {
        --upaep-input-padding: .35rem 1.8rem .35rem 1rem;
    }

    &~.upaep__label,
    &~span .upaep__label {
        --upaep-label-color: var(--upaep-color-error);
    }
}

.was-validated .upaep__input:is(.__underline):invalid,
.__validated .upaep__input:is(.__underline):invalid,
.upaep__input:is(.__underline).is-error,
.upaep__input:is(.__underline).is-invalid {
    --upaep-input-focus-boxshadow: 0 3px 0 0 rgba(220, 53, 69, 0.25);
}

.upaep__input.__black {
    --upaep-input-color: var(--upaep-color-white);
    --upaep-input-bg: var(--upaep-color-black);
    --upaep-input-border-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-input-boxshadow: ;
    --upaep-input-placeholder-color: var(--upaep-color-white);
    --upaep-input-focus-color: var(--upaep-color-white);
    --upaep-input-focus-bg: var(--upaep-color-black);
    --upaep-input-focus-border-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-input-focus-boxshadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25);
    --upaep-input-disabled-bg: #292929;
    --upaep-input-readonly-bg: #292929;
    --upaep-input-hover-bg: #292929;
    --upaep-input-hover-border-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-input-hover-color: var(--upaep-color-white);
}

.upaep__input[type=file].__black:hover:not(:disabled):not([readonly]) {
    --upaep-input-hover-bg: var(--upaep-color-black);
}

.upaep__input.__black::-webkit-calendar-picker-indicator,
.upaep__input.__black::-webkit-datetime-edit-fields-wrapper,
.upaep__input.__black::-webkit-datetime-edit-text,
.upaep__input.__black::-webkit-datetime-edit-minute,
.upaep__input.__black::-webkit-datetime-edit-hour-field,
.upaep__input.__black::-webkit-datetime-edit-day-field,
.upaep__input.__black::-webkit-datetime-edit-month-field,
.upaep__input.__black::-webkit-datetime-edit-year-field,
.upaep__input.__dark::-webkit-calendar-picker-indicator,
.upaep__input.__dark::-webkit-datetime-edit-fields-wrapper,
.upaep__input.__dark::-webkit-datetime-edit-text,
.upaep__input.__dark::-webkit-datetime-edit-minute,
.upaep__input.__dark::-webkit-datetime-edit-hour-field,
.upaep__input.__dark::-webkit-datetime-edit-day-field,
.upaep__input.__dark::-webkit-datetime-edit-month-field,
.upaep__input.__dark::-webkit-datetime-edit-year-field {
    filter: invert(1);
}

.upaep__input.__dark {
    --upaep-input-color: var(--upaep-color-white);
    --upaep-input-bg: var(--colordark);
    --upaep-input-border-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-input-boxshadow: ;
    --upaep-input-placeholder-color: var(--upaep-color-white);
    --upaep-input-focus-color: var(--upaep-color-white);
    --upaep-input-focus-bg: var(--colordark);
    --upaep-input-focus-border-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-input-focus-boxshadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25);
    --upaep-input-disabled-bg: #414448;
    --upaep-input-readonly-bg: #414448;
    --upaep-input-hover-bg: #414448;
    --upaep-input-hover-border-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-input-hover-color: var(--upaep-color-white);
}

.upaep__input[type=file].__dark:hover:not(:disabled):not([readonly]) {
    --upaep-input-hover-bg: var(--colordark);
}

.upaep__input.__underline.__black,
.upaep__input.__underline.__dark {
    --upaep-input-border-bottom-color: var(--upaep-color-white);
}

.upaep__select {
    --upaep-select-width: 100%;
    --upaep-select-height: auto;
    --upaep-select-padding: .35rem .75rem;
    --upaep-select-margin: 0 0 .5rem 0;
    --upaep-select-fz: var(--upaep-fz16);
    --upaep-select-fw: var(--upaep-fw-regular);
    --upaep-select-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-select-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-select-opacity: 1;
    --upaep-select-border-size: 2px;
    /*? Contorno del CAMPO, no un divisor: --ui-border en oscuro (#3a3a40) da 1.52:1
       contra la superficie y no se ve donde empieza el control (WCAG 1.4.11 pide 3:1).
       --ui-text-muted vale casi el mismo gris en claro (#909496 vs #8E9396) y 6.1:1 en oscuro. */
    --upaep-select-border-color: var(--ui-text-muted, var(--upaep-color-border-grey));
    --upaep-select-border-radius: 10px;
    --upaep-select-boxshadow: ;
    --upaep-select-appearance: none;
    /*? El chevron son DOS barras en degradado (no una imagen): una imagen de fondo lleva su color dentro del SVG
        y no sigue ni el tema ni la marca. Así toma --upaep-select-icon-color, que por defecto es el color del texto del
        campo (currentColor), y cambia solo con el tema, la marca y las variantes __black/__dark. */
    --upaep-select-icon-color: currentColor;
    --upaep-select-bg-img: linear-gradient(to top right, transparent calc(50% - 1.1px), var(--upaep-select-icon-color) calc(50% - .6px), var(--upaep-select-icon-color) calc(50% + .6px), transparent calc(50% + 1.1px)), linear-gradient(to top left, transparent calc(50% - 1.1px), var(--upaep-select-icon-color) calc(50% - .6px), var(--upaep-select-icon-color) calc(50% + .6px), transparent calc(50% + 1.1px));
    --upaep-select-bg-pos: right 24px center, right 17px center;
    --upaep-select-bg-size: 7px 7px, 7px 7px;
    --upaep-select-bg-icon: none;
    --upaep-select-bg-disabled: var(--ui-surface-2, var(--upaep-color-background));
    --upaep-select-disabled-opacity: .5;
    --upaep-select-focus-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-select-focus-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-select-focus-border-size: 2px;
    --upaep-select-focus-border-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-select-focus-outline: 0;
    --upaep-select-focus-boxshadow: 0 0 0 0.25rem rgba(106, 130, 153, 0.25);
    width: var(--upaep-select-width);
    height: var(--upaep-select-height);
    padding: var(--upaep-select-padding);
    margin: var(--upaep-select-margin);
    font-size: var(--upaep-select-fz);
    font-weight: var(--upaep-select-fw);
    color: var(--upaep-select-color);
    -webkit-appearance: var(--upaep-select-appearance);
    -moz-appearance: var(--upaep-select-appearance);
    appearance: var(--upaep-select-appearance);
    background-color: var(--upaep-select-bg);
    background-image: var(--upaep-select-bg-img), var(--upaep-select-bg-icon, none);
    background-repeat: no-repeat;
    background-position: var(--upaep-select-bg-pos);
    background-size: var(--upaep-select-bg-size);
    border: var(--upaep-select-border-size) solid var(--upaep-select-border-color);
    border-radius: var(--upaep-select-border-radius);
    box-shadow: var(--upaep-select-boxshadow);
    display: block;
    line-height: 1.5;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

    &:disabled {
        background-color: var(--upaep-select-bg-disabled);
        opacity: var(--upaep-select-disabled-opacity);
    }

    &:hover:not(:disabled) {
        --upaep-select-border-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    }

    &:focus:not(:disabled) {
        border: var(--upaep-select-focus-border-size) solid var(--upaep-select-focus-border-color);
        outline: var(--upaep-select-focus-outline);
        box-shadow: var(--upaep-select-focus-boxshadow);
        color: var(--upaep-select-focus-color);
        background-color: var(--upaep-select-focus-bg);
    }

    &[multiple] {
        background-image: none;
        --upaep-select-border-radius: 10px;
        --upaep-select-padding: .75rem;
    }
}

.upaep__select.__rounded {
    --upaep-select-border-radius: 50px;
}

.upaep__select.__black {
    --upaep-select-color: var(--upaep-color-white);
    --upaep-select-bg: var(--upaep-color-black);
    --upaep-select-bg-disabled: #292929;
    --upaep-select-border-color: var(--ui-border, var(--upaep-color-border-grey));
}

.upaep__select.__black:focus:hover:not(:disabled),
.upaep__select.__black:focus:not(:disabled) {
    --upaep-select-focus-color: var(--upaep-color-white);
    --upaep-select-focus-border-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-select-focus-outline: 0;
}

.upaep__select.__dark {
    --upaep-select-color: var(--upaep-color-white);
    --upaep-select-bg: var(--colordark);
    --upaep-select-bg-disabled: #414448;
    --upaep-select-border-color: var(--ui-border, var(--upaep-color-border-grey));
}

.upaep__select.__dark:focus:hover:not(:disabled),
.upaep__select.__dark:focus:not(:disabled) {
    --upaep-select-focus-color: var(--upaep-color-white);
    --upaep-select-focus-border-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-select-focus-outline: 0;
}

.was-validated .upaep__select:valid,
.__validated .upaep__select:valid,
.upaep__select.is-success,
.upaep__select.is-valid {
    --upaep-select-border-color: var(--ui-success, var(--upaep-color-success));
    --upaep-select-boxshadow: ;
    --upaep-select-focus-border-color: var(--ui-success, var(--upaep-color-success));
    --upaep-select-focus-boxshadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.25);
    --upaep-select-bg-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjZThlYWVkIj48cGF0aCBkPSJtNDI0LTI5NiAyODItMjgyLTU2LTU2LTIyNiAyMjYtMTE0LTExNC01NiA1NiAxNzAgMTcwWm01NiAyMTZxLTgzIDAtMTU2LTMxLjVUMTk3LTE5N3EtNTQtNTQtODUuNS0xMjdUODAtNDgwcTAtODMgMzEuNS0xNTZUMTk3LTc2M3E1NC01NCAxMjctODUuNVQ0ODAtODgwcTgzIDAgMTU2IDMxLjVUNzYzLTc2M3E1NCA1NCA4NS41IDEyN1Q4ODAtNDgwcTAgODMtMzEuNSAxNTZUNzYzLTE5N3EtNTQgNTQtMTI3IDg1LjVUNDgwLTgwWm0wLTgwcTEzNCAwIDIyNy05M3Q5My0yMjdxMC0xMzQtOTMtMjI3dC0yMjctOTNxLTEzNCAwLTIyNyA5M3QtOTMgMjI3cTAgMTM0IDkzIDIyN3QyMjcgOTNabTAtMzIwWiIgZmlsbD0iIzI4YTc0NSIvPjwvc3ZnPg==");
    background-repeat: no-repeat;
    background-position: var(--upaep-select-bg-pos), center right 2.25rem;
    background-size: var(--upaep-select-bg-size), 1.5rem 1.2rem;

    &:hover:not(:disabled):not([readonly]),
    &:focus:hover:not(:disabled):not([readonly]),
    &:focus:not(:disabled):not([readonly]) {
        --upaep-select-bg-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjZThlYWVkIj48cGF0aCBkPSJtNDI0LTI5NiAyODItMjgyLTU2LTU2LTIyNiAyMjYtMTE0LTExNC01NiA1NiAxNzAgMTcwWm01NiAyMTZxLTgzIDAtMTU2LTMxLjVUMTk3LTE5N3EtNTQtNTQtODUuNS0xMjdUODAtNDgwcTAtODMgMzEuNS0xNTZUMTk3LTc2M3E1NC01NCAxMjctODUuNVQ0ODAtODgwcTgzIDAgMTU2IDMxLjVUNzYzLTc2M3E1NCA1NCA4NS41IDEyN1Q4ODAtNDgwcTAgODMtMzEuNSAxNTZUNzYzLTE5N3EtNTQgNTQtMTI3IDg1LjVUNDgwLTgwWm0wLTgwcTEzNCAwIDIyNy05M3Q5My0yMjdxMC0xMzQtOTMtMjI3dC0yMjctOTNxLTEzNCAwLTIyNyA5M3QtOTMgMjI3cTAgMTM0IDkzIDIyN3QyMjcgOTNabTAtMzIwWiIgZmlsbD0iIzI4YTc0NSIvPjwvc3ZnPg==");
        background-repeat: no-repeat;
        background-position: var(--upaep-select-bg-pos), center right 2.25rem;
        background-size: var(--upaep-select-bg-size), 1.5rem 1.2rem;
    }

    &~.upaep__label,
    &~span .upaep__label {
        --upaep-label-color: var(--upaep-color-success);
    }
}

.upaep__select.is-warning {
    --upaep-select-border-color: var(--ui-warning, var(--upaep-color-warning));
    --upaep-select-boxshadow: ;
    --upaep-select-focus-border-color: var(--ui-warning, var(--upaep-color-warning));
    --upaep-select-focus-boxshadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);

    &~.upaep__label,
    &~span .upaep__label {
        --upaep-label-color: var(--upaep-color-warning);
    }
}

.was-validated .upaep__select:invalid,
.__validated .upaep__select:invalid,
.upaep__select.is-error,
.upaep__select.is-invalid {
    --upaep-select-border-color: var(--ui-danger, var(--upaep-color-error));
    --upaep-select-boxshadow: ;
    --upaep-select-focus-border-color: var(--ui-danger, var(--upaep-color-error));
    --upaep-select-focus-boxshadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
    --upaep-select-bg-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjZThlYWVkIj48cGF0aCBkPSJNNDgwLTI4MHExNyAwIDI4LjUtMTEuNVQ1MjAtMzIwcTAtMTctMTEuNS0yOC41VDQ4MC0zNjBxLTE3IDAtMjguNSAxMS41VDQ0MC0zMjBxMCAxNyAxMS41IDI4LjVUNDgwLTI4MFptLTQwLTE2MGg4MHYtMjQwaC04MHYyNDBabTQwIDM2MHEtODMgMC0xNTYtMzEuNVQxOTctMTk3cS01NC01NC04NS41LTEyN1Q4MC00ODBxMC04MyAzMS41LTE1NlQxOTctNzYzcTU0LTU0IDEyNy04NS41VDQ4MC04ODBxODMgMCAxNTYgMzEuNVQ3NjMtNzYzcTU0IDU0IDg1LjUgMTI3VDg4MC00ODBxMCA4My0zMS41IDE1NlQ3NjMtMTk3cS01NCA1NC0xMjcgODUuNVQ0ODAtODBabTAtODBxMTM0IDAgMjI3LTkzdDkzLTIyN3EwLTEzNC05My0yMjd0LTIyNy05M3EtMTM0IDAtMjI3IDkzdC05MyAyMjdxMCAxMzQgOTMgMjI3dDIyNyA5M1ptMC0zMjBaIiBmaWxsPSIjZGMzNTQ1Ii8+PC9zdmc+");
    background-repeat: no-repeat;
    background-position: var(--upaep-select-bg-pos), center right 2.25rem;
    background-size: var(--upaep-select-bg-size), 1.5rem 1.2rem;

    &:hover:not(:disabled):not([readonly]),
    &:focus:hover:not(:disabled):not([readonly]),
    &:focus:not(:disabled):not([readonly]) {
        --upaep-select-bg-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjZThlYWVkIj48cGF0aCBkPSJNNDgwLTI4MHExNyAwIDI4LjUtMTEuNVQ1MjAtMzIwcTAtMTctMTEuNS0yOC41VDQ4MC0zNjBxLTE3IDAtMjguNSAxMS41VDQ0MC0zMjBxMCAxNyAxMS41IDI4LjVUNDgwLTI4MFptLTQwLTE2MGg4MHYtMjQwaC04MHYyNDBabTQwIDM2MHEtODMgMC0xNTYtMzEuNVQxOTctMTk3cS01NC01NC04NS41LTEyN1Q4MC00ODBxMC04MyAzMS41LTE1NlQxOTctNzYzcTU0LTU0IDEyNy04NS41VDQ4MC04ODBxODMgMCAxNTYgMzEuNVQ3NjMtNzYzcTU0IDU0IDg1LjUgMTI3VDg4MC00ODBxMCA4My0zMS41IDE1NlQ3NjMtMTk3cS01NCA1NC0xMjcgODUuNVQ0ODAtODBabTAtODBxMTM0IDAgMjI3LTkzdDkzLTIyN3EwLTEzNC05My0yMjd0LTIyNy05M3EtMTM0IDAtMjI3IDkzdC05MyAyMjdxMCAxMzQgOTMgMjI3dDIyNyA5M1ptMC0zMjBaIiBmaWxsPSIjZGMzNTQ1Ii8+PC9zdmc+");
        background-repeat: no-repeat;
        background-position: var(--upaep-select-bg-pos), center right 2.25rem;
        background-size: var(--upaep-select-bg-size), 1.5rem 1.2rem;
    }

    &~.upaep__label,
    &~span .upaep__label {
        --upaep-label-color: var(--upaep-color-error);
    }
}

/*? ------ Controles de selección ------ */
.upaep__checkbox {
    --upaep-checkbox-width: 20px;
    --upaep-checkbox-height: 20px;
    --upaep-checkbox-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-checkbox-border-size: 2px;
    --upaep-checkbox-border-style: solid;
    --upaep-checkbox-border-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-checkbox-border-radius: 5px;
    --upaep-checkbox-margin: .25rem;
    --upaep-checkbox-hover-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-checkbox-hover-border-size: 2px;
    --upaep-checkbox-hover-border-style: solid;
    --upaep-checkbox-hover-border-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-checkbox-focus-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-checkbox-focus-border-size: 2px;
    --upaep-checkbox-focus-border-style: solid;
    --upaep-checkbox-focus-border-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-checkbox-focus-boxshadow: 0 0 0 0.25rem var(--ui-control-ring, rgba(82, 86, 90, 0.25));
    --upaep-checkbox-active-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-checkbox-active-border-size: 2px;
    --upaep-checkbox-active-border-style: solid;
    --upaep-checkbox-active-border-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-checkbox-checked-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-checkbox-checked-content: '\f00c';
    --upaep-checkbox-checked-fz: var(--upaep-fz15);
    --upaep-checkbox-checked-fw: var(--upaep-fw-bold);
    --upaep-checkbox-checked-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-checkbox-checked-inset: -30% auto auto 5%;
    --upaep-checkbox-checked-scale: .5;
    width: var(--upaep-checkbox-width);
    height: var(--upaep-checkbox-height);
    background: var(--upaep-checkbox-bg);
    border: var(--upaep-checkbox-border-size) var(--upaep-checkbox-border-style) var(--upaep-checkbox-border-color);
    border-radius: var(--upaep-checkbox-border-radius);
    margin: var(--upaep-checkbox-margin);
    flex-shrink: 0;
    vertical-align: top;
    appearance: none;
    position: relative;
    cursor: pointer;

    &:checked {
        background: var(--upaep-checkbox-checked-bg);

        &:hover {
            background: var(--upaep-checkbox-checked-bg);
        }
    }

    &:checked::before {
        font-size: var(--upaep-checkbox-checked-fz);
        font-weight: var(--upaep-checkbox-checked-fw);
        color: var(--upaep-checkbox-checked-color);
        inset: var(--upaep-checkbox-checked-inset);
        font-family: var(--upaep-ff-fontawesome);
        scale: var(--upaep-checkbox-checked-scale);
        rotate: 45deg;
        width: 80%;
        height: 150%;
        border: 5px solid var(--upaep-checkbox-checked-color);
        border-left: 0;
        border-top: 0;
        content: '';
        animation: a_zoomIn .25s;
        position: absolute;
    }

    &:hover:not(:checked) {
        background: var(--upaep-checkbox-hover-bg);
        border: var(--upaep-checkbox-hover-border-size) var(--upaep-checkbox-hover-border-style) var(--upaep-checkbox-hover-border-color);
    }

    &:focus:checked {
        background: var(--upaep-checkbox-focus-bg);
        box-shadow: var(--upaep-checkbox-focus-boxshadow);
        border: var(--upaep-checkbox-focus-border-size) var(--upaep-checkbox-focus-border-style) var(--upaep-checkbox-focus-border-color);

    }

    &:active {
        filter: brightness(90%);
        background: var(--upaep-checkbox-active-bg);
    }

    &:disabled,
    &:disabled+.upaep__label {
        pointer-events: none;
        filter: none;
        opacity: 0.5;
    }

    &~.upaep__label,
    &~span .upaep__label {
        cursor: pointer;
    }
}

.was-validated .upaep__checkbox:invalid,
.__validated .upaep__checkbox:invalid,
.upaep__checkbox.__error,
.upaep__checkbox.is-invalid {
    --upaep-checkbox-border-color: var(--ui-danger, var(--upaep-color-error));
    --upaep-checkbox-hover-border-color: var(--ui-danger-hover, var(--upaep-color-error-hover));
    --upaep-checkbox-focus-border-color: var(--ui-danger, var(--upaep-color-error));
    --upaep-checkbox-focus-boxshadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
    --upaep-checkbox-active-border-color: var(--ui-danger, var(--upaep-color-error));
    --upaep-checkbox-checked-color: var(--ui-danger, var(--upaep-color-error));

    &~.upaep__label,
    &~span .upaep__label {
        --upaep-label-color: var(--ui-danger, var(--upaep-color-error));
    }
}

.upaep__checkbox.__warning {
    --upaep-checkbox-border-color: var(--ui-warning, var(--upaep-color-warning));
    --upaep-checkbox-hover-border-color: var(--ui-warning-hover, var(--upaep-color-warning-hover));
    --upaep-checkbox-focus-border-color: var(--ui-warning, var(--upaep-color-warning));
    --upaep-checkbox-focus-boxshadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
    --upaep-checkbox-active-border-color: var(--ui-warning, var(--upaep-color-warning));
    --upaep-checkbox-checked-color: var(--ui-warning, var(--upaep-color-warning));

    &~.upaep__label,
    &~span .upaep__label {
        --upaep-label-color: var(--ui-warning, var(--upaep-color-warning));
    }
}

.was-validated .upaep__checkbox:valid,
.__validated .upaep__checkbox:valid,
.upaep__checkbox.__success,
.upaep__checkbox.is-valid {
    --upaep-checkbox-border-color: var(--ui-success, var(--upaep-color-success));
    --upaep-checkbox-hover-border-color: var(--ui-success-hover, var(--upaep-color-success-hover));
    --upaep-checkbox-focus-border-color: var(--ui-success, var(--upaep-color-success));
    --upaep-checkbox-focus-boxshadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.25);
    --upaep-checkbox-active-border-color: var(--ui-success, var(--upaep-color-success));
    --upaep-checkbox-checked-color: var(--ui-success, var(--upaep-color-success));

    &~.upaep__label,
    &~span .upaep__label {
        --upaep-label-color: var(--ui-success, var(--upaep-color-success));
    }
}

.upaep__checkbox.__switch {
    --upaep-checkbox-checked-inset: 0;
    --upaep-checkbox-width: 35px;
    --upaep-checkbox-border-radius: 50px;
    --upaep-checkbox-checked-content: '\f111';
    --upaep-checkbox-checked-fz: var(--upaep-fz14);
    --upaep-checkbox-checked-color: var(--upaep-color-white);
    --upaep-checkbox-bg: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-checkbox-hover-bg: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-checkbox-focus-bg: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-checkbox-active-bg: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-checkbox-checked-bg: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-checkbox-checked-scale: .8;

    &::before {
        content: '';
        font-size: var(--upaep-checkbox-checked-fz);
        font-weight: var(--upaep-checkbox-checked-fw);
        color: var(--upaep-checkbox-checked-color);
        background: var(--upaep-checkbox-checked-color);
        inset: var(--upaep-checkbox-checked-inset);
        font-family: var(--upaep-ff-fontawesome);
        width: 50%;
        height: 100%;
        border-radius: 50%;
        animation: none;
        scale: .8;
        transition: all .25s;
        position: absolute;
    }

    &:checked:before {
        animation: none;
        rotate: 0deg;
        transform: translateX(100%);
    }
}

.was-validated .upaep__checkbox.__switch:invalid,
.__validated .upaep__checkbox.__switch:invalid,
.upaep__checkbox.__switch.is-error,
.upaep__checkbox.__switch.__error {
    --upaep-checkbox-width: 35px;
    --upaep-checkbox-border-radius: 50px;
    --upaep-checkbox-checked-content: '\f111';
    --upaep-checkbox-checked-fz: var(--upaep-fz14);
    --upaep-checkbox-checked-color: var(--upaep-color-white);
    --upaep-checkbox-bg: var(--ui-danger, var(--upaep-color-error));
    --upaep-checkbox-hover-bg: var(--ui-danger, var(--upaep-color-error));
    --upaep-checkbox-focus-bg: var(--ui-danger, var(--upaep-color-error));
    --upaep-checkbox-active-bg: var(--ui-danger, var(--upaep-color-error));
    --upaep-checkbox-checked-bg: var(--ui-danger, var(--upaep-color-error));
}

.upaep__checkbox.__switch.is-warning,
.upaep__checkbox.__switch.__warning {
    --upaep-checkbox-width: 35px;
    --upaep-checkbox-border-radius: 50px;
    --upaep-checkbox-checked-content: '\f111';
    --upaep-checkbox-checked-fz: var(--upaep-fz14);
    --upaep-checkbox-checked-color: var(--upaep-color-white);
    --upaep-checkbox-bg: var(--ui-warning, var(--upaep-color-warning));
    --upaep-checkbox-hover-bg: var(--ui-warning, var(--upaep-color-warning));
    --upaep-checkbox-focus-bg: var(--ui-warning, var(--upaep-color-warning));
    --upaep-checkbox-active-bg: var(--ui-warning, var(--upaep-color-warning));
    --upaep-checkbox-checked-bg: var(--ui-warning, var(--upaep-color-warning));
}

.was-validated .upaep__checkbox.__switch:valid,
.__validated .upaep__checkbox.__switch:valid,
.upaep__checkbox.__switch.is-success,
.upaep__checkbox.__switch.__success {
    --upaep-checkbox-width: 35px;
    --upaep-checkbox-border-radius: 50px;
    --upaep-checkbox-checked-content: '\f111';
    --upaep-checkbox-checked-fz: var(--upaep-fz14);
    --upaep-checkbox-checked-color: var(--upaep-color-white);
    --upaep-checkbox-bg: var(--ui-success, var(--upaep-color-success));
    --upaep-checkbox-hover-bg: var(--ui-success, var(--upaep-color-success));
    --upaep-checkbox-focus-bg: var(--ui-success, var(--upaep-color-success));
    --upaep-checkbox-active-bg: var(--ui-success, var(--upaep-color-success));
    --upaep-checkbox-checked-bg: var(--ui-success, var(--upaep-color-success));
}

.upaep__checkbox.__switch.__bicolor {
    --upaep-checkbox-width: 35px;
    --upaep-checkbox-border-radius: 50px;
    --upaep-checkbox-checked-content: '\f111';
    --upaep-checkbox-checked-fz: var(--upaep-fz14);
    --upaep-checkbox-checked-color: var(--upaep-color-white);
    --upaep-checkbox-bg: var(--ui-success, var(--upaep-color-success));
    --upaep-checkbox-active-bg: var(--ui-success, var(--upaep-color-success));
    --upaep-checkbox-focus-bg: var(--ui-success, var(--upaep-color-success));
    --upaep-checkbox-hover-bg: var(--ui-success, var(--upaep-color-success));
    --upaep-checkbox-checked-bg: #FF4D5F;

    &:checked {
        --upaep-checkbox-active-bg: #FF4D5F;
        --upaep-checkbox-hover-bg: #FF4D5F;
        --upaep-checkbox-focus-bg: #FF4D5F;
    }
}

.upaep__radio {
    --upaep-radio-width: 20px;
    --upaep-radio-height: 20px;
    --upaep-radio-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-radio-border-size: 2px;
    --upaep-radio-border-style: solid;
    --upaep-radio-border-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-radio-border-radius: 50px;
    --upaep-radio-margin: .25rem;
    --upaep-radio-hover-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-radio-hover-border-size: 2px;
    --upaep-radio-hover-border-style: solid;
    --upaep-radio-hover-border-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-radio-focus-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-radio-focus-border-size: 2px;
    --upaep-radio-focus-border-style: solid;
    --upaep-radio-focus-border-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-radio-focus-boxshadow: 0 0 0 0.25rem var(--ui-control-ring, rgba(82, 86, 90, 0.25));
    --upaep-radio-active-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-radio-active-border-size: 2px;
    --upaep-radio-active-border-style: solid;
    --upaep-radio-active-border-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-radio-checked-content: '\f111';
    --upaep-radio-checked-fz: var(--upaep-fz10);
    --upaep-radio-checked-fw: var(--upaep-fw-bold);
    --upaep-radio-checked-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-radio-checked-scale: .65;
    --upaep-radio-checked-inset: 0;
    width: var(--upaep-radio-width);
    height: var(--upaep-radio-height);
    background: var(--upaep-radio-bg);
    border: var(--upaep-radio-border-size) var(--upaep-radio-border-style) var(--upaep-radio-border-color);
    border-radius: var(--upaep-radio-border-radius);
    margin: var(--upaep-radio-margin);
    flex-shrink: 0;
    vertical-align: top;
    appearance: none;
    position: relative;
    cursor: pointer;

    &:checked::before {
        font-size: var(--upaep-radio-checked-fz);
        font-weight: var(--upaep-radio-checked-fw);
        color: var(--upaep-radio-checked-color);
        background: var(--upaep-radio-checked-color);
        inset: var(--upaep-radio-checked-inset);
        font-family: var(--upaep-ff-fontawesome);
        scale: var(--upaep-radio-checked-scale);
        content: '';
        width: 100%;
        height: 100%;
        border-radius: 50%;
        animation: a_zoomIn .25s;
        position: absolute;
    }

    &:hover {
        background: var(--upaep-radio-hover-bg);
        border: var(--upaep-radio-hover-border-size) var(--upaep-radio-hover-border-style) var(--upaep-radio-hover-border-color);
    }

    &:focus {
        background: var(--upaep-radio-focus-bg);
        box-shadow: var(--upaep-radio-focus-boxshadow);
        border: var(--upaep-radio-focus-border-size) var(--upaep-radio-focus-border-style) var(--upaep-radio-focus-border-color);
    }

    &:active {
        filter: brightness(90%);
    }

    &:disabled,
    &:disabled+.upaep__label {
        pointer-events: none;
        filter: none;
        opacity: 0.5;
    }

    &~.upaep__label,
    &~span .upaep__label {
        cursor: pointer;
    }
}

.was-validated .upaep__radio:invalid,
.__validated .upaep__radio:invalid,
.upaep__radio.__error {
    --upaep-radio-border-color: var(--ui-danger, var(--upaep-color-error));
    --upaep-radio-hover-border-color: var(--ui-danger-hover, var(--upaep-color-error-hover));
    --upaep-radio-focus-border-color: var(--ui-danger, var(--upaep-color-error));
    --upaep-radio-focus-boxshadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
    --upaep-radio-active-border-color: var(--ui-danger, var(--upaep-color-error));
    --upaep-radio-checked-color: var(--ui-danger, var(--upaep-color-error));
}

.upaep__radio.__warning {
    --upaep-radio-border-color: var(--ui-warning, var(--upaep-color-warning));
    --upaep-radio-hover-border-color: var(--ui-warning-hover, var(--upaep-color-warning-hover));
    --upaep-radio-focus-border-color: var(--ui-warning, var(--upaep-color-warning));
    --upaep-radio-focus-boxshadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
    --upaep-radio-active-border-color: var(--ui-warning, var(--upaep-color-warning));
    --upaep-radio-checked-color: var(--ui-warning, var(--upaep-color-warning));
}

.was-validated .upaep__radio:valid,
.__validated .upaep__radio:valid,
.upaep__radio.__success {
    --upaep-radio-border-color: var(--ui-success, var(--upaep-color-success));
    --upaep-radio-hover-border-color: var(--ui-success-hover, var(--upaep-color-success-hover));
    --upaep-radio-focus-border-color: var(--ui-success, var(--upaep-color-success));
    --upaep-radio-focus-boxshadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.25);
    --upaep-radio-active-border-color: var(--ui-success, var(--upaep-color-success));
    --upaep-radio-checked-color: var(--ui-success, var(--upaep-color-success));
}

/*? ------ Label ------ */
.upaep__label {
    --upaep-label-width: auto;
    --upaep-label-height: auto;
    --upaep-label-bg: ;
    --upaep-label-fz: var(--upaep-fz14);
    --upaep-label-fw: var(--upaep-fw-medium);
    --upaep-label-color: var(--upaep-color-dark-grey);
    --upaep-label-padding: 0;
    --upaep-label-margin: 0 0 .25rem;
    --upaep-label-border-size: 0;
    --upaep-label-border-color: ;
    --upaep-label-transform: ;
    width: var(--upaep-label-width);
    height: var(--upaep-label-height);
    background: var(--upaep-label-bg);
    font-size: var(--upaep-label-fz);
    font-weight: var(--upaep-label-fw);
    color: var(--upaep-label-color);
    padding: var(--upaep-label-padding);
    margin: var(--upaep-label-margin);
    border: var(--upaep-label-border-size) solid var(--upaep-label-border-color);
    display: flex;
    align-items: center;
    transform: var(--upaep-label-transform);
}

.__dark~.upaep__label,
.__black~.upaep__label {
    --upaep-label-color: var(--upaep-color-white);
}

/* Alternativa separando completamente los casos */
input:not([type=radio]):not([type=checkbox]):required~label:not(.file__label):not(.is-end),
textarea:required~label:not(.is-end),
select:required~label:not(.is-end),
.upaep__input:required~.upaep__label:not(.is-end),
.upaep__select:required~.upaep__label:not(.is-end),
.upaep__label.is-required:not(.is-end),
.upaep__label.__required:not(.is-end),
.upaep__input-text.is-required:not(.is-end),
.upaep__input-text.__required:not(.is-end) {
    &::before {
        font-family: var(--upaep-ff-fontawesome);
        font-size: var(--upaep-fz10);
        content: "\002A";
        color: var(--ui-accent, var(--upaep-color-red));
        padding: 0 5px;
    }
}

input:not([type=radio]):not([type=checkbox]):required~label:not(.file__label).is-end,
textarea:required~label.is-end,
select:required~label.is-end,
.upaep__input:required~.upaep__label.is-end,
.upaep__select:required~.upaep__label.is-end,
.upaep__label.is-required.is-end,
.upaep__label.__required.is-end,
.upaep__input-text.is-required.is-end,
.upaep__input-text.__required.is-end {
    &::after {
        font-family: var(--upaep-ff-fontawesome);
        font-size: var(--upaep-fz10);
        content: "\002A";
        color: var(--ui-accent, var(--upaep-color-red));
        padding: 0 5px;
    }
}

/*? ------ input-group ------ */
.upaep__input-group {
    --upaep-group-width: auto;
    --upaep-group-height: auto;
    --upaep-group-padding: .5rem 0;
    --upaep-group-margin: 0;
    --upaep-group-fz: var(--upaep-fz14);
    --upaep-group-fw: var(--upaep-fw-regular);
    --upaep-group-color: var(--upaep-color-dark-grey);
    --upaep-group-bg: var(--upaep-color-background);
    --upaep-group-border-size: 2px;
    --upaep-group-border-color: var(--upaep-color-border-grey);
    --upaep-group-border-radius: 10px;
    --upaep-group-text-fz: var(--upaep-fz16);
    --upaep-group-text-fw: var(--upaep-fw-bold);
    --upaep-group-text-color: var(--upaep-color-dark-grey);
    --upaep-group-text-padding: .35rem .75rem;
    --upaep-group-text-bg: var(--upaep-color-white);
    --upaep-group-text-border-size: 2px;
    --upaep-group-text-border-style: solid;
    --upaep-group-text-border-color: var(--upaep-color-border-grey);
    --upaep-group-text-border-radius: 10px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
    margin: var(--upaep-group-margin);
    padding: var(--upaep-group-padding);

    &:not(.__float-label) .upaep__label {
        --upaep-label-padding: 0;
        --upaep-label-margin: 0 .5rem;
    }

    & .upaep__input:not([type=range]) {
        --upaep-input-padding: .5rem;
        --upaep-input-margin: 0 .5rem;
    }

    & .upaep__select {
        --upaep-select-padding: .5rem;
        --upaep-select-margin: 0;
    }

    & .upaep__textarea {
        --upaep-textarea-padding: .5rem;
        --upaep-textarea-margin: 0 .5rem;
    }

    &.__first-label .upaep__label {
        order: 0;
    }

    &.__first-label .upaep__select,
    &.__first-label .upaep__textarea,
    &.__first-label .upaep__input {
        order: 1;
    }

    &>.upaep__input,
    &>.upaep__input-floating,
    &>.upaep__select {
        position: relative;
        flex: 1 1 auto;
        min-width: 0;
        --upaep-input-margin: 0;
    }

    &:has(span)>.upaep__input,
    &:has(span)>.upaep__input-floating,
    &:has(span)>.upaep__select {
        width: 1%;
    }

    /* group-text */
    & .upaep__input-group-text {
        font-size: var(--upaep-group-text-fz);
        font-weight: var(--upaep-group-text-fw);
        color: var(--upaep-group-text-color);
        padding: var(--upaep-group-text-padding);
        background: var(--upaep-group-text-bg);
        border: var(--upaep-group-text-border-size) var(--upaep-group-text-border-style) var(--upaep-group-text-border-color);
        border-radius: var(--upaep-group-text-border-radius);
        display: flex;
        align-items: center;
        line-height: 1.5;
        text-align: center;
        white-space: nowrap;
    }

    &:not(.__float-label):not(.__float-icon):not(.has-validation):not(.__feedback)>:not(:last-child) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        --upaep-group-text-border-radius: 10px 0 0 10px;
    }

    &:has(span)>:not(:first-child):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback):not(.upaep__input-icon) {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        --upaep-group-text-border-radius: 0 10px 10px 0;
    }

    &.__float-icon.__icon-left {
        .upaep__input-icon {
            --upaep-input-icon-iset: auto auto auto 5px !important;
        }

        .upaep__input {
            --upaep-input-padding: .35rem 1rem .35rem 3rem !important;
        }

        .upaep__select {
            --upaep-select-padding: .5rem .5rem .5rem 3rem;
        }
    }

    &.__float-icon.__icon-right {
        .upaep__input-icon {
            --upaep-input-icon-iset: auto 5px auto auto !important;
        }

        &:has(.upaep__select~.upaep__input-icon) .upaep__input-icon {
            --upaep-input-icon-iset: auto 20px auto auto !important;
        }

        .upaep__input {
            --upaep-input-padding: .35rem 3rem .35rem 1rem !important;
            background-position: right calc(0.375em + 1.8rem) center;

            &:hover:not(:disabled):not([readonly]),
            &:focus:hover:not(:disabled):not([readonly]),
            &:focus:not(:disabled):not([readonly]) {
                background-position: right calc(0.375em + 1.8rem) center !important;
            }
        }

        .upaep__select {
            --upaep-select-padding: .5rem .5rem .2rem 3rem;
            background-position: right 0.75rem center, center right 3.5rem;

            &:hover:not(:disabled):not([readonly]),
            &:focus:hover:not(:disabled):not([readonly]),
            &:focus:not(:disabled):not([readonly]) {
                background-position: right 0.75rem center, center right 3.5rem;
            }
        }
    }

}

/*? ------ input-icon ------ */
.upaep__input-icon {
    --upaep-input-icon-width: 40px;
    --upaep-input-icon-height: 40px;
    --upaep-input-icon-padding: .5rem;
    --upaep-input-icon-margin: 0 .5rem;
    --upaep-input-icon-border-size: 0;
    --upaep-input-icon-border-color: ;
    --upaep-input-icon-border-radius: 10px;
    --upaep-input-icon-bg: transparent;
    --upaep-input-icon-img-width: 100%;
    --upaep-input-icon-img-height: 100%;
    --upaep-input-icon-fz: var(--upaep-fz16);
    --upaep-input-icon-fw: var(--upaep-fw-bold);
    --upaep-input-icon-color: var(--ui-accent, var(--upaep-color-red));
    --upaep-input-icon-boxhadow: ;
    /* Alias con la ortografía correcta; conserva compatibilidad con el nombre con typo */
    --upaep-input-icon-boxshadow: var(--upaep-input-icon-boxhadow);
    --upaep-input-icon-hover-border-size: 0;
    --upaep-input-icon-hover-border-color: ;
    --upaep-input-icon-hover-border-radius: 10px;
    --upaep-input-icon-hover-fz: var(--upaep-fz16);
    --upaep-input-icon-hover-fw: var(--upaep-fw-bold);
    --upaep-input-icon-hover-color: var(--ui-accent, var(--upaep-color-red));
    --upaep-input-icon-hover-boxhadow: ;
    --upaep-input-icon-hover-boxshadow: var(--upaep-input-icon-hover-boxhadow);
    --upaep-input-icon-cursor: default;
    --upaep-input-icon-iset: ;
    width: var(--upaep-input-icon-width);
    height: var(--upaep-input-icon-height);
    padding: var(--upaep-input-icon-padding);
    margin: var(--upaep-input-icon-margin);
    border-radius: var(--upaep-input-icon-border-radius);
    border: var(--upaep-input-icon-border-size) solid var(--upaep-input-icon-border-color);
    box-shadow: var(--upaep-input-icon-boxshadow);
    cursor: var(--upaep-input-icon-cursor);
    inset: var(--upaep-input-icon-iset);
    background: var(--upaep-input-icon-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;

    &>* {
        font-size: var(--upaep-input-icon-fz);
        font-weight: var(--upaep-input-icon-fw);
        color: var(--upaep-input-icon-color);
        width: var(--upaep-input-icon-img-width);
        height: var(--upaep-input-icon-img-height);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    &>*:hover {
        font-size: var(--upaep-input-icon-hover-fz);
        font-weight: var(--upaep-input-icon-hover-fw);
        color: var(--upaep-input-icon-hover-color);
    }

    &:hover {
        border-radius: var(--upaep-input-icon-hover-border-radius);
        border: var(--upaep-input-icon-hover-border-size) solid var(--upaep-input-icon-hover-border-color);
        box-shadow: var(--upaep-input-icon-hover-boxshadow);
    }
}


/*? ------ float-label ------ */
.upaep__input-group.__float-label ::placeholder {
    --upaep-input-placeholder-color: transparent;
}

.upaep__input-group.__float-label .upaep__label {
    --upaep-label-margin: .5rem;
    position: absolute;
    inset: 0 auto auto 0;
    z-index: 2;
    overflow: hidden;
    text-align: start;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    transform-origin: 0 0;
    transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
}

.upaep__input-group.__icon-left.__float-label .upaep__label {
    inset: 0 auto auto 20px;
}

.upaep__input-group.__float-label input:not(:placeholder-shown)~label,
.upaep__input-group.__float-label textarea:not(:placeholder-shown)~label,
.upaep__input-group.__float-label input:not(:placeholder-shown)&~.upaep__label,
.upaep__input-group.__float-label textarea:not(:placeholder-shown)&~.upaep__label,
.upaep__input-group.__float-label .upaep__textarea:not(:placeholder-shown)&~.upaep__label,
.upaep__input-group.__float-label .upaep__select:not(:placeholder-shown)&~.upaep__label,
.upaep__input-group.__float-label .upaep__input:not(:placeholder-shown)&~.upaep__label {
    --upaep-label-transform: scale(.8) translateY(-.8rem) translateX(1rem);
    --upaep-label-padding: 0 .5rem;
    --upaep-label-bg: var(--upaep-color-white);
}

.upaep__input-group.__float-label input.__black:not(:placeholder-shown)~label,
.upaep__input-group.__float-label textarea.__black:not(:placeholder-shown)~label,
.upaep__input-group.__float-label input.__black:not(:placeholder-shown)&~.upaep__label,
.upaep__input-group.__float-label textarea.__black:not(:placeholder-shown)&~.upaep__label,
.upaep__input-group.__float-label .upaep__textarea.__black:not(:placeholder-shown)&~.upaep__label,
.upaep__input-group.__float-label .upaep__select.__black:not(:placeholder-shown)&~.upaep__label,
.upaep__input-group.__float-label .upaep__input.__black:not(:placeholder-shown)&~.upaep__label {
    --upaep-label-transform: scale(.8) translateY(-.8rem) translateX(1rem);
    --upaep-label-padding: 0 .5rem;
    --upaep-label-bg: var(--upaep-color-black);
    --upaep-label-color: var(--upaep-color-white);
}

.upaep__input-group.__float-label input.__dark:not(:placeholder-shown)~label,
.upaep__input-group.__float-label textarea.__dark:not(:placeholder-shown)~label,
.upaep__input-group.__float-label input.__dark:not(:placeholder-shown)&~.upaep__label,
.upaep__input-group.__float-label textarea.__dark:not(:placeholder-shown)&~.upaep__label,
.upaep__input-group.__float-label .upaep__textarea.__dark:not(:placeholder-shown)&~.upaep__label,
.upaep__input-group.__float-label .upaep__select.__dark:not(:placeholder-shown)&~.upaep__label,
.upaep__input-group.__float-label .upaep__input.__dark:not(:placeholder-shown)&~.upaep__label {
    --upaep-label-transform: scale(.8) translateY(-.8rem) translateX(1rem);
    --upaep-label-padding: 0 .5rem;
    --upaep-label-bg: var(--colordark);
    --upaep-label-color: var(--upaep-color-white);
}

.upaep__input-group.__float-label .upaep__input:focus~label,
.upaep__input-group.__float-label .upaep__input:focus&~.upaep__label {
    --upaep-label-transform: scale(.8) translateY(-.8rem) translateX(1rem);
    --upaep-label-padding: 0 .5rem;
    --upaep-label-bg: var(--upaep-color-white);
}

.upaep__input-group.__float-label .upaep__input.__black:focus~label,
.upaep__input-group.__float-label .upaep__input.__black:focus&~.upaep__label {
    --upaep-label-transform: scale(.8) translateY(-.8rem) translateX(1rem);
    --upaep-label-padding: 0 .5rem;
    --upaep-label-bg: var(--upaep-color-black);
    --upaep-label-color: var(--upaep-color-white);
}

.upaep__input-group.__float-label .upaep__input.__dark:focus~label,
.upaep__input-group.__float-label .upaep__input.__dark:focus&~.upaep__label {
    --upaep-label-transform: scale(.8) translateY(-.8rem) translateX(1rem);
    --upaep-label-padding: 0 .5rem;
    --upaep-label-bg: var(--colordark);
    --upaep-label-color: var(--upaep-color-white);
}

/*? ------ checks / radios -----  */

.upaep__checkbox-group,
.upaep__radio-group {
    display: flex;
    flex-direction: row;

    & .upaep__label {
        --upaep-label-padding: 0;
        --upaep-label-margin: 0;
    }
}

.upaep__checkbox-group.__first-label .upaep__label,
.upaep__radio-group.__first-label .upaep__label {
    order: 0;
}

.upaep__checkbox-group.__first-label .upaep__checkbox,
.upaep__radio-group.__first-label .upaep__radio {
    order: 1;
}

.upaep__checkboxs,
.upaep__radios {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.upaep__checkboxs.__inline,
.upaep__radios.__inline {
    flex-direction: row;
    gap: 10px;
}

/*? ------ Feedbacks ------ */
.upaep__feedback {
    --upaep-feedback-width: 100%;
    --upaep-feedback-margin: .25rem 0;
    --upaep-feedback-fz: var(--upaep-fz14);
    --upaep-feedback-fw: var(--upaep-fw-bold);
    --upaep-feedback-color: var(--upaep-color-dark-grey);
    width: var(--upaep-feedback-width);
    margin: var(--upaep-feedback-margin);
    font-size: var(--upaep-feedback-fz);
    font-weight: var(--upaep-feedback-fw);
    color: var(--upaep-feedback-color);
    display: none;

    &.is-show {
        display: block;
    }
}

.was-validated :valid,
.__validated :valid,
.was-validated .upaep__selectfilters:has( :valid),
.__validated .upaep__selectfilters:has( :valid),
.was-validated .upaep__autocomplete:has( :valid),
.__validated .upaep__autocomplete:has( :valid),
.was-validated .upaep__tokenfield:has( :valid),
.__validated .upaep__tokenfield:has( :valid),
.was-validated .upaep__selectpicker:has( :valid),
.__validated .upaep__selectpicker:has( :valid),
.was-validated .upaep__datepicker:has( :valid),
.__validated .upaep__datepicker:has( :valid),
.was-validated .upaep__dropzone:has( :valid),
.__validated .upaep__dropzone:has( :valid),
.was-validated .upaep__radio-group:has( :valid),
.__validated .upaep__radio-group:has( :valid),
.was-validated .upaep__checkbox-group:has( :valid),
.__validated .upaep__checkbox-group:has( :valid),
.was-validated .upaep__input-container:has( :valid),
.__validated .upaep__input-container:has( :valid),
.was-validated .upaep__input-wrapper:has( :valid),
.__validated .upaep__input-wrapper:has( :valid),
.is-valid,
.is-success {

    &~span .upaep__feedback.__valid,
    &~span .upaep__feedback.__success,
    &~.upaep__feedback.__valid,
    &~.upaep__feedback.__success {
        display: block;
    }
}

.was-validated .upaep__input-container:has([type="radio"]:valid),
.__validated .upaep__input-container:has([type="radio"]:valid),
.was-validated .upaep__input-container:has([type="checkbox"]:valid),
.__validated .upaep__input-container:has([type="checkbox"]:valid) {

    .upaep__feedback.__valid,
    .upaep__feedback.__success {
        display: block;
    }
}

.was-validated :invalid,
.__validated :invalid,
.was-validated .upaep__selectfilters:has( :invalid),
.__validated .upaep__selectfilters:has( :invalid),
.was-validated .upaep__autocomplete:has( :invalid),
.__validated .upaep__autocomplete:has( :invalid),
.was-validated .upaep__tokenfield:has( :invalid),
.__validated .upaep__tokenfield:has( :invalid),
.was-validated .upaep__selectpicker:has( :invalid),
.__validated .upaep__selectpicker:has( :invalid),
.was-validated .upaep__datepicker:has( :invalid),
.__validated .upaep__datepicker:has( :invalid),
.was-validated .upaep__dropzone:has( :invalid),
.__validated .upaep__dropzone:has( :invalid),
.was-validated .upaep__radio-group:has( :invalid),
.__validated .upaep__radio-group:has( :invalid),
.was-validated .upaep__checkbox-group:has( :invalid),
.__validated .upaep__checkbox-group:has( :invalid),
.was-validated .upaep__input-container:has( :invalid),
.__validated .upaep__input-container:has( :invalid),
.was-validated .upaep__input-wrapper:has( :invalid),
.__validated .upaep__input-wrapper:has( :invalid),
.is-invalid,
.is-error {

    &~span .upaep__feedback.__invalid,
    &~span .upaep__feedback.__error,
    &~.upaep__feedback.__invalid,
    &~.upaep__feedback.__error {
        display: block;
    }
}

.was-validated .upaep__input-container:has([type="radio"]:invalid),
.__validated .upaep__input-container:has([type="radio"]:invalid),
.was-validated .upaep__input-container:has([type="checkbox"]:invalid),
.__validated .upaep__input-container:has([type="checkbox"]:invalid) {

    .upaep__feedback.__invalid,
    .upaep__feedback.__error {
        display: block;
    }
}

.is-warning {

    &~span .upaep__feedback.__warning,
    &~.upaep__feedback.__warning {
        display: block;
    }
}

.upaep__feedback.__invalid,
.upaep__feedback.__error {
    --upaep-feedback-color: var(--upaep-color-error);
}

.upaep__feedback.__valid,
.upaep__feedback.__success {
    --upaep-feedback-color: var(--upaep-color-success);
}

.upaep__feedback.__warning {
    --upaep-feedback-color: var(--upaep-color-warning);
}

/*? ------ Agrupamiento de inputs ------ */
.upaep__input-container {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;

    & .upaep__btn:not(.__dropzone),
    & .upaep__input,
    & .upaep__select {
        margin: 0;
    }

    .upaep__btn {
        --upaep-btn-padding: .35rem .75rem
    }

    &>.upaep__input,
    &>.upaep__select,
    &>.upaep__input-wrapper,
    &>.upaep__selectpicker {
        position: relative;
        flex: 1 1 auto;
        width: 1%;
        min-width: 0;
        margin: 0;
    }

    /* El selectpicker reserva 2.65rem de alto en su envoltorio, pero el botón que
       se ve mide 2.45rem —lo mismo que un .upaep__input—. Suelto no se nota; en el
       grupo, el addon se estira al alto del envoltorio y quedaba un escalón de 3px
       abajo. Aquí el envoltorio mide lo que su botón. Solo dentro del grupo. */
    &>.upaep__selectpicker,
    &>.upaep__input-wrapper>.upaep__selectpicker {
        --upaep-selectpicker-min-height: var(--upaep-selectpicker-btn-min-height);
    }

    &:not(.is-feedback)> :not(:last-child):not(.upaep__input-wrapper),
    &:not(.is-feedback)> :not(:last-child):not(.upaep__input-wrapper).upaep__selectpicker .upaep__selectpicker-btn .upaep__btn,
    &:not(.is-feedback)> :not(:last-child):not(.upaep__input-wrapper).upaep__datepicker :is(.upaep__input, .upaep__datepicker-input-container),
    &:not(.is-feedback)>.upaep__input-wrapper:not(:last-child)>.upaep__input,
    &:not(.is-feedback)>.upaep__input-wrapper:not(:last-child)>.upaep__select,
    &:not(.is-feedback)>.upaep__input-wrapper:not(:last-child)>.upaep__selectpicker .upaep__selectpicker-btn .upaep__btn {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    /*? Con is-feedback se corta el radius derecho de todo control que tenga
       OTRO control (no-feedback) después; el último control visual lo conserva
       sin importar cuántos .upaep__feedback haya al final (uno, dos o más). */
    &.is-feedback> :not(.upaep__feedback):has(~ :not(.upaep__feedback)):not(.upaep__input-wrapper),
    &.is-feedback> :not(.upaep__feedback):has(~ :not(.upaep__feedback)):not(.upaep__input-wrapper).upaep__selectpicker .upaep__selectpicker-btn .upaep__btn,
    &.is-feedback> :not(.upaep__feedback):has(~ :not(.upaep__feedback)):not(.upaep__input-wrapper).upaep__datepicker :is(.upaep__input, .upaep__datepicker-input-container),
    &.is-feedback>.upaep__input-wrapper:has(~ :not(.upaep__feedback))>.upaep__input,
    &.is-feedback>.upaep__input-wrapper:has(~ :not(.upaep__feedback))>.upaep__select,
    &.is-feedback>.upaep__input-wrapper:has(~ :not(.upaep__feedback))>.upaep__selectpicker .upaep__selectpicker-btn .upaep__btn {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    &> :not(:first-child):not(.upaep__feedback),
    &> :not(:first-child):not(.upaep__feedback).upaep__selectpicker .upaep__selectpicker-btn .upaep__btn,
    &> :not(:first-child):not(.upaep__feedback).upaep__datepicker :is(.upaep__input, .upaep__datepicker-input-container) {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    &>.upaep__input-wrapper:not(:first-child)>.upaep__input,
    &>.upaep__input-wrapper:not(:first-child)>.upaep__select,
    &>.upaep__input-wrapper:not(:first-child)>.upaep__selectpicker .upaep__selectpicker-btn .upaep__btn {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    &>.is-hide {
        display: none;
    }

    &:has(>:first-child.is-hide) {

        &>.upaep__input:not(:first-child),
        &>.upaep__select:not(:first-child),
        &>.upaep__input-wrapper:not(:first-child)>.upaep__input,
        &>.upaep__input-wrapper:not(:first-child)>.upaep__select {
            border-top-left-radius: 50px;
            border-bottom-left-radius: 50px;
        }
    }

    &:has(>:last-child.is-hide) {
        > :not(:last-child):not(.upaep__input-wrapper) {
            border-top-right-radius: 50px;
            border-bottom-right-radius: 50px;
        }
    }
}

.upaep__input-addon {
    --upaep-input-addon-padding: 0.25rem 0.75rem;
    --upaep-input-addon-bg: #f9fafb;
    --upaep-input-addon-border-size: 2px;
    --upaep-input-addon-border-style: solid;
    --upaep-input-addon-border-color: var(--upaep-color-border-grey);
    --upaep-input-addon-border-radius: 10px;
    padding: var(--upaep-input-addon-padding);
    background: var(--upaep-input-addon-bg);
    border: var(--upaep-input-addon-border-size) var(--upaep-input-addon-border-style)var(--upaep-input-addon-border-color);
    border-radius: var(--upaep-input-addon-border-radius);
    position: relative;
    display: flex;
    align-items: center;
    white-space: nowrap;
    line-height: 1.5;

    &.__rounded {
        --upaep-input-addon-border-radius: 50px;
    }
}

.upaep__input-text {
    --upaep-input-text-fz: var(--upaep-fz14);
    --upaep-input-text-fw: var(--upaep-fw-medium);
    --upaep-input-text-color: var(--upaep-color-dark-grey);
    --upaep-input-text-margin: 0 0 .25rem;
    --upaep-input-text-padding: 0;
    font-size: var(--upaep-input-text-fz);
    font-weight: var(--upaep-input-text-fw);
    color: var(--upaep-input-text-color);
    margin: var(--upaep-input-text-margin);
    padding: var(--upaep-input-text-padding);
}

.upaep__input-wrapper {
    position: relative;

    .upaep__input-icon {
        &.__left {
            --upaep-input-icon-iset: auto auto auto 5px;
        }

        &.__right {
            --upaep-input-icon-iset: auto 5px auto auto;
        }
    }

    &:has(.upaep__input-icon.__left) {

        .upaep__input.__rounded,
        .upaep__input {
            --upaep-input-padding: .35rem 1rem .35rem 3rem;
        }

        .upaep__select.__rounded,
        .upaep__select {
            --upaep-select-padding: .5rem .5rem .5rem 3rem;
        }
    }

    .upaep__feedback {
        width: 100%;
    }

    &:has(.upaep__label.__float) {

        ::placeholder {
            --upaep-input-placeholder-color: transparent;
        }

        &:has(>:is(input, textarea):is(:focus, [placeholder]:not(:placeholder-shown), [type="date"])),
        &:has(>:is(label.active, :focus+label, [placeholder]:not(:placeholder-shown)+label, select+label, label+select)) {

            .upaep__label {
                --upaep-label-transform: scale(0.8) translate(-10%, -1rem);
            }
        }

        .upaep__input,
        .upaep__select {
            padding-top: 1rem;
        }

        textarea.upaep__input {
            padding-top: 1.65rem;
        }

        .upaep__label {
            position: absolute;
            inset: 0 auto auto 0;
            white-space: nowrap;
            pointer-events: none;
            transition: all .2s;
            display: inline-block;
            align-items: start;
            max-width: 100%;
            gap: .25rem;
            padding: 1rem .75rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
}

/*? ------ Tags ------ */
.upaep__tag {
    --upaep-tag-width: auto;
    --upaep-tag-height: auto;
    --upaep-tag-minwidth: 90px;
    --upaep-tag-minheight: 2.5rem;
    --upaep-tag-maxwidth: auto;
    --upaep-tag-maxheight: auto;
    --upaep-tag-border-size: 2px;
    --upaep-tag-border-style: solid;
    --upaep-tag-border-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-tag-border-radius: 50px;
    --upaep-tag-padding: .2rem;
    --upaep-tag-margin: .5rem;
    --upaep-tag-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-tag-boxshadow: none;
    --upaep-tag-text-fz: var(--upaep-fz16);
    --upaep-tag-text-fw: var(--upaep-fw-medium);
    --upaep-tag-text-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-tag-text-margin: 0 .5rem;
    --upaep-tag-text-padding: 0;
    --upaep-tag-close-fz: var(--upaep-fz16);
    --upaep-tag-close-fw: var(--upaep-fw-bold);
    --upaep-tag-close-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-tag-close-margin: 0 .5rem;
    --upaep-tag-close-padding: 0;
    --upaep-tag-hover-boxshadow: 0 0 0 0.25rem var(--ui-control-ring, rgba(82, 86, 90, 0.25));
    --upaep-tag-hover-bg-after: rgba(0, 0, 0, .1);
    width: var(--upaep-tag-width);
    height: var(--upaep-tag-height);
    min-width: var(--upaep-tag-minwidth);
    min-height: var(--upaep-tag-minheight);
    max-width: var(--upaep-tag-maxwidth);
    max-height: var(--upaep-tag-maxheight);
    border: var(--upaep-tag-border-size) var(--upaep-tag-border-style) var(--upaep-tag-border-color);
    border-radius: var(--upaep-tag-border-radius);
    padding: var(--upaep-tag-padding);
    margin: var(--upaep-tag-margin);
    background: var(--upaep-tag-bg);
    box-shadow: var(--upaep-tag-boxshadow);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: var(--upaep-zindex-tag);
    cursor: default;

    &:hover,
    &:focus,
    &.is-selected {
        box-shadow: var(--upaep-tag-hover-boxshadow);
    }

    & span,
    & .upaep__tag-text {
        font-size: var(--upaep-tag-text-fz);
        font-weight: var(--upaep-tag-text-fw);
        color: var(--upaep-tag-text-color);
        margin: var(--upaep-tag-text-margin);
        padding: var(--upaep-tag-text-padding);
    }

    & span small,
    & .upaep__tag-text small {
        font-size: var(--upaep-fz12);
    }

    & .upaep__tag-close {
        font-size: var(--upaep-tag-close-fz);
        font-weight: var(--upaep-tag-close-fw);
        color: var(--upaep-tag-close-color);
        margin: var(--upaep-tag-close-margin);
        padding: var(--upaep-tag-close-padding);
        cursor: pointer;
        position: relative;

        &::after {
            content: "";
            position: absolute;
            display: block;
            inset: 50% auto auto 50%;
            transform: translate(-50%, -50%);
            border-radius: 50px;
            background-color: transparent;
            pointer-events: none;
            width: calc(var(--upaep-tag-close-fz) + 5px);
            height: calc(var(--upaep-tag-close-fz) + 5px);
        }

        &:hover::after {
            transition: background-color .2s cubic-bezier(.05, 0, 0, 1);
            background-color: var(--upaep-tag-hover-bg-after);
        }
    }
}

.upaep__tag.__black {
    --upaep-tag-border-color: var(--upaep-color-border-grey);
    --upaep-tag-bg: var(--upaep-color-black);
    --upaep-tag-text-color: var(--upaep-color-white);
    --upaep-tag-close-color: var(--upaep-color-white);
    --upaep-tag-hover-boxshadow: 0 0 0 0.25rem var(--ui-control-ring, rgba(82, 86, 90, 0.25));
    --upaep-tag-hover-bg-after: rgba(255, 255, 255, .1);
}

.upaep__tag.__dark {
    --upaep-tag-border-color: var(--upaep-color-border-grey);
    --upaep-tag-bg: var(--colordark);
    --upaep-tag-text-color: var(--upaep-color-white);
    --upaep-tag-close-color: var(--upaep-color-white);
    --upaep-tag-hover-boxshadow: 0 0 0 0.25rem var(--ui-control-ring, rgba(82, 86, 90, 0.25));
    --upaep-tag-hover-bg-after: rgba(255, 255, 255, .1);
}

.upaep__tag-group {
    --upaep-taggroup-width: 100%;
    --upaep-taggroup-height: auto;
    --upaep-taggroup-padding: .2rem .35rem;
    --upaep-taggroup-margin: 0;
    --upaep-taggroup-border-size: 1px;
    --upaep-taggroup-border-style: solid;
    --upaep-taggroup-border-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-taggroup-border-bottom-size: 1px;
    --upaep-taggroup-border-bottom-style: solid;
    --upaep-taggroup-border-bottom-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-taggroup-border-radius: 10px;
    --upaep-taggroup-color: transparent;
    width: var(--upaep-taggroup-width);
    height: var(--upaep-taggroup-height);
    padding: var(--upaep-taggroup-padding);
    margin: var(--upaep-taggroup-margin);
    border: var(--upaep-taggroup-border-size) var(--upaep-taggroup-border-style) var(--upaep-taggroup-border-color);
    border-bottom: var(--upaep-taggroup-border-bottom-size) var(--upaep-taggroup-border-bottom-style) var(--upaep-taggroup-border-bottom-color);
    border-radius: var(--upaep-taggroup-border-radius);
    color: var(--upaep-taggroup-color);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

/*? ------ Dropzone ------ */
.upaep__dropzone {
    --uapep-dropzone-width: 100%;
    --uapep-dropzone-height: auto;
    --uapep-dropzone-label-width: 100%;
    --uapep-dropzone-label-height: auto;
    --uapep-dropzone-content-width: 100%;
    --uapep-dropzone-content-height: auto;
    --uapep-dropzone-content-padding: 1rem;
    --uapep-dropzone-content-border-size: 2px;
    --uapep-dropzone-content-border-style: solid;
    --uapep-dropzone-content-border-color: var(--ui-border, var(--upaep-color-border-grey));
    --uapep-dropzone-content-border-radius: 10px;
    --uapep-dropzone-content-boxshadow: ;
    --uapep-dropzone-content-cursor: pointer;
    --uapep-dropzone-content-outline-size: 0;
    --uapep-dropzone-content-outline-color: var(--ui-border, var(--upaep-color-border-grey));
    --uapep-dropzone-content-hover-boxshadow: 0 0 0 0.25rem var(--ui-control-ring, rgba(82, 86, 90, 0.25));
    --uapep-dropzone-content-icon-fz: var(--upaep-fz20);
    --uapep-dropzone-content-icon-fw: var(--upaep-fw-bold);
    --uapep-dropzone-content-icon-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --uapep-dropzone-content-label-fz: var(--upaep-fz16);
    --uapep-dropzone-content-label-fw: var(--upaep-fw-bold);
    --uapep-dropzone-content-label-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --uapep-dropzone-content-label-margin: 0 0 .5rem;
    --uapep-dropzone-content-textfile-fz: var(--upaep-fz16);
    --uapep-dropzone-content-textfile-fw: var(--upaep-fw-bold);
    --uapep-dropzone-content-textfile-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --uapep-dropzone-content-dragdrop-fz: var(--upaep-fz14);
    --uapep-dropzone-content-dragdrop-fw: var(--upaep-fw-bold);
    --uapep-dropzone-content-dragdrop-color: var(--ui-accent, var(--upaep-color-red));
    --uapep-dropzone-content-dragdrop-margin: 0;
    --uapep-dropzone-content-textaccept-fz: var(--upaep-fz14);
    --uapep-dropzone-content-textaccept-fw: var(--upaep-fw-bold);
    --uapep-dropzone-content-textaccept-color: var(--ui-accent, var(--upaep-color-red));
    --uapep-dropzone-content-textaccept-margin: .5rem 0;
    --uapep-dropzone-load-deletetext-fz: var(--upaep-fz12);
    --uapep-dropzone-load-deletetext-fw: var(--upaep-fw-bold);
    --uapep-dropzone-load-deletetext-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --uapep-dropzone-load-deleteicon-fz: var(--upaep-fz14);
    --uapep-dropzone-load-deleteicon-fw: var(--upaep-fw-bold);
    --uapep-dropzone-load-deleteicon-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --uapep-dropzone-load-hover-deletetext-fz: var(--upaep-fz12);
    --uapep-dropzone-load-hover-deletetext-fw: var(--upaep-fw-bold);
    --uapep-dropzone-load-hover-deletetext-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --uapep-dropzone-load-hover-deleteicon-fz: var(--upaep-fz14);
    --uapep-dropzone-load-hover-deleteicon-fw: var(--upaep-fw-bold);
    --uapep-dropzone-load-hover-deleteicon-color: var(--ui-accent, var(--upaep-color-red));
    --uapep-dropzone-load-hover-delete-label-width: 90%;
    --uapep-dropzone-load-delete-label-fz: var(--upaep-fz16);
    --uapep-dropzone-load-delete-label-fw: var(--upaep-fw-bold);
    --uapep-dropzone-load-delete-label-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --uapep-dropzone-load-delete-label-margin: 0;
    width: var(--uapep-dropzone-width);
    height: var(--uapep-dropzone-height);

    &:has(input[readonly]) {
        opacity: 1;
        background: var(--ui-surface-3, var(--upaep-color-tenue-gray));
    }

    &:has(input[disabled]) {
        opacity: .5;
        background: var(--ui-surface-3, var(--upaep-color-tenue-gray));
    }

    & .file__input,
    &>input[type=file] {
        display: none;
    }

    & label {
        width: var(--uapep-dropzone-label-width);
        height: var(--uapep-dropzone-label-height);
    }

    & .upaep__dropzone-content {
        width: var(--uapep-dropzone-content-width);
        height: var(--uapep-dropzone-content-height);
        padding: var(--uapep-dropzone-content-padding);
        border: var(--uapep-dropzone-content-border-size) var(--uapep-dropzone-content-border-style) var(--uapep-dropzone-content-border-color);
        border-radius: var(--uapep-dropzone-content-border-radius);
        box-shadow: var(--uapep-dropzone-content-boxshadow);
        cursor: var(--uapep-dropzone-content-cursor);
        outline: var(--uapep-dropzone-content-outline-size) solid var(--uapep-dropzone-content-outline-color);

        &:hover {
            box-shadow: var(--uapep-dropzone-content-hover-boxshadow);
        }

        &:has(.upaep__dropzone-load.is-dragover) {
            --uapep-dropzone-content-boxshadow: 0 0 0 0.25rem var(--ui-control-ring, rgba(82, 86, 90, 0.25));
        }

        & .upaep__dropzone-load:not(.is-active) {
            display: none;
        }
    }

    & .upaep__dropzone-icon {
        font-size: var(--uapep-dropzone-content-icon-fz);
        color: var(--uapep-dropzone-content-icon-fw);
        font-weight: var(--uapep-dropzone-content-icon-color);
        text-align: center;
        white-space: normal;
        word-wrap: break-word;
        word-break: break-word;
    }

    & .upaep__dropzone-textlabel {
        font-size: var(--uapep-dropzone-content-label-fz);
        font-weight: var(--uapep-dropzone-content-label-fw);
        color: var(--uapep-dropzone-content-label-color);
        margin: var(--uapep-dropzone-content-label-margin);
        text-align: center;
        white-space: normal;
        word-wrap: break-word;
        word-break: break-word;
    }

    & .upaep__dropzone-button {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        & .upaep__btn.__dropzone {
            --upaep-btn-width: 90%;
            --upaep-btn-border-size: 2px;
            --upaep-btn-border-color: var(--ui-accent, var(--upaep-color-red));
            --upaep-btn-fz: var(--upaep-fz14);
            --upaep-btn-fw: var(--upaep-fw-bold);
            --upaep-btn-color: var(--ui-accent, var(--upaep-color-red));
            --upaep-btn-bg: var(--ui-surface-2, var(--upaep-color-background));
            --upaep-btn-hover-bg: var(--ui-surface-3, var(--upaep-color-tenue-gray));
            --upaep-btn-hover-border-size: 2px;
            --upaep-btn-hover-border-color: var(--ui-border, var(--upaep-color-border-grey));
            --upaep-btn-hover-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
        }
    }

    & .upaep__dragdrop {
        font-size: var(--uapep-dropzone-content-dragdrop-fz);
        font-weight: var(--uapep-dropzone-content-dragdrop-fw);
        color: var(--uapep-dropzone-content-dragdrop-color);
        margin: var(--uapep-dropzone-content-dragdrop-margin);
    }

    & .upaep__dropzone-textaccept {
        font-size: var(--uapep-dropzone-content-textaccept-fz);
        font-weight: var(--uapep-dropzone-content-textaccept-fw);
        color: var(--uapep-dropzone-content-textaccept-color);
        margin: var(--uapep-dropzone-content-textaccept-margin);
        text-align: center;
        white-space: normal;
        word-wrap: break-word;
        word-break: break-word;
    }

    & .upaep__dropzone-load,
    & .upaep__dropzone-load-delete {
        position: relative;
        width: 100%;
        height: auto;
        z-index: 5;
    }

    & .upaep__dropzone-load-delete:not(.is-active) {
        display: none;
    }

    & .upaep__dropzone-delete {
        display: flex;
        flex-direction: column;
        cursor: pointer;

        &:not(:hover) .__text {
            display: none;
        }

        & .__icon {
            font-size: var(--uapep-dropzone-load-deleteicon-fz);
            font-weight: var(--uapep-dropzone-load-deleteicon-fw);
            color: var(--uapep-dropzone-load-deleteicon-color);
            text-align: end;
        }

        &:hover .__icon {
            font-size: var(--uapep-dropzone-load-hover-deleteicon-fz);
            font-weight: var(--uapep-dropzone-load-hover-deleteicon-fw);
            color: var(--uapep-dropzone-load-hover-deleteicon-color);
            text-align: end;
        }

        & .__text {
            font-size: var(--uapep-dropzone-load-deletetext-fz);
            font-weight: var(--uapep-dropzone-load-deletetext-fw);
            color: var(--uapep-dropzone-load-deletetext-color);
            text-align: end;
            position: absolute;
            right: -50px;
        }

        &:hover .__text {
            font-size: var(--uapep-dropzone-load-hover-deletetext-fz);
            font-weight: var(--uapep-dropzone-load-hover-deletetext-fw);
            color: var(--uapep-dropzone-load-hover-deletetext-color);
            text-align: end;
            position: absolute;
            right: -50px;
        }
    }

    & .upaep__dropzone-load-delete-header {
        width: 100%;
        min-height: 1.5rem;
        height: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;

        & .upaep__dropzone-load-delete-label {
            width: var(--uapep-dropzone-load-delete-label-width);
            font-size: var(--uapep-dropzone-load-delete-label-fz);
            font-weight: var(--uapep-dropzone-load-delete-label-fw);
            color: var(--uapep-dropzone-load-delete-label-color);
            margin: var(--uapep-dropzone-load-delete-label-margin);
            text-align: start;
            white-space: normal;
            word-wrap: break-word;
            word-break: break-word;
        }
    }

    .upaep__dropzone-textfile {
        font-size: var(--uapep-dropzone-content-textfile-fz);
        font-weight: var(--uapep-dropzone-content-textfile-fw);
        color: var(--uapep-dropzone-content-textfile-color);
        margin: 0;
        text-align: center;
        white-space: normal;
        word-wrap: break-word;
        word-break: break-word;
        display: flex;
        flex-direction: column;

        & span {
            margin: 0 5px;
        }

        & .__size {
            font-size: var(--upaep-fz12);
        }
    }

    & .upaep__dropzone-load-delete-content.__horizontal {
        display: flex;
        align-items: center;
        justify-content: start;
        flex-direction: row;

        & .upaep__dropzone-icon {
            width: 50px;
            margin: 0;
        }

        & .upaep__dropzone-textfile {
            width: 100%;
            margin: 0;
            text-align: start;
        }
    }

    .upaep__dropzone-load-confirm {
        position: absolute;
        bottom: 0px;
        background: #25d366;
        width: 100%;
        left: 0;
        color: white;
        padding: 0 1rem;
        border-radius: 10px;
        animation: slideInLeft 2s;

        & p {
            margin: 0;
        }
    }

    .upaep__dropzone-load-delete-inner {
        width: 100%;
    }

    .upaep__dropzone-load-delete-item {
        &:not(:only-child) {
            margin: 1rem 0;
            padding: .5rem;
            border-bottom: 2px solid #828282;
        }
    }

}

.upaep__dropzone.is-initialized {
    --upaep-dropzone-status-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-dropzone-status-fz: var(--upaep-fz18);
    --upaep-dropzone-status-fw: var(--upaep-fw-regular);
    --upaep-dropzone-status-padding: .25rem;
    --upaep-dropzone-dragdrop-width: 100%;
    --upaep-dropzone-dragdrop-height: 100%;
    --upaep-dropzone-dragdrop-padding: 1rem;
    --upaep-dropzone-dragdrop-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-dropzone-dragdrop-border-size: 2px;
    --upaep-dropzone-dragdrop-border-style: dashed;
    --upaep-dropzone-dragdrop-border-color: #B8BABC;
    --upaep-dropzone-dragdrop-border-radius: 10px;
    --upaep-dropzone-dragdrop-hover-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-dropzone-dragdrop-hover-border-size: 2px;
    --upaep-dropzone-dragdrop-hover-border-style: dashed;
    --upaep-dropzone-dragdrop-hover-border-color: var(--upaep-color-dark-grey);
    --upaep-dropzone-dragdrop-hover-boxshadow: 0 0 0 0.25rem var(--ui-control-ring, rgba(82, 86, 90, 0.25));
    --upaep-dropzone-title-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-dropzone-title-fz: var(--upaep-fz18);
    --upaep-dropzone-title-fw: var(--upaep-fw-bold);
    --upaep-dropzone-title-align: center;
    --upaep-dropzone-subtitle-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-dropzone-subtitle-fz: var(--upaep-fz16);
    --upaep-dropzone-subtitle-fw: var(--upaep-fw-bold);
    --upaep-dropzone-subtitle-align: center;
    --upaep-dropzone-formatsize-color: var(--ui-text, var(--upaep-color-blue-primary));
    --upaep-dropzone-formatsize-fz: var(--upaep-fz14);
    --upaep-dropzone-formatsize-fw: var(--upaep-fw-regular);
    --upaep-dropzone-formatsize-align: center;
    --upaep-dropzone-file-bg: var(--ui-surface-2, var(--upaep-color-background));
    --upaep-dropzone-file-padding: .5rem;
    --upaep-dropzone-file-margin: 0 0 1rem;
    --upaep-dropzone-file-border-radius: 10px;
    --upaep-dropzone-file-title-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-dropzone-file-title-fz: var(--upaep-fz16);
    --upaep-dropzone-file-title-fw: var(--upaep-fw-semibold);
    --upaep-dropzone-file-title-align: start;
    --upaep-dropzone-file-icon-size: 30px;
    --upaep-dropzone-file-icon-height: 30px;
    --upaep-dropzone-file-icon-color: var(--ui-success, var(--upaep-color-success));
    --upaep-dropzone-file-icon-fz: var(--upaep-fz28);
    --upaep-dropzone-file-text-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-dropzone-file-text-fz: var(--upaep-fz18);
    --upaep-dropzone-file-name-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-dropzone-file-name-fz: var(--upaep-fz15);
    --upaep-dropzone-file-name-fw: var(--upaep-fw-semibold);
    --upaep-dropzone-file-size-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-dropzone-file-size-fz: var(--upaep-fz12);
    --upaep-dropzone-file-size-fw: var(--upaep-fw-semibold);
    --upaep-dropzone-file-delete-width: 20px;
    --upaep-dropzone-file-delete-height: 20px;
    --upaep-dropzone-file-delete-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-dropzone-file-delete-fz: var(--upaep-fz16);
    --upaep-dropzone-file-delete-hover-color: var(--ui-accent, var(--upaep-color-red));

    &.is-initialized {
        height: 100%;
    }

    &.is-rejected {
        --upaep-dropzone-status-color: var(--ui-danger, var(--upaep-color-error));
    }

    &.is-approved {
        --upaep-dropzone-status-color: var(--ui-success, var(--upaep-color-success));
    }

    &.is-revision {
        --upaep-dropzone-status-color: var(--ui-info, var(--upaep-color-blue-sky));
    }

    &.is-rejected,
    &.is-approved,
    &.is-revision {
        .upaep__dropzone-area {
            border: 2px solid var(--upaep-dropzone-status-color);
            border-radius: 8px;
            padding: 1rem;
        }
    }

    &.is-upload:not(:has(input[type=file][multiple])) {
        .upaep__dropzone-area {
            display: none;
        }
    }

    &.is-uploading {
        .upaep__dropzone-dragdrop {
            background: var(--upaep-dropzone-dragdrop-hover-bg);
            border: var(--upaep-dropzone-dragdrop-hover-border-size) var(--upaep-dropzone-dragdrop-hover-border-style) var(--upaep-dropzone-dragdrop-hover-border-color);
            box-shadow: var(--upaep-dropzone-dragdrop-hover-boxshadow);
        }
    }

    &:not(.is-upload) {
        .upaep__dropzone-simple {
            display: none;
        }

        .upaep__dropzone-files-clear {
            display: none;
        }
    }

    .upaep__dropzone-area {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .upaep__dropzone-inner {
        width: 100%;
        height: 100%;
        padding: 1rem;
        display: flex;
        gap: 1rem;
    }

    .upaep__dropzone-status {
        color: var(--upaep-dropzone-status-color);
        font-size: var(--upaep-dropzone-status-fz);
        font-weight: var(--upaep-dropzone-status-fw);
        padding: var(--upaep-dropzone-status-padding);
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: start;
        flex-wrap: wrap;
        gap: .5rem;
    }

    .upaep__dropzonse-status-icon {
        width: 30px;
        flex: 1 0 0;
    }

    .upaep__dropzone-status-text {
        width: 80%;
        margin: 0;
    }

    .upaep__dropzone-status-description {
        width: 100%;
        margin: 0;
    }

    .upaep__dropzone-label {
        width: 100%;
        height: 100%;
    }

    .upaep__dropzone-dragdrop {
        width: var(--upaep-dropzone-dragdrop-width);
        height: var(--upaep-dropzone-dragdrop-height);
        padding: var(--upaep-dropzone-dragdrop-padding);
        background: var(--upaep-dropzone-dragdrop-bg);
        border: var(--upaep-dropzone-dragdrop-border-size) var(--upaep-dropzone-dragdrop-border-style) var(--upaep-dropzone-dragdrop-border-color);
        border-radius: var(--upaep-dropzone-dragdrop-border-radius);
        display: flex;
        flex-direction: column;
        cursor: pointer;

        &:hover {
            background: var(--upaep-dropzone-dragdrop-hover-bg);
            border: var(--upaep-dropzone-dragdrop-hover-border-size) var(--upaep-dropzone-dragdrop-hover-border-style) var(--upaep-dropzone-dragdrop-hover-border-color);
            box-shadow: var(--upaep-dropzone-dragdrop-hover-boxshadow);
        }
    }

    .upaep__dropzone-title {
        color: var(--upaep-dropzone-title-color);
        font-size: var(--upaep-dropzone-title-fz);
        font-weight: var(--upaep-dropzone-title-fw);
        text-align: var(--upaep-dropzone-title-align);
        word-wrap: break-word;
    }

    .upaep__dropzone-subtitle {
        color: var(--upaep-dropzone-subtitle-color);
        font-size: var(--upaep-dropzone-subtitle-fz);
        font-weight: var(--upaep-dropzone-subtitle-fw);
        text-align: var(--upaep-dropzone-subtitle-align);
        word-wrap: break-word;
    }

    .upaep_dropzone-button {
        width: auto;

        .upaep__btn {
            --upaep-btn-margin: .5rem auto;
        }
    }

    .upaep__dropzone-formatsize {
        color: var(--upaep-dropzone-formatsize-color);
        font-size: var(--upaep-dropzone-formatsize-fz);
        font-weight: var(--upaep-dropzone-formatsize-fw);
        text-align: var(--upaep-dropzone-formatsize-align);
        word-wrap: break-word;
    }

    .upaep__dropzone-preview {
        width: 100%;
    }

    .upaep__dropzone-simple {
        width: 100%;

        .upaep__dropzone-file {
            height: 100%;
        }

        &:not(:has(.upaep__dropzone-file-title:empty)) .upaep__dropzone-file-delete {
            position: absolute;
            inset: 50% 8px auto auto;
            translate: 0 -50%;
        }
    }

    .upaep__dropzone-files {
        width: 100%;
        height: 100%;
        list-style: none;
        padding: .5rem;
        margin: 0;
    }

    .upaep__dropzone-multiple {
        width: 50%;

        .upaep__dropzone-files {
            overflow: hidden;
            overflow-y: auto;
            scrollbar-width: thin;
        }

    }

    .upaep__dropzone-files-clear {
        width: 100%;
        display: flex;
        justify-content: end;

        .upaep__btn {
            --upaep-btn-padding: .5rem .75rem;
            --upaep-btn-margin: .5rem;
        }
    }

    .upaep__dropzone-file {
        background: var(--upaep-dropzone-file-bg);
        padding: var(--upaep-dropzone-file-padding);
        border-radius: var(--upaep-dropzone-file-border-radius);
        box-shadow: var(--ui-shadow, var(--upaep-box-shadow));
        width: 100%;
        position: relative;

        &:not(:only-child) {
            margin: var(--upaep-dropzone-file-margin);
        }
    }

    .upaep__dropzone-file-inner {
        width: 100%;
        display: flex;
        gap: .5rem;
        align-items: center;
        justify-content: start;
    }

    .upaep__dropzone-file-header {
        width: 100%;
        display: flex;
        gap: .5rem;
        align-items: center;
        justify-content: space-between;
    }

    .upaep__dropzone-file-title {
        color: var(--upaep-dropzone-file-title-color);
        font-size: var(--upaep-dropzone-file-title-fz);
        font-weight: var(--upaep-dropzone-file-title-fw);
        text-align: var(--upaep-dropzone-file-title-align);
        word-wrap: break-word;
    }

    .upaep__dropzone-file-icon {
        width: var(--upaep-dropzone-file-icon-width);
        height: var(--upaep-dropzone-file-icon-height);
        color: var(--upaep-dropzone-file-icon-color);
        font-size: var(--upaep-dropzone-file-icon-fz);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .upaep__dropzone-file-text {
        width: calc(100% - var(--upaep-dropzone-file-icon-size) - calc(var(--upaep-dropzone-file-delete-width) * 2));
        color: var(--upaep-dropzone-file-text-color);
        font-size: var(--upaep-dropzone-file-text-fz);
        word-wrap: break-word;
    }

    .upaep__dropzone-file-name {
        color: var(--upaep-dropzone-file-name-color);
        font-size: var(--upaep-dropzone-file-name-fz);
        font-weight: var(--upaep-dropzone-file-name-fw);
        margin: 0;
        line-height: 1.2;
    }

    .upaep__dropzone-file-size {
        color: var(--upaep-dropzone-file-size-color);
        font-size: var(--upaep-dropzone-file-size-fz);
        font-weight: var(--upaep-dropzone-file-size-fw);
        margin: 0;
        line-height: 1.2;
    }

    .upaep__dropzone-file-delete {
        width: var(--upaep-dropzone-file-delete-width);
        height: var(--upaep-dropzone-file-delete-height);
        color: var(--upaep-dropzone-file-delete-color);
        font-size: var(--upaep-dropzone-file-delete-fz);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        position: absolute;
        inset: 8px 8px auto auto;

        &:hover {
            color: var(--upaep-dropzone-file-delete-hover-color);
        }
    }

}

.upaep__dropzone.__load-noborder:has(.upaep__dropzone-load-delete.is-active) .upaep__dropzone-content {
    border: none;
}

.upaep__dropzone.__load-boxshadow:has(.upaep__dropzone-load-delete.is-active) {
    --uapep-dropzone-content-boxshadow: var(--ui-shadow, var(--upaep-box-shadow));
}

.upaep__dropzone:has(.upaep__dropzone-load-delete.is-active) .upaep__dropzone-content:hover {
    --uapep-dropzone-content-cursor: default;
}

.upaep__dropzone:has(.file__input:required) .upaep__dropzone-textlabel::before {
    font-family: var(--upaep-ff-fontawesome);
    content: '\2a';
    color: var(--ui-accent, var(--upaep-color-red));
    margin: 5px;
    font-size: var(--upaep-fz10);
}

.upaep__dropzone-multiple-item .__icon,
.upaep__dropzone-load .__icon,
.upaep__dropzone-load-delete-content .__icon {
    font-family: var(--upaep-ff-fontawesome);
    font-size: var(--upaep-fz30);
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    &.__regular {
        font-weight: var(--upaep-fw-medium);
    }

    &.__file {
        font-weight: var(--upaep-fw-medium);

        &::before {
            content: '\f15b';
        }
    }

    &.__check::before {
        content: '\f058';
        color: #25d366;
    }
}


.was-validated .upaep__dropzone:has(input[type=file]:invalid),
.__validated .upaep__dropzone:has(input[type=file]:invalid),
.upaep__dropzone:has(input[type=file].is-error),
.upaep__dropzone:has(input[type=file].is-invalid) {
    --uapep-dropzone-content-border-color: var(--ui-danger, var(--upaep-color-error));
    --uapep-dropzone-content-hover-boxshadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
    --upaep-dropzone-dragdrop-border-color: var(--ui-danger, var(--upaep-color-error));
    --upaep-dropzone-dragdrop-hover-border-color: var(--ui-danger, var(--upaep-color-error));
    --upaep-dropzone-dragdrop-hover-boxshadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

.upaep__dropzone:has(input[type=file].is-warning) {
    --uapep-dropzone-content-border-color: var(--ui-warning, var(--upaep-color-warning));
    --uapep-dropzone-content-hover-boxshadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
    --upaep-dropzone-dragdrop-border-color: var(--ui-warning, var(--upaep-color-warning));
    --upaep-dropzone-dragdrop-hover-border-color: var(--ui-warning, var(--upaep-color-warning));
    --upaep-dropzone-dragdrop-hover-boxshadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
}

.was-validated .upaep__dropzone:has(input[type=file]:valid),
.__validated .upaep__dropzone:has(input[type=file]:valid),
.upaep__dropzone:has(input[type=file].is-success),
.upaep__dropzone:has(input[type=file].is-valid) {
    --uapep-dropzone-content-border-color: var(--ui-success, var(--upaep-color-success));
    --uapep-dropzone-content-hover-boxshadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.25);
    --upaep-dropzone-dragdrop-border-color: var(--ui-success, var(--upaep-color-success));
    --upaep-dropzone-dragdrop-hover-border-color: var(--ui-success, var(--upaep-color-success));
    --upaep-dropzone-dragdrop-hover-boxshadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.25);
}

/*? ------ Loader ------ */
.upaep__spinner {
    width: 100%;
    height: 100%;
    position: fixed;
    inset: 0;
    z-index: var(--upaep-zindex-spinner);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;

    &.__white {
        background: var(--upaep-gradient-white);
    }

    &.__dark {
        background: var(--upaep-gradient-dark);
    }

    &:not(.is-active) {
        display: none;
    }

    &.__realtive {
        position: relative !important;
        height: auto !important;
    }
}

.upaep__loader-1,
.upaep__loader1 {
    --upaep-loader-width: 56px;
    --upaep-loader-height: 56px;
    --upaep-loader-color-primary: var(--upaep-color-dark-grey);
    --upaep-loader-color-secondary: var(--ui-accent, var(--upaep-color-red));
    --upaep-loader-primary-width: 33.6px;
    --upaep-loader-primary-height: 33.6px;
    --upaep-loader-secondary-width: 56px;
    --upaep-loader-secondary-height: 56px;
    width: var(--upaep-loader-width);
    height: var(--upaep-loader-height);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    &::before,
    &::after {
        border-radius: 50%;
        position: absolute;
        content: '';
        display: block;
    }

    &::before {
        width: var(--upaep-loader-primary-width);
        height: var(--upaep-loader-primary-height);
        border: 6.7px solid var(--upaep-loader-color-primary);
        border-bottom-color: transparent;
        border-left-color: transparent;
        animation: rotation1 0.75s infinite linear reverse;
    }


    &::after {
        animation: rotation1 0.5s infinite linear;
        border: 6.7px solid var(--upaep-loader-color-secondary);
        height: var(--upaep-loader-secondary-width);
        width: var(--upaep-loader-secondary-height);
        border-right-color: transparent;
        border-top-color: transparent;
    }
}

@keyframes rotation1 {
    to {
        transform: rotate(360deg);
    }
}

.upaep__loader-2,
.upaep__loader2 {
    --upaep-loader-color-primary: var(--upaep-color-dark-grey);
    --upaep-loader-color-secondary: var(--ui-accent, var(--upaep-color-red));
    --upaep-loader-primary-width: 56px;
    --upaep-loader-primary-height: 56px;
    --upaep-loader-secondary-width: 30px;
    --upaep-loader-secondary-height: 30px;
    width: var(--upaep-loader-primary-width);
    height: var(--upaep-loader-primary-height);
    border-radius: 50%;
    display: inline-block;
    position: relative;
    border: 6.5px solid;
    border-color: var(--upaep-loader-color-primary) var(--upaep-loader-color-primary) transparent;
    box-sizing: border-box;
    animation: rotation2 1s linear infinite;

    &::after {
        content: '';
        box-sizing: border-box;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        border: 6.5px solid;
        border-color: transparent var(--upaep-loader-color-secondary) var(--upaep-loader-color-secondary);
        width: var(--upaep-loader-secondary-width);
        height: var(--upaep-loader-secondary-height);
        border-radius: 50%;
        animation: rotationBack2 0.5s linear infinite;
        transform-origin: center center;
    }
}

@keyframes rotation2 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes rotationBack2 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-360deg);
    }
}


.upaep__loader-3,
.upaep__loader3 {
    --upaep-loader-width: 60px;
    --upaep-loader-height: 60px;
    --upaep-loader-color-primary: var(--upaep-color-dark-grey);
    --upaep-loader-color-secondary: var(--ui-accent, var(--upaep-color-red));
    --upaep-loader-color-tertiary: var(--upaep-color-dark-grey);
    --upaep-loader-primary-width: 40px;
    --upaep-loader-primary-height: 40px;
    --upaep-loader-secondary-width: 30px;
    --upaep-loader-secondary-height: 30px;
    width: var(--upaep-loader-width);
    height: var(--upaep-loader-height);
    border-radius: 50%;
    display: inline-block;
    position: relative;
    border: 6.5px solid;
    border-color: var(--upaep-loader-color-primary) var(--upaep-loader-color-primary) transparent transparent;
    box-sizing: border-box;
    animation: rotation3 1s linear infinite;

    &::after,
    &::before {
        content: '';
        box-sizing: border-box;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        border: 6.5px solid;
        border-color: transparent transparent var(--upaep-loader-color-secondary) var(--upaep-loader-color-secondary);
        width: var(--upaep-loader-primary-width);
        height: var(--upaep-loader-primary-height);
        border-radius: 50%;
        box-sizing: border-box;
        animation: rotationBack3 0.5s linear infinite;
        transform-origin: center center;
    }

    &::before {
        width: var(--upaep-loader-secondary-width);
        height: var(--upaep-loader-secondary-height);
        border-color: var(--upaep-loader-color-tertiary) var(--upaep-loader-color-tertiary) transparent transparent;
        animation: rotation3 1.5s linear infinite;
    }
}

@keyframes rotation3 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes rotationBack3 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-360deg);
    }
}

.upaep__loader-4,
.upaep__loader4 {
    --upaep-loader-width: 60px;
    --upaep-loader-height: 60px;
    --upaep-loader-color-primary: var(--upaep-color-dark-grey);
    --upaep-loader-color-secondary: var(--ui-accent, var(--upaep-color-red));
    --upaep-loader-primary-width: 40px;
    --upaep-loader-primary-height: 40px;
    --upaep-loader-secondary-width: 30px;
    --upaep-loader-secondary-height: 30px;
    width: var(--upaep-loader-width);
    height: var(--upaep-loader-height);
    display: grid;
    border: 6.5px solid #0000;
    border-radius: 50%;
    border-right-color: var(--upaep-loader-color-primary);
    animation: rotation4 1s infinite linear;

    &::before,
    &::after {
        content: "";
        grid-area: 1/1;
        margin: 2.2px;
        border: inherit;
        border-radius: 50%;
        animation: rotation4 2s infinite;
    }

    &::before {
        border-right-color: var(--upaep-loader-color-secondary);
    }

    &.upaep__loader4::after {
        margin: 8.9px;
        animation-duration: 3s;
    }
}

@keyframes rotation4 {
    100% {
        transform: rotate(1turn);
    }
}

.upaep__loader-5,
.upaep__loader5 {
    --upaep-loader-width: 60px;
    --upaep-loader-height: 60px;
    --upaep-loader-color-primary: var(--upaep-color-dark-grey);
    --upaep-loader-color-secondary: var(--ui-accent, var(--upaep-color-red));
    --upaep-loader-primary-width: 60px;
    --upaep-loader-primary-height: 60px;
    --upaep-loader-secondary-width: 60px;
    --upaep-loader-secondary-height: 60px;
    width: var(--upaep-loader-primary-width);
    height: var(--upaep-loader-primary-height);
    border-radius: 50%;
    display: inline-block;
    border-top: 6.5px solid var(--upaep-loader-color-primary);
    border-right: 6.5px solid transparent;
    box-sizing: border-box;
    animation: rotation5 1s linear infinite;

    &::after {
        content: '';
        box-sizing: border-box;
        position: absolute;
        left: 0;
        top: 0;
        width: var(--upaep-loader-secondary-width);
        height: var(--upaep-loader-secondary-height);
        border-radius: 50%;
        border-left: 6.5px solid var(--upaep-loader-color-secondary);
        border-bottom: 6.5px solid transparent;
        animation: rotation5 0.5s linear infinite reverse;
    }
}

@keyframes rotation5 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


.upaep__loader-6,
.upaep__loader6 {
    --upaep-loader-width: 60px;
    --upaep-loader-height: 60px;
    --upaep-loader-color-primary: var(--upaep-color-dark-grey);
    --upaep-loader-color-secondary: var(--ui-accent, var(--upaep-color-red));
    width: var(--upaep-loader-width);
    height: var(--upaep-loader-height);
    display: grid;
    animation: rotation6 4s infinite;


    &::before,
    &::after {
        content: "";
        grid-area: 1/1;
        border: 8px solid;
        border-radius: 50%;
        border-color: var(--upaep-loader-color-secondary) var(--upaep-loader-color-secondary) #0000 #0000;
        mix-blend-mode: darken;
        animation: rotation6 1s infinite linear;
    }

    &::after {
        border-color: #0000 #0000 var(--upaep-loader-color-primary) var(--upaep-loader-color-primary);
        animation-direction: reverse;
    }
}

@keyframes rotation6 {
    100% {
        transform: rotate(1turn)
    }
}

.upaep__loader-bounce,
.upaep__loader_bounce {
    --upaep-loader-width: 60px;
    --upaep-loader-height: 60px;
    --upaep-loader-color-primary: var(--ui-accent, var(--upaep-color-red));
    width: var(--upaep-loader-width);
    height: var(--upaep-loader-height);
    background: var(--upaep-loader-color-primary);
    display: block;
    animation: loaderbounce 3.5s linear 0s infinite normal none;
}

@keyframes loaderbounce {
    0% {}

    10% {
        transform: translate(0, -50%) rotate(90deg);
    }

    20% {
        transform: translate(0) rotate(90deg);
    }

    30% {
        transform: translate(0, -50%) rotate(180deg);
    }

    40% {
        transform: translate(0) rotate(180deg);
    }

    50% {
        transform: translate(0, -50%) rotate(270deg);
    }

    60% {
        transform: translate(0) rotate(270deg);
    }

    70% {
        transform: translate(0, -50%) rotate(360deg);
    }

    80% {
        transform: translate(0) rotate(360deg);
    }

    100% {}
}


.upaep__loader-scaledown,
.upaep__loader_scaledown {
    --upaep-loader-width: 60px;
    --upaep-loader-height: 60px;
    --upaep-loader-color-primary: var(--ui-accent, var(--upaep-color-red));
    width: var(--upaep-loader-width);
    height: var(--upaep-loader-height);
    background: var(--upaep-loader-color-primary);
    display: block;
    animation: rotate-scaledown 1s linear infinite both;
}

@keyframes rotate-scaledown {
    0% {
        transform: scale(1) rotateZ(0);
    }

    50% {
        transform: scale(0.5) rotateZ(180deg);
    }

    100% {
        transform: scale(1) rotateZ(360deg);
    }
}

.upaep__loader-rotate,
.upaep__loader_rotate {
    --upaep-loader-width: 60px;
    --upaep-loader-height: 60px;
    --upaep-loader-color-primary: var(--ui-accent, var(--upaep-color-red));
    width: var(--upaep-loader-width);
    height: var(--upaep-loader-height);
    background: var(--upaep-loader-color-primary);
    display: block;
    animation: rotate-center 1s ease-in-out infinite both;
}

@keyframes rotate-center {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

.upaep__loader-basic,
.spinner_basic {
    --upaep-loader-width: 60px;
    --upaep-loader-height: 60px;
    --upaep-loader-color-primary: var(--ui-accent, var(--upaep-color-red));
    --upaep-loader-color-secondary: var(--upaep-color-dark-grey);

    &::before {
        content: '';
        display: block;
        height: var(--upaep-loader-width);
        width: var(--upaep-loader-height);
        -webkit-animation: spin .5s infinite linear;
        animation: spin .5s infinite linear;
        border: 6px var(--upaep-loader-color-primary) solid;
        border-left-color: var(--upaep-loader-color-secondary);
        border-radius: 100%;
    }
}

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

.upaep_logo::before {
    width: 100%;
    height: 100%;
    display: flex;
    border-radius: 5px;
    content: "";
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNy41LjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDE1MC41IDE1MC41IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxNTAuNSAxNTAuNTsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4NCgkuc3Qwe2ZpbGw6I0ZGMDAwMDt9DQoJLnN0MXtmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxyZWN0IGNsYXNzPSJzdDAiIHdpZHRoPSIxNTAuNSIgaGVpZ2h0PSIxNTAuNSIvPg0KPGc+DQoJPHBhdGggY2xhc3M9InN0MSIgZD0iTTkyLjYsODcuMWMwLDExLjMtNS41LDE3LjgtMTcuMywxNy44Yy0xMS44LDAtMTcuMy02LjQtMTcuMy0xNy44VjIzLjVINDUuNHY2My44YzAsMTguOSwxMS44LDI4LjQsMjkuOSwyOC40DQoJCWMxOC4yLDAsMjkuOS05LjUsMjkuOS0yOC40VjIzLjZMOTIuNiwzNi4yVjg3LjF6IE0xMjAuNSw4Ny40VjIzLjVoLTEyLjZ2NjMuOGMwLDIwLjctMTIuOSwzMS4xLTMyLjYsMzEuMQ0KCQljLTE5LjYsMC0zMi42LTEwLjQtMzIuNi0zMS4xVjIzLjVoMEwzMC4xLDM2djUxLjRjMCwyOCwxOS4yLDQxLjgsNDUuMiw0MS44QzEwMS4zLDEyOS4zLDEyMC41LDExNS41LDEyMC41LDg3LjQiLz4NCjwvZz4NCjwvc3ZnPg0K');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.upaep_logo_transparente::before {
    width: 100%;
    height: 100%;
    display: flex;
    border-radius: 5px;
    content: "";
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAYAAAA4TnrqAAADlElEQVR4Xu2aIVAjQRBFkUgkMhKJPIlEIpGRSOTJSNydu3PEIQ+H5BwSeTISeRLZNy/TW2w+O1ubkEyWq35VU1R2d/70/u3uHVI5OAiCIAiCIAiCIAiGYmZHaRyncdExzvX6beJrM3TdZhzqnL2RgvmWxlkaU+tmoXO2heU1ry2vX+JI5+0Fy0ZBdbPsbb3xm2VvRkFVs2x1rXGbZatGQTWz7P064zXL3hsFVcyy7jXGaZZ1GwU7N8vK+qM1q0QNsxYq7IRZCjoq7IRZCjoq7IRZCjoq7IRZCjoq7IRZCjoq7IRZCjoq7IRZCjoq7IRZCjoq7IRZCjoq7IRZCjoq7IRZCjoq7IRZCjoq7IRZCjoq7IRZCjoq7IRZCjoq7IRZCjoq7IRZCjoq7IRZCjoq7IRZCjoq7IRZCjoq7IRZCjoq7IRZCjoq7IRZCjoq7IRZCjoq7Hw6s86tbNaL6myClc26spGa9aqROBiFYV28qs4mJJ2/KuxcWv7RWieqU4209osG41AKX/Rgiw8/XRVswUMiu7rYyoPaiLT4H43GuUljogdbXKjWOlh/mZ2m8VUPOlvplxuRFr/XaByOH1q5VG5Uax2Yr4IOmc66P/WE86ha1UiLf9donGUTT3/nesLBxI1KkXk+v4sHv2ahJ5y5yNXDehqp5Z7Vd/5O9YaQ5t2qUAt6FWVY4kr1qmH559slyDpKotTX4NYG/tSa69L4sTp9BUqQrJvpiRYT1a1KCuBRI3LYVmDmVE8ImElGHKs2WH5RcH7RntQBb2DWK5Xo/vpVg/WbcWs5I37J8RJkx3Mav9N48s9DePJYSo0frjX26lg2o3RTZBd9i2swYRegS/mVNsGwLFGNfS9YeRMIGHZm+Ybu5NxHIfsoPZp6qfxgpjHvDcuZ8ygBtsEwypXrMLaUiUNBb1lWlh9Enx49cdBLpBopoBPrf7rAZpEMa0wjM4aCQZRcYzqjtM9rYM6pxjoKrL9vNHAD3OTE53DTZAdvMxo0hs7978yPo7vsOczz433Z1DBtxzc6LDf00rcRbbiGEsE4soW+Q3YutxCWMxBjms0t5q3zkphKaOPEciYsJPha8BAuNaZRYzkrHuRGdg098ERj+TRYLjHKbZcsbJ//920Ty02cbzCH7uSHQg/7XCW3DpbLE+Pmtl7GNS+Ee8vZOlHt/x7LWcdbsHnrYSRmMPh85ufHtbEMgiAIgiAIgmDk/AOMWLsXg6YxngAAAABJRU5ErkJggg==');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.upaep__loader-grow,
.upaep__loader-border {
    display: inline-block;
    width: var(--upaep-loader-width);
    height: var(--upaep-loader-height);
    vertical-align: var(--upaep-loader-vertical-align);
    border-radius: 50%;
    animation: var(--upaep-loader-animation-speed) linear infinite var(--upaep-loader-animation-name);
}

.upaep__loader-border {
    --upaep-loader-width: 1rem;
    --upaep-loader-height: 1rem;
    --upaep-loader-vertical-align: -0.125em;
    --upaep-loader-border-size: 0.25em;
    --upaep-loader-animation-speed: 0.8s;
    --upaep-loader-animation-name: spinnerBorder;
    border: var(--upaep-loader-border-size) solid currentcolor;
    border-right-color: transparent;
}

.upaep__loader-grow {
    --upaep-loader-width: 1rem;
    --upaep-loader-height: 1rem;
    --upaep-loader-vertical-align: -0.125em;
    --upaep-loader-animation-speed: 0.8s;
    --upaep-loader-animation-name: spinnerGrow;
    background-color: currentcolor;
    opacity: 0;
}

@keyframes spinnerBorder {
    to {
        transform: rotate(360deg);
    }
}

@keyframes spinnerGrow {
    0% {
        transform: scale(0);
    }

    50% {
        opacity: 1;
        transform: none;
    }
}

.upaep__loader-swap {
    --upaep-loader-size: 50px;
    --upaep-loader-color-primary: var(--upaep-color-dark-grey);
    --upaep-loader-color-secondary: var(--ui-accent, var(--upaep-color-red));

    &:after,
    &:before {
        border-radius: 100%;
        content: '';
        height: var(--upaep-loader-size);
        width: var(--upaep-loader-size);
        opacity: .5;
        position: absolute;
    }

    &:after {
        animation: swap 1.5s -0.75s infinite;
        background-color: var(--upaep-loader-color-primary);
    }

    &:before {
        animation: swap 1.5s infinite;
        background-color: var(--upaep-loader-color-secondary);
    }
}

@keyframes swap {

    0%,
    100% {
        transform: scale(0);
    }

    50% {
        transform: scale(1);
    }
}

/*? ------ Navegación ------ */
.upaep__content-botones-menu,
.upaep__menu-bar {
    --upaep-menubar-width: auto;
    --upaep-menubar-maxwidth: auto;
    --upaep-menubar-height: auto;
    --upaep-menubar-position: relative;
    --upaep-menubar-inset: 0 0 auto auto;
    --upaep-menubar-scale: 1;
    --upaep-menubar-content-width: auto;
    --upaep-menubar-content-height: auto;
    --upaep-menubar-content-bg: rgb(0 0 0 / 31%);
    --upaep-menubar-content-padding: 1rem .5rem;
    --upaep-menubar-content-border-radius: 50px;
    --upaep-menubar-content-filter: var(--upaep-drop-shadow);
    --upaep-menubar-content-direction: column;
    --upaep-menubar-content-icon-width: 50px;
    --upaep-menubar-content-icon-height: 50px;
    --upaep-menubar-content-icon-bg: var(--upaep-color-white);
    --upaep-menubar-content-icon-padding: .8rem;
    --upaep-menubar-content-text-fz: var(--upaep-fz14);
    --upaep-menubar-content-text-fw: var(--upaep-fw-bold);
    --upaep-menubar-content-text-color: var(--upaep-color-white);
    --upaep-menubar-content-text-margin: 0;
    --upaep-menubar-content-text-align: center;
    --upaep-menubar-content-item-padding: 1rem 0;
    --upaep-menubar-content-item-margin: 0;
    --upaep-menubar-content-item-direction: column;
    --upaep-menubar-content-item-scale: 1;
    width: var(--upaep-menubar-width);
    max-width: var(--upaep-menubar-maxwidth);
    height: var(--upaep-menubar-height);
    position: var(--upaep-menubar-position);
    inset: var(--upaep-menubar-inset);
    scale: var(--upaep-menubar-scale);
    display: flex;
    justify-content: center;
    z-index: var(--upaep-zindex-menubar);
}

.upaep__content-botones-menu .upaep__banner-buttons,
.upaep__menu-bar .upaep__menu-bar-content {
    width: var(--upaep-menubar-content-width);
    max-width: var(--upaep-menubar-content-maxwidth);
    height: var(--upaep-menubar-content-height);
    background: var(--upaep-menubar-content-bg);
    padding: var(--upaep-menubar-content-padding);
    border-radius: var(--upaep-menubar-content-border-radius);
    filter: var(--upaep-menubar-content-filter);
    flex-direction: var(--upaep-menubar-content-direction);
    display: flex;
    justify-content: space-around;
    align-items: center;
    transition: all .5s;
}

.upaep__content-botones-menu .upaep__content-button-circle,
.upaep__menu-bar .upaep__menu-bar-item {
    padding: var(--upaep-menubar-content-item-padding);
    margin: var(--upaep-menubar-content-item-margin);
    flex-direction: var(--upaep-menubar-content-item-direction);
    scale: var(--upaep-menubar-content-item-scale);
    display: flex;
    align-items: center;
    gap: 5px;
    flex: auto;
    transition: all .5s;
}

.upaep__content-botones-menu .upaep__content-button-circle .upaep__btn.__menu-circle {
    --upaep-btn-padding: .8rem;
    --upaep-btn-margin: 0;
    --upaep-btn-border-color: var(--upaep-color-white);
    --upaep-btn-border-radius: 50px;
    --upaep-btn-width: 50px;
    --upaep-btn-height: 50px;
    --upaep-btn-bg: var(--upaep-color-white);
    --upaep-btn-hover-bg: var(--upaep-color-white);
    --upaep-btn-hover-border-color: var(--upaep-color-white);
}

.upaep__content-botones-menu .upaep__content-button-circle .upaep__btn.__menu-circle img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.upaep__menu-bar a.upaep__menu-bar-item {
    text-decoration: none;
    user-select: none;
    cursor: pointer;
}

.upaep__menu-bar a.upaep__menu-bar-item:hover {
    text-decoration: none;
}

.upaep__menu-bar .upaep__menu-bar-item .upaep__menu-bar-icon {
    width: var(--upaep-menubar-content-icon-width);
    height: var(--upaep-menubar-content-icon-height);
    background: var(--upaep-menubar-content-icon-bg);
    padding: var(--upaep-menubar-content-icon-padding);
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.upaep__menu-bar .upaep__menu-bar-item .upaep__menu-bar-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.upaep__menu-bar .upaep__menu-bar-item .upaep__menu-bar-text p,
.upaep__content-botones-menu .upaep__text-menu {
    font-size: var(--upaep-menubar-content-text-fz);
    font-weight: var(--upaep-menubar-content-text-fw);
    color: var(--upaep-menubar-content-text-color);
    margin: var(--upaep-menubar-content-text-margin);
    text-align: var(--upaep-menubar-content-text-align);
    font-family: var(--upaep-ff-fira-sans-condensed);
}

.upaep__menu-bar.__red {
    --upaep-menubar-content-bg: var(--ui-accent, var(--upaep-color-red));
}

.upaep__menu-bar.is-scrolling {
    --upaep-menubar-position: fixed;
    --upaep-menubar-content-bg: none;
}

.upaep__menu-bar.__horizontal {
    --upaep-menubar-width: 100%;
    --upaep-menubar-position: relative;
    --upaep-menubar-inset: auto auto 20px 0;
    --upaep-menubar-content-width: 80%;
    --upaep-menubar-content-padding: .5rem;
    --upaep-menubar-content-direction: row;
    --upaep-menubar-content-icon-bg: var(--upaep-color-white);
    --upaep-menubar-content-icon-padding: .5rem;
    --upaep-menubar-content-text-fz: var(--upaep-fz18);
    --upaep-menubar-content-text-color: var(--upaep-color-white);
    --upaep-menubar-content-item-padding: 0 .5rem;
    --upaep-menubar-content-item-direction: row;

    &.is-scrolling {
        --upaep-menubar-width: 100%;
        --upaep-menubar-content-direction: row;
        animation: fadeOut .5s forwards;
    }
}


@keyframes fadeOut {
    to {
        overflow: hidden;
        max-height: 0;
        margin: 0;
        padding: 0;
        opacity: 0;
    }
}

/*? ------ Notificaciones / toast ------ */
.upaep__notification,
.upaep__toast {
    --upaep-notification-width: 350px;
    --upaep-notification-height: auto;
    --upaep-notification-maxwidth: 100%;
    --upaep-notification-padding: 0;
    --upaep-notification-margin: .5rem;
    --upaep-notification-border-size: 1px;
    --upaep-notification-border-style: solid;
    --upaep-notification-border-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-notification-border-radius: 10px;
    --upaep-notification-boxshadow: var(--ui-shadow, var(--upaep-box-shadow));
    --upaep-notification-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-notification-position: relative;
    --upaep-notification-inset: ;
    --upaep-notification-animation: fade_in;
    --upaep-notification-animation-duration: .55s;
    --upaep-notification-animation-out: hideNotification-right;
    --upaep-notification-animation-out-duration: .3s;
    --upaep-notification-close-content: "\f00d";
    --upaep-notification-close-fz: var(--upaep-fz20);
    --upaep-notification-close-fw: var(--upaep-fw-bold);
    --upaep-notification-close-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-notification-close-padding: 0 .5rem;
    --upaep-notification-close-margin: 0;
    --upaep-notification-close-hover-content: "\f00d";
    --upaep-notification-close-hover-fz: var(--upaep-fz20);
    --upaep-notification-close-hover-fw: var(--upaep-fw-bold);
    --upaep-notification-close-hover-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-notification-close-hover-padding: 0 .5rem;
    --upaep-notification-close-hover-margin: 0;
    --upaep-notification-header-padding: .5rem .75rem;
    --upaep-notification-header-bg: transparent;
    --upaep-notification-header-border-radius: 10px 10px 0 0;
    --upaep-notification-header-border-bottom-size: 1px;
    --upaep-notification-header-border-bottom-style: solid;
    --upaep-notification-header-border-bottom-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-notification-header-title-fz: var(--upaep-fz18);
    --upaep-notification-header-title-fw: var(--upaep-fw-bold);
    --upaep-notification-header-title-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-notification-header-title-padding: 0 .5rem;
    --upaep-notification-header-title-margin: 0 auto 0 0;
    --upaep-notification-content-padding: .5rem;
    --upaep-notification-content-bg: transparent;
    --upaep-notification-content-icons-width: 100%;
    --upaep-notification-content-icons-height: auto;
    --upaep-notification-content-icons-padding: 0 .35rem;
    --upaep-notification-content-icons-margin: 0;
    --upaep-notification-content-icon-width: 100%;
    --upaep-notification-content-icon-height: auto;
    --upaep-notification-content-icon-content: ;
    --upaep-notification-content-icon-ring: auto;
    --upaep-notification-content-icon-ring-border: 0px;
    --upaep-notification-content-icon-fz: var(--upaep-fz20);
    --upaep-notification-content-icon-fw: var(--upaep-fw-bold);
    --upaep-notification-content-icon-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-notification-content-icon-margin: 0;
    --upaep-notification-content-icon-animation: ;
    --upaep-notification-content-icon-animation-duration: 1s;
    --upaep-notification-content-texts-width: 100%;
    --upaep-notification-content-texts-height: auto;
    --upaep-notification-content-texts-padding: 0 .35rem;
    --upaep-notification-content-texts-margin: 0;
    --upaep-notification-content-text-fz: var(--upaep-fz16);
    --upaep-notification-content-text-fw: var(--upaep-fw-regular);
    --upaep-notification-content-text-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-notification-content-text-margin: 0;
    width: var(--upaep-notification-width);
    height: var(--upaep-notification-height);
    max-width: var(--upaep-notification-maxwidth);
    padding: var(--upaep-notification-padding);
    margin: var(--upaep-notification-margin);
    border: var(--upaep-notification-border-size) var(--upaep-notification-border-style) var(--upaep-notification-border-color);
    border-radius: var(--upaep-notification-border-radius);
    box-shadow: var(--upaep-notification-boxshadow);
    background: var(--upaep-notification-bg);
    animation: var(--upaep-notification-animation) var(--upaep-notification-animation-duration);
    position: var(--upaep-notification-position);
    inset: var(--upaep-notification-inset);
    pointer-events: auto;

    &:not(.is-show):not(.is-hiding) {
        display: none;
    }

    /*? cierre animado: el JS espera NOTIFICATION_OUT_DURATION antes de remover */
    &.is-hiding {
        animation: var(--upaep-notification-animation-out) var(--upaep-notification-animation-out-duration) ease forwards;
        pointer-events: none;
    }

    & .upaep__notification-close {
        &::before {
            content: var(--upaep-notification-close-content);
            font-size: var(--upaep-notification-close-fz);
            font-weight: var(--upaep-notification-close-fw);
            color: var(--upaep-notification-close-color);
            padding: var(--upaep-notification-close-padding);
            margin: var(--upaep-notification-close-margin);
            font-family: var(--upaep-ff-fontawesome);
            font-style: normal;
            font-variant: normal;
            line-height: 1;
            text-rendering: auto;
            cursor: pointer;
        }

        &:hover::before {
            content: var(--upaep-notification-close-hover-content);
            font-size: var(--upaep-notification-close-hover-fz);
            font-weight: var(--upaep-notification-close-hover-fw);
            color: var(--upaep-notification-close-hover-color);
            padding: var(--upaep-notification-close-hover-padding);
            margin: var(--upaep-notification-close-hover-margin);
        }

        &.__sup {
            position: absolute;
            inset: 10px 10px auto auto;
        }
    }

}

.upaep__notification .upaep__notification-header,
.upaep__toast .upaep__toast-header {
    padding: var(--upaep-notification-header-padding);
    background: var(--upaep-notification-header-bg);
    border-radius: var(--upaep-notification-header-border-radius);
    border-bottom: var(--upaep-notification-header-border-bottom-size) var(--upaep-notification-header-border-bottom-style) var(--upaep-notification-header-border-bottom-color);
    display: flex;
    align-items: center;
}

.upaep__notification .upaep__notification-header .upaep__notification-header-title,
.upaep__toast .upaep__toast-header .upaep__notification-header-title {
    font-size: var(--upaep-notification-header-title-fz);
    font-weight: var(--upaep-notification-header-title-fw);
    color: var(--upaep-notification-header-title-color);
    padding: var(--upaep-notification-header-title-padding);
    margin: var(--upaep-notification-header-title-margin);
}

.upaep__notification .upaep__notification-content,
.upaep__toast .upaep__toast-content {
    padding: var(--upaep-notification-content-padding);
    background: var(--upaep-notification-content-bg);
    display: flex;
    align-items: center;
}

.upaep__notification .upaep__notification-content .upaep__notification-icons,
.upaep__toast .upaep__toast-content .upaep__toast-icons {
    width: var(--upaep-notification-content-icons-width);
    height: var(--upaep-notification-content-icons-height);
    padding: var(--upaep-notification-content-icons-padding);
    margin: var(--upaep-notification-content-icons-margin);
    animation: var(--upaep-notification-content-icon-animation) var(--upaep-notification-content-icon-animation-duration);
}

.upaep__notification .upaep__notification-content .upaep__notification-icons .upaep__notification-icon,
.upaep__toast .upaep__toast-content .upaep__toast-icons .upaep__toast-icon {
    width: var(--upaep-notification-content-icon-width);
    height: var(--upaep-notification-content-icon-height);
    font-size: var(--upaep-notification-content-icon-fz);
    font-weight: var(--upaep-notification-content-icon-fw);
    color: var(--upaep-notification-content-icon-color);
    margin: var(--upaep-notification-content-icon-margin);
    display: flex;
    justify-content: center;
    object-fit: cover;
}

.upaep__notification .upaep__notification-content .upaep__notification-icons .upaep__notification-icon::before,
.upaep__toast .upaep__toast-content .upaep__toast-icons .upaep__toast-icon::before {
    content: var(--upaep-notification-content-icon-content);
    font-family: var(--upaep-ff-fontawesome);
    /*? anillo opcional (mismo lenguaje visual que el icono del Herald):
       inerte por defecto (auto + 0px); las variantes de tipo lo activan */
    width: var(--upaep-notification-content-icon-ring);
    height: var(--upaep-notification-content-icon-ring);
    border: var(--upaep-notification-content-icon-ring-border) solid color-mix(in srgb, currentColor 45%, transparent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.upaep__notification .upaep__notification-content .upaep__notification-texts,
.upaep__toast .upaep__toast-content .upaep__toast-texts {
    width: var(--upaep-notification-content-texts-width);
    height: var(--upaep-notification-content-texts-height);
    padding: var(--upaep-notification-content-texts-padding);
    margin: var(--upaep-notification-content-texts-margin);
}

.upaep__notification .upaep__notification-content .upaep__notification-texts .upaep__notification-text,
.upaep__toast .upaep__toast-content .upaep__toast-texts .upaep__toast-text {
    font-size: var(--upaep-notification-content-text-fz);
    font-weight: var(--upaep-notification-content-text-fw);
    color: var(--upaep-notification-content-text-color);
    margin: var(--upaep-notification-content-text-margin);
    text-wrap: balance;
    word-wrap: break-word;
}

.upaep__notification .upaep__notification-content:has(.upaep__notification-icons~.upaep__notification-texts),
.upaep__toast .upaep__toast-content:has(.upaep__toast-icons~.upaep__toast-texts) {
    --upaep-notification-content-icons-width: 10%;
    --upaep-notification-content-texts-width: 90%;
}

/*? __noicon (icon_default.content=false en showNotification): oculta el icono
   y devuelve su ancho al texto */
.upaep__notification.__noicon,
.upaep__toast.__noicon {
    --upaep-notification-content-icons-width: 0;
    --upaep-notification-content-texts-width: 100%;

    & .upaep__notification-icons,
    & .upaep__toast-icons {
        display: none;
    }
}

/*? Stack CENTRADO (`position('top-center' | 'bottom-center')`). El contenedor
   ocupa el ancho (inset 0 a los lados) y centra a sus toasts; sigue sin capturar
   el puntero fuera de ellos. Con `left: 50%` a secas el stack quedaba corrido:
   el borde izquierdo, no el centro, caía en la mitad. */
.upaep__notification-container.__center {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.upaep__notification-container {
    --upaep__notification-position: absolute;
    --upaep__notification-zindex: var(--upaep-zindex-notification-container);
    --upaep__notification-inset: ;
    position: var(--upaep__notification-position);
    inset: var(--upaep__notification-inset);
    z-index: var(--upaep__notification-zindex);
    max-width: 100%;
    pointer-events: none;
}

.upaep__notification.__fixed,
.upaep__toast.__fixed {
    --upaep-notification-position: fixed;
    z-index: var(--upaep-zindex-notification);
    /*? La utilidad global `.__fixed` (más abajo en la hoja, misma especificidad
       que la regla base del toast) escribe `inset: var(--fixed-inset)`, que está
       vacía: el inset caía a `auto` y el banner `__fixed __bottom-center` se
       quedaba en su sitio del flujo —fuera de la pantalla— en vez de ir a su
       esquina. Aquí, con más peso, el banner vuelve a leer SU inset. */
    inset: var(--upaep-notification-inset);
}

.upaep__notification.__top-center:is(.__fixed),
.upaep__toast.__top-center:is(.__fixed) {
    --upaep-notification-inset: 10px 50% auto 50%;
    /*? sin margen: `translateX(-50%)` centra la caja, no la caja + su margen
       (quedaba corrida 8px); la distancia al borde ya la da el inset */
    --upaep-notification-margin: 0;
    transform: translateX(-50%);
}

.upaep__notification.__bottom-center:is(.__fixed),
.upaep__toast.__bottom-center:is(.__fixed) {
    --upaep-notification-inset: auto 50% 10px 50%;
    --upaep-notification-margin: 0;
    transform: translateX(-50%);
}

.upaep__notification.__top-right:is(.__fixed),
.upaep__toast.__top-right:is(.__fixed) {
    --upaep-notification-inset: 10px 10px auto auto;
}

.upaep__notification.__top-left:is(.__fixed),
.upaep__toast.__top-left:is(.__fixed) {
    --upaep-notification-inset: 10px auto auto 10px;
}

.upaep__notification.__bottom-right:is(.__fixed),
.upaep__toast.__bottom-right:is(.__fixed) {
    --upaep-notification-inset: auto 10px 10px auto;
}

.upaep__notification.__bottom-left:is(.__fixed),
.upaep__toast.__bottom-left:is(.__fixed) {
    --upaep-notification-inset: auto auto 10px 10px;
}

.upaep__notification.__error,
.upaep__toast.__error {
    --upaep-notification-border-color: var(--ui-border, var(--upaep-color-border-grey));
    /*? antes #FF4D5F: contraste con blanco 3.2 (falla AA); el token da ≈4.5 */
    --upaep-notification-bg: var(--ui-danger, var(--upaep-color-error));
    --upaep-notification-close-color: var(--upaep-color-background);
    --upaep-notification-close-hover-color: var(--ui-on-danger, var(--upaep-color-white));
    --upaep-notification-header-bg: transparent;
    --upaep-notification-header-border-bottom-color: var(--ui-on-danger, var(--upaep-color-white));
    --upaep-notification-header-title-fw: var(--upaep-fw-bold);
    --upaep-notification-header-title-color: var(--ui-on-danger, var(--upaep-color-white));
    --upaep-notification-content-bg: transparent;
    --upaep-notification-content-text-fw: var(--upaep-fw-bold);
    --upaep-notification-content-text-color: var(--ui-on-danger, var(--upaep-color-white));
    --upaep-notification-animation: showNotification-right;
    --upaep-notification-content-icon-animation: ;
    --upaep-notification-content-icon-content: '\f00d';
    --upaep-notification-content-icon-ring: 1.75rem;
    --upaep-notification-content-icon-ring-border: 2px;
    --upaep-notification-content-icon-color: var(--upaep-color-white);
    --upaep-notification-content-icon-fz: var(--upaep-fz14);
    --upaep-notification-content-icon-fw: var(--upaep-fw-regular);

    &.__light {
        --upaep-notification-bg: var(--ui-danger-subtle, var(--upaep-color-error-light));
        /*? antes --upaep-color-error: contraste 3.0 sobre el rosa; border-red da 4.5 */
        --upaep-notification-close-color: var(--ui-on-danger-subtle, var(--upaep-color-border-red));
        --upaep-notification-close-hover-color: var(--ui-on-danger-subtle, var(--upaep-color-error-hover));
        --upaep-notification-header-border-bottom-color: var(--ui-on-danger-subtle, var(--upaep-color-border-red));
        --upaep-notification-header-title-color: var(--ui-on-danger-subtle, var(--upaep-color-border-red));
        --upaep-notification-content-text-color: var(--ui-on-danger-subtle, var(--upaep-color-border-red));
        --upaep-notification-content-icon-color: var(--ui-on-danger-subtle, var(--upaep-color-border-red));
    }
}

.upaep__notification.__warning,
.upaep__toast.__warning {
    --upaep-notification-border-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-notification-bg: var(--ui-warning-strong, #EDAE00);
    --upaep-notification-close-color: var(--upaep-color-dark-grey);
    --upaep-notification-close-hover-color: var(--upaep-color-black);
    --upaep-notification-header-bg: transparent;
    --upaep-notification-header-border-bottom-color: var(--upaep-color-black);
    --upaep-notification-header-title-fw: var(--upaep-fw-bold);
    --upaep-notification-header-title-color: var(--upaep-color-black);
    --upaep-notification-content-bg: transparent;
    --upaep-notification-content-text-fw: var(--upaep-fw-bold);
    --upaep-notification-content-text-color: var(--upaep-color-black);
    --upaep-notification-animation: showNotification-right;
    --upaep-notification-content-icon-animation: ;
    --upaep-notification-content-icon-content: '\f12a';
    --upaep-notification-content-icon-ring: 1.75rem;
    --upaep-notification-content-icon-ring-border: 2px;
    --upaep-notification-content-icon-color: var(--upaep-color-black);
    --upaep-notification-content-icon-fz: var(--upaep-fz14);
    --upaep-notification-content-icon-fw: var(--upaep-fw-regular);

    &.__light {
        --upaep-notification-bg: var(--ui-warning-subtle, var(--upaep-color-warning-light));
        /*? antes #FFA800: contraste 1.4 sobre el ámbar claro (ilegible); negro
           da 15.4 y es consistente con el warning sólido, que ya usa negro */
        --upaep-notification-close-color: var(--ui-on-warning-subtle, var(--upaep-color-dark-grey));
        --upaep-notification-close-hover-color: var(--ui-on-warning-subtle, var(--upaep-color-black));
        --upaep-notification-header-border-bottom-color: var(--ui-on-warning-subtle, var(--upaep-color-black));
        --upaep-notification-header-title-color: var(--ui-on-warning-subtle, var(--upaep-color-black));
        --upaep-notification-content-text-color: var(--ui-on-warning-subtle, var(--upaep-color-black));
        --upaep-notification-content-icon-color: var(--ui-on-warning-subtle, var(--upaep-color-black));
    }
}

.upaep__notification.__success,
.upaep__toast.__success {
    --upaep-notification-border-color: var(--ui-border, var(--upaep-color-border-grey));
    /*? antes --upaep-color-success #28A745: contraste con blanco 3.1 (falla AA);
       un paso más oscuro da 5.1 — el verde token queda para acentos/anillo */
    --upaep-notification-bg: var(--ui-success-strong, #1E7E34);
    --upaep-notification-close-color: var(--upaep-color-background);
    --upaep-notification-close-hover-color: var(--upaep-color-white);
    --upaep-notification-header-bg: transparent;
    --upaep-notification-header-border-bottom-color: var(--upaep-color-white);
    --upaep-notification-header-title-fw: var(--upaep-fw-bold);
    --upaep-notification-header-title-color: var(--upaep-color-white);
    --upaep-notification-content-bg: transparent;
    --upaep-notification-content-text-fw: var(--upaep-fw-bold);
    --upaep-notification-content-text-color: var(--upaep-color-white);
    --upaep-notification-animation: showNotification-right;
    --upaep-notification-content-icon-animation: ;
    --upaep-notification-content-icon-content: '\f00c';
    --upaep-notification-content-icon-ring: 1.75rem;
    --upaep-notification-content-icon-ring-border: 2px;
    --upaep-notification-content-icon-color: var(--upaep-color-white);
    --upaep-notification-content-icon-fz: var(--upaep-fz14);
    --upaep-notification-content-icon-fw: var(--upaep-fw-regular);

    &.__light {
        --upaep-notification-bg: var(--ui-success-subtle, var(--upaep-color-success-light));
        /*? antes --upaep-color-success: contraste 2.5 sobre el menta; el verde
           bosque #166427 da 5.7 (candidato a token --upaep-color-success-darker) */
        --upaep-notification-close-color: var(--ui-on-success-subtle, #166427);
        --upaep-notification-close-hover-color: var(--ui-on-success-subtle, var(--upaep-color-black));
        --upaep-notification-header-border-bottom-color: var(--ui-on-success-subtle, #166427);
        --upaep-notification-header-title-color: var(--ui-on-success-subtle, #166427);
        --upaep-notification-content-text-color: var(--ui-on-success-subtle, #166427);
        --upaep-notification-content-icon-color: var(--ui-on-success-subtle, #166427);
    }
}

.upaep__notification.__info,
.upaep__toast.__info {
    --upaep-notification-border-color: #253b83;
    /*? antes --upaep-color-blue-link #0085FF: contraste con blanco 3.6 (falla AA);
       el blue-sky-hover da 5.7 */
    --upaep-notification-bg: var(--ui-info-strong, var(--upaep-color-blue-sky-hover));
    --upaep-notification-close-color: var(--upaep-color-background);
    --upaep-notification-close-hover-color: var(--upaep-color-white);
    --upaep-notification-header-bg: transparent;
    --upaep-notification-header-border-bottom-color: var(--upaep-color-white);
    --upaep-notification-header-title-fw: var(--upaep-fw-bold);
    --upaep-notification-header-title-color: var(--upaep-color-white);
    --upaep-notification-content-bg: transparent;
    --upaep-notification-content-text-fw: var(--upaep-fw-bold);
    --upaep-notification-content-text-color: var(--upaep-color-white);
    --upaep-notification-animation: showNotification-right;
    --upaep-notification-content-icon-animation: ;
    --upaep-notification-content-icon-content: '\f129';
    --upaep-notification-content-icon-ring: 1.75rem;
    --upaep-notification-content-icon-ring-border: 2px;
    --upaep-notification-content-icon-color: var(--upaep-color-white);
    --upaep-notification-content-icon-fz: var(--upaep-fz14);
    --upaep-notification-content-icon-fw: var(--upaep-fw-regular);

    &.__light {
        --upaep-notification-bg: var(--ui-info-subtle, #c3dafa);
        --upaep-notification-close-color: var(--ui-on-info-subtle, #253b83);
        --upaep-notification-close-hover-color: var(--ui-on-info-subtle, #2950cc);
        --upaep-notification-header-border-bottom-color: var(--ui-on-info-subtle, #253b83);
        --upaep-notification-header-title-color: var(--ui-on-info-subtle, #253b83);
        --upaep-notification-content-text-color: var(--ui-on-info-subtle, #253b83);
        --upaep-notification-content-icon-color: var(--ui-on-info-subtle, #253b83);
    }
}

.upaep__notification.__question,
.upaep__toast.__question {
    --upaep-notification-border-color: var(--ui-border, var(--upaep-color-border-grey));
    /*? gris oscuro del sistema: contraste con blanco 7.4 */
    --upaep-notification-bg: var(--ui-neutral, var(--upaep-color-dark-grey));
    --upaep-notification-close-color: var(--upaep-color-background);
    --upaep-notification-close-hover-color: var(--ui-on-neutral, var(--upaep-color-white));
    --upaep-notification-header-bg: transparent;
    --upaep-notification-header-border-bottom-color: var(--upaep-color-white);
    --upaep-notification-header-title-fw: var(--upaep-fw-bold);
    --upaep-notification-header-title-color: var(--ui-on-neutral, var(--upaep-color-white));
    --upaep-notification-content-bg: transparent;
    --upaep-notification-content-text-fw: var(--upaep-fw-bold);
    --upaep-notification-content-text-color: var(--ui-on-neutral, var(--upaep-color-white));
    --upaep-notification-animation: showNotification-right;
    --upaep-notification-content-icon-animation: ;
    --upaep-notification-content-icon-content: '\f128';
    --upaep-notification-content-icon-ring: 1.75rem;
    --upaep-notification-content-icon-ring-border: 2px;
    --upaep-notification-content-icon-color: var(--ui-on-neutral, var(--upaep-color-white));
    --upaep-notification-content-icon-fz: var(--upaep-fz14);
    --upaep-notification-content-icon-fw: var(--upaep-fw-regular);

    &.__light {
        --upaep-notification-bg: var(--upaep-color-background);
        --upaep-notification-close-color: var(--upaep-color-dark-grey);
        --upaep-notification-close-hover-color: var(--upaep-color-black);
        --upaep-notification-header-border-bottom-color: var(--upaep-color-dark-grey);
        --upaep-notification-header-title-color: var(--upaep-color-dark-grey);
        --upaep-notification-content-text-color: var(--upaep-color-dark-grey);
        --upaep-notification-content-icon-color: var(--upaep-color-dark-grey);
    }
}

@keyframes showNotification-right {
    from {
        transform: translate3d(100%, 0, 0);
        visibility: visible;
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

/*? salida por defecto de las notificaciones (espejo de showNotification-right) */
@keyframes hideNotification-right {
    to {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }
}

/*? Entrada desde abajo con fundido, y su espejo de salida. Pensadas para el stack
   CENTRADO abajo (`position('bottom-center')`): el aviso sube al aparecer y baja
   al irse, sin cruzar la pantalla de lado a lado. Se piden por llamada con
   `animation` / `animation_out` (o `animationOut` en Herald.toast). */
@keyframes showNotification-fade-up {
    from {
        opacity: 0;
        transform: translate3d(0, 1rem, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes hideNotification-fade-down {
    to {
        opacity: 0;
        transform: translate3d(0, 1rem, 0);
    }
}

/*? salidas alternas: apúntalas con --upaep-notification-animation-out */
@keyframes hideNotification-fade {
    to {
        opacity: 0;
        transform: scale(.95);
    }
}

@keyframes showNotification-up {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        visibility: hidden;
        transform: translate3d(0, 100%, 0);
    }
}

@keyframes flip {
    from {
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
        animation-timing-function: ease-out;
    }

    40% {
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        animation-timing-function: ease-out;
    }

    50% {
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        animation-timing-function: ease-in;
    }

    80% {
        transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
        animation-timing-function: ease-in;
    }

    to {
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
        animation-timing-function: ease-in;
    }
}

/*? ------ Overlays ------ */
[upaep-modal] {
    cursor: pointer;
}

.upaep__modal {
    --upaep-modal-position: fixed;
    --upaep-modal-zindex: var(--upaep-zindex-modal);
    --upaep-modal-overflow: auto;
    --upaep-modal-dialog-width: auto;
    --upaep-modal-dialog-height: auto;
    --upaep-modal-dialog-margin: .5rem auto;
    --upaep-modal-dialog-maxwidth: 500px;
    --upaep-modal-dialog-transform: ;
    --upaep-modal-dialog-align: start;
    --upaep-modal-dialog-minheight: calc(100% - 1.75rem * 2);
    --upaep-modal-content-width: 100%;
    --upaep-modal-content-height: auto;
    --upaep-modal-content-maxheight: auto;
    --upaep-modal-content-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-modal-content-border-size: 1px;
    --upaep-modal-content-border-style: solid;
    --upaep-modal-content-border-color: var(--ui-border-subtle, var(--upaep-color-border-grey));
    --upaep-modal-content-border-radius: 10px;
    --upaep-modal-content-animation: zoomIn;
    --upaep-modal-content-animation-duration: .65s;
    --upaep-modal-content-animation-out: zoomOut;
    --upaep-modal-out-duration: .2s;
    /*? backdrop nativo: se personaliza como cualquier caja. Defaults neutrales
       (`none`) a proposito, el aspecto historico no cambia. Para activar el
       fundido, los keyframes ya vienen en el kit:
         --upaep-modal-backdrop-animation: upaepModalBackdropIn;
         --upaep-modal-backdrop-animation-out: upaepModalBackdropOut; */
    --upaep-modal-backdrop-filter: none;
    --upaep-modal-backdrop-animation: none;
    --upaep-modal-backdrop-animation-duration: var(--upaep-modal-content-animation-duration);
    --upaep-modal-backdrop-animation-out: none;
    --upaep-modal-backdrop-out-duration: var(--upaep-modal-out-duration);
    --upaep-modal-content-overflow: auto;
    --upaep-modal-header-bg: transparent;
    --upaep-modal-header-padding: 1rem;
    --upaep-modal-header-border-bottom-size: 1px;
    --upaep-modal-header-border-bottom-style: solid;
    --upaep-modal-header-border-bottom-color: var(--ui-border-subtle, var(--upaep-color-border-grey));
    --upaep-modal-header-border-radius: 10px 10px 0 0;
    --upaep-modal-title-fz: var(--upaep-fz18);
    --upaep-modal-title-fw: var(--upaep-fw-bold);
    --upaep-modal-title-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-modal-title-margin: 0;
    --upaep-modal-title-padding: 0;
    --upaep-modal-title-lineheight: 1.5;
    --upaep-modal-close-content: "\f00d";
    --upaep-modal-close-fz: var(--upaep-fz22);
    --upaep-modal-close-fw: var(--upaep-fw-bold);
    --upaep-modal-close-color: var(--ui-text-muted, var(--upaep-color-dark-grey));
    --upaep-modal-close-padding: 0 .5rem;
    --upaep-modal-close-margin: 0;
    --upaep-modal-close-hover-content: "\f00d";
    --upaep-modal-close-hover-fz: var(--upaep-fz22);
    --upaep-modal-close-hover-fw: var(--upaep-fw-bold);
    --upaep-modal-close-hover-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-modal-close-hover-padding: 0 .5rem;
    --upaep-modal-close-hover-margin: 0;
    --upaep-modal-body-bg: transparent;
    --upaep-modal-body-padding: 1rem 1.5rem;
    --upaep-modal-body-color: var(--ui-text, var(--upaep-color-black));
    --upaep-modal-body-overflow: ;
    --upaep-modal-footer-bg: transparent;
    --upaep-modal-footer-padding: .5rem .75rem;
    --upaep-modal-footer-border-top-size: 1px;
    --upaep-modal-footer-border-top-style: solid;
    --upaep-modal-footer-border-top-color: var(--ui-border-subtle, var(--upaep-color-border-grey));
    --upaep-modal-footer-border-radius: 0 0 10px 10px;
    position: var(--upaep-modal-position);
    z-index: var(--upaep-modal-zindex);
    overflow: var(--upaep-modal-overflow);
    inset: 0;
    width: 100%;
    height: 100%;
    outline: 0;
    background: transparent;
    border: none;
    padding: 0;

    & .upaep__modal-dialog {
        width: var(--upaep-modal-dialog-width);
        height: var(--upaep-modal-dialog-height);
        max-width: var(--upaep-modal-dialog-maxwidth);
        min-height: var(--upaep-modal-dialog-minheight);
        margin: var(--upaep-modal-dialog-margin);
        transform: var(--upaep-modal-dialog-transform);
        align-items: var(--upaep-modal-dialog-align);
        display: flex;
        position: relative;
        pointer-events: none;
    }

    & .upaep__modal-content {
        width: var(--upaep-modal-content-width);
        height: var(--upaep-modal-content-height);
        max-height: var(--upaep-modal-content-maxheight);
        background: var(--upaep-modal-content-bg);
        border: var(--upaep-modal-content-border-size) var(--upaep-modal-content-border-style) var(--upaep-modal-content-border-color);
        border-radius: var(--upaep-modal-content-border-radius);
        animation: var(--upaep-modal-content-animation) var(--upaep-modal-content-animation-duration) ease;
        overflow: var(--upaep-modal-content-overflow);
        position: relative;
        display: flex;
        flex-direction: column;
        pointer-events: auto;
        background-clip: padding-box;
        outline: 0;
    }

    & .upaep__modal-header {
        background: var(--upaep-modal-header-bg);
        padding: var(--upaep-modal-header-padding);
        border-bottom: var(--upaep-modal-header-border-bottom-size) var(--upaep-modal-header-border-bottom-style) var(--upaep-modal-header-border-bottom-color);
        border-radius: var(--upaep-modal-header-border-radius);
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-shrink: 0;
    }

    & .upaep__modal-title {
        font-size: var(--upaep-modal-title-fz);
        font-weight: var(--upaep-modal-title-fw);
        color: var(--upaep-modal-title-color);
        margin: var(--upaep-modal-title-margin);
        padding: var(--upaep-modal-title-padding);
        line-height: var(--upaep-modal-title-lineheight);
    }

    & .upaep__modal-close {
        &::before {
            content: var(--upaep-modal-close-content);
            font-size: var(--upaep-modal-close-fz);
            font-weight: var(--upaep-modal-close-fw);
            color: var(--upaep-modal-close-color);
            padding: var(--upaep-modal-close-padding);
            margin: var(--upaep-modal-close-margin);
            font-family: var(--upaep-ff-fontawesome);
            font-style: normal;
            font-variant: normal;
            line-height: 1;
            text-rendering: auto;
            cursor: pointer;
        }

        &:hover::before {
            content: var(--upaep-modal-close-hover-content);
            font-size: var(--upaep-modal-close-hover-fz);
            font-weight: var(--upaep-modal-close-hover-fw);
            color: var(--upaep-modal-close-hover-color);
            padding: var(--upaep-modal-close-hover-padding);
            margin: var(--upaep-modal-close-hover-margin);
        }

        &.__sup {
            position: absolute;
            inset: 5px 0 auto auto;
        }
    }

    & .upaep__modal-body {
        background: var(--upaep-modal-body-bg);
        padding: var(--upaep-modal-body-padding);
        overflow-y: var(--upaep-modal-body-overflow);
        position: relative;
        flex: 1 1 auto;
        color: var(--upaep-modal-body-color);
    }

    & .upaep__modal-footer {
        background: var(--upaep-modal-footer-bg);
        padding: var(--upaep-modal-footer-padding);
        border-top: var(--upaep-modal-footer-border-top-size) var(--upaep-modal-footer-border-top-style) var(--upaep-modal-footer-border-top-color);
        border-radius: var(--upaep-modal-footer-border-radius);
        display: flex;
        flex-shrink: 0;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
    }
}

/*? ==========================================================================
   Backdrop nativo del modal
   --------------------------------------------------------------------------
   El modal se abre con showModal(), asi que el oscurecimiento lo pinta el
   navegador via ::backdrop y ya no hace falta el <div class="upaep__backdrop">
   inyectado por JS. Se mantienen los dos tokens historicos:
     --upaep-modal-backdrop-bg  sigue siendo el punto de personalizacion
     --upaep-gradient-dark      es el mismo rgba(0,0,0,.4) que usaba el div,
                                de modo que el aspecto no cambia
   El selector anterior usaba :-internal-dialog-in-top-layer, una pseudoclase
   INTERNA de Chromium: no existe en Firefox ni en Safari, donde la regla se
   descartaba entera y el modal se veia sin backdrop. No hace falta ninguna
   pseudoclase: la caja ::backdrop solo existe mientras el elemento esta en la
   top layer, asi que el selector ya es implicitamente "solo en modo modal".

   El valor va con doble fallback a proposito. En los motores modernos
   ::backdrop hereda del elemento originante, asi que un
   --upaep-modal-backdrop-bg puesto en el <dialog> gana. En los que no heredan,
   el literal mantiene exactamente el mismo aspecto que antes.
   ========================================================================== */
dialog:is(.upaep__modal)::backdrop {
    background: var(--upaep-modal-backdrop-bg, var(--upaep-gradient-dark, rgba(0, 0, 0, .4)));
    backdrop-filter: var(--upaep-modal-backdrop-filter, none);
    animation: var(--upaep-modal-backdrop-animation, none) var(--upaep-modal-backdrop-animation-duration, .65s) ease;
}

/*? Salida del backdrop. Funciona porque el cierre animado mantiene el <dialog>
   abierto —y por tanto en la top layer, con su caja ::backdrop viva— durante
   MODAL_OUT_DURATION. Cubre las cuatro vias de cierre: boton [upaep-dismiss],
   clic exterior, Modal.hide() y Escape (que desde el arreglo del handler
   `cancel` tambien pasa por modalHide en vez de cerrar en seco).
   Mismo doble fallback que `background`: si el motor no hereda las custom
   properties en ::backdrop, el literal manda y no hay animacion. */
dialog:is(.upaep__modal).is-hiding::backdrop {
    animation: var(--upaep-modal-backdrop-animation-out, none) var(--upaep-modal-backdrop-out-duration, .2s) ease forwards;
}

/*? Fundido listo para usar. Nombres propios a proposito: en este archivo ya
   existen DOS `@keyframes fadeOut` distintos —el de la linea ~7706 colapsa
   max-height/margin/padding— y reusar ese nombre daria un resultado erroneo. */
@keyframes upaepModalBackdropIn {
    from {
        opacity: 0;
    }
}

@keyframes upaepModalBackdropOut {
    to {
        opacity: 0;
    }
}

/*? El backdrop no anima si el usuario pidio menos movimiento. Se apagan las
   duraciones, que es el patron del resto del kit (tracker, numberpicker). */
@media (prefers-reduced-motion: reduce) {
    .upaep__modal {
        --upaep-modal-backdrop-animation-duration: 0s;
        --upaep-modal-backdrop-out-duration: 0s;
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }

    50% {
        opacity: 1;
    }
}

/*? cierre animado: el JS espera MODAL_OUT_DURATION antes de hacer close() */
.upaep__modal.is-hiding .upaep__modal-content {
    animation: var(--upaep-modal-content-animation-out) var(--upaep-modal-out-duration) ease forwards;
}

@keyframes zoomOut {
    to {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }
}

.upaep__modal.__centered {
    --upaep-modal-dialog-align: center;
}

.upaep__modal.__scrollable {
    --upaep-modal-overflow: hidden;
    --upaep-modal-dialog-height: calc(100% - .85rem * 2);
    --upaep-modal-content-maxheight: 100%;
    --upaep-modal-content-overflow: hidden;
    --upaep-modal-body-overflow: auto;
}

.upaep__modal.__sm {
    --upaep-modal-dialog-maxwidth: var(--upaep-size-xxs);
}

.upaep__modal.__md {
    --upaep-modal-dialog-maxwidth: var(--upaep-size-md);
}

.upaep__modal.__lg {
    --upaep-modal-dialog-maxwidth: var(--upaep-size-lg);
}

.upaep__modal.__xl {
    --upaep-modal-dialog-maxwidth: var(--upaep-size-xl);
}

.upaep__modal.__fullscreen {
    --upaep-modal-overflow: hidden;
    --upaep-modal-dialog-width: 100%;
    --upaep-modal-dialog-height: 100%;
    --upaep-modal-dialog-maxwidth: none;
    --upaep-modal-dialog-margin: 0;
    --upaep-modal-content-height: 100%;
    --upaep-modal-content-maxheight: 100%;
    --upaep-modal-content-overflow: hidden;
    --upaep-modal-body-overflow: auto;
}

.upaep__modal.__black {
    --upaep-modal-content-bg: var(--upaep-color-black);
    --upaep-modal-title-color: var(--upaep-color-white);
    --upaep-modal-close-color: var(--upaep-color-background);
    --upaep-modal-close-hover-color: var(--upaep-color-white);
    --upaep-modal-body-color: var(--upaep-color-white);
}

.upaep__modal.__dark {
    --upaep-modal-content-bg: var(--colordark);
    --upaep-modal-title-color: var(--upaep-color-white);
    --upaep-modal-close-color: var(--upaep-color-background);
    --upaep-modal-close-hover-color: var(--upaep-color-white);
    --upaep-modal-body-color: var(--upaep-color-white);
}

.upaep__modal.__header-red {
    --upaep-modal-header-bg: var(--ui-accent, var(--upaep-color-red));
    --upaep-modal-title-color: var(--upaep-color-white);
    --upaep-modal-close-color: var(--upaep-color-background);
    --upaep-modal-close-hover-color: var(--upaep-color-white);
}

.upaep__modal.__header-blue {
    --upaep-modal-header-bg: var(--ui-counter, var(--upaep-color-blue-primary));
    --upaep-modal-title-color: var(--ui-on-counter, var(--upaep-color-white));
    --upaep-modal-close-color: var(--upaep-color-background);
    --upaep-modal-close-hover-color: var(--ui-on-counter, var(--upaep-color-white));
}

.upaep__modal.__header-grey {
    --upaep-modal-header-bg: var(--ui-neutral, var(--upaep-color-dark-grey));
    --upaep-modal-title-color: var(--ui-on-neutral, var(--upaep-color-white));
    --upaep-modal-close-color: var(--upaep-color-background);
    --upaep-modal-close-hover-color: var(--ui-on-neutral, var(--upaep-color-white));
}

.upaep__modal.__header-black {
    --upaep-modal-header-bg: var(--upaep-color-black);
    --upaep-modal-title-color: var(--upaep-color-white);
    --upaep-modal-close-color: var(--upaep-color-background);
    --upaep-modal-close-hover-color: var(--upaep-color-white);
}

.upaep__modal.is-static .upaep__modal-dialog {
    animation: shakeX .65s;
}

@keyframes shakeX {

    from,
    to {
        transform: translate3d(0, 0, 0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translate3d(-10px, 0, 0);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translate3d(10px, 0, 0);
    }
}

/*? ------ Offcanvas ------ */
.upaep__offcanvas {
    --upaep-offcanvas-width: 100%;
    --upaep-offcanvas-height: 100dvh;
    --upaep-offcanvas-maxwidth: 400px;
    --upaep-offcanvas-inset: 0 auto 0 0;
    --upaep-offcanvas-transform: translateX(0);
    --upaep-offcanvas-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-offcanvas-zindex: var(--upaep-zindex-offcanvas);
    --upaep-offcanvas-boxshadow: var(--ui-shadow, var(--upaep-box-shadow));
    --upaep-offcanvas-header-bg: transparent;
    --upaep-offcanvas-header-padding: .5rem .75rem;
    --upaep-offcanvas-header-border-bottom-size: 1px;
    --upaep-offcanvas-header-border-bottom-style: solid;
    --upaep-offcanvas-header-border-bottom-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-offcanvas-title-fz: var(--upaep-fz18);
    --upaep-offcanvas-title-fw: var(--upaep-fw-bold);
    --upaep-offcanvas-title-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-offcanvas-title-margin: 0;
    --upaep-offcanvas-title-padding: 0;
    --upaep-offcanvas-title-lineheight: 1.5;
    --upaep-offcanvas-close-content: "\f00d";
    --upaep-offcanvas-close-fz: var(--upaep-fz22);
    --upaep-offcanvas-close-fw: var(--upaep-fw-bold);
    --upaep-offcanvas-close-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-offcanvas-close-padding: 0 .5rem;
    --upaep-offcanvas-close-margin: 0;
    --upaep-offcanvas-close-hover-content: "\f00d";
    --upaep-offcanvas-close-hover-fz: var(--upaep-fz22);
    --upaep-offcanvas-close-hover-fw: var(--upaep-fw-bold);
    --upaep-offcanvas-close-hover-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-offcanvas-close-hover-padding: 0 .5rem;
    --upaep-offcanvas-close-hover-margin: 0;
    --upaep-offcanvas-content-bg: transparent;
    --upaep-offcanvas-content-padding: .5rem .75rem;
    --upaep-offcanvas-content-fz: var(--upaep-fz16);
    --upaep-offcanvas-content-fw: var(--upaep-fw-medium);
    --upaep-offcanvas-content-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-offcanvas-footer-bg: transparent;
    --upaep-offcanvas-footer-padding: .5rem .75rem;
    --upaep-offcanvas-footer-border-top-size: 1px;
    --upaep-offcanvas-footer-border-top-style: solid;
    --upaep-offcanvas-footer-border-top-color: var(--ui-border, var(--upaep-color-border-grey));
    width: var(--upaep-offcanvas-width);
    height: var(--upaep-offcanvas-height);
    max-width: var(--upaep-offcanvas-maxwidth);
    background: var(--upaep-offcanvas-bg);
    box-shadow: var(--upaep-offcanvas-boxshadow);
    transform: var(--upaep-offcanvas-transform);
    inset: var(--upaep-offcanvas-inset);
    z-index: var(--upaep-offcanvas-zindex);
    position: fixed;
    display: flex;
    flex-direction: column;
    outline: 0;
    transition: transform 0.3s ease-in-out;

    &:not(.is-show) {
        --upaep-offcanvas-transform: translateX(-100%);

        &.__right {
            --upaep-offcanvas-transform: translateX(100%);
        }

        &.__bottom {
            --upaep-offcanvas-transform: translateY(100%);
        }

        &.__top {
            --upaep-offcanvas-transform: translateY(-100%);
        }
    }

    &.__right {
        --upaep-offcanvas-inset: 0 0 0 auto;
    }

    &.__bottom {
        --upaep-offcanvas-maxwidth: 100%;
        --upaep-offcanvas-height: 400px;
        --upaep-offcanvas-inset: auto auto 0 0;
    }

    &.__top {
        --upaep-offcanvas-maxwidth: 100%;
        --upaep-offcanvas-height: 400px;
        --upaep-offcanvas-inset: 0 auto auto 0;
    }

    & .upaep__offcanvas-header {
        background: var(--upaep-offcanvas-header-bg);
        padding: var(--upaep-offcanvas-header-padding);
        border-bottom: var(--upaep-offcanvas-header-border-bottom-size) var(--upaep-offcanvas-header-border-bottom-style) var(--upaep-offcanvas-header-border-bottom-color);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    & .upaep__offcanvas-title {
        font-size: var(--upaep-offcanvas-title-fz);
        font-weight: var(--upaep-offcanvas-title-fw);
        color: var(--upaep-offcanvas-title-color);
        margin: var(--upaep-offcanvas-title-margin);
        padding: var(--upaep-offcanvas-title-padding);
        line-height: var(--upaep-offcanvas-title-lineheight);
    }

    & .upaep__offcanvas-close {
        &::before {
            content: var(--upaep-offcanvas-close-content);
            font-size: var(--upaep-offcanvas-close-fz);
            font-weight: var(--upaep-offcanvas-close-fw);
            color: var(--upaep-offcanvas-close-color);
            padding: var(--upaep-offcanvas-close-padding);
            margin: var(--upaep-offcanvas-close-margin);
            font-family: var(--upaep-ff-fontawesome);
            font-style: normal;
            font-variant: normal;
            line-height: 1;
            text-rendering: auto;
            cursor: pointer;
        }

        &:hover::before {
            content: var(--upaep-offcanvas-close-hover-content);
            font-size: var(--upaep-offcanvas-close-hover-fz);
            font-weight: var(--upaep-offcanvas-close-hover-fw);
            color: var(--upaep-offcanvas-close-hover-color);
            padding: var(--upaep-offcanvas-close-hover-padding);
            margin: var(--upaep-offcanvas-close-hover-margin);
        }

        &.__sup {
            position: absolute;
            inset: 5px 0 auto auto;
        }
    }

    & .upaep__offcanvas-content {
        background: var(--upaep-offcanvas-content-bg);
        padding: var(--upaep-offcanvas-content-padding);
        font-size: var(--upaep-offcanvas-content-fz);
        font-weight: var(--upaep-offcanvas-content-fw);
        color: var(--upaep-offcanvas-content-color);
        flex-grow: 1;
        overflow-y: auto;
    }

    & .upaep__offcanvas-footer {
        background: var(--upaep-offcanvas-footer-bg);
        padding: var(--upaep-offcanvas-footer-padding);
        border-top: var(--upaep-offcanvas-footer-border-top-size) var(--upaep-offcanvas-footer-border-top-style) var(--upaep-offcanvas-footer-border-top-color);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

.upaep__offcanvas.__sm {
    --upaep-offcanvas-maxwidth: var(--upaep-size-xxs);
}

.upaep__offcanvas.__lg {
    --upaep-offcanvas-maxwidth: var(--upaep-size-lg);
}

.upaep__offcanvas.__xl {
    --upaep-offcanvas-maxwidth: var(--upaep-size-xl);
}

.upaep__offcanvas.__fullscreen {
    --upaep-offcanvas-width: 100%;
    --upaep-offcanvas-height: 100%;
    --upaep-offcanvas-maxwidth: none;
    --upaep-offcanvas-margin: 0;
}

.upaep__offcanvas.__dark {
    --upaep-offcanvas-bg: var(--colordark);
    --upaep-offcanvas-header-border-bottom-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-offcanvas-title-color: var(--ui-on-surface-inverse, var(--upaep-color-white));
    --upaep-offcanvas-close-color: var(--upaep-color-background);
    --upaep-offcanvas-close-hover-color: var(--ui-on-surface-inverse, var(--upaep-color-white));
    --upaep-offcanvas-content-bg: transparent;
    --upaep-offcanvas-footer-bg: transparent;
    --upaep-offcanvas-footer-border-top-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-offcanvas-content-color: var(--ui-on-surface-inverse, var(--upaep-color-white));
}

.upaep__offcanvas.__black {
    --upaep-offcanvas-bg: var(--ui-surface-inverse, var(--upaep-color-black));
    --upaep-offcanvas-header-border-bottom-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-offcanvas-title-color: var(--ui-on-surface-inverse, var(--upaep-color-white));
    --upaep-offcanvas-close-color: var(--upaep-color-background);
    --upaep-offcanvas-close-hover-color: var(--ui-on-surface-inverse, var(--upaep-color-white));
    --upaep-offcanvas-content-bg: transparent;
    --upaep-offcanvas-footer-bg: transparent;
    --upaep-offcanvas-footer-border-top-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-offcanvas-content-color: var(--ui-on-surface-inverse, var(--upaep-color-white));
}

/*? ------ Paginación ------ */
.upaep__pagination {
    --upaep-pagination-width: auto;
    --upaep-pagination-height: auto;
    --upaep-pagination-padding: .5rem;
    --upaep-pagination-margin: 0;
    --upaep-pagination-bg: ;
    --upaep-pagination-justify: end;
    --upaep-pagination-number-minwidth: 25px;
    --upaep-pagination-number-minheight: 25px;
    --upaep-pagination-number-padding: 0 .25rem;
    --upaep-pagination-number-bg: ;
    --upaep-pagination-number-fz: var(--upaep-fz14);
    --upaep-pagination-number-fw: var(--upaep-fw-bold);
    --upaep-pagination-number-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-pagination-number-hover-bg: var(--ui-accent, var(--upaep-color-red));
    --upaep-pagination-number-hover-fz: var(--upaep-fz14);
    --upaep-pagination-number-hover-fw: var(--upaep-fw-bold);
    --upaep-pagination-number-hover-color: var(--upaep-color-white);
    --upaep-pagination-number-active-bg: var(--ui-accent, var(--upaep-color-red));
    --upaep-pagination-number-active-fz: var(--upaep-fz14);
    --upaep-pagination-number-active-fw: var(--upaep-fw-bold);
    --upaep-pagination-number-active-color: var(--upaep-color-white);
    --upaep-pagination-number-active-hover-bg: var(--ui-accent, var(--upaep-color-red));
    --upaep-pagination-number-active-hover-fz: var(--upaep-fz14);
    --upaep-pagination-number-active-hover-fw: var(--upaep-fw-bold);
    --upaep-pagination-number-active-hover-color: var(--upaep-color-white);
    --upaep-pagination-points-colors: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    /*? Color de las flechas «primera / anterior / siguiente / ultima». */
    --upaep-pagination-nav-color: var(--ui-accent, var(--upaep-color-red));
    width: var(--upaep-pagination-width);
    height: var(--upaep-pagination-height);
    padding: var(--upaep-pagination-padding);
    margin: var(--upaep-pagination-margin);
    background: var(--upaep-pagination-bg);
    justify-content: var(--upaep-pagination-justify);
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;

    & .upaep__btn {
        --upaep-btn-margin: 0;

        &.change_elements {
            /*? El SVG de la flecha es inline y usa currentColor: su color ES el
               del boton, y por eso el token vive aqui y no en el icono. */
            --upaep-btn-color: var(--upaep-pagination-nav-color);
            --upaep-btn-padding: .5rem;
            --upaep-btn-margin: 0;
            --upaep-btn-border-color: var(--ui-surface, var(--upaep-color-white));
            --upaep-btn-border-radius: 50px;
            --upaep-btn-fz: var(--upaep-fz14);
            --upaep-btn-fw: var(--upaep-fw-bold);
            --upaep-btn-bg: var(--ui-surface, var(--upaep-color-white));
            --upaep-btn-hover-bg: var(--ui-surface-3, var(--upaep-color-tenue-gray));
            --upaep-btn-hover-border-size: 1px;
            --upaep-btn-hover-border-color: var(--ui-surface-3, var(--upaep-color-tenue-gray));
            /*? Igual que en la base: no cambiar de color en hover se dice
               apuntando al color de reposo, no dejando el token vacío. */
            --upaep-btn-hover-color: var(--upaep-btn-color);

            :is(img, svg) {
                width: 15px;
                height: 15px;
            }

            &[data-move="back_"]::before {
                font-family: var(--upaep-ff-fontawesome);
                content: '\f104';
                margin: 0 5px;
                color: var(--ui-accent, var(--upaep-color-red));
            }

            &[data-move="next_"]::after {
                font-family: var(--upaep-ff-fontawesome);
                content: '\f105';
                margin: 0 5px;
                color: var(--ui-accent, var(--upaep-color-red));
            }
        }
    }

    & .upaep__pagination-paginate {
        width: auto;
        height: auto;
        display: inline-flex;
        gap: 5px;
    }

    & .upaep__pagination-points,
    & .pagination_points {
        margin: 0 .5rem;
        text-decoration: none;
        color: var(--upaep-pagination-points-colors);
        cursor: default;
    }

    & .upaep__pagination-number,
    & .pagination_number {
        min-width: var(--upaep-pagination-number-minwidth);
        min-height: var(--upaep-pagination-number-minheight);
        background: var(--upaep-pagination-number-bg);
        padding: var(--upaep-pagination-number-padding);
        font-size: var(--upaep-pagination-number-fz);
        font-weight: var(--upaep-pagination-number-fw);
        color: var(--upaep-pagination-number-color);
        border-radius: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        text-decoration: none;

        &.is-disabled {
            opacity: .5;
            pointer-events: none;
            cursor: no-drop;
        }

        &:hover {
            width: var(--upaep-pagination-number-hover-width);
            height: var(--upaep-pagination-number-hover-height);
            background: var(--upaep-pagination-number-hover-bg);
            font-size: var(--upaep-pagination-number-hover-fz);
            font-weight: var(--upaep-pagination-number-hover-fw);
            color: var(--upaep-pagination-number-hover-color);
            border-radius: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        &.is-active {
            width: var(--upaep-pagination-number-active-width);
            height: var(--upaep-pagination-number-active-height);
            background: var(--upaep-pagination-number-active-bg);
            font-size: var(--upaep-pagination-number-active-fz);
            font-weight: var(--upaep-pagination-number-active-fw);
            color: var(--upaep-pagination-number-active-color);
            border-radius: 50px;
            display: flex;
            justify-content: center;
            align-items: center;

            &:hover {
                width: var(--upaep-pagination-number-active-hover-width);
                height: var(--upaep-pagination-number-active-hover-height);
                background: var(--upaep-pagination-number-active-hover-bg);
                font-size: var(--upaep-pagination-number-active-hover-fz);
                font-weight: var(--upaep-pagination-number-active-hover-fw);
                color: var(--upaep-pagination-number-active-hover-color);
                border-radius: 50px;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
    }
}

.upaep__pagination.__lineal {
    gap: 0;

    & .upaep__btn.change_elements:first-child {
        --upaep-btn-border-radius: 50px 0 0 50px;
    }

    & .upaep__btn.change_elements:last-child {
        --upaep-btn-border-radius: 0 50px 50px 0;
    }
}

/*? ------ Table ------ */
.upaep__table {
    --upaep-table-width: 100%;
    --upaep-table-height: auto;
    --upaep-table-margin: 0 0 1rem 0;
    --upaep-table-padding: .5rem;
    --upaep-table-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-table-border-size: 1px;
    --upaep-table-border-style: solid;
    --upaep-table-border-color: transparent;
    --upaep-table-border-radius: 10px;
    --upaep-table-thead-border-bottom-size: 1px;
    --upaep-table-thead-border-bottom-style: solid;
    --upaep-table-thead-border-bottom-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-table-thead-bg: transparent;
    --upaep-table-thead-fz: var(--upaep-fz16);
    --upaep-table-thead-fw: var(--upaep-fw-bold);
    --upaep-table-thead-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-table-thead-minwidth: 0;
    --upaep-table-thead-maxwidth: auto;
    --upaep-table-caption-padding: .35rem;
    --upaep-table-caption-border-bottom-size: 1px;
    --upaep-table-caption-border-bottom-style: solid;
    --upaep-table-caption-border-bottom-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-table-tbody-border-bottom-size: 0;
    --upaep-table-tbody-border-bottom-style: solid;
    --upaep-table-tbody-border-bottom-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-table-tbody-bg: transparent;
    --upaep-table-tbody-fz: var(--upaep-fz14);
    --upaep-table-tbody-fw: var(--upaep-fw-regular);
    --upaep-table-tbody-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-table-tbody-align: start;
    --upaep-table-hover-bg: var(--ui-surface-3, var(--upaep-color-tenue-gray));
    --upaep-table-hover-fz: var(--upaep-fz14);
    --upaep-table-hover-fw: var(--upaep-fw-regular);
    --upaep-table-hover-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-table-active-bg: var(--ui-surface-3, var(--upaep-color-tenue-gray));
    --upaep-table-active-fz: var(--upaep-fz14);
    --upaep-table-active-fw: var(--upaep-fw-regular);
    --upaep-table-active-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-table-striped-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-table-striped-fz: var(--upaep-fz14);
    --upaep-table-striped-fw: var(--upaep-fw-regular);
    --upaep-table-striped-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-table-striped-hover-bg: var(--ui-surface-2, var(--upaep-color-background));
    --upaep-table-striped-hover-fz: var(--upaep-fz14);
    --upaep-table-striped-hover-fw: var(--upaep-fw-regular);
    --upaep-table-striped-hover-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-table-striped-active-bg: var(--ui-surface-3, var(--upaep-color-tenue-gray));
    --upaep-table-striped-active-fz: var(--upaep-fz14);
    --upaep-table-striped-active-fw: var(--upaep-fw-regular);
    --upaep-table-striped-active-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-table-align: middle;
    width: var(--upaep-table-width);
    height: var(--upaep-table-height);
    margin: var(--upaep-table-margin);
    padding: var(--upaep-table-padding);
    background: var(--upaep-table-bg);
    border: var(--upaep-table-border-size) var(--upaep-table-border-style) var(--upaep-table-border-color);
    border-radius: var(--upaep-table-border-radius);
    vertical-align: var(--upaep-table-align);

    & thead tr {
        border-bottom: var(--upaep-table-thead-border-bottom-size) var(--upaep-table-thead-border-bottom-style) var(--upaep-table-thead-border-bottom-color);
        background: var(--upaep-table-thead-bg);
        font-size: var(--upaep-table-thead-fz);
        font-weight: var(--upaep-table-thead-fw);
        color: var(--upaep-table-thead-color);
    }

    &>:not(caption)>*>* {
        padding: var(--upaep-table-caption-padding);
        border-bottom: var(--upaep-table-caption-border-bottom-size) var(--upaep-table-caption-border-bottom-style) var(--upaep-table-caption-border-bottom-color);
        min-width: var(--upaep-table-thead-minwidth);
        max-width: var(--upaep-table-thead-maxwidth);
        text-align: center;
    }

    & tbody {
        border-bottom: var(--upaep-table-tbody-border-bottom-size) var(--upaep-table-tbody-border-bottom-style) var(--upaep-table-tbody-border-bottom-color);

        & tr {
            background: var(--upaep-table-tbody-bg);
            font-size: var(--upaep-table-tbody-fz);
            font-weight: var(--upaep-table-tbody-fw);
            color: var(--upaep-table-tbody-color);
            text-align: var(--upaep-table-tbody-align);
        }
    }

    &.__striped {
        &>tbody>tr:nth-of-type(odd)>* {
            background: var(--upaep-table-striped-bg);
            font-size: var(--upaep-table-striped-fz);
            font-weight: var(--upaep-table-striped-fw);
            color: var(--upaep-table-striped-color);
        }

        &.__hover>tbody>tr:hover:nth-of-type(odd)>* {
            background: var(--upaep-table-striped-hover-bg);
            font-size: var(--upaep-table-striped-hover-fz);
            font-weight: var(--upaep-table-striped-hover-fw);
            color: var(--upaep-table-striped-hover-color);
        }

        &>tbody>tr.is-active:nth-of-type(odd)>* {
            background: var(--upaep-table-striped-active-bg);
            font-size: var(--upaep-table-striped-active-fz);
            font-weight: var(--upaep-table-striped-active-fw);
            color: var(--upaep-table-striped-active-color);
        }
    }

    &.__hover>tbody>tr:hover>* {
        background: var(--upaep-table-hover-bg);
        font-size: var(--upaep-table-hover-fz);
        font-weight: var(--upaep-table-hover-fw);
        color: var(--upaep-table-hover-color);
    }

    &>tbody>tr.is-active>* {
        background: var(--upaep-table-active-bg);
        font-size: var(--upaep-table-active-fz);
        font-weight: var(--upaep-table-active-fw);
        color: var(--upaep-table-active-color);
    }
}

.upaep__table.__bordered {
    --upaep-table-border-size: 1px;
    --upaep-table-border-style: solid;
    --upaep-table-border-color: var(--ui-border, var(--upaep-color-border-grey));
}

.upaep__table.__borderless>:not(caption)>*>* {
    --upaep-table-caption-border-bottom-size: 0;
}

.upaep__table.__primary {
    --upaep-table-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-table-border-size: 1px;
    --upaep-table-border-style: solid;
    --upaep-table-border-color: transparent;
    --upaep-table-border-radius: 10px;
    --upaep-table-thead-border-bottom-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-table-thead-bg: var(--ui-neutral, var(--upaep-color-dark-grey));
    --upaep-table-thead-color: var(--ui-on-neutral, var(--upaep-color-white));
    --upaep-table-caption-border-bottom-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-table-tbody-bg: transparent;
    --upaep-table-tbody-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-table-hover-bg: var(--upaep-color-light-grey);
    --upaep-table-hover-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-table-active-bg: var(--upaep-color-light-grey);
    --upaep-table-active-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-table-striped-bg: var(--ui-surface-3, var(--upaep-color-tenue-gray));
    --upaep-table-striped-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-table-striped-hover-bg: var(--upaep-color-light-grey);
    --upaep-table-striped-hover-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-table-striped-active-bg: var(--upaep-color-light-grey);
    --upaep-table-striped-active-color: var(--ui-text-strong, var(--upaep-color-black));
}

.upaep__table.__secondary {
    --upaep-table-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-table-border-size: 1px;
    --upaep-table-border-style: solid;
    --upaep-table-border-color: transparent;
    --upaep-table-border-radius: 10px;
    --upaep-table-thead-border-bottom-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-table-thead-bg: var(--ui-neutral, var(--upaep-color-dark-grey));
    --upaep-table-thead-color: var(--ui-on-neutral, var(--upaep-color-white));
    --upaep-table-caption-border-bottom-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-table-tbody-bg: transparent;
    --upaep-table-tbody-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-table-hover-bg: var(--ui-surface-3, var(--upaep-color-tenue-gray));
    --upaep-table-hover-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-table-active-bg: var(--ui-surface-3, var(--upaep-color-tenue-gray));
    --upaep-table-active-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-table-striped-bg: var(--upaep-color-blue-primary);
    --upaep-table-striped-color: var(--upaep-color-white);
    --upaep-table-striped-hover-bg: var(--upaep-color-blue-primary-hover);
    --upaep-table-striped-hover-color: var(--upaep-color-white);
    --upaep-table-striped-active-bg: var(--upaep-color-blue-primary);
    --upaep-table-striped-active-color: var(--upaep-color-white);
}

.upaep__table.__minimalist,
.upaep__table.__customtable,
.upaep__table.__datatable {
    --upaep-table-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-table-border-size: 1px;
    --upaep-table-border-style: solid;
    --upaep-table-border-color: transparent;
    --upaep-table-border-radius: 10px;
    --upaep-table-thead-border-bottom-color: var(--ui-border, #A6A6A6);
    --upaep-table-thead-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-table-thead-color: var(--ui-text-muted, var(--upaep-color-grey));
    --upaep-table-thead-fz: var(--upaep-fz12);
    --upaep-table-thead-fw: var(--upaep-fw-semibold);
    --upaep-table-thead-minwidth: 100px;
    --upaep-table-caption-border-bottom-size: 0;
    --upaep-table-caption-border-bottom-color: var(--ui-border, #A6A6A6);
    --upaep-table-tbody-border-bottom-size: 1px;
    --upaep-table-tbody-bg: transparent;
    --upaep-table-tbody-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-table-hover-bg: var(--ui-surface-3, var(--upaep-color-tenue-gray));
    --upaep-table-hover-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-table-active-bg: var(--ui-surface-3, var(--upaep-color-tenue-gray));
    --upaep-table-active-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-table-striped-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-table-striped-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-table-striped-hover-bg: var(--ui-surface-3, var(--upaep-color-tenue-gray));
    --upaep-table-striped-hover-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-table-striped-active-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-table-striped-active-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-table-margin: 0 0 .5rem;
    border-collapse: collapse;

    & tbody tr:last-child td {
        padding: .35rem .35rem 1rem .35rem;
    }
}

.upaep__table-content {
    --upaep-table-content-width: 100%;
    --upaep-table-content-height: auto;
    --upaep-table-content-padding: 1rem;
    --upaep-table-content-margin: 1rem;
    --upaep-table-content-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-table-content-boxshadow: var(--ui-shadow, var(--upaep-box-shadow));
    --upaep-table-content-border-size: 0;
    --upaep-table-content-border-style: solid;
    --upaep-table-content-border-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-table-content-border-radius: 10px;
    --upaep-table-content-track-color: var(--ui-surface-2, var(--upaep-color-background));
    --upaep-table-content-thumb-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-table-content-track-hover-color: var(--ui-surface-3, var(--upaep-color-tenue-gray));
    --upaep-table-content-thumb-hover-color: var(--ui-border, var(--upaep-color-border-grey));
    width: var(--upaep-table-content-width);
    height: var(--upaep-table-content-height);
    padding: var(--upaep-table-content-padding);
    margin: var(--upaep-table-content-margin);
    background: var(--upaep-table-content-bg);
    box-shadow: var(--upaep-table-content-boxshadow);
    border: var(--upaep-table-content-border-size) var(--upaep-table-content-border-style) var(--upaep-table-content-border-color);
    border-radius: var(--upaep-table-content-border-radius);

    &.__responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-color: var(--upaep-table-content-thumb-color) var(--upaep-table-content-track-color);

        &::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        &::-webkit-scrollbar-track {
            background: var(--upaep-table-content-track-color);
            border-radius: 10px;
        }

        &::-webkit-scrollbar-thumb {
            background: var(--upaep-table-content-thumb-color);
            border-radius: 10px;
        }

        &::-webkit-scrollbar-track:hover {
            background: var(--upaep-table-content-track-hover-color);
        }

        &::-webkit-scrollbar-thumb:hover {
            background: var(--upaep-table-content-thumb-hover-color);
        }
    }
}

/*? ------ CustomTable ------ */
.table_config_container,
.upaep__customtable {
    --upaep-customtable-width: 100%;
    --upaep-customtable-height: auto;
    --upaep-customtable-padding: 1rem;
    --upaep-customtable-margin: 1rem auto;
    --upaep-customtable-bg: var(--ui-surface, var(--upaep-color-white));
    /*? SIN sombra por defecto: la tabla de datos va plana, sobre la superficie o dentro de un panel (la sombra
        doble —la de la tabla y la del panel— se leia como un borde sucio). Opt-in: `.__shadow`. */
    --upaep-customtable-boxshadow: none;
    --upaep-customtable-border-size: 0;
    --upaep-customtable-border-style: solid;
    --upaep-customtable-border-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-customtable-border-radius: 10px;
    --upaep-customtable-track-color: var(--ui-surface-2, var(--upaep-color-background));
    --upaep-customtable-thumb-color: var(--ui-text-muted, var(--upaep-color-grey));
    --upaep-customtable-track-hover-color: var(--ui-surface-3, var(--upaep-color-tenue-gray));
    --upaep-customtable-thumb-hover-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-customtable-search-width: 100%;
    --upaep-customtable-search-height: auto;
    --upaep-customtable-search-padding: .5rem 1rem;
    --upaep-customtable-search-margin: 0;
    --upaep-customtable-search-bg: transparent;
    --upaep-customtable-search-justify: end;
    --upaep-customtable-search-label-fz: var(--upaep-fz16);
    --upaep-customtable-search-label-fw: var(--upaep-fw-semibold);
    --upaep-customtable-search-label-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-customtable-search-label-padding: 0;
    /*? Fondo del campo de busqueda: sigue la superficie del tema, no un blanco fijo. */
    --upaep-customtable-search-input-bg: var(--ui-surface, var(--upaep-color-white));
    /*? Lupa del buscador: FORMA (se pinta con mask, el color que lleve el SVG se
        ignora) + color, que sale del acento de la marca como los demas iconos. */
    --upaep-customtable-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E");
    --upaep-customtable-icon-search-size: 22px;
    --upaep-customtable-icon-search-color: var(--ui-accent, var(--upaep-color-red));
    /*? Separacion de la lupa respecto al borde derecho del campo. Antes era un
        95% del ANCHO del input, que con un campo de ancho variable movia el icono. */
    --upaep-customtable-icon-search-inset: .7rem;
    --upaep-customtable-content-width: 100%;
    --upaep-customtable-content-height: auto;
    --upaep-customtable-content-padding: 0;
    --upaep-customtable-content-margin: 0;
    --upaep-customtable-content-bg: transparent;
    --upaep-customtable-content-justify: center;
    --upaep-customtable-pagination-width: 100%;
    --upaep-customtable-pagination-height: auto;
    --upaep-customtable-pagination-padding: 0;
    --upaep-customtable-pagination-margin: 0;
    --upaep-customtable-pagination-bg: transparent;
    --upaep-customtable-pagination-justify: end;
    /*? Texto de servicio del pie: total de registros y numeros de pagina inactivos. */
    --upaep-customtable-footer-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    /*? Separador de la fila desplegada por el colapso. */
    --upaep-customtable-collapse-divider-color: var(--ui-divider, var(--upaep-color-tenue-gray));
    /*? Columna congelada: tapa lo que pasa por debajo, asi que su fondo ES la
        superficie del tema. La sombra se deriva de la tinta fuerte para que en
        oscuro el borde siga viendose (en claro da exactamente el negro 25% de antes). */
    --upaep-customtable-sticky-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-customtable-sticky-shadow-color: color-mix(in srgb, var(--ui-text-strong, #000) 25%, transparent);
    /*? Indicador de orden. Cada flecha es una mascara de un solo color, de modo que
        el color salga de un token del tema; comparten caja y se superponen igual que
        el icono de dos tonos que habia antes. */
    --upaep-customtable-icon-sort-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21.2 45.1'%3E%3Cg fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' transform='translate(1.414 1)'%3E%3Cpath d='M-0.4 9.6L9.2 0l9.6 9.6'/%3E%3C/g%3E%3C/svg%3E");
    --upaep-customtable-icon-sort-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21.2 45.1'%3E%3Cg fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' transform='translate(1.414 1)'%3E%3Cpath d='M18.8 33.5l-9.6 9.6-9.6-9.6'/%3E%3C/g%3E%3C/svg%3E");
    --upaep-customtable-icon-sort-size: 15px 30px;
    --upaep-customtable-sort-ink: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-customtable-sort-ink-muted: var(--ui-text-muted, var(--upaep-color-border-grey));
    /*? ── Piel BASE de la tabla de datos (la de `.__customtable`) ─────────────────────────────
        Tranquila y por TOKENS: el color lo ponen los roles (`--ui-*`), asi que lo decide la marca
        y el tema; aqui solo se fija la forma. Cada valor se puede redefinir en una instancia. */
    --upaep-customtable-th-transform: uppercase;
    --upaep-customtable-th-spacing: .04em;
    --upaep-customtable-search-radius: 10px;
    --upaep-customtable-toolbar-btn-fz: var(--upaep-fz14);
    --upaep-customtable-toolbar-btn-padding: .5rem 1rem;
    --upaep-customtable-footer-fz: var(--upaep-fz13, .8125rem);
    --upaep-customtable-footer-muted: var(--ui-text-muted, var(--upaep-color-grey));
    width: var(--upaep-customtable-width);
    height: var(--upaep-customtable-height);
    padding: var(--upaep-customtable-padding);
    margin: var(--upaep-customtable-margin);
    background: var(--upaep-customtable-bg);
    box-shadow: var(--upaep-customtable-boxshadow);
    border: var(--upaep-customtable-border-size) var(--upaep-customtable-border-style) var(--upaep-customtable-border-color);
    border-radius: var(--upaep-customtable-border-radius);
    display: flex;
    flex-direction: column;
    gap: .75rem;

    &.__shadow {
        --upaep-customtable-boxshadow: var(--ui-shadow, var(--upaep-box-shadow));
    }
}

.table_config_container .table_search,
.upaep__customtable .upaep__customtable-search {
    width: var(--upaep-customtable-search-width);
    height: var(--upaep-customtable-search-height);
    padding: var(--upaep-customtable-search-padding);
    margin: var(--upaep-customtable-search-margin);
    background: var(--upaep-customtable-search-bg);
    justify-content: var(--upaep-customtable-search-justify);
    display: flex;
    align-items: center;
    gap: 1rem;

    &>div {
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        &:has(.search_value) {
            gap: 5px;
            /*? Ancla de la lupa: el campo es el ultimo hijo, asi que el borde
                derecho de este div ES el borde derecho del campo. */
            position: relative;

            &::after {
                content: '';
                position: absolute;
                inset: 50% var(--upaep-customtable-icon-search-inset) auto auto;
                translate: 0 -50%;
                width: var(--upaep-customtable-icon-search-size);
                height: var(--upaep-customtable-icon-search-size);
                background-color: var(--upaep-customtable-icon-search-color);
                -webkit-mask: var(--upaep-customtable-icon-search) center / contain no-repeat;
                mask: var(--upaep-customtable-icon-search) center / contain no-repeat;
                /*? Decorativa: el click tiene que llegar al campo que hay debajo. */
                pointer-events: none;
            }
        }
    }

    & div:has(.search_value) .search_value:not(.upaep__input) {
        width: auto;
        height: auto;
        padding: .35rem 2.5rem .35rem .75rem;
        background-color: var(--upaep-customtable-search-input-bg);
        border-radius: 50px;
    }
}

.table_config_container .table_search label,
.upaep__customtable .upaep__customtable-search label {
    font-size: var(--upaep-customtable-search-label-fz);
    font-weight: var(--upaep-customtable-search-label-fw);
    color: var(--upaep-customtable-search-label-color);
    padding: var(--upaep-customtable-search-label-padding);
    margin: 0;
}

.table_config_container .table_search .upaep__input.search_value,
.upaep__customtable .upaep__customtable-search .upaep__input.search_value {
    --upaep-input-width: auto;
    --upaep-input-height: auto;
    --upaep-input-padding: .35rem 2.5rem .35rem .75rem;
    --upaep-input-margin: 0;
    --upaep-input-border-radius: 50px;
    background-color: var(--upaep-customtable-search-input-bg);
}

.table_config_container .table_search .upaep__input.search_value:focus,
.upaep__customtable .upaep__customtable-search .upaep__input.search_value:focus {
    background-color: var(--upaep-customtable-search-input-bg);
}

.table_config_container .table_content,
.upaep__customtable .upaep__customtable-content {
    width: var(--upaep-customtable-content-width);
    height: var(--upaep-customtable-content-height);
    padding: var(--upaep-customtable-content-padding);
    margin: var(--upaep-customtable-content-margin);
    background: var(--upaep-customtable-content-bg)
}

.table_config_container .table_content,
.upaep__customtable .upaep__customtable-content {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table_config_container .table_content,
.upaep__customtable .upaep__customtable-content {
    scrollbar-color: var(--upaep-customtable-thumb-color) var(--upaep-customtable-track-color);
}

.table_config_container .table_content::-webkit-scrollbar,
.upaep__customtable .upaep__customtable-content::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.table_config_container .table_content::-webkit-scrollbar-track,
.upaep__customtable .upaep__customtable-content::-webkit-scrollbar-track {
    background: var(--upaep-customtable-track-color);
    border-radius: 10px;
}

.table_config_container .table_content::-webkit-scrollbar-thumb,
.upaep__customtable .upaep__customtable-content::-webkit-scrollbar-thumb {
    background: var(--upaep-customtable-thumb-color);
    border-radius: 10px;
}

.table_config_container .table_content::-webkit-scrollbar-track:hover,
.upaep__customtable .upaep__customtable-content::-webkit-scrollbar-track:hover {
    background: var(--upaep-customtable-track-hover-color);
}

.table_config_container .table_content::-webkit-scrollbar-thumb:hover,
.upaep__customtable .upaep__customtable-content::-webkit-scrollbar-thumb:hover {
    background: var(--upaep-customtable-thumb-hover-color);
}

.table_config_container .table_content thead th div,
.upaep__customtable .upaep__customtable-content thead th div {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.table_config_container .table_content thead th div .upaep__input.search_by_column,
.upaep__customtable .upaep__customtable-content thead th div .upaep__input.search_by_column {
    --upaep-input-width: 200px;
    --upaep-input-height: 2rem;
    --upaep-input-padding: .35rem .75rem;
    --upaep-input-margin: 0;
    --upaep-input-border-radius: 50px;
}

.table_config_container .table_content thead th div .search_by_column,
.upaep__customtable .upaep__customtable-content thead th div .search_by_column {
    width: 200px;
    height: 2rem;
    padding: .35rem .75rem;
    margin: 0;
    border-radius: 50px;
}

.table_config_container .table_content thead>tr,
.upaep__customtable .upaep__customtable-content thead>tr {
    th {
        position: relative;
        align-content: end;
        line-height: normal;

        &[data-field] {
            padding-inline-end: 1.5rem;

            /*? Caja compartida por las dos flechas: la misma que tenia el icono unico,
                para que el indicador no se mueva ni un pixel. */
            &::before,
            &::after {
                content: '';
                width: 18px;
                height: 100%;
                position: absolute;
                inset: 0 0 auto auto;
                background-color: var(--upaep-customtable-sort-ink-muted);
                -webkit-mask: var(--upaep-customtable-icon-sort-up) center center / var(--upaep-customtable-icon-sort-size) no-repeat;
                mask: var(--upaep-customtable-icon-sort-up) center center / var(--upaep-customtable-icon-sort-size) no-repeat;
                transition: background-color .5s;
            }

            /*? Sin .sort_asc la flecha enfatizada es la de bajar; con .sort_asc, la de subir. */
            &::after {
                background-color: var(--upaep-customtable-sort-ink);
                -webkit-mask-image: var(--upaep-customtable-icon-sort-down);
                mask-image: var(--upaep-customtable-icon-sort-down);
            }

            &.sort_asc {
                &::before {
                    background-color: var(--upaep-customtable-sort-ink);
                }

                &::after {
                    background-color: var(--upaep-customtable-sort-ink-muted);
                }
            }
        }
    }
}

.table_config_container .table_pagination,
.upaep__customtable .upaep__customtable-pagination {
    .total_registers {
        font-size: var(--upaep-fz14);
        font-weight: var(--upaep-fw-semibold);
        color: var(--upaep-customtable-footer-color);
    }
}

.table_config_container .table_pagination,
.upaep__customtable .upaep__customtable-pagination {
    width: var(--upaep-customtable-pagination-width);
    height: var(--upaep-customtable-pagination-height);
    padding: var(--upaep-customtable-pagination-padding);
    margin: var(--upaep-customtable-pagination-margin);
    background: var(--upaep-customtable-pagination-bg);
    justify-content: var(--upaep-customtable-pagination-justify);
    display: flex;
    align-items: center;
    gap: .5rem;

    &:has(>div) div {
        display: flex;
        align-items: center;
        gap: 10px;

        .navigation_icon {
            width: 15px;
            height: 15px;
            cursor: pointer;

            &:hover {
                scale: 1.1;
            }
        }

        .pagination_number:not(.is-active) {
            color: var(--upaep-customtable-footer-color);
            font-size: var(--upaep-fz14);
            font-weight: var(--upaep-fw-semibold);
            user-select: none;
        }
    }

    &:has(.upaep__pagination) {

        img.navigate_first_page,
        img.change_elements,
        img.naviagate_last_page,
        .before_button,
        .after_button {
            display: none !important;
        }
    }

    .upaep__pagination {
        --upaep-pagination-padding: 0;
    }
}

.table_config_container .table_content,
.upaep__customtable .upaep__customtable-content {
    /*? Chevrons del colapso. Se pintan con mask, asi que estas dos variables son la
        FORMA (el color que lleve el SVG ya no cuenta) y el color sale del token de tinta. */
    --upaep-customtable-icon-collapse-inactive: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512'%3E%3Cpath d='M246.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8 16.6-19.8 29.6l0 256c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l128-128z'/%3E%3C/svg%3E");
    --upaep-customtable-icon-collapse-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z'/%3E%3C/svg%3E");
    --upaep-customtable-icon-size-collapse-inactive: 10px 15px;
    --upaep-customtable-icon-size-collapse-active: 10px 15px;
    --upaep-customtable-icon-collapse-ink: var(--ui-accent, var(--upaep-color-red));

    tr.tr-collapse {
        td {
            --upaep-table-hover-bg: none;
            animation: a_fadeIn .3s ease-in-out;
        }
    }

    td.is-collapse {
        position: relative;
        cursor: pointer;

        &::after {
            content: '';
            background-color: var(--upaep-customtable-icon-collapse-ink);
            -webkit-mask: var(--upaep-customtable-icon-collapse-inactive) center center / var(--upaep-customtable-icon-size-collapse-inactive) no-repeat;
            mask: var(--upaep-customtable-icon-collapse-inactive) center center / var(--upaep-customtable-icon-size-collapse-inactive) no-repeat;
            width: 18px;
            height: 100%;
            position: absolute;
            inset: 0 auto auto 0;
        }

        &.is-show {
            &::after {
                -webkit-mask-image: var(--upaep-customtable-icon-collapse-active);
                mask-image: var(--upaep-customtable-icon-collapse-active);
                -webkit-mask-size: var(--upaep-customtable-icon-size-collapse-active);
                mask-size: var(--upaep-customtable-icon-size-collapse-active);
            }
        }
    }

    .td-btn-collapse {
        width: auto;
        position: relative;
        cursor: pointer;

        .__btn-collapse {
            --upaep-btn-width: 35px;
            --upaep-btn-height: 35px;
            --upaep-btn-margin: 0 auto;
            --upaep-btn-padding: .5rem;
            --upaep-btn-border-radius: 50%;
            /*? Neutro del TEMA, no el claro literal de .__light (en claro sale el
               mismo gris casi blanco; en oscuro deja de ser un disco blanco). */
            --upaep-btn-color: var(--ui-text-strong, var(--upaep-color-black));
            --upaep-btn-bg: var(--ui-surface-2, var(--upaep-color-background));
            --upaep-btn-border-color: var(--ui-surface-2, var(--upaep-color-background));
            --upaep-btn-hover-color: var(--upaep-btn-color);
            --upaep-btn-hover-bg: var(--ui-surface-3, var(--upaep-color-tenue-gray));
            --upaep-btn-hover-border-color: var(--ui-surface-3, var(--upaep-color-tenue-gray));

            &::after {
                content: '';
                background-color: var(--upaep-customtable-icon-collapse-ink);
                -webkit-mask: var(--upaep-customtable-icon-collapse-inactive) center center / var(--upaep-customtable-icon-size-collapse-inactive) no-repeat;
                mask: var(--upaep-customtable-icon-collapse-inactive) center center / var(--upaep-customtable-icon-size-collapse-inactive) no-repeat;
                width: 18px;
                height: 100%;
                position: absolute;
                inset: auto;
            }
        }

        &.is-show {
            .__btn-collapse::after {
                -webkit-mask-image: var(--upaep-customtable-icon-collapse-active);
                mask-image: var(--upaep-customtable-icon-collapse-active);
                -webkit-mask-size: var(--upaep-customtable-icon-size-collapse-active);
                mask-size: var(--upaep-customtable-icon-size-collapse-active);
            }
        }
    }

    .td-collapse-template {
        padding: .5rem;
        border-bottom: 1px solid var(--upaep-customtable-collapse-divider-color);
    }

}

.table_config_container .table_footer_container,
.upaep__customtable .table_footer_container {
    font-size: var(--upaep-customtable-footer-fz);
    color: var(--upaep-customtable-footer-muted);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

    >* {
        flex: 1 1 0;
    }

    .changeNumberRows {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .upaep__select.change_rows_selector {
        --upaep-select-width: 80px;
        --upaep-select-margin: 0;
    }
}

.table_config_container:has(.upaep__table.__no-shadow),
.upaep__customtable:has(.upaep__table.__no-shadow) {
    --upaep-customtable-boxshadow: none;
}

.table_config_container:has(.upaep__table.__customtable),
.upaep__customtable:has(.upaep__table.__customtable) {
    --upaep-customtable-search-bg: var(--ui-surface-2, var(--upaep-color-background));
    --upaep-customtable-search-padding: .75rem 1rem;
    --upaep-customtable-search-label-fz: var(--upaep-fz14);
    --upaep-customtable-search-label-color: var(--ui-text-muted, var(--upaep-color-grey));
    --upaep-customtable-search-justify: space-between;

    .table_content thead th div {
        align-items: center;
    }

    .table_content thead th {
        font-weight: var(--upaep-table-thead-fw);
        text-transform: var(--upaep-customtable-th-transform);
        letter-spacing: var(--upaep-customtable-th-spacing);
    }

    .table_search .search_value {
        font-size: var(--upaep-fz14);
    }

    .table_search {
        width: 100%;
        border-radius: var(--upaep-customtable-search-radius);

        &>div:not(:has(.search_value)) {
            gap: 1rem;
        }

        .upaep__btn {
            --upaep-btn-fz: var(--upaep-customtable-toolbar-btn-fz);
            --upaep-btn-padding: var(--upaep-customtable-toolbar-btn-padding);
            --upaep-btn-margin: 0;

            &.download_excel {
                gap: .625rem;

                img {
                    width: 20px;
                    height: 20px;
                }
            }
        }
    }
}

.table_config_container .is-sticky:is(th, td),
.upaep__customtable .is-sticky:is(th, td) {
    position: sticky !important;
    inset: auto auto auto 0;
    background: var(--upaep-customtable-sticky-bg);
    box-shadow: inset var(--upaep-customtable-sticky-shadow-color) -4px -2px 0px -2px;
    z-index: 5;
}

.table_config_container,
.upaep__customtabl {
    &:not(.is-skeleton) .upaep__skeleton-container {
        display: none;
    }

    &.is-skeleton {
        position: relative;

        .table_total_records,
        .table_footer_container,
        .table_content,
        .table_search {
            display: none;
        }
    }
}

.upaep__skeleton-container {
    width: 100%;

    .upaep__skeleton {
        --upaep-skeleton-width: 100%;
        --upaep-skeleton-border-radius: 8px;
        --upaep-skeleton-margin: 0 0 1rem 0;
        --upaep-skeleton-height: 20px;

        &.__btn,
        &.__search {
            --upaep-skeleton-border-radius: 50px;
            --upaep-skeleton-height: 40px;
        }

        &.__btn {
            --upaep-skeleton-width: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: .5rem;
            color: var(--upaep-color-white);
            font-size: var(--upaep-fz16);
            font-weight: var(--upaep-fw-bold);

            img {
                height: 25px;
            }
        }

        &.__search {
            --upaep-skeleton-width: 200px;

            &::after {
                position: absolute;
                content: '\f002';
                font-family: var(--upaep-ff-fontawesome);
                font-size: var(--upaep-fz24);
                color: var(--upaep-color-white);
                inset: 50% 5% auto auto;
                translate: 0 -50%;
            }
        }

        &.__th {
            --upaep-skeleton-margin: .5rem 0;
        }

        &.__td {
            --upaep-skeleton-margin: .5rem 0;
            --upaep-skeleton-height: 30px;
        }

        &.__registers {
            --upaep-skeleton-width: 100px;
        }

        &.__page {
            --upaep-skeleton-width: 50px;
            --upaep-skeleton-height: 20px;
        }

        &.__bullet {
            --upaep-skeleton-border-radius: 50px;
            --upaep-skeleton-width: 20px;
            --upaep-skeleton-height: 20px;
        }
    }

    .upaep__skeleton-customtable {
        width: 100%;
        padding: 1rem;
        border-radius: 8px;
    }

    .upaep__skeleton-customtable-header {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }

    .upaep__skeleton-customtable-table {
        width: 100%;
        overflow: auto;
    }

    .upaep__skeleton-customtable-footer {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }

    .upaep__skeleton-customtable-registers {
        width: 200px;
    }

    .upaep__skeleton-customtable-pagination {
        width: 200px;
        display: flex;
        align-items: center;
        justify-content: end;
        gap: .5rem;
    }
}

.upaep__btn.__trinity {
    --upaep-btn-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-btn-bg: var(--ui-surface-2, #f8f9fa);
    --upaep-btn-border-color: var(--ui-surface-2, #f8f9fa);
    --upaep-btn-hover-color: var(--upaep-btn-color);
    --upaep-btn-hover-bg: var(--ui-surface-3, #d3d4d5);
    --upaep-btn-hover-border-color: var(--ui-surface-3, #d3d4d5);
    --upaep-btn-disabled-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-btn-disabled-bg: var(--ui-surface-2, #f8f9fa);
    --upaep-btn-disabled-border-color: var(--ui-surface-2, #f8f9fa);
    --upaep-btn-height: 35px;
    --upaep-btn-width: 35px;
    --upaep-btn-border-radius: 50%;
    --upaep-btn-padding: .05rem;
    --upaep-btn-margin: 0 auto;

    img {
        width: 26px;
        cursor: pointer;
    }

    &:is(.upaep__dropdown-btn, .__dropdown)::after {
        display: none;
    }
}

/*? ------ Tabs ------ */
.upaep__tab {
    --upaep-tab-width: 100%;
    --upaep-tab-height: auto;
    --upaep-tab-padding: 2rem;
    --upaep-tab-margin: 0;
    --upaep-tab-border-size: 0;
    --upaep-tab-border-style: solid;
    --upaep-tab-border-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-tab-border-radius: 10px;
    --upaep-tab-boxshadow: var(--upaep-bx-shadow);
    --upaep-tab-tabs-width: auto;
    --upaep-tab-tabs-height: auto;
    --upaep-tab-tabs-paddig: 0;
    --upaep-tab-tabs-margin: 0 1rem;
    --upaep-tab-tabs-justify: space-around;
    --upaep-tab-tabs-border-bottom-size: 3px;
    --upaep-tab-tabs-border-bottom-style: solid;
    --upaep-tab-tabs-border-bottom-color: var(--ui-accent, var(--upaep-color-red));
    --upaep-tab-tabsitem-justify: space-around;
    --upaep-tab-tabitem-width: auto;
    --upaep-tab-tabitem-height: auto;
    --upaep-tab-tabitem-minheight: 35px;
    --upaep-tab-tabitem-min-width: 90px;
    --upaep-tab-tabitem-max-width: auto;
    --upaep-tab-tabitem-padding: .5rem;
    --upaep-tab-tabitem-fz: var(--upaep-fz16);
    --upaep-tab-tabitem-fw: var(--upaep-fw-bold);
    --upaep-tab-tabitem-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-tab-tabitem-border-radius: 10px 10px 0 0;
    --upaep-tab-tabitem-bg: var(--ui-surface, var(--upaep-color-white));
    /*? Un item declarado como <button> —lo recomendado desde la pasada de
       accesibilidad— traia el borde nativo del navegador: el reset global del
       kit uniforma `font-family`, `font-size` y `line-height` de los controles,
       pero NO el borde, y esta regla nunca lo declaraba. Con este token un
       <div> y un <button> se ven igual. */
    --upaep-tab-tabitem-border: 0;
    /*? El indicador heredaba el radio del item porque llevaba su clase. Al dejar
       de ser un item se declara aparte, con el mismo valor por defecto. */
    --upaep-tab-indicator-border-radius: var(--upaep-tab-tabitem-border-radius);
    --upaep-tab-tabitem-active-padding: .5rem;
    --upaep-tab-tabitem-active-fz: var(--upaep-fz16);
    --upaep-tab-tabitem-active-fw: var(--upaep-fw-bold);
    --upaep-tab-tabitem-active-color: var(--upaep-color-white);
    --upaep-tab-tabitem-active-border-radius: 10px 10px 0 0;
    --upaep-tab-tabitem-active-bg: var(--ui-accent, var(--upaep-color-red));
    --upaep-tab-tabitem-hover-padding: .5rem;
    --upaep-tab-tabitem-hover-fz: var(--upaep-fz16);
    --upaep-tab-tabitem-hover-fw: var(--upaep-fw-bold);
    --upaep-tab-tabitem-hover-color: var(--upaep-color-white);
    --upaep-tab-tabitem-hover-border-radius: 10px 10px 0 0;
    --upaep-tab-tabitem-hover-bg: var(--ui-accent, var(--upaep-color-red));
    --upaep-tab-tabitem-active-hover-padding: .5rem;
    --upaep-tab-tabitem-active-hover-fz: var(--upaep-fz16);
    --upaep-tab-tabitem-active-hover-fw: var(--upaep-fw-bold);
    --upaep-tab-tabitem-active-hover-color: var(--upaep-color-white);
    --upaep-tab-tabitem-active-hover-border-radius: 10px 10px 0 0;
    --upaep-tab-tabitem-active-hover-bg: var(--ui-accent, var(--upaep-color-red));
    --upaep-tab-tabitem-hover-boxshadow: ;
    --upaep-tab-tabitem-underline-width: 100%;
    --upaep-tab-tabitem-underline-height: 3px;
    --upaep-tab-tabitem-underline-color: var(--ui-accent, var(--upaep-color-red));
    --upaep-tab-tabscontent-width: 100%;
    --upaep-tab-tabscontent-height: auto;
    --upaep-tab-tabscontent-padding: 1.5rem;
    --upaep-tab-tabscontent-margin: 0;
    --upaep-tab-tabscontent-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-tab-tabscontent-border-radius: 10px;
    --upaep-tab-tabscontent-boxshadow: ;
    --upaep-tab-tabcontent-width: 100%;
    --upaep-tab-tabcontent-height: auto;
    --upaep-tab-tabcontent-padding: 1.5rem;
    --upaep-tab-tabcontent-margin: 0;
    --upaep-tab-tabcontent-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-tab-tabcontent-border-radius: 10px;
    --upaep-tab-tabscontent-second-width: 100%;
    --upaep-tab-tabscontent-second-height: auto;
    --upaep-tab-tabscontent-second-padding: 1.5rem;
    --upaep-tab-tabscontent-second-margin: 0;
    --upaep-tab-tabscontent-second-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-tab-tabscontent-second-border-radius: 10px;
    --upaep-tab-tabscontent-second-boxshadow: ;
    --upaep-tab-tabcontent-second-width: 100%;
    --upaep-tab-tabcontent-second-height: auto;
    --upaep-tab-tabcontent-second-padding: 1.5rem;
    --upaep-tab-tabcontent-second-margin: 0;
    --upaep-tab-tabcontent-second-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-tab-tabcontent-second-border-radius: 10px;
    width: var(--upaep-tab-width);
    height: var(--upaep-tab-height);
    padding: var(--upaep-tab-padding);
    margin: var(--upaep-tab-margin);
    border: var(--upaep-tab-border-size) var(--upaep-tab-border-style) var(--upaep-tab-border-color);
    border-radius: var(--upaep-tab-border-radius);
    box-shadow: var(--upaep-tab-boxshadow);

    & .upaep__tabs {
        width: var(--upaep-tab-tabs-width);
        height: var(--upaep-tab-tabs-height);
        padding: var(--upaep-tab-tabs-paddig);
        margin: var(--upaep-tab-tabs-margin);
        border-bottom: var(--upaep-tab-tabs-border-bottom-size) var(--upaep-tab-tabs-border-bottom-style) var(--upaep-tab-tabs-border-bottom-color);
        justify-content: var(--upaep-tab-tabs-justify);
        position: relative;
        display: flex;
        align-items: center;
        overflow: hidden;

        & .upaep__tab-item a,
        & .upaep__tab-item {
            width: var(--upaep-tab-tabitem-width);
            min-height: var(--upaep-tab-tabitem-minheight);
            height: var(--upaep-tab-tabitem-height);
            min-width: var(--upaep-tab-tabitem-min-width);
            max-width: var(--upaep-tab-tabitem-max-width);
            padding: var(--upaep-tab-tabitem-padding);
            font-size: var(--upaep-tab-tabitem-fz);
            font-weight: var(--upaep-tab-tabitem-fw);
            color: var(--upaep-tab-tabitem-color);
            border-radius: var(--upaep-tab-tabitem-border-radius);
            background: var(--upaep-tab-tabitem-bg);
            border: var(--upaep-tab-tabitem-border);
            appearance: none;
            box-shadow: var(--upaep-tab-tabitem-hover-boxshadow);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            white-space: initial;
            line-height: normal;
            letter-spacing: normal;
            user-select: none;
            vertical-align: middle;
            flex-shrink: 0;
            cursor: pointer;
            text-wrap: balance;
            text-decoration: none;
            word-break: break-word;
            transition: box-shadow, transform, opacity, background .2s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /*? ── EL ARO DE FOCO ────────────────────────────────────────────────
           La base declaraba `outline: none` con especificidad (0,3,0), que le
           gana a la red de seguridad `:where(…):focus-visible` del kit. Mientras
           los items eran <div> daba igual —no reciben foco—; al hacerlos
           enfocables para el teclado se habrian quedado SIN indicador de foco,
           que es peor que no haberlos tocado. Se pinta con los mismos tokens
           que `.upaep__btn`, y con `:focus-visible` para que aparezca navegando
           con teclado y no al hacer clic.

           El desplazamiento va hacia DENTRO (offset negativo) a proposito:
           `.upaep__tabs` lleva `overflow: hidden`, asi que un aro por fuera del
           item queda recortado justo en la primera y la ultima pestaña. */
        & .upaep__tab-item a:focus-visible,
        & .upaep__tab-item:focus-visible {
            outline: var(--ui-focus-ring-width, 2px) solid var(--ui-focus-ring-color, currentColor);
            outline-offset: calc(var(--ui-focus-ring-offset, 2px) * -1);
        }

        & .upaep__tab-item.is-active a,
        & .upaep__tab-item.is-active {
            padding: var(--upaep-tab-tabitem-active-padding);
            font-size: var(--upaep-tab-tabitem-active-fz);
            font-weight: var(--upaep-tab-tabitem-active-fw);
            color: var(--upaep-tab-tabitem-active-color);
            border-radius: var(--upaep-tab-tabitem-active-border-radius);
            background: var(--upaep-tab-tabitem-active-bg);
        }

        & .upaep__tab-item:hover a,
        & .upaep__tab-item:hover {
            padding: var(--upaep-tab-tabitem-hover-padding);
            font-size: var(--upaep-tab-tabitem-hover-fz);
            font-weight: var(--upaep-tab-tabitem-hover-fw);
            color: var(--upaep-tab-tabitem-hover-color);
            border-radius: var(--upaep-tab-tabitem-hover-border-radius);
            background: var(--upaep-tab-tabitem-hover-bg);
        }

        & .upaep__tab-item.is-active:hover a,
        & .upaep__tab-item.is-active:hover {
            padding: var(--upaep-tab-tabitem-active-hover-padding);
            font-size: var(--upaep-tab-tabitem-active-hover-fz);
            font-weight: var(--upaep-tab-tabitem-active-hover-fw);
            color: var(--upaep-tab-tabitem-active-hover-color);
            border-radius: var(--upaep-tab-tabitem-active-hover-border-radius);
            background: var(--upaep-tab-tabitem-active-hover-bg);
        }
    }

    & .upaep__tabs-item {
        width: 100%;
        display: flex;
        justify-content: var(--upaep-tab-tabsitem-justify);
        align-items: center;
    }

    & .upaep__tabs-content {
        width: var(--upaep-tab-tabscontent-width);
        height: var(--upaep-tab-tabscontent-height);
        padding: var(--upaep-tab-tabscontent-padding);
        margin: var(--upaep-tab-tabscontent-margin);
        background: var(--upaep-tab-tabscontent-bg);
        border-radius: var(--upaep-tab-tabscontent-border-radius);
        box-shadow: var(--upaep-tab-tabscontent-boxshadow);

        & .upaep__tab-content {
            width: var(--upaep-tab-tabcontent-width);
            height: var(--upaep-tab-tabcontent-height);
            padding: var(--upaep-tab-tabcontent-padding);
            margin: var(--upaep-tab-tabcontent-margin);
            background: var(--upaep-tab-tabcontent-bg);
            border-radius: var(--upaep-tab-tabcontent-border-radius);
            animation: a_fadeIn 1.5s;

            &:not(.is-active) {
                display: none;
            }
        }

        &.__second {
            width: var(--upaep-tab-tabscontent-second-width);
            height: var(--upaep-tab-tabscontent-second-height);
            padding: var(--upaep-tab-tabscontent-second-padding);
            margin: var(--upaep-tab-tabsconten-secondt-margin);
            background: var(--upaep-tab-tabscontent-second-bg);
            border-radius: var(--upaep-tab-tabscontent-second-border-radius);
            box-shadow: var(--upaep-tab-tabscontent-second-boxshadow);

            & .upaep__tab-content.__second:not(.is-active) {
                display: none;
            }

            & .upaep__tab-content.__second {
                width: var(--upaep-tab-tabcontent-second-width);
                height: var(--upaep-tab-tabcontent-second-height);
                padding: var(--upaep-tab-tabcontent-second-padding);
                margin: var(--upaep-tab-tabcontent-second-margin);
                background: var(--upaep-tab-tabcontent-second-bg);
                border-radius: var(--upaep-tab-tabcontent-second-border-radius);
                animation: a_fadeIn 1.5s;
            }
        }

    }

    & .upaep__tab-img {
        display: block;
        margin: 0 auto;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    &.__vertical {
        display: flex;
        --upaep-tab-tabitem-width: 100%;
        --upaep-tab-tabitem-border-radius: 0;
        --upaep-tab-tabitem-hover-border-radius: 0;
        --upaep-tab-tabitem-active-border-radius: 0;
        --upaep-tab-tabsitem-justify: start;

        .upaep__tabs {
            border-bottom: none;
            border-right: var(--upaep-tab-tabs-border-bottom-size) var(--upaep-tab-tabs-border-bottom-style) var(--upaep-tab-tabs-border-bottom-color);
            align-items: start;

            .upaep__tab-item a:first-child,
            .upaep__tab-item:first-child {
                --upaep-tab-tabitem-border-radius: 10px 10px 0 0;
                --upaep-tab-tabitem-hover-border-radius: 10px 10px 0 0;
                --upaep-tab-tabitem-active-border-radius: 10px 10px 0 0;
            }

            .upaep__tab-item a:last-child,
            .upaep__tab-item:last-child {
                --upaep-tab-tabitem-border-radius: 0 0 10px 10px;
                --upaep-tab-tabitem-hover-border-radius: 0 0 10px 10px;
                --upaep-tab-tabitem-active-border-radius: 0 0 10px 10px;
            }
        }

        .upaep__tabs-item {
            flex-direction: column;
            height: 100%;
        }
    }

    &.__space-balance {
        .upaep__tabs {

            .upaep__tab-item a,
            .upaep__tab-item {
                flex: 1 0 0;
            }
        }
    }

    /*? `__indicator` es la forma canonica y `tabs-indicator` el alias antiguo,
       que se mantiene mientras haya paginas que lo usen. Antes solo existia el
       segundo mientras la ficha documentaba el primero: quien escribia la
       variante DOCUMENTADA no obtenia ni estilo ni comportamiento. Regla C.1. */
    &.tabs-indicator,
    &.__indicator {
        --upaep-tab-tabitem-bg: none;
        --upaep-tab-tabitem-active-bg: none;
        --upaep-tab-tabitem-active-hover-bg: none;
        --upaep-tab-tabitem-underline-color: none;
        --upaep-tab-indicator: var(--ui-accent, var(--upaep-color-red));

        .upaep__tab-item a,
        .upaep__tab-item {
            z-index: 2;
            transition: all 0.5s;

            /*? Alias en depreciacion: el indicador se inyectaba con la clase
               del item, asi que el listener delegado de clic lo tomaba por una
               pestaña —pinchar un hueco de la barra apagaba todas— y entraba en
               el recorrido de teclado. El runtime inyecta ya un
               `.upaep__tab-indicator`. Regla B.4. */
            &.__indicator {
                position: absolute;
                inset: 0;
                background: var(--upaep-tab-indicator);
                z-index: 1;
                pointer-events: none;
            }
        }

        /*? El indicador es decoracion: no es un item, no recibe el clic y el
           runtime le escribe `aria-hidden`. Regla B.4. */
        .upaep__tab-indicator {
            position: absolute;
            inset: 0;
            /*? La altura la daba antes `.upaep__tab-item`, porque el indicador
               llevaba la clase del item. Al dejar de ser un item hay que
               declararla: el JS fija `inset: 0 auto auto Xpx` —con `bottom` en
               auto— asi que sin esto la pildora se aplasta a una linea. Medido
               con navegador sobre la demo. */
            height: 100%;
            background: var(--upaep-tab-indicator);
            border-radius: var(--upaep-tab-indicator-border-radius);
            z-index: 1;
            pointer-events: none;
            transition: all 0.5s;
        }
    }
}

.upaep__tab.__left {
    --upaep-tab-tabs-justify: space-around;
    --upaep-tab-tabsitem-justify: start;
}

.upaep__tab.__center {
    --upaep-tab-tabs-justify: space-around;
    --upaep-tab-tabsitem-justify: center;
}

.upaep__tab.__right {
    --upaep-tab-tabs-justify: space-around;
    --upaep-tab-tabsitem-justify: end;
}

.upaep__tab.__left .upaep__tabs .upaep__tab-item,
.upaep__tab.__center .upaep__tabs .upaep__tab-item,
.upaep__tab.__right .upaep__tabs .upaep__tab-item {
    --upaep-tab-tabitem-border-radius: 0;
    --upaep-tab-tabitem-active-border-radius: 10px 10px 0 0;
    --upaep-tab-tabitem-hover-border-radius: 0;
}

.upaep__tab.__left .upaep__tabs .upaep__tab-item:first-child,
.upaep__tab.__center .upaep__tabs .upaep__tab-item:first-child,
.upaep__tab.__right .upaep__tabs .upaep__tab-item:first-child {
    --upaep-tab-tabitem-border-radius: 10px 0 0 0;
    --upaep-tab-tabitem-active-border-radius: 10px 0 0 0;
    --upaep-tab-tabitem-hover-border-radius: 10px 0 0 0;
}

.upaep__tab.__left .upaep__tabs .upaep__tab-item:last-child,
.upaep__tab.__center .upaep__tabs .upaep__tab-item:last-child,
.upaep__tab.__right .upaep__tabs .upaep__tab-item:last-child {
    --upaep-tab-tabitem-border-radius: 0 10px 0 0;
    --upaep-tab-tabitem-active-border-radius: 0 10px 0 0;
    --upaep-tab-tabitem-hover-border-radius: 0 10px 0 0;
}

.upaep__tab.tab-underline,
.upaep__tab.__underline {
    --upaep-tab-tabs-border-bottom-color: var(--ui-surface, var(--upaep-color-white));
    --upaep-tab-tabitem-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-tab-tabitem-bg: none;
    --upaep-tab-tabitem-active-color: var(--ui-accent, var(--upaep-color-red));
    --upaep-tab-tabitem-active-bg: none;
    --upaep-tab-tabitem-hover-color: var(--ui-accent, var(--upaep-color-red));
    --upaep-tab-tabitem-hover-bg: none;
    --upaep-tab-tabitem-active-hover-color: var(--ui-accent, var(--upaep-color-red));
    --upaep-tab-tabitem-active-hover-bg: none;
}

/*? `__line` es la forma canonica y `tab-line` el alias antiguo. La regla del
   hijo `.upaep__tab-line` ya aceptaba las dos formas, pero este bloque de tokens
   solo la antigua: `__line` daba la geometria de la linea y no su color, ni el
   reposicionado (que lo decide el JS). Regla C.1. */
.upaep__tab.tab-line,
.upaep__tab.__line {
    --upaep-tab-tabs-border-bottom-color: var(--ui-surface, var(--upaep-color-white));
    --upaep-tab-tabitem-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-tab-tabitem-bg: none;
    --upaep-tab-tabitem-active-color: var(--ui-accent, var(--upaep-color-red));
    --upaep-tab-tabitem-active-bg: none;
    --upaep-tab-tabitem-hover-color: var(--ui-accent, var(--upaep-color-red));
    --upaep-tab-tabitem-hover-bg: none;
    --upaep-tab-tabitem-active-hover-color: var(--ui-accent, var(--upaep-color-red));
    --upaep-tab-tabitem-active-hover-bg: none;
}

.upaep__tab.tab-underline .upaep__tabs .upaep__tab-item::before,
.upaep__tab.__underline .upaep__tabs .upaep__tab-item::before {
    width: var(--upaep-tab-tabitem-underline-width);
    height: var(--upaep-tab-tabitem-underline-height);
    background: var(--upaep-tab-tabitem-underline-color);
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    transform: scaleX(0);
    transform-origin: bottom center;
    transition: transform .25s ease-out;
    z-index: 5;
}

.upaep__tab.tab-underline .upaep__tabs .upaep__tab-item.is-active::before,
.upaep__tab.__underline .upaep__tabs .upaep__tab-item.is-active::before,
.upaep__tab.tab-underline .upaep__tabs .upaep__tab-item:hover::before,
.upaep__tab.__underline .upaep__tabs .upaep__tab-item:hover::before {
    transform: scaleX(1);
    transform-origin: bottom center;
}

.upaep__tab.tab-line .upaep__tab-line,
.upaep__tab.__line .upaep__tab-line {
    width: 90px;
    height: 5px;
    background-color: var(--ui-accent, var(--upaep-color-red));
    position: absolute;
    bottom: 0;
    left: 0;
    border-radius: 10px;
    transition: all .3s ease;
    margin: 0 0 5px;
}

.upaep__tab.tab-content-second,
.upaep__tab.__content-second {
    --upaep-tab-tabs-border-bottom-color: var(--ui-surface, var(--upaep-color-white));
    --upaep-tab-tabitem-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-tab-tabitem-bg: none;
    --upaep-tab-tabitem-active-color: var(--ui-accent, var(--upaep-color-red));
    --upaep-tab-tabitem-active-bg: none;
    --upaep-tab-tabitem-hover-color: var(--ui-accent, var(--upaep-color-red));
    --upaep-tab-tabitem-hover-bg: none;
    --upaep-tab-tabitem-active-hover-color: var(--ui-accent, var(--upaep-color-red));
    --upaep-tab-tabitem-active-hover-bg: none;
}

/*? ── SOLO EL COMPORTAMIENTO ────────────────────────────────────────────────
   El componente trae de fabrica una caja: radio 10, sombra, y 1.5 rem de
   relleno en el area de contenido. En una pagina de campaña eso impone maqueta
   —el panel queda dentro de una tarjeta que nadie pidio— y apagarlo son once
   tokens repetidos en cada consumidor. `.__bare` los apaga de una: sin fondo,
   sin sombra, sin radio y sin relleno, ni en la raiz ni en los paneles. Es la
   forma estandar del kit de decir «solo el comportamiento» —la misma que
   `.upaep__panorama.__bare`— y no toca las pestañas: la barra, el indicador y
   la linea siguen igual. Regla I.1. */
.upaep__tab.__bare {
    --upaep-tab-padding: 0;
    --upaep-tab-margin: 0;
    --upaep-tab-border-radius: 0;
    --upaep-tab-boxshadow: none;
    --upaep-tab-tabs-margin: 0;
    --upaep-tab-tabscontent-padding: 0;
    --upaep-tab-tabscontent-bg: transparent;
    --upaep-tab-tabscontent-border-radius: 0;
    --upaep-tab-tabscontent-boxshadow: none;
    --upaep-tab-tabcontent-padding: 0;
    --upaep-tab-tabcontent-bg: transparent;
    --upaep-tab-tabcontent-border-radius: 0;
    --upaep-tab-tabscontent-second-padding: 0;
    --upaep-tab-tabscontent-second-bg: transparent;
    --upaep-tab-tabscontent-second-border-radius: 0;
    --upaep-tab-tabscontent-second-boxshadow: none;
    --upaep-tab-tabcontent-second-padding: 0;
    --upaep-tab-tabcontent-second-bg: transparent;
    --upaep-tab-tabcontent-second-border-radius: 0;
}

.tab-overlay {
    width: 100%;
    height: 100%;
    position: relative;
}

.tab-overlay-content {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    display: flex;
    justify-content: center;
    align-items: center;
}

.upaep__tab.__dragger {
    --upaep-tab-tabs-border-bottom-color: var(--ui-surface, var(--upaep-color-white));
    --upaep-tab-tabitem-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-tab-tabitem-bg: none;
    --upaep-tab-tabitem-active-color: var(--upaep-color-white);
    --upaep-tab-tabitem-active-bg: var(--ui-accent, var(--upaep-color-red));
    --upaep-tab-tabitem-hover-color: var(--upaep-color-white);
    --upaep-tab-tabitem-hover-bg: var(--ui-accent, var(--upaep-color-red));
    --upaep-tab-tabitem-active-hover-color: var(--upaep-color-white);
    --upaep-tab-tabitem-active-hover-bg: var(--ui-accent, var(--upaep-color-red));
    --upaep-tab-tabs-border-bottom-color: var(--ui-accent, var(--upaep-color-red));
}

.upaep__tab.__dragger .upaep__tabs .upaep__tabs-next {
    background: linear-gradient(to left, var(--ui-surface, var(--upaep-color-white)) 50%, transparent);
}

.upaep__tab.__dragger .upaep__tabs .upaep__tabs-prev {
    background: linear-gradient(to right, var(--ui-surface, var(--upaep-color-white)) 50%, transparent);
}

.upaep__tab.__dragger .upaep__tabs .upaep__tabs-prev,
.upaep__tab.__dragger .upaep__tabs .upaep__tabs-next {
    align-items: center;
    display: flex;
    flex: 0 1 50px;
    justify-content: center;
    min-width: 50px;
    cursor: pointer;
    border-radius: 10px;
}

.upaep__tab.__dragger .upaep__tab-prev:hover::before {
    opacity: 1;
}

.upaep__tab.__dragger .upaep__tab-prev::before {
    font-family: var(--upaep-ff-fontawesome);
    content: "\f137";
    color: var(--ui-accent, var(--upaep-color-red));
    padding: 8px;
    cursor: pointer;
    border-radius: 50%;
    pointer-events: auto;
    opacity: .5;
    font-size: var(--upaep-fz22);
}

.upaep__tab.__dragger .upaep__tab-next:hover::before {
    opacity: 1;
}

.upaep__tab.__dragger .upaep__tab-next::before {
    font-family: var(--upaep-ff-fontawesome);
    content: "\f138";
    color: var(--ui-accent, var(--upaep-color-red));
    padding: 8px;
    cursor: pointer;
    border-radius: 50%;
    pointer-events: auto;
    opacity: 0.5;
    font-size: var(--upaep-fz22);
}

.upaep__tab.__dragger .upaep__tabs-prev:not(.is-active) {
    animation: fade_out .5s forwards;
}

.upaep__tab.__dragger .upaep__tabs-next:not(.is-active) {
    animation: fade_out .5s forwards;
}

.upaep__tab.__dragger .upaep__tabs-item {
    contain: content;
    display: flex;
    align-items: end;
    flex: 1 1 auto;
    overflow: hidden;
    gap: 5px;
    cursor: grab;
    height: auto;
}

.upaep__tab.__dragger .upaep__tabs-item.is-dragging {
    cursor: grabbing;
}

@keyframes fade_in {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fade_out {
    to {
        display: none;
        opacity: 0;
    }
}

.upaep__tab.__trinity {
    --upaep-tab-padding: 0;
    --upaep-tab-margin: 2rem 0;
    --upaep-tab-boxshadow: var(--upaep-box-shadow);
    --upaep-tab-tabs-margin: 0;
    --upaep-tab-tabsitem-justify: space-between;
    --upaep-tab-tabitem-bg: #E1E1E1;
    --upaep-tab-tabitem-color: var(--upaep-color-dark-grey);
    --upaep-tab-tabitem-border-radius: 0;
    --upaep-tab-tabitem-hover-bg: #C1C1C1;
    --upaep-tab-tabitem-hover-color: var(--upaep-color-dark-grey);
    --upaep-tab-tabcontent-padding: 1.5rem 0;
    --upaep-tab-tabcontent-border-radius: 0;

    .upaep__tabs-item {
        border-radius: 10px 10px 0 0;
        background: #E1E1E1;
        align-items: normal;
    }

    .upaep__tab-item {
        flex: 1 0 0;
        text-align: center;

        &:not(:first-child):not(:last-child) {
            --upaep-tab-tabitem-active-border-radius: 0;
            --upaep-tab-tabitem-hover-border-radius: 0;
            --upaep-tab-tabitem-active-hover-border-radius: 0;
        }

        &:is(:first-child) {
            --upaep-tab-tabitem-border-radius: 10px 0 0 0;
            --upaep-tab-tabitem-active-border-radius: 10px 0 0 0;
            --upaep-tab-tabitem-hover-border-radius: 10px 0 0 0;
            --upaep-tab-tabitem-active-hover-border-radius: 10px 0 0 0;
        }

        &:is(:last-child) {
            --upaep-tab-tabitem-border-radius: 0 10px 0 0;
            --upaep-tab-tabitem-active-border-radius: 0 10px 0 0;
            --upaep-tab-tabitem-hover-border-radius: 0 10px 0 0;
            --upaep-tab-tabitem-active-hover-border-radius: 0 10px 0 0;
        }
    }
}

/*? ------ Menu ------ */
.upaep__menu {
    --upaep-menu-width: 100%;
    --upaep-menu-height: auto;
    --upaep-menu-padding: 0;
    --upaep-menu-margin: 0;
    --upaep-menu-bg: transparent;
    --upaep-menu-items-width: 100%;
    --upaep-menu-items-padding: 0 3rem;
    --upaep-menu-list-width: 25%;
    --upaep-menu-list-padding: 0;
    --upaep-menu-list-item-fz: var(--upaep-fz24);
    --upaep-menu-list-item-fw: var(--upaep-fw-regular);
    --upaep-menu-list-item-color: var(--upaep-color-black);
    --upaep-menu-list-item-margin: 1rem .5rem;
    --upaep-menu-list-item-padding: 0;
    --upaep-menu-list-item-width: auto;
    --upaep-menu-list-item-active-fz: var(--upaep-fz24);
    --upaep-menu-list-item-active-fw: var(--upaep-fw-bold);
    --upaep-menu-list-item-active-color: var(--upaep-color-dark-grey);
    --upaep-menu-list-item-active-margin: 1rem .5rem;
    --upaep-menu-list-item-active-padding: 0;
    --upaep-menu-list-item-active-width: auto;
    --upaep-menu-list-item-hover-fz: var(--upaep-fz24);
    --upaep-menu-list-item-hover-fw: var(--upaep-fw-bold);
    --upaep-menu-list-item-hover-color: var(--ui-accent, var(--upaep-color-red));
    --upaep-menu-list-item-hover-margin: 1rem .5rem;
    --upaep-menu-list-item-hover-padding: 0;
    --upaep-menu-list-item-hover-width: auto;
    --upaep-menu-list-item-mark-content: '\f054';
    --upaep-menu-list-item-mark-ff: var(--upaep-ff-fontawesome);
    --upaep-menu-list-item-mark-fz: var(--upaep-fz18);
    --upaep-menu-list-item-mark-fw: var(--upaep-fw-bold);
    --upaep-menu-list-item-mark-color: var(--ui-accent, var(--upaep-color-red));
    --upaep-menu-list-item-mark-margin: 0 5px;
    --upaep-menu-content-width: 75%;
    --upaep-menu-content-height: auto;
    --upaep-menu-content-padding: 1rem;
    --upaep-menu-content-border-left-size: 2px;
    --upaep-menu-content-border-left-style: solid;
    --upaep-menu-content-border-left-color: var(--ui-accent, var(--upaep-color-red));
    --upaep-submenu-list-width: 100%;
    --upaep-submenu-list-padding: 0;
    --upaep-submenu-list-width: 30%;
    --upaep-submenu-list-height: auto;
    --upaep-submenu-list-padding: 0;
    --upaep-submenu-list-item-fz: var(--upaep-fz20);
    --upaep-submenu-list-item-fw: var(--upaep-fw-regular);
    --upaep-submenu-list-item-color: var(--upaep-color-black);
    --upaep-submenu-list-item-margin: 1rem 0;
    --upaep-submenu-list-item-padding: 0;
    --upaep-submenu-list-item-width: auto;
    --upaep-submenu-list-item-active-fz: var(--upaep-fz20);
    --upaep-submenu-list-item-active-fw: var(--upaep-fw-bold);
    --upaep-submenu-list-item-active-color: var(--ui-accent, var(--upaep-color-red));
    --upaep-submenu-list-item-active-margin: 1rem 0;
    --upaep-submenu-list-item-active-padding: 0;
    --upaep-submenu-list-item-active-width: auto;
    --upaep-submenu-list-item-hover-fz: var(--upaep-fz20);
    --upaep-submenu-list-item-hover-fw: var(--upaep-fw-bold);
    --upaep-submenu-list-item-hover-color: var(--ui-accent, var(--upaep-color-red));
    --upaep-submenu-list-item-hover-margin: 1rem 0;
    --upaep-submenu-list-item-hover-padding: 0;
    --upaep-submenu-list-item-hover-width: auto;
    --upaep-submenu-list-item-mark-content: '\f054';
    --upaep-submenu-list-item-mark-ff: var(--upaep-ff-fontawesome);
    --upaep-submenu-list-item-mark-fz: var(--upaep-fz18);
    --upaep-submenu-list-item-mark-fw: var(--upaep-fw-bold);
    --upaep-submenu-list-item-mark-color: var(--ui-accent, var(--upaep-color-red));
    --upaep-submenu-list-item-mark-margin: 0 5px;
    --upaep-submenu-content-width: 70%;
    --upaep-submenu-content-height: auto;
    --upaep-submenu-content-padding: 0;
    width: var(--upaep-menu-width);
    height: var(--upaep-menu-height);
    padding: var(--upaep-menu-padding);
    margin: var(--upaep-menu-margin);
    background: var(--upaep-menu-bg);

    & .upaep__menu-desktop,
    & .upaep__menu__desktop,
    & .upaep__menu-mobile,
    & .upaep__menu__mobile {
        width: 100%;
        height: auto;
    }

    & .upaep__menu-items {
        width: var(--upaep-menu-items-width);
        padding: var(--upaep-menu-items-padding);
        display: flex;

        & .upaep__menu-list {
            width: var(--upaep-menu-list-width);
            padding: var(--upaep-menu-list-padding);

            & .upaep__menu-list-item {
                display: flex;

                & a {
                    font-size: var(--upaep-menu-list-item-fz);
                    font-weight: var(--upaep-menu-list-item-fw);
                    color: var(--upaep-menu-list-item-color);
                    margin: var(--upaep-menu-list-item-margin);
                    padding: var(--upaep-menu-list-item-padding);
                    width: var(--upaep-menu-list-item-width);
                    text-decoration: none;
                    cursor: pointer;
                    position: relative;

                    &::before {
                        content: var(--upaep-menu-list-item-mark-content);
                        font-family: var(--upaep-menu-list-item-mark-ff);
                        font-size: var(--upaep-menu-list-item-mark-fz);
                        font-weight: var(--upaep-menu-list-item-mark-fw);
                        color: var(--upaep-menu-list-item-mark-color);
                        margin: var(--upaep-menu-list-item-mark-margin);
                    }
                }

                &.is-active a {
                    font-size: var(--upaep-menu-list-item-active-fz);
                    font-weight: var(--upaep-menu-list-item-active-fw);
                    color: var(--upaep-menu-list-item-active-color);
                    margin: var(--upaep-menu-list-item-active-margin);
                    padding: var(--upaep-menu-list-item-active-padding);
                    width: var(--upaep-menu-list-item-active-width);
                }

                &:not(.is-active) a:hover {
                    font-size: var(--upaep-menu-list-item-hover-fz);
                    font-weight: var(--upaep-menu-list-item-hover-fw);
                    color: var(--upaep-menu-list-item-hover-color);
                    margin: var(--upaep-menu-list-item-hover-margin);
                    padding: var(--upaep-menu-list-item-hover-padding);
                    width: var(--upaep-menu-list-item-hover-width);
                }

                &.__link a::after {
                    content: "";
                    position: absolute;
                    bottom: 0;
                    left: 1%;
                    height: 2px;
                    width: 100%;
                    transform: scaleX(0);
                    background-color: var(--ui-accent, var(--upaep-color-red));
                    transform-origin: bottom center;
                    transition: transform .25s ease-out;
                    z-index: 5;
                }

                &.__link a:hover::after {
                    transform: scaleX(1);
                }
            }
        }

        & .upaep__menu-content {
            width: var(--upaep-menu-content-width);
            height: var(--upaep-menu-content-height);
            padding: var(--upaep-menu-content-padding);
            border-left: var(--upaep-menu-content-border-left-size) var(--upaep-menu-content-border-left-style) var(--upaep-menu-content-border-left-color);
        }
    }

    & .upaep__menu-item:not(.is-active) {
        display: none;
    }

    & .upaep__submenu-item {
        display: flex;

        &:not(.is-active) {
            display: none;
        }

        & .upaep__submenu-list {
            width: var(--upaep-submenu-list-width);
            padding: var(--upaep-submenu-list-padding);

            & .upaep__submenu-list-item {
                width: var(--upaep-submenu--item-width);
                height: var(--upaep-submenu-list-item-height);
                padding: var(--upaep-submenu-list-item-padding);
                display: flex;

                & a {
                    font-size: var(--upaep-submenu-list-item-fz);
                    font-weight: var(--upaep-submenu-list-item-fw);
                    color: var(--upaep-submenu-list-item-color);
                    margin: var(--upaep-submenu-list-item-margin);
                    padding: var(--upaep-submenu-list-item-padding);
                    width: var(--upaep-submenu-list-item-width);
                    text-decoration: none;
                    cursor: pointer;
                    position: relative;

                    &::before {
                        content: var(--upaep-submenu-list-item-mark-content);
                        font-family: var(--upaep-submenu-list-item-mark-ff);
                        font-size: var(--upaep-submenu-list-item-mark-fz);
                        font-weight: var(--upaep-submenu-list-item-mark-fw);
                        color: var(--upaep-submenu-list-item-mark-color);
                        margin: var(--upaep-submenu-list-item-mark-margin);
                    }
                }

                &.is-active a {
                    font-size: var(--upaep-submenu-list-item-active-fz);
                    font-weight: var(--upaep-submenu-list-item-active-fw);
                    color: var(--upaep-submenu-list-item-active-color);
                    margin: var(--upaep-submenu-list-item-active-margin);
                    padding: var(--upaep-submenu-list-item-active-padding);
                    width: var(--upaep-submenu-list-item-active-width);
                }

                &:not(.is-active) a:hover {
                    font-size: var(--upaep-submenu-list-item-hover-fz);
                    font-weight: var(--upaep-submenu-list-item-hover-fw);
                    color: var(--upaep-submenu-list-item-hover-color);
                    margin: var(--upaep-submenu-list-item-hover-margin);
                    padding: var(--upaep-submenu-list-item-hover-padding);
                    width: var(--upaep-submenu-list-item-hover-width);
                }

                &.__link a::after {
                    content: "";
                    position: absolute;
                    bottom: 0;
                    left: 1%;
                    height: 2px;
                    width: 100%;
                    transform: scaleX(0);
                    background-color: var(--ui-accent, var(--upaep-color-red));
                    transform-origin: bottom center;
                    transition: transform .25s ease-out;
                    z-index: 5;
                }

                &.__link a:hover::after {
                    transform: scaleX(1);
                }
            }
        }

        & .upaep__submenu-content {
            width: var(--upaep-submenu-content-width);
            height: var(--upaep-submenu-content-height);
            padding: var(--upaep-submenu-content-padding);
        }

    }

    .upaep__accordion_header.__input a,
    div#busqueda a {
        display: none;
    }

    .menu-search {
        width: 100%;
    }

    .menu-search--movil {

        &>div {
            width: 300px !important;
        }

        &>div>div {
            padding: 0px;
            width: 100% !important;
        }
    }


    .menu_principal_temporal {
        display: block;
        padding: 40px;
        list-style: disc;

        .list-unstyled {
            padding: revert;
            list-style: circle;
        }

        a {
            color: #020202;
            font-size: 18px;
        }
    }

    .menu-search {
        .gsc-input {
            padding: 0 !important;
        }

        .gsc-input-box {
            border-radius: 25px 0 0 25px;
            height: 35px;

            td {
                height: 100%;
            }
        }

        .gsc-search-button-v2 {
            height: 35px;
            border-radius: 0 25px 25px 0;
            padding: 10px 15px;
        }

        .gsc-clear-button {
            display: none;
        }
    }


    .menu-search--movil {
        .gsc-input {
            padding: 0 !important;
        }

        .gsc-input-box {
            border-radius: 25px 0 0 25px;
            height: 35px;

            td {
                height: 100%;
            }
        }

        .gsc-search-button-v2 {
            height: 35px;
            border-radius: 0 25px 25px 0;
            padding: 10px 15px;
        }

        .gsc-clear-button {
            display: none;
        }
    }

}


.upaep__menu .upaep__menu-items .upaep__menu-list .upaep__menu-list-item.__secondary a {
    --upaep-menu-list-item-fz: var(--upaep-fz14);
    --upaep-menu-list-item-mark-fz: var(--upaep-fz14);
    --upaep-menu-list-item-margin: .5rem;
    --upaep-menu-list-item-padding: 0 .5rem;
    --upaep-menu-list-item-active-fz: var(--upaep-fz14);
    --upaep-menu-list-item-active-mark-fz: var(--upaep-fz14);
    --upaep-menu-list-item-active-margin: .5rem;
    --upaep-menu-list-item-active-padding: 0 .5rem;
    --upaep-menu-list-item-hover-fz: var(--upaep-fz14);
    --upaep-menu-list-item-hover-mark-fz: var(--upaep-fz14);
    --upaep-menu-list-item-hover-margin: .5rem;
    --upaep-menu-list-item-hover-padding: 0 .5rem;
}

.upaep__menu .upaep__menu-items .upaep__menu-list .upaep__menu-list-item.__title a {
    --upaep-menu-list-item-fz: var(--upaep-fz30);
    --upaep-menu-list-item-fw: var(--upaep-fw-bold);
    --upaep-menu-list-item-color: var(--upaep-color-white);
    --upaep-menu-list-item-active-fz: var(--upaep-fz30);
    --upaep-menu-list-item-active-fw: var(--upaep-fw-bold);
    --upaep-menu-list-item-active-color: var(--upaep-color-white);
    --upaep-menu-list-item-hover-fz: var(--upaep-fz30);
    --upaep-menu-list-item-hover-fw: var(--upaep-fw-bold);
    --upaep-menu-list-item-hover-color: var(--upaep-color-white);
    --upaep-menu-list-item-mark-content: '';
    --upaep-menu-list-item-mark-margin: 0;
    cursor: auto;
    border-bottom: 2px solid var(--ui-accent, var(--upaep-color-red));
}

.upaep__menu .upaep__menu-items .upaep__menu-list .upaep__menu-list-item.__subtitle a {
    --upaep-menu-list-item-fz: var(--upaep-fz18);
    --upaep-menu-list-item-fw: var(--upaep-fw-bold);
    --upaep-menu-list-item-color: var(--ui-accent, var(--upaep-color-red));
    --upaep-menu-list-item-padding: var(0 1rem);
    --upaep-menu-list-item-active-fz: var(--upaep-fz18);
    --upaep-menu-list-item-active-fw: var(--upaep-fw-bold);
    --upaep-menu-list-item-active-color: var(--ui-accent, var(--upaep-color-red));
    --upaep-menu-list-item-active-padding: var(0 1rem);
    --upaep-menu-list-item-hover-fz: var(--upaep-fz18);
    --upaep-menu-list-item-hover-fw: var(--upaep-fw-bold);
    --upaep-menu-list-item-hover-color: var(--ui-accent, var(--upaep-color-red));
    --upaep-menu-list-item-hover-padding: var(0 1rem);
    --upaep-menu-list-item-mark-content: '';
    --upaep-menu-list-item-mark-margin: 0;
    cursor: auto;
}

/*? ------ Breadcrumb ------ */
.upaep__breadcrumb {
    --upaep-breadcrumb-width: auto;
    --upaep-breadcrumb-height: auto;
    --upaep-breadcrumb-padding: .5rem;
    --upaep-breadcrumb-margin: 0 5px;
    --upaep-breadcrumb-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-breadcrumb-border-size: 0;
    --upaep-breadcrumb-border-style: solid;
    --upaep-breadcrumb-border-color: transparent;
    --upaep-breadcrumb-border-radius: 0;
    --upaep-breadcrumb-item-fz: var(--upaep-fz16);
    --upaep-breadcrumb-item-fw: var(--upaep-fw-regular);
    --upaep-breadcrumb-item-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-breadcrumb-item-margin: 0 5px;
    --upaep-breadcrumb-item-padding: 0;
    --upaep-breadcrumb-item-active-fz: var(--upaep-fz16);
    --upaep-breadcrumb-item-active-fw: var(--upaep-fw-bold);
    --upaep-breadcrumb-item-active-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-breadcrumb-divider: "\f105";
    --upaep-breadcrumb-divider-ff: var(--upaep-ff-fontawesome);
    --upaep-breadcrumb-divider-fz: var(--upaep-fz16);
    --upaep-breadcrumb-divider-fw: var(--upaep-fw-medium);
    --upaep-breadcrumb-divider-color: var(--ui-accent, var(--upaep-color-red));

    & .upaep__breadcrumb-content {
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        gap: 5px;
        width: var(--upaep-breadcrumb-width);
        height: var(--upaep-breadcrumb-height);
        padding: var(--upaep-breadcrumb-padding);
        margin: var(--upaep-breadcrumb-margin);
        background: var(--upaep-breadcrumb-bg);
        border: var(--upaep-breadcrumb-border-size) var(--upaep-breadcrumb-border-style) var(--upaep-breadcrumb-border-color);
        border-radius: var(--upaep-breadcrumb-border-radius);
    }

    & .upaep__breadcrumb-item+.upaep__breadcrumb-item::before {
        content: var(--upaep-breadcrumb-divider);
        font-family: var(--upaep-breadcrumb-divider-ff);
        font-size: var(--upaep-breadcrumb-divider-fz);
        font-weight: var(--upaep-breadcrumb-divider-fw);
        color: var(--upaep-breadcrumb-divider-color);
        margin-right: 10px;
    }

    & .upaep__breadcrumb-item * {
        font-size: var(--upaep-breadcrumb-item-fz);
        font-weight: var(--upaep-breadcrumb-item-fw);
        color: var(--upaep-breadcrumb-item-color);
        margin: var(--upaep-breadcrumb-item-margin);
        padding: var(--upaep-breadcrumb-item-padding);
        cursor: pointer;
        text-decoration: none;
    }

    & .upaep__breadcrumb-item.is-active * {
        font-size: var(--upaep-breadcrumb-item-active-fz);
        font-weight: var(--upaep-breadcrumb-item-active-fw);
        color: var(--upaep-breadcrumb-item-active-color);
    }
}

/*? ------ Progressbar ------ */
.upaep__progressbar,
.upaep__progressbar-stacked {
    --upaep-progressbar-height: 1rem;
    --upaep-progressbar-font-size: 0.75rem;
    --upaep-progressbar-bg: var(--ui-surface-3, var(--upaep-color-tenue-gray));
    --upaep-progressbar-border-size: ;
    --upaep-progressbar-border-style: ;
    --upaep-progressbar-border-color: ;
    --upaep-progressbar-border-radius: 8px;
    --upaep-progressbar-content-width: ;
    --upaep-progressbar-content-border-radius: ;
    --upaep-progressbar-content-fz: var(--upaep-fz14);
    --upaep-progressbar-content-fw: var(--upaep-fw-bold);
    --upaep-progressbar-content-color: var(--ui-on-accent, var(--upaep-color-white));
    --upaep-progressbar-content-bg: var(--ui-accent, var(--upaep-color-red));
    --upaep-progressbar-content-transition: width 0.6s ease;
    --upaep-progressbar-circle-width: 20px;
    --upaep-progressbar-circle-height: 20px;
    --upaep-progressbar-circle-color: var(--ui-accent, var(--upaep-color-red));
    height: var(--upaep-progressbar-height);
    font-size: var(--upaep-progressbar-font-size);
    background-color: var(--upaep-progressbar-bg);
    border: var(--upaep-progressbar-border-size) var(--upaep-progressbar-border-style) var(--upaep-progressbar-border-color);
    border-radius: var(--upaep-progressbar-border-radius);
    display: flex;
    overflow: hidden;


    &.__striped {
        .upaep__progressbar-content {
            background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
            background-size: var(--upaep-progressbar-height) var(--upaep-progressbar-height);
        }
    }

    &.__animated-striped {
        .upaep__progressbar-content {
            animation: 1s linear infinite a_progressbar;
        }
    }

    .upaep__progressbar-content {
        width: var(--upaep-progressbar-content-width);
        border-radius: var(--upaep-progressbar-content-border-radius);
        font-size: var(--upaep-progressbar-content-fz);
        font-weight: var(--upaep-progressbar-content-fw);
        color: var(--upaep-progressbar-content-color);
        background-color: var(--upaep-progressbar-content-bg);
        transition: var(--upaep-progressbar-content-transition);
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow: hidden;
        text-align: center;
        white-space: nowrap;
        position: relative;
    }

    &.__simple {
        --upaep-progressbar-height: 10px;
        --upaep-progressbar-content-border-radius: var(--upaep-progressbar-border-radius);
        overflow: visible;

        .upaep__progressbar-content {
            overflow: visible;

            &::before {
                width: var(--upaep-progressbar-circle-width);
                height: var(--upaep-progressbar-circle-height);
                background: var(--upaep-progressbar-circle-color);
                content: "";
                position: absolute;
                right: -10px;
                border-radius: 50px;
            }
        }
    }
}

.upaep__progressbar-stacked {
    >.upaep__progressbar {
        transition: var(--upaep-progressbar-content-transition);
        overflow: visible;

        >.upaep__progressbar-content {
            width: 100%;
        }
    }
}

@keyframes a_progressbar {
    0% {
        background-position-x: 1rem;
    }
}

/*? ------ PtogressTracker ------ */
.upaep__progresstracker {
    --upaep-progresstracker-width: 100%;
    --upaep-progresstracker-height: auto;
    --upaep-progresstracker-margin: 1rem auto;
    --upaep-progresstracker-padding: 1rem;
    --upaep-progresstracker-bg: transparent;
    --upaep-progresstracker-border-size: 0;
    --upaep-progresstracker-border-style: solid;
    --upaep-progresstracker-border-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-progresstracker-border-radius: 10px;
    --upaep-progresstracker-step-width: 30px;
    --upaep-progresstracker-step-height: 30px;
    --upaep-progresstracker-step-margin: 0;
    --upaep-progresstracker-step-padding: 0;
    --upaep-progresstracker-bar-order: 0;
    --upaep-progresstracker-bar-width: 0;
    --upaep-progresstracker-bar-height: 4px;
    --upaep-progresstracker-bar-bg: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-progresstracker-bar-inset: 14px 24px auto;
    --upaep-progresstracker-bar-active-width: 0;
    --upaep-progresstracker-bar-active-height: 4px;
    --upaep-progresstracker-bar-active-bg: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-progresstracker-bar-active-inset: 14px 24px auto;
    --upaep-progresstracker-bar-complete-width: 100%;
    --upaep-progresstracker-bar-complete-height: 4px;
    --upaep-progresstracker-bar-complete-bg: var(--ui-accent, var(--upaep-color-red));
    --upaep-progresstracker-bar-complete-inset: 14px 24px auto;
    --upaep-progresstracker-mark-order: 1;
    --upaep-progresstracker-mark-width: 25px;
    --upaep-progresstracker-mark-height: 25px;
    --upaep-progresstracker-mark-padding: .5rem;
    --upaep-progresstracker-mark-margin: 0;
    --upaep-progresstracker-mark-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-progresstracker-mark-border-size: 4px;
    --upaep-progresstracker-mark-border-style: solid;
    --upaep-progresstracker-mark-border-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-progresstracker-mark-border-radius: 50px;
    --upaep-progresstracker-mark-active-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-progresstracker-mark-active-border-size: 5px;
    --upaep-progresstracker-mark-active-border-style: solid;
    --upaep-progresstracker-mark-active-border-color: var(--ui-accent, var(--upaep-color-red));
    --upaep-progresstracker-mark-complete-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-progresstracker-mark-complete-border-size: 5px;
    --upaep-progresstracker-mark-complete-border-style: solid;
    --upaep-progresstracker-mark-complete-border-color: var(--ui-accent, var(--upaep-color-red));
    --upaep-progresstracker-line-width: 100%;
    --upaep-progresstracker-line-height: 4px;
    --upaep-progresstracker-line-bg: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-progresstracker-line-inset: 10px -4px auto auto;
    --upaep-progresstracker-line-active-width: 100%;
    --upaep-progresstracker-line-active-height: 4px;
    --upaep-progresstracker-line-active-bg: var(--ui-accent, var(--upaep-color-red));
    --upaep-progresstracker-line-active-inset: 10px -4px auto auto;
    --upaep-progresstracker-line-complete-width: 100%;
    --upaep-progresstracker-line-complete-height: 4px;
    --upaep-progresstracker-line-complete-bg: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-progresstracker-line-complete-inset: 10px -4px auto auto;
    --upaep-progresstracker-texts-order: 2;
    --upaep-progresstracker-texts-bg: transparent;
    --upaep-progresstracker-title-fz: var(--upaep-fz16);
    --upaep-progresstracker-title-fw: var(--upaep-fw-bold);
    --upaep-progresstracker-title-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-progresstracker-title-padding: 0;
    --upaep-progresstracker-title-margin: 0;
    --upaep-progresstracker-title-align: start;
    --upaep-progresstracker-text-fz: var(--upaep-fz14);
    --upaep-progresstracker-text-fw: var(--upaep-fw-medium);
    --upaep-progresstracker-text-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-progresstracker-text-padding: 0;
    --upaep-progresstracker-text-margin: 0;
    --upaep-progresstracker-text-align: start;

    width: var(--upaep-progresstracker-width);
    height: var(--upaep-progresstracker-height);
    margin: var(--upaep-progresstracker-margin);
    padding: var(--upaep-progresstracker-padding);
    background: var(--upaep-progresstracker-bg);
    border: var(--upaep-progresstracker-border-size) var(--upaep-progresstracker-border-style) var(--upaep-progresstracker-border-color);
    border-radius: var(--upaep-progresstracker-border-radius);
    display: flex;
    list-style: none;

    & .upaep__progresstracker-step {
        flex: 1 1 0%;
        min-width: 24px;
        width: var(--upaep-progresstracker-step-width);
        height: var(--upaep-progresstracker-step-height);
        margin: var(--upaep-progresstracker-step-margin);
        padding: var(--upaep-progresstracker-step-padding);
        transition: all 1s;
        display: grid;

        &:last-child {
            flex-grow: 0;

            & .upaep__progresstracker-bar,
            & .upaep__progresstracker-mark::after {
                opacity: 0;
            }
        }

        & .upaep__progresstracker-bar {
            width: var(--upaep-progresstracker-bar-width);
            height: var(--upaep-progresstracker-bar-height);
            background: var(--upaep-progresstracker-bar-bg);
            inset: var(--upaep-progresstracker-bar-inset);
            order: var(--upaep-progresstracker-bar-order);
            position: relative;
            z-index: 1;
            transition: all 2000ms linear 0s;
        }

        & .upaep__progresstracker-mark {
            display: block;
            position: relative;
            order: var(--upaep-progresstracker-mark-order);

            &::before {
                width: var(--upaep-progresstracker-mark-width);
                height: var(--upaep-progresstracker-mark-height);
                padding: var(--upaep-progresstracker-mark-padding);
                margin: var(--upaep-progresstracker-mark-margin);
                background: var(--upaep-progresstracker-mark-bg);
                border: var(--upaep-progresstracker-mark-border-size) var(--upaep-progresstracker-mark-border-style) var(--upaep-progresstracker-mark-border-color);
                border-radius: var(--upaep-progresstracker-mark-border-radius);
                content: attr(data-text);
                display: flex;
                justify-content: center;
                align-items: center;
                position: relative;
                z-index: 20;
                transition: background .3s, border .3s;
            }

            &[data-text]::before {
                --upaep-progresstracker-mark-width: 25px;
                --upaep-progresstracker-mark-height: 25px;
                --upaep-progresstracker-mark-padding: .6rem;
                --upaep-progresstracker-mark-border-size: 3px;
                font-weight: var(--upaep-fw-bold);
                font-size: var(--upaep-fz14);
                display: flex;
                align-items: center;
                justify-content: center;
            }

            &::after {
                width: var(--upaep-progresstracker-line-width);
                height: var(--upaep-progresstracker-line-height);
                background: var(--upaep-progresstracker-line-bg);
                inset: var(--upaep-progresstracker-line-inset);
                content: "";
                display: block;
                position: absolute;
                transition: background 0.3s;
            }
        }

        & .upaep__progresstracker-texts {
            background: var(--upaep-progresstracker-texts-bg);
            order: var(--upaep-progresstracker-texts-order);
            display: block;
            padding: .5rem;
            text-overflow: ellipsis;

            & .upaep__progresstracker-title {
                font-size: var(--upaep-progresstracker-title-fz);
                font-weight: var(--upaep-progresstracker-title-fw);
                color: var(--upaep-progresstracker-title-color);
                padding: var(--upaep-progresstracker-title-padding);
                margin: var(--upaep-progresstracker-title-margin);
                text-align: var(--upaep-progresstracker-title-align);
            }

            & .upaep__progresstracker-text {
                font-size: var(--upaep-progresstracker-text-fz);
                font-weight: var(--upaep-progresstracker-text-fw);
                color: var(--upaep-progresstracker-text-color);
                padding: var(--upaep-progresstracker-text-padding);
                margin: var(--upaep-progresstracker-text-margin);
                text-align: var(--upaep-progresstracker-text-align);
            }
        }

        &.is-active,
        &.is-progress {
            & .upaep__progresstracker-mark::after {
                width: var(--upaep-progresstracker-line-active-width);
                height: var(--upaep-progresstracker-line-active-height);
                background: var(--upaep-progresstracker-line-active-bg);
                inset: var(--upaep-progresstracker-line-active-inset);
            }

            & .upaep__progresstracker-bar {
                width: var(--upaep-progresstracker-bar-active-width);
                height: var(--upaep-progresstracker-bar-active-height);
                background: var(--upaep-progresstracker-bar-active-bg);
                inset: var(--upaep-progresstracker-bar-active-inset);
            }

            & .upaep__progresstracker-mark::before {
                background: var(--upaep-progresstracker-mark-active-bg);
                border: var(--upaep-progresstracker-mark-active-border-size) var(--upaep-progresstracker-mark-active-border-style) var(--upaep-progresstracker-mark-active-border-color);
                animation: markeractive 1s;
            }
        }

        &.is-complete {
            & .upaep__progresstracker-mark::after {
                width: var(--upaep-progresstracker-line-complete-width);
                height: var(--upaep-progresstracker-line-complete-height);
                background: var(--upaep-progresstracker-line-complete-bg);
                inset: var(--upaep-progresstracker-line-complete-inset);
            }

            & .upaep__progresstracker-mark::before {
                background: var(--upaep-progresstracker-mark-complete-bg);
                border: var(--upaep-progresstracker-mark-complete-border-size) var(--upaep-progresstracker-mark-complete-border-style) var(--upaep-progresstracker-mark-complete-border-color);
                animation: markercomplete 1s;
            }

            & .upaep__progresstracker-bar {
                width: var(--upaep-progresstracker-bar-complete-width);
                height: var(--upaep-progresstracker-bar-complete-height);
                background: var(--upaep-progresstracker-bar-complete-bg);
                inset: var(--upaep-progresstracker-bar-complete-inset);
            }
        }
    }

    &.__texts .upaep__progresstracker-step:last-child {
        flex-grow: 1;
    }
}

@keyframes markeractive {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes markercomplete {
    0% {
        transform: scale(.8);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

.upaep__progresstracker.__vertical {
    flex-direction: column;
    --upaep-progresstracker-width: auto;
    --upaep-progresstracker-height: 100%;
    --upaep-progresstracker-step-width: auto;
    --upaep-progresstracker-mark-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-progresstracker-line-width: 4px;
    --upaep-progresstracker-line-height: 100%;
    --upaep-progresstracker-line-inset: 22px auto auto 10px;
    --upaep-progresstracker-line-active-width: 4px;
    --upaep-progresstracker-line-active-height: 100%;
    --upaep-progresstracker-line-active-inset: 22px auto auto 10px;
    --upaep-progresstracker-line-complete-width: 4px;
    --upaep-progresstracker-line-complete-height: 100%;
    --upaep-progresstracker-line-complete-inset: 22px auto auto 10px;
    --upaep-progresstracker-bar-width: 4px;
    --upaep-progresstracker-bar-height: 0;
    --upaep-progresstracker-bar-bg: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-progresstracker-bar-inset: 22px auto auto 14px;
    --upaep-progresstracker-bar-active-width: 4px;
    --upaep-progresstracker-bar-active-height: 0;
    --upaep-progresstracker-bar-active-bg: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-progresstracker-bar-active-inset: 22px auto auto 14px;
    --upaep-progresstracker-bar-complete-width: 4px;
    --upaep-progresstracker-bar-complete-height: 95%;
    --upaep-progresstracker-bar-complete-bg: var(--ui-accent, var(--upaep-color-red));
    --upaep-progresstracker-bar-complete-inset: 22px auto auto 14px;

    & .upaep__progresstracker-step {
        display: flex;
    }

    & .upaep__progresstracker-texts {
        padding: 0 .5rem .5rem .5rem;
    }
}

.upaep__progresstracker.__center:not(.__vertical) {
    --upaep-progresstracker-title-align: center;
    --upaep-progresstracker-text-align: center;
    --upaep-progresstracker-mark-margin: 0 auto;
    --upaep-progresstracker-line-inset: 10px -50% auto auto;
    --upaep-progresstracker-line-active-inset: 10px -50% auto auto;
    --upaep-progresstracker-line-complete-inset: 10px -50% auto auto;
    --upaep-progresstracker-bar-inset: 14px -50% auto auto;
    --upaep-progresstracker-bar-active-inset: 14px -50% auto auto;
    --upaep-progresstracker-bar-complete-inset: 14px -50% auto auto;
}

.upaep__progresstracker.__right:not(.__vertical) {
    --upaep-progresstracker-title-align: end;
    --upaep-progresstracker-text-align: end;
    --upaep-progresstracker-mark-margin: 0 0 0 auto;
    --upaep-progresstracker-line-inset: 10px calc(-100% + 18px) auto auto;
    --upaep-progresstracker-line-active-inset: 10px calc(-100% + 18px) auto auto;
    --upaep-progresstracker-line-complete-inset: 10px calc(-100% + 18px) auto auto;
    --upaep-progresstracker-bar-inset: 14px calc(-100% + 18px) auto auto;
    --upaep-progresstracker-bar-active-inset: 14px calc(-100% + 18px) auto auto;
    --upaep-progresstracker-bar-complete-inset: 14px calc(-100% + 18px) auto auto;
}

.upaep__progresstracker.__left:is(.__vertical) {
    --upaep-progresstracker-title-align: end;
    --upaep-progresstracker-text-align: end;
    --upaep-progresstracker-mark-margin: 0 0 0 auto;
}

.upaep__progresstracker.__left:is(.__vertical),
.upaep__progresstracker.__texts.__texts-top:not(.__vertical) {
    --upaep-progresstracker-bar-order: 1;
    --upaep-progresstracker-mark-order: 2;
    --upaep-progresstracker-texts-order: 0;
}

.upaep__progresstracker:is(.__inline) {
    --upaep-progresstracker-bar-order: 1;
    --upaep-progresstracker-mark-order: 2;
    --upaep-progresstracker-texts-order: 0;
    --upaep-progresstracker-texts-bg: var(--ui-surface, var(--upaep-color-white));
}

.upaep__progresstracker.__inline .upaep__progresstracker-step,
.upaep__progresstracker.__inline .upaep__progresstracker-mark {
    display: flex;
    align-items: center;
}

.upaep__progresstracker.__inline .upaep__progresstracker-mark {
    flex-grow: 1;
}

.upaep__progresstracker.__inline .upaep__progresstracker-texts {
    position: relative;
    z-index: 30;
    max-width: 70%;
    white-space: nowrap;
    padding-top: 0;
    padding-bottom: 0;
}

.upaep__progresstracker.__trafficlight {
    --upaep-progresstracker-bg: transparent;
    --upaep-progresstracker-bar-bg: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-progresstracker-bar-active-bg: var(--ui-warning, var(--upaep-color-warning));
    --upaep-progresstracker-bar-complete-bg: var(--ui-success, var(--upaep-color-success));
    --upaep-progresstracker-mark-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-progresstracker-mark-border-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-progresstracker-mark-active-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-progresstracker-mark-active-border-color: var(--ui-warning, var(--upaep-color-warning));
    --upaep-progresstracker-mark-complete-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-progresstracker-mark-complete-border-color: var(--ui-success, var(--upaep-color-success));
    --upaep-progresstracker-line-bg: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-progresstracker-line-active-bg: var(--ui-warning, var(--upaep-color-warning));
    --upaep-progresstracker-line-complete-bg: var(--ui-warning, var(--upaep-color-warning));
    --upaep-progresstracker-title-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-progresstracker-text-color: var(--ui-text-strong, var(--upaep-color-black));
}

/*? ------ Accordion ------ */
.upaep__accordion {
    --upaep-accordion-width: 100%;
    --upaep-accordion-height: auto;
    --upaep-accordion-margin: 0;
    --upaep-accordion-padding: 0;
    --upaep-accordion-bg: transparent;
    --upaep-accordion-item-width: 100%;
    --upaep-accordion-item-height: auto;
    --upaep-accordion-item-margin: 0;
    --upaep-accordion-item-padding: 0;
    --upaep-accordion-header-width: 100%;
    --upaep-accordion-header-height: 50px;
    --upaep-accordion-header-padding: 1rem;
    --upaep-accordion-header-border-radius: 0;
    --upaep-accordion-header-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-accordion-header-fz: var(--upaep-fz16);
    --upaep-accordion-header-fw: var(--upaep-fw-bold);
    --upaep-accordion-header-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-accordion-header-padding: 1rem;
    --upaep-accordion-header-border-size: 1px;
    --upaep-accordion-header-border-style: solid;
    --upaep-accordion-header-border-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-accordion-header-border-bottom-size: 0;
    --upaep-accordion-header-border-bottom-style: solid;
    --upaep-accordion-header-border-bottom-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-accordion-active-header-width: 100%;
    --upaep-accordion-active-header-height: 50px;
    --upaep-accordion-active-header-padding: 1rem;
    --upaep-accordion-active-header-border-radius: 10px 10px 0 0;
    --upaep-accordion-active-header-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-accordion-active-header-fz: var(--upaep-fz16);
    --upaep-accordion-active-header-fw: var(--upaep-fw-bold);
    --upaep-accordion-active-header-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-accordion-active-header-padding: 1rem;
    --upaep-accordion-active-header-border-size: 1px;
    --upaep-accordion-active-header-border-style: solid;
    --upaep-accordion-active-header-border-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-accordion-active-header-border-bottom-size: 1px;
    --upaep-accordion-active-header-border-bottom-style: solid;
    --upaep-accordion-active-header-border-bottom-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-accordion-header-markinactive: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuNC4yIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDIzIEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNMjU2IDgwYzAtMTcuNy0xNC4zLTMyLTMyLTMycy0zMiAxNC4zLTMyIDMyVjIyNEg0OGMtMTcuNyAwLTMyIDE0LjMtMzIgMzJzMTQuMyAzMiAzMiAzMkgxOTJWNDMyYzAgMTcuNyAxNC4zIDMyIDMyIDMyczMyLTE0LjMgMzItMzJWMjg4SDQwMGMxNy43IDAgMzItMTQuMyAzMi0zMnMtMTQuMy0zMi0zMi0zMkgyNTZWODB6Ii8+PC9zdmc+');
    --upaep-accordion-header-markinactive-width: 30px;
    --upaep-accordion-header-markinactive-height: 30px;
    --upaep-accordion-header-markinactive-bgsize: 20px;
    --upaep-accordion-header-markactive: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuNC4yIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDIzIEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNNDMyIDI1NmMwIDE3LjctMTQuMyAzMi0zMiAzMkw0OCAyODhjLTE3LjcgMC0zMi0xNC4zLTMyLTMyczE0LjMtMzIgMzItMzJsMzUyIDBjMTcuNyAwIDMyIDE0LjMgMzIgMzJ6Ii8+PC9zdmc+');
    --upaep-accordion-header-markactive-width: 30px;
    --upaep-accordion-header-markactive-height: 30px;
    --upaep-accordion-header-markactive-bgsize: 20px;
    --upaep-accordion-content-width: 100%;
    --upaep-accordion-content-height: 0;
    --upaep-accordion-content-padding: 0;
    --upaep-accordion-content-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-accordion-content-border-size: 0;
    --upaep-accordion-content-border-style: solid;
    --upaep-accordion-content-border-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-accordion-content-border-bottom-size: 0;
    --upaep-accordion-content-border-bottom-style: solid;
    --upaep-accordion-content-border-bottom-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-accordion-content-border-radius: 0 0 10px 10px;
    --upaep-accordion-active-content-padding: 0;
    --upaep-accordion-active-content-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-accordion-active-content-border-size: 1px;
    --upaep-accordion-active-content-border-style: solid;
    --upaep-accordion-active-content-border-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-accordion-active-content-border-bottom-size: 1px;
    --upaep-accordion-active-content-border-bottom-style: solid;
    --upaep-accordion-active-content-border-bottom-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-accordion-active-content-border-radius: 0 0 10px 10px;
    width: var(--upaep-accordion-width);
    height: var(--upaep-accordion-height);
    margin: var(--upaep-accordion-margin);
    padding: var(--upaep-accordion-padding);
    background: var(--upaep-accordion-bg);

    & .upaep__accordion_item,
    & .upaep__accordion-item {
        width: var(--upaep-accordion-item-width);
        height: var(--upaep-accordion-item-height);
        margin: var(--upaep-accordion-item-margin);
        padding: var(--upaep-accordion-item-padding);

        &.is-active {

            >.upaep__accordion_header,
            >.upaep__accordion-header {
                width: var(--upaep-accordion-active-header-width);
                height: var(--upaep-accordion-active-header-height);
                padding: var(--upaep-accordion-active-header-padding);
                background: var(--upaep-accordion-active-header-bg);
                border-radius: var(--upaep-accordion-active-header-border-radius);
                border: var(--upaep-accordion-active-header-border-size) var(--upaep-accordion-active-header-border-style) var(--upaep-accordion-active-header-border-color);
                border-bottom: var(--upaep-accordion-active-header-border-bottom-size) var(--upaep-accordion-active-header-border-bottom-style) var(--upaep-accordion-active-header-border-bottom-color);
                display: flex;
                align-items: center;
                position: relative;
                cursor: pointer;
                transition: border-radius .5s ease-in;

                & a {
                    font-size: var(--upaep-accordion-active-header-fz);
                    font-weight: var(--upaep-accordion-active-header-fw);
                    color: var(--upaep-accordion-active-header-color);
                    padding: var(--upaep-accordion-active-header-padding);
                    text-decoration: none;
                }

                &::after {
                    content: '';
                    width: var(--upaep-accordion-header-markactive-width);
                    height: var(--upaep-accordion-header-markactive-height);
                    background-color: var(--upaep-accordion-header-mark-color, currentColor);
                    -webkit-mask: var(--upaep-accordion-header-markactive) right center / var(--upaep-accordion-header-markactive-bgsize) no-repeat;
                    mask: var(--upaep-accordion-header-markactive) right center / var(--upaep-accordion-header-markactive-bgsize) no-repeat;
                    margin-left: auto;
                }

            }
        }

        &:not(.is-active) .upaep__accordion_header::after,
        &:not(.is-active) .upaep__accordion-header::after {
            content: '';
            width: var(--upaep-accordion-header-markinactive-width);
            height: var(--upaep-accordion-header-markinactive-height);
            background-color: var(--upaep-accordion-header-mark-color, currentColor);
            -webkit-mask: var(--upaep-accordion-header-markinactive) right center / var(--upaep-accordion-header-markinactive-bgsize) no-repeat;
            mask: var(--upaep-accordion-header-markinactive) right center / var(--upaep-accordion-header-markinactive-bgsize) no-repeat;
            margin-left: auto;
        }

        &.is-active .upaep__accordion_content.is-active {
            --upaep-accordion-content-height: auto;
            --upaep-accordion-content-padding: 1rem;
        }

        &:has(>.__link),
        &:has(>.__subtitle),
        &:has(>.__input) {
            --upaep-accordion-header-markinactive: ;
            --upaep-accordion-header-markactive: ;
            --upaep-accordion-header-mark-color: transparent;
        }
    }

    &:not(.__rounded) {

        & .upaep__accordion_item,
        & .upaep__accordion-item {
            &:not(:last-child) {
                border-bottom: var(--upaep-accordion-header-border-bottom-size) var(--upaep-accordion-header-border-bottom-style) var(--upaep-accordion-header-border-bottom-color);
            }
        }

        .upaep__accordion_item:first-child .upaep__accordion_header,
        .upaep__accordion-item:first-child .upaep__accordion-header {
            --upaep-accordion-header-border-radius: 10px 10px 0 0;
            --upaep-accordion-active-content-border-radius: 0;
        }

        .upaep__accordion_item:last-child .upaep__accordion_header,
        .upaep__accordion-item:last-child .upaep__accordion-header {
            --upaep-accordion-header-border-radius: 0 0 10px 10px;
            --upaep-accordion-active-content-border-radius: 0;
        }

        .upaep__accordion_item:not(:first-child):not(:last-child) .upaep__accordion_header,
        .upaep__accordion-item:not(:first-child):not(:last-child) .upaep__accordion-header {
            --upaep-accordion-header-border-radius: 0;
            --upaep-accordion-active-content-border-radius: 0;
        }
    }

    &.__rounded {

        & .upaep__accordion_item.is-active,
        & .upaep__accordion-item.is-active {
            &:not(:last-child) {
                border-bottom: var(--upaep-accordion-header-border-bottom-size) var(--upaep-accordion-header-border-bottom-style) var(--upaep-accordion-header-border-bottom-color);
                border-radius: 10px;
            }
        }
    }


    & .upaep__accordion_header,
    & .upaep__accordion-header {
        width: var(--upaep-accordion-header-width);
        height: var(--upaep-accordion-header-height);
        padding: var(--upaep-accordion-header-padding);
        background: var(--upaep-accordion-header-bg);
        border-radius: var(--upaep-accordion-header-border-radius);
        border: var(--upaep-accordion-header-border-size) var(--upaep-accordion-header-border-style) var(--upaep-accordion-header-border-color);
        display: flex;
        align-items: center;
        position: relative;
        cursor: pointer;
        transition: border-radius .5s ease-in;

        & a,
        & a:hover {
            font-size: var(--upaep-accordion-header-fz);
            font-weight: var(--upaep-accordion-header-fw);
            color: var(--upaep-accordion-header-color);
            padding: var(--upaep-accordion-header-padding);
            text-decoration: none;
        }

        &::after {
            content: '';
            width: var(--upaep-accordion-header-markinactive-width);
            height: var(--upaep-accordion-header-markinactive-height);
            background-color: var(--upaep-accordion-header-mark-color, currentColor);
            -webkit-mask: var(--upaep-accordion-header-markinactive) right center / var(--upaep-accordion-header-markinactive-bgsize) no-repeat;
            mask: var(--upaep-accordion-header-markinactive) right center / var(--upaep-accordion-header-markinactive-bgsize) no-repeat;
            margin-left: auto;
        }
    }

    & .upaep__accordion-content,
    & .upaep__accordion_content {
        width: var(--upaep-accordion-content-width);
        height: var(--upaep-accordion-content-height);
        padding: var(--upaep-accordion-content-padding);
        background: var(--upaep-accordion-content-bg);
        border: var(--upaep-accordion-content-border-size) var(--upaep-accordion-content-border-style) var(--upaep-accordion-content-border-color);
        border-bottom: var(--upaep-accordion-content-border-bottom-size) var(--upaep-accordion-content-border-bottom-style) var(--upaep-accordion-content-border-bottom-color);
        border-radius: var(--upaep-accordion-content-border-radius);
        overflow: hidden;
        transition: all .5s ease;

        &.is-active {
            background: var(--upaep-accordion-active-content-bg);
            border: var(--upaep-accordion-active-content-border-size) var(--upaep-accordion-active-content-border-style) var(--upaep-accordion-active-content-border-color);
            border-bottom: var(--upaep-accordion-active-content-border-bottom-size) var(--upaep-accordion-active-content-border-bottom-style) var(--upaep-accordion-active-content-border-bottom-color);
            border-radius: var(--upaep-accordion-active-content-border-radius);
            overflow: hidden;
            transition: all .5s ease;
        }

        &:not(.is-active) {
            --upaep-accordion-content-height: 0;
        }
    }
}

.upaep__accordion.__rounded {
    --upaep-accordion-item-margin: 1rem 0;
    --upaep-accordion-header-border-radius: 50px;
    --upaep-accordion-active-header-border-radius: 10px 10px 0 0;
    --upaep-accordion-content-border-radius: 0 0 10px 10px;
    --upaep-accordion-active-content-border-radius: 0 0 10px 10px;
    --upaep-accordion-header-border-bottom-size: 1px;
    --upaep-accordion-active-header-border-bottom-size: 1px;
}

.upaep__accordion.__borderless {
    --upaep-accordion-header-border-size: 0;
    --upaep-accordion-header-border-style: solid;
    --upaep-accordion-header-border-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-accordion-active-header-border-size: 0;
    --upaep-accordion-active-header-border-style: solid;
    --upaep-accordion-active-header-border-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-accordion-content-border-size: 0;
    --upaep-accordion-content-border-style: solid;
    --upaep-accordion-content-border-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-accordion-active-content-border-size: 0;
    --upaep-accordion-active-content-border-style: solid;
    --upaep-accordion-active-content-border-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-accordion-header-border-bottom-size: 1px;
    --upaep-accordion-header-border-bottom-style: solid;
    --upaep-accordion-header-border-bottom-color: var(--ui-border, var(--upaep-color-border-grey));
}

.upaep__accordion.__underline:not(.__rounded) {
    --upaep-accordion-header-border-size: 0;
    --upaep-accordion-header-border-style: solid;
    --upaep-accordion-header-border-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-accordion-active-header-border-size: 0;
    --upaep-accordion-active-header-border-style: solid;
    --upaep-accordion-active-header-border-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-accordion-content-border-size: 0;
    --upaep-accordion-content-border-style: solid;
    --upaep-accordion-content-border-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-accordion-active-content-border-size: 0;
    --upaep-accordion-active-content-border-style: solid;
    --upaep-accordion-active-content-border-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-accordion-header-border-bottom-size: 1px;
    --upaep-accordion-header-border-bottom-style: solid;
    --upaep-accordion-header-border-bottom-color: var(--ui-border, var(--upaep-color-border-grey));
}

.upaep__accordion.icon__circle,
.upaep__accordion.__icon-circle {
    --upaep-accordion-header-markinactive: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuNC4yIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDIzIEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNMjU2IDUxMkEyNTYgMjU2IDAgMSAwIDI1NiAwYTI1NiAyNTYgMCAxIDAgMCA1MTJ6TTIzMiAzNDRWMjgwSDE2OGMtMTMuMyAwLTI0LTEwLjctMjQtMjRzMTAuNy0yNCAyNC0yNGg2NFYxNjhjMC0xMy4zIDEwLjctMjQgMjQtMjRzMjQgMTAuNyAyNCAyNHY2NGg2NGMxMy4zIDAgMjQgMTAuNyAyNCAyNHMtMTAuNyAyNC0yNCAyNEgyODB2NjRjMCAxMy4zLTEwLjcgMjQtMjQgMjRzLTI0LTEwLjctMjQtMjR6Ii8+PC9zdmc+');
    --upaep-accordion-header-markactive: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuNC4yIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDIzIEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNMjU2IDUxMkEyNTYgMjU2IDAgMSAwIDI1NiAwYTI1NiAyNTYgMCAxIDAgMCA1MTJ6TTE4NCAyMzJIMzI4YzEzLjMgMCAyNCAxMC43IDI0IDI0cy0xMC43IDI0LTI0IDI0SDE4NGMtMTMuMyAwLTI0LTEwLjctMjQtMjRzMTAuNy0yNCAyNC0yNHoiLz48L3N2Zz4=');
}

.upaep__accordion.icon__chevron,
.upaep__accordion.__icon-chevron {
    --upaep-accordion-header-markinactive: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuNC4yIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDIzIEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNMjMzLjQgNDA2LjZjMTIuNSAxMi41IDMyLjggMTIuNSA0NS4zIDBsMTkyLTE5MmMxMi41LTEyLjUgMTIuNS0zMi44IDAtNDUuM3MtMzIuOC0xMi41LTQ1LjMgMEwyNTYgMzM4LjcgODYuNiAxNjkuNGMtMTIuNS0xMi41LTMyLjgtMTIuNS00NS4zIDBzLTEyLjUgMzIuOCAwIDQ1LjNsMTkyIDE5MnoiLz48L3N2Zz4=');
    --upaep-accordion-header-markactive: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuNC4yIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDIzIEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNMjMzLjQgMTA1LjRjMTIuNS0xMi41IDMyLjgtMTIuNSA0NS4zIDBsMTkyIDE5MmMxMi41IDEyLjUgMTIuNSAzMi44IDAgNDUuM3MtMzIuOCAxMi41LTQ1LjMgMEwyNTYgMTczLjMgODYuNiAzNDIuNmMtMTIuNSAxMi41LTMyLjggMTIuNS00NS4zIDBzLTEyLjUtMzIuOCAwLTQ1LjNsMTkyLTE5MnoiLz48L3N2Zz4=');
}

.upaep__accordion.icon__circle-chevron,
.upaep__accordion.__icon-circle-chevron {
    --upaep-accordion-header-markinactive: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuNC4yIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDIzIEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNMjU2IDBhMjU2IDI1NiAwIDEgMCAwIDUxMkEyNTYgMjU2IDAgMSAwIDI1NiAwek0xMzUgMjQxYy05LjQtOS40LTkuNC0yNC42IDAtMzMuOXMyNC42LTkuNCAzMy45IDBsODcgODcgODctODdjOS40LTkuNCAyNC42LTkuNCAzMy45IDBzOS40IDI0LjYgMCAzMy45TDI3MyAzNDVjLTkuNCA5LjQtMjQuNiA5LjQtMzMuOSAwTDEzNSAyNDF6Ii8+PC9zdmc+');
    --upaep-accordion-header-markactive: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuNC4yIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDIzIEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNMjU2IDUxMkEyNTYgMjU2IDAgMSAwIDI1NiAwYTI1NiAyNTYgMCAxIDAgMCA1MTJ6TTM3NyAyNzFjOS40IDkuNCA5LjQgMjQuNiAwIDMzLjlzLTI0LjYgOS40LTMzLjkgMGwtODctODctODcgODdjLTkuNCA5LjQtMjQuNiA5LjQtMzMuOSAwcy05LjQtMjQuNiAwLTMzLjlMMjM5IDE2N2M5LjQtOS40IDI0LjYtOS40IDMzLjkgMEwzNzcgMjcxeiIvPjwvc3ZnPg==');
}

.upaep__accordion.icon__caret,
.upaep__accordion.__icon-caret {
    --upaep-accordion-header-markinactive: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMjAgNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuNC4yIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDIzIEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNMTM3LjQgMzc0LjZjMTIuNSAxMi41IDMyLjggMTIuNSA0NS4zIDBsMTI4LTEyOGM5LjItOS4yIDExLjktMjIuOSA2LjktMzQuOXMtMTYuNi0xOS44LTI5LjYtMTkuOEwzMiAxOTJjLTEyLjkgMC0yNC42IDcuOC0yOS42IDE5LjhzLTIuMiAyNS43IDYuOSAzNC45bDEyOCAxMjh6Ii8+PC9zdmc+');
    --upaep-accordion-header-markactive: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMjAgNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuNC4yIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDIzIEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNMTgyLjYgMTM3LjRjLTEyLjUtMTIuNS0zMi44LTEyLjUtNDUuMyAwbC0xMjggMTI4Yy05LjIgOS4yLTExLjkgMjIuOS02LjkgMzQuOXMxNi42IDE5LjggMjkuNiAxOS44SDI4OGMxMi45IDAgMjQuNi03LjggMjkuNi0xOS44czIuMi0yNS43LTYuOS0zNC45bC0xMjgtMTI4eiIvPjwvc3ZnPg==');
}

.upaep__accordion.__spacing {
    --upaep-accordion-item-margin: .5rem 0;
}

/*? ------ menu-mobile accordion ------ */
.upaep__menu .upaep__menu-mobile .upaep__accordion,
.upaep__menu .upaep__menu__mobile .upaep__accordion {
    --upaep-accordion-header-border-radius: 10px;
    --upaep-accordion-header-bg: var(--upaep-color-white);
    --upaep-accordion-header-fz: var(--upaep-fz18);
    --upaep-accordion-header-fw: var(--upaep-fw-bold);
    --upaep-accordion-header-color: var(--upaep-color-dark-grey);
    --upaep-accordion-header-border-size: 0;
    --upaep-accordion-header-border-radius: 0;
    --upaep-accordion-active-header-border-radius: 0;
    --upaep-accordion-active-header-bg: var(--upaep-color-white);
    --upaep-accordion-active-header-fz: var(--upaep-fz18);
    --upaep-accordion-active-header-fw: var(--upaep-fw-bold);
    --upaep-accordion-active-header-color: var(--upaep-color-dark-grey);
    --upaep-accordion-active-header-border-size: 0;
    --upaep-accordion-active-header-border-bottom-size: 0;
    --upaep-accordion-content-bg: var(--upaep-color-white);
    --upaep-accordion-content-border-radius: 0;
    --upaep-accordion-active-content-bg: var(--upaep-color-white);
    --upaep-accordion-active-content-border-size: 0;
    --upaep-accordion-active-content-border-radius: 0;
    --upaep-accordion-active-content-border-bottom-size: 2px;
}

.upaep__menu .upaep__menu-mobile .upaep__accordion .upaep__accordion_header.__link::after,
.upaep__menu .upaep__menu-mobile .upaep__accordion .upaep__accordion_header.__input::after,
.upaep__menu .upaep__menu-mobile .upaep__accordion .upaep__accordion_header.__title::after,
.upaep__menu .upaep__menu-mobile .upaep__accordion .upaep__accordion_header.__subtitle::after {
    --upaep-accordion-header-markinactive: '';
    --upaep-accordion-header-markactive: '';
    --upaep-accordion-header-mark-color: transparent;
}


.upaep__menu .upaep__menu-mobile .upaep__accordion .upaep__accordion-header.__title,
.upaep__menu .upaep__menu-mobile .upaep__accordion .upaep__accordion_header.__title {
    --upaep-accordion-header-color: var(--ui-accent, var(--upaep-color-red));
    --upaep-accordion-active-header-color: var(--ui-accent, var(--upaep-color-red));
}

.upaep__menu .upaep__menu-mobile .upaep__accordion .upaep__accordion-header.__subtitle,
.upaep__menu .upaep__menu-mobile .upaep__accordion .upaep__accordion_header.__subtitle {
    --upaep-accordion-header-color: var(--ui-accent, var(--upaep-color-red));
    --upaep-accordion-active-header-color: var(--ui-accent, var(--upaep-color-red));
}

.upaep__menu .upaep__menu-mobile .upaep__accordion .upaep__accordion_header.__link.__secondary,
.upaep__menu .upaep__menu__mobile .upaep__accordion .upaep__accordion_header.__link.__secondary {
    --upaep-accordion-header-padding: 0 0 0 1.5rem;
    --upaep-accordion-active-header-padding: 0 0 0 1.5rem;
}

/*? ------ List ------ */

.upaep__list {
    --upaep-list-width: 100%;
    --upaep-list-height: auto;
    --upaep-list-maxwidth: auto;
    --upaep-list-padding: 0 0 0 1rem;
    --upaep-list-margin: .5rem;
    --upaep-list-bg: transparent;
    --upaep-list-border-radius: 8px;
    --upaep-list-item-width: 100%;
    --upaep-list-item-height: 100%;
    --upaep-list-item-padding: .75rem .5rem;
    --upaep-list-item-margin: 0;
    --upaep-list-item-color: inset;
    --upaep-list-item-bg: transparent;
    --upaep-list-item-border-size: 0;
    --upaep-list-item-border-style: solid;
    --upaep-list-item-border-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-list-item-border-bottom-size: 1px;
    --upaep-list-item-border-bottom-style: solid;
    --upaep-list-item-border-bottom-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-list-item-border-radius: 0;
    --upaep-list-item-mark-content: '\f0da';
    --upaep-list-item-mark-fz: var(--upaep-fz14);
    --upaep-list-item-mark-fw: var(--upaep-fw-bold);
    --upaep-list-item-mark-color: var(--ui-accent, var(--upaep-color-red));
    --upaep-list-item-mark-padding: .25rem .5rem;
    --upaep-list-item-mark-inset: auto auto auto -20px;
    --upaep-list-item-hover-color: inset;
    --upaep-list-item-hover-bg: var(--ui-surface-hover, var(--colorgrey7));
    --upaep-list-item-hover-border-size: 0;
    --upaep-list-item-hover-border-style: solid;
    --upaep-list-item-hover-border-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-list-item-hover-border-bottom-size: 1px;
    --upaep-list-item-hover-border-bottom-style: solid;
    --upaep-list-item-hover-border-bottom-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-list-item-hover-mark-content: '\f0da';
    --upaep-list-item-hover-mark-fz: var(--upaep-fz14);
    --upaep-list-item-hover-mark-fw: var(--upaep-fw-bold);
    --upaep-list-item-hover-mark-color: var(--ui-accent, var(--upaep-color-red));
    --upaep-list-item-active-color: inset;
    --upaep-list-item-active-bg: var(--ui-surface-hover, var(--colorgrey7));
    --upaep-list-item-active-border-size: 0;
    --upaep-list-item-active-border-style: solid;
    --upaep-list-item-active-border-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-list-item-active-border-bottom-size: 1px;
    --upaep-list-item-active-border-bottom-style: solid;
    --upaep-list-item-active-border-bottom-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-list-item-active-mark-content: '\f0da';
    --upaep-list-item-active-mark-fz: var(--upaep-fz14);
    --upaep-list-item-active-mark-fw: var(--upaep-fw-bold);
    --upaep-list-item-active-mark-color: var(--ui-accent, var(--upaep-color-red));
    width: var(--upaep-list-width);
    height: var(--upaep-list-height);
    max-width: var(--upaep-list-maxwidth);
    padding: var(--upaep-list-padding);
    margin: var(--upaep-list-margin);
    background: var(--upaep-list-bg);
    border-radius: var(--upaep-list-border-radius);
    display: flex;
    flex-direction: column;

    &:not(.__style-normal) {
        .upaep__list-item {
            display: flex;
        }
    }

    & .upaep__list-item {
        width: var(--upaep-list-item-width);
        height: var(--upaep-list-item-height);
        padding: var(--upaep-list-item-padding);
        margin: var(--upaep-list-item-margin);
        color: var(--upaep-list-item-color);
        background: var(--upaep-list-item-bg);
        border: var(--upaep-list-item-border-size) var(--upaep-list-item-border-style) var(--upaep-list-item-border-color);
        border-radius: var(--upaep-list-item-border-radius);
        position: relative;
        text-decoration: none;

        &.is-active {
            color: var(--upaep-list-item-active-color);
            background: var(--upaep-list-item-active-bg);
            border: var(--upaep-list-item-active-border-size) var(--upaep-list-item-active-border-style) var(--upaep-list-item-active-border-color);
        }

        &.is-inactive {
            display: none;
        }

        & a {
            text-decoration: none;
        }

        &::before {
            content: var(--upaep-list-item-mark-content);
            font-size: var(--upaep-list-item-mark-fz);
            font-weight: var(--upaep-list-item-mark-fw);
            color: var(--upaep-list-item-mark-color);
            padding: var(--upaep-list-item-mark-padding);
            inset: var(--upaep-list-item-mark-inset);
            font-family: var(--upaep-ff-fontawesome);
        }

        &.is-active::before {
            content: var(--upaep-list-item-active-mark-content);
            font-size: var(--upaep-list-item-active-mark-fz);
            font-weight: var(--upaep-list-item-active-mark-fw);
            color: var(--upaep-list-item-active-mark-color);
        }
    }

    &.__hover {
        & .upaep__list-item:not(.is-active):hover {
            color: var(--upaep-list-item-hover-color);
            background: var(--upaep-list-item-hover-bg);
            border: var(--upaep-list-item-hover-border-size) var(--upaep-list-item-hover-border-style) var(--upaep-list-item-hover-border-color);
        }

        & .upaep__list-item:not(.is-active):hover::before {
            content: var(--upaep-list-item-hover-mark-content);
            font-size: var(--upaep-list-item-hover-mark-fz);
            font-weight: var(--upaep-list-item-hover-mark-fw);
            color: var(--upaep-list-item-hover-mark-color);
        }
    }

    &:not(.__flush) {
        & .upaep__list-item:first-child {
            --upaep-list-item-border-radius: 8px 8px 0 0;
        }

        & .upaep__list-item:last-child {
            --upaep-list-item-border-radius: 0 0 8px 8px;
        }
    }
}

.upaep__list.__nomark {
    --upaep-list-item-mark-content: '';
    --upaep-list-item-mark-padding: 0;
    --upaep-list-item-active-mark-content: '';
    --upaep-list-item-active-mark-padding: 0;
}

.upaep__list.__borderless {
    --upaep-list-item-border-size: 0;
    --upaep-list-item-border-color: none;
}

.upaep__list.__bordered {
    --upaep-list-item-border-size: 1px;
    --upaep-list-item-hover-border-size: 1px;
    --upaep-list-item-active-border-size: 1px;
}

.upaep__list.__horizontal,
.upaep__list.__inline {
    flex-direction: row;
}

.upaep__list.__flush .upaep__list-item:not(:last-child) {
    border-bottom: var(--upaep-list-item-border-bottom-size) var(--upaep-list-item-border-bottom-style) var(--upaep-list-item-border-bottom-color);
}

.upaep__list.__flush.__hover .upaep__list-item:not(.is-active):not(:last-child):hover {
    border-bottom: var(--upaep-list-item-hover-border-bottom-size) var(--upaep-list-item-hover-border-bottom-style) var(--upaep-list-item-hover-border-bottom-color);
}

.upaep__list.__flush .upaep__list-item:not(:last-child).is-active {
    border-bottom: var(--upaep-list-item-active-border-bottom-size) var(--upaep-list-item-active-border-bottom-style) var(--upaep-list-item-active-border-bottom-color);
}

.upaep__list.__program .upaep__list-item:not(.is-inactive) {
    display: flex;
    align-items: start;
}

.upaep__list.__program .upaep__list-item a {
    cursor: pointer;
}

.upaep__list.__native-marker {
    /* Marcador configurable. Por defecto viñeta •. Cambiable por variable:
       · FontAwesome: --upaep-list-marker-content:'\f0da'; --upaep-list-marker-font:'Font Awesome 6 Free'; --upaep-list-marker-weight:900;
       · SVG (imagen): --upaep-list-marker-content: url("data:image/svg+xml,…");  (el color lo define el propio SVG) */
    --upaep-list-marker-content: '\2022';
    --upaep-list-marker-font: inherit;
    --upaep-list-marker-weight: var(--upaep-list-item-mark-fw);
    list-style: none;
    display: block;                 /* marcadores nativos fiables: los items son list-item reales en flujo, no items flex */
    padding-left: 1.25rem;
}

.upaep__list.__native-marker .upaep__list-item {
    display: list-item;
    list-style-position: outside;
}

/* ::before apagado en TODOS los estados: el original lo re-activa en hover/active
   (mayor especificidad), lo que duplicaría el marcador sobre el ::marker nativo. */
.upaep__list.__native-marker .upaep__list-item::before,
.upaep__list.__native-marker .upaep__list-item.is-active::before,
.upaep__list.__native-marker.__hover .upaep__list-item:not(.is-active):hover::before {
    content: none;
}

.upaep__list.__native-marker .upaep__list-item::marker {
    content: var(--upaep-list-marker-content);
    color: var(--upaep-list-item-mark-color);
    font-size: var(--upaep-list-item-mark-fz);
    font-weight: var(--upaep-list-marker-weight);
    font-family: var(--upaep-list-marker-font);
}

.upaep__list.__native-marker.__ordered {
    counter-reset: upaep-list;
}

.upaep__list.__native-marker.__ordered .upaep__list-item {
    counter-increment: upaep-list;
}

.upaep__list.__native-marker.__ordered .upaep__list-item::marker {
    content: counter(upaep-list) '. ';
}

/* ---- native-marker: paridad de variantes con el original ----
   Las variantes de caja/estado (__bordered, __borderless, __flush, __hover,
   is-active/is-inactive, __program) YA componen porque estilan el ítem, no el
   marcador. Aquí solo van los deltas propios del marcador nativo. */

/* __nomark: apaga el marcador nativo (después de __ordered para ganarle en cascada) */
.upaep__list.__native-marker.__nomark {
    padding-left: 0;
}
.upaep__list.__native-marker.__nomark .upaep__list-item::marker {
    content: none;
}

/* __horizontal / __inline: fila. list-style-position:outside no se pinta en flex-row → inside */
.upaep__list.__native-marker.__horizontal,
.upaep__list.__native-marker.__inline {
    display: flex;
    flex-direction: row;
    padding-left: 0;
}
.upaep__list.__native-marker.__horizontal .upaep__list-item,
.upaep__list.__native-marker.__inline .upaep__list-item {
    list-style-position: inside;
}

/* estado activo / hover: color del marcador nativo (equivalente al original) */
.upaep__list.__native-marker .upaep__list-item.is-active::marker {
    color: var(--upaep-list-item-active-mark-color);
}
.upaep__list.__native-marker.__hover .upaep__list-item:not(.is-active):hover::marker {
    color: var(--upaep-list-item-hover-mark-color);
}

/*? ------ Modal ------ */
.upaep__modal-dark .modal-header {
    background: var(--ui-accent, var(--upaep-color-red));
    color: var(--ui-on-accent, var(--upaep-color-white));
}

.upaep__modal-dark .modal-body {
    background: var(--ui-surface-inverse, var(--upaep-color-black));
    color: var(--ui-on-surface-inverse, var(--upaep-color-white));
}

.upaep__modal-black .modal-header {
    background: var(--ui-surface-inverse, var(--upaep-color-black));
    color: var(--ui-on-surface-inverse, var(--upaep-color-white));
}

.upaep__modal-black .modal-body {
    background: var(--ui-surface-inverse, var(--upaep-color-black));
    color: var(--ui-on-surface-inverse, var(--upaep-color-white));
}

.upaep__modal-white .modal-header {
    background: var(--ui-accent, var(--upaep-color-red));
    color: var(--ui-on-accent, var(--upaep-color-white));
}

.upaep__modal-white .modal-body {
    background: var(--ui-surface, var(--upaep-color-white));
    color: var(--ui-text-strong, var(--upaep-color-black));
}

.upaep__modal-blue .modal-header {
    background: var(--ui-counter, var(--upaep-color-blue-primary));
    color: var(--ui-on-counter, var(--upaep-color-white));
}

.upaep__modal-blue .modal-body {
    background: var(--ui-surface, var(--upaep-color-white));
    color: var(--ui-text-strong, var(--upaep-color-black));
}

.upaep__modal-darkblue .modal-header {
    background: var(--ui-counter, var(--upaep-color-blue-primary));
    color: var(--ui-on-counter, var(--upaep-color-white));
}

.upaep__modal-darkblue .modal-body {
    background: var(--ui-surface-inverse, var(--upaep-color-black));
    color: var(--ui-on-surface-inverse, var(--upaep-color-white));
}

.upaep__modal-simple .modal-header {
    background: var(--ui-surface, var(--upaep-color-white));
    color: var(--ui-text-strong, var(--upaep-color-black));
    border: none;
    padding: 1rem 1rem 0;
}

.upaep__modal-simple .modal-body {
    background: var(--ui-surface, var(--upaep-color-white));
    color: var(--ui-text-strong, var(--upaep-color-black));
}

h1.upaep__title_modal {
    font-size: 25px;
    font-weight: bold;
}

.upaep_modal_noborder .modal-header {
    border: none;
}

.upaep__modal-header {
    border: none !important;
}

.upaep__modal_body {
    padding: 20px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

.upaep__close-red {
    color: var(--ui-accent, var(--upaep-color-red));
    font-size: 30px;
    position: absolute;
    top: 12px;
    right: 15px;
    cursor: pointer;
}

.upaep__close-blue {
    color: var(--upaep-color-blue-primary);
    font-size: 30px;
    position: absolute;
    top: 12px;
    right: 15px;
    cursor: pointer;
}

.upaep__close-black {
    color: var(--ui-text-strong, var(--upaep-color-black));
    font-size: 30px;
    position: absolute;
    top: 12px;
    right: 15px;
    cursor: pointer;
}

.upaep__close-white {
    color: var(--upaep-color-white);
    font-size: 30px;
    position: absolute;
    top: 12px;
    right: 15px;
    cursor: pointer;
}

.upaep__modal-header {
    padding: 30px;
}

.upaep__modal-body {
    padding: 10px 30px 30px;
}

.modal-backdrop.show {
    opacity: .5;
    width: 100%;
    height: 100%;
}

#modalUpress {
    p:has(sup) {
        margin: 1rem 0;
    }

    sup {
        line-height: 1.5;
    }
}

/*? ------ Selectpicker ------ */
.upaep__selectpicker {
    --upaep-selectpicker-width: 100%;
    --upaep-selectpicker-height: auto;
    --upaep-selectpicker-margin: .5rem 0;
    --upaep-selectpicker-padding: 0;
    /* Mínimos de alto, relleno de «Seleccionar todo», botón de limpiar y letra del
       buscador: eran literales, y una variante de tamaño en la capa local tenía que
       pisarlos como propiedad (o con !important, el del placeholder). */
    --upaep-selectpicker-min-height: 2.65rem;
    --upaep-selectpicker-btn-min-height: 2.45rem;
    --upaep-selectpicker-opt-min-height: 35px;
    --upaep-selectpicker-selectall-padding: .5rem;
    --upaep-selectpicker-clear-size: 30px;
    --upaep-selectpicker-clear-padding: .5rem;
    --upaep-selectpicker-search-fz: var(--upaep-fz16);
    --upaep-selectpicker-boxshadow: 0 0 0 0.25rem var(--ui-control-ring, rgba(82, 86, 90, 0.25));
    --upaep-selectpicker-border-radius: 10px;
    --upaep-selectpicker-content-width: 100%;
    --upaep-selectpicker-content-height: auto;
    --upaep-selectpicker-content-margin: 5px 0;
    --upaep-selectpicker-content-padding: .5rem;
    --upaep-selectpicker-content-border-size: 2px;
    --upaep-selectpicker-content-border-style: solid;
    --upaep-selectpicker-content-border-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-selectpicker-content-border-radius: 10px;
    --upaep-selectpicker-content-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-selectpicker-list-width: 100%;
    --upaep-selectpicker-list-height: auto;
    --upaep-selectpicker-list-maxheight: 250px;
    --upaep-selectpicker-list-padding: .5rem 0;
    --upaep-selectpicker-list-margin: 0;
    --upaep-selectpicker-list-item-width: 100%;
    --upaep-selectpicker-list-item-height: auto;
    --upaep-selectpicker-list-item-padding: .5rem 1rem;
    --upaep-selectpicker-list-item-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-selectpicker-optg-fz: var(--upaep-fz14);
    --upaep-selectpicker-optg-fw: var(--upaep-fw-medium);
    --upaep-selectpicker-optg-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-selectpicker-optg-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-selectpicker-optg-padding: .5rem 1rem;
    --upaep-selectpicker-opt-fz: var(--upaep-fz16);
    --upaep-selectpicker-opt-fw: var(--upaep-fw-medium);
    --upaep-selectpicker-opt-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-selectpicker-opt-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-selectpicker-opt-padding: .5rem 1rem;
    --upaep-selectpicker-opt-selected-padding: var(--upaep-selectpicker-opt-padding);
    --upaep-selectpicker-opt-selected-fz: var(--upaep-selectpicker-opt-fz);
    --upaep-selectpicker-opt-selected-fw: var(--upaep-fw-medium);
    --upaep-selectpicker-opt-selected-color: var(--upaep-color-white);
    --upaep-selectpicker-opt-selected-bg: var(--upaep-color-grey);
    --upaep-selectpicker-opt-hover-padding: var(--upaep-selectpicker-opt-padding);
    --upaep-selectpicker-opt-hover-fz: var(--upaep-selectpicker-opt-fz);
    --upaep-selectpicker-opt-hover-fw: var(--upaep-fw-medium);
    --upaep-selectpicker-opt-hover-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-selectpicker-opt-hover-bg: var(--ui-surface-hover, var(--colorgrey7));
    --upaep-selectpicker-opt-disabled-padding: var(--upaep-selectpicker-opt-padding);
    --upaep-selectpicker-opt-disabled-fz: var(--upaep-selectpicker-opt-fz);
    --upaep-selectpicker-opt-disabled-fw: var(--upaep-fw-medium);
    --upaep-selectpicker-opt-disabled-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-selectpicker-opt-disabled-bg: var(--ui-surface-hover, var(--colorgrey7));
    --upaep-selectpicker-header-fz: var(--upaep-fz14);
    --upaep-selectpicker-header-fw: var(--upaep-fw-bold);
    --upaep-selectpicker-header-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-selectpicker-hover-bg-after: rgba(0, 0, 0, 0.1);
    --upaep-selectpicker-tags-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-selectpicker-proload-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-selectpicker-proload-border-radius: 10px;
    --upaep-selectpicker-proload-padding: .5rem;
    --upaep-selectpicker-proload-text-fz: var(--upaep-fz16);
    --upaep-selectpicker-proload-text-fw: var(--upaep-fw-medium);
    --upaep-selectpicker-proload-text-color: var(--upaep-color-dark-grey);
    --upaep-selectpicker-proload-spinner-width: 2rem;
    --upaep-selectpicker-proload-spinner-height: 2rem;
    --upaep-selectpicker-proload-spinner-color-primary: var(--ui-accent, var(--upaep-color-red));
    --upaep-selectpicker-proload-spinner-color-secondary: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-selectpicker-notify-bg: var(--ui-surface-hover, var(--colorgrey7));
    --upaep-selectpicker-notify-fz: var(--upaep-fz16);
    --upaep-selectpicker-notify-fw: var(--upaep-fw-bold);
    --upaep-selectpicker-notify-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-selectpicker-btn-mark-size: .45rem;
    --upaep-selectpicker-btn-mark-color: ;
    --upaep-selectpicker-btn-padding: 0 1rem 0 1rem;
    --upaep-selectpicker-btn-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-selectpicker-btn-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-selectpicker-btn-fw: var(--upaep-fw-normal);
    --upaep-selectpicker-btn-fz: var(--upaep-fz14);
    --upaep-selectpicker-btn-border-radius: 10px;
    --upaep-selectpicker-btn-border-size: 2px;
    --upaep-selectpicker-btn-border-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-selectpicker-btn-hover-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-selectpicker-btn-hover-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-selectpicker-btn-hover-fz: var(--upaep-selectpicker-btn-fz);
    --upaep-selectpicker-btn-hover-fw: var(--upaep-fw-normal);
    --upaep-selectpicker-btn-hover-border-radius: 10px;
    --upaep-selectpicker-btn-hover-border-size: 2px;
    --upaep-selectpicker-btn-hover-border-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-selectpicker-btn-selected-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-selectpicker-btn-selected-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-selectpicker-btn-selected-fz: var(--upaep-selectpicker-btn-fz);
    --upaep-selectpicker-btn-selected-fw: var(--upaep-fw-normal);
    --upaep-selectpicker-btn-selected-border-radius: ;
    --upaep-selectpicker-btn-selected-border-size: ;
    --upaep-selectpicker-btn-selected-border-color: ;
    --upaep-selectpicker-counter-size: 25px;
    --upaep-selectpicker-counter-padding: .5rem;
    --upaep-selectpicker-counter-border-radius: var(--upaep-selectpicker-counter-size);
    --upaep-selectpicker-counter-bg: ;
    --upaep-selectpicker-counter-color: ;
    --upaep-selectpicker-counter-fz: ;
    --upaep-selectpicker-counter-fw: ;
    --upaep-selectpicker-counter-selected-bg: ;
    --upaep-selectpicker-counter-selected-color: ;
    --upaep-selectpicker-counter-selected-fz: ;
    --upaep-selectpicker-counter-selected-fw: ;

    width: var(--upaep-selectpicker-width);
    height: var(--upaep-selectpicker-height);
    margin: var(--upaep-selectpicker-margin);
    padding: var(--upaep-selectpicker-padding);
    border-radius: var(--upaep-selectpicker-border-radius);
    min-height: var(--upaep-selectpicker-min-height);
    position: relative;

    &:hover .upaep__selectpicker-btn .upaep__btn:focus {
        box-shadow: var(--upaep-selectpicker-boxshadow);
    }

    &.__disabled {
        opacity: .5;
        pointer-events: none;
    }

    &:has(select:disabled) {
        opacity: .5;
        pointer-events: none;

        .upaep__selectpicker-btn .upaep__btn {
            --upaep-btn-bg: var(--ui-surface-2, var(--upaep-color-background));
        }
    }

    &:has(select.__rounded) {
        --upaep-selectpicker-proload-border-radius: 50px;

        .upaep__selectpicker-btn .upaep__btn {
            --upaep-btn-border-radius: 50px;
        }
    }

    & select {
        display: none;
    }

    & small {
        margin: 0 .5rem;
        opacity: .8;
    }

    & .upaep__selectpicker-overlay {
        width: 100%;
        height: auto;
        border-radius: 10px;
    }

    & .upaep__selectpicker-btn {
        width: 100%;
        height: auto;
        border-radius: 10px;
        position: relative;
    }

    &:not(.is-show) .upaep__btn .__close {
        display: none;
    }

    &.is-show .upaep__btn .__open {
        display: none;
    }

    & .upaep__selectpicker-content {
        width: var(--upaep-selectpicker-content-width);
        height: var(--upaep-selectpicker-content-height);
        margin: var(--upaep-selectpicker-content-margin);
        padding: var(--upaep-selectpicker-content-padding);
        border: var(--upaep-selectpicker-content-border-size) var(--upaep-selectpicker-content-border-style) var(--upaep-selectpicker-content-border-color);
        border-radius: var(--upaep-selectpicker-content-border-radius);
        background: var(--upaep-selectpicker-content-bg);
        overflow: hidden;
        position: absolute;
        z-index: var(--upaep-zindex-selectpicker);
        transition: height .5s;
        animation: a_fadeIn .5s forwards;

        & .upaep__selectpicker-header {
            width: 100%;
            min-height: 40px;
            height: auto;
            border-bottom: 1px solid var(--ui-border, var(--upaep-color-border-grey));
            display: flex;
            align-items: center;
            justify-content: space-between;

            &>* {
                font-size: var(--upaep-selectpicker-header-fz);
                font-weight: var(--upaep-selectpicker-header-fw);
                color: var(--upaep-selectpicker-header-color);
            }

            & span {
                padding: 0 1rem;
            }

            & i {
                padding: 0 1rem;
                cursor: pointer;
            }
        }

        .upaep__selectpicker-header-mark {
            position: relative;

            &::after {
                content: "";
                position: absolute;
                display: block;
                inset: 50% auto auto 50%;
                transform: translate(-50%, -50%);
                border-radius: 50px;
                background-color: transparent;
                pointer-events: none;
                width: calc(var(--upaep-selectpicker-header-fz) + 5px);
                height: calc(var(--upaep-selectpicker-header-fz) + 5px);
            }

            &:hover::after {
                transition: background-color .2s cubic-bezier(.05, 0, 0, 1);
                background-color: var(--upaep-selectpicker-hover-bg-after);
            }
        }

        & .upaep__selectpicker-search {
            width: 100%;
            padding: .5rem;
            position: relative;

            & i {
                color: var(--ui-text-muted, #191919);
                position: absolute;
                width: 20px;
                height: 20px;
                left: 20px;
                top: 50%;
                transform: translateY(-50%);
            }

            /* El placeholder iba con dos `!important` y no había forma de cambiarlo
               sin un tercero. Ahora son los tokens del propio input (que la regla
               de `.upaep__input::placeholder` ya consume), y el tamaño sale de
               `--upaep-selectpicker-search-fz`. */
            & .upaep__input.__selectpicker {
                --upaep-input-fz: var(--upaep-selectpicker-search-fz);
                --upaep-input-hover-fz: var(--upaep-selectpicker-search-fz);
                --upaep-input-placeholder-fz: var(--upaep-selectpicker-search-fz);
                --upaep-input-placeholder-color: var(--ui-text-muted, var(--upaep-color-black));
                --upaep-input-placeholder-opacity: 1;
                --upaep-input-margin: 0;
                --upaep-input-border-radius: 50px;
                --upaep-input-padding: .35rem 1.5rem .35rem 2rem !important;
                --upaep-input-focus-bg: var(--ui-surface, var(--upaep-color-white));
            }
        }

        & .upaep__selectpicker-selectall {
            width: 100%;
            display: flex;
            padding: var(--upaep-selectpicker-selectall-padding);
            gap: 5px;

            & .upaep__btn.__selectedall {
                --upaep-btn-width: 100%;
                --upaep-btn-height: 100%;
                --upaep-btn-border-radius: 10px;
                --upaep-btn-border-color: var(--ui-border, var(--upaep-color-border-grey));
                --upaep-btn-bg: var(--ui-surface, var(--upaep-color-white));
                --upaep-btn-margin: 0;
                min-height: 2rem;
                text-align: center;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .upaep__label {
                color: var(--upaep-selectpicker-header-color);
            }
        }

        & .upaep__selectpicker-list {
            width: var(--upaep-selectpicker-list-width);
            height: var(--upaep-selectpicker-list-height);
            max-height: var(--upaep-selectpicker-list-maxheight);
            padding: var(--upaep-selectpicker-list-padding);
            margin: var(--upaep-selectpicker-list-margin);
            list-style: none;
            overflow-y: auto;
            scrollbar-color: var(--ui-border, var(--upaep-color-border-grey)) tansparent;
            scrollbar-width: thin;

            .upaep__selectpicker-items {
                padding: 0 0 0 .25rem;

                .upaep__selectpicker-label {
                    font-size: var(--upaep-selectpicker-optg-fz);
                    font-weight: var(--upaep-selectpicker-optg-fw);
                    color: var(--upaep-selectpicker-optg-color);
                    background: var(--upaep-selectpicker-optg-bg);
                    padding: var(--upaep-selectpicker-optg-padding);
                    border-bottom: 1px solid var(--ui-border, var(--upaep-color-border-grey));
                    cursor: default;

                    &.is-inactive {
                        display: none;
                    }

                    &.is-disabled {
                        opacity: .5;
                    }
                }
            }

            & .upaep__selectpicker-item {
                width: var(--upaep-selectpicker-list-item-width);
                height: var(--upaep-selectpicker-list-item-height);
                padding: var(--upaep-selectpicker-list-item-padding);
                color: var(--upaep-selectpicker-list-item-color);
                min-height: var(--upaep-selectpicker-opt-min-height);
                display: flex;
                align-items: center;
                word-wrap: break-word;
                word-break: break-word;

                &.optg {
                    font-size: var(--upaep-selectpicker-optg-fz);
                    font-weight: var(--upaep-selectpicker-optg-fw);
                    color: var(--upaep-selectpicker-optg-color);
                    background: var(--upaep-selectpicker-optg-bg);
                    padding: var(--upaep-selectpicker-optg-padding);
                    border-bottom: 1px solid var(--ui-border, var(--upaep-color-border-grey));
                    cursor: default;
                }

                &.opt {
                    font-size: var(--upaep-selectpicker-opt-fz);
                    font-weight: var(--upaep-selectpicker-opt-fw);
                    color: var(--upaep-selectpicker-opt-color);
                    background: var(--upaep-selectpicker-opt-bg);
                    padding: var(--upaep-selectpicker-opt-padding);
                    cursor: pointer;

                    &.is-selected {
                        font-size: var(--upaep-selectpicker-opt-selected-fz);
                        font-weight: var(--upaep-selectpicker-opt-selected-fw);
                        color: var(--upaep-selectpicker-opt-selected-color);
                        background: var(--upaep-selectpicker-opt-selected-bg);
                        border-bottom: 1px solid var(--upaep-gradient-white);
                    }

                    &.is-preselect:not(.is-selected):not(.is-disabled),
                    &:hover:not(.is-selected):not(.is-disabled) {
                        font-size: var(--upaep-selectpicker-opt-hover-fz);
                        font-weight: var(--upaep-selectpicker-opt-hover-fw);
                        color: var(--upaep-selectpicker-opt-hover-color);
                        background: var(--upaep-selectpicker-opt-hover-bg);
                    }

                    &.is-disabled {
                        font-size: var(--upaep-selectpicker-opt-disabled-fz);
                        font-weight: var(--upaep-selectpicker-opt-disabled-fw);
                        color: var(--upaep-selectpicker-opt-disabled-color);
                        background: var(--upaep-selectpicker-opt-disabled-bg);
                        border-bottom: 1px solid var(--upaep-gradient-white);
                        opacity: .5;
                        cursor: not-allowed;

                        input[type=checkbox] {
                            pointer-events: none;
                        }
                    }
                }
            }
        }

        & .upaep__selectpicker-notify {
            background: var(--upaep-selectpicker-notify-bg);
            font-size: var(--upaep-selectpicker-notify-fz);
            font-weight: var(--upaep-selectpicker-notify-fw);
            color: var(--upaep-selectpicker-notify-color);
            min-height: 2.65rem;
            width: 100%;
            text-align: center;
            position: absolute;
            inset: 50% auto auto 50%;
            transform: translate(-50%);
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }

    & .upaep__selectpicker-preload {
        background: var(--upaep-selectpicker-proload-bg);
        border: 2px solid var(--upaep-color-border-grey);
        border-radius: var(--upaep-selectpicker-proload-border-radius);
        padding: var(--upaep-selectpicker-proload-padding);
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        gap: 10px;
        z-index: 10;
        cursor: default;

        & .spin_basic:before {
            height: var(--upaep-selectpicker-proload-spinner-width);
            width: var(--upaep-selectpicker-proload-spinner-height);
            border: 6px var(--upaep-selectpicker-proload-spinner-color-primary) solid;
            border-left-color: var(--upaep-selectpicker-proload-spinner-color-secondary);
            content: '';
            display: block;
            -webkit-animation: spin_basic .5s infinite linear;
            animation: spin_basic .5s infinite linear;
            border-radius: 100%;
        }

        & .upaep__selectpicker-spintext {
            font-size: var(--upaep-selectpicker-proload-text-fz);
            font-weight: var(--upaep-selectpicker-proload-text-fw);
            color: var(--upaep-selectpicker-proload-text-color);
        }
    }

    &:not(.is-show) .upaep__selectpicker-content {
        display: none;
    }

    &.__mark .upaep__selectpicker-item {
        display: flex;
        justify-content: space-between;

        &:not(.is-selected) .__mark {
            display: none;
        }
    }

    &.__checkbox {
        --upaep-selectpicker-opt-fw: var(--upaep-fw-normal);
        --upaep-selectpicker-opt-selected-bg: none;
        --upaep-selectpicker-opt-selected-color: var(--ui-text-strong, var(--upaep-color-black));
        --upaep-selectpicker-opt-selected-fw: var(--upaep-fw-bold);
        --upaep-selectpicker-opt-hover-bg: var(--ui-surface-hover, #dee2e6);
        --upaep-selectpicker-opt-hover-fw: var(--upaep-fw-normal);
        --upaep-selectpicker-counter-selected-bg: var(--ui-counter, var(--upaep-color-blue-primary));
        --upaep-selectpicker-counter-selected-color: var(--ui-on-counter, var(--upaep-color-white));

        .upaep__selectpicker-item {
            display: flex;
            justify-content: start;
            gap: .5rem;

            .upaep__checkbox {
                --upaep-checkbox-checked-color: var(--upaep-color-white);
                --upaep-checkbox-focus-bg: var(--ui-success, var(--upaep-color-success));
                --upaep-checkbox-active-bg: var(--ui-success, var(--upaep-color-success));
                --upaep-checkbox-checked-bg: var(--ui-success, var(--upaep-color-success));
            }
        }
    }

    &.__tag .upaep__selectpicker-tags {
        background: var(--upaep-selectpicker-tags-bg);
        width: 100%;
        border-radius: 10px;
        color: transparent;
        margin: .2rem 0;
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        &:has(.upaep__tag-group.is-inactive) {
            animation: fadeOut .3s forwards;
        }

        .upaep__tag-group.is-inactive,
        .upaep__tag-group:empty {
            animation: fadeOut .3s forwards;
        }
    }

    &.is-selected {
        .upaep__selectpicker-btn .upaep__btn {
            --upaep-btn-bg: var(--upaep-selectpicker-btn-selected-bg);
            --upaep-btn-color: var(--upaep-selectpicker-btn-selected-color);
            --upaep-btn-fz: var(--upaep-selectpicker-btn-selected-fz);
            --upaep-btn-cont-fz: var(--upaep-selectpicker-btn-selected-fz);
            --upaep-btn-fw: var(--upaep-selectpicker-btn-selected-fw);
            --upaep-btn-cont-fw: var(--upaep-selectpicker-btn-selected-fw);
            --upaep-btn-border-color: var(--upaep-selectpicker-btn-selected-border-color);
            --upaep-btn-hover-bg: var(--upaep-selectpicker-btn-selected-bg);
            --upaep-btn-hover-color: var(--upaep-selectpicker-btn-selected-color);
            --upaep-btn-hover-fz: var(--upaep-selectpicker-btn-selected-fz);
            --upaep-btn-hover-cont-fz: var(--upaep-selectpicker-btn-selected-fz);
            --upaep-btn-hover-fw: var(--upaep-selectpicker-btn-selected-fw);
            --upaep-btn-hover-cont-fw: var(--upaep-selectpicker-btn-selected-fw);
            --upaep-btn-hover-border-color: var(--upaep-selectpicker-btn-selected-border-color);
        }

        .upaep__selectpicker-counter {
            background: var(--upaep-selectpicker-counter-selected-bg);
            color: var(--upaep-selectpicker-counter-selected-color);
            font-size: var(--upaep-selectpicker-counter-selected-fz);
            font-weight: var(--upaep-selectpicker-counter-selected-fw);
        }
    }

    &.__clear-selection {
        &:has(.upaep__selectpicker-item.is-selected) {
            .upaep__selectpicker-btn .upaep__btn::after {
                display: none;
            }
        }

        &:not(:has(.upaep__selectpicker-item.is-selected)) {
            .upaep__selectpicker-clear {
                display: none;
            }
        }

        .upaep__selectpicker-clear {
            width: var(--upaep-selectpicker-clear-size);
            height: var(--upaep-selectpicker-clear-size);
            padding: var(--upaep-selectpicker-clear-padding);
            border-radius: 5px;
            position: absolute;
            inset: 50% 0 auto calc(100% - 45px);
            translate: 0 -50%;
            z-index: 10;
            align-items: center;
            justify-content: center;
        }

        .upaep__selectpicker-clear-mark {
            position: relative;

            &::after {
                content: "";
                position: absolute;
                display: block;
                inset: 50% auto auto 50%;
                transform: translate(-50%, -50%);
                border-radius: 50px;
                background-color: transparent;
                pointer-events: none;
                width: calc(16px + 5px);
                height: calc(16px + 5px);
            }

            &:hover::after {
                transition: background-color .2s cubic-bezier(.05, 0, 0, 1);
                background-color: var(--upaep-selectpicker-hover-bg-after);
            }
        }
    }

    .upaep__selectpicker-counter {
        width: var(--upaep-selectpicker-counter-size);
        height: var(--upaep-selectpicker-counter-size);
        padding: var(--upaep-selectpicker-counter-padding);
        border-radius: var(--upaep-selectpicker-counter-border-radius);
        background: var(--upaep-selectpicker-counter-bg);
        color: var(--upaep-selectpicker-counter-color);
        font-size: var(--upaep-selectpicker-counter-fz);
        font-weight: var(--upaep-selectpicker-counter-fw);
        display: flex;
        align-items: center;
        justify-content: center;
    }

}

.upaep__selectpicker.__tags-down {
    --upaep-selectpicker-tags-bg: transparent;

    .upaep__selectpicker-overlay {
        display: flex;
        flex-direction: column;

        .upaep__selectpicker-tags {
            order: 1;
        }

        .upaep__selectpicker-btn {
            order: 0;
        }

        .upaep__selectpicker-content {
            order: 2;
        }

        .upaep__tag-group {
            --upaep-taggroup-border-size: 0;
            --upaep-taggroup-border-bottom-size: 0;
        }
    }
}

.was-validated,
.__validated {
    .upaep__selectpicker {
        &:has(select:valid) {
            --upaep-selectpicker-boxshadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.25);

            .upaep__selectpicker-btn .upaep__btn {
                --upaep-btn-border-color: var(--ui-success, var(--upaep-color-success));
                --upaep-btn-hover-border-color: var(--ui-success, var(--upaep-color-success));
                background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjZThlYWVkIj48cGF0aCBkPSJtNDI0LTI5NiAyODItMjgyLTU2LTU2LTIyNiAyMjYtMTE0LTExNC01NiA1NiAxNzAgMTcwWm01NiAyMTZxLTgzIDAtMTU2LTMxLjVUMTk3LTE5N3EtNTQtNTQtODUuNS0xMjdUODAtNDgwcTAtODMgMzEuNS0xNTZUMTk3LTc2M3E1NC01NCAxMjctODUuNVQ0ODAtODgwcTgzIDAgMTU2IDMxLjVUNzYzLTc2M3E1NCA1NCA4NS41IDEyN1Q4ODAtNDgwcTAgODMtMzEuNSAxNTZUNzYzLTE5N3EtNTQgNTQtMTI3IDg1LjVUNDgwLTgwWm0wLTgwcTEzNCAwIDIyNy05M3Q5My0yMjdxMC0xMzQtOTMtMjI3dC0yMjctOTNxLTEzNCAwLTIyNyA5M3QtOTMgMjI3cTAgMTM0IDkzIDIyN3QyMjcgOTNabTAtMzIwWiIgZmlsbD0iIzI4YTc0NSIvPjwvc3ZnPg==);
                background-repeat: no-repeat;
                background-position: right calc(0.375em + 0.1875rem) center;
                background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);

                &::after {
                    margin: 0 1rem 0 0;
                }
            }
        }

        &:has(select:invalid) {
            --upaep-selectpicker-boxshadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);

            .upaep__selectpicker-btn .upaep__btn {
                --upaep-btn-border-color: var(--ui-danger, var(--upaep-color-error));
                --upaep-btn-hover-border-color: var(--ui-danger, var(--upaep-color-error));
                background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjZThlYWVkIj48cGF0aCBkPSJNNDgwLTI4MHExNyAwIDI4LjUtMTEuNVQ1MjAtMzIwcTAtMTctMTEuNS0yOC41VDQ4MC0zNjBxLTE3IDAtMjguNSAxMS41VDQ0MC0zMjBxMCAxNyAxMS41IDI4LjVUNDgwLTI4MFptLTQwLTE2MGg4MHYtMjQwaC04MHYyNDBabTQwIDM2MHEtODMgMC0xNTYtMzEuNVQxOTctMTk3cS01NC01NC04NS41LTEyN1Q4MC00ODBxMC04MyAzMS41LTE1NlQxOTctNzYzcTU0LTU0IDEyNy04NS41VDQ4MC04ODBxODMgMCAxNTYgMzEuNVQ3NjMtNzYzcTU0IDU0IDg1LjUgMTI3VDg4MC00ODBxMCA4My0zMS41IDE1NlQ3NjMtMTk3cS01NCA1NC0xMjcgODUuNVQ0ODAtODBabTAtODBxMTM0IDAgMjI3LTkzdDkzLTIyN3EwLTEzNC05My0yMjd0LTIyNy05M3EtMTM0IDAtMjI3IDkzdC05MyAyMjdxMCAxMzQgOTMgMjI3dDIyNyA5M1ptMC0zMjBaIiBmaWxsPSIjZGMzNTQ1Ii8+PC9zdmc+");
                background-repeat: no-repeat;
                background-position: right calc(0.375em + 0.1875rem) center;
                background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);

                &::after {
                    margin: 0 1rem 0 0;
                }
            }
        }
    }
}

.upaep__selectpicker:has(.upaep__select.__no-h-auto) .upaep__selectpicker-btn .upaep__btn {
    min-height: 2.65rem;
    max-height: 2.65rem;

    & span {
        min-height: 2.65rem;
        max-height: 2.65rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.upaep__selectpicker-btn .upaep__btn {
    --upaep-btn-width: 100%;
    --upaep-btn-border-radius: var(--upaep-selectpicker-btn-border-radius);
    --upaep-btn-border-size: var(--upaep-selectpicker-btn-border-size);
    --upaep-btn-hover-border-size: var(--upaep-selectpicker-btn-border-size);
    --upaep-btn-border-color: var(--upaep-selectpicker-btn-border-color);
    --upaep-btn-bg: var(--upaep-selectpicker-btn-bg);
    --upaep-btn-padding: var(--upaep-selectpicker-btn-padding);
    --upaep-btn-margin: 0;
    --upaep-btn-fw: var(--upaep-fw-bold);
    --upaep-btn-color: var(--upaep-selectpicker-btn-color);
    --upaep-btn-cont-fz: var(--upaep-selectpicker-btn-fz);
    --upaep-btn-cont-fw: var(--upaep-selectpicker-btn-fw);
    --upaep-btn-hover-bg: var(--upaep-selectpicker-btn-selected-bg);
    --upaep-btn-hover-color: var(--upaep-selectpicker-btn-selected-color);
    --upaep-btn-hover-fz: var(--upaep-selectpicker-btn-selected-fz);
    --upaep-btn-hover-cont-fz: var(--upaep-selectpicker-btn-selected-fz);
    --upaep-btn-hover-fw: var(--upaep-selectpicker-btn-selected-fw);
    --upaep-btn-hover-cont-fw: var(--upaep-selectpicker-btn-selected-fw);
    --upaep-btn-hover-border-color: var(--upaep-selectpicker-btn-selected-border-color);
    --upaep-btn-disabled-bg: var(--ui-surface-2, var(--upaep-color-background));
    --upaep-btn-disabled-border-color: var(--ui-surface-2, var(--upaep-color-background));
    --upaep-selectpicker-btn-mark-size: .45rem;
    --upaep-selectpicker-btn-mark-color: ;
    min-height: var(--upaep-selectpicker-btn-min-height);
    position: relative;

    & span {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: start;
        align-items: center;
        padding: 0 1rem 0 0;
        overflow: hidden;
        gap: .5rem;
    }

    &::after {
        display: inline-block;
        margin-left: 0.255em;
        vertical-align: 0.255em;
        content: "";
        border-top: var(--upaep-selectpicker-btn-mark-size) solid var(--upaep-selectpicker-btn-mark-color);
        border-right: var(--upaep-selectpicker-btn-mark-size) solid transparent;
        border-bottom: 0;
        border-left: var(--upaep-selectpicker-btn-mark-size) solid transparent;
        transition: all .5s;
    }
}

.upaep__selectpicker.__rounded {
    --upaep-selectpicker-proload-border-radius: 50px;
}

.upaep__selectpicker.__rounded .upaep__selectpicker-btn .upaep__btn {
    --upaep-btn-border-radius: 50px;
}

.upaep__selectpicker.is-show .upaep__selectpicker-btn .upaep__btn::after {
    transform: rotate(-180deg);
}

.upaep__selectpicker-item.__no-result,
.upaep__selectpicker-item.is-inactive {
    display: none !important;
}

.upaep__selectpicker-item.is-active {
    display: block !important;
}


.upaep__selectpicker .upaep__selectpicker-preload:not(.is-active) {
    display: none !important;
}

@keyframes spin_basic {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.upaep__selectpicker.__dark {
    --upaep-selectpicker-content-border-color: var(--upaep-color-border-grey);
    --upaep-selectpicker-content-bg: var(--colordark);
    --upaep-selectpicker-list-item-color: var(--upaep-color-white);
    --upaep-selectpicker-optg-color: var(--upaep-color-white);
    --upaep-selectpicker-optg-bg: var(--colordark);
    --upaep-selectpicker-opt-color: var(--upaep-color-white);
    --upaep-selectpicker-opt-bg: var(--colordark);
    --upaep-selectpicker-opt-selected-color: var(--upaep-color-white);
    --upaep-selectpicker-opt-selected-bg: var(--upaep-color-grey);
    --upaep-selectpicker-opt-hover-color: var(--upaep-color-dark-grey);
    --upaep-selectpicker-opt-hover-bg: var(--ui-surface-hover, var(--colorgrey7));
    --upaep-selectpicker-opt-disabled-color: var(--upaep-color-dark-grey);
    --upaep-selectpicker-opt-disabled-bg: var(--ui-surface-hover, var(--colorgrey7));
    --upaep-selectpicker-header-fz: var(--upaep-fz14);
    --upaep-selectpicker-header-fw: var(--upaep-fw-bold);
    --upaep-selectpicker-header-color: var(--upaep-color-white);
    --upaep-selectpicker-tags-bg: var(--colordark);
    --upaep-selectpicker-proload-bg: var(--colordark);
    --upaep-selectpicker-proload-text-color: var(--upaep-color-white);
    --upaep-selectpicker-btn-bg: var(--colordark);
    --upaep-selectpicker-btn-color: var(--upaep-color-white);
    --upaep-selectpicker-btn-border-color: var(--upaep-color-border-grey);
    --upaep-selectpicker-btn-hover-bg: var(--upaep-selectpicker-btn-hover-bg);
    --upaep-selectpicker-btn-hover-color: var(--upaep-selectpicker-btn-hover-color);
    --upaep-selectpicker-btn-hover-border-color: var(--upaep-color-dark-grey);
    --upaep-selectpicker-btn-selected-bg: var(--colordark);
    --upaep-selectpicker-btn-selected-color: var(--upaep-color-white);
    --upaep-selectpicker-hover-bg-after: rgba(255, 255, 255, 0.1);
}

.upaep__selectpicker.__black {
    --upaep-selectpicker-content-border-color: var(--upaep-color-border-grey);
    --upaep-selectpicker-content-bg: var(--upaep-color-black);
    --upaep-selectpicker-list-item-color: var(--upaep-color-white);
    --upaep-selectpicker-optg-color: var(--upaep-color-white);
    --upaep-selectpicker-optg-bg: var(--upaep-color-black);
    --upaep-selectpicker-opt-color: var(--upaep-color-white);
    --upaep-selectpicker-opt-bg: var(--upaep-color-black);
    --upaep-selectpicker-opt-selected-color: var(--upaep-color-white);
    --upaep-selectpicker-opt-selected-bg: var(--upaep-color-grey);
    --upaep-selectpicker-opt-hover-color: var(--upaep-color-dark-grey);
    --upaep-selectpicker-opt-hover-bg: var(--ui-surface-hover, var(--colorgrey7));
    --upaep-selectpicker-opt-disabled-color: var(--upaep-color-dark-grey);
    --upaep-selectpicker-opt-disabled-bg: var(--ui-surface-hover, var(--colorgrey7));
    --upaep-selectpicker-header-fz: var(--upaep-fz14);
    --upaep-selectpicker-header-fw: var(--upaep-fw-bold);
    --upaep-selectpicker-header-color: var(--upaep-color-white);
    --upaep-selectpicker-tags-bg: var(--upaep-color-black);
    --upaep-selectpicker-proload-bg: var(--upaep-color-black);
    --upaep-selectpicker-proload-text-color: var(--upaep-color-white);
    --upaep-selectpicker-btn-bg: var(--upaep-color-black);
    --upaep-selectpicker-btn-color: var(--upaep-color-white);
    --upaep-selectpicker-btn-border-color: var(--upaep-color-border-grey);
    --upaep-selectpicker-btn-hover-bg: var(--upaep-color-black);
    --upaep-selectpicker-btn-hover-color: var(--upaep-color-white);
    --upaep-selectpicker-btn-hover-border-color: var(--upaep-color-dark-grey);
    --upaep-selectpicker-btn-selected-bg: var(--upaep-color-black);
    --upaep-selectpicker-btn-selected-color: var(--upaep-color-white);
    --upaep-selectpicker-hover-bg-after: rgba(255, 255, 255, 0.1);
}

/*? ------ autocomplete ------ */
.upaep__autocomplete {
    --upaep-autocomplete-width: 100%;
    --upaep-autocomplete-height: auto;
    --upaep-autocomplete-margin: 0;
    --upaep-autocomplete-padding: 0;
    --upaep-autocomplete-boxshadow: 0 0 0 0.25rem var(--ui-control-ring, rgba(82, 86, 90, 0.25));
    --upaep-autocomplete-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuNC4yIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDIzIEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNNDE2IDIwOGMwIDQ1LjktMTQuOSA4OC4zLTQwIDEyMi43TDUwMi42IDQ1Ny40YzEyLjUgMTIuNSAxMi41IDMyLjggMCA0NS4zcy0zMi44IDEyLjUtNDUuMyAwTDMzMC43IDM3NmMtMzQuNCAyNS4yLTc2LjggNDAtMTIyLjcgNDBDOTMuMSA0MTYgMCAzMjIuOSAwIDIwOFM5My4xIDAgMjA4IDBTNDE2IDkzLjEgNDE2IDIwOHpNMjA4IDM1MmExNDQgMTQ0IDAgMSAwIDAtMjg4IDE0NCAxNDQgMCAxIDAgMCAyODh6IiBmaWxsPSIjZTMwOTIxIi8+PC9zdmc+");
    --upaep-autocomplete-border-radius: 10px;
    --upaep-autocomplete-content-width: 100%;
    --upaep-autocomplete-content-height: auto;
    --upaep-autocomplete-content-margin: 5px 0;
    --upaep-autocomplete-content-padding: .5rem;
    --upaep-autocomplete-content-border-size: 2px;
    --upaep-autocomplete-content-border-style: solid;
    --upaep-autocomplete-content-border-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-autocomplete-content-border-radius: 10px;
    --upaep-autocomplete-content-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-autocomplete-list-width: 100%;
    --upaep-autocomplete-list-height: auto;
    --upaep-autocomplete-list-maxheight: 250px;
    --upaep-autocomplete-list-padding: .5rem 0;
    --upaep-autocomplete-list-margin: 0;
    --upaep-autocomplete-list-item-width: 100%;
    --upaep-autocomplete-list-item-height: auto;
    --upaep-autocomplete-list-item-padding: .5rem 1rem;
    --upaep-autocomplete-list-item-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-autocomplete-optg-fz: var(--upaep-fz14);
    --upaep-autocomplete-optg-fw: var(--upaep-fw-medium);
    --upaep-autocomplete-optg-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-autocomplete-optg-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-autocomplete-optg-padding: .5rem 1rem;
    --upaep-autocomplete-opt-fz: var(--upaep-fz16);
    --upaep-autocomplete-opt-fw: var(--upaep-fw-medium);
    --upaep-autocomplete-opt-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-autocomplete-opt-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-autocomplete-opt-padding: .5rem 1rem;
    --upaep-autocomplete-opt-selected-padding: .5rem 1rem;
    --upaep-autocomplete-opt-selected-fz: var(--upaep-fz16);
    --upaep-autocomplete-opt-selected-fw: var(--upaep-fw-medium);
    --upaep-autocomplete-opt-selected-color: var(--upaep-color-white);
    --upaep-autocomplete-opt-selected-bg: var(--upaep-color-grey);
    --upaep-autocomplete-opt-hover-padding: .5rem 1rem;
    --upaep-autocomplete-opt-hover-fz: var(--upaep-fz16);
    --upaep-autocomplete-opt-hover-fw: var(--upaep-fw-medium);
    --upaep-autocomplete-opt-hover-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-autocomplete-opt-hover-bg: var(--ui-surface-hover, var(--colorgrey7));
    --upaep-autocomplete-opt-disabled-padding: .5rem 1rem;
    --upaep-autocomplete-opt-disabled-fz: var(--upaep-fz16);
    --upaep-autocomplete-opt-disabled-fw: var(--upaep-fw-medium);
    --upaep-autocomplete-opt-disabled-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-autocomplete-opt-disabled-bg: var(--ui-surface-hover, var(--colorgrey7));
    --upaep-autocomplete-header-fz: var(--upaep-fz14);
    --upaep-autocomplete-header-fw: var(--upaep-fw-bold);
    --upaep-autocomplete-header-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-autocomplete-tags-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-autocomplete-proload-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-autocomplete-proload-border-radius: 10px;
    --upaep-autocomplete-proload-padding: .5rem;
    --upaep-autocomplete-proload-text-fz: var(--upaep-fz16);
    --upaep-autocomplete-proload-text-fw: var(--upaep-fw-medium);
    --upaep-autocomplete-proload-text-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-autocomplete-proload-spinner-width: 2rem;
    --upaep-autocomplete-proload-spinner-height: 2rem;
    --upaep-autocomplete-proload-spinner-color-primary: var(--ui-accent, var(--upaep-color-red));
    --upaep-autocomplete-proload-spinner-color-secondary: var(--upaep-color-dark-grey);
    --upaep-autocomplete-notify-bg: var(--ui-surface-hover, var(--colorgrey7));
    --upaep-autocomplete-notify-fz: var(--upaep-fz16);
    --upaep-autocomplete-notify-fw: var(--upaep-fw-bold);
    --upaep-autocomplete-notify-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-autocomplete-counter-size: 25px;
    --upaep-autocomplete-counter-padding: .5rem;
    --upaep-autocomplete-counter-border-radius: var(--upaep-autocomplete-counter-size);
    --upaep-autocomplete-counter-bg: ;
    --upaep-autocomplete-counter-color: ;
    --upaep-autocomplete-counter-fz: ;
    --upaep-autocomplete-counter-fw: ;
    --upaep-autocomplete-counter-selected-bg: ;
    --upaep-autocomplete-counter-selected-color: ;
    --upaep-autocomplete-counter-selected-fz: ;
    --upaep-autocomplete-counter-selected-fw: ;
    --upaep-autocomplete-hover-bg-after: rgba(0, 0, 0, .1);
    width: var(--upaep-autocomplete-width);
    height: var(--upaep-autocomplete-height);
    margin: var(--upaep-autocomplete-margin);
    padding: var(--upaep-autocomplete-padding);
    border-radius: var(--upaep-autocomplete-border-radius);
    min-height: 2.65rem;
    position: relative;

    &:hover .upaep__autocomplete-btn .upaep__btn,
    &:hover .upaep__autocomplete-btn .upaep__btn:focus {
        box-shadow: var(--upaep-autocomplete-boxshadow);
    }

    &.__disabled {
        opacity: .5;
        pointer-events: none;
    }

    &:not(.is-edit) {
        .upaep__autocomplete-input {
            /* animation: fadeOut .25s forwards; */
            opacity: 0;
            display: none;
        }
    }

    &.is-edit {
        .upaep__autocomplete-btn .upaep__btn {
            /* animation: fadeOut .25s forwards; */
            opacity: 0;
            display: none;
        }
    }

    .upaep__autocomplete-input:hover:not(:disabled):not([readonly]),
    .upaep__autocomplete-input:focus:not(:disabled):not([readonly]),
    .upaep__autocomplete-input {
        width: 100%;
        height: 2.75rem;
        margin: 0;
        padding: .35rem 2.5rem .35rem .75rem;
        background: var(--upaep-autocomplete-icon) calc(100% - 20px) center transparent no-repeat;
        background-color: var(--ui-surface, var(--upaep-color-white));
        background-size: 22px;
        border-radius: 50px;
        inset: 0;
    }

    &:has(.upaep__input:disabled) {
        opacity: .5;
        pointer-events: none;

        .upaep__autocomplete-btn .upaep__btn {
            --upaep-btn-bg: var(--upaep-color-background);
        }
    }

    &:has(.upaep__input.__rounded) {
        --upaep-autocomplete-proload-border-radius: 50px;

        .upaep__autocomplete-btn .upaep__btn {
            --upaep-btn-border-radius: 50px;
        }
    }

    &>input {
        display: none;
    }

    & small {
        margin: 0 .5rem;
        opacity: .8;
    }

    & .upaep__autocomplete-overlay {
        width: 100%;
        height: auto;
        border-radius: 10px;
    }

    & .upaep__autocomplete-btn {
        width: 100%;
        height: auto;
        border-radius: 10px;
        position: relative;

        .upaep__btn {
            /* position: absolute; */
            inset: 0;
        }
    }

    &:not(.is-show) .upaep__btn .__close {
        display: none;
    }

    &.is-show {
        .upaep__btn .__open {
            display: none;
        }

        .upaep__autocomplete-btn .upaep__btn {
            animation: fadeOut .3s forwards;
        }
    }

    & .upaep__autocomplete-content {
        width: var(--upaep-autocomplete-content-width);
        height: var(--upaep-autocomplete-content-height);
        margin: var(--upaep-autocomplete-content-margin);
        padding: var(--upaep-autocomplete-content-padding);
        border: var(--upaep-autocomplete-content-border-size) var(--upaep-autocomplete-content-border-style) var(--upaep-autocomplete-content-border-color);
        border-radius: var(--upaep-autocomplete-content-border-radius);
        background: var(--upaep-autocomplete-content-bg);
        overflow: hidden;
        position: absolute;
        z-index: var(--upaep-zindex-autocomplete);
        transition: height .5s;
        animation: a_fadeIn .5s forwards;

        & .upaep__autocomplete-header {
            width: 100%;
            min-height: 40px;
            height: auto;
            border-bottom: 1px solid var(--ui-border, var(--upaep-color-border-grey));
            display: flex;
            align-items: center;
            justify-content: space-between;

            &>* {
                font-size: var(--upaep-autocomplete-header-fz);
                font-weight: var(--upaep-autocomplete-header-fw);
                color: var(--upaep-autocomplete-header-color);
            }

            & span {
                padding: 0 1rem;
            }

            & i {
                padding: 0 1rem;
                cursor: pointer;
            }
        }

        .upaep__autocomplete-header-mark {
            position: relative;

            &::after {
                content: "";
                position: absolute;
                display: block;
                inset: 50% auto auto 50%;
                transform: translate(-50%, -50%);
                border-radius: 50px;
                background-color: transparent;
                pointer-events: none;
                width: calc(var(--upaep-autocomplete-header-fz) + 5px);
                height: calc(var(--upaep-autocomplete-header-fz) + 5px);
            }

            &:hover::after {
                transition: background-color .2s cubic-bezier(.05, 0, 0, 1);
                background-color: var(--upaep-autocomplete-hover-bg-after);
            }
        }

        & .upaep__autocomplete-search {
            width: 100%;
            padding: .5rem;
            position: relative;

            & i {
                color: #191919;
                position: absolute;
                width: 20px;
                height: 20px;
                left: 20px;
                top: 50%;
                transform: translateY(-50%);
            }

            & input::placeholder {
                color: var(--ui-text-strong, var(--upaep-color-black)) !important;
                font-size: var(--upaep-fz16) !important;
            }

            & .upaep__input.__autocomplete {
                --upaep-input-margin: 0;
                --upaep-input-border-radius: 50px;
                --upaep-input-padding: .35rem 1.5rem .35rem 2rem;
                --upaep-input-focus-bg: var(--ui-surface, var(--upaep-color-white));
            }
        }

        & .upaep__autocomplete-selectall {
            width: 100%;
            display: flex;
            padding: .5rem;
            gap: 5px;

            & .upaep__btn.__selectedall {
                --upaep-btn-width: 100%;
                --upaep-btn-height: 100%;
                --upaep-btn-border-radius: 10px;
                --upaep-btn-border-color: var(--ui-border, var(--upaep-color-border-grey));
                --upaep-btn-bg: var(--ui-surface, var(--upaep-color-white));
                --upaep-btn-margin: 0;
                min-height: 2rem;
                text-align: center;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .upaep__label {
                color: var(--upaep-autocomplete-header-color);
            }
        }

        & .upaep__autocomplete-list {
            width: var(--upaep-autocomplete-list-width);
            height: var(--upaep-autocomplete-list-height);
            max-height: var(--upaep-autocomplete-list-maxheight);
            padding: var(--upaep-autocomplete-list-padding);
            margin: var(--upaep-autocomplete-list-margin);
            list-style: none;
            overflow-y: auto;
            scrollbar-color: var(--upaep-color-border-grey) tansparent;
            scrollbar-width: thin;

            .upaep__autocomplete-items {
                padding: 0 0 0 .25rem;

                .upaep__autocomplete-label {
                    font-size: var(--upaep-autocomplete-optg-fz);
                    font-weight: var(--upaep-autocomplete-optg-fw);
                    color: var(--upaep-autocomplete-optg-color);
                    background: var(--upaep-autocomplete-optg-bg);
                    padding: var(--upaep-autocomplete-optg-padding);
                    border-bottom: 1px solid var(--ui-border, var(--upaep-color-border-grey));
                    cursor: default;

                    &.is-inactive {
                        display: none;
                    }

                    &.is-disabled {
                        opacity: .5;
                    }
                }
            }

            & .upaep__autocomplete-item {
                width: var(--upaep-autocomplete-list-item-width);
                height: var(--upaep-autocomplete-list-item-height);
                padding: var(--upaep-autocomplete-list-item-padding);
                color: var(--upaep-autocomplete-list-item-color);
                min-height: 35px;
                display: flex;
                align-items: center;
                word-wrap: break-word;
                word-break: break-word;

                &.optg {
                    font-size: var(--upaep-autocomplete-optg-fz);
                    font-weight: var(--upaep-autocomplete-optg-fw);
                    color: var(--upaep-autocomplete-optg-color);
                    background: var(--upaep-autocomplete-optg-bg);
                    padding: var(--upaep-autocomplete-optg-padding);
                    border-bottom: 1px solid var(--ui-border, var(--upaep-color-border-grey));
                    cursor: default;
                }

                &.opt {
                    font-size: var(--upaep-autocomplete-opt-fz);
                    font-weight: var(--upaep-autocomplete-opt-fw);
                    color: var(--upaep-autocomplete-opt-color);
                    background: var(--upaep-autocomplete-opt-bg);
                    padding: var(--upaep-autocomplete-opt-padding);
                    cursor: pointer;

                    &.is-selected {
                        font-size: var(--upaep-autocomplete-opt-selected-fz);
                        font-weight: var(--upaep-autocomplete-opt-selected-fw);
                        color: var(--upaep-autocomplete-opt-selected-color);
                        background: var(--upaep-autocomplete-opt-selected-bg);
                        border-bottom: 1px solid var(--upaep-gradient-white);
                    }

                    &.is-preselect:not(.is-selected):not(.is-disabled),
                    &:hover:not(.is-selected):not(.is-disabled) {
                        font-size: var(--upaep-autocomplete-opt-hover-fz);
                        font-weight: var(--upaep-autocomplete-opt-hover-fw);
                        color: var(--upaep-autocomplete-opt-hover-color);
                        background: var(--upaep-autocomplete-opt-hover-bg);
                    }

                    &.is-disabled {
                        font-size: var(--upaep-autocomplete-opt-disabled-fz);
                        font-weight: var(--upaep-autocomplete-opt-disabled-fw);
                        color: var(--upaep-autocomplete-opt-disabled-color);
                        background: var(--upaep-autocomplete-opt-disabled-bg);
                        border-bottom: 1px solid var(--upaep-gradient-white);
                        opacity: .5;
                        cursor: not-allowed;
                    }
                }
            }
        }

        .upaep__autocomplete-preload {
            border: none;
        }

        & .upaep__autocomplete-notify {
            background: var(--upaep-autocomplete-notify-bg);
            font-size: var(--upaep-autocomplete-notify-fz);
            font-weight: var(--upaep-autocomplete-notify-fw);
            color: var(--upaep-autocomplete-notify-color);
            min-height: 2.65rem;
            width: 100%;
            text-align: center;
            position: absolute;
            inset: 50% auto auto 50%;
            transform: translate(-50%);
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }

    & .upaep__autocomplete-preload {
        background: var(--upaep-autocomplete-proload-bg);
        border: 2px solid var(--ui-border, var(--upaep-color-border-grey));
        border-radius: var(--upaep-autocomplete-proload-border-radius);
        padding: var(--upaep-autocomplete-proload-padding);
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        gap: 10px;
        z-index: 10;
        cursor: default;

        & .spin_basic:before {
            height: var(--upaep-autocomplete-proload-spinner-width);
            width: var(--upaep-autocomplete-proload-spinner-height);
            border: 6px var(--upaep-autocomplete-proload-spinner-color-primary) solid;
            border-left-color: var(--upaep-autocomplete-proload-spinner-color-secondary);
            content: '';
            display: block;
            -webkit-animation: spin_basic .5s infinite linear;
            animation: spin_basic .5s infinite linear;
            border-radius: 100%;
        }

        & .upaep__autocomplete-spintext {
            font-size: var(--upaep-autocomplete-proload-text-fz);
            font-weight: var(--upaep-autocomplete-proload-text-fw);
            color: var(--upaep-autocomplete-proload-text-color);
        }
    }

    &:not(.is-show) .upaep__autocomplete-content {
        display: none;
    }

    &.__mark .upaep__autocomplete-item {
        display: flex;
        justify-content: space-between;

        &:not(.is-selected) .__mark {
            display: none;
        }
    }

    &.__tag .upaep__autocomplete-tags {
        background: var(--upaep-autocomplete-tags-bg);
        width: 100%;
        border-radius: 10px;
        color: transparent;
        margin: .2rem 0;
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        &:has(.upaep__tag-group.is-inactive) {
            animation: fadeOut .3s forwards;
        }

        .upaep__tag-group.is-inactive,
        .upaep__tag-group:empty {
            animation: fadeOut .3s forwards;
        }
    }

    &.__clear-selection {
        &.is-selected {
            .upaep__autocomplete-btn .upaep__btn::after {
                display: none;
            }
        }

        &:not(.is-selected) {
            .upaep__autocomplete-clear {
                display: none;
            }
        }

        .upaep__autocomplete-clear {
            width: 30px;
            height: 30px;
            padding: .5rem;
            border-radius: 5px;
            position: absolute;
            inset: 50% 20px auto calc(100% - 80px);
            translate: 0 -50%;
            z-index: 10;
            align-items: center;
            justify-content: center;
        }

        .upaep__autocomplete-clear-mark {
            position: relative;

            &::after {
                content: "";
                position: absolute;
                display: block;
                inset: 50% auto auto 50%;
                transform: translate(-50%, -50%);
                border-radius: 50px;
                background-color: transparent;
                pointer-events: none;
                width: calc(16px + 5px);
                height: calc(16px + 5px);
            }

            &:hover::after {
                transition: background-color .2s cubic-bezier(.05, 0, 0, 1);
                background-color: var(--upaep-autocomplete-hover-bg-after);
            }
        }
    }

    .upaep__autocomplete-counter {
        width: var(--upaep-autocomplete-counter-size);
        height: var(--upaep-autocomplete-counter-size);
        padding: var(--upaep-autocomplete-counter-padding);
        border-radius: var(--upaep-autocomplete-counter-border-radius);
        background: var(--upaep-autocomplete-counter-bg);
        color: var(--upaep-autocomplete-counter-color);
        font-size: var(--upaep-autocomplete-counter-fz);
        font-weight: var(--upaep-autocomplete-counter-fw);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    &.is-selected {
        .upaep__autocomplete-counter {
            background: var(--upaep-autocomplete-counter-selected-bg);
            color: var(--upaep-autocomplete-counter-selected-color);
            font-size: var(--upaep-autocomplete-counter-selected-fz);
            font-weight: var(--upaep-autocomplete-counter-selected-fw);
        }
    }

    &:has(.upaep__input.__search) {
        .upaep__btn {
            background: var(--upaep-autocomplete-icon) calc(100% - 20px) center transparent no-repeat;
            background-color: var(--ui-surface, var(--upaep-color-white));
            background-size: 22px;

            &::after {
                display: none;
            }
        }
    }
}

.upaep__autocomplete.__tags-down {
    --upaep-autocomplete-tags-bg: transparent;

    .upaep__autocomplete-overlay {
        display: flex;
        flex-direction: column;

        .upaep__autocomplete-tags {
            order: 1;
        }

        .upaep__autocomplete-btn {
            order: 0;
        }

        .upaep__autocomplete-content {
            order: 2;
        }

        .upaep__tag-group {
            --upaep-taggroup-border-size: 0;
            --upaep-taggroup-border-bottom-size: 0;
        }
    }
}

.was-validated,
.__validated {
    .upaep__autocomplete {
        &:has(>input:valid) {
            --upaep-autocomplete-boxshadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.25);

            .upaep__autocomplete-btn .upaep__btn {
                --upaep-btn-border-color: var(--ui-success, var(--upaep-color-success));
            }
        }

        &:has(>input:invalid) {
            --upaep-autocomplete-boxshadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);

            .upaep__autocomplete-btn .upaep__btn {
                --upaep-btn-border-color: var(--ui-danger, var(--upaep-color-error));
            }
        }
    }
}

.upaep__autocomplete-btn .upaep__btn {
    --upaep-btn-width: 100%;
    --upaep-btn-height: 100%;
    --upaep-btn-border-radius: 10px;
    --upaep-btn-border-size: 2px;
    --upaep-btn-border-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-btn-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-btn-padding: 0 1rem 0 1rem;
    --upaep-btn-margin: 0;
    --upaep-btn-fw: var(--upaep-fw-regular);
    --upaep-btn-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-btn-cont-fw: var(--upaep-fw-regular);
    --upaep-btn-cont-fz: var(--upaep-fz14);
    --upaep-btn-hover-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-btn-hover-border-size: 2px;
    --upaep-btn-hover-border-color: var(--upaep-color-dark-grey);
    --upaep-btn-hover-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-btn-disabled-bg: var(--ui-surface-2, var(--upaep-color-background));
    --upaep-btn-disabled-border-color: var(--ui-surface-2, var(--upaep-color-background));
    --upaep-autocomplete-btn-mark-size: .45rem;
    --upaep-autocomplete-btn-mark-color: ;
    min-height: 2.45rem;
    position: relative;

    & span {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: start;
        align-items: center;
        padding: 0 1rem 0 .5rem;
        overflow: hidden;
        text-align: start;
    }

    &::after {
        display: inline-block;
        margin-left: 0.255em;
        vertical-align: 0.255em;
        content: "";
        border-top: var(--upaep-autocomplete-btn-mark-size) solid var(--upaep-autocomplete-btn-mark-color);
        border-right: var(--upaep-autocomplete-btn-mark-size) solid transparent;
        border-bottom: 0;
        border-left: var(--upaep-autocomplete-btn-mark-size) solid transparent;
        transition: all .5s;
    }
}

.upaep__autocomplete.__dark {
    --upaep-autocomplete-content-border-color: var(--upaep-color-border-grey);
    --upaep-autocomplete-content-bg: var(--colordark);
    --upaep-autocomplete-list-item-color: var(--upaep-color-white);
    --upaep-autocomplete-optg-color: var(--upaep-color-white);
    --upaep-autocomplete-optg-bg: var(--colordark);
    --upaep-autocomplete-opt-color: var(--upaep-color-white);
    --upaep-autocomplete-opt-bg: var(--colordark);
    --upaep-autocomplete-opt-selected-color: var(--upaep-color-white);
    --upaep-autocomplete-opt-selected-bg: var(--upaep-color-grey);
    --upaep-autocomplete-opt-hover-color: var(--upaep-color-dark-grey);
    --upaep-autocomplete-opt-hover-bg: var(--ui-surface-hover, var(--colorgrey7));
    --upaep-autocomplete-opt-disabled-color: var(--upaep-color-dark-grey);
    --upaep-autocomplete-opt-disabled-bg: var(--ui-surface-hover, var(--colorgrey7));
    --upaep-autocomplete-header-fz: var(--upaep-fz14);
    --upaep-autocomplete-header-fw: var(--upaep-fw-bold);
    --upaep-autocomplete-header-color: var(--upaep-color-white);
    --upaep-autocomplete-tags-bg: var(--colordark);
    --upaep-autocomplete-proload-bg: var(--colordark);
    --upaep-autocomplete-proload-text-color: var(--upaep-color-white);
    --upaep-autocomplete-hover-bg-after: rgba(255, 255, 255, .1);
}

.upaep__autocomplete.__dark .upaep__autocomplete-btn .upaep__btn {
    --upaep-btn-border-color: var(--upaep-color-border-grey);
    --upaep-btn-bg: var(--colordark);
    --upaep-btn-color: var(--upaep-color-white);
    --upaep-btn-hover-bg: var(--colordark);
    --upaep-btn-hover-border-color: var(--upaep-color-dark-grey);
    --upaep-btn-hover-color: var(--upaep-color-white);
}

.upaep__autocomplete.__black {
    --upaep-autocomplete-content-border-color: var(--upaep-color-border-grey);
    --upaep-autocomplete-content-bg: var(--upaep-color-black);
    --upaep-autocomplete-list-item-color: var(--upaep-color-white);
    --upaep-autocomplete-optg-color: var(--upaep-color-white);
    --upaep-autocomplete-optg-bg: var(--upaep-color-black);
    --upaep-autocomplete-opt-color: var(--upaep-color-white);
    --upaep-autocomplete-opt-bg: var(--upaep-color-black);
    --upaep-autocomplete-opt-selected-color: var(--upaep-color-white);
    --upaep-autocomplete-opt-selected-bg: var(--upaep-color-grey);
    --upaep-autocomplete-opt-hover-color: var(--upaep-color-dark-grey);
    --upaep-autocomplete-opt-hover-bg: var(--ui-surface-hover, var(--colorgrey7));
    --upaep-autocomplete-opt-disabled-color: var(--upaep-color-dark-grey);
    --upaep-autocomplete-opt-disabled-bg: var(--ui-surface-hover, var(--colorgrey7));
    --upaep-autocomplete-header-fz: var(--upaep-fz14);
    --upaep-autocomplete-header-fw: var(--upaep-fw-bold);
    --upaep-autocomplete-header-color: var(--upaep-color-white);
    --upaep-autocomplete-tags-bg: var(--upaep-color-black);
    --upaep-autocomplete-proload-bg: var(--upaep-color-black);
    --upaep-autocomplete-proload-text-color: var(--upaep-color-white);
    --upaep-autocomplete-hover-bg-after: rgba(255, 255, 255, .1);
}

.upaep__autocomplete.__black .upaep__autocomplete-btn .upaep__btn {
    --upaep-btn-border-color: var(--upaep-color-border-grey);
    --upaep-btn-bg: var(--upaep-color-black);
    --upaep-btn-color: var(--upaep-color-white);
    --upaep-btn-hover-bg: var(--upaep-color-black);
    --upaep-btn-hover-border-color: var(--upaep-color-dark-grey);
    --upaep-btn-hover-color: var(--upaep-color-white);
}

/*? ------ Signature ------ */
.upaep__signature {
    --upaep-signature-width: 100%;
    --upaep-signature-height: auto;
    --upaep-signature-content-width: 100%;
    --upaep-signature-content-height: auto;
    --upaep-signature-canvas-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-signature-canvas-border-size: 1px;
    --upaep-signature-canvas-border-style: solid;
    --upaep-signature-canvas-border-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-signature-canvas-border-radius: 10px;
    --upaep-signature-canvas-margin: 1rem 0;
    --upaep-signature-preview-width: 100%;
    --upaep-signature-preview-height: auto;
    --upaep-signature-preview-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-signature-preview-border-size: 1px;
    --upaep-signature-preview-border-style: solid;
    --upaep-signature-preview-border-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-signature-preview-border-radius: 10px;
    width: var(--upaep-signature-width);
    height: var(--upaep-signature-height);

    & .upaep__signature-content {
        width: var(--upaep-signature-content-width);
        height: var(--upaep-signature-content-height);
    }

    & .upaep__signature-canvas {
        display: flex;
        justify-content: center;
        align-items: center;

        & .upaep__canvas {
            background: var(--upaep-signature-canvas-bg);
            border: var(--upaep-signature-canvas-border-size) var(--upaep-signature-canvas-border-style) var(--upaep-signature-canvas-border-color);
            border-radius: var(--upaep-signature-canvas-border-radius);
            margin: var(--upaep-signature-canvas-margin);

            &:hover {
                cursor: crosshair;
            }
        }
    }

    & .upaep__signature-group {
        margin: 1rem 0 0 0;
    }

    & .upaep__signature-buttons {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

    & .upaep__signature-preview {
        width: var(--upaep-signature-preview-width);
        height: var(--upaep-signature-preview-height);

        & .upaep__signature-preview-content {
            background: var(--upaep-signature-preview-bg);
            width: 100%;
            min-height: 200px;
            display: flex;
            justify-content: center;

            & img {
                width: 100%;
                max-width: 610px;
                border: var(--upaep-signature-preview-border-size) var(--upaep-signature-preview-border-style) var(--upaep-signature-preview-border-color);
                border-radius: var(--upaep-signature-preview-border-radius);
            }
        }
    }
}

.upaep__signature:not(.is-preview) .upaep__signature-preview {
    display: none;
}

.upaep__signature:not(.is-preview) .upaep__btn.__signature.__reuse,
.upaep__signature:not(.is-preview) .upaep__btn.__signature.__resignature {
    display: none;
}

.upaep__signature.is-preview .upaep__signature-canvas {
    display: none;
}

.upaep__signature.is-preview .upaep__btn.__signature.__clear,
.upaep__signature.is-preview .upaep__btn.__signature.__save {
    display: none;
}

.upaep__signature.is-resignature .upaep__btn.__signature.__clear,
.upaep__signature.is-resignature .upaep__btn.__signature.__save,
.upaep__signature.is-resignature .upaep__btn.__signature.__reuse {
    display: block;
}

.upaep__signature.is-resignature .upaep__btn.__signature.__resignature {
    display: none;
}

.upaep__signature.is-saved .upaep__btn.__signature.__clear,
.upaep__signature.is-saved .upaep__btn.__signature.__save,
.upaep__signature.is-saved .upaep__btn.__signature.__reuse,
.upaep__signature.is-saved .upaep__btn.__signature.__resignature {
    display: none;
}

.upaep__signature .__color-range {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 1rem 0;
}

.upaep__signature .__range-signature {
    accent-color: var(--upaep-color-blue-primary);
}

/*? ------ Collapse ------ */
.upaep__collapse:not(.is-show) {
    display: none;
}

.is-collapsing {
    height: 0;
    overflow: hidden;
    transition: height 0.35s ease;

    &.__horizontal {
        width: 0;
        height: auto;
        transition: width 0.35s ease;
    }
}

.upaep__card.__ejemplo {
    --upaep-card-border-size: 1px;
    --upaep-card-border-color: var(--upaep-color-border-grey);
    --upaep-card-margin: 0;
    --upaep-card-width: 100%;
}

/*? ------ Skeleton ------ */
.upaep__skeleton {
    --upaep-skeleton-width: auto;
    --upaep-skeleton-height: auto;
    --upaep-skeleton-margin: 0;
    --upaep-skeleton-padding: 0;
    --upaep-skeleton-border-radius: inherit;
    --upaep-skeleton-bg: linear-gradient(90deg, hsl(0, 0%, 80%) 0px, hsl(0, 0%, 90%) 40px, hsl(0, 0%, 80%) 80px);
    --upaep-skeleton-animation: move;
    --upaep-skeleton-animation-duration: 2s;
    --upaep-skeleton-bg-image: ;
    width: var(--upaep-skeleton-width);
    height: var(--upaep-skeleton-height);
    margin: var(--upaep-skeleton-margin);
    padding: var(--upaep-skeleton-padding);
    background: var(--upaep-skeleton-bg);
    animation: var(--upaep-skeleton-animation) var(--upaep-skeleton-animation-duration) infinite;
    background-size: 300%;
    background-position: 100% 0;
    border-radius: var(--upaep-skeleton-border-radius);
    position: relative;

    &:not(.is-active) {
        display: none;
    }

    &::before {
        content: '';
        position: absolute;
        inset: 0;
        background: var(--upaep-skeleton-bg-image) no-repeat center center;
        background-size: 100px 60px;
    }

    &.__icon-img {
        --upaep-skeleton-bg-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTYiIHdpZHRoPSIxNiIgdmlld0JveD0iMCAwIDUxMiA1MTIiPjwhLS0hRm9udCBBd2Vzb21lIEZyZWUgNi41LjEgYnkgQGZvbnRhd2Vzb21lIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20gTGljZW5zZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tL2xpY2Vuc2UvZnJlZSBDb3B5cmlnaHQgMjAyMyBGb250aWNvbnMsIEluYy4tLT48cGF0aCBkPSJNMCA5NkMwIDYwLjcgMjguNyAzMiA2NCAzMkg0NDhjMzUuMyAwIDY0IDI4LjcgNjQgNjRWNDE2YzAgMzUuMy0yOC43IDY0LTY0IDY0SDY0Yy0zNS4zIDAtNjQtMjguNy02NC02NFY5NnpNMzIzLjggMjAyLjVjLTQuNS02LjYtMTEuOS0xMC41LTE5LjgtMTAuNXMtMTUuNCAzLjktMTkuOCAxMC41bC04NyAxMjcuNkwxNzAuNyAyOTdjLTQuNi01LjctMTEuNS05LTE4LjctOXMtMTQuMiAzLjMtMTguNyA5bC02NCA4MGMtNS44IDcuMi02LjkgMTcuMS0yLjkgMjUuNHMxMi40IDEzLjYgMjEuNiAxMy42aDk2IDMySDQyNGM4LjkgMCAxNy4xLTQuOSAyMS4yLTEyLjhzMy42LTE3LjQtMS40LTI0LjdsLTEyMC0xNzZ6TTExMiAxOTJhNDggNDggMCAxIDAgMC05NiA0OCA0OCAwIDEgMCAwIDk2eiIvPjwvc3ZnPg==');
    }

    &.__icon-video {
        --upaep-skeleton-bg-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTYiIHdpZHRoPSIxNiIgdmlld0JveD0iMCAwIDUxMiA1MTIiPjwhLS0hRm9udCBBd2Vzb21lIEZyZWUgNi41LjEgYnkgQGZvbnRhd2Vzb21lIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20gTGljZW5zZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tL2xpY2Vuc2UvZnJlZSBDb3B5cmlnaHQgMjAyMyBGb250aWNvbnMsIEluYy4tLT48cGF0aCBkPSJNMCA5NkMwIDYwLjcgMjguNyAzMiA2NCAzMkg0NDhjMzUuMyAwIDY0IDI4LjcgNjQgNjRWNDE2YzAgMzUuMy0yOC43IDY0LTY0IDY0SDY0Yy0zNS4zIDAtNjQtMjguNy02NC02NFY5NnpNNDggMzY4djMyYzAgOC44IDcuMiAxNiAxNiAxNkg5NmM4LjggMCAxNi03LjIgMTYtMTZWMzY4YzAtOC44LTcuMi0xNi0xNi0xNkg2NGMtOC44IDAtMTYgNy4yLTE2IDE2em0zNjgtMTZjLTguOCAwLTE2IDcuMi0xNiAxNnYzMmMwIDguOCA3LjIgMTYgMTYgMTZoMzJjOC44IDAgMTYtNy4yIDE2LTE2VjM2OGMwLTguOC03LjItMTYtMTYtMTZINDE2ek00OCAyNDB2MzJjMCA4LjggNy4yIDE2IDE2IDE2SDk2YzguOCAwIDE2LTcuMiAxNi0xNlYyNDBjMC04LjgtNy4yLTE2LTE2LTE2SDY0Yy04LjggMC0xNiA3LjItMTYgMTZ6bTM2OC0xNmMtOC44IDAtMTYgNy4yLTE2IDE2djMyYzAgOC44IDcuMiAxNiAxNiAxNmgzMmM4LjggMCAxNi03LjIgMTYtMTZWMjQwYzAtOC44LTcuMi0xNi0xNi0xNkg0MTZ6TTQ4IDExMnYzMmMwIDguOCA3LjIgMTYgMTYgMTZIOTZjOC44IDAgMTYtNy4yIDE2LTE2VjExMmMwLTguOC03LjItMTYtMTYtMTZINjRjLTguOCAwLTE2IDcuMi0xNiAxNnpNNDE2IDk2Yy04LjggMC0xNiA3LjItMTYgMTZ2MzJjMCA4LjggNy4yIDE2IDE2IDE2aDMyYzguOCAwIDE2LTcuMiAxNi0xNlYxMTJjMC04LjgtNy4yLTE2LTE2LTE2SDQxNnpNMTYwIDEyOHY2NGMwIDE3LjcgMTQuMyAzMiAzMiAzMkgzMjBjMTcuNyAwIDMyLTE0LjMgMzItMzJWMTI4YzAtMTcuNy0xNC4zLTMyLTMyLTMySDE5MmMtMTcuNyAwLTMyIDE0LjMtMzIgMzJ6bTMyIDE2MGMtMTcuNyAwLTMyIDE0LjMtMzIgMzJ2NjRjMCAxNy43IDE0LjMgMzIgMzIgMzJIMzIwYzE3LjcgMCAzMi0xNC4zIDMyLTMyVjMyMGMwLTE3LjctMTQuMy0zMi0zMi0zMkgxOTJ6Ii8+PC9zdmc+');
    }

    &.__icon-yt {
        --upaep-skeleton-bg-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTYiIHdpZHRoPSIxOCIgdmlld0JveD0iMCAwIDU3NiA1MTIiPjwhLS0hRm9udCBBd2Vzb21lIEZyZWUgNi41LjEgYnkgQGZvbnRhd2Vzb21lIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20gTGljZW5zZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tL2xpY2Vuc2UvZnJlZSBDb3B5cmlnaHQgMjAyMyBGb250aWNvbnMsIEluYy4tLT48cGF0aCBkPSJNNTQ5LjcgMTI0LjFjLTYuMy0yMy43LTI0LjgtNDIuMy00OC4zLTQ4LjZDNDU4LjggNjQgMjg4IDY0IDI4OCA2NFMxMTcuMiA2NCA3NC42IDc1LjVjLTIzLjUgNi4zLTQyIDI0LjktNDguMyA0OC42LTExLjQgNDIuOS0xMS40IDEzMi4zLTExLjQgMTMyLjNzMCA4OS40IDExLjQgMTMyLjNjNi4zIDIzLjcgMjQuOCA0MS41IDQ4LjMgNDcuOEMxMTcuMiA0NDggMjg4IDQ0OCAyODggNDQ4czE3MC44IDAgMjEzLjQtMTEuNWMyMy41LTYuMyA0Mi0yNC4yIDQ4LjMtNDcuOCAxMS40LTQyLjkgMTEuNC0xMzIuMyAxMS40LTEzMi4zczAtODkuNC0xMS40LTEzMi4zem0tMzE3LjUgMjEzLjVWMTc1LjJsMTQyLjcgODEuMi0xNDIuNyA4MS4yeiIvPjwvc3ZnPg==');
    }

    &.__icon-vimeo {
        --upaep-skeleton-bg-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTYiIHdpZHRoPSIxNCIgdmlld0JveD0iMCAwIDQ0OCA1MTIiPjwhLS0hRm9udCBBd2Vzb21lIEZyZWUgNi41LjEgYnkgQGZvbnRhd2Vzb21lIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20gTGljZW5zZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tL2xpY2Vuc2UvZnJlZSBDb3B5cmlnaHQgMjAyMyBGb250aWNvbnMsIEluYy4tLT48cGF0aCBkPSJNNDQ4IDk2YzAtMzUuMy0yOC43LTY0LTY0LTY0SDY0QzI4LjcgMzIgMCA2MC43IDAgOTZWNDE2YzAgMzUuMyAyOC43IDY0IDY0IDY0SDM4NGMzNS4zIDAgNjQtMjguNyA2NC02NFY5NnpNMzE4LjUgMzA5LjVDMjc1IDM2NiAyMzguMiAzOTQuMyAyMDguMSAzOTQuM2MtMTguNyAwLTM0LjQtMTcuMi00Ny4zLTUxLjZjLTMuOC0xMy45LTcuMy0yNi45LTEwLjUtMzljLTE4LjItNjguMy0yOC42LTEwNy40LTQ2LjItMTA3LjRjLTIuNCAwLTEwLjggNS0yNS4xIDE1LjFMNjQgMTkyYzctNi4xIDEzLjktMTIuNCAyMC42LTE4LjVjMjkuMS0yNi4zIDU1LjYtNTAuMyA3My41LTUxLjljMjQuOS0yLjQgNDAuMiAxNC42IDQ2IDUxLjFjMjAuNSAxMjkuNiAyOS42IDE0OS4yIDY2LjggOTAuNWMxMy40LTIxLjIgMjAuNi0zNy4yIDIxLjUtNDguM2MzLjQtMzIuOC0yNS42LTMwLjYtNDUuMi0yMi4yYzE1LjctNTEuNSA0NS44LTc2LjUgOTAuMS03NS4xYzMyLjkgMSA0OC40IDIyLjQgNDYuNSA2NGMtMS40IDMxLjEtMjMuMiA3My44LTY1LjMgMTI3Ljl6Ii8+PC9zdmc+');
    }

    &.__icon-file {
        --upaep-skeleton-bg-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTYiIHdpZHRoPSIxMiIgdmlld0JveD0iMCAwIDM4NCA1MTIiPjwhLS0hRm9udCBBd2Vzb21lIEZyZWUgNi41LjEgYnkgQGZvbnRhd2Vzb21lIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20gTGljZW5zZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tL2xpY2Vuc2UvZnJlZSBDb3B5cmlnaHQgMjAyMyBGb250aWNvbnMsIEluYy4tLT48cGF0aCBkPSJNMCA2NEMwIDI4LjcgMjguNyAwIDY0IDBIMjI0VjEyOGMwIDE3LjcgMTQuMyAzMiAzMiAzMkgzODRWNDQ4YzAgMzUuMy0yOC43IDY0LTY0IDY0SDY0Yy0zNS4zIDAtNjQtMjguNy02NC02NFY2NHptMzg0IDY0SDI1NlYwTDM4NCAxMjh6Ii8+PC9zdmc+');
    }

    &.__glow {
        animation: glow 2s ease-in-out infinite;
    }

    &.__wave {
        mask-image: linear-gradient(130deg, #000 55%, rgba(0, 0, 0, 0.8) 75%, #000 95%);
        mask-size: 200% 100%;
        animation: wave 2s linear infinite;
    }

    &.__banner {
        --upaep-skeleton-width: 100%;
        --upaep-skeleton-height: 100%;
        --upaep-skeleton-border-radius: 10px;
    }

    &.__img {
        --upaep-skeleton-width: 100%;
        --upaep-skeleton-height: 100%;
        --upaep-skeleton-border-radius: 0;
        --upaep-skeleton-margin: 0 0 1rem 0;
    }

    &.__icon {
        --upaep-skeleton-width: 100px;
        --upaep-skeleton-height: 100px;
        --upaep-skeleton-border-radius: 50px;
        --upaep-skeleton-margin: 0 0 1rem 0;
    }

    &.__text {
        --upaep-skeleton-width: 100%;
        --upaep-skeleton-height: 15px;
        --upaep-skeleton-border-radius: 10px;
        --upaep-skeleton-margin: 0 0 1rem 0;

        &.__75 {
            --upaep-skeleton-width: 75%;
        }

        &.__50 {
            --upaep-skeleton-width: 50%;
        }

        &.__25 {
            --upaep-skeleton-width: 25%;
        }
    }

    &.__paragraph {
        --upaep-skeleton-width: 100%;
        --upaep-skeleton-height: 100px;
        --upaep-skeleton-border-radius: 10px;
        --upaep-skeleton-margin: 0 0 1rem 0;

        &.__75 {
            --upaep-skeleton-width: 75%;
        }

        &.__50 {
            --upaep-skeleton-width: 50%;
        }

        &.__25 {
            --upaep-skeleton-width: 25%;
        }
    }
}

@keyframes move {
    to {
        background-position: -100%;
    }
}

@keyframes glow {
    50% {
        opacity: .6;
    }
}

@keyframes wave {
    100% {
        mask-position: -200% 0%;
    }
}

/*? ------ Dashboard ------ */
.container__Header_ {
    width: 100%;
    position: fixed;
    inset: 0 0 auto auto;
    z-index: 10;

    & header.upaep__container__comp_dft {
        --header-width: calc(100% - 240px);
        --header-height: 60px;
        --header-bg: #E30921;
        --header-float: none;
        --header-position: fixed;
        inset: 0 0 auto auto;
        color: var(--upaep-color-white);
        padding: 1.5rem .5rem;
        text-align: center;
        display: flex;
        align-items: center;

        & .upaep__logo_comp_dft {
            display: flex;
            justify-content: center;
            align-items: center;
            width: fit-content;

            & #hamb-menu {
                width: 40px;
                cursor: pointer;
            }
        }

        & .upaep__center__comp_dft {
            width: 100%;
            display: flex;
            justify-content: end;
            align-items: center;
            padding: 0 0 0 2rem;
            gap: 2rem;
        }

        & .upaep__name__comp_dft {
            width: fit-content;
            height: 100%;
            display: flex;
            justify-content: end;
            align-items: center;

            & #upaep__name__comp__user {
                font-size: var(--upaep-fz15);
                font-weight: var(--upaep-fw-bold);
                margin: 0 0 0 1rem;
                color: var(--upaep-color-white);
                padding: 0px 20px;
                cursor: pointer;
                width: max-content;
            }
        }

        & .upaep__icons__comp_dft {
            width: fit-content;
            padding: 0px 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 2rem;

            & #icon-logout {
                width: 30px;
                height: 30px;
                background-color: white;
                border-radius: 5px;
                cursor: pointer;
                display: flex;
                justify-content: center;
                align-items: center;

                & #icon_log {
                    width: 70%;
                }
            }
        }
    }
}

.container__Sidebar_ {
    & .loader_sidebar {
        width: auto;
        position: fixed;
        inset: 10rem auto auto 3.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        visibility: hidden;
        opacity: 0;
        transition: all 0.35s ease-in;
        z-index: 9999;
    }

    & .sidebar {
        position: fixed;
        inset: 0 auto auto 0;
        width: 240px;
        min-height: 100dvh;
        height: 100dvh;
        background: #52565A;
        padding: 0px .75rem;
        text-align: center;
        box-shadow: 7px 0 60px rgba(0, 0, 0, 0.05);
        transition: width 0.3s ease;
        z-index: 100;

        & .cont-logo {
            height: 60px;
            padding: .5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;

            & .cont-logo-upaep {
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: start;
                align-items: center;

                & #logo-sidebar {
                    height: 100%;
                    padding: .25rem;
                    cursor: pointer;
                    border-radius: 10px;
                }
            }

            & #hamb-menu {
                width: 40px;
                cursor: pointer;
                transition: width 1.5s ease;
            }
        }

        & ul {
            width: 100%;
            list-style: none;
            padding: 0;
            margin: 1rem 0rem;
            font-size: var(--upaep-fz15);
            font-weight: var(--upaep-fw-regular);
            color: var(--upaep-color-white);
            display: flex;
            justify-content: center;
            flex-direction: column;
            text-decoration: none;
            gap: 1rem;

            & li {
                min-height: 30px;
                display: flex;
                align-items: center;
                text-align: start;
                padding: .5rem;
                opacity: 1;
                cursor: pointer;
                overflow: hidden;
                transition: background 0.3s ease;
                border-radius: 10px;
                gap: .5rem;

                & img {
                    width: 25px;
                    height: 25px;
                    object-fit: cover;
                }

                & a {
                    text-decoration: none;
                    color: var(--upaep-color-white);
                }

                &:hover {
                    background: #6a6f74;
                }
            }
        }

        & .contenedorInferior {
            position: absolute;
            bottom: 20px;
        }
    }
}

.container__Main_ {
    transition: padding-left .3s ease;
    padding: 20px 10px 20px 320px;
    margin: 4rem 0 0 0;
    min-height: calc(100dvh - 90px);

    &:not(:has(.accesosGeneral)) {
        flex: 1;
    }

    &.opened-sidebar {
        padding: 0px 40px 20px 320px;
    }
}

.container__Footer_ {
    & footer {
        --footer-bg: #1b1f22;
        --footer-padding: 20px 0 20px 280px;
        --footer-border-top: none;
        color: var(--upaep-color-white);
        text-align: center;
        transition: padding-left 0.3s ease;
        float: none;
        width: auto;

        & p {
            margin: 0;
        }
    }
}

.upaep__dashboard_ {
    --upaep-dashboard-sidebar-width: 300px;
    --upaep-dashboard-sidebar-height: 100dvh;
    --upaep-dashboard-sidebar-bg: #4D4D4D;
    --upaep-dashboard-sidebar-header-width: 100%;
    --upaep-dashboard-sidebar-header-height: 68px;
    --upaep-dashboard-sidebar-header-padding: .5rem;
    --upaep-dashboard-sidebar-header-bg: transparent;
    --upaep-dashboard-sidebar-header-boxshadow: ;
    --upaep-dashboard-sidebar-header-border-bottom-size: 1px;
    --upaep-dashboard-sidebar-header-border-bottom-style: solid;
    --upaep-dashboard-sidebar-header-border-bottom-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-dashboard-sidebar-body-width: 100%;
    --upaep-dashboard-sidebar-body-height: 100%;
    --upaep-dashboard-sidebar-body-padding: .5rem;
    --upaep-dashboard-sidebar-body-bg: transparent;
    --upaep-dashboard-sidebar-footer-width: 100%;
    --upaep-dashboard-sidebar-footer-height: 68px;
    --upaep-dashboard-sidebar-footer-padding: .5rem;
    --upaep-dashboard-sidebar-footer-bg: transparent;
    --upaep-dashboard-sidebar-footer-boxshadow: ;
    --upaep-dashboard-sidebar-footer-border-top-size: 1px;
    --upaep-dashboard-sidebar-footer-border-top-style: solid;
    --upaep-dashboard-sidebar-footer-border-top-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-dashboard-content-width: 100%;
    --upaep-dashboard-content-height: 100dvh;
    --upaep-dashboard-content-padding: 0;
    --upaep-dashboard-content-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-dashboard-content-header-width: 100%;
    --upaep-dashboard-content-header-height: 68px;
    --upaep-dashboard-content-header-padding: .5rem .35rem;
    --upaep-dashboard-content-header-bg: #b90114;
    --upaep-dashboard-content-header-boxshadow: var(--ui-shadow, var(--upaep-box-shadow));
    --upaep-dashboard-content-body-width: 100%;
    --upaep-dashboard-content-body-height: 100%;
    --upaep-dashboard-content-body-padding: 1rem;
    --upaep-dashboard-content-body-bg: transparent;
    --upaep-dashboard-content-footer-width: 100%;
    --upaep-dashboard-content-footer-height: 68px;
    --upaep-dashboard-content-footer-padding: .5rem;
    --upaep-dashboard-content-footer-bg: var(--ui-surface-inverse, var(--upaep-color-black));
    --upaep-dashboard-content-footer-boxshadow: ;
    --upaep-dashboard-items-width: 100%;
    --upaep-dashboard-items-height: auto;
    --upaep-dashboard-items-margin: 1rem 0;
    --upaep-dashboard-items-padding: 0;
    --upaep-dashboard-item-width: 100%;
    --upaep-dashboard-item-height: auto;
    --upaep-dashboard-item-margin: .5rem 0;
    --upaep-dashboard-item-padding: .5rem .35rem;
    --upaep-dashboard-item-border-radius: 0;
    --upaep-dashboard-item-fz: var(--upaep-fz15);
    --upaep-dashboard-item-fw: var(--upaep-fw-regular);
    --upaep-dashboard-item-color: var(--upaep-color-white);
    --upaep-dashboard-item-hover-bg: var(--upaep-gradient-white);
    --upaep-dashboard-item-border-bottom-size: 1px;
    --upaep-dashboard-item-border-bottom-style: solid;
    --upaep-dashboard-item-border-bottom-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-dashboard-item-content-width: 100%;
    --upaep-dashboard-item-content-height: 0;
    --upaep-dashboard-item-content-bg: #3d3d3d;
    --upaep-dashboard-item-content-padding: 0 .35rem;
    --upaep-dashboard-item-icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTYiIHdpZHRoPSIxNCIgdmlld0JveD0iMCAwIDQ0OCA1MTIiPjwhLS0hRm9udCBBd2Vzb21lIEZyZWUgNi41LjEgYnkgQGZvbnRhd2Vzb21lIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20gTGljZW5zZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tL2xpY2Vuc2UvZnJlZSBDb3B5cmlnaHQgMjAyNCBGb250aWNvbnMsIEluYy4tLT48cGF0aCBkPSJNMCA4MFYyMjkuNWMwIDE3IDYuNyAzMy4zIDE4LjcgNDUuM2wxNzYgMTc2YzI1IDI1IDY1LjUgMjUgOTAuNSAwTDQxOC43IDMxNy4zYzI1LTI1IDI1LTY1LjUgMC05MC41bC0xNzYtMTc2Yy0xMi0xMi0yOC4zLTE4LjctNDUuMy0xOC43SDQ4QzIxLjUgMzIgMCA1My41IDAgODB6bTExMiAzMmEzMiAzMiAwIDEgMSAwIDY0IDMyIDMyIDAgMSAxIDAtNjR6IiBmaWxsPSIjZmZmZmZmIi8+PC9zdmc+');
    width: 100%;
    height: 100%;
    display: flex;

    & .upaep__dashboard-sidebar {
        width: var(--upaep-dashboard-sidebar-width);
        height: var(--upaep-dashboard-sidebar-height);
        background: var(--upaep-dashboard-sidebar-bg);
        transition: width .5s ease;

        & .upaep__dashboard-sidebar-header {
            width: var(--upaep-dashboard-sidebar-header-width);
            height: var(--upaep-dashboard-sidebar-header-height);
            padding: var(--upaep-dashboard-sidebar-header-padding);
            background: var(--upaep-dashboard-sidebar-header-bg);
            box-shadow: var(--upaep-dashboard-sidebar-header-boxshadow);
            border-bottom: var(--upaep-dashboard-sidebar-header-border-bottom-size) var(--upaep-dashboard-sidebar-header-border-bottom-style) var(--upaep-dashboard-sidebar-header-border-bottom-color);
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-shrink: 0;
            gap: 10px;

        }

        & .upaep__dashboard-sidebar-body {
            width: var(--upaep-dashboard-sidebar-body-width);
            height: var(--upaep-dashboard-sidebar-body-height);
            padding: var(--upaep-dashboard-sidebar-body-padding);
            background: var(--upaep-dashboard-sidebar-body-bg);
            content: '';
            overflow-y: auto;

            &::-webkit-scrollbar-track-piece {
                background-color: #d7dadb;
                border-radius: 0;
                border-bottom-right-radius: 5px;
                border-bottom-left-radius: 5px;
            }

            &::-webkit-scrollbar {
                width: 10px;
                height: 10px;
            }

            &::-webkit-scrollbar-thumb {
                border-radius: 5px;
                background: var(--upaep-color-border-grey);
            }

            & .upaep__dashboard-items {
                width: var(--upaep-dashboard-items-width);
                height: var(--upaep-dashboard-items-height);
                margin: var(--upaep-dashboard-items-margin);
                padding: var(--upaep-dashboard-items-padding);
                list-style: none;
                transition: background .5s ease-in-out;

                &:not(.__borderless) {
                    .upaep__dashboard-item {

                        &:not(:last-child):not(.__borderless) {
                            border-bottom: var(--upaep-dashboard-item-border-bottom-size) var(--upaep-dashboard-item-border-bottom-style) var(--upaep-dashboard-item-border-bottom-color);
                        }
                    }
                }

                & .upaep__dashboard-item {
                    width: var(--upaep-dashboard-item-width);
                    height: var(--upaep-dashboard-item-height);
                    margin: var(--upaep-dashboard-item-margin);
                    padding: var(--upaep-dashboard-item-padding);
                    border-radius: var(--upaep-dashboard-item-border-radius);
                    cursor: pointer;
                    position: relative;
                    overflow: hidden;

                    & .upaep__dashboard-item-group {
                        text-decoration: none;
                        font-size: var(--upaep-dashboard-item-fz);
                        font-weight: var(--upaep-dashboard-item-fw);
                        color: var(--upaep-dashboard-item-color);
                        min-height: 2rem;
                        display: flex;
                        align-items: start;
                        gap: 5px;

                        .upaep__dashboard-item-icon {
                            width: 2rem;
                            height: 2rem;
                            position: relative;

                            &::before {
                                position: absolute;
                                inset: 0;
                                content: '';
                                background: var(--upaep-dashboard-item-icon) center center no-repeat;
                            }
                        }

                        .upaep__dashboard-item-text {
                            width: 100%;
                            padding: .25rem 0 0 0;
                        }
                    }

                    &:hover:not(.is-active) {
                        --upaep-dashboard-item-border-radius: 10px;
                        --upaep-dashboard-item-fw: var(--upaep-fw-bold);
                        background: var(--upaep-dashboard-item-hover-bg);
                    }

                    &.__item {
                        &>.upaep__dashboard-item-group {
                            &::before {
                                font-family: var(--upaep-ff-fontawesome);
                                content: '\f0d7';
                                position: absolute;
                                inset: auto 15px auto auto;
                                transition: all .5s;
                            }
                        }

                        &.is-active {
                            border-radius: 10px;
                            background: var(--upaep-dashboard-item-content-bg);
                            --upaep-dashboard-item-fw: var(--upaep-fw-regular);

                            &>.upaep__dashboard-item-group {
                                &::before {
                                    rotate: 180deg;
                                }
                            }

                            &>.upaep__dashboard-item-content {
                                --upaep-dashboard-item-content-height: auto;
                                min-height: 2rem;
                                overflow: hidden;
                                transition: all .5s ease;
                            }
                        }

                        .upaep__dashboard-item-content {
                            width: var(--upaep-dashboard-item-content-width);
                            height: var(--upaep-dashboard-item-content-height);
                            background: var(--upaep-dashboard-item-content-bg);
                            padding: var(--upaep-dash-board-item-content-padding);
                            min-height: 0;
                            overflow: hidden;
                            transition: all 0.35s ease;
                        }

                    }
                }
            }
        }

        &:has(.upaep__dashboard-sidebar-header~.upaep__dashboard-sidebar-body) {
            --upaep-dashboard-sidebar-body-height: calc(100dvh - 68px);
        }

        &:has(.upaep__dashboard-sidebar-body~.upaep__dashboard-sidebar-footer) {
            --upaep-dashboard-sidebar-body-height: calc(100dvh - 136px);
        }

        &:has(.upaep__dashboard-sidebar-body~.upaep__dashboard-sidebar-footer):not(:has(.upaep__dashboard-sidebar-header)) {
            --upaep-dashboard-sidebar-body-height: calc(100dvh - 68px);
        }

        & .upaep__dashboard-sidebar-footer {
            width: var(--upaep-dashboard-sidebar-footer-width);
            height: var(--upaep-dashboard-sidebar-footer-height);
            padding: var(--upaep-dashboard-sidebar-footer-padding);
            background: var(--upaep-dashboard-sidebar-footer-bg);
            box-shadow: var(--upaep-dashboard-sidebar-footer-boxshadow);
            border-top: var(--upaep-dashboard-sidebar-footer-border-top-size) var(--upaep-dashboard-sidebar-footer-border-top-style) var(--upaep-dashboard-sidebar-footer-border-top-color);
            display: flex;
            align-items: center;
            flex-shrink: 0;
            gap: 10px;
        }

        &.is-collapsing {
            --upaep-dashboard-sidebar-width: 85px;

            .upaep__dashboard-item-text {
                display: none;
            }
        }
    }

    & .upaep__dashboard-content {
        width: var(--upaep-dashboard-content-width);
        height: var(--upaep-dashboard-content-height);
        padding: var(--upaep-dashboard-content-padding);
        background: var(--upaep-dashboard-content-bg);
        overflow: hidden;

        & .upaep__dashboard-header {
            width: var(--upaep-dashboard-content-header-width);
            height: var(--upaep-dashboard-content-header-height);
            padding: var(--upaep-dashboard-content-header-padding);
            background: var(--upaep-dashboard-content-header-bg);
            box-shadow: var(--upaep-dashboard-content-header-boxshadow);
        }

        & .upaep__dashboard-body {
            width: var(--upaep-dashboard-content-body-width);
            height: var(--upaep-dashboard-content-body-height);
            padding: var(--upaep-dashboard-content-body-padding);
            background: var(--upaep-dashboard-content-body-bg);
            content: '';
            overflow-y: auto;

            &::-webkit-scrollbar-track-piece {
                background-color: #d7dadb;
                border-radius: 0;
                border-bottom-right-radius: 5px;
                border-bottom-left-radius: 5px;
            }

            &::-webkit-scrollbar {
                width: 10px;
                height: 10px;
            }

            &::-webkit-scrollbar-thumb {
                border-radius: 5px;
                background: var(--upaep-color-border-grey);
            }
        }

        &:has(.upaep__dashboard-header~.upaep__dashboard-body) {
            --upaep-dashboard-content-body-height: calc(100dvh - 68px);
        }

        &:has(.upaep__dashboard-body~.upaep__dashboard-footer) {
            --upaep-dashboard-content-body-height: calc(100dvh - 136px);
        }

        &:has(.upaep__dashboard-body~.upaep__dashboard-footer):not(:has(.upaep__dashboard-header)) {
            --upaep-dashboard-content-body-height: calc(100dvh - 68px);
        }

        & .upaep__dashboard-footer {
            width: var(--upaep-dashboard-content-footer-width);
            height: var(--upaep-dashboard-content-footer-height);
            padding: var(--upaep-dashboard-content-footer-padding);
            background: var(--upaep-dashboard-content-footer-bg);
            box-shadow: var(--upaep-dashboard-content-footer-boxshadow);
        }
    }

    &:has(.upaep__dashboard-sidebar.is-collapsing) {

        & .upaep__dashboard-action-menu {
            .upaep__dashboard-action-menu-desktop .upaep__icon {
                transition: all .5s;
                rotate: 180deg;
            }

            .upaep__dashboard-action-menu-mobile {
                transition: all .5s;
            }
        }
    }


    & .upaep__dashboard-action-menu {
        width: 55px;
        cursor: pointer;

        .upaep__dashboard-action-menu-desktop .upaep__icon {
            transition: all .5s;
        }

        .upaep__dashboard-action-menu-mobile {
            transition: all .5s;
        }
    }

    @keyframes fadeOut {
        to {
            display: none;
            opacity: 0;
        }
    }
}

.upaep__dashboard.__light {
    --upaep-dashboard-sidebar-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-dashboard-sidebar-header-bg: transparent;
    --upaep-dashboard-sidebar-header-boxshadow: ;
    --upaep-dashboard-sidebar-header-border-bottom-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-dashboard-sidebar-body-bg: transparent;
    --upaep-dashboard-sidebar-footer-bg: transparent;
    --upaep-dashboard-sidebar-footer-boxshadow: ;
    --upaep-dashboard-sidebar-footer-border-top-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-dashboard-content-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-dashboard-content-header-bg: #4D4D4D;
    --upaep-dashboard-content-body-bg: transparent;
    --upaep-dashboard-content-footer-bg: #7c7c7c;
    --upaep-dashboard-content-footer-boxshadow: ;
    --upaep-dashboard-item-hover-bg: #dcdcdc;
    --upaep-dashboard-item-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-dashboard-item-border-bottom-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-dashboard-item-content-bg: #efefef;
    --upaep-dashboard-item-icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTYiIHdpZHRoPSIxNCIgdmlld0JveD0iMCAwIDQ0OCA1MTIiPjwhLS0hRm9udCBBd2Vzb21lIEZyZWUgNi41LjEgYnkgQGZvbnRhd2Vzb21lIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20gTGljZW5zZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tL2xpY2Vuc2UvZnJlZSBDb3B5cmlnaHQgMjAyNCBGb250aWNvbnMsIEluYy4tLT48cGF0aCBkPSJNMCA4MFYyMjkuNWMwIDE3IDYuNyAzMy4zIDE4LjcgNDUuM2wxNzYgMTc2YzI1IDI1IDY1LjUgMjUgOTAuNSAwTDQxOC43IDMxNy4zYzI1LTI1IDI1LTY1LjUgMC05MC41bC0xNzYtMTc2Yy0xMi0xMi0yOC4zLTE4LjctNDUuMy0xOC43SDQ4QzIxLjUgMzIgMCA1My41IDAgODB6bTExMiAzMmEzMiAzMiAwIDEgMSAwIDY0IDMyIDMyIDAgMSAxIDAtNjR6Ii8+PC9zdmc+');
}

/*? ------ Tooltip ------ */
[upaep-tooltip] {
    cursor: pointer;
}

.upaep__tooltip {
    --upaep-tooltip-width: auto;
    --upaep-tooltip-height: auto;
    --upaep-tooltip-maxwidth: 200px;
    --upaep-tooltip-padding: .5rem;
    --upaep-tooltip-margin: ;
    --upaep-tooltip-fz: var(--upaep-fz14);
    --upaep-tooltip-fw: var(--upaep-fw-regular);
    --upaep-tooltip-color: var(--ui-on-surface-inverse, var(--upaep-color-white));
    --upaep-tooltip-bg: var(--ui-surface-inverse, var(--upaep-color-black));
    --upaep-tooltip-border-size: 2px;
    --upaep-tooltip-border-style: solid;
    --upaep-tooltip-border-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-tooltip-border-radius: .5rem;
    --upaep-tooltip-opacity: .9;
    --upaep-tooltip-animation: tooltipIn;
    --upaep-tooltip-animation-duration: .15s;
    --upaep-tooltip-out-duration: .15s;
    --upaep-tooltip-zindex: var(--upaep-zindex-tooltip);
    --upaep-tooltip-inset: 0 auto auto 0;
    --upaep-tooltip-arrow-width: 1rem;
    --upaep-tooltip-arrow-height: calc(var(--upaep-tooltip-arrow-width) / 2);
    --upaep-tooltip-arrow-bg: var(--ui-surface-inverse, var(--upaep-color-black));
    --upaep-tooltip-arrow-inset: 0 auto auto 0;
    --upaep-tooltip-arrow-border-width: ;
    --upaep-tooltip-arrow-border-color: var(--upaep-tooltip-border-color);
    --upaep-tooltip-header-paddig: .5rem;
    --upaep-tooltip-header-margin: 0;
    --upaep-tooltip-header-bg: #6d6d6d;
    --upaep-tooltip-header-border-radius: .5rem .5rem 0 0;
    --upaep-tooltip-header-fz: var(--upaep-fz14);
    --upaep-tooltip-header-fw: var(--upaep-fw-regular);
    --upaep-tooltip-header-color: var(--ui-on-surface-inverse, var(--upaep-color-white));
    --upaep-tooltip-body-paddig: .5rem;
    --upaep-tooltip-body-margin: 0;
    --upaep-tooltip-body-bg: transparent;
    --upaep-tooltip-body-border-radius: 0 0 .5rem .5rem;
    --upaep-tooltip-body-fz: var(--upaep-fz14);
    --upaep-tooltip-body-fw: var(--upaep-fw-regular);
    --upaep-tooltip-body-color: var(--ui-on-surface-inverse, var(--upaep-color-white));
    max-width: var(--upaep-tooltip-maxwidth);
    margin: var(--upaep-tooltip-margin);
    border: var(--upaep-tooltip-border-size) var(--upaep-tooltip-border-style) var(--upaep-tooltip-border-color);
    border-radius: var(--upaep-tooltip-border-radius);
    background: var(--upaep-tooltip-bg);
    z-index: var(--upaep-tooltip-zindex);
    font-size: var(--upaep-tooltip-fz);
    font-weight: var(--upaep-tooltip-fw);
    color: var(--upaep-tooltip-color);
    inset: var(--upaep-tooltip-inset);
    opacity: var(--upaep-tooltip-opacity);
    animation: var(--upaep-tooltip-animation) var(--upaep-tooltip-animation-duration) ease;
    position: absolute;
    display: block;
    word-wrap: break-word;
    line-height: 1.5;
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    white-space: normal;
    word-spacing: normal;
    line-break: auto;

    &:not(.is-show):not(.is-hiding) {
        display: none;
    }

    /*? cierre animado: el JS espera TOOLTIP_OUT_DURATION antes de remover el nodo */
    &.is-hiding {
        animation: tooltipOut var(--upaep-tooltip-out-duration) ease forwards;
    }

    .upaep__tooltip-arrow {
        display: block;
        width: var(--upaep-tooltip-arrow-width);
        height: var(--upaep-tooltip-arrow-height);
        position: absolute;

        &::before,
        &::after {
            position: absolute;
            display: block;
            content: "";
            border-color: transparent;
            border-style: solid;
            border-width: var(--upaep-tooltip-arrow-border-width);
        }

        &::before {
            inset: var(--upaep-tooltip-arrow-inset);
        }
    }

    &.__arrow-top,
    &[upaep-tooltip-position="top"] {
        --upaep-tooltip-arrow-inset: 1px auto auto auto;
        --upaep-tooltip-arrow-border-width: var(--upaep-tooltip-arrow-height) calc(var(--upaep-tooltip-arrow-width) * 0.5) 0;

        & .upaep__tooltip-arrow {
            &::before {
                border-top-color: var(--upaep-tooltip-arrow-border-color);
            }

            &::after {
                border-top-color: var(--upaep-tooltip-arrow-bg);
            }
        }
    }

    &.__arrow-bottom,
    &[upaep-tooltip-position="bottom"] {
        --upaep-tooltip-arrow-inset: -1px auto auto auto;
        --upaep-tooltip-arrow-border-width: 0 calc(var(--upaep-tooltip-arrow-width) * 0.5) var(--upaep-tooltip-arrow-height);

        & .upaep__tooltip-arrow {
            &::before {
                border-bottom-color: var(--upaep-tooltip-arrow-border-color);
            }

            &::after {
                border-bottom-color: var(--upaep-tooltip-arrow-bg);
            }
        }
    }

    &.__arrow-right,
    &[upaep-tooltip-position="right"] {
        --upaep-tooltip-arrow-inset: auto auto auto -1px;
        --upaep-tooltip-arrow-border-width: calc(var(--upaep-tooltip-arrow-width) * 0.5) var(--upaep-tooltip-arrow-height) calc(var(--upaep-tooltip-arrow-width) * 0.5) 0;

        & .upaep__tooltip-arrow {
            width: var(--upaep-tooltip-arrow-height);
            height: var(--upaep-tooltip-arrow-width);

            &::before {
                border-right-color: var(--upaep-tooltip-arrow-border-color);
            }

            &::after {
                border-right-color: var(--upaep-tooltip-arrow-bg);
            }
        }
    }

    &.__arrow-left,
    &[upaep-tooltip-position="left"] {
        --upaep-tooltip-arrow-inset: auto auto auto 1px;
        --upaep-tooltip-arrow-border-width: calc(var(--upaep-tooltip-arrow-width) * 0.5) 0 calc(var(--upaep-tooltip-arrow-width) * 0.5) var(--upaep-tooltip-arrow-height);

        & .upaep__tooltip-arrow {
            width: var(--upaep-tooltip-arrow-height);
            height: var(--upaep-tooltip-arrow-width);

            &::before {
                border-left-color: var(--upaep-tooltip-arrow-border-color);
            }

            &::after {
                border-left-color: var(--upaep-tooltip-arrow-bg);
            }
        }
    }

    .upaep__tooltip-inner {
        width: 100%;
        height: 100%;
        padding: var(--upaep-tooltip-padding);
        border-radius: var(--upaep-tooltip-border-radius);
    }

    .upaep__tooltip-content {
        width: 100%;
        height: 100%;
        border-radius: var(--upaep-tooltip-border-radius);
    }

    &:not(:has(.upaep__tooltip-header)):not(:has(.upaep__tooltip-body)) {
        .upaep__tooltip-content {
            padding: var(--upaep-tooltip-padding);
            opacity: var(--upaep-tooltip-opacity);
        }
    }

    .upaep__tooltip-header {
        padding: var(--upaep-tooltip-header-paddig);
        margin: var(--upaep-tooltip-header-margin);
        background: var(--upaep-tooltip-header-bg);
        border-radius: var(--upaep-tooltip-header-border-radius);
        font-size: var(--upaep-tooltip-header-fz);
        font-weight: var(--upaep-tooltip-header-fw);
        color: var(--upaep-tooltip-header-color);
    }

    .upaep__tooltip-body {
        padding: var(--upaep-tooltip-body-paddig);
        margin: var(--upaep-tooltip-body-margin);
        background: var(--upaep-tooltip-body-bg);
        border-radius: var(--upaep-tooltip-body-border-radius);
        font-size: var(--upaep-tooltip-body-fz);
        font-weight: var(--upaep-tooltip-body-fw);
        color: var(--upaep-tooltip-body-color);
    }
}

[data-tooltip],
.__data-tooltip {
    --data-tooltip-maxwidth: 200px;
    --data-tooltip-padding: .35rem .5rem;
    --data-tooltip-margin: 0 .5rem;
    --data-tooltip-border-radius: 10px;
    --data-tooltip-bg: var(--ui-surface-inverse, var(--upaep-color-black));
    --data-tooltip-color: var(--ui-on-surface-inverse, var(--upaep-color-white));
    --data-tooltip-fz: var(--upaep-fz14);
    --data-tooltip-inset: 0 0 auto auto;
    position: relative;

    &::after {
        max-width: var(--data-tooltip-maxwidth);
        padding: var(--data-tooltip-padding);
        margin: var(--data-tooltip-margin);
        border-radius: var(--data-tooltip-border-radius);
        background: var(--data-tooltip-bg);
        color: var(--data-tooltip-color);
        font-size: var(--data-tooltip-fz);
        inset: var(--data-tooltip-inset);
        content: attr(data-text);
        position: absolute;
        opacity: .8;
        transition: opacity .5s;
    }

    &:not(:hover)::after {
        display: none;
    }

    &[data-tooltip="bottom"] {
        --data-tooltip-inset: auto auto 0 50%;
    }

    &[data-tooltip="top"] {
        --data-tooltip-inset: 0 auto auto 50%;
    }

    &[data-tooltip="left"] {
        --data-tooltip-inset: 0 auto auto 0;
    }

    &[data-tooltip="right"] {
        --data-tooltip-inset: 0 0 auto auto;
    }
}

@keyframes tooltipIn {
    from {
        opacity: 0;
    }
}

@keyframes tooltipOut {
    to {
        opacity: 0;
    }
}

/*? ------ Popover ------ */
[upaep-popover] {
    cursor: pointer;
}

.upaep__popover {
    --upaep-popover-width: auto;
    --upaep-popover-height: auto;
    --upaep-popover-maxwidth: 200px;
    --upaep-popover-padding: .5rem;
    --upaep-popover-margin: ;
    --upaep-popover-fz: var(--upaep-fz14);
    --upaep-popover-fw: var(--upaep-fw-regular);
    --upaep-popover-color: var(--ui-on-surface-inverse, var(--upaep-color-white));
    --upaep-popover-bg: var(--ui-surface-inverse, var(--upaep-color-black));
    --upaep-popover-border-size: 2px;
    --upaep-popover-border-style: solid;
    --upaep-popover-border-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-popover-border-radius: .5rem;
    --upaep-popover-opacity: .9;
    --upaep-popover-animation: popoverIn;
    --upaep-popover-animation-duration: .2s;
    --upaep-popover-out-duration: .2s;
    --upaep-popover-zindex: var(--upaep-zindex-popover);
    --upaep-popover-inset: 0 auto auto 0;
    --upaep-popover-arrow-width: 1rem;
    --upaep-popover-arrow-height: calc(var(--upaep-popover-arrow-width) / 2);
    --upaep-popover-arrow-bg: var(--ui-surface-inverse, var(--upaep-color-black));
    --upaep-popover-arrow-inset: 0 auto auto 0;
    --upaep-popover-arrow-border-width: ;
    --upaep-popover-arrow-border-color: var(--upaep-popover-border-color);
    --upaep-popover-header-paddig: .5rem;
    --upaep-popover-header-margin: 0;
    --upaep-popover-header-bg: #6d6d6d;
    --upaep-popover-header-border-radius: .5rem .5rem 0 0;
    --upaep-popover-header-fz: var(--upaep-fz14);
    --upaep-popover-header-fw: var(--upaep-fw-regular);
    --upaep-popover-header-color: var(--ui-on-surface-inverse, var(--upaep-color-white));
    --upaep-popover-body-paddig: .5rem;
    --upaep-popover-body-margin: 0;
    --upaep-popover-body-bg: transparent;
    --upaep-popover-body-border-radius: 0 0 .5rem .5rem;
    --upaep-popover-body-fz: var(--upaep-fz14);
    --upaep-popover-body-fw: var(--upaep-fw-regular);
    --upaep-popover-body-color: var(--ui-on-surface-inverse, var(--upaep-color-white));
    max-width: var(--upaep-popover-maxwidth);
    margin: var(--upaep-popover-margin);
    border: var(--upaep-popover-border-size) var(--upaep-popover-border-style) var(--upaep-popover-border-color);
    border-radius: var(--upaep-popover-border-radius);
    background: var(--upaep-popover-bg);
    z-index: var(--upaep-popover-zindex);
    font-size: var(--upaep-popover-fz);
    font-weight: var(--upaep-popover-fw);
    color: var(--upaep-popover-color);
    inset: var(--upaep-popover-inset);
    opacity: var(--upaep-popover-opacity);
    animation: var(--upaep-popover-animation) var(--upaep-popover-animation-duration) ease;
    position: absolute;
    display: block;
    word-wrap: break-word;
    line-height: 1.5;
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    white-space: normal;
    word-spacing: normal;
    line-break: auto;

    &:not(.is-show):not(.is-hiding) {
        display: none;
    }

    /*? cierre animado: el JS espera POPOVER_OUT_DURATION antes de remover el nodo */
    &.is-hiding {
        animation: popoverOut var(--upaep-popover-out-duration) ease forwards;
    }

    .upaep__popover-arrow {
        display: block;
        width: var(--upaep-popover-arrow-width);
        height: var(--upaep-popover-arrow-height);
        position: absolute;

        &::before,
        &::after {
            position: absolute;
            display: block;
            content: "";
            border-color: transparent;
            border-style: solid;
            border-width: var(--upaep-popover-arrow-border-width);
        }

        &::before {
            inset: var(--upaep-popover-arrow-inset);
        }
    }

    &.__arrow-top,
    &[upaep-popover-position="top"] {
        --upaep-popover-arrow-inset: 1px auto auto auto;
        --upaep-popover-arrow-border-width: var(--upaep-popover-arrow-height) calc(var(--upaep-popover-arrow-width) * 0.5) 0;

        & .upaep__popover-arrow {
            &::before {
                border-top-color: var(--upaep-popover-arrow-border-color);
            }

            &::after {
                border-top-color: var(--upaep-popover-arrow-bg);
            }
        }
    }

    &.__arrow-bottom,
    &[upaep-popover-position="bottom"] {
        --upaep-popover-arrow-inset: -1px auto auto auto;
        --upaep-popover-arrow-border-width: 0 calc(var(--upaep-popover-arrow-width) * 0.5) var(--upaep-popover-arrow-height);

        & .upaep__popover-arrow {
            &::before {
                border-bottom-color: var(--upaep-popover-arrow-border-color);
            }

            &::after {
                border-bottom-color: var(--upaep-popover-arrow-bg);
            }
        }
    }

    &.__arrow-right,
    &[upaep-popover-position="right"] {
        --upaep-popover-arrow-inset: auto auto auto -1px;
        --upaep-popover-arrow-border-width: calc(var(--upaep-popover-arrow-width) * 0.5) var(--upaep-popover-arrow-height) calc(var(--upaep-popover-arrow-width) * 0.5) 0;

        & .upaep__popover-arrow {
            width: var(--upaep-popover-arrow-height);
            height: var(--upaep-popover-arrow-width);

            &::before {
                border-right-color: var(--upaep-popover-arrow-border-color);
            }

            &::after {
                border-right-color: var(--upaep-popover-arrow-bg);
            }
        }
    }

    &.__arrow-left,
    &[upaep-popover-position="left"] {
        --upaep-popover-arrow-inset: auto auto auto 1px;
        --upaep-popover-arrow-border-width: calc(var(--upaep-popover-arrow-width) * 0.5) 0 calc(var(--upaep-popover-arrow-width) * 0.5) var(--upaep-popover-arrow-height);

        & .upaep__popover-arrow {
            width: var(--upaep-popover-arrow-height);
            height: var(--upaep-popover-arrow-width);

            &::before {
                border-left-color: var(--upaep-popover-arrow-border-color);
            }

            &::after {
                border-left-color: var(--upaep-popover-arrow-bg);
            }
        }
    }

    .upaep__popover-inner {
        width: 100%;
        height: 100%;
        padding: var(--upaep-popover-padding);
        border-radius: var(--upaep-popover-border-radius);
    }

    .upaep__popover-content {
        width: 100%;
        height: 100%;
        border-radius: var(--upaep-popover-border-radius);
    }

    &:not(:has(.upaep__popover-header)):not(:has(.upaep__popover-body)) {
        .upaep__popover-content {
            padding: var(--upaep-popover-padding);
            opacity: var(--upaep-popover-opacity);
        }
    }

    .upaep__popover-header {
        padding: var(--upaep-popover-header-paddig);
        margin: var(--upaep-popover-header-margin);
        background: var(--upaep-popover-header-bg);
        border-radius: var(--upaep-popover-header-border-radius);
        font-size: var(--upaep-popover-header-fz);
        font-weight: var(--upaep-popover-header-fw);
        color: var(--upaep-popover-header-color);
    }

    .upaep__popover-body {
        padding: var(--upaep-popover-body-paddig);
        margin: var(--upaep-popover-body-margin);
        background: var(--upaep-popover-body-bg);
        border-radius: var(--upaep-popover-body-border-radius);
        font-size: var(--upaep-popover-body-fz);
        font-weight: var(--upaep-popover-body-fw);
        color: var(--upaep-popover-body-color);
    }
}

@keyframes popoverIn {
    from {
        opacity: 0;
    }
}

@keyframes popoverOut {
    to {
        opacity: 0;
    }
}

/*? ------ Slide ------ */
.upaep__slide {
    position: relative;
    width: 100%;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: .5rem;

    .upaep__slide-item {
        position: relative;
        inset: 0;
        float: left;
        width: 100%;
        margin-right: -100%;
        backface-visibility: hidden;
        transition: transform .6s ease-in-out;
    }

    .upaep__slide-content {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 100%;
        pointer-events: auto;
        background-clip: padding-box;
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: .5rem;
        outline: 0;
        width: 100%;
        height: 100%;
    }

    .upaep__slide-header {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: space-between;
        padding: 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
        border-top-left-radius: calc(.5rem - (1px));
        border-top-right-radius: calc(.5rem - (1px));
    }

    .upaep__slide-footer {
        display: flex;
        flex-shrink: 0;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        padding: calc(1rem - .5rem * .5);
        border-top: 1px solid rgba(255, 255, 255, 0.15);
        border-bottom-right-radius: calc(.5rem - (1px));
        border-bottom-left-radius: calc(.5rem - (1px));
    }

    .upaep__slide-body {
        position: relative;
        flex: 1 1 auto;
        padding: 1rem;
    }

    .upaep__slide-show {
        width: 100%;
        height: auto;
        padding: 1.5rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .upaep__slide-close {
        width: 30px;
        height: 30px;
        border-radius: 50px;
        border: 2px solid;
        margin: 5px;
        font-size: var(--upaep-fz20);
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }

    .upaep__slide-btn.__top-right,
    .upaep__slide-close.__top-right {
        position: absolute;
        inset: 0 0 auto auto;
    }

    .upaep__slide-close.__top-left,
    .upaep__slide-btn.__top-left {
        position: absolute;
        inset: 0 auto auto 0;
    }

    .upaep__slide-close.__top-center,
    .upaep__slide-btn.__top-center {
        position: absolute;
        inset: 0 auto auto 50%;
    }

    .upaep__slide-close.__bottom-right,
    .upaep__slide-btn.__bottom-right {
        position: absolute;
        inset: auto 0 0 auto;
    }

    .upaep__slide-close.__bottom-left,
    .upaep__slide-btn.__bottom-left {
        position: absolute;
        inset: auto 0 auto 0;
    }

    .upaep__slide-close.__bottom-center,
    .upaep__slide-btn.__bottom-center {
        position: absolute;
        inset: auto 0 auto 50%;
    }

    .is-slide_inright {
        animation: 1s slide_inright both;
    }

    .is-slide_outright {
        animation: 1s slide_outright both;
    }

    .is-slide_inleft {
        animation: 1s slide_inleft both;
    }

    .is-slide_outleft {
        animation: 1s slide_outleft both;
    }

    .upaep__slide-left:not(.is-active) {
        transform: translateX(-150%);
    }

    .upaep__slide-right:not(.is-active) {
        transform: translateX(150%);
    }

    @keyframes slide_inright {
        0% {
            transform: translate3d(100%, 0, 0);
            visibility: visible;
        }

        100% {
            transform: translateZ(0);
        }
    }

    @keyframes slide_outright {
        0% {
            transform: translateZ(0);
        }

        100% {
            transform: translate3d(100%, 0, 0);
            visibility: hidden;
        }
    }

    @keyframes slide_inleft {
        0% {
            transform: translate3d(-100%, 0, 0);
            visibility: visible;
        }

        100% {
            transform: translateZ(0);
        }
    }

    @keyframes slide_outleft {
        0% {
            transform: translateZ(0);
        }

        100% {
            transform: translate3d(-100%, 0, 0);
            visibility: hidden;
        }
    }
}

/*? ------ Splide ------ */
.upaep__splide {
    --upaep-splide-width: 100%;
    --upaep-splide-height: 100dvh;
    --upaep-splide-margin: 0 auto;
    --upaep-splide-padding: 0;
    --upaep-splide-inner-width: 100%;
    --upaep-splide-inner-height: 100%;
    --upaep-splide-inner-margin: 0;
    --upaep-splide-inner-padding: 0;
    --upaep-splide-inner-transition: transform .5s ease-in;
    --upaep-splide-item-width: 100%;
    --upaep-splide-item-height: 100%;
    --upaep-splide-item-margin: 0;
    --upaep-splide-item-padding: 1rem;
    --upaep-splide-item-transition: transform .5s ease-in;
    width: var(--upaep-splide-width);
    height: var(--upaep-splide-height);
    margin: var(--upaep-splide-margin);
    padding: var(--upaep-splide-padding);
    position: relative;
    overflow: hidden;
    list-style: none;
    z-index: 1;
    display: block;

    &.is-toLeft {
        .upaep__splide-inner {
            &.is-change {
                transform: translate(-100%, 0);
            }
        }
    }

    &.is-toRight {
        .upaep__splide-inner {
            transform: translate(-100%, 0);

            &.is-change {
                transform: translate(0, 0);
            }
        }
    }

    .upaep__splide-inner {
        width: var(--upaep-splide-inner-width);
        height: var(--upaep-splide-inner-height);
        margin: var(--upaep-splide-inner-margin);
        padding: var(--upaep-splide-inner-padding);
        transition: var(--upaep-splide-inner-transition);
        position: relative;
        z-index: 1;
        display: flex;
        box-sizing: content-box;

        &.is-change {
            transform: translate(-100%, 0);
        }
    }

    .upaep__splide-item {
        width: var(--upaep-splide-item-width);
        height: var(--upaep-splide-item-height);
        margin: var(--upaep-splide-item-margin);
        padding: var(--upaep-splide-item-padding);
        transition: var(--upaep-splide-item-transition);
        flex-shrink: 0;
        position: relative;
        display: block;
    }

    &.__vertical {
        &.is-toTop {
            .upaep__splide-inner {
                &.is-change {
                    transform: translate(0, -100%);
                }
            }
        }

        &.is-toBottom {
            .upaep__splide-inner {
                transform: translate(0, -100%);

                &.is-change {
                    transform: translate(0, 0);
                }
            }
        }

        .upaep__splide-inner {
            flex-direction: column;

            &.is-change {
                transform: translate(0, -100%);
            }
        }
    }


}

/*? ------ carousel ------ */
.upaep__carousel {
    --upaep-slider-width: 100%;
    --upaep-slider-height: 100%;
    --upaep-slider-margin: 0 auto;
    --upaep-slider-padding: 0;
    --upaep-slider-bg: ;
    --upaep-slider-wrapper-width: 100%;
    --upaep-slider-wrapper-height: 100%;
    --upaep-slider-wrapper-padding: 0;
    --upaep-slider-wrapper-margin: 0;
    --upaep-slider-wrapper-transition-timing: ;
    --upaep-slider-slide-width: 100%;
    --upaep-slider-slide-height: 100%;
    --upaep-slider-slide-padding: 0;
    --upaep-slider-slide-margin: 0 10px 0 0;
    --upaep-slider-slide-bg: ;
    --upaep-slider-navigation-size: 30px;
    --upaep-slider-navigation-fz: var(--upaep-fz30);
    --upaep-slider-navigation-margin: .5rem;
    --upaep-slider-navigation-color: var(--upaep-color-white);
    --upaep-slider-navigation-bg: ;
    --upaep-slider-navigation-next-inset: 50% 10px auto auto;
    --upaep-slider-navigation-prev-inset: 50% auto auto 10px;
    --upaep-slider-pagination-width: 100%;
    --upaep-slider-pagination-inset: auto auto 10px 0;
    --upaep-slider-pagination-bullet-width: 15px;
    --upaep-slider-pagination-bullet-height: 15px;
    --upaep-slider-pagination-bullet-margin: 0;
    --upaep-slider-pagination-bullet-border-radius: 50%;
    --upaep-slider-pagination-bullet-bg: var(--upaep-color-border-grey);
    --upaep-slider-pagination-bullet-opacity: .5;
    --upaep-slider-pagination-bullet-active-bg: var(--ui-neutral, var(--upaep-color-dark-grey));
    --upaep-slider-pagination-bullet-active-opacity: 1;
    width: var(--upaep-slider-width);
    height: var(--upaep-slider-height);
    margin: var(--upaep-slider-margin);
    padding: var(--upaep-slider-padding);
    background: var(--upaep-slider-bg);
    position: relative;
    overflow: hidden;
    list-style: none;
    z-index: 1;
    display: block;

    &.__vertical {
        touch-action: pan-x;

        .upaep__carousel-wrapper {
            flex-direction: column;
        }
    }

    &:not(.__vertical) {
        touch-action: pan-y;
    }

    &.__autoheight {
        --upaep-slider-height: auto;
        --upaep-slider-slide-height: auto;

        .upaep__carousel-wrapper {
            align-items: flex-start;
            transition-property: transform, height
        }
    }

    .upaep__carousel-wrapper {
        width: var(--upaep-slider-wrapper-width);
        height: var(--upaep-slider-wrapper-height);
        padding: var(--upaep-slider-wrapper-padding);
        margin: var(--upaep-slider-wrapper-margin);
        position: relative;
        z-index: 1;
        display: flex;
        transition: transform .3s;
        box-sizing: content-box;
    }

    .upaep__carousel-slide {
        width: var(--upaep-slider-slide-width);
        height: var(--upaep-slider-slide-height);
        padding: var(--upaep-slider-slide-padding);
        margin: var(--upaep-slider-slide-margin);
        background: var(--upaep-slider-slide-bg);
        flex-shrink: 0;
        position: relative;
        transition-property: transform;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .upaep__carousel-next,
    .upaep__carousel-prev {
        position: absolute;
        width: calc(var(--upaep-slider-navigation-size));
        height: var(--upaep-slider-navigation-size);
        margin: var(--upaep-slider-navigation-margin);
        color: var(--upaep-slider-navigation-color);
        background: var(--upaep-slider-navigation-bg);
        font-size: var(--upaep-slider-navigation-fz);
        filter: var(--upaep-drop-shadow);
        z-index: 10;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;

        &.__disabled {
            opacity: .35;
            cursor: auto;
            pointer-events: none
        }

        &.__hidden {
            opacity: 0;
            cursor: auto;
            pointer-events: none
        }
    }

    .upaep__carousel-next {
        inset: var(--upaep-slider-navigation-next-inset);
    }

    .upaep__carousel-prev {
        inset: var(--upaep-slider-navigation-prev-inset);
    }

    .thick-arrow-left {
        width: 25px;
        height: 25px;
        border: 10px solid #333;
        border-left: 0;
        border-top: 0;
        transform: rotate(135deg);
    }

    .thick-arrow-right {
        width: 25px;
        height: 25px;
        border: 10px solid #333;
        border-left: 0;
        border-top: 0;
        transform: rotate(315deg);
    }

    .thick-arrow-down {
        width: 25px;
        height: 25px;
        border: 10px solid #333;
        border-left: 0;
        border-top: 0;
        transform: rotate(45deg);
    }

    .thick-arrow-up {
        width: 25px;
        height: 25px;
        border: 10px solid #333;
        border-left: 0;
        border-top: 0;
        transform: rotate(225deg);
    }

    .upaep__carousel-pagination {
        width: var(--upaep-slider-pagination-width);
        inset: var(--upaep-slider-pagination-inset);
        position: absolute;
        text-align: center;
        transition: .3s opacity;
        transform: translate3d(0, 0, 0);
        z-index: 10;

        &.__hidden {
            opacity: 0;
        }

        &.__disabled {
            display: none;
        }

        &.__dynamic {
            overflow: hidden;
            font-size: 0;
        }

        &.__clickeable {
            .upaep__carousel-bullet {
                cursor: pointer;
            }
        }

        &:not(.__no-clickeable) {
            .upaep__carousel-bullet {
                cursor: pointer;
            }
        }

        &.__vertical {
            --upaep-slider-pagination-inset: 50% 10px auto auto;
            --upaep-slider-pagination-bullet-margin: 5px;

            .upaep__carousel-bullet {
                transform: translate3d(0px, -50%, 0);
            }
        }

        .upaep__carousel-bullet {
            width: var(--upaep-slider-pagination-bullet-width);
            height: var(--upaep-slider-pagination-bullet-height);
            margin: var(--upaep-slider-pagination-bullet-margin);
            border-radius: var(--upaep-slider-pagination-bullet-border-radius);
            background: var(--upaep-slider-pagination-bullet-bg);
            opacity: var(--upaep-slider-pagination-bullet-opacity);
            filter: var(--upaep-drop-shadow);
            display: inline-block;

            &.is-active {
                background: var(--upaep-slider-pagination-bullet-active-bg);
                opacity: var(--upaep-slider-pagination-bullet-active-opacity);
            }

            &:only-child {
                display: none;
            }
        }
    }

}

/*? ------ slider ------ */
.upaep__slider {
    --upaep-slider-width: 100%;
    --upaep-slider-height: 100%;
    --upaep-slider-margin: 0 auto;
    --upaep-slider-padding: 0;
    --upaep-slider-bg: var(--upaep-color-white);
    --upaep-slider-border-radius: 10px;
    --upaep-slider-wrapper-width: 100%;
    --upaep-slider-wrapper-height: 100%;
    --upaep-slider-wrapper-padding: 0;
    --upaep-slider-wrapper-margin: 0;
    --upaep-slider-wrapper-transition-timing: ;
    --upaep-slider-slide-width: 100%;
    --upaep-slider-slide-height: 100%;
    --upaep-slider-slide-padding: 0;
    --upaep-slider-slide-margin: 0 10px 0 0;
    --upaep-slider-slide-bg: var(--upaep-color-tenue-gray);
    --upaep-slider-navigation-size: 30px;
    --upaep-slider-navigation-fz: var(--upaep-fz30);
    --upaep-slider-navigation-margin: .5rem;
    --upaep-slider-navigation-color: var(--upaep-color-dark-grey);
    --upaep-slider-navigation-bg: ;
    --upaep-slider-navigation-next-inset: 45% 10px auto auto;
    --upaep-slider-navigation-prev-inset: 45% auto auto 10px;
    --upaep-slider-pagination-width: 100%;
    --upaep-slider-pagination-inset: auto auto 10px 0;
    --upaep-slider-pagination-bullet-width: 15px;
    --upaep-slider-pagination-bullet-height: 15px;
    --upaep-slider-pagination-bullet-margin: 0 5px;
    --upaep-slider-pagination-bullet-border-radius: 50%;
    --upaep-slider-pagination-bullet-bg: var(--upaep-color-border-grey);
    --upaep-slider-pagination-bullet-opacity: .5;
    --upaep-slider-pagination-bullet-active-bg: var(--ui-neutral, var(--upaep-color-dark-grey));
    --upaep-slider-pagination-bullet-active-opacity: 1;
    --upaep-slider-pagination-bullet-scale: ;
    --upaep-slider-pagination-bullet-scale-active: 1;
    --upaep-slider-pagination-bullet-scale-active-next: .8;
    --upaep-slider-pagination-bullet-scale-active-next-next: .6;
    --upaep-slider-pagination-bullet-scale-active-prev: .8;
    --upaep-slider-pagination-bullet-scale-active-prev-prev: .6;
    width: var(--upaep-slider-width);
    height: var(--upaep-slider-height);
    margin: var(--upaep-slider-margin);
    padding: var(--upaep-slider-padding);
    background: var(--upaep-slider-bg);
    border-radius: var(--upaep-slider-border-radius);
    position: relative;
    overflow: hidden;
    list-style: none;
    z-index: 1;
    display: block;

    &.__vertical {
        touch-action: pan-x;

        .upaep__slider-wrapper {
            flex-direction: column;
        }
    }

    &:not(.__vertical) {
        touch-action: pan-y;
    }

    &.__autoheight {
        --upaep-slider-height: auto;
        --upaep-slider-slide-height: auto;

        .upaep__slider-wrapper {
            align-items: flex-start;
            transition-property: transform, height
        }
    }

    &.__grid {
        &>.upaep__slider-wrapper {
            flex-wrap: wrap;
            flex-direction: column;
        }

        .upaep__slider-slide {
            transition: all .5s;
        }
    }

    &.__fade {
        &>.upaep__slider-wrapper {
            transform: none !important;
        }

        .upaep__slider-slide {
            animation: a_fadeIn .5s ease-in;
            position: absolute;

            &:not(.is-active) {
                display: none;
            }
        }
    }

    .upaep__slider-wrapper {
        width: var(--upaep-slider-wrapper-width);
        height: var(--upaep-slider-wrapper-height);
        padding: var(--upaep-slider-wrapper-padding);
        margin: var(--upaep-slider-wrapper-margin);
        position: relative;
        z-index: 1;
        display: flex;
        transition: transform .3s;
        box-sizing: content-box;
    }

    .upaep__slider-slide {
        width: var(--upaep-slider-slide-width);
        height: var(--upaep-slider-slide-height);
        padding: var(--upaep-slider-slide-padding);
        margin: var(--upaep-slider-slide-margin);
        background: var(--upaep-slider-slide-bg);
        flex-shrink: 0;
        position: relative;
        transition-property: transform;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .upaep__slider-next,
    .upaep__slider-prev {
        position: absolute;
        width: calc(var(--upaep-slider-navigation-size));
        height: var(--upaep-slider-navigation-size);
        margin: var(--upaep-slider-navigation-margin);
        color: var(--upaep-slider-navigation-color);
        background: var(--upaep-slider-navigation-bg);
        font-size: var(--upaep-slider-navigation-fz);
        filter: var(--upaep-drop-shadow);
        z-index: 10;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;

        &.__disabled {
            opacity: .35;
            cursor: auto;
            pointer-events: none
        }

        &.__hidden {
            opacity: 0;
            cursor: auto;
            pointer-events: none
        }
    }

    .upaep__slider-next {
        inset: var(--upaep-slider-navigation-next-inset);
    }

    .upaep__slider-prev {
        inset: var(--upaep-slider-navigation-prev-inset);
    }

    .upaep__slider-pagination {
        width: var(--upaep-slider-pagination-width);
        inset: var(--upaep-slider-pagination-inset);
        position: absolute;
        text-align: center;
        transition: .3s opacity;
        transform: translate3d(0, 0, 0);
        z-index: 10;

        &.__hidden {
            opacity: 0;
        }

        &.__disabled {
            display: none;
        }

        &.__dynamic {
            overflow: hidden;
            font-size: 0;
        }

        &.__clickeable {
            .upaep__slider-bullet {
                cursor: pointer;
            }
        }

        &:not(.__no-clickeable) {
            .upaep__slider-bullet {
                cursor: pointer;
            }
        }

        &.__vertical {
            --upaep-slider-pagination-inset: 50% 10px auto auto;
            --upaep-slider-pagination-bullet-margin: 5px;

            .upaep__slider-bullet {
                transform: translate3d(0px, -50%, 0);
            }
        }

        &.__dynamic {
            padding: .5rem 0;

            .upaep__slider-bullet {
                transition: all .5s ease-in;

                &.is-active {
                    scale: var(--upaep-slider-pagination-bullet-scale-active);
                }

                &.is-active-next {
                    scale: var(--upaep-slider-pagination-bullet-scale-active-next);
                }

                &.is-active-next-next {
                    scale: var(--upaep-slider-pagination-bullet-scale-active-next-next);
                }

                &.is-active-prev {
                    scale: var(--upaep-slider-pagination-bullet-scale-active-prev);
                }

                &.is-active-prev-prev {
                    scale: var(--upaep-slider-pagination-bullet-scale-active-prev-prev);
                }

                &:not(.is-active):not(.is-active-next):not(.is-active-next-next):not(.is-active-prev):not(.is-active-prev-prev) {
                    display: none;
                }
            }
        }

        .upaep__slider-bullet {
            width: var(--upaep-slider-pagination-bullet-width);
            height: var(--upaep-slider-pagination-bullet-height);
            margin: var(--upaep-slider-pagination-bullet-margin);
            border-radius: var(--upaep-slider-pagination-bullet-border-radius);
            background: var(--upaep-slider-pagination-bullet-bg);
            opacity: var(--upaep-slider-pagination-bullet-opacity);
            scale: var(--upaep-slider-pagination-bullet-scale);
            filter: var(--upaep-drop-shadow);
            display: inline-block;
            transition: all 1s ease-in;

            &.is-active {
                background: var(--upaep-slider-pagination-bullet-active-bg);
                opacity: var(--upaep-slider-pagination-bullet-active-opacity);
                transition: all 1s ease-in;
            }

            &:only-child {
                display: none;
            }
        }
    }

}

/*? ------ Navbar ------ */
.upaep__navbar {
    --upaep-navbar-width: 100%;
    --upaep-navbar-height: auto;
    --upaep-navbar-padding: .5rem .35rem;
    --upaep-navbar-margin: 0;
    --upaep-navbar-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-navbar-boxshadow: var(--ui-shadow, var(--upaep-box-shadow));
    --upaep-navbar-brand-fz: var(--upaep-fz16);
    --upaep-navbar-brand-fw: var(--upaep-fw-regular);
    --upaep-navbar-brand-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-navbar-brand-bg: transparent;
    --upaep-navbar-items-width: auto;
    --upaep-navbar-items-height: auto;
    --upaep-navbar-items-padding: .5rem;
    --upaep-navbar-items-margin: 0;
    --upaep-navbar-item-padding: .5rem .35rem;
    --upaep-navbar-item-margin: 0;
    --upaep-navbar-item-fz: var(--upaep-fz16);
    --upaep-navbar-item-fw: var(--upaep-fw-regular);
    --upaep-navbar-item-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-navbar-item-bg: transparent;
    --upaep-navbar-item-hover-fz: var(--upaep-fz16);
    --upaep-navbar-item-hover-fw: var(--upaep-fw-regular);
    --upaep-navbar-item-hover-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-navbar-item-hover-bg: transparent;
    --upaep-navbar-item-active-fz: var(--upaep-fz16);
    --upaep-navbar-item-active-fw: var(--upaep-fw-regular);
    --upaep-navbar-item-active-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-navbar-item-active-bg: transparent;
    width: 100%;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;

    .upaep__navbar-content {
        width: var(--upaep-navbar-width);
        height: var(--upaep-navbar-height);
        padding: var(--upaep-navbar-padding);
        margin: var(--upaep-navbar-margin);
        background: var(--upaep-navbar-bg);
        box-shadow: var(--upaep-navbar-boxshadow);
        display: flex;
        flex-wrap: inherit;
        align-items: center;
        justify-content: space-between;
    }

    .upaep__navbar-brand {
        text-decoration: none;
        font-size: var(--upaep-navbar-brand-fz);
        font-weight: var(--upaep-navbar-brand-fw);
        color: var(--upaep-navbar-brand-color);
        background: var(--upaep-navbar-brand-bg);
    }

    .upaep__navbar-collapse {
        background: var(--upaep-navbar-bg);
        flex-basis: 100%;
        flex-grow: 1;
        align-items: center;
    }

    .upaep__navbar-items {
        width: var(--upaep-navbar-items-width);
        height: var(--upaep-navbar-items-height);
        padding: var(--upaep-navbar-items-padding);
        margin: var(--upaep-navbar-items-margin);
        display: flex;
        list-style: none;
        gap: .5rem;

        .upaep__navbar-item,
        .upaep__navbar-link {
            padding: var(--upaep-navbar-item-padding);
            margin: var(--upaep-navbar-item-margin);
            font-size: var(--upaep-navbar-item-fz);
            font-weight: var(--upaep-navbar-item-fw);
            color: var(--upaep-navbar-item-color);
            background: var(--upaep-navbar-item-bg);
            text-decoration: none;

            &:hover:not(.is-active) {
                background: var(--upaep-navbar-item-hover-bg);

                &:first-child {
                    font-size: var(--upaep-navbar-item-hover-fz);
                    font-weight: var(--upaep-navbar-item-hover-fw);
                    color: var(--upaep-navbar-item-hover-color);
                }
            }

            &.is-active {
                font-size: var(--upaep-navbar-item-active-fz);
                font-weight: var(--upaep-navbar-item-active-fw);
                color: var(--upaep-navbar-item-active-color);
                background: var(--upaep-navbar-item-active-bg);
            }
        }
    }
}

/** ------- nuevo ------- */
.upaep__navbar.__menu {
    --upaep-navbar-items-padding: 0 .5rem;
    --upaep-navbar-item-fz: var(--upaep-fz20);
    --upaep-navbar-item-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-navbar-item-hover-fz: var(--upaep-fz20);
    --upaep-navbar-item-hover-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-navbar-item-active-fz: var(--upaep-fz20);
    --upaep-navbar-item-active-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-navbar-logo-width: 120px;
    --upaep-navbar-logo-height: 100%;
    --upaep-navbar-principal-width: 100%;
    --upaep-navbar-principal-height: 28px;
    --upaep-navbar-principal-padding: .5rem 1rem;
    --upaep-navbar-principal-bg: var(--ui-surface-inverse, var(--upaep-color-black));
    --upaep-navbar-menu-principal-color: var(--ui-on-surface-inverse, var(--upaep-color-white));
    --upaep-navbar-menu-principal-fz: var(--upaep-fz12);
    --upaep-navbar-menu-principal-fw: var(--upaep-fw-regular);
    --upaep-navbar-btn-mark-size: .45em;
    --upaep-navbar-btn-mark-color: currentColor;
    --upaep-navbar-primary-width: 100%;
    --upaep-navbar-primary-height: auto;
    --upaep-navbar-primary-padding: 0;
    --upaep-navbar-primary-bg: #E6E6E6;
    --upaep-navbar-primary-title-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-navbar-primary-title-fz: var(--upaep-fz24);
    --upaep-navbar-primary-title-fw: var(--upaep-fw-bold);
    --upaep-navbar-secondary-width: 100%;
    --upaep-navbar-secondary-height: 47px;
    --upaep-navbar-secondary-padding: 0 1.25rem;
    --upaep-navbar-secondary-bg: var(--ui-surface-inverse, var(--upaep-color-black));
    --upaep-navbar-secondary-title-color: var(--ui-on-surface-inverse, var(--upaep-color-white));
    --upaep-navbar-secondary-title-fz: var(--upaep-fz20);
    --upaep-navbar-secondary-title-fw: var(--upaep-fw-bold);

    .upaep__navbar-principal {
        width: var(--upaep-navbar-principal-width);
        height: var(--upaep-navbar-principal-height);
        padding: var(--upaep-navbar-principal-padding);
        background: var(--upaep-navbar-principal-bg);

        .upaep__navbar-menu-principal {
            color: var(--upaep-navbar-menu-principal-color);
            font-size: var(--upaep-navbar-menu-principal-fz);
            font-weight: var(--upaep-navbar-menu-principal-fw);
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: end;

            .upaep__btn {
                --upaep-btn-width: 90px;
                --upaep-btn-margin: 0;
                --upaep-btn-padding: 0;
                --upaep-btn-border-radius: 5px;
                --upaep-btn-color: var(--upaep-color-white);
                --upaep-btn-bg: none;
                --upaep-btn-border-color: none;
                --upaep-btn-hover-color: var(--ui-surface-hover, #dee2e6);
                --upaep-btn-hover-bg: none;
                --upaep-btn-hover-border-color: none;
                --upaep-btn-disabled-color: var(--upaep-color-white);
                --upaep-btn-disabled-bg: none;
                --upaep-btn-disabled-border-color: none;

                &::after {
                    display: inline-block;
                    margin-left: 0.255em;
                    vertical-align: 0.255em;
                    content: "";
                    border-top: var(--upaep-navbar-btn-mark-size) solid var(--upaep-navbar-btn-mark-color);
                    border-right: var(--upaep-navbar-btn-mark-size) solid transparent;
                    border-bottom: 0;
                    border-left: var(--upaep-navbar-btn-mark-size) solid transparent;
                    transition: transform .25s ease-in;
                }

                /* &:hover::after {
                    transform: rotate(-180deg);
                } */
            }

        }
    }

    .upaep__navbar-primary {
        width: var(--upaep-navbar-primary-width);
        height: var(--upaep-navbar-primary-height);
        padding: var(--upaep-navbar-primary-padding);
        background: var(--upaep-navbar-primary-bg);
        display: flex;
        align-items: center;
        gap: 2rem;

        .upaep__navbar-logo {
            width: var(--upaep-navbar-logo-width);
            height: var(--upaep-navbar-logo-height);
            margin: 0 0 0 1rem;
        }

        .upaep__navbar-primary-title {
            color: var(--upaep-navbar-primary-title-color);
            font-size: var(--upaep-navbar-primary-title-fz);
            font-weight: var(--upaep-navbar-primary-title-fw);
            width: 100%;
        }

        .upaep__navbar-primary-inner {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: end;
        }

        .upaep__navbar-primary-language {
            cursor: pointer;
            align-content: center;

            .upaep__img {
                --upaep-img-width: 30px;
                --upaep-img-height: 30px;
            }
        }

        .upaep__navbar-menu {
            width: auto;
            height: 100%;

            .upaep__btn {
                --upaep-btn-width: 125px;
                --upaep-btn-margin: 0;
                --upaep-btn-padding: .5rem;
                --upaep-btn-border-radius: 0;
                --upaep-btn-fz: var(--upaep-fz14);
                --upaep-btn-cont-fz: var(--upaep-fz14);
                --upaep-btn-color: var(--upaep-color-white);
                --upaep-btn-bg: var(--upaep-color-primary);
                --upaep-btn-border-color: var(--upaep-color-primary);
                --upaep-btn-hover-color: var(--upaep-color-white);
                --upaep-btn-hover-bg: var(--upaep-color-primary-hover);
                --upaep-btn-hover-border-color: var(--upaep-color-primary-hover);
                --upaep-btn-disabled-color: var(--upaep-color-white);
                --upaep-btn-disabled-bg: var(--upaep-color-primary);
                --upaep-btn-disabled-border-color: var(--upaep-color-primary);
                clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);
                justify-content: end;
            }
        }
    }

    .upaep__navbar-secondary {
        width: var(--upaep-navbar-secondary-width);
        height: var(--upaep-navbar-secondary-height);
        padding: var(--upaep-navbar-secondary-padding);
        background: var(--upaep-navbar-secondary-bg);
        display: flex;
        align-items: center;
        gap: 2rem;

        .upaep__navbar-secondary-inner {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: end;
            gap: 1rem;
        }

        .upaep__navbar-secondary-title {
            width: 100%;
            color: var(--upaep-navbar-secondary-title-color);
            font-size: var(--upaep-navbar-secondary-title-fz);
            font-weight: var(--upaep-navbar-secondary-title-fw);
        }

        .upaep__navbar-secondary-language {
            align-content: center;
            cursor: pointer;

            .upaep__img {
                --upaep-img-width: 30px;
                --upaep-img-height: 30px;
            }
        }

        .upaep__navbar-menu-secondary {
            color: var(--upaep-navbar-menu-principal-color);
            font-size: var(--upaep-navbar-menu-principal-fz);
            font-weight: var(--upaep-navbar-menu-principal-fw);
            width: auto;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: end;

            .upaep__btn {
                --upaep-btn-width: 40px;
                --upaep-btn-height: 100%;
                --upaep-btn-margin: 0;
                --upaep-btn-padding: 0;
                --upaep-btn-border-radius: 5px;
                --upaep-btn-color: var(--upaep-color-white);
                --upaep-btn-bg: none;
                --upaep-btn-border-color: none;
                --upaep-btn-hover-color: var(--ui-surface-hover, #dee2e6);
                --upaep-btn-hover-bg: none;
                --upaep-btn-hover-border-color: none;
                --upaep-btn-disabled-color: var(--upaep-color-white);
                --upaep-btn-disabled-bg: none;
                --upaep-btn-disabled-border-color: none;

                &::after {
                    display: inline-block;
                    margin-left: 0;
                    vertical-align: 0.255em;
                    content: "";
                    border-top: var(--upaep-navbar-btn-mark-size) solid var(--upaep-navbar-btn-mark-color);
                    border-right: var(--upaep-navbar-btn-mark-size) solid transparent;
                    border-bottom: 0;
                    border-left: var(--upaep-navbar-btn-mark-size) solid transparent;
                    transition: transform .25s ease-in;
                }

                /* &:hover::after {
                    transform: rotate(-180deg);
                } */
            }

        }
    }

}

/*? ------ icons / logos ------ */
.upaep__icon {
    --upaep-icon-width: 50px;
    --upaep-icon-height: 50px;
    --upaep-icon-padding: .5rem;
    --upaep-icon-margin: 0;
    --upaep-icon-bg: transparent;
    --upaep-icon-border-radius: 0;
    --upaep-icon: ;
    --upaep-logo-size: 25px;
    width: var(--upaep-icon-width);
    height: var(--upaep-icon-height);
    padding: var(--upaep-icon-padding);
    margin: var(--upaep-icon-margin);
    background: var(--upaep-icon-bg);
    border-radius: var(--upaep-icon-border-radius);
    position: relative;

    &::before {
        content: '';
        position: absolute;
        inset: 0;
        background: var(--upaep-icon) center center no-repeat;
        background-size: var(--upaep-logo-size);
    }

    &.__ {
        --upaep-icon: url('');

        &.__white {
            --upaep-icon: url('');
        }
    }

    &.__angle-left {
        --upaep-icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTYiIHdpZHRoPSIxMCIgdmlld0JveD0iMCAwIDMyMCA1MTIiPjwhLS0hRm9udCBBd2Vzb21lIEZyZWUgNi41LjEgYnkgQGZvbnRhd2Vzb21lIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20gTGljZW5zZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tL2xpY2Vuc2UvZnJlZSBDb3B5cmlnaHQgMjAyNCBGb250aWNvbnMsIEluYy4tLT48cGF0aCBkPSJNNDEuNCAyMzMuNGMtMTIuNSAxMi41LTEyLjUgMzIuOCAwIDQ1LjNsMTYwIDE2MGMxMi41IDEyLjUgMzIuOCAxMi41IDQ1LjMgMHMxMi41LTMyLjggMC00NS4zTDEwOS4zIDI1NiAyNDYuNiAxMTguNmMxMi41LTEyLjUgMTIuNS0zMi44IDAtNDUuM3MtMzIuOC0xMi41LTQ1LjMgMGwtMTYwIDE2MHoiLz48L3N2Zz4=');

        &.__white {
            --upaep-icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTYiIHdpZHRoPSIxMCIgdmlld0JveD0iMCAwIDMyMCA1MTIiPjwhLS0hRm9udCBBd2Vzb21lIEZyZWUgNi41LjEgYnkgQGZvbnRhd2Vzb21lIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20gTGljZW5zZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tL2xpY2Vuc2UvZnJlZSBDb3B5cmlnaHQgMjAyNCBGb250aWNvbnMsIEluYy4tLT48cGF0aCBkPSJNNDEuNCAyMzMuNGMtMTIuNSAxMi41LTEyLjUgMzIuOCAwIDQ1LjNsMTYwIDE2MGMxMi41IDEyLjUgMzIuOCAxMi41IDQ1LjMgMHMxMi41LTMyLjggMC00NS4zTDEwOS4zIDI1NiAyNDYuNiAxMTguNmMxMi41LTEyLjUgMTIuNS0zMi44IDAtNDUuM3MtMzIuOC0xMi41LTQ1LjMgMGwtMTYwIDE2MHoiIGZpbGw9IiNmZmZmZmYiLz48L3N2Zz4=');
        }
    }

    &.__menu-hamburguer {
        --upaep-icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTYiIHdpZHRoPSIxNCIgdmlld0JveD0iMCAwIDQ0OCA1MTIiPjwhLS0hRm9udCBBd2Vzb21lIEZyZWUgNi41LjEgYnkgQGZvbnRhd2Vzb21lIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20gTGljZW5zZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tL2xpY2Vuc2UvZnJlZSBDb3B5cmlnaHQgMjAyNCBGb250aWNvbnMsIEluYy4tLT48cGF0aCBkPSJNMCA5NkMwIDc4LjMgMTQuMyA2NCAzMiA2NEg0MTZjMTcuNyAwIDMyIDE0LjMgMzIgMzJzLTE0LjMgMzItMzIgMzJIMzJDMTQuMyAxMjggMCAxMTMuNyAwIDk2ek0wIDI1NmMwLTE3LjcgMTQuMy0zMiAzMi0zMkg0MTZjMTcuNyAwIDMyIDE0LjMgMzIgMzJzLTE0LjMgMzItMzIgMzJIMzJjLTE3LjcgMC0zMi0xNC4zLTMyLTMyek00NDggNDE2YzAgMTcuNy0xNC4zIDMyLTMyIDMySDMyYy0xNy43IDAtMzItMTQuMy0zMi0zMnMxNC4zLTMyIDMyLTMySDQxNmMxNy43IDAgMzIgMTQuMyAzMiAzMnoiLz48L3N2Zz4=');

        &.__white {
            --upaep-icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTYiIHdpZHRoPSIxNCIgdmlld0JveD0iMCAwIDQ0OCA1MTIiPjwhLS0hRm9udCBBd2Vzb21lIEZyZWUgNi41LjEgYnkgQGZvbnRhd2Vzb21lIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20gTGljZW5zZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tL2xpY2Vuc2UvZnJlZSBDb3B5cmlnaHQgMjAyNCBGb250aWNvbnMsIEluYy4tLT48cGF0aCBkPSJNMCA5NkMwIDc4LjMgMTQuMyA2NCAzMiA2NEg0MTZjMTcuNyAwIDMyIDE0LjMgMzIgMzJzLTE0LjMgMzItMzIgMzJIMzJDMTQuMyAxMjggMCAxMTMuNyAwIDk2ek0wIDI1NmMwLTE3LjcgMTQuMy0zMiAzMi0zMkg0MTZjMTcuNyAwIDMyIDE0LjMgMzIgMzJzLTE0LjMgMzItMzIgMzJIMzJjLTE3LjcgMC0zMi0xNC4zLTMyLTMyek00NDggNDE2YzAgMTcuNy0xNC4zIDMyLTMyIDMySDMyYy0xNy43IDAtMzItMTQuMy0zMi0zMnMxNC4zLTMyIDMyLTMySDQxNmMxNy43IDAgMzIgMTQuMyAzMiAzMnoiIGZpbGw9IiNmZmZmZmYiLz48L3N2Zz4=');
        }
    }

    &.__xmark {
        --upaep-icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTYiIHdpZHRoPSIxMiIgdmlld0JveD0iMCAwIDM4NCA1MTIiPjwhLS0hRm9udCBBd2Vzb21lIEZyZWUgNi41LjEgYnkgQGZvbnRhd2Vzb21lIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20gTGljZW5zZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tL2xpY2Vuc2UvZnJlZSBDb3B5cmlnaHQgMjAyNCBGb250aWNvbnMsIEluYy4tLT48cGF0aCBkPSJNMzQyLjYgMTUwLjZjMTIuNS0xMi41IDEyLjUtMzIuOCAwLTQ1LjNzLTMyLjgtMTIuNS00NS4zIDBMMTkyIDIxMC43IDg2LjYgMTA1LjRjLTEyLjUtMTIuNS0zMi44LTEyLjUtNDUuMyAwcy0xMi41IDMyLjggMCA0NS4zTDE0Ni43IDI1NiA0MS40IDM2MS40Yy0xMi41IDEyLjUtMTIuNSAzMi44IDAgNDUuM3MzMi44IDEyLjUgNDUuMyAwTDE5MiAzMDEuMyAyOTcuNCA0MDYuNmMxMi41IDEyLjUgMzIuOCAxMi41IDQ1LjMgMHMxMi41LTMyLjggMC00NS4zTDIzNy4zIDI1NiAzNDIuNiAxNTAuNnoiLz48L3N2Zz4=');

        &.__white {
            --upaep-icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTYiIHdpZHRoPSIxMiIgdmlld0JveD0iMCAwIDM4NCA1MTIiPjwhLS0hRm9udCBBd2Vzb21lIEZyZWUgNi41LjEgYnkgQGZvbnRhd2Vzb21lIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20gTGljZW5zZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tL2xpY2Vuc2UvZnJlZSBDb3B5cmlnaHQgMjAyNCBGb250aWNvbnMsIEluYy4tLT48cGF0aCBkPSJNMzQyLjYgMTUwLjZjMTIuNS0xMi41IDEyLjUtMzIuOCAwLTQ1LjNzLTMyLjgtMTIuNS00NS4zIDBMMTkyIDIxMC43IDg2LjYgMTA1LjRjLTEyLjUtMTIuNS0zMi44LTEyLjUtNDUuMyAwcy0xMi41IDMyLjggMCA0NS4zTDE0Ni43IDI1NiA0MS40IDM2MS40Yy0xMi41IDEyLjUtMTIuNSAzMi44IDAgNDUuM3MzMi44IDEyLjUgNDUuMyAwTDE5MiAzMDEuMyAyOTcuNCA0MDYuNmMxMi41IDEyLjUgMzIuOCAxMi41IDQ1LjMgMHMxMi41LTMyLjggMC00NS4zTDIzNy4zIDI1NiAzNDIuNiAxNTAuNnoiIGZpbGw9IiNmZmZmZmYiLz48L3N2Zz4=');
        }
    }
}

.upaep__logo {
    --upaep-logo-width: 100px;
    --upaep-logo-height: 50px;
    --upaep-logo-padding: .5rem;
    --upaep-logo-margin: 0;
    --upaep-logo-bg: transparent;
    --upaep-logo-border-radius: 0;
    --upaep-logo: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNS4zLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDEzMC43IDM3IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxMzAuNyAzNzsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4NCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9DQoJLnN0MXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xXyk7ZmlsbDojODc4RTk0O30NCgkuc3Qye2NsaXAtcGF0aDp1cmwoI1NWR0lEXzJfKTt9DQoJLnN0M3tjbGlwLXBhdGg6dXJsKCNTVkdJRF8zXyk7fQ0KCS5zdDR7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNF8pO30NCgkuc3Q1e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzVfKTtmaWxsOiNGRkZGRkY7fQ0KCS5zdDZ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNV8pO2ZpbGw6I0UxMDAyMzt9DQo8L3N0eWxlPg0KPGc+DQoJPHJlY3QgY2xhc3M9InN0MCIgd2lkdGg9IjEzMC43IiBoZWlnaHQ9IjM3Ii8+DQoJPGc+DQoJCTxnPg0KCQkJPGc+DQoJCQkJPGRlZnM+DQoJCQkJCTxyZWN0IGlkPSJTVkdJRF8yMF8iIHg9IjMuOCIgeT0iMy4zIiB3aWR0aD0iMTIzLjMiIGhlaWdodD0iMzAuMyIvPg0KCQkJCTwvZGVmcz4NCgkJCQk8Y2xpcFBhdGggaWQ9IlNWR0lEXzFfIj4NCgkJCQkJPHVzZSB4bGluazpocmVmPSIjU1ZHSURfMjBfIiAgc3R5bGU9Im92ZXJmbG93OnZpc2libGU7Ii8+DQoJCQkJPC9jbGlwUGF0aD4NCgkJCQk8cmVjdCB4PSIzNy43IiB5PSIzLjMiIGNsYXNzPSJzdDEiIHdpZHRoPSI4OS40IiBoZWlnaHQ9IjMwLjMiLz4NCgkJCTwvZz4NCgkJCTxnPg0KCQkJCTxkZWZzPg0KCQkJCQk8cmVjdCBpZD0iU1ZHSURfMTJfIiB4PSIzLjgiIHk9IjMuMyIgd2lkdGg9IjEyMy4zIiBoZWlnaHQ9IjMwLjMiLz4NCgkJCQk8L2RlZnM+DQoJCQkJPGNsaXBQYXRoIGlkPSJTVkdJRF8yXyI+DQoJCQkJCTx1c2UgeGxpbms6aHJlZj0iI1NWR0lEXzEyXyIgIHN0eWxlPSJvdmVyZmxvdzp2aXNpYmxlOyIvPg0KCQkJCTwvY2xpcFBhdGg+DQoJCQkJPGcgY2xhc3M9InN0MiI+DQoJCQkJCTxnPg0KCQkJCQkJPGRlZnM+DQoJCQkJCQkJPHJlY3QgaWQ9IlNWR0lEXzE5XyIgeD0iMy44IiB5PSIzLjMiIHdpZHRoPSIxMjMuMyIgaGVpZ2h0PSIzMC4zIi8+DQoJCQkJCQk8L2RlZnM+DQoJCQkJCQk8ZGVmcz4NCgkJCQkJCQk8cmVjdCBpZD0iU1ZHSURfMThfIiB4PSIzLjgiIHk9IjMuMyIgd2lkdGg9IjEyMy4zIiBoZWlnaHQ9IjMwLjMiLz4NCgkJCQkJCTwvZGVmcz4NCgkJCQkJCTxkZWZzPg0KCQkJCQkJCTxyZWN0IGlkPSJTVkdJRF8xNF8iIHg9IjMuOCIgeT0iMy4zIiB3aWR0aD0iMTIzLjMiIGhlaWdodD0iMzAuMyIvPg0KCQkJCQkJPC9kZWZzPg0KCQkJCQkJPGNsaXBQYXRoIGlkPSJTVkdJRF8zXyI+DQoJCQkJCQkJPHVzZSB4bGluazpocmVmPSIjU1ZHSURfMTlfIiAgc3R5bGU9Im92ZXJmbG93OnZpc2libGU7Ii8+DQoJCQkJCQk8L2NsaXBQYXRoPg0KCQkJCQkJPGNsaXBQYXRoIGlkPSJTVkdJRF80XyIgY2xhc3M9InN0MyI+DQoJCQkJCQkJPHVzZSB4bGluazpocmVmPSIjU1ZHSURfMThfIiAgc3R5bGU9Im92ZXJmbG93OnZpc2libGU7Ii8+DQoJCQkJCQk8L2NsaXBQYXRoPg0KCQkJCQkJPGNsaXBQYXRoIGlkPSJTVkdJRF81XyIgY2xhc3M9InN0NCI+DQoJCQkJCQkJPHVzZSB4bGluazpocmVmPSIjU1ZHSURfMTRfIiAgc3R5bGU9Im92ZXJmbG93OnZpc2libGU7Ii8+DQoJCQkJCQk8L2NsaXBQYXRoPg0KCQkJCQkJPHBhdGggY2xhc3M9InN0NSIgZD0iTTExMS41LDE4LjN2LTQuNWgyLjJjMS42LDAsMi41LDAuOCwyLjUsMi4zYzAsMS40LTAuOCwyLjMtMi41LDIuM0gxMTEuNXogTTExMS41LDIyLjJoMi40DQoJCQkJCQkJYzQuNCwwLDYuOS0yLjYsNi45LTYuMXMtMi41LTYuMi02LjktNi4yaC03LjF2MTcuMmg0LjdWMjIuMnogTTkxLjgsMjcuMWgxMi42di0zLjloLTcuOXYtM2g2LjR2LTMuN2gtNi40di0yLjloNy42VjkuOUg5MS44DQoJCQkJCQkJVjI3LjF6IE04MS42LDE4LjFsMS42LDMuNmgtMy4yTDgxLjYsMTguMXogTTg1LjYsMjcuMWg0LjhMODEuOSw5LjdjLTAuMS0wLjItMC4yLTAuMi0wLjMsMGwtOC41LDE3LjVoNC42bDAuOS0yLjFoNi4xDQoJCQkJCQkJTDg1LjYsMjcuMXogTTY2LjQsMTguM3YtNC41aDIuMmMxLjUsMCwyLjUsMC44LDIuNSwyLjNjMCwxLjQtMC44LDIuMy0yLjUsMi4zSDY2LjR6IE02Ni40LDIyLjJoMi40YzQuNCwwLDYuOS0yLjYsNi45LTYuMQ0KCQkJCQkJCVM3My4yLDEwLDY4LjgsMTBoLTcuMXYxNy4yaDQuN1YyMi4yeiBNNTEuNywyNy4zYzQuNCwwLDcuNi0yLjMsNy42LTYuOVY5LjloLTQuN3YxMC41YzAsMi0wLjksMy4xLTIuOSwzLjENCgkJCQkJCQljLTIsMC0yLjktMS4xLTIuOS0zLjFWOS45aC00Ljd2MTAuNkM0NC4xLDI1LjEsNDcuMywyNy4zLDUxLjcsMjcuMyIvPg0KCQkJCQkJPHJlY3QgeD0iMy44IiB5PSIzLjMiIGNsYXNzPSJzdDYiIHdpZHRoPSIzMC44IiBoZWlnaHQ9IjMwLjMiLz4NCgkJCQkJCTxwYXRoIGNsYXNzPSJzdDUiIGQ9Ik0yMi44LDIwLjljMCwyLjMtMS4xLDMuNi0zLjYsMy42cy0zLjYtMS4zLTMuNi0zLjZWOGgtMi42djEyLjhjMCwzLjgsMi41LDUuOCw2LjIsNS44czYuMi0yLDYuMi01LjhWOA0KCQkJCQkJCWwtMi42LDIuNlYyMC45eiBNMjguNSwyMVY4aC0yLjZ2MTIuOGMwLDQuMi0yLjcsNi4zLTYuNyw2LjNzLTYuNy0yLjEtNi43LTYuM1Y4bDAsMEwxMCwxMC42VjIxYzAsNS43LDMuOSw4LjQsOS4yLDguNA0KCQkJCQkJCUMyNC42LDI5LjQsMjguNSwyNi42LDI4LjUsMjEiLz4NCgkJCQkJPC9nPg0KCQkJCTwvZz4NCgkJCTwvZz4NCgkJPC9nPg0KCTwvZz4NCjwvZz4NCjwvc3ZnPg0K');
    --upaep-logo-size: auto;
    width: var(--upaep-logo-width);
    height: var(--upaep-logo-height);
    padding: var(--upaep-logo-padding);
    margin: var(--upaep-logo-margin);
    background: var(--upaep-logo-bg);
    border-radius: var(--upaep-logo-border-radius);
    position: relative;

    &::before {
        content: '';
        position: absolute;
        inset: 0;
        background: var(--upaep-logo) center center no-repeat;
        background-size: var(--upaep-logo-size);
    }

    &.__ {
        --upaep-logo: url('');

        &.__white {
            --upaep-logo: url('');
        }
    }
}

/*? ------ Images ------ */
.upaep__img {
    --upaep-img-width: 100%;
    --upaep-img-height: 100%;
    --upaep-img-padding: 0;
    --upaep-img-margin: 0;
    --upaep-img-border-size: 0;
    --upaep-img-border-style: solid;
    --upaep-img-border-color: var(--upaep-color-border-grey);
    --upaep-img-border-radius: 0;
    width: var(--upaep-img-width);
    height: var(--upaep-img-height);
    padding: var(--upaep-img-padding);
    margin: var(--upaep-img-margin);
    border: var(--upaep-img-border-size) var(--upaep-img-border-style) var(--upaep-img-border-color);
    border-radius: var(--upaep-img-border-radius);

    &.__fluid {
        --upaep-img-height: auto;
        max-width: 100%;
    }

    &.__thumbnail {
        --upaep-img-bg: ;
        --upaep-img-padding: 0.25rem;
        --upaep-img-border-radius: 10px;
        --upaep-img-border-size: 1px;
        --upaep-img-height: auto;
        background: var(--upaep-img-bg);
        max-width: 100%;
    }

    &.__sm {
        --upaep-img-width: 30px;
        --upaep-img-height: 30px;
    }

    &.__md {
        --upaep-img-width: 600px;
        --upaep-img-height: 600px;
    }

    &.__lg {
        --upaep-img-width: 1000px;
        --upaep-img-height: 1000px;
    }
}

.upaep__figure {
    --upaep-figure-margin: 0 0 .5rem 0;
    --upaep-figure-fz: var(--upaep-fz12);
    --upaep-figure-color: var(--upaep-color-dark-grey);
    display: inline-block;

    .upaep__figure-img {
        margin: var(--upaep-figure-margin);
        line-height: 1;
    }

    .upaep__figure-caption {
        font-size: var(--upaep-figure-fz);
        color: var(--upaep-figure-color);
    }
}

/*? ------ Badge ------ */
.upaep__badge {
    --upaep-badge-width: auto;
    --upaep-badge-height: auto;
    --upaep-badge-padding: .35rem .5rem;
    --upaep-badge-margin: 0;
    --upaep-badge-bg: var(--ui-neutral, var(--upaep-color-dark-grey));
    --upaep-badge-border-radius: 5px;
    --upaep-badge-fz: var(--upaep-fz14);
    --upaep-badge-fw: var(--upaep-fw-regular);
    --upaep-badge-color: var(--ui-on-neutral, var(--upaep-color-white));
    --upaep-badge-position: relative;
    --upaep-badge-inset: ;
    width: var(--upaep-badge-width);
    height: var(--upaep-badge-height);
    padding: var(--upaep-badge-padding);
    margin: var(--upaep-badge-margin);
    background: var(--upaep-badge-bg);
    border-radius: var(--upaep-badge-border-radius);
    font-size: var(--upaep-badge-fz);
    font-weight: var(--upaep-badge-fw);
    color: var(--upaep-badge-color);
    position: var(--upaep-badge-position);
    inset: var(--upaep-badge-inset);
    display: inline-block;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;

    &.__rounded {
        --upaep-badge-padding: .35rem;
        --upaep-badge-border-radius: 50px;
    }
}

.upaep__badge.__status {
    --bg-status-green: #DEFAC3;
    --color-status-green: var(--upaep-color-black);
    --border-color-status-green: ;
    --bg-status-yellow: #FFEEB0;
    --color-status-yellow: var(--upaep-color-black);
    --border-color-status-yellow: ;
    --bg-status-blue: #CCF6FF;
    --color-status-blue: var(--upaep-color-black);
    --border-color-status-blue: ;
    --bg-status-orange: #FFD2B1;
    --color-status-orange: var(--upaep-color-black);
    --border-color-status-orange: ;
    --bg-status-pink: #FFD7E6;
    --color-status-pink: var(--upaep-color-black);
    --border-color-status-pink: ;
    --bg-status-grey: #F5F5F5;
    --color-status-grey: var(--upaep-color-black);
    --border-color-status-grey: ;
    --bg-status-purple: #C2CBFF;
    --color-status-purple: var(--upaep-color-black);
    --border-color-status-purple: ;
    --bg-status-turquoise: #B4F0D0;
    --color-status-turquoise: var(--upaep-color-black);
    --border-color-status-turquoise: ;
    --bg-status-lilac: #F5DAFF;
    --color-status-lilac: var(--upaep-color-black);
    --border-color-status-lilac: ;
    --bg-status-brown: #EFDAC3;
    --color-status-brown: var(--upaep-color-black);
    --border-color-status-brown: ;
    --upaep-badge-border-color: transparent;
    --upaep-badge-border-radius: 4px;
    --upaep-badge-padding: .5rem;

    &:not(:is(.__secondary, .__tertiary)) {
        --upaep-badge-padding: .75rem 1rem;
    }

    &.__status-6,
    &.__status-finalizada,
    &.__status-7,
    &.__status-autorizada,
    &.__green {
        --upaep-badge-bg: var(--bg-status-green);
        --upaep-badge-color: var(--color-status-green);
        --upaep-badge-border-color: var(--border-color-status-green);
    }

    &.__status-1,
    &.__status-revision-pendiente,
    &.__yellow {
        --upaep-badge-bg: var(--bg-status-yellow);
        --upaep-badge-color: var(--color-status-yellow);
        --upaep-badge-border-color: var(--border-color-status-yellow);
    }

    &.__status-2,
    &.__status-recibida,
    &.__blue {
        --upaep-badge-bg: var(--bg-status-blue);
        --upaep-badge-color: var(--color-status-blue);
        --upaep-badge-border-color: var(--border-color-status-blue);
    }

    &.__status-3,
    &.__status-avance-proceso,
    &.__orange {
        --upaep-badge-bg: var(--bg-status-orange);
        --upaep-badge-color: var(--color-status-orange);
        --upaep-badge-border-color: var(--border-color-status-orange);
    }

    &.__status-5,
    &.__status-cancelada,
    &.__status-rechazada,
    &.__status-8,
    &.__status-no-autorizada,
    &.__pink {
        --upaep-badge-bg: var(--bg-status-pink);
        --upaep-badge-color: var(--color-status-pink);
        --upaep-badge-border-color: var(--border-color-status-pink);
    }

    &.__status-4,
    &.__status-congelada,
    &.__grey {
        --upaep-badge-bg: var(--bg-status-grey);
        --upaep-badge-color: var(--color-status-grey);
        --upaep-badge-border-color: var(--border-color-status-grey);
    }

    &.__status-9,
    &.__status-firma-contrato,
    &.__purple {
        --upaep-badge-bg: var(--bg-status-purple);
        --upaep-badge-color: var(--color-status-purple);
        --upaep-badge-border-color: var(--border-color-status-purple);
    }

    &.__turquoise {
        --upaep-badge-bg: var(--bg-status-turquoise);
        --upaep-badge-color: var(--color-status-turquoise);
        --upaep-badge-border-color: var(--border-color-status-turquoise);
    }

    &.__lilac {
        --upaep-badge-bg: var(--bg-status-lilac);
        --upaep-badge-color: var(--color-status-lilac);
        --upaep-badge-border-color: var(--border-color-status-lilac);
    }

    &.__brown {
        --upaep-badge-bg: var(--bg-status-brown);
        --upaep-badge-color: var(--color-status-brown);
        --upaep-badge-border-color: var(--border-color-status-brown);
    }

    &.__secondary {
        --bg-status-green: transparent;
        --bg-status-yellow: transparent;
        --bg-status-blue: transparent;
        --bg-status-orange: transparent;
        --bg-status-pink: transparent;
        --bg-status-grey: transparent;
        --bg-status-purple: transparent;
        --bg-status-turquoise: transparent;
        --bg-status-lilac: transparent;
        --bg-status-brown: transparent;
        --color-status-green: #28A745;
        --color-status-yellow: #DDA808;
        --color-status-blue: #007BA7;
        --color-status-orange: #E68D0F;
        --color-status-pink: #FF4D5F;
        --color-status-grey: #707070;
        --color-status-purple: #9959EC;
        --color-status-turquoise: #18A17B;
        --color-status-lilac: #8E57A3;
        --color-status-brown: #9B7541;

        &::before {
            content: '\f111';
            font-family: var(--upaep-ff-fontawesome);
            font-size: calc(var(--upaep-badge-fz) / 2);
            margin-inline-end: .5rem;
        }
    }

    &.__tertiary {
        --bg-status-green: #FAFFF4;
        --bg-status-yellow: #FFFAEA;
        --bg-status-blue: #EDF5F7;
        --bg-status-orange: #FFFAEA;
        --bg-status-pink: #FFF4F8;
        --bg-status-grey: #F5F5F5;
        --bg-status-purple: #EEF0FF;
        --bg-status-turquoise: #FFFAEA;
        --bg-status-lilac: #FFFAEA;
        --bg-status-brown: #FFFAEA;
        --color-status-green: #28A745;
        --color-status-yellow: #DDA808;
        --color-status-blue: #007BA7;
        --color-status-orange: #E68D0F;
        --color-status-pink: #FF4D5F;
        --color-status-grey: #707070;
        --color-status-purple: #9959EC;
        --color-status-turquoise: #18A17B;
        --color-status-lilac: #8E57A3;
        --color-status-brown: #9B7541;
        border: .5px solid var(--upaep-badge-border-color);
    }
}

/*? ------ Steps ------ */
.upaep__steps {
    --upaep-steps-width: 100%;
    --upaep-steps-height: auto;
    --upaep-steps-padding: .35rem;
    --upaep-steps-margin: 0;
    --upaep-steps-items-width: 100%;
    --upaep-steps-items-height: auto;
    --upaep-steps-items-padding: 0;
    --upaep-steps-items-margin: 0;
    --upaep-steps-items-bg: var(--ui-surface-2, var(--upaep-color-background));
    --upaep-steps-items-border-radius: 10px 10px 0 0;
    --upaep-steps-item-minheight: 3rem;
    --upaep-steps-item-padding: .65rem;
    --upaep-steps-item-margin: 0;
    --upaep-steps-item-align: center;
    --upaep-steps-item-border-radius: 0;
    --upaep-steps-item-fz: var(--upaep-fz18);
    --upaep-steps-item-fw: var(--upaep-fw-medium);
    --upaep-steps-item-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-steps-item-bg: var(--ui-surface-2, var(--upaep-color-background));
    --upaep-steps-item-opacity: .5;
    --upaep-steps-item-active-fz: var(--upaep-fz18);
    --upaep-steps-item-active-fw: var(--upaep-fw-medium);
    --upaep-steps-item-active-color: var(--ui-on-accent, var(--upaep-color-white));
    --upaep-steps-item-active-bg: var(--ui-accent, var(--upaep-color-red));
    --upaep-steps-item-active-opacity: 1;
    --upaep-steps-item-complete-fz: var(--upaep-fz18);
    --upaep-steps-item-complete-fw: var(--upaep-fw-medium);
    --upaep-steps-item-complete-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-steps-item-complete-bg: transparent;
    --upaep-steps-item-complete-opacity: .8;
    --upaep-steps-text-margin: 0;
    --upaep-steps-text-padding: 0;
    --upaep-steps-icon-width: 30px;
    --upaep-steps-icon-height: 30px;
    --upaep-steps-icon-margin: 0;
    --upaep-steps-icon-padding: 0;
    --upaep-steps-icon-img-objectfit: cover;
    --upaep-steps-info-fz: var(--upaep-fz14);
    --upaep-steps-info-fw: ;
    --upaep-steps-info-color: ;
    --upaep-steps-info-margin: 0;
    --upaep-steps-info-padding: 0;
    width: var(--upaep-steps-width);
    height: var(--upaep-steps-height);
    padding: var(--upaep-steps-padding);
    margin: var(--upaep-steps-margin);

    .upaep__steps-items {
        width: var(--upaep-steps-items-width);
        height: var(--upaep-steps-items-height);
        padding: var(--upaep-steps-items-padding);
        margin: var(--upaep-steps-items-margin);
        background: var(--upaep-steps-items-bg);
        border-radius: var(--upaep-steps-items-border-radius);
        list-style: none;
        display: flex;
        justify-content: space-between;
        gap: 5px;

        .upaep__steps-item {
            min-height: var(--upaep-steps-item-minheight);
            padding: var(--upaep-steps-item-padding);
            margin: var(--upaep-steps-item-margin);
            border-radius: var(--upaep-steps-item-border-radius);
            text-align: var(--upaep-steps-item-align);
            font-size: var(--upaep-steps-item-fz);
            font-weight: var(--upaep-steps-item-fw);
            color: var(--upaep-steps-item-color);
            background: var(--upaep-steps-item-bg);
            opacity: var(--upaep-steps-item-opacity);
            text-wrap: balance;
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 1 0 0;
            transition: all .5s ease;

            &:has(.upaep__steps-icon) {
                gap: 10px;
                flex-wrap: nowrap;

                .upaep__steps-texts {
                    width: calc(100% - var(--upaep-steps-icon-width));
                }
            }

            &:first-child {
                --upaep-steps-item-border-radius: 10px 0 0 0;
            }

            &:last-child {
                --upaep-steps-item-border-radius: 0 10px 0 0;
            }

            &.is-active {
                font-size: var(--upaep-steps-item-active-fz);
                font-weight: var(--upaep-steps-item-active-fw);
                color: var(--upaep-steps-item-active-color);
                background: var(--upaep-steps-item-active-bg);
                opacity: var(--upaep-steps-item-active-opacity);
            }

            &.is-complete {
                font-size: var(--upaep-steps-item-complete-fz);
                font-weight: var(--upaep-steps-item-complete-fw);
                color: var(--upaep-steps-item-complete-color);
                background: var(--upaep-steps-item-complete-bg);
                opacity: var(--upaep-steps-item-complete-opacity);
            }

            &:not(.is-active) {
                .upaep__steps-info {
                    display: none;
                }
            }

            .upaep__steps-icon {
                width: var(--upaep-steps-icon-width);
                height: var(--upaep-steps-icon-height);
                margin: var(--upaep-steps-icon-margin);
                padding: var(--upaep-steps-icon-padding);

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: var(--upaep-steps-icon-img-objectfit);
                }
            }

            .upaep__steps-text {
                margin: var(--upaep-steps-text-margin);
                padding: var(--upaep-steps-text-padding);
            }

            .upaep__steps-info {
                font-size: var(--upaep-steps-info-fz);
                font-weight: var(--upaep-steps-info-fw);
                color: var(--upaep-steps-info-color);
                margin: var(--upaep-steps-info-margin);
                padding: var(--upaep-steps-info-padding);
                cursor: pointer;
            }
        }
    }

    &.__vertical {
        --upaep-steps-width: auto;
        --upaep-steps-items-border-radius: 10px;

        .upaep__steps-items {
            flex-direction: column;
            align-items: normal;

            .upaep__steps-item {
                flex: auto;

                &:first-child {
                    --upaep-steps-item-border-radius: 10px 10px 0 0;
                }

                &:last-child {
                    --upaep-steps-item-border-radius: 0 0 10px 10px;
                }
            }
        }
    }

    &.__items-start {
        .upaep__steps-item {
            justify-content: start;
        }
    }

    &.__items-end {
        .upaep__steps-item {
            justify-content: end;
        }
    }

    &.__items-center {
        .upaep__steps-item {
            justify-content: center;
        }
    }

    &.__items-evenly {
        .upaep__steps-item {
            justify-content: space-evenly;
        }
    }

    &.__items-between {
        .upaep__steps-item {
            justify-content: space-between;
        }
    }

    &.__items-around {
        .upaep__steps-item {
            justify-content: space-around;
        }
    }
}

.upaep__steps.__simple {
    --upaep-steps-items-bg: transparent;
    --upaep-steps-items-border-radius: 10px 10px 0 0;
    --upaep-steps-item-align: start;
    --upaep-steps-item-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-steps-item-bg: transparent;
    --upaep-steps-item-active-fw: var(--upaep-fw-bold);
    --upaep-steps-item-active-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-steps-item-active-bg: transparent;
    --upaep-steps-item-complete-color: var(--ui-text-strong, var(--upaep-color-black));
}

/*? ------ Tracker ------ */

/*? ARQUITECTURA DE ESTADOS — leer antes de tocar cualquier regla de aquí.

    Un paso tiene SEIS estados: pendiente (sin clase), is-progress, is-complete,
    is-error, is-rejected e is-disabled.

    Antes cada estado repetía las mismas seis reglas de pintado (marca, dot, icono,
    línea, título, texto) y varias de ellas volvían a declararse DENTRO de la rama
    horizontal, con una clase más de especificidad. Eso producía tres fallos reales:

      1. Un paso con dos clases de estado —nextStep() podía dejar is-error +
         is-progress— se pintaba con la que ganaba por ORDEN DE ORIGEN, no con la
         funcional: el dot "ignoraba" su estilo y un paso activo salía en rojo.
      2. Recolorear un estado desde una variante exigía ganarle a un selector de
         cinco clases, así que se resolvía duplicando reglas (y las duplicadas se
         desincronizaban: is-error no llenaba su línea en horizontal, is-rejected
         pintaba variables -progress- que nadie leía).
      3. Añadir un estado obligaba a tocar todas las variantes.

    Ahora hay UNA capa de pintado. Las clases is-* NO pintan: solo reasignan las
    variables --upaep-tracker-item-current-*. La apariencia se declara una sola vez
    en .upaep__tracker-mark / -icon / -dot / -line / -title / -text, que leen esas
    variables. Consecuencias:

      · ningún estado puede pisar a otro: todos escriben las mismas variables;
      · una variante se construye SOLO redefiniendo tokens, nunca selectores;
      · un estado nuevo es un bloque de variables y nada más;
      · el orden del DOM no interviene en ningún caso.

    Si un paso llegara a tener dos clases de estado gana la última del bloque
    (orden de gravedad: complete < progress < error < rejected < disabled), pero el
    runtime garantiza exclusividad: todas las escrituras pasan por
    Tracker#applyStatus(). */

.upaep__tracker {
    /*? ── contenedor ── */
    --upaep-tracker-width: 100%;
    --upaep-tracker-height: auto;
    --upaep-tracker-padding: .5rem;
    --upaep-tracker-margin: 0;
    /*? Antes era un valor vacío (`--upaep-tracker-bg: ;`). Un valor vacío hace que
        `background: var(...)` sea inválido en tiempo de cómputo: el render salía
        transparente igual, pero la variable no se podía usar para nada. */
    --upaep-tracker-bg: transparent;
    --upaep-tracker-transition-timing: .5s;
    --upaep-tracker-mobile-margin: 1rem 0;
    --upaep-tracker-mobile-padding: 1rem;
    /*? auto: el alto lo pone el contenido. Antes eran 150px fijos, que sobraban o
        faltaban según los pasos; sigue siendo un token para quien quiera reservar
        sitio en el carril. */
    --upaep-tracker-mobile-min-height: auto;

    /*? ── geometría del paso ── */
    --upaep-tracker-item-gap: 10px;
    --upaep-tracker-item-content-width: 200px;
    /*? Ancho MÍNIMO de un paso en horizontal. Es el suelo de la rejilla: por debajo
        de aquí el carril hace scroll en vez de seguir estrechando los pasos. 6rem es
        lo que necesita una etiqueta de dos palabras para leerse en dos líneas, y deja
        caber tres pasos en el móvil más estrecho (3 × 96px < 320px). Acepta
        min-content si se prefiere el suelo intrínseco de cada paso. */
    --upaep-tracker-item-min-width: 6rem;
    /*? Aire lateral del contenido del paso. Sin él, el texto de un paso y el del
        siguiente se tocan: el contenido ocupa todo el ancho del paso. Solo se aplica
        en horizontal, que es donde las etiquetas quedan lado a lado. */
    --upaep-tracker-item-content-padding: 0;
    /*? Alineación del texto del paso cuando el contenido va a la izquierda de la marca
        (items-align-left en vertical): queda pegado a la marca. */
    --upaep-tracker-item-content-align: right;
    --upaep-tracker-item-mark-size: 30px;
    --upaep-tracker-item-mark-border-size: 4px;
    --upaep-tracker-item-mark-border-style: solid;
    --upaep-tracker-item-min-height: calc(var(--upaep-tracker-item-mark-size) * 2);
    --upaep-tracker-item-icon-fz: var(--upaep-fz18);
    --upaep-tracker-item-icon-fw: var(--upaep-fw-bold);
    --upaep-tracker-item-line-width: 4px;
    --upaep-tracker-item-dot-size: 12px;
    /*? Tamaño del icono DENTRO del punto (variante icon-dots), en porcentaje de la
        caja del punto: así el icono se ajusta al indicador de cada variante y no al
        revés — el punto conserva su diámetro aunque el SVG traiga width/height. */
    --upaep-tracker-item-dot-icon-size: 60%;
    /*? Aire entre el punto y el aro de la marca cuando los dos se ven (icon-dots). */
    --upaep-tracker-item-dot-gap: 3.5px;
    /*? Aire entre el indicador y el conector. */
    --upaep-tracker-item-line-gap: 6px;
    /*? Distancia del CENTRO del indicador al arranque del conector: es lo único que
        cambia entre variantes, así que la geometría de la línea se escribe una vez
        para las dos orientaciones y los tres modificadores de alineación.
        Por defecto = el radio exterior de la marca, o sea el conector nace pegado a
        su borde. En only-dots la marca es invisible y el indicador es el punto, así
        que allí se recalcula: antes quedaba un hueco de 13px entre punto y línea. */
    --upaep-tracker-item-line-inset: calc(var(--upaep-tracker-item-mark-size) / 2);
    --upaep-tracker-item-mark-animation-timing: 1s;
    --upaep-tracker-item-mark-animation-easing: ease-in-out;

    /*? ── glifos del paso (número, ✓, ✗) ──
        El ✓ y el ✗ eran glifos de FontAwesome (content: '\f00c'), así que sin esa
        fuente cargada la marca salía vacía. Ahora son máscaras CSS, como el resto
        de los iconos del kit (ver maskIcons-sigil): sin dependencia de fuente, de
        un solo color y con la forma sustituible por token. */
    /*? 60% del hueco (dot o marca), no un em: así el glifo se ajusta al tamaño del
        indicador de cada variante sin tener que retocar la tipografía. */
    --upaep-tracker-item-glyph-size: 60%;
    --upaep-tracker-item-glyph-check: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M9.55 17.6 4.2 12.25l1.62-1.62 3.73 3.72 8.63-8.62 1.62 1.62z'/%3E%3C/svg%3E");
    --upaep-tracker-item-glyph-cross: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M18.3 7.11 16.89 5.7 12 10.59 7.11 5.7 5.7 7.11 10.59 12 5.7 16.89l1.41 1.41L12 13.41l4.89 4.89 1.41-1.41L13.41 12z'/%3E%3C/svg%3E");
    --upaep-tracker-item-counter-color: var(--upaep-color-white);
    --upaep-tracker-item-counter-fz: var(--upaep-fz12);
    /*? Tinta del número y del glifo DENTRO del punto. Sin declarar, es el acento del
        estado: es lo que se lee cuando el punto lleva el color "sobre el acento"
        (blanco) dentro de una marca rellena. Las variantes que rellenan el punto con
        el acento —only-dots, only-progress, counter-dots, __counter-checked— la
        ponen en blanco. Antes checked-complete rellenaba el punto de acento aunque
        la marca siguiera visible, y el punto blanco del centro desaparecía.
        Se declara con `initial` y no con un valor vacío: un valor vacío SÍ existe, así
        que var(--x, respaldo) no caería al respaldo y `color` quedaría inválido (y
        `color` se hereda, así que el glifo tomaría la tinta de la marca y un ✓ blanco
        sobre un punto blanco no se ve). `initial` en una custom property es
        exactamente "sin declarar". */
    --upaep-tracker-item-dot-color: initial;

    /*? ── estado PENDIENTE (el paso sin clase; base de todos los demás) ── */
    --upaep-tracker-item-opacity: .5;
    --upaep-tracker-item-mark-bg: transparent;
    --upaep-tracker-item-mark-border-color: var(--ui-divider, #ddd);
    /*? Tinta del contenido de la marca (icono, número, glifo). El icono ya no la
        pisa con un negro fijo: cada estado manda sobre su propia tinta. */
    --upaep-tracker-item-mark-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-tracker-item-icon-color: var(--upaep-tracker-item-mark-color);
    --upaep-tracker-item-dot-bg: var(--ui-divider, #ddd);
    --upaep-tracker-item-line-bg: var(--ui-divider, #ddd);
    --upaep-tracker-item-title-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-tracker-item-title-fz: var(--upaep-fz18);
    --upaep-tracker-item-title-fw: var(--upaep-fw-regular);
    --upaep-tracker-item-text-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-tracker-item-text-fz: var(--upaep-fz14);
    --upaep-tracker-item-text-fw: var(--upaep-fw-regular);

    /*? ── estado EN PROGRESO ── */
    --upaep-tracker-item-progress-mark-border-color: var(--ui-info, var(--upaep-color-blue-sky));
    --upaep-tracker-item-progress-mark-bg: var(--ui-info, var(--upaep-color-blue-sky));
    --upaep-tracker-item-progress-mark-color: var(--ui-on-info, var(--upaep-color-white));
    --upaep-tracker-item-progress-dot-bg: var(--ui-on-info, var(--upaep-color-white));
    --upaep-tracker-item-progress-line-bg: var(--ui-info, var(--upaep-color-blue-sky));
    --upaep-tracker-item-progress-title-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-tracker-item-progress-title-fw: var(--upaep-fw-bold);
    --upaep-tracker-item-progress-text-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-tracker-item-progress-text-fw: var(--upaep-fw-bold);

    /*? ── estado COMPLETADO ── */
    --upaep-tracker-item-complete-mark-border-color: var(--ui-success, var(--upaep-color-success));
    --upaep-tracker-item-complete-mark-bg: var(--ui-success, var(--upaep-color-success));
    --upaep-tracker-item-complete-mark-color: var(--ui-on-success, var(--upaep-color-white));
    --upaep-tracker-item-complete-dot-bg: var(--ui-on-success, var(--upaep-color-white));
    --upaep-tracker-item-complete-line-bg: var(--ui-success, var(--upaep-color-success));
    --upaep-tracker-item-complete-title-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-tracker-item-complete-title-fw: var(--upaep-fw-bold);
    --upaep-tracker-item-complete-text-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-tracker-item-complete-text-fw: var(--upaep-fw-bold);

    /*? ── estado ERROR ── */
    --upaep-tracker-item-error-mark-border-color: var(--ui-danger, var(--upaep-color-error));
    --upaep-tracker-item-error-mark-bg: var(--ui-danger, var(--upaep-color-error));
    --upaep-tracker-item-error-mark-color: var(--ui-on-danger, var(--upaep-color-white));
    --upaep-tracker-item-error-dot-bg: var(--ui-on-danger, var(--upaep-color-white));
    --upaep-tracker-item-error-line-bg: var(--ui-danger, var(--upaep-color-error));
    --upaep-tracker-item-error-title-color: var(--ui-danger, var(--upaep-color-error));
    --upaep-tracker-item-error-title-fw: var(--upaep-fw-bold);
    --upaep-tracker-item-error-text-color: var(--ui-danger, var(--upaep-color-error));
    --upaep-tracker-item-error-text-fw: var(--upaep-fw-bold);

    /*? ── estado RECHAZADO ──
        is-rejected antes solo existía dentro de .__counter-checked, y ahí pintaba
        variables -progress- que nadie leía. Es un estado de primera clase como
        is-error, porque statusStep(i, 'rejected') es API pública. */
    --upaep-tracker-item-rejected-mark-border-color: var(--ui-danger, var(--upaep-color-error));
    --upaep-tracker-item-rejected-mark-bg: var(--ui-danger, var(--upaep-color-error));
    --upaep-tracker-item-rejected-mark-color: var(--ui-on-danger, var(--upaep-color-white));
    --upaep-tracker-item-rejected-dot-bg: var(--ui-on-danger, var(--upaep-color-white));
    --upaep-tracker-item-rejected-line-bg: var(--ui-danger, var(--upaep-color-error));
    --upaep-tracker-item-rejected-title-color: var(--ui-danger, var(--upaep-color-error));
    --upaep-tracker-item-rejected-title-fw: var(--upaep-fw-bold);
    --upaep-tracker-item-rejected-text-color: var(--ui-danger, var(--upaep-color-error));
    --upaep-tracker-item-rejected-text-fw: var(--upaep-fw-bold);

    /*? ── estado DESHABILITADO ──
        Un paso que existe en el flujo pero no está disponible. Se distingue del
        pendiente por opacidad y por el cursor; no hereda el acento de ningún otro
        estado para que no se confunda con "todavía no le toca". */
    --upaep-tracker-item-disabled-opacity: .35;
    --upaep-tracker-item-disabled-mark-border-color: var(--ui-divider, #ddd);
    --upaep-tracker-item-disabled-mark-bg: transparent;
    --upaep-tracker-item-disabled-mark-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-tracker-item-disabled-dot-bg: var(--ui-divider, #ddd);
    --upaep-tracker-item-disabled-line-bg: var(--ui-divider, #ddd);
    --upaep-tracker-item-disabled-title-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-tracker-item-disabled-title-fw: var(--upaep-fw-regular);
    --upaep-tracker-item-disabled-text-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-tracker-item-disabled-text-fw: var(--upaep-fw-regular);
    --upaep-tracker-item-disabled-cursor: not-allowed;

    width: var(--upaep-tracker-width);
    height: var(--upaep-tracker-height);
    padding: var(--upaep-tracker-padding);
    margin: var(--upaep-tracker-margin);
    background: var(--upaep-tracker-bg);

    .upaep__tracker-wrapper {
        display: flex;
        flex-direction: column;
        /*? El wrapper suele ser un <ul> (index.html) o un <div> (runtime): se
            neutraliza el marcador y el relleno de lista en un solo sitio, para que
            las dos formas de markup queden alineadas igual. */
        list-style: none;
        margin: 0;
        padding: 0;
    }

    /* ==========================================================
       CAPA DE ESTADO — las clases is-* solo reasignan variables
       ========================================================== */
    .upaep__tracker-item {
        --upaep-tracker-item-current-opacity: var(--upaep-tracker-item-opacity);
        --upaep-tracker-item-current-cursor: auto;
        --upaep-tracker-item-current-mark-bg: var(--upaep-tracker-item-mark-bg);
        --upaep-tracker-item-current-mark-border-color: var(--upaep-tracker-item-mark-border-color);
        --upaep-tracker-item-current-mark-color: var(--upaep-tracker-item-mark-color);
        --upaep-tracker-item-current-mark-animation: none;
        --upaep-tracker-item-current-icon-color: var(--upaep-tracker-item-icon-color);
        --upaep-tracker-item-current-dot-bg: var(--upaep-tracker-item-dot-bg);
        --upaep-tracker-item-current-dot-color: var(--upaep-tracker-item-dot-color, var(--upaep-tracker-item-current-accent));
        /*? Color del tramo recorrido del conector. En pendiente vale el gris del
            riel: así el tramo se encoge de gris a gris y no destella un acento al
            volver de complete a pendiente. */
        --upaep-tracker-item-current-line-color: var(--upaep-tracker-item-line-bg);
        /*? 0 = conector sin recorrer, 1 = recorrido. El llenado es un scale, no un
            width: una sola declaración sirve para las dos orientaciones (antes había
            que repetir la regla con height en vertical y width en horizontal, y las
            dos copias se desincronizaron). */
        --upaep-tracker-item-current-line-fill: 0;
        --upaep-tracker-item-current-title-color: var(--upaep-tracker-item-title-color);
        --upaep-tracker-item-current-title-fw: var(--upaep-tracker-item-title-fw);
        --upaep-tracker-item-current-text-color: var(--upaep-tracker-item-text-color);
        --upaep-tracker-item-current-text-fw: var(--upaep-tracker-item-text-fw);
        /*? Acento del estado: lo consume el anillo de .upaep__tracker-progress. */
        --upaep-tracker-item-current-accent: var(--ui-info, var(--upaep-color-blue-sky));
        /*? Contenido del hueco de glifo: el número (variantes numeradas) o el ✓/✗.
            Son excluyentes por diseño y viven en pseudoelementos distintos, así que
            ninguno tapa al otro. */
        --upaep-tracker-item-current-counter: none;
        --upaep-tracker-item-current-glyph: none;
        --upaep-tracker-item-current-glyph-mask: none;
        /*? El icono del punto se apaga en los estados que muestran glifo (✓/✗): ahí el
            glifo SUSTITUYE al icono del paso en vez de encimarse. Como todo lo demás,
            es una variable que reasignan los estados, no una regla aparte. */
        --upaep-tracker-item-current-dot-icon-display: block;

        min-height: var(--upaep-tracker-item-min-height);
        position: relative;
        display: flex;
        flex: 1;
        /*? El paso no fija su propio ancho mínimo: en horizontal lo decide la rejilla
            del carril (--upaep-tracker-item-min-width) y aquí se deja pasar a 0 para
            que el paso obedezca a su columna y el texto se ajuste dentro, en vez de
            desbordar sobre el paso vecino. */
        min-width: 0;
        gap: var(--upaep-tracker-item-gap);
        opacity: var(--upaep-tracker-item-current-opacity);
        cursor: var(--upaep-tracker-item-current-cursor);

        &:last-child {
            .upaep__tracker-line {
                display: none;
            }
        }

        &.is-complete {
            --upaep-tracker-item-current-opacity: 1;
            --upaep-tracker-item-current-mark-bg: var(--upaep-tracker-item-complete-mark-bg);
            --upaep-tracker-item-current-mark-border-color: var(--upaep-tracker-item-complete-mark-border-color);
            --upaep-tracker-item-current-mark-color: var(--upaep-tracker-item-complete-mark-color);
            --upaep-tracker-item-current-mark-animation: upaep-tracker-marker-complete var(--upaep-tracker-item-mark-animation-timing) var(--upaep-tracker-item-mark-animation-easing);
            --upaep-tracker-item-current-icon-color: var(--upaep-tracker-item-complete-icon-color, var(--upaep-tracker-item-complete-mark-color));
            --upaep-tracker-item-current-dot-bg: var(--upaep-tracker-item-complete-dot-bg);
            --upaep-tracker-item-current-line-color: var(--upaep-tracker-item-complete-line-bg);
            --upaep-tracker-item-current-line-fill: 1;
            --upaep-tracker-item-current-title-color: var(--upaep-tracker-item-complete-title-color);
            --upaep-tracker-item-current-title-fw: var(--upaep-tracker-item-complete-title-fw);
            --upaep-tracker-item-current-text-color: var(--upaep-tracker-item-complete-text-color);
            --upaep-tracker-item-current-text-fw: var(--upaep-tracker-item-complete-text-fw);
            --upaep-tracker-item-current-accent: var(--upaep-tracker-item-complete-line-bg);
        }

        &.is-progress {
            --upaep-tracker-item-current-opacity: 1;
            --upaep-tracker-item-current-mark-bg: var(--upaep-tracker-item-progress-mark-bg);
            --upaep-tracker-item-current-mark-border-color: var(--upaep-tracker-item-progress-mark-border-color);
            --upaep-tracker-item-current-mark-color: var(--upaep-tracker-item-progress-mark-color);
            --upaep-tracker-item-current-mark-animation: upaep-tracker-marker-active var(--upaep-tracker-item-mark-animation-timing) var(--upaep-tracker-item-mark-animation-easing);
            --upaep-tracker-item-current-icon-color: var(--upaep-tracker-item-progress-icon-color, var(--upaep-tracker-item-progress-mark-color));
            --upaep-tracker-item-current-dot-bg: var(--upaep-tracker-item-progress-dot-bg);
            --upaep-tracker-item-current-line-color: var(--upaep-tracker-item-progress-line-bg);
            --upaep-tracker-item-current-line-fill: 1;
            --upaep-tracker-item-current-title-color: var(--upaep-tracker-item-progress-title-color);
            --upaep-tracker-item-current-title-fw: var(--upaep-tracker-item-progress-title-fw);
            --upaep-tracker-item-current-text-color: var(--upaep-tracker-item-progress-text-color);
            --upaep-tracker-item-current-text-fw: var(--upaep-tracker-item-progress-text-fw);
            --upaep-tracker-item-current-accent: var(--upaep-tracker-item-progress-line-bg);
        }

        &.is-error {
            --upaep-tracker-item-current-opacity: 1;
            --upaep-tracker-item-current-mark-bg: var(--upaep-tracker-item-error-mark-bg);
            --upaep-tracker-item-current-mark-border-color: var(--upaep-tracker-item-error-mark-border-color);
            --upaep-tracker-item-current-mark-color: var(--upaep-tracker-item-error-mark-color);
            --upaep-tracker-item-current-icon-color: var(--upaep-tracker-item-error-icon-color, var(--upaep-tracker-item-error-mark-color));
            --upaep-tracker-item-current-dot-bg: var(--upaep-tracker-item-error-dot-bg);
            --upaep-tracker-item-current-line-color: var(--upaep-tracker-item-error-line-bg);
            --upaep-tracker-item-current-line-fill: 1;
            --upaep-tracker-item-current-title-color: var(--upaep-tracker-item-error-title-color);
            --upaep-tracker-item-current-title-fw: var(--upaep-tracker-item-error-title-fw);
            --upaep-tracker-item-current-text-color: var(--upaep-tracker-item-error-text-color);
            --upaep-tracker-item-current-text-fw: var(--upaep-tracker-item-error-text-fw);
            --upaep-tracker-item-current-accent: var(--upaep-tracker-item-error-line-bg);
        }

        &.is-rejected {
            --upaep-tracker-item-current-opacity: 1;
            --upaep-tracker-item-current-mark-bg: var(--upaep-tracker-item-rejected-mark-bg);
            --upaep-tracker-item-current-mark-border-color: var(--upaep-tracker-item-rejected-mark-border-color);
            --upaep-tracker-item-current-mark-color: var(--upaep-tracker-item-rejected-mark-color);
            --upaep-tracker-item-current-icon-color: var(--upaep-tracker-item-rejected-icon-color, var(--upaep-tracker-item-rejected-mark-color));
            --upaep-tracker-item-current-dot-bg: var(--upaep-tracker-item-rejected-dot-bg);
            --upaep-tracker-item-current-line-color: var(--upaep-tracker-item-rejected-line-bg);
            --upaep-tracker-item-current-line-fill: 1;
            --upaep-tracker-item-current-title-color: var(--upaep-tracker-item-rejected-title-color);
            --upaep-tracker-item-current-title-fw: var(--upaep-tracker-item-rejected-title-fw);
            --upaep-tracker-item-current-text-color: var(--upaep-tracker-item-rejected-text-color);
            --upaep-tracker-item-current-text-fw: var(--upaep-tracker-item-rejected-text-fw);
            --upaep-tracker-item-current-accent: var(--upaep-tracker-item-rejected-line-bg);
        }

        &.is-disabled {
            --upaep-tracker-item-current-opacity: var(--upaep-tracker-item-disabled-opacity);
            --upaep-tracker-item-current-cursor: var(--upaep-tracker-item-disabled-cursor);
            --upaep-tracker-item-current-mark-bg: var(--upaep-tracker-item-disabled-mark-bg);
            --upaep-tracker-item-current-mark-border-color: var(--upaep-tracker-item-disabled-mark-border-color);
            --upaep-tracker-item-current-mark-color: var(--upaep-tracker-item-disabled-mark-color);
            --upaep-tracker-item-current-icon-color: var(--upaep-tracker-item-disabled-icon-color, var(--upaep-tracker-item-disabled-mark-color));
            --upaep-tracker-item-current-dot-bg: var(--upaep-tracker-item-disabled-dot-bg);
            --upaep-tracker-item-current-line-color: var(--upaep-tracker-item-disabled-line-bg);
            --upaep-tracker-item-current-title-color: var(--upaep-tracker-item-disabled-title-color);
            --upaep-tracker-item-current-title-fw: var(--upaep-tracker-item-disabled-title-fw);
            --upaep-tracker-item-current-text-color: var(--upaep-tracker-item-disabled-text-color);
            --upaep-tracker-item-current-text-fw: var(--upaep-tracker-item-disabled-text-fw);
            --upaep-tracker-item-current-accent: var(--upaep-tracker-item-disabled-line-bg);
        }
    }

    /* ==========================================================
       CAPA DE PINTADO — cada pieza se declara UNA vez
       ========================================================== */
    .upaep__tracker-mark {
        /*? flex: 0 0 auto — en vertical la marca es un item de fila y sin esto se
            aplasta a un óvalo cuando el contenido del paso aprieta. */
        flex: 0 0 auto;
        /*? El kit declara `box-sizing: border-box` para todo, así que
            --upaep-tracker-item-mark-size ES el diámetro exterior, borde incluido: la
            geometría del conector mide con ese token y NO hay que sumarle el grosor
            del borde (hacerlo agranda la marca y desplaza el conector). Se repite aquí
            para no depender del reset global. */
        box-sizing: border-box;
        width: var(--upaep-tracker-item-mark-size);
        height: var(--upaep-tracker-item-mark-size);
        background: var(--upaep-tracker-item-current-mark-bg);
        border-radius: 50%;
        border: var(--upaep-tracker-item-mark-border-size) var(--upaep-tracker-item-mark-border-style) var(--upaep-tracker-item-current-mark-border-color);
        color: var(--upaep-tracker-item-current-mark-color);
        animation: var(--upaep-tracker-item-current-mark-animation);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color var(--upaep-tracker-transition-timing) ease-in-out,
            border-color var(--upaep-tracker-transition-timing) ease-in-out,
            color var(--upaep-tracker-transition-timing) ease-in-out;
    }

    .upaep__tracker-icon {
        color: var(--upaep-tracker-item-current-icon-color);
        font-size: var(--upaep-tracker-item-icon-fz);
        font-weight: var(--upaep-tracker-item-icon-fw);
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        /*? El SVG inline del icono no debe encogerse dentro de la marca. */
        &>svg,
        &>img {
            flex: 0 0 auto;
        }
    }

    .upaep__tracker-dot {
        flex: 0 0 auto;
        box-sizing: border-box;
        width: var(--upaep-tracker-item-dot-size);
        height: var(--upaep-tracker-item-dot-size);
        background: var(--upaep-tracker-item-current-dot-bg);
        /*? 50% en vez de la medida del dot: sigue siendo un círculo aunque se
            cambie --upaep-tracker-item-dot-size por instancia. */
        border-radius: 50%;
        color: var(--upaep-tracker-item-current-dot-color);
        /*? El tamaño del número lo lleva el propio punto, no solo su pseudoelemento:
            si no, hereda el font-size del icono (18px) y cualquier contenido puesto a
            mano dentro del punto sale a ese tamaño. */
        font-size: var(--upaep-tracker-item-counter-fz);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color var(--upaep-tracker-transition-timing) ease-in-out,
            color var(--upaep-tracker-transition-timing) ease-in-out;
    }

    /*? Hueco del número y del glifo. Se pinta en el dot si el markup lo trae y, si
        no, en la propia marca: las variantes numeradas colgaban el contador solo de
        .upaep__tracker-dot, así que con markup estático (index.html, páginas del
        portal) no se pintaba nada. Los dos huecos son contenedores flex, así que el
        contenido se centra sin posicionamiento absoluto — antes era
        `position: absolute; inset: auto`, y el ✓ se salía del dot por arriba. */
    /*? El NÚMERO es el contenido de reserva del indicador: si el hueco trae un icono
        de verdad, manda el icono y el número no se pinta. Con eso icon-dots se combina
        con cualquier variante numerada sin clases nuevas y sin dos cosas encimadas. */
    .upaep__tracker-dot:not(:has(svg, img, i)),
    .upaep__tracker-mark:not(:has(.upaep__tracker-dot, svg, img, i)) {
        &::after {
            content: var(--upaep-tracker-item-current-counter, none);
            font-size: var(--upaep-tracker-item-counter-fz);
            font-weight: var(--upaep-fw-bold);
            line-height: 1;
        }
    }

    /*? El GLIFO de estado (✓/✗) sí manda sobre el icono del paso —es justo lo que
        hacen checked-complete y __counter-checked—, así que se pinta siempre y el
        icono se apaga en esos estados por variable. */
    .upaep__tracker-dot,
    .upaep__tracker-mark:not(:has(.upaep__tracker-dot)) {
        &::before {
            content: var(--upaep-tracker-item-current-glyph, none);
            width: var(--upaep-tracker-item-glyph-size);
            height: var(--upaep-tracker-item-glyph-size);
            background-color: currentColor;
            -webkit-mask: var(--upaep-tracker-item-current-glyph-mask) center / contain no-repeat;
            mask: var(--upaep-tracker-item-current-glyph-mask) center / contain no-repeat;
        }
    }

    .upaep__tracker-content {
        padding: var(--upaep-tracker-item-content-padding);
        min-width: 0;
        /*? Cuando el paso se estrecha, la palabra larga se SILABEA (hyphens: auto usa
            el idioma del documento, y las páginas del kit declaran lang="es") y solo
            como último recurso se parte por donde sea. Sin lo primero, un título como
            "Programación de pago" salía cortado a media palabra en cuanto la columna
            bajaba de ~112px; sin lo segundo, la palabra se saldría de su columna y se
            encimaría con la del paso vecino. */
        hyphens: auto;
        overflow-wrap: break-word;
    }

    .upaep__tracker-title {
        color: var(--upaep-tracker-item-current-title-color);
        font-size: var(--upaep-tracker-item-title-fz);
        font-weight: var(--upaep-tracker-item-current-title-fw);
    }

    .upaep__tracker-text {
        color: var(--upaep-tracker-item-current-text-color);
        font-size: var(--upaep-tracker-item-text-fz);
        font-weight: var(--upaep-tracker-item-current-text-fw);
    }

    /*? Conector. El riel completo lleva el gris de --upaep-tracker-item-line-bg y el
        tramo recorrido es el ::before, que se escala de 0 a 1 según el estado. El
        ::after ya no se usa: is-complete pintaba los dos pseudoelementos del mismo
        color, uno tapando al otro. */
    .upaep__tracker-line {
        height: calc(100% - var(--upaep-tracker-item-line-inset) * 2);
        width: var(--upaep-tracker-item-line-width);
        background: var(--upaep-tracker-item-line-bg);
        position: absolute;
        inset: calc((var(--upaep-tracker-item-mark-size) / 2) + var(--upaep-tracker-item-line-inset)) auto auto calc((var(--upaep-tracker-item-mark-size) / 2) - (var(--upaep-tracker-item-line-width) / 2));

        &::before {
            content: "";
            position: absolute;
            inset: 0;
            background: var(--upaep-tracker-item-current-line-color);
            transform: scaleY(var(--upaep-tracker-item-current-line-fill));
            transform-origin: center top;
            transition: transform var(--upaep-tracker-transition-timing) ease-in-out,
                background-color var(--upaep-tracker-transition-timing) ease-in-out;
        }
    }

    /* ==========================================================
       LAYOUT — vertical es la base; horizontal, la rama
       ========================================================== */
    &:not(.tracker-vertical, .__vertical) {
        /*? El carril se desplaza como un todo cuando los pasos no caben, en CUALQUIER
            tamaño de pantalla: la decisión depende del espacio disponible y no del
            viewport, así que un tracker dentro de una tarjeta estrecha se comporta
            igual que en un móvil. Antes esto vivía dentro de la media query de 480px
            y en el resto de los casos los pasos se aplastaban sin remedio. */
        overflow-x: auto;
        --upaep-tracker-item-content-padding: 0 .5rem;

        /*? Rejilla y no flex: minmax(<mínimo>, 1fr) da columnas IGUALES que reparten
            el sobrante cuando hay sitio y que se quedan en el mínimo cuando no lo hay
            —y entonces el carril desborda y hace scroll—. Es una sola regla para los
            dos regímenes, en vez de un reparto elástico que se aplasta y un apaño
            aparte para el móvil. */
        .upaep__tracker-wrapper {
            display: grid;
            grid-auto-flow: column;
            grid-auto-columns: minmax(var(--upaep-tracker-item-min-width), 1fr);
        }

        .upaep__tracker-item {
            flex-direction: column;
            align-items: center;
            text-align: center;
            /*? Con scroll, el paso queda centrado al engancharse (ver la media query). */
            scroll-snap-align: center;
        }

        .upaep__tracker-line {
            width: calc(100% - var(--upaep-tracker-item-line-inset) * 2);
            height: var(--upaep-tracker-item-line-width);
            inset: calc((var(--upaep-tracker-item-mark-size) / 2) - (var(--upaep-tracker-item-line-width) / 2)) auto auto calc(50% + var(--upaep-tracker-item-line-inset));

            &::before {
                transform: scaleX(var(--upaep-tracker-item-current-line-fill));
                transform-origin: left center;
            }
        }

        .upaep__tracker-content {
            /*? max-width, no width: con width fijo el ancho mínimo del paso era de
                200px y un tracker de muchos pasos desbordaba su contenedor en vez de
                encogerse. Con room de sobra se ve igual que antes. */
            width: 100%;
            max-width: var(--upaep-tracker-item-content-width);
        }

        &.items-align-up,
        &.__align-up {
            .upaep__tracker-item {
                flex-direction: column-reverse;
            }

            .upaep__tracker-line {
                inset: auto auto calc((var(--upaep-tracker-item-mark-size) / 2) - (var(--upaep-tracker-item-line-width) / 2)) calc(50% + var(--upaep-tracker-item-line-inset));
            }
        }
    }

    /*? Alias .__x: la convención de la casa para modificadores (como progresstracker
        con .__vertical). Los nombres viejos sin namespace se conservan por
        retrocompatibilidad; en markup nuevo usa la variante .__ */
    &.items-align-left,
    &.__align-left {
        /*? Este modificador solo tiene sentido en vertical, así que TODO su cuerpo
            queda acotado ahí. Antes el reorden (order) se aplicaba también en
            horizontal, donde el paso ya es una columna: el resultado equivalía a
            items-align-up pero sin mover el conector, que se quedaba a la altura del
            título sin conectar nada. En horizontal el modificador ahora no hace nada.
            El contenido crece para empujar la marca al borde derecho del item: de otro
            modo la marca queda pegada al final del texto, su posición depende del largo
            de cada título y las marcas no se alinean entre sí. Con la marca fija a la
            derecha, la línea se ancla desde ese borde compensando medio grosor de línea,
            igual que el bloque base lo hace desde la izquierda. */
        &.tracker-vertical,
        &.__vertical {
            .upaep__tracker-mark {
                order: 1;
            }

            .upaep__tracker-content {
                order: 0;
                flex: 1;
                text-align: var(--upaep-tracker-item-content-align);
            }

            .upaep__tracker-line {
                inset: calc((var(--upaep-tracker-item-mark-size) / 2) + var(--upaep-tracker-item-line-inset)) calc((var(--upaep-tracker-item-mark-size) / 2) - (var(--upaep-tracker-item-line-width) / 2)) auto auto;
            }
        }
    }

    /*? La alineación por DEFECTO, escrita de forma explícita: el contenido va debajo
        de la marca en horizontal y a su derecha en vertical. No es una regla muerta —
        se declara después de las otras dos alineaciones y con la misma especificidad,
        así que si un contenedor arrastra items-align-up o items-align-left, añadir
        items-align-down las deshace. Es la clase que ya escriben las páginas del portal
        junto a tracker-vertical. */
    &.items-align-down,
    &.__align-down {
        &:not(.tracker-vertical, .__vertical) {
            .upaep__tracker-item {
                flex-direction: column;
            }

            .upaep__tracker-line {
                inset: calc((var(--upaep-tracker-item-mark-size) / 2) - (var(--upaep-tracker-item-line-width) / 2)) auto auto calc(50% + var(--upaep-tracker-item-line-inset));
            }
        }

        /*? El reset del reorden va dentro de la rama vertical porque ahí es donde
            items-align-left lo aplica: con la misma especificidad, decide el orden de
            origen y este bloque va después. */
        &.tracker-vertical,
        &.__vertical {
            .upaep__tracker-mark {
                order: 0;
            }

            .upaep__tracker-content {
                order: 1;
                flex: initial;
                text-align: initial;
            }

            .upaep__tracker-line {
                inset: calc((var(--upaep-tracker-item-mark-size) / 2) + var(--upaep-tracker-item-line-inset)) auto auto calc((var(--upaep-tracker-item-mark-size) / 2) - (var(--upaep-tracker-item-line-width) / 2));
            }
        }
    }

    /* ==========================================================
       VARIANTES — solo redefinen tokens, nunca selectores
       ========================================================== */

    /*? only-dots y only-progress tenían cuerpos idénticos; se fusionan. La marca
        desaparece y el punto (o el anillo) queda como único indicador. */
    /*? En only-dots el indicador es el punto, no la marca: el conector arranca a
        partir de él. only-progress se queda con el default porque su indicador —el
        anillo— ocupa lo mismo que la marca. */
    &.only-dots,
    &.__only-dots {
        --upaep-tracker-item-line-inset: calc((var(--upaep-tracker-item-dot-size) / 2) + var(--upaep-tracker-item-line-gap));
    }

    &.only-dots,
    &.only-progress,
    &.__only-dots,
    &.__only-progress {
        --upaep-tracker-item-mark-bg: transparent;
        --upaep-tracker-item-mark-border-color: transparent;
        --upaep-tracker-item-progress-mark-bg: transparent;
        --upaep-tracker-item-progress-mark-border-color: transparent;
        --upaep-tracker-item-complete-mark-bg: transparent;
        --upaep-tracker-item-complete-mark-border-color: transparent;
        --upaep-tracker-item-error-mark-bg: transparent;
        --upaep-tracker-item-error-mark-border-color: transparent;
        --upaep-tracker-item-rejected-mark-bg: transparent;
        --upaep-tracker-item-rejected-mark-border-color: transparent;
        --upaep-tracker-item-disabled-mark-bg: transparent;
        --upaep-tracker-item-disabled-mark-border-color: transparent;
    }

    /*? El punto pasa a llevar el color del estado (y su tinta, blanca). Es el grupo
        de las variantes en las que el punto ES el indicador: las que esconden la marca
        y la numerada, donde el número necesita un chip de color debajo.
        checked-complete NO está aquí a propósito: puede convivir con la marca visible,
        y ahí el punto tiene que seguir siendo el círculo blanco del centro. */
    &.only-dots,
    &.only-progress,
    &.counter-dots,
    &.counter-dot,
    &.icon-dots,
    &.__only-dots,
    &.__only-progress,
    &.__counter-dots,
    &.__counter-dot,
    &.__icon-dots {
        --upaep-tracker-item-dot-color: var(--upaep-tracker-item-counter-color);
        --upaep-tracker-item-progress-dot-bg: var(--ui-info, var(--upaep-color-blue-sky));
        --upaep-tracker-item-complete-dot-bg: var(--ui-success, var(--upaep-color-success));
        --upaep-tracker-item-error-dot-bg: var(--ui-danger, var(--upaep-color-error));
        --upaep-tracker-item-rejected-dot-bg: var(--ui-danger, var(--upaep-color-error));
    }

    &.only-border,
    &.__only-border {
        --upaep-tracker-item-mark-bg: transparent;
        --upaep-tracker-item-progress-mark-bg: transparent;
        --upaep-tracker-item-complete-mark-bg: transparent;
        --upaep-tracker-item-error-mark-bg: transparent;
        --upaep-tracker-item-rejected-mark-bg: transparent;
        --upaep-tracker-item-disabled-mark-bg: transparent;
        /*? Sin relleno, la tinta del icono no puede ser el color "sobre el acento"
            (blanco sobre blanco): toma el propio acento del estado. */
        --upaep-tracker-item-progress-mark-color: var(--ui-info, var(--upaep-color-blue-sky));
        --upaep-tracker-item-complete-mark-color: var(--ui-success, var(--upaep-color-success));
        --upaep-tracker-item-error-mark-color: var(--ui-danger, var(--upaep-color-error));
        --upaep-tracker-item-rejected-mark-color: var(--ui-danger, var(--upaep-color-error));
    }

    /*? Numeración automática por CSS. El dot crece a 20px porque con los 12px del
        default el número no cabía y se salía del círculo. */
    /*? counter-dot en singular es la forma que ya escriben las páginas del portal
        (Tracking.js de Solicitudes, por ejemplo) y no existía en la hoja: la variante
        no pintaba nada y el fallo era silencioso. Es un alias, no una variante nueva. */
    &.counter-dots,
    &.counter-dot,
    &.__counter-dots,
    &.__counter-dot {
        --upaep-tracker-item-dot-size: 20px;
        /*? El número es blanco: el punto pendiente necesita contraste suficiente, y
            el gris del riel (#ddd) no lo da. Es el mismo gris que usa
            .__counter-checked para su punto pendiente. */
        --upaep-tracker-item-dot-bg: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
        --upaep-tracker-item-disabled-dot-bg: var(--ui-text-on-surface, var(--upaep-color-dark-grey));

        .upaep__tracker-wrapper {
            counter-reset: count 0;
        }

        .upaep__tracker-item {
            counter-increment: count 1;
            --upaep-tracker-item-current-counter: counter(count, decimal);
        }
    }

    /*? El icono del paso va DENTRO del punto, no al lado: el punto sigue siendo el
        indicador que pinta el estado y el icono es su contenido. El punto crece a 24px
        para que quepa un icono legible, y el icono se dimensiona en porcentaje de esa
        caja —con flex: 0 0 auto y medidas explícitas— así que ni deforma ni agranda el
        punto aunque el SVG venga con sus propios width/height.
        El icono hereda la tinta del punto (currentColor), que se invierte con su
        relleno, así que contrasta tanto sobre un punto de acento como sobre uno blanco. */
    &.icon-dots,
    &.__icon-dots {
        --upaep-tracker-item-dot-size: 20px;
        /*? La marca crece CON el punto —aro + aire + punto—, así que el punto nunca
            desborda el aro aunque se cambie su tamaño. Con los defaults sale la misma
            proporción que __counter-checked: 20px de punto en una marca de 35. Esto es
            lo que hace posible ver a la vez la marca (aro), el punto y el icono. */
        --upaep-tracker-item-mark-size: calc(var(--upaep-tracker-item-dot-size) + (var(--upaep-tracker-item-mark-border-size) + var(--upaep-tracker-item-dot-gap)) * 2);
        /*? El icono va en blanco sobre el punto, así que el punto pendiente lleva el
            mismo gris oscuro que en counter-dots: sobre el #ddd del riel un icono
            blanco no se leería. */
        --upaep-tracker-item-dot-bg: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
        --upaep-tracker-item-disabled-dot-bg: var(--ui-text-on-surface, var(--upaep-color-dark-grey));

        .upaep__tracker-dot {
            &>svg,
            &>img,
            &>i {
                display: var(--upaep-tracker-item-current-dot-icon-display);
                flex: 0 0 auto;
                width: var(--upaep-tracker-item-dot-icon-size);
                height: var(--upaep-tracker-item-dot-icon-size);
                font-size: var(--upaep-tracker-item-dot-icon-size);
                line-height: 1;
            }
        }
    }

    /*? Palomita sobre los pasos completados. */
    &.checked-complete,
    &.__checked-complete {
        --upaep-tracker-item-dot-size: 20px;

        .upaep__tracker-item.is-complete {
            --upaep-tracker-item-current-counter: none;
            --upaep-tracker-item-current-glyph: "";
            --upaep-tracker-item-current-glyph-mask: var(--upaep-tracker-item-glyph-check);
            --upaep-tracker-item-current-dot-icon-display: none;
        }
    }

    /*? Móvil: aquí solo queda lo que de verdad es propio del móvil —el aire del
        contenedor y el enganche del scroll—. El scroll y el reparto de los pasos ya no
        están aquí: son del componente, en cualquier tamaño.
        Lo que había antes y se fue: margin/padding a fuego (pisaban las variables de
        la instancia), un min-height: 150px arbitrario y un display: flex en el
        contenedor que recalculaba el tamaño de los pasos de otra manera, así que el
        mismo ancho disponible daba resultados distintos dentro y fuera de la media
        query. El scroll-snap-type tampoco enganchaba nada, porque los pasos no
        declaraban scroll-snap-align. */
    @media (width <= 480px) {
        --upaep-tracker-margin: var(--upaep-tracker-mobile-margin);
        --upaep-tracker-padding: var(--upaep-tracker-mobile-padding);

        &:not(.tracker-vertical, .__vertical) {
            min-height: var(--upaep-tracker-mobile-min-height);
            scroll-snap-type: x proximity;
        }
    }
}

.upaep__tracker-progress {
    --upaep-tracker-progress-size: var(--upaep-tracker-item-mark-size);
    --upaep-tracker-progress-base: var(--ui-divider, #dddddd);
    --upaep-tracker-progress-fz: var(--upaep-fz12);
    --upaep-tracker-progress-fw: var(--upaep-fw-bold);
    /*? El color del anillo sigue el acento del estado del paso. Antes cada bloque de
        estado tenía que declarar `.upaep__tracker-progress { --...-color: X }`, una
        regla por estado; ahora es una sola lectura y funciona igual suelto (fuera de
        un paso la variable no existe y cae al azul por defecto). */
    --upaep-tracker-progress-color: var(--upaep-tracker-item-current-accent, var(--ui-info, var(--upaep-color-blue-sky)));
    /*? El inset era inerte: se aplicaba sin declarar position, así que el valor
        `auto 10px 10px auto` nunca desplazaba nada. Se añade position: relative y el
        default pasa a `auto` para que el render no cambie y la variable sí funcione. */
    --upaep-tracker-progress-inset: auto;
    --upaep-tracker-progress-timing: 1s;
    --upaep-tracker-progress-margin: 0;
    --upaep-tracker-progress-padding: .25rem;
    --upaep-tracker-progress-percent: 0;
    --upaep-tracker-progress-circle-rotate: rotate(0deg);
    --upaep-tracker-progress-circle-size: 100%;
    --upaep-tracker-progress-circle-stroke-width: 25px;
    --upaep-tracker-progress-circle-radius: calc((var(--upaep-tracker-progress-circle-size) - var(--upaep-tracker-progress-circle-stroke-width)) / 2);
    --upaep-tracker-progress-circle-circumference: calc(var(--upaep-tracker-progress-circle-radius) * pi * 2);
    --upaep-tracker-progress-circle-dash: calc((var(--upaep-tracker-progress-percent) * var(--upaep-tracker-progress-circle-circumference)) / 100);
    flex: 0 0 auto;
    width: var(--upaep-tracker-progress-size);
    height: var(--upaep-tracker-progress-size);
    position: relative;
    inset: var(--upaep-tracker-progress-inset);
    color: var(--upaep-tracker-progress-color);
    font-size: var(--upaep-tracker-progress-fz);
    font-weight: var(--upaep-tracker-progress-fw);
    margin: var(--upaep-tracker-progress-margin);
    padding: var(--upaep-tracker-progress-padding);
    display: flex;
    align-items: center;
    justify-content: center;

    svg {
        position: absolute;
        inset: auto;
        width: var(--upaep-tracker-progress-size);

        circle {
            cx: calc(var(--upaep-tracker-progress-circle-size) / 2);
            cy: calc(var(--upaep-tracker-progress-circle-size) / 2);
            r: var(--upaep-tracker-progress-circle-radius);
            stroke-width: var(--upaep-tracker-progress-circle-stroke-width);
            fill: none;
            stroke-linecap: round;

            &.circle-base {
                stroke: var(--upaep-tracker-progress-base);
            }

            &.circle-primary {
                transform: var(--upaep-tracker-progress-circle-rotate);
                transform-origin: calc(var(--upaep-tracker-progress-circle-size) / 2) calc(var(--upaep-tracker-progress-circle-size) / 2);
                stroke-dasharray: var(--upaep-tracker-progress-circle-dash) calc(var(--upaep-tracker-progress-circle-circumference) - var(--upaep-tracker-progress-circle-dash));
                stroke: var(--upaep-tracker-progress-color);
                transition: stroke-dasharray var(--upaep-tracker-progress-timing) linear;
            }
        }

    }
}

/*? Variante numerada con validación: número en el punto, ✓ al completar y ✗ al
    rechazar, sobre marcas de aro. Como el resto de las variantes, solo son tokens
    más la asignación del glifo por estado. */
.upaep__tracker.__counter-checked {
    --upaep-tracker-item-mark-size: 35px;
    --upaep-tracker-item-dot-size: 20px;
    --upaep-tracker-item-opacity: .6;
    --upaep-tracker-item-mark-bg: transparent;
    --upaep-tracker-item-mark-border-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-tracker-item-mark-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-tracker-item-line-bg: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-tracker-item-dot-bg: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    /*? El número va en blanco sobre el punto, que aquí sí lleva el acento. */
    --upaep-tracker-item-dot-color: var(--upaep-tracker-item-counter-color);
    /*? Esta variante repone el aro de la marca, así que el conector vuelve a arrancar
        en el borde del aro. Sin esto, combinada con only-dots —que acerca la línea al
        punto porque allí la marca es invisible— la línea se metía dentro del aro. */
    --upaep-tracker-item-line-inset: calc(var(--upaep-tracker-item-mark-size) / 2);
    /*? El paso en curso se queda en el gris neutro del diseño de esta variante: aquí
        el paso actual se distingue por llevar su NÚMERO frente al ✓ de los
        completados, no por el color, y así lo espera el trámite que la usa en
        producción. Si en una pantalla nueva se quiere el azul, son cuatro tokens:
            --upaep-tracker-item-progress-mark-border-color: var(--ui-info);
            --upaep-tracker-item-progress-mark-color: var(--ui-info);
            --upaep-tracker-item-progress-line-bg: var(--ui-info);
            --upaep-tracker-item-progress-dot-bg: var(--ui-info); */
    --upaep-tracker-item-progress-mark-bg: transparent;
    --upaep-tracker-item-progress-mark-border-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-tracker-item-progress-mark-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-tracker-item-progress-line-bg: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-tracker-item-progress-dot-bg: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-tracker-item-complete-mark-bg: transparent;
    --upaep-tracker-item-complete-mark-border-color: var(--ui-success, var(--upaep-color-success));
    --upaep-tracker-item-complete-mark-color: var(--ui-success, var(--upaep-color-success));
    --upaep-tracker-item-complete-line-bg: var(--ui-success, var(--upaep-color-success));
    --upaep-tracker-item-complete-dot-bg: var(--ui-success, var(--upaep-color-success));
    /*? is-error no existía en esta variante: el paso salía con la marca sin borde y
        con su número, en vez del tratamiento rojo que sí tenía is-rejected. */
    --upaep-tracker-item-error-mark-bg: transparent;
    --upaep-tracker-item-error-mark-border-color: var(--ui-danger, var(--upaep-color-error));
    --upaep-tracker-item-error-mark-color: var(--ui-danger, var(--upaep-color-error));
    --upaep-tracker-item-error-line-bg: var(--ui-danger, var(--upaep-color-error));
    --upaep-tracker-item-error-dot-bg: var(--ui-danger, var(--upaep-color-error));
    --upaep-tracker-item-rejected-mark-bg: transparent;
    --upaep-tracker-item-rejected-mark-border-color: var(--ui-danger, var(--upaep-color-error));
    --upaep-tracker-item-rejected-mark-color: var(--ui-danger, var(--upaep-color-error));
    --upaep-tracker-item-rejected-line-bg: var(--ui-danger, var(--upaep-color-error));
    --upaep-tracker-item-rejected-dot-bg: var(--ui-danger, var(--upaep-color-error));

    .upaep__tracker-wrapper {
        counter-reset: count 0;
    }

    &.tracker-vertical .upaep__tracker-content,
    &.__vertical .upaep__tracker-content {
        width: 100%;
    }

    .upaep__tracker-item {
        counter-increment: count 1;
        --upaep-tracker-item-current-counter: counter(count, decimal);

        &.is-complete {
            --upaep-tracker-item-current-counter: none;
            --upaep-tracker-item-current-glyph: "";
            --upaep-tracker-item-current-glyph-mask: var(--upaep-tracker-item-glyph-check);
            --upaep-tracker-item-current-dot-icon-display: none;
        }

        &.is-error,
        &.is-rejected {
            --upaep-tracker-item-current-counter: none;
            --upaep-tracker-item-current-glyph: "";
            --upaep-tracker-item-current-glyph-mask: var(--upaep-tracker-item-glyph-cross);
            --upaep-tracker-item-current-dot-icon-display: none;
        }
    }
}

/*? Con namespace: markeractive/markercomplete estaban definidos aquí Y en
    progresstracker con el mismo nombre. Los @keyframes son globales, así que estas
    definiciones ganaban y tocar la animación del tracker cambiaba también la del
    progresstracker. Las de progresstracker se quedan intactas en su sección.
    (markerScale era copia exacta de markeractive y nadie la referenciaba: eliminada.) */
@keyframes upaep-tracker-marker-active {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes upaep-tracker-marker-complete {
    0% {
        transform: scale(.8);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

/*? Todo lo que se mueve en el tracker se apaga por sus variables de duración, que
    es lo único que consumen: las transiciones del estado, el llenado del conector,
    el pulso de la marca y el stroke-dasharray del anillo.
    Antes este bloque declaraba `animation: none` sobre .upaep__tracker-mark, un
    selector de UNA clase, mientras la animación se declaraba en
    `.upaep__tracker .upaep__tracker-item.is-progress .upaep__tracker-mark`, de
    cuatro: perdía por especificidad y el pulso seguía corriendo. Apagarlo por la
    variable de duración no depende de la especificidad, porque se declara sobre el
    mismo elemento que la define.
    Nota: audit/accessibility.md (C-3) pide un bloque `reduce` global al final de la
    sección Animations que cubra las 147 animaciones del archivo; esto solo cubre el
    tracker y no sustituye ese pendiente. */
@media (prefers-reduced-motion: reduce) {

    .upaep__tracker {
        --upaep-tracker-transition-timing: 0s;
        --upaep-tracker-item-mark-animation-timing: 0s;
    }

    .upaep__tracker-progress {
        --upaep-tracker-progress-timing: 0s;
    }
}

/*? ------ Scrollspy ------ */
.upaep__scrollspy {
    --upaep-scrollspy-width: 100%;
    --upaep-scrollspy-height: auto;
    --upaep-scrollspy-margin: 0;
    --upaep-scrollspy-padding: .5rem 1rem;
    --upaep-scrollspy-position: sticky;
    --upaep-scrollspy-inset: ;
    --upaep-scrollspy-bg: transparent;
    --upaep-scrollspy-item-fz: var(--upaep-fz14);
    --upaep-scrollspy-item-fw: var(--upaep-fw-regular);
    --upaep-scrollspy-item-color: var(--upaep-color-black);
    --upaep-scrollspy-item-bg: transparent;
    --upaep-scrollspy-item-margin: 0;
    --upaep-scrollspy-item-padding: .75rem .5rem;
    --upaep-scrollspy-item-border-radius: 10px;
    --upaep-scrollspy-item-hover-fz: var(--upaep-fz14);
    --upaep-scrollspy-item-hover-fw: var(--upaep-fw-bold);
    --upaep-scrollspy-item-hover-color: var(--upaep-color-black);
    --upaep-scrollspy-item-hover-bg: var(--ui-surface-hover, #dee2e6);
    --upaep-scrollspy-item-active-fz: var(--upaep-fz14);
    --upaep-scrollspy-item-active-fw: var(--upaep-fw-bold);
    --upaep-scrollspy-item-active-color: var(--upaep-color-black);
    --upaep-scrollspy-item-active-bg: var(--ui-surface-hover, #dee2e6);
    width: var(--upaep-scrollspy-width);
    height: var(--upaep-scrollspy-height);
    margin: var(--upaep-scrollspy-margin);
    padding: var(--upaep-scrollspy-padding);
    position: var(--upaep-scrollspy-position);
    inset: var(--upaep-scrollspy-inset);
    background: var(--upaep-scrollspy-bg);
    overflow-y: auto;

    &>* {
        margin: 0;
    }

    .upaep__scrollspy-item {
        background: var(--upaep-scrollspy-item-bg);
        margin: var(--upaep-scrollspy-item-margin);
        padding: var(--upaep-scrollspy-item-padding);
        border-radius: var(--upaep-scrollspy-item-border-radius);

        &:has(a.is-active) {
            background: var(--upaep-scrollspy-item-active-bg);
        }

        &:has(a:not(.is-active):hover) {
            background: var(--upaep-scrollspy-item-hover-bg);
        }

        a {
            font-size: var(--upaep-scrollspy-item-fz);
            font-weight: var(--upaep-scrollspy-item-fw);
            color: var(--upaep-scrollspy-item-color);
            text-decoration: none;

            &:not(.is-active):hover {
                font-size: var(--upaep-scrollspy-item-hover-fz);
                font-weight: var(--upaep-scrollspy-item-hover-fw);
                color: var(--upaep-scrollspy-item-hover-color);
            }

            &.is-active {
                font-size: var(--upaep-scrollspy-item-active-fz);
                font-weight: var(--upaep-scrollspy-item-active-fw);
                color: var(--upaep-scrollspy-item-active-color);
            }
        }
    }

    &.__left-line {
        --upaep-scrollspy-leftline-width: 5px;
        --upaep-scrollspy-leftline-height: 10px;
        --upaep-scrollspy-leftline-bg: ;
        --upaep-scrollspy-leftline-active-width: 5px;
        --upaep-scrollspy-leftline-active-height: 10px;
        --upaep-scrollspy-leftline-active-bg: var(--ui-accent, var(--upaep-color-red));
        --upaep-scrollspy-leftline-hover-width: 5px;
        --upaep-scrollspy-leftline-hover-height: 10px;
        --upaep-scrollspy-leftline-hover-bg: var(--ui-accent, var(--upaep-color-red));

        .upaep__scrollspy-item {
            position: relative;

            &::before {
                width: var(--upaep-scrollspy-leftline-width);
                height: var(--upaep-scrollspy-leftline-height);
                background: var(--upaep-scrollspy-leftline-bg);
                content: '';
                position: absolute;
                inset: 50% auto auto 0;
                padding: 0.5rem 0;
                margin: 0;
                transform: translateY(-50%);
            }

            &:has(a.is-active) {
                &::before {
                    width: var(--upaep-scrollspy-leftline-active-width);
                    height: var(--upaep-scrollspy-leftline-active-height);
                    background: var(--upaep-scrollspy-leftline-active-bg);
                }
            }

            &:has(a:not(.is-active):hover) {
                &::before {
                    width: var(--upaep-scrollspy-leftline-hover-width);
                    height: var(--upaep-scrollspy-leftline-hover-height);
                    background: var(--upaep-scrollspy-leftline-hover-bg);
                }
            }
        }
    }
}

.upaep__scrollspy.__simple {
    --upaep-scrollspy-item-hover-bg: transparent;
    --upaep-scrollspy-item-active-bg: transparent;
    --upaep-scrollspy-item-padding: .25rem .5rem;
}

/*? ------ Dropdown ------ */
.upaep__dropdown {
    --upaep-dropdown-width: auto;
    --upaep-dropdown-height: auto;
    --upaep-dropdown-minwidth: 10rem;
    --upaep-dropdown-padding: .5rem 0;
    --upaep-dropdown-margin: .25rem 0;
    --upaep-dropdown-border-size: 1px;
    --upaep-dropdown-border-style: solid;
    --upaep-dropdown-border-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-dropdown-border-radius: 10px;
    --upaep-dropdown-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-dropdown-zindex: var(--upaep-zindex-dropdown);
    --upaep-dropdown-inset: 0 auto auto 0;
    --upaep-dropdown-animation: a_fadeIn;
    --upaep-dropdown-animation-duration: .2s;
    --upaep-dropdown-animation-out: a_fadeOut;
    --upaep-dropdown-out-duration: .2s;
    --upaep-dropdown-item-margin: 0;
    --upaep-dropdown-item-padding: .35rem .5rem;
    --upaep-dropdown-item-fz: var(--upaep-fz14);
    --upaep-dropdown-item-fw: var(--upaep-fw-regular);
    --upaep-dropdown-item-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-dropdown-item-border-radius: 0;
    --upaep-dropdown-item-bg: ;
    --upaep-dropdown-item-hover-fz: var(--upaep-fz14);
    --upaep-dropdown-item-hover-fw: var(--upaep-fw-regular);
    --upaep-dropdown-item-hover-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-dropdown-item-hover-border-radius: 0;
    --upaep-dropdown-item-hover-bg: var(--ui-surface-3, var(--upaep-color-tenue-gray));
    --upaep-dropdown-item-active-fz: var(--upaep-fz14);
    --upaep-dropdown-item-active-fw: var(--upaep-fw-regular);
    --upaep-dropdown-item-active-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-dropdown-item-active-border-radius: 0;
    --upaep-dropdown-item-active-bg: #dcdcdc;
    --upaep-dropdown-item-mark-color: var(--ui-accent, var(--upaep-color-red));
    --upaep-dropdown-btn-mark-color: ;
    --upaep-dropdown-btn-mark-size: .3em;
    cursor: pointer;

    .upaep__dropdown-menu {
        width: var(--upaep-dropdown-width);
        height: var(--upaep-dropdown-height);
        min-width: var(--upaep-dropdown-minwidth);
        padding: var(--upaep-dropdown-padding);
        margin: var(--upaep-dropdown-margin);
        border: var(--upaep-dropdown-border-size) var(--upaep-dropdown-border-style) var(--upaep-dropdown-border-color);
        border-radius: var(--upaep-dropdown-border-radius);
        background: var(--upaep-dropdown-bg);
        z-index: var(--upaep-dropdown-zindex);
        inset: var(--upaep-dropdown-inset);
        position: absolute;
        text-align: left;
        list-style: none;
        background-clip: padding-box;

        &:not(.is-show):not(.is-hiding) {
            display: none;
        }

        &.is-show {
            animation: var(--upaep-dropdown-animation) var(--upaep-dropdown-animation-duration) ease;
        }

        /*? cierre animado: el JS espera DROPDOWN_OUT_DURATION antes de quitar is-hiding */
        &.is-hiding {
            animation: var(--upaep-dropdown-animation-out) var(--upaep-dropdown-out-duration) ease forwards;
        }
    }

    &:has(.upaep__dropdown-menu.is-show) {
        .upaep__dropdown-btn {
            &::after {
                transition: all .5s;
                rotate: -180deg;
            }
        }
    }

    &:not(.__no-mark) {

        .upaep__dropdown-btn:not(.__trinity) {
            &::after {
                display: inline-block;
                margin-left: 0.255em;
                vertical-align: 0.255em;
                content: "";
                border-top: var(--upaep-dropdown-btn-mark-size) solid var(--upaep-dropdown-btn-mark-color);
                border-right: var(--upaep-dropdown-btn-mark-size) solid transparent;
                border-bottom: 0;
                border-left: var(--upaep-dropdown-btn-mark-size) solid transparent;
                transition: all .5s;
            }
        }
    }

    .upaep__dropdown-btn:not(.__trinity) {
        white-space: nowrap;
        --upaep-btn-margin: 0;
    }

    .upaep__dropdown-item {
        margin: var(--upaep-dropdown-item-margin);
        padding: var(--upaep-dropdown-item-padding);
        border-radius: var(--upaep-dropdown-item-border-radius);
        background: var(--upaep-dropdown-item-bg);
        width: 100%;
        display: block;
        clear: both;
        font-weight: 400;
        text-align: inherit;
        text-decoration: none;
        white-space: nowrap;
        border: 0;
        cursor: pointer;
        position: relative;

        &>* {
            font-size: var(--upaep-dropdown-item-fz);
            font-weight: var(--upaep-dropdown-item-fw);
            color: var(--upaep-dropdown-item-color);
            width: 100%;
            display: inline-block;
            text-decoration: none;
        }

        &:hover:not(.is-active):not(:has(hr)) {
            border-radius: var(--upaep-dropdown-item-hover-border-radius);
            background: var(--upaep-dropdown-item-hover-bg);

            &>* {
                font-size: var(--upaep-dropdown-item-hover-fz);
                font-weight: var(--upaep-dropdown-item-hover-fw);
                color: var(--upaep-dropdown-item-hover-color);
            }
        }

        &.is-active:not(:has(hr)) {
            border-radius: var(--upaep-dropdown-item-active-border-radius);
            background: var(--upaep-dropdown-item-active-bg);

            &>* {
                font-size: var(--upaep-dropdown-item-active-fz);
                font-weight: var(--upaep-dropdown-item-active-fw);
                color: var(--upaep-dropdown-item-active-color);
            }
        }

        &:has(.upaep__dropdown-line),
        &:has(hr) {
            --upaep-dropdown-item-padding: .25rem 0;

            upaep__dropdown-line,
            hr {
                margin: 0;
            }
        }
    }

    &.__mark {
        .upaep__dropdown-item.is-active {
            &::after {
                font-family: var(--upaep-ff-fontawesome);
                content: '\f00c';
                padding: 0 10px;
                color: var(--upaep-dropdown-item-mark-color);
                inset: auto 0 auto auto;
                position: absolute;
            }
        }
    }
}

/*? ------ Tokenfield ------ */
.upaep__tokenfield {
    --upaep-tokenfield-width: 100%;
    --upaep-tokenfield-height: auto;
    --upaep-tokenfield-padding: .5rem;
    --upaep-tokenfield-margin: 0;
    --upaep-tokenfield-bg: transparent;
    --upaep-tokenfield-border-size: 1px;
    --upaep-tokenfield-border-style: solid;
    --upaep-tokenfield-border-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-tokenfield-border-radius: 10px;
    --upaep-tokenfield-list-padding: .5rem;
    --upaep-tokenfield-list-margin: .5rem 0 0 0;
    --upaep-tokenfield-list-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-tokenfield-list-item-fz: var(--upaep-f14);
    --upaep-tokenfield-list-item-fw: var(--upaep-fw-regular);
    --upaep-tokenfield-list-item-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-tokenfield-list-item-padding: .35rem .5rem;
    --upaep-tokenfield-list-item-bg: transparent;
    --upaep-tokenfield-list-item-hover-fz: var(--upaep-f14);
    --upaep-tokenfield-list-item-hover-fw: var(--upaep-fw-regular);
    --upaep-tokenfield-list-item-hover-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-tokenfield-list-item-hover-padding: .35rem .5rem;
    --upaep-tokenfield-list-item-hover-bg: var(--ui-surface-hover, var(--colorgrey7));
    width: var(--upaep-tokenfield-width);
    height: var(--upaep-tokenfield-height);
    padding: var(--upaep-tokenfield-padding);
    margin: var(--upaep-tokenfield-margin);
    background: var(--upaep-tokenfield-bg);
    border: var(--upaep-tokenfield-border-size) var(--upaep-tokenfield-border-style) var(--upaep-tokenfield-border-color);
    border-radius: var(--upaep-tokenfield-border-radius);
    position: relative;

    >input,
    >.upaep__input {
        display: none;
    }

    .upaep__tokenfield-content {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }

    .upaep__tokenfield-tags {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }

    .upaep__tokenfield-input {
        width: 100%;
        display: flex;
    }

    .upaep__input-tokenfield {
        --upaep-input-margin: 0;
    }

    .upaep__tokenfield-list {
        width: 100%;
        max-height: 200px;
        padding: var(--upaep-tokenfield-list-padding);
        margin: var(--upaep-tokenfield-list-margin);
        background: var(--upaep-tokenfield-list-bg);
        list-style: none;
        overflow-y: auto;

        &:not(.is-active) {
            display: none;
        }

        &.is-active {
            animation: a_fadeIn .8s;
        }

        .upaep__tokenfield-list-item {
            width: 100%;
            font-size: var(--upaep-tokenfield-list-item-fz);
            font-weight: var(--upaep-tokenfield-list-item-fw);
            color: var(--upaep-tokenfield-list-item-color);
            padding: var(--upaep-tokenfield-list-item-padding);
            background: var(--upaep-tokenfield-list-item-bg);
            cursor: pointer;

            &:hover {
                font-size: var(--upaep-tokenfield-list-item-hover-fz);
                font-weight: var(--upaep-tokenfield-list-item-hover-fw);
                color: var(--upaep-tokenfield-list-item-hover-color);
                padding: var(--upaep-tokenfield-list-item-hover-padding);
                background: var(--upaep-tokenfield-list-item-hover-bg);
            }

            &.is-inactive {
                display: none;
            }
        }
    }

    &.__version-2 .upaep__tokenfield-input {
        --upaep-input-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
        --upaep-input-bg: var(--ui-surface, var(--upaep-color-white));
        --upaep-input-border-size: 0;
        --upaep-input-border-color: var(--ui-border, var(--upaep-color-border-grey));
        --upaep-input-border-radius: 10px;
        --upaep-input-focus-bg: var(--ui-surface, var(--upaep-color-white));
        --upaep-input-focus-border-size: 0;
        --upaep-input-focus-border-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
        --upaep-input-focus-outline: 0;
        --upaep-input-focus-boxshadow: 0 0 0 0.25rem var(--ui-control-ring, rgba(82, 86, 90, 0.25));
        --upaep-input-disabled-bg: var(--ui-surface-3, var(--upaep-color-tenue-gray));
        --upaep-input-disabled-opacity: .5;
        --upaep-input-readonly-bg: var(--ui-surface-3, var(--upaep-color-tenue-gray));
        --upaep-input-readonly-opacity: 1;
        --upaep-input-hover-bg: var(--ui-surface, var(--upaep-color-white));
        --upaep-input-hover-border-size: 0;
        --upaep-input-hover-border-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
        --upaep-input-hover-fz: var(--upaep-fz16);
        --upaep-input-hover-fw: var(--upaep-fw-regular);
        --upaep-input-hover-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
        --upaep-input-border-bottom-size: 0;
        --upaep-input-border-bottom-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    }

    &.__version-2 {

        &:hover {
            --upaep-tokenfield-border-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
            box-shadow: 0 0 0 0.25rem var(--ui-control-ring, rgba(82, 86, 90, 0.25));
        }

        .upaep__tokenfield-wrapper {
            width: 100%;

            .upaep__tag {
                display: inline-flex;
            }

            .upaep__input-tokenfield {
                display: inline-flex;
            }
        }
    }

    .upaep__input-tokenfield.__version-2 {
        --upaep-input-bg: transparent;
        --upaep-input-focus-bg: transparent;
        --upaep-input-disabled-bg: transparent;
        --upaep-input-hover-bg: transparent;
        --upaep-input-border-size: 0;
        --upaep-input-focus-border-size: 0;
        --upaep-input-focus-outline: 0;
        --upaep-input-hover-border-size: 0;
        --upaep-input-border-bottom-size: 0;
    }
}

.was-validated,
.__validated {
    .upaep__tokenfield {
        &:has(>input:valid) {
            --upaep-tokenfield-border-color: var(--ui-success, var(--upaep-color-success));
            box-shadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.25);
        }

        &:has(>input:invalid) {
            --upaep-tokenfield-border-color: var(--ui-danger, var(--upaep-color-error));
            box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
        }
    }
}

/*? ------ Billing ------ */
.upaep__billing {
    --upaep-billing-width: 100%;
    --upaep-billing-height: auto;
    --upaep-billing-padding: 1rem;
    --upaep-billing-margin: 0;
    --upaep-billing-bg: transparent;
    --upaep-billing-border-size: 1px;
    --upaep-billing-border-style: solid;
    --upaep-billing-border-color: transparent;
    --upaep-billing-border-radius: 10px;
    --upaep-billing-title-fz: var(--upaep-fz24);
    --upaep-billing-title-fw: var(--upaep-fw-bold);
    --upaep-billing-title-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-billing-title-aling: start;
    width: var(--upaep-billing-width);
    height: var(--upaep-billing-height);
    padding: var(--upaep-billing-padding);
    margin: var(--upaep-billing-margin);
    background: var(--upaep-billing-bg);
    border: var(--upaep-billing-border-size) var(--upaep-billing-border-style) var(--upaep-billing-border-color);
    border-radius: var(--upaep-billing-border-radius);

    .upaep__billing-form {
        width: 100%;
    }

    .upaep__input-group:has(.upaep__input.__idPersona) {
        display: none;
    }

    .upaep__billing-fiscal-data {
        width: 100%;
    }

    .upaep__billing-fisical-person-fisica {
        width: 100%;

        &:not(.is-active) {
            display: none;
        }
    }

    .upaep__billing-fisical-person-moral {
        width: 100%;

        &:not(.is-active) {
            display: none;
        }
    }

    .upaep__radio-group {
        padding: 1rem;
    }

    .upaep__billing-title {
        font-size: var(--upaep-billing-title-fz);
        font-weight: var(--upaep-billing-title-fw);
        color: var(--upaep-billing-title-color);
        text-align: var(--upaep-billing-title-aling);
        padding: 1rem;
    }

    .upaep__billing-fiscal-domicile {
        width: 100%;
    }

    .upaep__billing-button {
        width: 100%;
        display: flex;
        justify-content: center;
    }
}

/*? ------ Payment ------ */
.upaep__payment {
    --upaep-payment-width: 100%;
    --upaep-payment-height: auto;
    --upaep-payment-padding: 1rem;
    --upaep-payment-margin: 0;
    --upaep-payment-background: transparent;
    --upaep-payment-border-size: 0;
    --upaep-payment-border-style: solid;
    --upaep-payment-border-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-payment-border-radius: 10px;
    --upaep-payment-header-text-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-payment-info-title-fz: var(--upaep-fz28);
    --upaep-payment-info-title-fw: var(--upaep-fw-bold);
    --upaep-payment-info-title-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-payment-info-icon-color: var(--ui-accent, var(--upaep-color-red));
    --upaep-payment-info-line-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-payment-info-nopayment-fz: var(--upaep-fz20);
    --upaep-payment-info-nopayment-fw: var(--upaep-fw-bold);
    --upaep-payment-info-nopayment-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-payment-info-total-fz: var(--upaep-fz20);
    --upaep-payment-info-total-fw: var(--upaep-fw-bold);
    --upaep-payment-info-total-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-payment-ballances-line-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-payment-balances-item-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-payment-balances-item-bg: none;
    --upaep-payment-balances-item-hover-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-payment-balances-item-hover-bg: var(--ui-surface-2, var(--upaep-color-background));
    --upaep-payment-methods-item-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-payment-methods-item-bg: none;
    --upaep-payment-methods-item-hover-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-payment-methods-item-hover-bg: var(--ui-surface-2, var(--upaep-color-background));
    --upaep-payment-options-item-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-payment-options-item-bg: none;
    --upaep-payment-options-item-hover-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-payment-options-item-hover-bg: var(--ui-surface-2, var(--upaep-color-background));
    width: var(--upaep-payment-width);
    height: var(--upaep-payment-height);
    padding: var(--upaep-payment-padding);
    margin: var(--upaep-payment-margin);
    background: var(--upaep-payment-background);
    border: var(--upaep-payment-border-size) var(--upaep-payment-border-style) var(--upaep-payment-border-color);
    border-radius: var(--upaep-payment-border-radius);

    &.is-pay {

        .upaep__payment-confirmation,
        .upaep__payment-file,
        .upaep__payment-init {
            display: none;
        }

        .upaep__payment-content {
            animation: a_fadeIn .5s
        }
    }

    &:not(.is-pay) {
        .upaep__payment-init {
            animation: a_fadeIn .5s
        }

        .upaep__payment-confirmation,
        .upaep__payment-file,
        .upaep__payment-content {
            display: none;
        }
    }

    .upaep__payment-inner {
        width: 100%;
    }

    .upaep__payment-init {
        width: 100%;
    }

    .upaep__payment-content {
        width: 100%;

        &:has(.upaep__payment-sections .upaep__payment-section.__confirmation.is-active) .upaep__payment-header,
        &:has(.upaep__payment-sections .upaep__payment-section.__failed.is-active) .upaep__payment-header {
            display: none;
        }
    }

    .upaep__payment-file {
        width: 100%;
    }

    .upaep__payment-confirmation {
        width: 100%;
    }

    .upaep__payment-header,
    .upaep__payment-section-header {
        width: 100%;

        .upaep__btn.__back {
            --upaep-btn-width: 35px;
            --upaep-btn-height: 35px;
            --upaep-btn-margin: .5rem 0;
            --upaep-btn-padding: .5rem;
            --upaep-btn-border-radius: 50px;
            --upaep-btn-color: var(--ui-accent, var(--upaep-color-red));
            --upaep-btn-bg: var(--ui-surface, var(--upaep-color-white));
            --upaep-btn-border-color: var(--ui-surface, var(--upaep-color-white));
            --upaep-btn-hover-color: var(--ui-accent, var(--upaep-color-red));
            --upaep-btn-hover-bg: var(--ui-surface-2, var(--upaep-color-background));
            --upaep-btn-hover-border-color: var(--ui-surface-2, var(--upaep-color-background));
            --upaep-btn-disabled-color: var(--ui-accent, var(--upaep-color-red));
            --upaep-btn-disabled-bg: var(--ui-surface, var(--upaep-color-white));
            --upaep-btn-disabled-border-color: var(--ui-surface, var(--upaep-color-white));
            box-shadow: var(--upaep-box-shadow);

            &:hover {
                scale: 1.1;
            }
        }

        .upaep__text {
            --upaep-text-color: var(--upaep-payment-header-text-color);
            --upaep-text-margin: 0;
            --upaep-text-padding: 0 .5rem;

            &.__title {
                font-size: var(--upaep-fz20);
            }

            &.__instruction {
                font-size: var(--upaep-fz16);
            }
        }
    }

    .upaep__payment-body {
        width: 100%;
        display: grid;
        grid-template-columns: 4fr 3fr;
        gap: 4rem;

        &:has(.upaep__payment-sections .upaep__payment-section.__file.is-active),
        &:has(.upaep__payment-sections .upaep__payment-section.__confirmation.is-active),
        &:has(.upaep__payment-sections .upaep__payment-section.__failed.is-active) {
            grid-template-columns: 1fr;
        }

        &:has(.upaep__payment-sections .upaep__payment-section.__file.is-active) .upaep__payment-info,
        &:has(.upaep__payment-sections .upaep__payment-section.__confirmation.is-active) .upaep__payment-info,
        &:has(.upaep__payment-sections .upaep__payment-section.__failed.is-active) .upaep__payment-info {
            display: none;
        }
    }

    .upaep__payment-sections {
        width: 100%;
    }

    .upaep__payment-section {
        width: 100%;

        .upaep__payment-section-button {
            width: 100%;
            display: flex;
            justify-content: end;

            .upaep__btn.__payment {
                --upaep-btn-color: var(--ui-on-primary, var(--upaep-color-white));
                --upaep-btn-bg: var(--ui-primary, var(--upaep-color-primary));
                --upaep-btn-border-color: var(--ui-primary, var(--upaep-color-primary));
                --upaep-btn-hover-color: var(--ui-on-primary, var(--upaep-color-white));
                --upaep-btn-hover-bg: var(--ui-primary-hover, var(--upaep-color-primary-hover));
                --upaep-btn-hover-border-color: var(--ui-primary-hover, var(--upaep-color-primary-hover));
                --upaep-btn-disabled-color: var(--ui-on-primary, var(--upaep-color-white));
                --upaep-btn-disabled-bg: var(--ui-primary, var(--upaep-color-primary));
                --upaep-btn-disabled-border-color: var(--ui-primary, var(--upaep-color-primary));
                --upaep-btn-margin: 1rem 0;

                &.is-inactive {
                    display: none;
                }
            }
        }

        &:not(.is-active) {
            display: none;
        }

        &.is-active {
            animation: a_fadeIn .5s;
        }

        &.__confirmation {
            .upaep__payment-section-button {
                justify-content: center;
            }

            .img-confirmation {
                width: 150px;
                display: block;
                margin: 0 auto;
            }

            .__title {
                font-size: var(--upaep-fz24);
                font-weight: var(--upaep-fw-regular);
                color: var(--ui-success, var(--upaep-color-success));
                text-align: center;
                margin: 1rem 0;
            }

            .__text {
                font-size: var(--upaep-fz24);
                font-weight: var(--upaep-fw-regular);
                color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
                text-align: center;
                margin: 0;
            }

            &.is-active {
                .img-confirmation {
                    animation: a_bounceIn .5s;
                }
            }
        }

        &.__failed {
            .upaep__payment-section-button {
                justify-content: center;
            }

            .img-failed {
                width: 150px;
                display: block;
                margin: 0 auto;
            }

            .__title {
                font-size: var(--upaep-fz24);
                font-weight: var(--upaep-fw-regular);
                color: var(--ui-danger, var(--upaep-color-error));
                text-align: center;
                margin: 1rem 0;
            }

            .__text {
                font-size: var(--upaep-fz24);
                font-weight: var(--upaep-fw-regular);
                color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
                text-align: center;
                margin: 0;
            }

            &.is-active {
                .img-failed {
                    animation: a_bounceIn .5s;
                }
            }
        }

        &.__file {
            &:not(.__ficha) {
                .upaep__btn {
                    display: none;
                }

                iframe {
                    height: 800px;
                }
            }

            iframe {
                width: 100%;
                min-height: 500px;
            }
        }
    }

    .upaep__payment-info {
        width: 100%;
        min-height: 300px;
        padding: 1rem;
        border-radius: 10px;
        box-shadow: var(--upaep-box-shadow);

        .upaep__payment-info-titles {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .upaep__payment-info-title {
            font-size: var(--upaep-payment-info-title-fz);
            font-weight: var(--upaep-payment-info-title-fw);
            color: var(--upaep-payment-info-title-color);
        }


        .upaep__payment-info-icon {
            font-style: normal;
            font-variant: normal;
            line-height: 1;
            text-rendering: auto;
            font-family: var(--upaep-ff-fontawesome);
            font-size: var(--upaep-fz22);
            color: var(--upaep-payment-info-icon-color);

            &::before {
                content: '\f059';
            }
        }

        .upaep__line {
            --upaep-line-width: 100%;
            --upaep-line-height: 2px;
            --upaep-line-bg: var(--upaep-payment-info-line-color);
            --upaep-line-border-color: var(--upaep-payment-info-line-color);
        }

        .upaep__payment-info-noPayment {
            font-size: var(--upaep-payment-info-nopayment-fz);
            font-weight: var(--upaep-payment-info-nopayment-fw);
            color: var(--upaep-payment-info-nopayment-color);
            width: 100%;
            padding: 2rem 0;
            text-align: center;

            &.is-inactive {
                display: none;
            }
        }

        .upaep__payment-info-content {
            width: 100%;
            height: 80%;
            padding: 0 2rem;
        }

        .upaep__payment-info-select {
            width: 100%;
            list-style: none;
            padding: 0;

            li {
                display: flex;
                justify-content: space-between;
                font-size: var(--upaep-fz20);
                font-weight: var(--upaep-fw-bold);
                color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
                border-bottom: 1px solid var(--ui-border, var(--upaep-color-border-grey));
            }
        }

        &:has(.upaep__payment-info-noPayment:not(.is-inactive)) {
            .upaep__payment-info-total {
                display: none;
            }
        }

        .upaep__payment-info-total {
            width: 100%;
            display: flex;
            justify-content: space-between;
            font-size: var(--upaep-payment-info-total-fz);
            font-weight: var(--upaep-payment-info-total-fw);
            color: var(--upaep-payment-info-total-color);
        }

        .upaep__payment-info-body {
            width: 100%;
        }

        .upaep__payment-info-button {
            width: 100%;
            display: flex;
            justify-content: end;

            .upaep__btn {
                --upaep-btn-color: var(--ui-on-primary, var(--upaep-color-white));
                --upaep-btn-bg: var(--ui-primary, var(--upaep-color-primary));
                --upaep-btn-border-color: var(--ui-primary, var(--upaep-color-primary));
                --upaep-btn-hover-color: var(--ui-on-primary, var(--upaep-color-white));
                --upaep-btn-hover-bg: var(--ui-primary-hover, var(--upaep-color-primary-hover));
                --upaep-btn-hover-border-color: var(--ui-primary-hover, var(--upaep-color-primary-hover));
                --upaep-btn-disabled-color: var(--ui-on-primary, var(--upaep-color-white));
                --upaep-btn-disabled-bg: var(--ui-primary, var(--upaep-color-primary));
                --upaep-btn-disabled-border-color: var(--ui-primary, var(--upaep-color-primary));
                --upaep-btn-margin: 1rem 0;

                &.is-inactive {
                    display: none;
                }
            }
        }
    }

    .upaep__radio-group,
    .upaep__checkbox-group {
        flex-direction: column;
    }

    .upaep__balances-all {
        .upaep__line {
            --upaep-line-width: 100%;
            --upaep-line-height: 2px;
            --upaep-line-bg: var(--upaep-payment-ballances-line-color);
            --upaep-line-border-color: var(--upaep-payment-ballances-line-color);
        }
    }

    .upaep__balances-item {
        --upaep-label-color: var(--upaep-payment-balances-item-color);
        --upaep-label-fz: var(--upaep-fz16);
        --upaep-label-width: 100%;
        --upaep-label-padding: .5rem;
        --upaep-label-margin: .5rem 0;
        background: var(--upaep-payment-balances-item-bg);
        min-height: 3rem;
        border-radius: 10px;
        box-shadow: var(--upaep-box-shadow);
        justify-content: space-between;
        cursor: pointer;

        &:hover {
            --upaep-label-color: var(--upaep-payment-balances-item-hover-color);
            background: var(--upaep-payment-balances-item-hover-bg);
        }

        &:has(.__more-information) p {
            width: calc(100% / 4 - 20px);
        }

        p {
            margin: 0;
            padding: 0 .5rem;
            width: calc(100% / 3 - 20px);

            &.__cost {
                text-align: end;
            }

            &.__fecha {
                font-weight: var(--upaep-fw-regular);
            }
        }

        &:has(.upaep__radio:disabled),
        &:has(.upaep__checkbox:disabled),
        &.is-disabled {
            opacity: .5;
        }

        .upaep__radio {
            --upaep-radio-checked-color: var(--ui-accent, var(--upaep-color-red));
        }

        .upaep__checkbox {
            --upaep-checkbox-checked-color: var(--ui-accent, var(--upaep-color-red));
        }
    }

    .upaep__methods-item {
        --upaep-label-color: var(--upaep-payment-methods-item-color);
        --upaep-label-fz: var(--upaep-fz16);
        --upaep-label-width: 100%;
        --upaep-label-padding: 1rem 2rem;
        --upaep-label-margin: .5rem 0;
        background: var(--upaep-payment-methods-item-bg);
        box-shadow: var(--upaep-box-shadow);
        text-decoration: none;
        min-height: 3rem;
        border-radius: 10px;
        justify-content: space-between;
        cursor: pointer;

        &:hover {
            color: var(--upaep-payment-methods-item-hover-color);
            background: var(--upaep-payment-methods-item-hover-bg);
        }

        .upaep__methods-text {
            text-wrap: balance;

            p {
                margin: 0;

                &.__title {
                    font-size: var(--upaep-fz22);
                    font-weight: var(--upaep-fw-bold);
                }

                &.__description {
                    font-weight: var(--upaep-fw-regular);
                }
            }
        }

        .upaep__methods-img {
            width: 25px;
            height: 25px;
        }

        &:has(.upaep__radio:disabled),
        &:has(.upaep__checkbox:disabled),
        &.is-disabled {
            opacity: .5;
        }

        .upaep__radio {
            --upaep-radio-checked-color: var(--ui-accent, var(--upaep-color-red));
            display: none;
        }

        .upaep__checkbox {
            --upaep-checkbox-checked-color: var(--ui-accent, var(--upaep-color-red));
        }
    }

    .upaep__options-item {
        --upaep-label-color: var(--upaep-payment-options-item-color);
        --upaep-label-fz: var(--upaep-fz16);
        --upaep-label-width: 100%;
        --upaep-label-padding: 1rem 2rem;
        --upaep-label-margin: .5rem 0;
        background: var(--upaep-payment-options-item-bg);
        min-height: 3rem;
        border-radius: 10px;
        box-shadow: var(--upaep-box-shadow);
        justify-content: start;
        gap: 5px;
        cursor: pointer;

        &:hover {
            --upaep-label-color: var(--upaep-payment-options-item-hover-color);
            background: var(--upaep-payment-options-item-hover-bg);
        }

        .upaep__options-text {
            width: 70%;
            text-wrap: balance;

            p {
                margin: 0;

                &.__title {
                    font-size: var(--upaep-fz22);
                    font-weight: var(--upaep-fw-bold);
                }

                &.__description {
                    font-weight: var(--upaep-fw-regular);
                }
            }
        }

        .upaep__options-imgs {
            &:has(img:nth-child(3)) {
                display: grid;
                justify-items: center;
                grid-template-columns: repeat(1, 1fr);
            }

            img {
                height: 35px;

                &.__visa {
                    width: 60px;
                }

                &._mastercard {
                    width: 60px;
                }

                &.__bbva {
                    width: 100px;
                }

                &.__santander {
                    width: 100px;
                }

                &.__amex {
                    width: 50px;
                    height: 50px;
                }
            }
        }

        &:has(.upaep__radio:disabled),
        &:has(.upaep__checkbox:disabled),
        &.is-disabled {
            opacity: .5;
        }

        .upaep__radio {
            --upaep-radio-checked-color: var(--ui-accent, var(--upaep-color-red));
        }

        .upaep__checkbox {
            --upaep-checkbox-checked-color: var(--ui-accent, var(--upaep-color-red));
        }
    }

    .upaep__modal {
        .upaep__modal-img {
            width: 100%;
            display: flex;
            justify-content: center;

            img {
                width: 150px;
            }
        }

        .upaep__modal-texts {
            .__title {
                font-size: var(--upaep-fz22);
                font-weight: var(--upaep-fw-bold);
                color: var(--ui-accent, var(--upaep-color-red));
                margin: 1rem 0;
                text-align: center;
            }

            .__text {
                font-size: var(--upaep-fz20);
                font-weight: var(--upaep-fw-bold);
                color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
                margin: 0;
                text-align: center;
            }
        }

        .upaep__modal-button {
            display: flex;
            justify-content: center;
        }

        .upaep__btn.__payment {
            --upaep-btn-color: var(--ui-on-primary, var(--upaep-color-white));
            --upaep-btn-bg: var(--ui-primary, var(--upaep-color-primary));
            --upaep-btn-border-color: var(--ui-primary, var(--upaep-color-primary));
            --upaep-btn-hover-color: var(--ui-on-primary, var(--upaep-color-white));
            --upaep-btn-hover-bg: var(--ui-primary-hover, var(--upaep-color-primary-hover));
            --upaep-btn-hover-border-color: var(--ui-primary-hover, var(--upaep-color-primary-hover));
            --upaep-btn-disabled-color: var(--ui-on-primary, var(--upaep-color-white));
            --upaep-btn-disabled-bg: var(--ui-primary, var(--upaep-color-primary));
            --upaep-btn-disabled-border-color: var(--ui-primary, var(--upaep-color-primary));
            --upaep-btn-margin: 1rem 0;
        }
    }
}

/*? ------ Inifite Scroller ------ */
.upaep__infiniteScroller {
    --upaep-infitescroller-width: 100%;
    --upaep-infitescroller-maxwidth: 800px;
    --upaep-infitescroller-heihgt: auto;
    --upaep-infitescroller-padding: 1rem;
    --upaep-infitescroller-margin: 0;
    --upaep-infitescroller-bg: ;
    --upaep-infitescroller-duration: 10s;
    --upaep-infitescroller-items-width: 100%;
    --upaep-infitescroller-items-heihgt: 100%;
    --upaep-infitescroller-items-padding: 0;
    --upaep-infitescroller-items-margin: 0;
    --upaep-infitescroller-items-gap: 10px;
    --upaep-infitescroller-item-width: 100%;
    --upaep-infitescroller-item-height: auto;
    --upaep-infitescroller-item-minwidth: 100px;
    --upaep-infitescroller-item-minheight: 2rem;
    --upaep-infitescroller-item-padding: 1rem;
    --upaep-infitescroller-item-margin: .5rem;
    --upaep-infitescroller-item-bg: var(--upaep-color-background);
    --upaep-infitescroller-item-border-size: 1px;
    --upaep-infitescroller-item-border-style: solid;
    --upaep-infitescroller-item-border-color: var(--upaep-color-border-grey);
    --upaep-infitescroller-item-border-radius: 10px;
    --upaep-infitescroller-item-boxshadow: var(--upaep-box-shadow);
    width: var(--upaep-infitescroller-width);
    max-width: var(--upaep-infitescroller-maxwidth);
    height: var(--upaep-infitescroller-heihgt);
    padding: var(--upaep-infitescroller-padding);
    margin: var(--upaep-infitescroller-margin);
    background: var(--upaep-infitescroller-bg);
    overflow: hidden;
    outline: 3px solid var(--upaep-color-blue-primary);
    mask: linear-gradient(90deg, transparent, var(--upaep-color-black) 20%, var(--upaep-color-black) 80%, transparent);

    &.__right {
        .upaep__infiniteScroller-items {
            flex-direction: row-reverse;
            animation: scroller-right var(--upaep-infitescroller-duration) linear infinite;
        }
    }

    &.__left {
        .upaep__infiniteScroller-items {
            flex-direction: row;
            animation: scroller-left var(--upaep-infitescroller-duration) linear infinite;
        }
    }

    .upaep__infiniteScroller-items {
        width: var(--upaep-infitescroller-items-width);
        height: var(--upaep-infitescroller-items-heihgt);
        padding: var(--upaep-infitescroller-items-padding);
        margin: var(--upaep-infitescroller-items-margin);
        gap: var(--upaep-infitescroller-items-gap);
        list-style: none;
        display: flex;
        flex-wrap: nowrap;

        &:hover {
            animation-play-state: paused;
        }
    }

    .upaep__infiniteScroller-item {
        width: var(--upaep-infitescroller-item-width);
        height: var(--upaep-infitescroller-item-height);
        min-width: var(--upaep-infitescroller-item-minwidth);
        min-height: var(--upaep-infitescroller-item-minheight);
        padding: var(--upaep-infitescroller-item-padding);
        margin: var(--upaep-infitescroller-item-margin);
        background: var(--upaep-infitescroller-item-bg);
        border: var(--upaep-infitescroller-item-border-size) var(--upaep-infitescroller-item-border-style) var(--upaep-infitescroller-item-border-color);
        border-radius: var(--upaep-infitescroller-item-border-radius);
        box-shadow: var(--upaep-infitescroller-item-boxshadow);
    }

}

@keyframes scroller-right {
    0% {
        transform: translate(0);
    }

    100% {
        transform: translate(calc(100% - var(--upaep-infitescroller-items-gap)));
    }
}

@keyframes scroller-left {
    0% {
        transform: translate(0);
    }

    100% {
        transform: translate(calc(-100% - var(--upaep-infitescroller-items-gap)));
    }
}

/*? ------ Datepicker ------ */
.upaep__datepicker {
    /* gris de relleno reutilizado en hover/disabled/range (día, mes, año, hora) */
    --upaep-datepicker-fill-grey: #dee2de;
    --upaep-datepicker-width: 100%;
    --upaep-datepicker-height: auto;
    --upaep-datepicker-maxwidth: 340px;
    --upaep-datepicker-padding: 0;
    --upaep-datepicker-margin: 0;
    --upaep-datepicker-border-size: 1px;
    --upaep-datepicker-border-style: solid;
    --upaep-datepicker-border-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-datepicker-border-radius: 10px;
    --upaep-datepicker-position: ;
    --upaep-datepicker-zindex: var(--upaep-zindex-datepicker);
    --upaep-datepicker-header-padding: .55rem .75rem;
    --upaep-datepicker-header-bg: var(--ui-neutral, var(--upaep-color-dark-grey));
    --upaep-datepicker-header-border-radius: 10px 10px 0 0;
    --upaep-datepicker-title-fz: var(--upaep-fz16);
    --upaep-datepicker-title-fw: var(--upaep-fw-bold);
    --upaep-datepicker-title-color: var(--ui-on-neutral, var(--upaep-color-white));
    --upaep-datepicker-date-fz: var(--upaep-fz16);
    --upaep-datepicker-date-fw: var(--upaep-fw-bold);
    --upaep-datepicker-date-color: var(--ui-on-neutral, var(--upaep-color-white));
    --upaep-datepicker-inner-padding: .6rem;
    --upaep-datepicker-inner-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-datepicker-inner-border-radius: 10px 10px 0 0;
    --upaep-datepicker-footer-padding: .2rem .6rem .6rem .6rem;
    --upaep-datepicker-footer-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-datepicker-footer-border-radius: 0 0 10px 10px;
    --upaep-datepicker-day-width: 27px;
    --upaep-datepicker-day-height: 27px;
    --upaep-datepicker-day-padding: .05rem;
    --upaep-datepicker-day-margin: 0;
    --upaep-datepicker-day-fz: var(--upaep-fz12);
    --upaep-datepicker-day-fw: var(--upaep-fw-bold);
    --upaep-datepicker-day-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-datepicker-day-bg: ;
    --upaep-datepicker-day-border-size: ;
    --upaep-datepicker-day-border-style: ;
    --upaep-datepicker-day-border-color: ;
    --upaep-datepicker-day-border-radius: 10px;
    --upaep-datepicker-day-hover-fz: var(--upaep-fz12);
    --upaep-datepicker-day-hover-fw: var(--upaep-fw-bold);
    --upaep-datepicker-day-hover-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-datepicker-day-hover-bg: var(--upaep-datepicker-fill-grey);
    --upaep-datepicker-day-hover-border-size: 1px;
    --upaep-datepicker-day-hover-border-style: solid;
    --upaep-datepicker-day-hover-border-color: var(--upaep-datepicker-fill-grey);
    --upaep-datepicker-day-hover-border-radius: 10px;
    --upaep-datepicker-day-active-fz: var(--upaep-fz12);
    --upaep-datepicker-day-active-fw: var(--upaep-fw-bold);
    --upaep-datepicker-day-active-color: var(--ui-on-neutral, var(--upaep-color-white));
    --upaep-datepicker-day-active-bg: var(--ui-neutral, var(--upaep-color-dark-grey));
    --upaep-datepicker-day-active-border-size: 1px;
    --upaep-datepicker-day-active-border-style: solid;
    --upaep-datepicker-day-active-border-color: var(--upaep-color-dark-grey);
    --upaep-datepicker-day-active-border-radius: 10px;
    --upaep-datepicker-day-disabled-fz: var(--upaep-fz12);
    --upaep-datepicker-day-disabled-fw: var(--upaep-fw-bold);
    --upaep-datepicker-day-disabled-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-datepicker-day-disabled-bg: var(--upaep-datepicker-fill-grey);
    --upaep-datepicker-day-disabled-border-size: 1px;
    --upaep-datepicker-day-disabled-border-style: solid;
    --upaep-datepicker-day-disabled-border-color: var(--upaep-datepicker-fill-grey);
    --upaep-datepicker-day-disabled-border-radius: 10px;
    /*? Los botones de acción (Cancelar, Limpiar, Hoy, Ok) heredaban los 14px del botón base y desentonaban con la rejilla. */
    --upaep-datepicker-btn-fz: var(--upaep-fz12);
    --upaep-datepicker-btn-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-datepicker-btn-bg: transparent;
    --upaep-datepicker-btn-border-color: transparent;
    --upaep-datepicker-btn-hover-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-datepicker-btn-hover-bg: var(--ui-tertiary, var(--upaep-color-tertiary));
    --upaep-datepicker-btn-hover-border-color: var(--ui-tertiary, var(--upaep-color-tertiary));
    --upaep-datepicker-btn-disabled-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-datepicker-btn-disabled-bg: transparent;
    --upaep-datepicker-btn-disabled-border-color: transparent;
    --upaep-datepicker-month-width: 58px;
    --upaep-datepicker-month-height: 27px;
    --upaep-datepicker-month-padding: .25rem;
    --upaep-datepicker-month-margin: .2rem .3rem;
    --upaep-datepicker-month-fz: var(--upaep-fz12);
    --upaep-datepicker-month-fw: var(--upaep-fw-bold);
    --upaep-datepicker-month-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-datepicker-month-bg: ;
    --upaep-datepicker-month-border-size: ;
    --upaep-datepicker-month-border-style: ;
    --upaep-datepicker-month-border-color: ;
    --upaep-datepicker-month-border-radius: 10px;
    --upaep-datepicker-month-hover-fz: var(--upaep-fz12);
    --upaep-datepicker-month-hover-fw: var(--upaep-fw-bold);
    --upaep-datepicker-month-hover-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-datepicker-month-hover-bg: var(--upaep-datepicker-fill-grey);
    --upaep-datepicker-month-hover-border-size: 1px;
    --upaep-datepicker-month-hover-border-style: solid;
    --upaep-datepicker-month-hover-border-color: var(--upaep-datepicker-fill-grey);
    --upaep-datepicker-month-hover-border-radius: 10px;
    --upaep-datepicker-month-active-fz: var(--upaep-fz12);
    --upaep-datepicker-month-active-fw: var(--upaep-fw-bold);
    --upaep-datepicker-month-active-color: var(--ui-on-neutral, var(--upaep-color-white));
    --upaep-datepicker-month-active-bg: var(--ui-neutral, var(--upaep-color-dark-grey));
    --upaep-datepicker-month-active-border-size: 1px;
    --upaep-datepicker-month-active-border-style: solid;
    --upaep-datepicker-month-active-border-color: var(--upaep-color-dark-grey);
    --upaep-datepicker-month-active-border-radius: 10px;
    --upaep-datepicker-month-disabled-fz: var(--upaep-fz12);
    --upaep-datepicker-month-disabled-fw: var(--upaep-fw-bold);
    --upaep-datepicker-month-disabled-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-datepicker-month-disabled-bg: var(--upaep-datepicker-fill-grey);
    --upaep-datepicker-month-disabled-border-size: 1px;
    --upaep-datepicker-month-disabled-border-style: solid;
    --upaep-datepicker-month-disabled-border-color: var(--upaep-datepicker-fill-grey);
    --upaep-datepicker-month-disabled-border-radius: 10px;
    --upaep-datepicker-year-width: 58px;
    --upaep-datepicker-year-height: 27px;
    --upaep-datepicker-year-padding: .25rem;
    --upaep-datepicker-year-margin: .2rem .3rem;
    --upaep-datepicker-year-fz: var(--upaep-fz12);
    --upaep-datepicker-year-fw: var(--upaep-fw-bold);
    --upaep-datepicker-year-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-datepicker-year-bg: ;
    --upaep-datepicker-year-border-size: ;
    --upaep-datepicker-year-border-style: ;
    --upaep-datepicker-year-border-color: ;
    --upaep-datepicker-year-border-radius: 10px;
    --upaep-datepicker-year-hover-fz: var(--upaep-fz12);
    --upaep-datepicker-year-hover-fw: var(--upaep-fw-bold);
    --upaep-datepicker-year-hover-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-datepicker-year-hover-bg: var(--upaep-datepicker-fill-grey);
    --upaep-datepicker-year-hover-border-size: 1px;
    --upaep-datepicker-year-hover-border-style: solid;
    --upaep-datepicker-year-hover-border-color: var(--upaep-datepicker-fill-grey);
    --upaep-datepicker-year-hover-border-radius: 10px;
    --upaep-datepicker-year-active-fz: var(--upaep-fz12);
    --upaep-datepicker-year-active-fw: var(--upaep-fw-bold);
    --upaep-datepicker-year-active-color: var(--ui-on-neutral, var(--upaep-color-white));
    --upaep-datepicker-year-active-bg: var(--ui-neutral, var(--upaep-color-dark-grey));
    --upaep-datepicker-year-active-border-size: 1px;
    --upaep-datepicker-year-active-border-style: solid;
    --upaep-datepicker-year-active-border-color: var(--upaep-color-dark-grey);
    --upaep-datepicker-year-active-border-radius: 10px;
    --upaep-datepicker-year-disabled-fz: var(--upaep-fz12);
    --upaep-datepicker-year-disabled-fw: var(--upaep-fw-bold);
    --upaep-datepicker-year-disabled-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-datepicker-year-disabled-bg: var(--upaep-datepicker-fill-grey);
    --upaep-datepicker-year-disabled-border-size: 1px;
    --upaep-datepicker-year-disabled-border-style: solid;
    --upaep-datepicker-year-disabled-border-color: var(--upaep-datepicker-fill-grey);
    --upaep-datepicker-year-disabled-border-radius: 10px;
    --upaep-datepicker-mark-width: calc(100% / 7 * 7);
    --upaep-datepicker-mark-bg: var(--upaep-color-light-grey);
    --upaep-datepicker-mark-border-radius: 10px;
    --upaep-datepicker-range-bg: var(--upaep-datepicker-fill-grey);
    --upaep-datepicker-range-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    /* día del mes anterior/siguiente (showOutsideDays): atenuado */
    --upaep-datepicker-day-outside-color: var(--upaep-datepicker-day-disabled-color);
    --upaep-datepicker-day-outside-opacity: .45;
    /* extremo fijo del rango (rangeStartDisabled / rangeEndDisabled) */
    --upaep-datepicker-day-locked-ring-size: 2px;
    --upaep-datepicker-day-locked-ring-color: var(--upaep-datepicker-day-active-border-color);
    --upaep-datepicker-day-locked-dot-color: var(--upaep-datepicker-day-active-color);
    --upaep-datepicker-week-border-size: 1px;
    --upaep-datepicker-week-border-style: solid;
    --upaep-datepicker-week-border-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-datepicker-limit-fz: var(--upaep-fz12);
    --upaep-datepicker-limit-fw: var(--upaep-fw-bold);
    --upaep-datepicker-limit-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    width: var(--upaep-datepicker-width);
    height: var(--upaep-datepicker-height);
    max-width: var(--upaep-datepicker-maxwidth);
    padding: var(--upaep-datepicker-padding);
    margin: var(--upaep-datepicker-margin);
    position: relative;

    &.is-visible {
        /* inline: el panel se ajusta a su contenido (sin espacio sobrante a la derecha) */
        width: fit-content;
        max-width: 100%;

        .upaep__datepicker-cancel {
            display: none;
        }

        /* Se oculta la PARTE VISIBLE del input-group (segmentos + icono), pero se
           conserva el input real (oculto/focusable) para que `required` valide en submit.
           El input-group colapsa a 0 porque su único hijo en flujo desaparece. */
        .upaep__datepicker-input-container,
        .upaep__input-icon {
            display: none;
        }

        .upaep__input-group {
            min-height: 0;
            padding: 0;
            margin: 0;
            border: none;
            background: none;
        }

        /* sin márgenes sueltos del modo dropdown; el panel queda pegado */
        .upaep__datepicker-content {
            margin: 0;
        }

        .upaep__timepicker {
            --upaep-timepicker-margin: 0;
        }

        /* validación por CLASE (is-invalid/is-valid que fija el JS) */
        &:has(.upaep__input.is-invalid) .upaep__datepicker-content {
            box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
            border-color: var(--ui-danger, var(--upaep-color-error));
        }

        &:has(.upaep__input.is-valid) .upaep__datepicker-content {
            box-shadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.25);
            border-color: var(--ui-success, var(--upaep-color-success));
        }
    }

    &:not(.is-visible) {
        --upaep-datepicker-position: absolute;
    }

    &:not(.is-show):not(.is-visible) {

        .upaep__datepicker-content {
            display: none;
        }
    }

    &:not(:has(.upaep__datepicker-footer)) {
        --upaep-datepicker-inner-border-radius: 10px;
    }

    &.is-disabled {
        opacity: .5;
        pointer-events: none;
        cursor: not-allowed;
    }

    /* solo-lectura: el campo se ve normal (no atenuado) pero no abre ni se edita */
    &.is-readonly {

        .upaep__input-icon {
            pointer-events: none;
            opacity: .55;
        }

        .upaep__datepicker-input-container {
            cursor: default;

            .upaep__datepicker-input-label.__editable {
                pointer-events: none;
                cursor: default;
            }
        }

        /* modo visible: el panel se muestra pero no es interactivo */
        .upaep__datepicker-content {
            pointer-events: none;
        }
    }

    /* El input real se oculta pero queda FOCUSABLE (no `display:none`), para que la
       validación nativa de `required` funcione en el submit. Con `display:none` el
       navegador lanza "An invalid form control ... is not focusable" y bloquea el envío.
       SÓLO se oculta en v2 (input segmentado) o en modo inline (visible); en v1 (dropdown
       clásico) el input ES el campo visible y se muestra tal cual. */
    &.__v2 .upaep__input,
    &.is-visible .upaep__input {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: 0;
        border: 0;
        opacity: 0;
        overflow: hidden;
        pointer-events: none;
        clip-path: inset(50%);
    }

    .upaep__input[disabled]~.upaep__input-icon {
        pointer-events: none;
        opacity: .5;
    }

    .upaep__input-icon {
        /*? El icono abre el calendario: lleva el cursor de acción (el halo del hover ya lo anunciaba, el cursor no). */
        cursor: pointer;
        color: var(--upaep-input-icon-color);

        /*? Un solo hover, el del contenedor: el color cambia en `.upaep__input-icon` y el SVG lo hereda
            (antes el `<i>` tenía su propio :hover con otro color/tamaño, y el halo del contenedor otro). */
        &:hover {
            color: var(--upaep-input-icon-hover-color);
        }

        >.upaep__datepicker-icon,
        >.upaep__datepicker-icon:hover {
            flex: 0 0 auto;
            width: 1.25rem;
            height: 1.25rem;
            color: inherit;
        }

        &::after {
            content: "";
            position: absolute;
            display: block;
            inset: 50% auto auto 50%;
            transform: translate(-50%, -50%);
            border-radius: 50px;
            background-color: transparent;
            pointer-events: none;
            width: 30px;
            height: 30px;
        }

        &:hover::after {
            transition: background-color .2s cubic-bezier(.05, 0, 0, 1);
            background-color: rgba(0, 0, 0, 0.1);
        }

        &:hover {
            scale: 1;
        }
    }

    &.__timepicker {

        .upaep__datepicker-date-time {
            display: flex;
        }

        .upaep__timepicker-inner {
            --upaep-datepicker-inner-padding: 0;
        }

        .upaep__timepicker {
            --upaep-timepicker-padding: 0 1rem;
            --upaep-timepicker-margin: 0;
            --upaep-timepicker-time-width: 100%;
            display: flex;
            animation: a_fadeIn .5s;

            &:not(.is-show) {
                display: none;
            }
        }

        &:has(.upaep__timepicker.is-show) {
            .upaep__datepicker-inner {
                display: none;
            }

            .upaep__datepicker-selection,
            .upaep__datepicker-navigation,
            .upaep__datepicker-date-time {
                display: none;
            }

            .upaep__datepicker-back {
                display: unset;
            }
        }

        .upaep__timepicker-list {
            margin: 0;
        }
    }

    .upaep__datepicker-content {
        border: var(--upaep-datepicker-border-size) var(--upaep-datepicker-border-style) var(--upaep-datepicker-border-color);
        border-radius: var(--upaep-datepicker-border-radius);
        position: var(--upaep-datepicker-position);
        z-index: var(--upaep-datepicker-zindex);
        animation: a_fadeIn .5s ease-in;
    }

    .upaep__datepicker-header {
        padding: var(--upaep-datepicker-header-padding);
        background: var(--upaep-datepicker-header-bg);
        border-radius: var(--upaep-datepicker-header-border-radius);

        .upaep__datepicker-title {
            font-size: var(--upaep-datepicker-title-fz);
            font-weight: var(--upaep-datepicker-title-fw);
            color: var(--upaep-datepicker-title-color);
            margin: 0;
        }

        .upaep__datepicker-date {
            font-size: var(--upaep-datepicker-date-fz);
            font-weight: var(--upaep-datepicker-date-fw);
            color: var(--upaep-datepicker-date-color);
            margin: 0;
        }

        .upaep__datepicker-date-time {
            width: 100%;
            justify-content: center;
            margin: 0;
        }
    }

    .upaep__datepicker-controls {
        padding: var(--upaep-datepicker-inner-padding);
        padding-bottom: 0;
        background: var(--upaep-datepicker-inner-bg);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .5rem;
        border-radius: 10px 10px 0 0;

        .upaep__datepicker-selection,
        .upaep__datepicker-navigation {
            display: flex;
            gap: .5rem;
        }

        .upaep__btn.__datepicker {
            --upaep-btn-margin: 0;
            --upaep-btn-border-radius: 10px;
        }
    }

    .upaep__timepicker-inner {
        padding: var(--upaep-datepicker-inner-padding);
        background: var(--upaep-datepicker-inner-bg);
        border-radius: var(--upaep-datepicker-inner-border-radius);

        &:not(:has(.upaep__timepicker.is-show)) {
            display: none;
        }
    }

    .upaep__datepicker-inner {
        padding: var(--upaep-datepicker-inner-padding);
        background: var(--upaep-datepicker-inner-bg);
        border-radius: var(--upaep-datepicker-inner-border-radius);

        .upaep__datepicker-section {
            margin: 0;
            position: relative;
            z-index: 1;
            /* crea contexto de apilamiento (como la fila de días) para la barra ::after del rango */
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;

            &:not(.is-active) {
                display: none;
            }

            &.is-active {
                animation: a_fadeIn .5s;
            }
        }

        .upaep__datepicker-weeks {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            gap: 4px;
            overflow: hidden;

            .upaep__datepicker-week-head,
            .upaep__datepicker-week {
                position: relative;
                z-index: 1;
                display: inline-flex;
                gap: .3rem;
            }

            .upaep__datepicker-week-head {
                border-bottom: var(--upaep-datepicker-week-border-size) var(--upaep-datepicker-week-border-style) var(--upaep-datepicker-week-border-color);
            }
        }

        .upaep__datepicker-days {
            width: 100%;
        }

        .upaep__datepicker-mark {
            width: var(--upaep-datepicker-mark-width);
            background: var(--upaep-datepicker-mark-bg);
            border-radius: var(--upaep-datepicker-mark-border-radius);
            position: absolute;
            inset: 0;
            z-index: 5;

            &:not(.is-active) {
                display: none;
            }
        }

        /* Número de semana (showWeekNumber): columna izquierda en cada fila */
        .upaep__datepicker-week-number {
            width: var(--upaep-datepicker-day-width);
            height: var(--upaep-datepicker-day-height);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: var(--upaep-datepicker-day-fz);
            color: var(--ui-text-muted, var(--upaep-color-grey, #6c757d));
            opacity: .6;
            z-index: 10;
        }

        .upaep__datepicker-day-head,
        .upaep__datepicker-day {
            width: var(--upaep-datepicker-day-width);
            height: var(--upaep-datepicker-day-height);
            padding: var(--upaep-datepicker-day-padding);
            margin: var(--upaep-datepicker-day-margin);
            font-size: var(--upaep-datepicker-day-fz);
            font-weight: var(--upaep-datepicker-day-fw);
            color: var(--upaep-datepicker-day-color);
            display: inline-flex;
            justify-content: center;
            align-items: center;
            gap: .5rem;
            z-index: 10;
        }

        .upaep__datepicker-day {
            background: var(--upaep-datepicker-day-bg);
            border: var(--upaep-datepicker-day-border-size) var(--upaep-datepicker-day-border-style) var(--upaep-datepicker-day-border-color);
            border-radius: var(--upaep-datepicker-day-border-radius);
            cursor: pointer;
            text-decoration: none;
            animation: a_zoomIn .3s ease-in;
            transition: border-radius 0.2s ease;

            &:not(.is-active):hover {
                font-size: var(--upaep-datepicker-day-hover-fz);
                font-weight: var(--upaep-datepicker-day-hover-fw);
                color: var(--upaep-datepicker-day-hover-color);
                background: var(--upaep-datepicker-day-hover-bg);
                border: var(--upaep-datepicker-day-hover-border-size) var(--upaep-datepicker-day-hover-border-style) var(--upaep-datepicker-day-hover-border-color);
                border-radius: var(--upaep-datepicker-day-hover-border-radius);
            }

            &.is-active {
                font-size: var(--upaep-datepicker-day-active-fz);
                font-weight: var(--upaep-datepicker-day-active-fw);
                color: var(--upaep-datepicker-day-active-color);
                background: var(--upaep-datepicker-day-active-bg);
                border: var(--upaep-datepicker-day-active-border-size) var(--upaep-datepicker-day-active-border-style) var(--upaep-datepicker-day-active-border-color);
                border-radius: var(--upaep-datepicker-day-active-border-radius);
            }

            &.is-today {
                border: var(--upaep-datepicker-day-active-border-size) var(--upaep-datepicker-day-active-border-style) var(--upaep-datepicker-day-active-border-color) !important;
            }

            &.is-disabled {
                font-size: var(--upaep-datepicker-day-disabled-fz);
                font-weight: var(--upaep-datepicker-day-disabled-fw);
                color: var(--upaep-datepicker-day-disabled-color);
                background: var(--upaep-datepicker-day-disabled-bg);
                border: var(--upaep-datepicker-day-disabled-border-size) var(--upaep-datepicker-day-disabled-border-style) var(--upaep-datepicker-day-disabled-border-color);
                border-radius: var(--upaep-datepicker-day-disabled-border-radius);
                opacity: .5;
                pointer-events: none;
            }

            &.is-inactive {
                pointer-events: none;
            }

            /* Día del mes anterior/siguiente (showOutsideDays): atenuado pero navegable */
            &.is-outside:not(.is-active):not(.is-range) {
                color: var(--upaep-datepicker-day-outside-color);
                opacity: var(--upaep-datepicker-day-outside-opacity);
            }

            &.is-range {
                color: var(--upaep-datepicker-range-color);
                background: var(--upaep-datepicker-range-bg);
                border-radius: 0;
                border-color: transparent;

                &::after {
                    content: '';
                    position: absolute;
                    inset: auto;
                    /* translate: calc(var(--upaep-datepicker-day-width) / 2) 0; */
                    width: calc(var(--upaep-datepicker-day-width) * 1.5);
                    height: var(--upaep-datepicker-day-height);
                    background: var(--upaep-datepicker-range-bg);
                    z-index: -1;
                }
            }

            &.is-range-start {
                border-radius: var(--upaep-datepicker-day-active-border-radius) 0 0 var(--upaep-datepicker-day-active-border-radius);
            }

            &.is-range-end {
                border-radius: 0 var(--upaep-datepicker-day-active-border-radius) var(--upaep-datepicker-day-active-border-radius) 0;
            }

            /* Extremo FIJO del rango (rangeStartDisabled / rangeEndDisabled): no editable */
            &.is-locked {
                cursor: not-allowed;
                box-shadow: inset 0 0 0 var(--upaep-datepicker-day-locked-ring-size) var(--upaep-datepicker-day-locked-ring-color);

                &::before {
                    content: '';
                    position: absolute;
                    top: 3px;
                    right: 3px;
                    width: 5px;
                    height: 5px;
                    border-radius: 50%;
                    background: var(--upaep-datepicker-day-locked-dot-color);
                    opacity: .9;
                }
            }

            /* Vista previa del rango al pasar el mouse (antes de fijar el 2º extremo) */
            &.is-range-preview {
                color: var(--upaep-datepicker-range-color);
                background: var(--upaep-datepicker-range-bg);
                border-radius: 0;
                border-color: transparent;
                opacity: .5;

                &::after {
                    content: '';
                    position: absolute;
                    inset: auto;
                    width: calc(var(--upaep-datepicker-day-width) * 1.5);
                    height: var(--upaep-datepicker-day-height);
                    background: var(--upaep-datepicker-range-bg);
                    z-index: -1;
                }
            }

            &.is-range-preview-start {
                border-radius: var(--upaep-datepicker-day-active-border-radius) 0 0 var(--upaep-datepicker-day-active-border-radius);
            }

            &.is-range-preview-end {
                border-radius: 0 var(--upaep-datepicker-day-active-border-radius) var(--upaep-datepicker-day-active-border-radius) 0;
            }
        }

        .upaep__datepicker-year {
            width: var(--upaep-datepicker-year-width);
            height: var(--upaep-datepicker-year-height);
            padding: var(--upaep-datepicker-year-padding);
            margin: var(--upaep-datepicker-year-margin);
            font-size: var(--upaep-datepicker-year-fz);
            font-weight: var(--upaep-datepicker-year-fw);
            color: var(--upaep-datepicker-year-color);
            background: var(--upaep-datepicker-year-bg);
            border: var(--upaep-datepicker-year-border-size) var(--upaep-datepicker-year-border-style) var(--upaep-datepicker-year-border-color);
            border-radius: var(--upaep-datepicker-year-border-radius);
            display: inline-flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            animation: a_zoomIn .3s ease-in;

            &:not(.is-active):hover {
                font-size: var(--upaep-datepicker-year-hover-fz);
                font-weight: var(--upaep-datepicker-year-hover-fw);
                color: var(--upaep-datepicker-year-hover-color);
                background: var(--upaep-datepicker-year-hover-bg);
                border: var(--upaep-datepicker-year-hover-border-size) var(--upaep-datepicker-year-hover-border-style) var(--upaep-datepicker-year-hover-border-color);
                border-radius: var(--upaep-datepicker-year-border-radius);
            }

            &.is-active {
                font-size: var(--upaep-datepicker-year-active-fz);
                font-weight: var(--upaep-datepicker-year-active-fw);
                color: var(--upaep-datepicker-year-active-color);
                background: var(--upaep-datepicker-year-active-bg);
                border: var(--upaep-datepicker-year-active-border-size) var(--upaep-datepicker-year-active-border-style) var(--upaep-datepicker-year-active-border-color);
                border-radius: var(--upaep-datepicker-year-active-border-radius);
            }

            &.is-disabled {
                font-size: var(--upaep-datepicker-year-disabled-fz);
                font-weight: var(--upaep-datepicker-year-disabled-fw);
                color: var(--upaep-datepicker-year-disabled-color);
                background: var(--upaep-datepicker-year-disabled-bg);
                border: var(--upaep-datepicker-year-disabled-border-size) var(--upaep-datepicker-year-disabled-border-style) var(--upaep-datepicker-year-disabled-border-color);
                border-radius: var(--upaep-datepicker-year-disabled-border-radius);
                opacity: .5;
                pointer-events: none;
            }

            /* Rango de años (mismo patrón que los días) */
            &.is-range {
                color: var(--upaep-datepicker-range-color);
                background: var(--upaep-datepicker-range-bg);
                border-radius: 0;
                border-color: transparent;

                &::after {
                    content: '';
                    position: absolute;
                    inset: auto;
                    /* año + gap de ambos lados (margin .45rem) + un poco de solape para no dejar línea */
                    width: calc(var(--upaep-datepicker-year-width) + (0.45rem * 3));
                    height: var(--upaep-datepicker-year-height);
                    background: var(--upaep-datepicker-range-bg);
                    z-index: -1;
                }
            }

            &.is-range-start {
                border-radius: var(--upaep-datepicker-year-active-border-radius) 0 0 var(--upaep-datepicker-year-active-border-radius);
            }

            &.is-range-end {
                border-radius: 0 var(--upaep-datepicker-year-active-border-radius) var(--upaep-datepicker-year-active-border-radius) 0;
            }

            &.is-range-preview {
                color: var(--upaep-datepicker-range-color);
                background: var(--upaep-datepicker-range-bg);
                border-radius: 0;
                border-color: transparent;
                opacity: .5;

                &::after {
                    content: '';
                    position: absolute;
                    inset: auto;
                    width: calc(var(--upaep-datepicker-year-width) + (0.45rem * 2));
                    height: var(--upaep-datepicker-year-height);
                    background: var(--upaep-datepicker-range-bg);
                    z-index: -1;
                }
            }

            &.is-range-preview-start {
                border-radius: var(--upaep-datepicker-year-active-border-radius) 0 0 var(--upaep-datepicker-year-active-border-radius);
            }

            &.is-range-preview-end {
                border-radius: 0 var(--upaep-datepicker-year-active-border-radius) var(--upaep-datepicker-year-active-border-radius) 0;
            }
        }

        .upaep__datepicker-month {
            width: var(--upaep-datepicker-month-width);
            height: var(--upaep-datepicker-month-height);
            padding: var(--upaep-datepicker-month-padding);
            margin: var(--upaep-datepicker-month-margin);
            font-size: var(--upaep-datepicker-month-fz);
            font-weight: var(--upaep-datepicker-month-fw);
            color: var(--upaep-datepicker-month-color);
            background: var(--upaep-datepicker-month-bg);
            border: var(--upaep-datepicker-month-border-size) var(--upaep-datepicker-month-border-style) var(--upaep-datepicker-month-border-color);
            border-radius: var(--upaep-datepicker-month-border-radius);
            display: inline-flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            animation: a_zoomIn .3s ease-in;

            &:not(.is-active):hover {
                font-size: var(--upaep-datepicker-month-hover-fz);
                font-weight: var(--upaep-datepicker-month-hover-fw);
                color: var(--upaep-datepicker-month-hover-color);
                background: var(--upaep-datepicker-month-hover-bg);
                border: var(--upaep-datepicker-month-hover-border-size) var(--upaep-datepicker-month-hover-border-style) var(--upaep-datepicker-month-hover-border-color);
                border-radius: var(--upaep-datepicker-month-hover-border-radius);
            }

            &.is-active {
                font-size: var(--upaep-datepicker-month-active-fz);
                font-weight: var(--upaep-datepicker-month-active-fw);
                color: var(--upaep-datepicker-month-active-color);
                background: var(--upaep-datepicker-month-active-bg);
                border: var(--upaep-datepicker-month-active-border-size) var(--upaep-datepicker-month-active-border-style) var(--upaep-datepicker-month-active-border-color);
                border-radius: var(--upaep-datepicker-month-active-border-radius);
            }

            &.is-disabled {
                font-size: var(--upaep-datepicker-month-disabled-fz);
                font-weight: var(--upaep-datepicker-month-disabled-fw);
                color: var(--upaep-datepicker-month-disabled-color);
                background: var(--upaep-datepicker-month-disabled-bg);
                border: var(--upaep-datepicker-month-disabled-border-size) var(--upaep-datepicker-month-disabled-border-style) var(--upaep-datepicker-month-disabled-border-color);
                border-radius: var(--upaep-datepicker-month-disabled-border-radius);
                opacity: .5;
                pointer-events: none;
            }

            /* Rango de meses (mismo patrón que días/años) */
            &.is-range {
                color: var(--upaep-datepicker-range-color);
                background: var(--upaep-datepicker-range-bg);
                border-radius: 0;
                border-color: transparent;

                &::after {
                    content: '';
                    position: absolute;
                    inset: auto;
                    width: calc(var(--upaep-datepicker-month-width) + (0.45rem * 3));
                    height: var(--upaep-datepicker-month-height);
                    background: var(--upaep-datepicker-range-bg);
                    z-index: -1;
                }
            }

            &.is-range-start {
                border-radius: var(--upaep-datepicker-month-active-border-radius) 0 0 var(--upaep-datepicker-month-active-border-radius);
            }

            &.is-range-end {
                border-radius: 0 var(--upaep-datepicker-month-active-border-radius) var(--upaep-datepicker-month-active-border-radius) 0;
            }

            &.is-range-preview {
                color: var(--upaep-datepicker-range-color);
                background: var(--upaep-datepicker-range-bg);
                border-radius: 0;
                border-color: transparent;
                opacity: .5;

                &::after {
                    content: '';
                    position: absolute;
                    inset: auto;
                    width: calc(var(--upaep-datepicker-month-width) + (0.45rem * 3));
                    height: var(--upaep-datepicker-month-height);
                    background: var(--upaep-datepicker-range-bg);
                    z-index: -1;
                }
            }

            &.is-range-preview-start {
                border-radius: var(--upaep-datepicker-month-active-border-radius) 0 0 var(--upaep-datepicker-month-active-border-radius);
            }

            &.is-range-preview-end {
                border-radius: 0 var(--upaep-datepicker-month-active-border-radius) var(--upaep-datepicker-month-active-border-radius) 0;
            }
        }

        .upaep__datepicker-notify {
            font-size: var(--upaep-datepicker-limit-fz);
            font-weight: var(--upaep-datepicker-limit-fw);
            color: var(--upaep-datepicker-limit-color);
            width: 100%;
            text-align: center;
            position: relative;
            inset: 0;
        }

    }


    &:has(.upaep__datepicker-month-container.is-active) {
        .upaep__datepicker-back {
            display: none;
        }
    }

    &:has(.upaep__datepicker-years-container.is-active),
    &:has(.upaep__datepicker-months-container.is-active) {

        .upaep__datepicker-selection,
        .upaep__datepicker-date-time {
            display: none;
        }
    }

    &:has(.upaep__datepicker-months-container.is-active) {
        .upaep__datepicker-navigation {
            display: none;
        }
    }

    /* Mes + año (onlyMonth + withYear): mantener visibles los botones de mes/año
       aunque la grilla de meses/años esté activa, para poder cambiar el año. */
    &.__month-year {

        &:has(.upaep__datepicker-months-container.is-active),
        &:has(.upaep__datepicker-years-container.is-active) {
            .upaep__datepicker-selection {
                display: flex;
            }
        }

        /* en la grilla de meses, mostrar prev/next para cambiar el año */
        &:has(.upaep__datepicker-months-container.is-active) {
            .upaep__datepicker-navigation {
                display: flex;
            }
        }
    }

    .upaep__datepicker-footer {
        padding: var(--upaep-datepicker-footer-padding);
        background: var(--upaep-datepicker-footer-bg);
        border-radius: var(--upaep-datepicker-footer-border-radius);
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        /* izquierda: limpiar/hoy · derecha: cancelar/ok */
        gap: .5rem;
    }

    .upaep__datepicker-footer-left,
    .upaep__datepicker-footer-right {
        display: flex;
        align-items: center;
        gap: .25rem;
    }

    /* Si un grupo queda vacío (botones ocultos), no romper el space-between */
    .upaep__datepicker-footer-left:empty {
        margin-right: auto;
    }

    /* Botones de acción: heredan el patrón base (sin fondo, gris en hover);
       solo se resetea el margen porque ya no van en un __btn-group */
    .upaep__datepicker-footer .upaep__btn.__datepicker {
        --upaep-btn-margin: 0;
    }

    .upaep__btn.__datepicker {
        --upaep-btn-fz: var(--upaep-datepicker-btn-fz);
        --upaep-btn-color: var(--upaep-datepicker-btn-color);
        --upaep-btn-fw: var(--upaep-fw-bold);
        --upaep-btn-cont-fw: var(--upaep-fw-bold);
        --upaep-btn-bg: var(--upaep-datepicker-btn-bg);
        --upaep-btn-border-color: var(--upaep-datepicker-btn-border-color);
        --upaep-btn-hover-color: var(--upaep-datepicker-btn-hover-color);
        --upaep-btn-hover-bg: var(--upaep-datepicker-btn-hover-bg);
        --upaep-btn-hover-border-color: var(--upaep-datepicker-btn-hover-border-color);
        --upaep-btn-disabled-color: var(--upaep-datepicker-btn-disabled-color);
        --upaep-btn-disabled-bg: var(--upaep-datepicker-btn-disabled-bg);
        --upaep-btn-disabled-border-color: var(--upaep-datepicker-btn-disabled-border-color);
        --upaep-btn-height: 30px;
        --upaep-btn-padding: .5rem;

        &.upaep__datepicker-time,
        &.upaep__datepicker-back,
        &.upaep__datepicker-prev,
        &.upaep__datepicker-next {
            --upaep-btn-width: 30px;
        }
    }

    .upaep__datepicker-tags {
        display: flex;
        gap: .5rem;
        flex-wrap: wrap;
        margin-bottom: .5rem;

        .upaep__tag {
            --upaep-tag-minwidth: auto;
            --upaep-tag-minheight: 2rem;
            --upaep-tag-margin: 0;
            --upaep-tag-padding: .25rem .5rem;
            --upaep-tag-text-fz: var(--upaep-fz12);
            --upaep-tag-text-margin: 0;
        }
    }
}

/*? ------ Datepicker Segmented Input ------ */
.upaep__datepicker-segments {
    display: none;
    align-items: center;
    gap: 1px;
    flex: 1;
    min-width: 0;
    padding: 0.375rem 0.5rem;
    cursor: text;
    user-select: none;
    line-height: 1.5;
    color: var(--upaep-color-dark);
    font-size: var(--upaep-font-size, 1rem);
    border: 1px solid var(--ui-border, var(--upaep-color-border-grey));

    .upaep__datepicker-seg-sep {
        color: var(--ui-text-muted, var(--upaep-color-grey, #6c757d));
        padding: 0 1px;
        pointer-events: none;
    }

    .upaep__datepicker-seg {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 1px 3px;
        border-radius: 3px;
        min-width: 1.8em;
        text-align: center;
        color: var(--ui-text-muted, var(--upaep-color-grey, #6c757d));
        outline: none;
        transition: background-color 0.15s;

        &.__filled {
            color: var(--upaep-color-dark);
        }

        &.__seg-active,
        &:focus {
            background-color: var(--ui-primary, var(--upaep-color-primary, #0d6efd));
            color: var(--ui-on-primary, #fff);
        }
    }
}

/*? ------ Timepicker ------ */
.upaep__timepicker {
    --upaep-timepicker-width: 100%;
    --upaep-timepicker-height: auto;
    --upaep-timepicker-maxwidth: 400px;
    --upaep-timepicker-maxheight: 335px;
    --upaep-timepicker-padding: 0;
    --upaep-timepicker-margin: .5rem 0;
    --upaep-timepicker-border-size: 1px;
    --upaep-timepicker-border-style: solid;
    --upaep-timepicker-border-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-timepicker-border-radius: 10px;
    --upaep-timepicker-position: absolute;
    --upaep-timepicker-zindex: var(--upaep-zindex-timepicker);
    --upaep-timepicker-header-padding: 1rem;
    --upaep-timepicker-header-bg: var(--ui-neutral, var(--upaep-color-dark-grey));
    --upaep-timepicker-header-border-radius: 10px 10px 0 0;
    --upaep-timepicker-title-fz: var(--upaep-fz20);
    --upaep-timepicker-title-fw: var(--upaep-fw-bold);
    --upaep-timepicker-title-color: var(--ui-on-neutral, var(--upaep-color-white));
    --upaep-timepicker-schedule-fz: var(--upaep-fz24);
    --upaep-timepicker-schedule-fw: var(--upaep-fw-bold);
    --upaep-timepicker-schedule-color: var(--ui-on-neutral, var(--upaep-color-white));
    --upaep-timepicker-inner-padding: .6rem;
    --upaep-timepicker-inner-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-timepicker-inner-border-radius: 10px 10px 0 0;
    --upaep-timepicker-footer-padding: 0 .6rem .6rem .6rem;
    --upaep-timepicker-footer-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-timepicker-footer-border-radius: 0 0 10px 10px;
    --upaep-timepicker-time-width: 100%;
    --upaep-timepicker-time-height: 30px;
    --upaep-timepicker-time-padding: .5rem .35rem;
    --upaep-timepicker-time-border-size: 1px;
    --upaep-timepicker-time-border-style: solid;
    --upaep-timepicker-time-border-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-timepicker-time-border-radius: 10px;
    --upaep-timepicker-time-bg: ;
    --upaep-timepicker-time-fz: var(--upaep-fz14);
    --upaep-timepicker-time-fw: var(--upaep-fw-bold);
    --upaep-timepicker-time-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-timepicker-time-hover-bg: var(--upaep-datepicker-fill-grey, #dee2de);
    --upaep-timepicker-time-hover-fz: var(--upaep-fz14);
    --upaep-timepicker-time-hover-fw: var(--upaep-fw-bold);
    --upaep-timepicker-time-hover-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-timepicker-time-active-bg: var(--ui-neutral, var(--upaep-color-dark-grey));
    --upaep-timepicker-time-active-fz: var(--upaep-fz14);
    --upaep-timepicker-time-active-fw: var(--upaep-fw-bold);
    --upaep-timepicker-time-active-color: var(--ui-on-neutral, var(--upaep-color-white));
    --upaep-timepicker-btn-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-timepicker-btn-bg: var(--ui-tertiary, var(--upaep-color-tertiary));
    --upaep-timepicker-btn-border-color: var(--ui-tertiary, var(--upaep-color-tertiary));
    --upaep-timepicker-btn-hover-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-timepicker-btn-hover-bg: var(--ui-tertiary-hover, var(--upaep-color-tertiary-hover));
    --upaep-timepicker-btn-hover-border-color: var(--ui-tertiary-hover, var(--upaep-color-tertiary-hover));
    --upaep-timepicker-btn-disabled-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-timepicker-btn-disabled-bg: var(--ui-tertiary, var(--upaep-color-tertiary));
    --upaep-timepicker-btn-disabled-border-color: var(--ui-tertiary, var(--upaep-color-tertiary));
    width: var(--upaep-timepicker-width);
    height: var(--upaep-timepicker-height);
    max-width: var(--upaep-timepicker-maxwidth);
    max-height: var(--upaep-timepicker-maxheight);
    padding: var(--upaep-timepicker-padding);
    margin: var(--upaep-timepicker-margin);
    position: relative;

    &:not(.is-show):not(.is-visible) {
        .upaep__timepicker-content {
            display: none;
        }
    }

    &.is-disabled {
        opacity: .5;
        pointer-events: none;
    }

    .upaep__input[disabled]~.upaep__input-icon {
        pointer-events: none;
        opacity: .5;
    }

    .upaep__input-icon {
        cursor: pointer;
        transition: scale .3s ease-in;

        &:hover {
            scale: 1.1;
            transition: scale .3s ease-in;
        }
    }

    .upaep__timepicker-header {
        padding: var(--upaep-timepicker-header-padding);
        background: var(--upaep-timepicker-header-bg);
        border-radius: var(--upaep-timepicker-header-border-radius);

        .upaep__timepicker-title {
            font-size: var(--upaep-timepicker-title-fz);
            font-weight: var(--upaep-timepicker-title-fw);
            color: var(--upaep-timepicker-title-color);
        }

        .upaep__timepicker-schedule {
            font-size: var(--upaep-timepicker-schedule-fz);
            font-weight: var(--upaep-timepicker-schedule-fw);
            color: var(--upaep-timepicker-schedule-color);
        }

        .upaep__timepicker-date-time {
            width: 100%;
            justify-content: center;
        }
    }

    .upaep__timepicker-content {
        border: var(--upaep-timepicker-border-size) var(--upaep-timepicker-border-style) var(--upaep-timepicker-border-color);
        border-radius: var(--upaep-timepicker-border-radius);
        position: var(--upaep-timepicker-position);
        z-index: var(--upaep-timepicker-zindex);
        animation: a_fadeIn .5s ease-in;
    }

    .upaep__timepicker-inner {
        display: flex;
        max-height: var(--upaep-timepicker-maxheight);
        padding: var(--upaep-timepicker-inner-padding);
        background: var(--upaep-timepicker-inner-bg);
        border-radius: var(--upaep-timepicker-inner-border-radius);
    }

    .upaep__timepicker-footer {
        padding: var(--upaep-timepicker-footer-padding);
        background: var(--upaep-timepicker-footer-bg);
        border-radius: var(--upaep-timepicker-footer-border-radius);
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .upaep__btn.__timepicker {
        --upaep-btn-color: var(--upaep-timepicker-btn-color);
        --upaep-btn-fw: var(--upaep-fw-bold);
        --upaep-btn-cont-fw: var(--upaep-fw-bold);
        --upaep-btn-bg: var(--upaep-timepicker-btn-bg);
        --upaep-btn-border-color: var(--upaep-timepicker-btn-border-color);
        --upaep-btn-hover-color: var(--upaep-timepicker-btn-hover-color);
        --upaep-btn-hover-bg: var(--upaep-timepicker-btn-hover-bg);
        --upaep-btn-hover-border-color: var(--upaep-timepicker-btn-hover-border-color);
        --upaep-btn-disabled-color: var(--upaep-timepicker-btn-disabled-color);
        --upaep-btn-disabled-bg: var(--upaep-timepicker-btn-disabled-bg);
        --upaep-btn-disabled-border-color: var(--upaep-timepicker-btn-disabled-border-color);
    }

    .upaep__timepicker-list {
        border-left: 1px solid var(--ui-border, var(--upaep-color-border-grey));
        border-right: 1px solid var(--ui-border, var(--upaep-color-border-grey));
        padding: .25rem;
        width: 100%;
        margin: 0;
        overflow-x: hidden;
        overflow-y: auto;
        list-style: none;
        scrollbar-width: none;

        &:not(:hover) {
            scrollbar-width: none;
        }
    }

    .upaep__timepicker-time {
        width: var(--upaep-timepicker-time-width);
        height: var(--upaep-timepicker-time-height);
        padding: var(--upaep-timepicker-time-padding);
        border-radius: var(--upaep-timepicker-time-border-radius);
        background: var(--upaep-timepicker-time-bg);
        font-size: var(--upaep-timepicker-time-fz);
        font-weight: var(--upaep-timepicker-time-fw);
        color: var(--upaep-timepicker-time-color);
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        animation: a_zoomIn .3s ease-in;

        &:not(.is-active):hover {
            background: var(--upaep-timepicker-time-hover-bg);
            font-size: var(--upaep-timepicker-time-hover-fz);
            font-weight: var(--upaep-timepicker-time-hover-fw);
            color: var(--upaep-timepicker-time-hover-color);
        }

        &.is-active {
            background: var(--upaep-timepicker-time-active-bg);
            font-size: var(--upaep-timepicker-time-active-fz);
            font-weight: var(--upaep-timepicker-time-active-fw);
            color: var(--upaep-timepicker-time-active-color);
        }
    }
}

.upaep__datepicker {
    &:has(.upaep__input) {
        &.__rounded {
            .upaep__datepicker-input-container {
                border-radius: 50px;
            }
        }
    }
}

/* ===== Timepicker estilo "wheel" (rueda tipo iOS) — por defecto en el datepicker =====
   Las columnas hora/minuto/meridiano se vuelven ruedas con snap, banda central y
   desvanecido. El valor seleccionado es el ítem centrado (también funciona con clic). */
.upaep__datepicker {
    --upaep-timepicker-wheel-item-h: 32px;
    --upaep-timepicker-wheel-visible: 5;
    --upaep-timepicker-wheel-item-w: 3.25rem;
    /* banda central que marca el valor seleccionado */
    --upaep-timepicker-wheel-band-bg: rgba(82, 86, 90, .08);
    --upaep-timepicker-wheel-band-radius: 8px;
    /* colores de los ítems de la rueda según estado */
    --upaep-timepicker-wheel-color: var(--upaep-color-light-grey, #b5babd);
    --upaep-timepicker-wheel-hover-color: var(--ui-text-muted, var(--upaep-color-grey, #909496));
    --upaep-timepicker-wheel-active-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey, #52565A));
}

.upaep__datepicker .upaep__timepicker-inner {
    justify-content: center;
}

.upaep__datepicker .upaep__timepicker {
    position: relative;
    gap: .5rem;
    width: max-content;
    /* el ancho lo dan las columnas; la banda central abarca sólo ellas */
    justify-content: center;

    /* banda central fija que marca el valor seleccionado (cruza las columnas) */
    &::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        height: var(--upaep-timepicker-wheel-item-h);
        transform: translateY(-50%);
        background: var(--upaep-timepicker-wheel-band-bg);
        border-radius: var(--upaep-timepicker-wheel-band-radius);
        pointer-events: none;
        z-index: 0;
    }
}

.upaep__datepicker .upaep__timepicker-list:empty {
    display: none;
    /* p.ej. meridiano en formato 24h */
}

.upaep__datepicker .upaep__timepicker-list {
    height: calc(var(--upaep-timepicker-wheel-item-h) * var(--upaep-timepicker-wheel-visible));
    max-height: none;
    border: none;
    /* columnas de ancho fijo y centradas como grupo (no estiradas a todo el ancho) */
    flex: 0 0 auto;
    width: var(--upaep-timepicker-wheel-item-w);
    position: relative;
    z-index: 1;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    /* padding fantasma: permite centrar el primer y último ítem */
    padding: calc(var(--upaep-timepicker-wheel-item-h) * ((var(--upaep-timepicker-wheel-visible) - 1) / 2)) .25rem;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);

    &::-webkit-scrollbar {
        display: none;
    }
}

/* Wheel ÚNICO (no rango Desde/Hasta): ocupa todo el ancho con columnas en partes iguales,
   para que no quede angosto/raro al centro del panel. */
.upaep__datepicker:not(:has(.upaep__timepicker-range-group)) .upaep__timepicker {
    width: 100%;
}

.upaep__datepicker:not(:has(.upaep__timepicker-range-group)) .upaep__timepicker-list {
    flex: 1 1 0;
    width: auto;
}

.upaep__datepicker .upaep__timepicker-time {
    height: var(--upaep-timepicker-wheel-item-h);
    min-height: var(--upaep-timepicker-wheel-item-h);
    padding: 0;
    scroll-snap-align: center;
    background: transparent;
    color: var(--upaep-timepicker-wheel-color);
    transition: color .12s;

    &:not(.is-active):hover {
        background: transparent;
        color: var(--upaep-timepicker-wheel-hover-color);
    }

    &.is-active {
        background: transparent;
        color: var(--upaep-timepicker-wheel-active-color);
        font-weight: var(--upaep-fw-bold, 700);
    }
}

/* ===== Rango de horas (range + onlyTimepicker): dos grupos Desde / Hasta ===== */
.upaep__datepicker:has(.upaep__timepicker-range-group) {
    /* ruedas más compactas en el rango: 3 ítems visibles */
    --upaep-timepicker-wheel-visible: 3;
}

.upaep__datepicker:has(.upaep__timepicker-range-group) .upaep__timepicker-inner {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .25rem .5rem;
}

.upaep__datepicker .upaep__timepicker-range-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .1rem;
}

.upaep__datepicker .upaep__timepicker-range-label {
    font-size: var(--upaep-fz12, 12px);
    font-weight: var(--upaep-fw-bold);
    color: var(--ui-text-muted, var(--upaep-color-grey, #6c757d));
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* Horas múltiples: barra propia con "Agregar" bajo la rueda (sobre el footer) */
.upaep__datepicker .upaep__timepicker-add-bar {
    background: var(--ui-surface, var(--upaep-color-white));
    padding: .25rem .75rem .6rem;
    display: flex;
    justify-content: center;
}

.upaep__datepicker .upaep__timepicker-add {
    --upaep-btn-margin: 0;
    --upaep-btn-bg: var(--ui-tertiary, var(--upaep-color-tertiary));
    --upaep-btn-border-color: var(--ui-tertiary, var(--upaep-color-tertiary));
    --upaep-btn-hover-bg: var(--ui-tertiary-hover, var(--upaep-color-tertiary-hover));
    --upaep-btn-hover-border-color: var(--ui-tertiary-hover, var(--upaep-color-tertiary-hover));
    width: 100%;
    display: flex;
    justify-content: center;
    gap: .4rem;
}

/* ===== Fecha + hora: timepicker (wheel) SIEMPRE visible, debajo del calendario =====
   (sin botón de reloj ni cambio de panel). Se fuerza la visibilidad por encima de la
   lógica de toggle (is-show) del modo __timepicker. */
.upaep__datepicker.__time-below {
    /* wheel más compacto debajo del calendario: 3 ítems visibles (no 5) */
    --upaep-timepicker-wheel-visible: 3;
}

.upaep__datepicker.__time-below.__timepicker .upaep__timepicker,
.upaep__datepicker.__time-below.__timepicker .upaep__timepicker-inner {
    display: flex;
}

.upaep__datepicker.__time-below .upaep__timepicker-inner {
    justify-content: center;
    border-top: 1px solid var(--ui-border, var(--upaep-color-border-grey, #dee2e6));
    border-radius: 0;
    padding: .25rem 1rem;
}

.upaep__datepicker-input-container {
    /* resaltado (borde + anillo de foco). Cambia con el estado de validación */
    --upaep-datepicker-input-border-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-datepicker-input-hover-border-color: var(--upaep-color-dark);
    --upaep-datepicker-input-focus-ring: var(--ui-control-ring, rgba(82, 86, 90, 0.25));
    --upaep-datepicker-input-seg-active-bg: var(--ui-primary, var(--upaep-color-primary, #0d6efd));
    --upaep-datepicker-input-seg-active-color: var(--ui-on-primary, #fff);
    width: 100%;
    min-height: 40px;
    display: flex;
    align-items: center;
    padding: .35rem 3rem .35rem 0.35rem;
    cursor: text;
    user-select: none;
    border: 2px solid var(--upaep-datepicker-input-border-color);
    border-radius: 8px;
    overflow: hidden;
    font-size: var(--upaep-fz12);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

    &:hover {
        border-color: var(--upaep-datepicker-input-hover-border-color);
    }

    /* anillo de foco al editar un segmento (o al enfocar el contenedor) */
    &:has(.upaep__datepicker-input-label.is-active),
    &:focus-within {
        border-color: var(--upaep-datepicker-input-border-color);
        box-shadow: 0 0 0 0.25rem var(--upaep-datepicker-input-focus-ring);
    }

    .upaep__datepicker-input {
        width: auto;
        height: 100%;
        border: none;
        outline: none;
        display: flex;
        align-items: center;
        padding: 0 0.25rem;
        border-radius: 4px;
    }

    .upaep__datepicker-input-label {
        color: var(--ui-text-muted, var(--upaep-color-grey, #6c757d));
        pointer-events: none;
        padding: 1px 3px;
        border-radius: 3px;
        outline: none;
        transition: background-color 0.15s, color 0.15s;

        /* Segmentos editables (v2): aceptan foco y clic */
        &.__editable {
            pointer-events: auto;
            cursor: text;
        }

        /* Segmento con valor escrito */
        &.__filled {
            color: var(--upaep-color-dark);
        }

        /* Segmento activo / en edición */
        &.is-active,
        &:focus {
            color: var(--upaep-datepicker-input-seg-active-color);
            background-color: var(--upaep-datepicker-input-seg-active-bg);
        }
    }

    .upaep__datepicker-input-label-sep {
        color: var(--ui-text-muted, var(--upaep-color-grey, #6c757d));
        pointer-events: none;
    }

    /* Separador entre los dos bloques de un rango (inicio → fin) */
    .upaep__datepicker-input-sep {
        flex: 0 0 auto;
        color: var(--ui-text-muted, var(--upaep-color-grey, #6c757d));
        pointer-events: none;
        padding: 0 0.25rem;
    }

    /* Múltiple: campo de sólo lectura (muestra la única fecha, no editable) */
    .upaep__datepicker-input.__readonly .upaep__datepicker-input-label {
        pointer-events: none;
        cursor: default;
    }

    /* Múltiple: conteo cuando hay más de una fecha ("N fechas seleccionadas") */
    .upaep__datepicker-input-count {
        color: var(--upaep-color-dark);
        font-weight: var(--upaep-fw-bold);
        padding: 0 0.25rem;
    }
}

/* ===== Resaltado por validación del input segmentado (v2) =====
   Sólo en contexto validado (.__validated / .was-validated), como un input nativo:
   inválido → rojo, válido → verde. El input real (.upaep__input) lleva el estado. */
.__validated .upaep__input-group:has(> .upaep__input:invalid) .upaep__datepicker-input-container,
.was-validated .upaep__input-group:has(> .upaep__input:invalid) .upaep__datepicker-input-container {
    --upaep-datepicker-input-border-color: var(--ui-danger, var(--upaep-color-error));
    --upaep-datepicker-input-hover-border-color: var(--ui-danger, var(--upaep-color-error));
    --upaep-datepicker-input-focus-ring: rgba(220, 53, 69, 0.25);
}

.__validated .upaep__input-group:has(> .upaep__input:valid) .upaep__datepicker-input-container,
.was-validated .upaep__input-group:has(> .upaep__input:valid) .upaep__datepicker-input-container {
    --upaep-datepicker-input-border-color: var(--ui-success, var(--upaep-color-success));
    --upaep-datepicker-input-hover-border-color: var(--ui-success, var(--upaep-color-success));
    --upaep-datepicker-input-focus-ring: rgba(40, 167, 69, 0.25);
}

/* ===== Modo visible (inline): validación nativa en el panel =====
   Cuando el datepicker inline está en un contexto validado, el panel refleja
   el estado del input real (required vacío → inválido; con valor → válido). */
.__validated .upaep__datepicker.is-visible:has(.upaep__input:invalid) .upaep__datepicker-content,
.was-validated .upaep__datepicker.is-visible:has(.upaep__input:invalid) .upaep__datepicker-content {
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
    border-color: var(--ui-danger, var(--upaep-color-error));
}

.__validated .upaep__datepicker.is-visible:has(.upaep__input:valid) .upaep__datepicker-content,
.was-validated .upaep__datepicker.is-visible:has(.upaep__input:valid) .upaep__datepicker-content {
    box-shadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.25);
    border-color: var(--ui-success, var(--upaep-color-success));
}

/*? ------ Alert ------ */
.upaep__alert {
    --upaep-alert-width: 100%;
    --upaep-alert-height: auto;
    --upaep-alert-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-alert-padding: 1rem;
    --upaep-alert-margin: 0 0 1rem 0;
    --upaep-alert-border-size: 1px;
    --upaep-alert-border-style: solid;
    --upaep-alert-border-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-alert-border-radius: 8px;
    --upaep-alert-fz: var(--upaep-fz16);
    --upaep-alert-fw: var(--upaep-fw-bold);
    --upaep-alert-color: inherit;
    width: var(--upaep-alert-width);
    height: var(--upaep-alert-height);
    padding: var(--upaep-alert-padding);
    margin: var(--upaep-alert-margin);
    background-color: var(--upaep-alert-bg);
    border: var(--upaep-alert-border-size) var(--upaep-alert-border-style) var(--upaep-alert-border-color);
    border-radius: var(--upaep-alert-border-radius);
    font-size: var(--upaep-alert-fz);
    font-weight: var(--upaep-alert-fw);
    color: var(--upaep-alert-color);
    position: relative;

    &.__dismissible {
        --upaep-alert-padding: 1rem 3rem 1rem 1rem;
    }

    .__close {
        position: absolute;
        inset: 0 0 auto auto;
        z-index: 2;
        padding: 1.25rem 1rem;
    }
}

.upaep__alert.__primary {
    --upaep-alert-bg: var(--ui-primary, var(--upaep-color-primary));
    --upaep-alert-border-color: var(--ui-primary-border, #af051f);
    --upaep-alert-color: var(--ui-on-primary, var(--upaep-color-white));
}

.upaep__alert.__secondary {
    --upaep-alert-bg: var(--ui-secondary, var(--upaep-color-secondary));
    --upaep-alert-border-color: var(--ui-secondary-border, #eeb104);
    --upaep-alert-color: var(--ui-on-secondary, var(--upaep-color-black));
}

.upaep__alert.__tertiary {
    --upaep-alert-bg: var(--ui-tertiary, var(--upaep-color-tertiary));
    --upaep-alert-border-color: var(--ui-tertiary-border, #adadad);
    --upaep-alert-color: var(--ui-on-tertiary, var(--upaep-color-black));
}

.upaep__alert.__blue {
    --upaep-alert-bg: var(--upaep-color-blue-primary);
    --upaep-alert-border-color: #234885;
    --upaep-alert-color: var(--upaep-color-white);
}

.upaep__alert.__grey {
    --upaep-alert-bg: var(--ui-neutral, var(--upaep-color-dark-grey));
    --upaep-alert-border-color: #4c4f52;
    --upaep-alert-color: var(--ui-on-neutral, var(--upaep-color-white));
}

.upaep__alert.__background {
    --upaep-alert-bg: var(--ui-surface-2, var(--upaep-color-background));
    --upaep-alert-border-color: var(--ui-surface-2-border, #dcdcdc);
    --upaep-alert-color: var(--ui-text-strong, var(--upaep-color-black));
}

.upaep__alert.__success {
    --upaep-alert-bg: var(--ui-success, var(--upaep-color-success));
    --upaep-alert-border-color: var(--ui-success-border, #1f7634);
    --upaep-alert-color: var(--ui-on-success, var(--upaep-color-white));

    &.__light {
        --upaep-alert-bg: var(--ui-success-subtle, var(--upaep-color-dissabled-success));
        --upaep-alert-color: var(--ui-on-success-subtle, #39804a);
    }
}

.upaep__alert.__error {
    --upaep-alert-bg: var(--ui-danger, var(--upaep-color-error));
    --upaep-alert-border-color: var(--ui-danger-border, #b7192c);
    --upaep-alert-color: var(--ui-on-danger, var(--upaep-color-white));

    &.__light {
        --upaep-alert-bg: var(--ui-danger-subtle, var(--upaep-color-dissabled-error));
        --upaep-alert-color: var(--ui-on-danger-subtle, #bb4752);
    }
}

.upaep__alert.__warning {
    --upaep-alert-bg: var(--ui-warning, var(--upaep-color-warning));
    --upaep-alert-border-color: var(--ui-warning-border, #e29400);
    --upaep-alert-color: var(--ui-on-warning, var(--upaep-color-black));

    &.__light {
        --upaep-alert-bg: var(--ui-warning-subtle, var(--upaep-color-dissabled-warning));
        --upaep-alert-color: var(--ui-on-warning-subtle, #ce6d11);
    }
}

.upaep__alert.__info {
    --upaep-alert-bg: var(--ui-info, var(--upaep-color-blue-sky));
    --upaep-alert-border-color: var(--ui-info-border, #2950cc);
    --upaep-alert-color: var(--ui-on-info, var(--upaep-color-white));

    &.__light {
        --upaep-alert-bg: var(--ui-info-subtle, #c3dafa);
        --upaep-alert-color: var(--ui-on-info-subtle, #2950cc);
    }
}

/*? ------ Alert / Notification · las dos FORMAS de Trinity ------ */
/*? Portado de `trinity-dashboard-base/trinity-views.css`, donde la piel se
   escribió primero para `.upaep__trinity-alert` con la nota de que si el core la
   adoptaba, esa sección se borraba y nada cambiaba. Esto es esa adopción: mismos
   nombres de modificador (`__tinted`, `__clean`), misma idea y mismas mezclas,
   con los tokens del core en lugar de los de la capa de vistas.

   ── VERSIÓN Y FORMA SON EJES DISTINTOS ────────────────────────────────────────
   Lo que el core ya tenía son dos VERSIONES —cuánto se tiñe el relleno—:
     · base      relleno SÓLIDO del color   (`--ui-success` + `--ui-on-success`)
     · `__light` relleno TENUE del color     (`--ui-success-subtle` + su pareja)
   Encima de la versión van estas dos FORMAS, que es lo que reparte el color por
   la caja. Las dos llevan la BARRA lateral del tono —identifica el aviso de un
   vistazo, sin leer el icono— y se diferencian en cuánto más tiñen:
     · `__tinted` relleno tenue CALCULADO del tono + texto en la tinta derivada:
                  el color inunda el aviso. Para el aviso que pertenece a la vista.
     · `__clean`  relleno de SUPERFICIE + chip SÓLIDO: fuera de la barra el color
                  vive SOLO en el icono y el texto es el de la página. Es la forma
                  que se lee como notificación.

   Las formas MANDAN sobre la versión: por eso cada una se declara también con
   `.__light` en el selector —`.upaep__alert.__success.__light` del core puntúa
   (0,3,0) y una forma escrita solo como `.upaep__alert.__tinted` puntuaría
   (0,2,0) y perdería—. Combinar `__light` con una forma es redundante, pero se
   escribe en cuanto alguien refina un aviso que ya era tenue, así que tiene que
   dar el resultado de la forma y no una mezcla de las dos.

   ── POR QUÉ EL RELLENO SE CALCULA Y NO SALE DE `-subtle` ───────────────────────
   La pareja `--ui-*-subtle` / `--ui-on-*-subtle` del core solo existe para los
   cuatro estados, y en `warning` da 2.9:1 —por debajo de AA—. Mezclar contra la
   superficie sirve para los CINCO tipos (incluido `__question`, que no tiene
   pareja) y funciona igual en claro y en oscuro sin una sola regla de modo: en
   claro el texto fuerte es casi negro y la mezcla oscurece; en oscuro es casi
   blanco y aclara.

   Es ADITIVO: sin `__tinted` ni `__clean` en la lista de clases, ninguna regla de
   esta sección aplica y el aviso o el toast se pintan exactamente como antes. */

/*? ---- Tokens de forma. Sin tipo, el tono es neutro. ---- */
.upaep__alert {
    /*? el color puro: barra y chip sólido */
    --upaep-alert-hue: var(--ui-text-muted, var(--upaep-color-grey));
    /*? el glifo que va ENCIMA del chip sólido */
    --upaep-alert-on-hue: var(--ui-surface, var(--upaep-color-white));
    /*? la tinta legible sobre relleno tenue. Se deriva en `__tinted`; aquí queda
       el valor neutro, y se puede fijar a mano para un caso concreto. */
    --upaep-alert-ink: var(--ui-text, var(--upaep-color-blue-primary));
    /*? grosor de la barra lateral; 0 la quita */
    --upaep-alert-rail: 4px;
    /*? el relleno izquierdo que la barra tiene que compensar. Si una capa cambia
       `--upaep-alert-padding`, cambia también este para que el texto no baile. */
    --upaep-alert-rail-inset: 1rem;
    --upaep-alert-icon-size: 1.75rem;
}

/*? ---- Cada tipo aporta DOS tokens y nada más ---- */
.upaep__alert.__success {
    --upaep-alert-hue: var(--ui-success, var(--upaep-color-success));
    --upaep-alert-on-hue: var(--ui-on-success, var(--upaep-color-white));
    --upaep-alert-icon-content: '\f00c';
}

.upaep__alert.__error {
    --upaep-alert-hue: var(--ui-danger, var(--upaep-color-error));
    --upaep-alert-on-hue: var(--ui-on-danger, var(--upaep-color-white));
    --upaep-alert-icon-content: '\f00d';
}

.upaep__alert.__warning {
    --upaep-alert-hue: var(--ui-warning, var(--upaep-color-warning));
    /*? NEGRO a propósito: un glifo blanco sobre ámbar no se lee */
    --upaep-alert-on-hue: var(--ui-on-warning, var(--upaep-color-black));
    --upaep-alert-icon-content: '\f12a';
}

.upaep__alert.__info {
    --upaep-alert-hue: var(--ui-info, var(--upaep-color-blue-sky));
    --upaep-alert-on-hue: var(--ui-on-info, var(--upaep-color-white));
    --upaep-alert-icon-content: '\f129';
}

/*? El quinto tipo de Trinity, que el aviso del core no tenía —el toast sí—. Se
   pinta en gris porque una pregunta no es un estado: no debe competir con los
   cuatro que sí informan. */
.upaep__alert.__question {
    --upaep-alert-hue: var(--ui-text-muted, var(--upaep-color-grey));
    --upaep-alert-on-hue: var(--ui-surface, var(--upaep-color-white));
    --upaep-alert-icon-content: '\f128';
}

/*? Los tipos de identidad del core también reciben tono, para que las formas no
   se vean a medias sobre ellos. No añaden semántica: es el mismo color que ya
   usa su versión sólida. */
.upaep__alert.__primary {
    --upaep-alert-hue: var(--ui-primary, var(--upaep-color-primary));
    --upaep-alert-on-hue: var(--ui-on-primary, var(--upaep-color-white));
}

.upaep__alert.__secondary {
    --upaep-alert-hue: var(--ui-secondary, var(--upaep-color-secondary));
    --upaep-alert-on-hue: var(--ui-on-secondary, var(--upaep-color-black));
}

.upaep__alert.__tertiary {
    --upaep-alert-hue: var(--ui-tertiary, var(--upaep-color-tertiary));
    --upaep-alert-on-hue: var(--ui-on-tertiary, var(--upaep-color-black));
}

.upaep__alert.__grey {
    --upaep-alert-hue: var(--ui-neutral, var(--upaep-color-dark-grey));
    --upaep-alert-on-hue: var(--ui-on-neutral, var(--upaep-color-white));
}

/*? ---- Chip de icono OPCIONAL ----
   El aviso del core es una caja con texto, no una rejilla, y esta sección no lo
   convierte en otra cosa: la fila solo aparece si el marcado TRAE un
   `.upaep__alert-icon`. Un aviso sin icono no cambia de caja ni de relleno. */
.upaep__alert:has(> .upaep__alert-icon) {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
}

.upaep__alert-icon {
    display: grid;
    place-items: center;
    width: var(--upaep-alert-icon-size);
    height: var(--upaep-alert-icon-size);
    /*? un icono NUNCA se encoge: con texto largo al lado, cedería */
    flex: 0 0 auto;
    border-radius: 50%;
    /*? sin forma, el chip sale de `currentColor`, así que la misma regla sirve
       para la versión sólida y para la tenue */
    background: color-mix(in srgb, currentColor 18%, transparent);
}

.upaep__alert-icon>svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/*? El glifo del TIPO, el mismo que pinta el toast (misma fuente de iconos, mismo
   código y peso, `--upaep-alert-icon-content` por tipo): así un aviso y un
   toast del mismo tipo se ven iguales. Solo cuando el chip viene SIN hijos
   —`<span class="upaep__alert-icon"></span>`—; si trae su propio SVG, manda
   el SVG, y el marcado que ya existe con un icono propio no cambia. `:has()` y
   no `:empty`: un salto de línea dentro del span no debe apagar el glifo. */
.upaep__alert-icon:not(:has(> *))::before {
    content: var(--upaep-alert-icon-content, none);
    font-family: var(--upaep-ff-fontawesome);
    font-size: var(--upaep-alert-icon-fz, var(--upaep-fz14));
    font-weight: var(--upaep-fw-regular);
    line-height: 1;
}

/*? ---- LA BARRA LATERAL, rasgo de las dos formas ----
   Es un `border-left`, no un `::before`: respeta el radio de la caja sin un
   segundo radio que mantener y no se cuela por encima del texto. */
.upaep__alert.__light:is(.__tinted, .__clean),
.upaep__alert:is(.__tinted, .__clean) {
    border-left: var(--upaep-alert-rail) solid var(--upaep-alert-hue);
    /*? el filo izquierdo ya no es hairline: se compensa el relleno para que el
       texto no se desplace respecto a un aviso sin barra */
    padding-left: calc(var(--upaep-alert-rail-inset) - var(--upaep-alert-rail) + var(--upaep-alert-border-size));
}

/*? ---- FORMA 1 · teñida ---- */
.upaep__alert.__light.__tinted,
.upaep__alert.__tinted {
    /*? La tinta, DERIVADA del tono: 40 % de color sobre el texto fuerte. Se ve
       teñida —es lo que hace que el aviso se lea «de un color»— y pasa AA sobre
       el relleno del 14 % en los dos modos. Medido en claro: warning 5.6:1 y
       success 7.5:1, cuando con la pareja `on-*-subtle` eran 2.9:1 y 4.4:1. */
    --upaep-alert-ink: color-mix(in srgb, var(--upaep-alert-hue) 40%, var(--ui-text-strong, var(--upaep-color-black)));
    --upaep-alert-bg: color-mix(in srgb, var(--upaep-alert-hue) 14%, var(--ui-surface, var(--upaep-color-white)));
    --upaep-alert-color: var(--upaep-alert-ink);
    --upaep-alert-border-color: color-mix(in srgb, var(--upaep-alert-hue) 26%, transparent);

    & .upaep__alert-icon {
        color: var(--upaep-alert-ink);
        background: color-mix(in srgb, var(--upaep-alert-hue) 30%, transparent);
    }
}

/*? ---- FORMA 2 · limpia ----
   Superficie, hairline, y —fuera de la barra— el color SOLO en el icono, que
   pasa a chip sólido. El texto es el de la página porque aquí el color no
   informa desde el fondo, lo hace desde el icono. */
.upaep__alert.__light.__clean,
.upaep__alert.__clean {
    --upaep-alert-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-alert-color: var(--ui-text, var(--upaep-color-blue-primary));
    --upaep-alert-border-color: var(--ui-divider, var(--upaep-color-border-grey));

    & .upaep__alert-icon {
        color: var(--upaep-alert-on-hue);
        background: var(--upaep-alert-hue);
    }

    /*? El cierre no lleva el color del tipo: en esta forma el texto es neutro y
       un aspa de color sería el único elemento gritando. */
    & .__close {
        color: var(--ui-text-muted, var(--upaep-color-grey));
    }

    /*? Sombra solo cuando el aviso FLOTA. Es la del design system —la misma que
       usa el toast—, no una propia: un aviso flotante y un toast se levantan
       igual. */
    &.__floating {
        --upaep-alert-border-color: transparent;
        box-shadow: var(--ui-shadow, var(--upaep-box-shadow));
    }
}

/*? ---- FORMA 3 · suave ----
   Relleno tenue del tono, borde COMPLETO del mismo tono —sin barra lateral— y el
   icono con su ANILLO, igual que en el toast `__soft`: glifo y aro en la tinta,
   sin chip relleno. Es la forma «de notificación moderna»: el color está en toda
   la caja pero sin gritar. La tinta es la misma derivada de `__tinted` (40 % de tono
   sobre el texto fuerte), que pasa AA sobre un relleno incluso más claro que el
   suyo. Va aparte de las otras dos —no las modifica— porque `__tinted` ya está en
   uso y cambiarla movería pantallas que existen. */
.upaep__alert.__light.__soft,
.upaep__alert.__soft {
    --upaep-alert-ink: color-mix(in srgb, var(--upaep-alert-hue) 40%, var(--ui-text-strong, var(--upaep-color-black)));
    --upaep-alert-bg: color-mix(in srgb, var(--upaep-alert-hue) 10%, var(--ui-surface, var(--upaep-color-white)));
    --upaep-alert-color: var(--upaep-alert-ink);
    --upaep-alert-border-color: color-mix(in srgb, var(--upaep-alert-hue) 35%, transparent);

    /*? El mismo icono que el toast: el aro es el del icono de tipo del toast (2px
       de `currentColor` al 45 %), dibujado con una sombra interior para no sumar
       borde a la caja de 1.75rem. Va en la TINTA: el tono puro no se lee sobre su
       propio relleno tenue (warning 1.55:1). */
    & .upaep__alert-icon {
        color: var(--upaep-alert-ink);
        background: transparent;
        box-shadow: inset 0 0 0 2px color-mix(in srgb, currentColor 45%, transparent);
    }

    & .__close {
        color: var(--upaep-alert-ink);
    }
}

/*? ------ Notification / Toast · las mismas dos formas ------ */
/*? El toast ya trae su propia caja, así que aquí NO se le repinta: la piel se
   pide REMAPEANDO SUS TOKENS. Pisarle el fondo directamente fue el error que
   costó depuración en Trinity —`.__success` pinta verde con texto blanco, y al
   devolver el fondo blanco el texto desaparecía: un toast en blanco, literal—.

   Esta sección va DESPUÉS de las variantes de tipo del toast a propósito: las
   formas y los tipos puntúan igual (0,2,0), así que el orden es lo que decide, y
   la forma tiene que poder remapear lo que el tipo acaba de fijar. */
.upaep__notification,
.upaep__toast {
    --upaep-alert-hue: var(--ui-text-muted, var(--upaep-color-grey));
    --upaep-alert-on-hue: var(--ui-surface, var(--upaep-color-white));
    --upaep-alert-ink: var(--ui-text, var(--upaep-color-blue-primary));
    --upaep-alert-rail: 4px;
}

.upaep__notification.__success,
.upaep__toast.__success {
    --upaep-alert-hue: var(--ui-success, var(--upaep-color-success));
    --upaep-alert-on-hue: var(--ui-on-success, var(--upaep-color-white));
}

.upaep__notification.__error,
.upaep__toast.__error {
    --upaep-alert-hue: var(--ui-danger, var(--upaep-color-error));
    --upaep-alert-on-hue: var(--ui-on-danger, var(--upaep-color-white));
}

.upaep__notification.__warning,
.upaep__toast.__warning {
    --upaep-alert-hue: var(--ui-warning, var(--upaep-color-warning));
    --upaep-alert-on-hue: var(--ui-on-warning, var(--upaep-color-black));
}

.upaep__notification.__info,
.upaep__toast.__info {
    --upaep-alert-hue: var(--ui-info, var(--upaep-color-blue-sky));
    --upaep-alert-on-hue: var(--ui-on-info, var(--upaep-color-white));
}

.upaep__notification.__question,
.upaep__toast.__question {
    --upaep-alert-hue: var(--ui-text-muted, var(--upaep-color-grey));
    --upaep-alert-on-hue: var(--ui-surface, var(--upaep-color-white));
}

/*? La BARRA lateral. El relleno del toast es 0 —padean sus hijos—, así que aquí
   no hay nada que compensar. */
.upaep__notification.__light:is(.__tinted, .__clean),
.upaep__toast.__light:is(.__tinted, .__clean),
.upaep__notification:is(.__tinted, .__clean),
.upaep__toast:is(.__tinted, .__clean) {
    border-left: var(--upaep-alert-rail) solid var(--upaep-alert-hue);
}

/*? ---- FORMA 1 · teñida. TODO el texto va en la tinta derivada ---- */
.upaep__notification.__light.__tinted,
.upaep__toast.__light.__tinted,
.upaep__notification.__tinted,
.upaep__toast.__tinted {
    --upaep-alert-ink: color-mix(in srgb, var(--upaep-alert-hue) 40%, var(--ui-text-strong, var(--upaep-color-black)));
    --upaep-notification-bg: color-mix(in srgb, var(--upaep-alert-hue) 14%, var(--ui-surface, var(--upaep-color-white)));
    --upaep-notification-border-color: color-mix(in srgb, var(--upaep-alert-hue) 26%, transparent);
    --upaep-notification-header-border-bottom-color: transparent;
    --upaep-notification-header-title-color: var(--upaep-alert-ink);
    --upaep-notification-content-text-color: var(--upaep-alert-ink);
    --upaep-notification-content-text-fw: var(--upaep-fw-regular);
    --upaep-notification-content-icon-color: var(--upaep-alert-ink);
    --upaep-notification-close-color: var(--upaep-alert-ink);
    --upaep-notification-close-hover-color: var(--upaep-alert-ink);
}

/*? El anillo del icono pasa a chip TEÑIDO (el sólido es de `__clean`). Hace
   falta el selector largo porque la regla del anillo en el bloque base ya puntúa
   (0,4,1). */
.upaep__notification.__tinted .upaep__notification-content .upaep__notification-icons .upaep__notification-icon::before,
.upaep__toast.__tinted .upaep__toast-content .upaep__toast-icons .upaep__toast-icon::before {
    border-color: transparent;
    background: color-mix(in srgb, var(--upaep-alert-hue) 30%, transparent);
    color: var(--upaep-alert-ink);
}

/*? ---- FORMA 2 · limpia. Título fuerte, texto tenue, color solo en el icono ---- */
.upaep__notification.__light.__clean,
.upaep__toast.__light.__clean,
.upaep__notification.__clean,
.upaep__toast.__clean {
    --upaep-notification-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-notification-border-color: var(--ui-divider, var(--upaep-color-border-grey));
    --upaep-notification-header-border-bottom-color: transparent;
    --upaep-notification-header-title-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-notification-content-text-color: var(--ui-text-muted, var(--upaep-color-grey));
    --upaep-notification-content-text-fw: var(--upaep-fw-regular);
    --upaep-notification-content-icon-color: var(--upaep-alert-on-hue);
    --upaep-notification-close-color: var(--ui-text-muted, var(--upaep-color-grey));
    --upaep-notification-close-hover-color: var(--ui-text-strong, var(--upaep-color-black));
}

.upaep__notification.__clean .upaep__notification-content .upaep__notification-icons .upaep__notification-icon::before,
.upaep__toast.__clean .upaep__toast-content .upaep__toast-icons .upaep__toast-icon::before {
    border-color: transparent;
    background: var(--upaep-alert-hue);
    color: var(--upaep-alert-on-hue);
}


/*? ---- FORMA 3 · suave (ver la del aviso) ----
   Relleno tenue, borde completo del tono y el texto en la tinta derivada, en
   seminegrita: un toast es una línea que se lee de pasada. El ICONO es el mismo
   de los demás toasts —glifo con su anillo—, pintado en la tinta: el tono puro
   no se leería sobre su propio relleno tenue (el ámbar de warning sobre amarillo
   claro no llega a 3:1); la tinta sí, en los cinco tipos. */
.upaep__notification.__light.__soft,
.upaep__toast.__light.__soft,
.upaep__notification.__soft,
.upaep__toast.__soft {
    --upaep-alert-ink: color-mix(in srgb, var(--upaep-alert-hue) 40%, var(--ui-text-strong, var(--upaep-color-black)));
    --upaep-notification-bg: color-mix(in srgb, var(--upaep-alert-hue) 10%, var(--ui-surface, var(--upaep-color-white)));
    --upaep-notification-border-color: color-mix(in srgb, var(--upaep-alert-hue) 35%, transparent);
    --upaep-notification-header-border-bottom-color: transparent;
    --upaep-notification-header-title-color: var(--upaep-alert-ink);
    --upaep-notification-content-text-color: var(--upaep-alert-ink);
    --upaep-notification-content-text-fw: var(--upaep-fw-semibold);
    --upaep-notification-content-icon-color: var(--upaep-alert-ink);
    --upaep-notification-close-color: var(--upaep-alert-ink);
    --upaep-notification-close-hover-color: var(--upaep-alert-ink);
}

/*? ------ Barra de progreso del autocierre (`progress: true`) ------ */
/*? El JS la agrega solo si se pide y escribe la duración (la misma que `delay`).
   Es VISUAL: el cierre lo manda el temporizador de JS, que se pausa al apuntar o
   enfocar el toast; `is-paused` congela aquí la barra en el mismo instante.

   Color: en las formas suaves (`__tinted`, `__clean`, `__soft`) es el TONO del
   tipo. En la versión sólida el fondo ya es ese tono y la barra desaparecería, así
   que por defecto toma el color del texto —el blanco de un toast de error—. */
.upaep__notification,
.upaep__toast {
    --upaep-notification-progress-height: 3px;
    --upaep-notification-progress-color: var(--upaep-notification-content-text-color, currentColor);
    --upaep-notification-progress-track: color-mix(in srgb, var(--upaep-notification-progress-color) 18%, transparent);
}

.upaep__notification:is(.__tinted, .__clean, .__soft),
.upaep__toast:is(.__tinted, .__clean, .__soft) {
    --upaep-notification-progress-color: var(--upaep-alert-hue);
}

/*? recorta la barra al radio de la caja; solo cuando hay barra */
.upaep__notification:has(> .upaep__notification-progress),
.upaep__toast:has(> .upaep__notification-progress) {
    overflow: hidden;
}

.upaep__notification-progress {
    position: absolute;
    inset: auto 0 0 0;
    height: var(--upaep-notification-progress-height);
    background: var(--upaep-notification-progress-track);
    pointer-events: none;

    &::before {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--upaep-notification-progress-color);
        transform-origin: left center;
        animation: upaepNotificationProgress var(--upaep-notification-progress-duration, 5s) linear forwards;
    }
}

.is-paused > .upaep__notification-progress::before {
    animation-play-state: paused;
}

@keyframes upaepNotificationProgress {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

/*? Sin movimiento, la barra se queda llena: el tiempo sigue corriendo (y se
   sigue pausando), solo que no se anima. */
@media (prefers-reduced-motion: reduce) {
    .upaep__notification-progress::before {
        animation: none;
    }
}

/*? ------ sortableElements ------ */
/*? clon flotante OPCIONAL (API/fase 2): viaja en <body>, fuera del scope del componente */
.upaep__sortable-drag {
    position: fixed;
    z-index: 1400;
    margin: 0;
    pointer-events: none;
    box-shadow: var(--upaep-sortable-drag-shadow, 0 10px 24px rgba(33, 37, 41, .2));
    opacity: .92;
}

/*? durante cualquier arrastre: cursor global y sin selección de texto */
body.upaep__sortable-grabbing,
body.upaep__sortable-grabbing * {
    cursor: grabbing !important;
    user-select: none !important;
}

.upaep__sortable {
    --upaep-sortable-width: 100%;
    --upaep-sortable-height: auto;
    --upaep-sortable-margin: 0;
    --upaep-sortable-padding: 0;
    --upaep-sortable-bg: ;
    --upaep-sortable-wrapper-width: 100%;
    --upaep-sortable-wrapper-height: 100%;
    --upaep-sortable-wrapper-margin: .5rem 0;
    --upaep-sortable-wrapper-padding: .5rem;
    --upaep-sortable-wrapper-bg: ;
    --upaep-sortable-item-width: 100%;
    --upaep-sortable-item-height: auto;
    --upaep-sortable-item-margin: 0;
    --upaep-sortable-item-padding: .75rem 1rem;
    --upaep-sortable-item-bg: ;
    --upaep-sortable-item-fz: var(--upaep-fz18);
    --upaep-sortable-item-fw: var(--upaep-fw-medium);
    --upaep-sortable-item-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-sortable-item-hover-bg: var(--ui-surface-hover, #dee2e6);
    --upaep-sortable-item-hover-fz: var(--upaep-fz18);
    --upaep-sortable-item-hover-fw: var(--upaep-fw-medium);
    --upaep-sortable-item-hover-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-sortable-counter-width: auto;
    --upaep-sortable-counter-height: auto;
    --upaep-sortable-counter-padding: .35rem .5rem;
    --upaep-sortable-counter-bg: var(--ui-counter, var(--upaep-color-blue-primary));
    --upaep-sortable-counter-color: var(--ui-on-counter, var(--upaep-color-white));
    --upaep-sortable-counter-fw: var(--upaep-fw-semibold);
    --upaep-sortable-counter-fz: var(--upaep-fz12);
    --upaep-sortable-counter-border-radius: 50px;
    --upaep-sortable-icon-width: 30px;
    --upaep-sortable-icon-height: 100%;
    --upaep-sortable-icon-padding: .35rem .5rem;
    --upaep-sortable-icon-bg: ;
    --upaep-sortable-icon-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-sortable-icon-fw: var(--upaep-fw-bold);
    --upaep-sortable-icon-fz: var(--upaep-fz20);
    --upaep-sortable-icon-border-radius: ;
    --upaep-sortable-anim-ms: 180ms;
    --upaep-sortable-ghost-bg: var(--ui-surface-hover, #dee2e6);
    --upaep-sortable-ghost-border: var(--ui-primary, var(--upaep-color-blue-primary));
    --upaep-sortable-chosen-bg: var(--ui-surface-hover, #dee2e6);
    --upaep-sortable-drag-shadow: 0 10px 24px rgba(33, 37, 41, .2);
    /*? FASE 2: lista destino resaltada (grupos) y rejilla 2D */
    --upaep-sortable-droptarget-outline: var(--ui-primary, var(--upaep-color-blue-primary));
    --upaep-sortable-droptarget-bg: var(--ui-primary-subtle, #e7f0ff);
    --upaep-sortable-disabled-opacity: .6;
    /*? 140px se quedó corto al añadir los botones de orden: solo el mobiliario del ítem
       (contador 21 + tirador 30 + flechas 58 + separaciones 30) ya pide ~139px, así que
       no sobraba nada para el texto y el contenido se encimaba. Medido: un ítem necesita
       205px. 200px deja sitio real al texto sin reducir de más el número de columnas. */
    --upaep-sortable-grid-cols: repeat(auto-fill, minmax(200px, 1fr));
    --upaep-sortable-grid-gap: .5rem;
    /*? FASE 3: árbol (`options.nested`) y zona de drop de listas vacías */
    --upaep-sortable-nested-indent: 1.5rem;
    --upaep-sortable-nested-margin: .35rem 0 0;
    --upaep-sortable-nested-padding: .25rem;
    --upaep-sortable-nested-bg: transparent;
    --upaep-sortable-nested-shadow: none;
    --upaep-sortable-empty-min-height: 32px;
    --upaep-sortable-empty-border: 1px dashed var(--ui-border, var(--upaep-color-border-grey));
    --upaep-sortable-empty-radius: 6px;
    --upaep-sortable-nest-target-outline: var(--ui-primary, var(--upaep-color-blue-primary));
    width: var(--upaep-sortable-width);
    height: var(--upaep-sortable-height);
    margin: var(--upaep-sortable-margin);
    padding: var(--upaep-sortable-padding);
    background: var(--upaep-sortable-bg);

    .upaep__sortable-wrapper {
        width: var(--upaep-sortable-wrapper-width);
        height: var(--upaep-sortable-wrapper-height);
        margin: var(--upaep-sortable-wrapper-margin);
        padding: var(--upaep-sortable-wrapper-padding);
        background: var(--upaep-sortable-wrapper-bg);
        list-style: none;
        box-shadow: var(--ui-shadow, var(--upaep-box-shadow));
    }

    &.__grab {
        .upaep__sortable-item {
            cursor: grab;
        }
    }

    /*? FASE 2: instance deshabilitado por completo (option `disabled`) */
    &.is-disabled {
        opacity: var(--upaep-sortable-disabled-opacity, .6);
        cursor: not-allowed;

        .upaep__sortable-icon,
        .upaep__sortable-item {
            cursor: not-allowed;
        }
    }

    /*? FASE 2: lista destino resaltada al recibir un item de otra lista (grupos) */
    &.is-drop-target .upaep__sortable-wrapper {
        outline: 2px dashed var(--upaep-sortable-droptarget-outline, var(--ui-primary, var(--upaep-color-blue-primary)));
        outline-offset: -3px;
        background: var(--upaep-sortable-droptarget-bg, var(--ui-primary-subtle, #e7f0ff));
    }

    /*? FASE 2: modo rejilla 2D — los items fluyen en columnas y se pueden medir para el FLIP en X/Y */
    &.is-grid .upaep__sortable-wrapper {
        display: grid;
        grid-template-columns: var(--upaep-sortable-grid-cols, repeat(auto-fill, minmax(200px, 1fr)));
        gap: var(--upaep-sortable-grid-gap, .5rem);
        align-items: start;
    }

    &.is-grid .upaep__sortable-item {
        width: auto;
    }

    /*? FASE 3: sublistas del árbol (`options.nested`). Solo las marcadas con `data-nested`,
       que son las que gestiona esta misma instancia; un `.upaep__sortable` anidado (otra
       instancia) conserva su aspecto de lista normal. */
    .upaep__sortable-wrapper[data-nested] {
        width: auto;
        height: auto;
        margin: var(--upaep-sortable-nested-margin);
        margin-inline-start: var(--upaep-sortable-nested-indent);
        padding: var(--upaep-sortable-nested-padding);
        background: var(--upaep-sortable-nested-bg);
        box-shadow: var(--upaep-sortable-nested-shadow);
    }

    /*? zona de drop de una lista vacía: sin esto no habría dónde soltar */
    .upaep__sortable-wrapper:empty {
        min-height: var(--upaep-sortable-empty-min-height);
        border: var(--upaep-sortable-empty-border);
        border-radius: var(--upaep-sortable-empty-radius);
    }

    /*? un ítem con rama deja de centrar su grip/contador: se alinean con su propio título */
    .upaep__sortable-item:has(.upaep__sortable-wrapper[data-nested]) {
        align-items: flex-start;
    }

    /*? ítem que va a recibir al arrastrado como hijo (árbol) */
    .upaep__sortable-item.is-nest-target {
        outline: 2px solid var(--upaep-sortable-nest-target-outline);
        outline-offset: -2px;
    }

    .upaep__sortable-item {
        width: var(--upaep-sortable-item-width);
        height: var(--upaep-sortable-item-height);
        margin: var(--upaep-sortable-item-margin);
        padding: var(--upaep-sortable-item-padding);
        background: var(--upaep-sortable-item-bg);
        font-size: var(--upaep-sortable-item-fz);
        font-weight: var(--upaep-sortable-item-fw);
        color: var(--upaep-sortable-item-color);
        display: flex;
        align-items: center;
        gap: 10px;

        /*? `:not(:has(… :hover))` = solo se realza el ítem MÁS INTERNO bajo el cursor.
           En un árbol el `:hover` alcanza también a todos los ancestros, así que pasar
           por encima de un hijo encendía de golpe a él y a toda su cadena de padres:
           parecía que el realce no correspondía a nada concreto. */
        &:hover:not(:has(.upaep__sortable-item:hover)) {
            background: var(--upaep-sortable-item-hover-bg);
            font-size: var(--upaep-sortable-item-hover-fz);
            font-weight: var(--upaep-sortable-item-hover-fw);
            color: var(--upaep-sortable-item-hover-color);
        }

        /*? item elegido al iniciar el arrastre (realce) */
        &.is-chosen {
            background: var(--upaep-sortable-chosen-bg, var(--ui-surface-hover, #dee2e6));
        }

        /*? placeholder/hueco: el nodo real que se mueve en vivo (estilo Sortable ghost) */
        &.is-ghost {
            opacity: .5;
            background: var(--upaep-sortable-ghost-bg, var(--ui-surface-hover, #dee2e6));
            outline: 1px dashed var(--upaep-sortable-ghost-border, var(--ui-primary, var(--upaep-color-blue-primary)));
            outline-offset: -2px;
        }

        /*? arrastre activo: sin gestos táctiles nativos (el drag usa pointer events) */
        &.is-dragging,
        &.is-ghost {
            touch-action: none;
        }

        /*? item no arrastrable (disabledFilter) */
        &.is-disabled {
            opacity: .5;
            pointer-events: none;
            cursor: not-allowed;
        }
    }

    .upaep__sortable-counter {
        width: var(--upaep-sortable-counter-width);
        height: var(--upaep-sortable-counter-height);
        padding: var(--upaep-sortable-counter-padding);
        background: var(--upaep-sortable-counter-bg);
        color: var(--upaep-sortable-counter-color);
        font-weight: var(--upaep-sortable-counter-fw);
        font-size: var(--upaep-sortable-counter-fz);
        border-radius: var(--upaep-sortable-counter-border-radius);
        display: flex;
        justify-content: center;
        align-items: center;
        line-height: 1;
    }

    .upaep__sortable-icon {
        width: var(--upaep-sortable-icon-width);
        height: var(--upaep-sortable-icon-height);
        padding: var(--upaep-sortable-icon-padding);
        background: var(--upaep-sortable-icon-bg);
        color: var(--upaep-sortable-icon-color);
        font-weight: var(--upaep-sortable-icon-fw);
        font-size: var(--upaep-sortable-icon-fz);
        border-radius: var(--upaep-sortable-icon-border-radius);
        display: flex;
        justify-content: center;
        align-items: center;
        line-height: 1;
        cursor: grab;
        touch-action: none;

        svg {
            width: 16px;
            height: 16px;
        }
    }

    .upaep__sortable-inner {
        width: 100%;
        height: 100%;
        /*? El contenido es la parte que cede cuando el ítem se estrecha. Sin este
           `min-width: 0` un hijo flex no baja de su ancho mínimo, así que en una
           rejilla apretada el texto empujaba al contador y a las flechas y todo se
           encimaba. Ahora se recorta el texto y los controles se quedan en su sitio. */
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/*? ------ numberpicker ------ */
.upaep__numberpicker {
    --upaep-numberpicker-width: auto;
    --upaep-numberpicker-height: auto;
    --upaep-numberpicker-padding: 0 1rem;
    --upaep-numberpicker-margin: 0;
    --upaep-numberpicker-border-size: 1px;
    --upaep-numberpicker-border-style: solid;
    --upaep-numberpicker-border-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-numberpicker-border-radius: 8px;
    --upaep-numberpicker-bg: transparent;
    /*? El contenedor NO cambia de fondo en hover: el feedback vive en los controles.
       Para recuperarlo basta redefinir este token con un color. */
    --upaep-numberpicker-hover-bg: var(--upaep-numberpicker-bg);
    --upaep-numberpicker-focus-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-numberpicker-disabled-bg: var(--ui-surface-3, var(--upaep-color-tenue-gray));
    --upaep-numberpicker-disabled-opacity: .5;
    --upaep-numberpicker-readonly-bg: var(--ui-surface-3, var(--upaep-color-tenue-gray));
    --upaep-numberpicker-readonly-opacity: 1;
    --upaep-numberpicker-min-width: 150px;
    --upaep-numberpicker-gap: 8px;
    --upaep-numberpicker-stacked-gap: 3px;
    --upaep-numberpicker-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    --upaep-numberpicker-controls-size: 25px;
    --upaep-numberpicker-controls-height: var(--upaep-numberpicker-controls-size);
    --upaep-numberpicker-controls-padding: .25rem;
    --upaep-numberpicker-controls-margin: 0;
    --upaep-numberpicker-controls-border-radius: 8px;
    --upaep-numberpicker-controls-offset: 10px;
    --upaep-numberpicker-controls-icon-size: 16px;
    /*? Acabado plano: la jerarquía la da el fondo/hover, no una sombra 3D. */
    --upaep-numberpicker-controls-filter: none;
    --upaep-numberpicker-controls-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, color .15s ease-in-out, filter .15s ease-in-out, opacity .15s ease-in-out;
    --upaep-numberpicker-controls-disabled-opacity: .5;
    --upaep-numberpicker-controls-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-numberpicker-controls-bg: var(--ui-surface-2, var(--upaep-color-background));
    --upaep-numberpicker-controls-border-color: var(--ui-surface-2, var(--upaep-color-background));
    --upaep-numberpicker-controls-hover-bg: var(--ui-surface-3, var(--upaep-color-tenue-gray));
    --upaep-numberpicker-controls-hover-border-color: var(--ui-border, var(--upaep-color-border-grey));
    --upaep-numberpicker-controls-hover-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-numberpicker-delete-color: var(--upaep-numberpicker-controls-color);
    --upaep-numberpicker-delete-bg: var(--upaep-numberpicker-controls-bg);
    --upaep-numberpicker-delete-border-color: var(--upaep-numberpicker-controls-border-color);
    --upaep-numberpicker-delete-hover-bg: var(--upaep-numberpicker-controls-hover-bg);
    --upaep-numberpicker-delete-hover-color: var(--upaep-numberpicker-delete-color);
    --upaep-numberpicker-controls-increase-inset: 50% var(--upaep-numberpicker-controls-offset) auto auto;
    --upaep-numberpicker-controls-decrease-inset: 50% auto auto var(--upaep-numberpicker-controls-offset);
    --upaep-numberpicker-controls-delete-inset: 50% auto auto var(--upaep-numberpicker-controls-offset);
    --upaep-numberpicker-input-inset: 50% 50% auto auto;
    --upaep-numberpicker-input-width: calc(100% - var(--upaep-numberpicker-controls-size) * 2);
    --upaep-numberpicker-input-margin: 0 var(--upaep-numberpicker-controls-size);
    --upaep-numberpicker-input-fz: var(--upaep-fz16);
    --upaep-numberpicker-input-text-align: center;
    --upaep-numberpicker-focus-boxshadow: 0 0 0 0.25rem var(--ui-control-ring, rgba(82, 86, 90, 0.25));
    --upaep-numberpicker-valid-boxshadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.25);
    --upaep-numberpicker-invalid-boxshadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
    width: var(--upaep-numberpicker-width);
    height: var(--upaep-numberpicker-height);
    padding: var(--upaep-numberpicker-padding);
    margin: var(--upaep-numberpicker-margin);
    background: var(--upaep-numberpicker-bg);
    border: var(--upaep-numberpicker-border-size) var(--upaep-numberpicker-border-style) var(--upaep-numberpicker-border-color);
    border-radius: var(--upaep-numberpicker-border-radius);
    min-width: var(--upaep-numberpicker-min-width);
    position: relative;
    display: flex;
    align-items: center;
    transition: var(--upaep-numberpicker-transition);

    .upaep__numberpicker-increase,
    .upaep__numberpicker-decrease,
    .upaep__numberpicker-delete,
    .upaep__numberpicker-controls {
        width: var(--upaep-numberpicker-controls-size);
        height: var(--upaep-numberpicker-controls-height);
        border-radius: var(--upaep-numberpicker-controls-border-radius);
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        translate: 0 -50%;
        filter: var(--upaep-numberpicker-controls-filter);
        transition: var(--upaep-numberpicker-controls-transition);
        cursor: pointer;

        .upaep__btn {
            --upaep-btn-width: var(--upaep-numberpicker-controls-size);
            --upaep-btn-height: var(--upaep-numberpicker-controls-height);
            --upaep-btn-padding: var(--upaep-numberpicker-controls-padding);
            --upaep-btn-margin: var(--upaep-numberpicker-controls-margin);
            --upaep-btn-border-radius: var(--upaep-numberpicker-controls-border-radius);
            --upaep-btn-color: var(--upaep-numberpicker-controls-color);
            --upaep-btn-bg: var(--upaep-numberpicker-controls-bg);
            --upaep-btn-border-color: var(--upaep-numberpicker-controls-border-color);
            --upaep-btn-hover-bg: var(--upaep-numberpicker-controls-hover-bg);
            --upaep-btn-hover-border-color: var(--upaep-numberpicker-controls-hover-border-color);
            --upaep-btn-hover-color: var(--upaep-numberpicker-controls-hover-color);
            transition: var(--upaep-numberpicker-controls-transition);

            /*? Los iconos son SVG inline (currentColor). El alto manda y el ancho se
               deduce del viewBox, así que un icono no cuadrado no se deforma. */
            & svg {
                display: block;
                height: var(--upaep-numberpicker-controls-icon-size);
                width: auto;
                max-width: 100%;
                flex: 0 0 auto;
            }
        }

        &.is-disabled {
            opacity: var(--upaep-numberpicker-controls-disabled-opacity);
            pointer-events: none;
        }

        &.is-hide {
            display: none;
            pointer-events: none;
        }
    }

    /*? El borrar tiene sus propios tokens (por defecto iguales a los demás controles)
       para poder pintarlo distinto sin tocar increase/decrease: ver .__delete-danger. */
    .upaep__numberpicker-delete .upaep__btn {
        --upaep-btn-color: var(--upaep-numberpicker-delete-color);
        --upaep-btn-bg: var(--upaep-numberpicker-delete-bg);
        --upaep-btn-border-color: var(--upaep-numberpicker-delete-border-color);
        --upaep-btn-hover-bg: var(--upaep-numberpicker-delete-hover-bg);
        --upaep-btn-hover-border-color: var(--upaep-numberpicker-delete-hover-bg);
        --upaep-btn-hover-color: var(--upaep-numberpicker-delete-hover-color);
    }

    .upaep__numberpicker-increase {
        inset: var(--upaep-numberpicker-controls-increase-inset);
    }

    .upaep__numberpicker-decrease {
        inset: var(--upaep-numberpicker-controls-decrease-inset);
    }

    .upaep__numberpicker-delete {
        inset: var(--upaep-numberpicker-controls-delete-inset);
    }

    &:has(.upaep__numberpicker-delete):not(.is-at-zero) {
        --upaep-numberpicker-controls-decrease-inset: 50% auto auto calc((var(--upaep-numberpicker-controls-offset) * 2) + var(--upaep-numberpicker-controls-size));
        --upaep-numberpicker-input-width: calc(100% - var(--upaep-numberpicker-controls-size) * 3 - (var(--upaep-numberpicker-controls-offset) * 2));
        --upaep-numberpicker-input-margin: 0 var(--upaep-numberpicker-controls-size) auto calc((var(--upaep-numberpicker-controls-size) * 2) + var(--upaep-numberpicker-controls-offset));
    }

    &:has(.upaep__numberpicker-decrease.is-hide) {
        --upaep-numberpicker-input-width: calc(100% - var(--upaep-numberpicker-controls-size) * 2);
        --upaep-numberpicker-input-margin: 0 var(--upaep-numberpicker-controls-size);
    }

    &:has(.upaep__numberpicker-delete.is-hide) {
        --upaep-numberpicker-input-width: calc(100% - var(--upaep-numberpicker-controls-size) * 2);
        --upaep-numberpicker-input-margin: 0 var(--upaep-numberpicker-controls-size);
        --upaep-numberpicker-controls-decrease-inset: 50% auto auto var(--upaep-numberpicker-controls-offset);
    }

    &:has(.upaep__numberpicker-delete.is-hide):has(.upaep__numberpicker-decrease.is-hide) {
        --upaep-numberpicker-input-margin: 0 var(--upaep-numberpicker-controls-size) 0 0;
    }

    &:has(.upaep__numberpicker-increase.is-hide) {
        --upaep-numberpicker-input-width: calc(100% - var(--upaep-numberpicker-controls-size) * 2 - (var(--upaep-numberpicker-controls-offset) * 2));
        --upaep-numberpicker-input-margin: 0 0 auto calc((var(--upaep-numberpicker-controls-size) * 2) + var(--upaep-numberpicker-controls-offset));
    }

    &:has(.upaep__numberpicker-increase.is-hide):has(.upaep__numberpicker-decrease.is-hide),
    &:has(.upaep__numberpicker-increase.is-hide):has(.upaep__numberpicker-delete.is-hide) {
        --upaep-numberpicker-input-width: 100%;
        --upaep-numberpicker-input-margin: 0 0 0 var(--upaep-numberpicker-controls-size);
    }

    &:has(.upaep__numberpicker-increase.is-hide):has(.upaep__numberpicker-decrease.is-hide):has(.upaep__numberpicker-delete.is-hide) {
        --upaep-numberpicker-input-width: 100%;
        --upaep-numberpicker-input-margin: 0;
        --upaep-numberpicker-padding: 0;
    }

    .upaep__input {
        --upaep-input-width: var(--upaep-numberpicker-input-width);
        --upaep-input-margin: var(--upaep-numberpicker-input-margin);
        --upaep-input-fz: var(--upaep-numberpicker-input-fz);
        --upaep-input-hover-fz: var(--upaep-numberpicker-input-fz);
        /*? El fondo lo pinta el contenedor: el input va transparente en todos sus
           estados (antes `inset`, que no es un color válido y caía a transparente). */
        --upaep-input-bg: transparent;
        --upaep-input-border-bottom-size: 0;
        --upaep-input-border-size: 0;
        --upaep-input-border-color: ;
        --upaep-input-boxshadow: ;
        --upaep-input-focus-bg: transparent;
        --upaep-input-focus-border-size: 0;
        --upaep-input-focus-border-color: ;
        --upaep-input-focus-boxshadow: ;
        --upaep-input-disabled-bg: transparent;
        --upaep-input-readonly-bg: transparent;
        --upaep-input-hover-bg: transparent;
        --upaep-input-hover-border-size: 0;
        --upaep-input-hover-border-color: ;
        --upaep-input-hover-color: ;
        /*? Spinner nativo fuera en los dos motores (el stepper son los botones):
           Firefox necesita `textfield`, WebKit los pseudoelementos de abajo. */
        --upaep-input-appearance: textfield;
        text-align: var(--upaep-numberpicker-input-text-align);

        /*? Sin outline propio en ningún estado: el foco lo dibuja el contenedor.
           (La regla base del input solo lo apaga en `:not([readonly])`.) */
        &:focus,
        &:focus-visible {
            outline: 0;
        }

        &::-webkit-inner-spin-button,
        &::-webkit-outer-spin-button {
            appearance: none;
            margin: 0;
        }
    }

    &:has(input.__rounded),
    &.__rounded {
        --upaep-numberpicker-border-radius: 50px;
    }

    &:has(input[disabled]) {
        background: var(--upaep-numberpicker-disabled-bg);
        opacity: var(--upaep-numberpicker-disabled-opacity);
        cursor: not-allowed;
    }

    &:has(input[readonly]) {
        background: var(--upaep-numberpicker-readonly-bg);
        opacity: var(--upaep-numberpicker-readonly-opacity);
    }

    &:hover {
        background: var(--upaep-numberpicker-hover-bg);
    }

    /*? El anillo de foco lo pinta SIEMPRE el contenedor, nunca el input suelto:
       incluye `readonly` (que sigue siendo enfocable) para que no salte el outline
       nativo alrededor del campo, descuadrado respecto al numberpicker. */
    &:has(input:focus:not(:disabled)) {
        box-shadow: var(--upaep-numberpicker-focus-boxshadow);
    }

    /*? El fondo de foco sí se reserva al modo editable: en readonly manda su tenue. */
    &:has(input:focus:not(:disabled):not([readonly])) {
        background: var(--upaep-numberpicker-focus-bg);
    }

    &:has(>input.is-success),
    &:has(>input.is-valid) {
        --upaep-numberpicker-border-color: var(--ui-success, var(--upaep-color-success));
        --upaep-numberpicker-focus-boxshadow: var(--upaep-numberpicker-valid-boxshadow);
    }

    &:has(>input.is-error),
    &:has(>input.is-invalid) {
        --upaep-numberpicker-border-color: var(--ui-danger, var(--upaep-color-error));
        --upaep-numberpicker-focus-boxshadow: var(--upaep-numberpicker-invalid-boxshadow);
    }

    /*? ---- Tamaños ---- */
    &.__sm {
        --upaep-numberpicker-min-width: 120px;
        --upaep-numberpicker-padding: 0 .6rem;
        --upaep-numberpicker-controls-size: 20px;
        --upaep-numberpicker-controls-padding: .15rem;
        --upaep-numberpicker-controls-offset: 6px;
        --upaep-numberpicker-controls-border-radius: 6px;
        --upaep-numberpicker-controls-icon-size: 13px;
        --upaep-numberpicker-input-fz: var(--upaep-fz14);
    }

    &.__lg {
        --upaep-numberpicker-min-width: 190px;
        --upaep-numberpicker-padding: 0 1.25rem;
        --upaep-numberpicker-controls-size: 32px;
        --upaep-numberpicker-controls-padding: .35rem;
        --upaep-numberpicker-controls-offset: 12px;
        --upaep-numberpicker-controls-border-radius: 10px;
        --upaep-numberpicker-controls-icon-size: 20px;
        --upaep-numberpicker-input-fz: var(--upaep-fz18);
    }

    /*? Controles sin fondo ni borde: el icono queda suelto sobre el contenedor. */
    &.__ghost {
        --upaep-numberpicker-controls-bg: transparent;
        --upaep-numberpicker-controls-border-color: transparent;
    }

    /*? Borrar en tono de peligro (útil con delete.showAtZero / showAtMin). */
    &.__delete-danger {
        --upaep-numberpicker-delete-color: var(--ui-danger, var(--upaep-color-error));
        --upaep-numberpicker-delete-bg: transparent;
        --upaep-numberpicker-delete-border-color: transparent;
    }

    /*? ---- Variante en flujo ----
       Los controles salen del posicionamiento absoluto y el reparto del ancho lo hace
       flexbox: sin calc() ni cadena de :has() para cada combinación de botones visibles.
       Recomendada para contenedores estrechos o anchos variables. */
    &.__inline {
        --upaep-numberpicker-padding: calc(var(--upaep-numberpicker-controls-offset) / 2) var(--upaep-numberpicker-controls-offset);
        gap: var(--upaep-numberpicker-gap);

        .upaep__numberpicker-increase,
        .upaep__numberpicker-decrease,
        .upaep__numberpicker-delete,
        .upaep__numberpicker-controls {
            position: static;
            inset: auto;
            translate: none;
            flex: 0 0 auto;
        }

        .upaep__input {
            --upaep-input-width: 100%;
            --upaep-input-margin: 0;
            flex: 1 1 auto;
            min-width: 0;
            order: 2;
        }

        .upaep__numberpicker-decrease,
        .upaep__numberpicker-delete {
            order: 1;
        }

        .upaep__numberpicker-increase {
            order: 3;
        }
    }

    /*? ---- Variante apilada ----
       Incrementar arriba y decrementar abajo a la derecha (estilo spinner nativo).
       Si borrar y decrementar están visibles a la vez, borrar toma su propia columna. */
    &.__stacked {
        --upaep-numberpicker-controls-height: calc(var(--upaep-numberpicker-controls-size) * .68);
        --upaep-numberpicker-controls-padding: 0;
        --upaep-numberpicker-controls-icon-size: calc(var(--upaep-numberpicker-controls-height) - 4px);
        --upaep-numberpicker-padding: calc(var(--upaep-numberpicker-controls-offset) / 2) var(--upaep-numberpicker-controls-offset);
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: var(--upaep-numberpicker-stacked-gap) var(--upaep-numberpicker-gap);

        .upaep__numberpicker-increase,
        .upaep__numberpicker-decrease,
        .upaep__numberpicker-delete,
        .upaep__numberpicker-controls {
            position: static;
            inset: auto;
            translate: none;
        }

        .upaep__input {
            --upaep-input-width: 100%;
            --upaep-input-margin: 0;
            grid-column: 1;
            grid-row: 1 / 3;
            min-width: 0;
        }

        .upaep__numberpicker-increase {
            grid-column: 2;
            grid-row: 1;
        }

        .upaep__numberpicker-decrease,
        .upaep__numberpicker-delete {
            grid-column: 2;
            grid-row: 2;
        }

        &:has(.upaep__numberpicker-delete:not(.is-hide)):has(.upaep__numberpicker-decrease:not(.is-hide)) {
            grid-template-columns: auto 1fr auto;

            .upaep__numberpicker-delete {
                grid-column: 1;
                grid-row: 1 / 3;
            }

            .upaep__input {
                grid-column: 2;
            }

            .upaep__numberpicker-increase,
            .upaep__numberpicker-decrease {
                grid-column: 3;
            }
        }
    }
}

.was-validated,
.__validated {
    .upaep__numberpicker {
        &:has(>input:valid) {
            --upaep-numberpicker-border-color: var(--ui-success, var(--upaep-color-success));
            --upaep-numberpicker-focus-boxshadow: var(--upaep-numberpicker-valid-boxshadow);
        }

        &:has(>input:invalid) {
            --upaep-numberpicker-border-color: var(--ui-danger, var(--upaep-color-error));
            --upaep-numberpicker-focus-boxshadow: var(--upaep-numberpicker-invalid-boxshadow);
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .upaep__numberpicker {
        --upaep-numberpicker-transition: none;
        --upaep-numberpicker-controls-transition: none;
    }
}

/*? ------ Trinity ------ */
.upaep__views {
    width: 100%;
    height: auto;

    .upaep__view {
        --upaep-view-width: 100%;
        --upaep-view-height: auto;
        --upaep-view-padding: 0;
        --upaep-view-margin: 0;
        width: var(--upaep-view-width);
        height: var(--upaep-view-height);
        padding: var(--upaep-view-padding);
        margin: var(--upaep-view-margin);

        &:not(.is-active) {
            display: none;
        }

        &.is-active {
            animation: a_fadeIn .8s;
        }
    }
}

.upaep__view-header {
    --upaep-view-header-width: 100%;
    --upaep-view-header-height: auto;
    --upaep-view-header-padding: 12px 59px 18px;
    --upaep-view-header-bg: var(--upaep-color-white);
    --upaep-view-header-title-fz: var(--upaep-fz20);
    --upaep-view-header-title-fw: var(--upaep-fw-bold);
    --upaep-view-header-title-color: var(--upaep-color-blue-primary);
    --upaep-view-header-subtitle-fz: var(--upaep-fz16);
    --upaep-view-header-subtitle-fw: var(--upaep-fw-medium);
    --upaep-view-header-subtitle-color: var(--upaep-color-dark-grey);
    width: var(--upaep-view-header-width);
    height: var(--upaep-view-header-height);
    padding: var(--upaep-view-header-padding);
    background: var(--upaep-view-header-bg);

    .upaep__view-header-top {
        width: 100%;
        margin: 0 0 .5rem;
    }

    .upaep__view-header-bottom {
        width: 100%;
    }

    .upaep__view-header-buttons {
        width: 100%;
        display: flex;
        justify-content: space-between;
        border-top: 2px solid var(--upaep-color-tenue-gray);
        padding: .5rem 0 0;
        position: relative;
    }

    .upaep__view-header-titles {
        width: 100%;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: .25rem;
        padding: 0 0 .5rem;
    }

    .upaep__view-header-title {
        font-size: var(--upaep-view-header-title-fz);
        font-weight: var(--upaep-view-header-title-fw);
        color: var(--upaep-view-header-title-color);
        margin: 0;
    }

    .upaep__view-header-subtitle {
        font-size: var(--upaep-view-header-subtitle-fz);
        font-weight: var(--upaep-view-header-subtitle-fw);
        color: var(--upaep-view-header-subtitle-color);
        margin: 0;
    }

    @media(width <=480px) {
        --upaep-view-header-padding: 12px 30px 18px;
    }
}

.upaep__view-dropdown-buttons {
    display: flex;
    gap: 10px;

    @media(width <=480px) {
        padding: .5rem 0;
        flex-direction: column;
        justify-content: start;
        background: var(--upaep-color-white);
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        position: absolute;
        inset: 100% auto auto 0;
        z-index: var(--upaep-zindex-dropdown);

        &:not(.is-show) {
            display: none;
        }

        .upaep__btn {
            justify-content: start;
        }
    }
}

.upaep__view-inner {
    --upaep-view-inner-width: auto;
    --upaep-view-inner-height: auto;
    --upaep-view-inner-margin: 2rem 0 0;
    --upaep-view-inner-padding: 0;
    --upaep-view-inner-bg: ;
    width: var(--upaep-view-inner-width);
    height: var(--upaep-view-inner-height);
    margin: var(--upaep-view-inner-margin);
    padding: var(--upaep-view-inner-padding);
    background: var(--upaep-view-inner-bg);

    @media(768px <=width) {

        &:has(.upaep__view-container~.upaep__view-sidebar) {
            display: flex;
            margin: 0;

            .upaep__view-container:not(.is-fluid) {
                --upaep-view-container-maxwidth: 60%;
                min-height: var(--main-height);
            }

            .upaep__view-sidebar {
                --upaep-view-sidebar-width: 30%;
                min-height: var(--main-height);
            }
        }
    }

    @media(width <=768px) {

        &:has(.upaep__view-container~.upaep__view-sidebar) {

            .upaep__view-container {
                --upaep-view-container-maxwidth: 95%;
            }

            .upaep__view-sidebar {
                --upaep-view-sidebar-width: 100%;
            }
        }
    }
}

.upaep__view-container {
    --upaep-view-container-width: 100%;
    --upaep-view-container-height: auto;
    --upaep-view-container-margin: 0 auto;
    --upaep-view-container-padding: 0 calc(1.5rem * 0.5) 0 calc(1.5rem * 0.5);
    --upaep-view-container-maxwidth: ;
    width: var(--upaep-view-container-width);
    height: var(--upaep-view-container-height);
    margin: var(--upaep-view-container-margin);
    padding: var(--upaep-view-container-padding);
    max-width: var(--upaep-view-container-maxwidth);
    transition: all .3s ease-in-out;

    &.is-fluid {
        --upaep-view-container-maxwidth: 95%;
    }

    @media (480px <=width) {
        --upaep-view-container-maxwidth: 450px;
    }

    @media (924px <=width) {
        --upaep-view-container-maxwidth: 720px;
    }

    @media (1024px <=width) {
        --upaep-view-container-maxwidth: 800px;
    }

    @media (1450px <=width) {
        --upaep-view-container-maxwidth: 1200px;
    }

}

.upaep__view-sidebar {
    --upaep-view-sidebar-width: auto;
    --upaep-view-sidebar-height: auto;
    --upaep-view-sidebar-padding: 1rem;
    --upaep-view-sidebar-margin: 0;
    --upaep-view-sidebar-bg: var(--upaep-color-background);
    --upaep-view-sidebar-boxshadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
    --upaep-view-sidebar-boxshadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --upaep-view-sidebar-header-height: auto;
    --upaep-view-sidebar-inner-height: calc(100% - 60px);
    --upaep-view-sidebar-item-title-fz: var(--upaep-fz16);
    --upaep-view-sidebar-item-title-fw: var(--upaep-color-blue-primary);
    --upaep-view-sidebar-item-title-color: var(--upaep-fw-semibold);
    --upaep-view-sidebar-item-subtitle-fz: var(--upaep-fz14);
    --upaep-view-sidebar-item-subtitle-fw: var(--upaep-color-blue-primary);
    --upaep-view-sidebar-item-subtitle-color: var(--upaep-fw-semibold);
    --upaep-view-sidebar-item-text-fz: var(--upaep-fz14);
    --upaep-view-sidebar-item-text-fw: var(--upaep-fw-regular);
    --upaep-view-sidebar-item-text-color: var(--upaep-color-dark-grey);
    --upaep-view-sidebar-close-icon-size: 50px;
    --upaep-view-sidebar-close-size: 25px;
    --upaep-view-sidebar-close-icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTYiIHdpZHRoPSIxMiIgdmlld0JveD0iMCAwIDM4NCA1MTIiPjwhLS0hRm9udCBBd2Vzb21lIEZyZWUgNi41LjEgYnkgQGZvbnRhd2Vzb21lIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20gTGljZW5zZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tL2xpY2Vuc2UvZnJlZSBDb3B5cmlnaHQgMjAyNCBGb250aWNvbnMsIEluYy4tLT48cGF0aCBkPSJNMzQyLjYgMTUwLjZjMTIuNS0xMi41IDEyLjUtMzIuOCAwLTQ1LjNzLTMyLjgtMTIuNS00NS4zIDBMMTkyIDIxMC43IDg2LjYgMTA1LjRjLTEyLjUtMTIuNS0zMi44LTEyLjUtNDUuMyAwcy0xMi41IDMyLjggMCA0NS4zTDE0Ni43IDI1NiA0MS40IDM2MS40Yy0xMi41IDEyLjUtMTIuNSAzMi44IDAgNDUuM3MzMi44IDEyLjUgNDUuMyAwTDE5MiAzMDEuMyAyOTcuNCA0MDYuNmMxMi41IDEyLjUgMzIuOCAxMi41IDQ1LjMgMHMxMi41LTMyLjggMC00NS4zTDIzNy4zIDI1NiAzNDIuNiAxNTAuNnoiLz48L3N2Zz4=');
    width: var(--upaep-view-sidebar-width);
    height: var(--upaep-view-sidebar-height);
    padding: var(--upaep-view-sidebar-padding);
    margin: var(--upaep-view-sidebar-margin);
    background: var(--upaep-view-sidebar-bg);
    box-shadow: var(--upaep-view-sidebar-boxshadow);
    flex-shrink: 0;
    overflow: hidden;
    transition: translate .3s ease-in-out;

    &.is-toggle-offcanvas,
    &.is-offcanvas {
        position: fixed;
        inset: 0 0 0 auto;
        z-index: var(--upaep-zindex-offcanvas);

        &:not(.is-show) {
            translate: 100%;
            transition: translate .3s;

            .upaep__view-sidebar-close {
                display: none;
            }
        }
    }

    @media(480px<=width) {
        &:not(.is-offcanvas) {
            .upaep__view-sidebar-close {
                display: none;
            }
        }
    }

    @media(width<=480px) {
        position: fixed;
        inset: 0 0 0 auto;
        z-index: var(--upaep-zindex-offcanvas);

        &:not(.is-show) {
            translate: 100%;
            transition: translate .3s;
        }
    }

    .upaep__view-sidebar-item {
        width: 100%;

        &:not(:last-child) {
            margin: 0 0 1rem;
        }
    }

    .upaep__view-sidebar-item-header {
        width: 100%;
        padding: 0 .25rem;
        border-bottom: 2px solid var(--ui-accent, var(--upaep-color-red));
    }

    .upaep__view-sidebar-item-content {
        width: 100%;
        padding: .5rem 0;

        .upaep__list {
            --upaep-list-item-padding: .75rem 0;
            --upaep-list-item-border-bottom-color: #B8BABC;
            --upaep-list-padding: 0;
            --upaep-list-margin: 0;
            --upaep-list-item-border-radius: 0;
            list-style: none;

            .upaep__list-item {
                border-bottom: 1px solid #B8BABC;
            }
        }
    }

    .upaep__view-sidebar-item-title {
        font-size: var(--upaep-view-sidebar-item-title-fz);
        color: var(--upaep-view-sidebar-item-title-fw);
        font-weight: var(--upaep-view-sidebar-item-title-color);
        margin: 0;
    }

    .upaep__view-sidebar-item-subtitle {
        font-size: var(--upaep-view-sidebar-item-subtitle-fz);
        color: var(--upaep-view-sidebar-item-subtitle-fw);
        font-weight: var(--upaep-view-sidebar-item-subtitle-color);
        margin: 0;
    }

    .upaep__view-sidebar-item-text {
        font-size: var(--upaep-view-sidebar-item-text-fz);
        font-weight: var(--upaep-view-sidebar-item-text-fw);
        color: var(--upaep-view-sidebar-item-text-color);
        margin: 0;
    }

    .upaep__view-sidebar-header {
        width: 100%;
        height: var(--upaep-view-sidebar-header-height);
        display: flex;
        justify-content: space-between;

        &:has(>*:only-child) {
            justify-content: end;
        }
    }

    .upaep__view-sidebar-inner {
        width: 100%;
        height: var(--upaep-view-sidebar-inner-height);
        overflow-y: auto;
        scrollbar-width: thin;
    }

    .upaep__view-sidebar-close {
        width: var(--upaep-view-sidebar-close-icon-size);
        height: var(--upaep-view-sidebar-close-icon-size);
        position: relative;
        cursor: pointer;

        &::after {
            content: '';
            position: absolute;
            inset: 0;
            /*? El glifo es una máscara (no una imagen de fondo) para que tome el color del texto: una imagen lleva su
                color dentro del SVG (negro) y no sigue el tema ni la marca. */
            background-color: var(--upaep-view-sidebar-close-color, currentColor);
            -webkit-mask: var(--upaep-view-sidebar-close-icon) center center / var(--upaep-view-sidebar-close-size) no-repeat;
            mask: var(--upaep-view-sidebar-close-icon) center center / var(--upaep-view-sidebar-close-size) no-repeat;
        }
    }

}

.upaep__btn-group {
    &.__sm {
        flex-wrap: wrap;

        .upaep__btn {
            --upaep-btn-padding: .5rem 1rem;
        }
    }

    &.__views {
        --divisor-bg: var(--upaep-color-dark-grey);
    }
}

.upaep__btn.__view-back {
    --upaep-btn-margin: 0;
    --upaep-btn-padding: .25rem .4rem;
    --upaep-btn-bg: var(--upaep-color-white);
    --upaep-btn-color: var(--upaep-color-dark-grey);
    --upaep-btn-fw: var(--upaep-fw-medium);
    --upaep-btn-fz: var(--upaep-fz14);
    --upaep-btn-cont-fw: var(--upaep-fw-medium);
    --upaep-btn-cont-fz: var(--upaep-fz14);
    --upaep-btn-border-size: 0;
    --upaep-btn-border-radius: 5px;
    --upaep-btn-hover-bg: var(--upaep-color-tenue-gray);
    --upaep-btn-hover-border-size: 0;
    gap: .5rem;

    i {
        color: var(--ui-accent, var(--upaep-color-red));
    }
}

.upaep__btn.__views {
    --upaep-btn-padding: .5rem .75rem;
    --upaep-btn-margin: 0;
    --upaep-btn-bg: var(--upaep-color-white);
    --upaep-btn-color: var(--ui-link, var(--upaep-color-blue-link));
    --upaep-btn-fw: var(--upaep-fw-semibold);
    --upaep-btn-cont-fw: var(--upaep-fw-semibold);
    --upaep-btn-border-size: 0;
    --upaep-btn-border-radius: 5px;
    --upaep-btn-hover-color: var(--ui-link-hover, var(--upaep-color-blue-link-hover));
    --upaep-btn-hover-border-size: 0;
    --upaep-btn-disabled-color: var(--ui-link, var(--upaep-color-blue-link));
    --upaep-btn-disabled-cont-color: var(--ui-link, var(--upaep-color-blue-link));
    gap: 10px;

    img {
        width: 20px;
        height: 20px;
    }
}

.upaep__btn.__dropdown-buttons {

    @media(480px <=width) {
        display: none;
    }
}

.upaep__modal.__trinity {
    --upaep-modal-title-color: var(--upaep-color-blue-primary);
    --upaep-modal-title-fz: var(--upaep-fz20);
    --upaep-modal-header-padding: 1rem .5rem;

    .upaep__modal-body {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .upaep__modal-header {
        justify-content: end;
    }

    &.is-show {
        .upaep__modal-icon-status img {
            animation: a_bounceIn 0.8s 0.5s;
        }
    }

    .upaep__modal-icon-status img {
        width: 100px;
        height: 100px;
        margin: 0 auto;
        display: block;

        &.__icon-brumildo {
            width: 170px;
            height: 170px;
        }
    }

    .upaep__modal-titles {
        width: 100%;
    }

    .upaep__modal-title {
        text-align: center;
    }

    .upaep__modal-texts {
        width: 100%;
        justify-items: center;
    }

    .upaep__text {
        --upaep-text-color: var(--upaep-color-dark-grey);
        --upaep-text-fz: var(--upaep-fz16);
    }

    .upaep__subtitle {
        --upaep-subtitle-color: var(--upaep-color-blue-primary);
        --upaep-subtitle-fz: 24px;
        --upaep-subtitle-fw: var(--upaep-fw-bold);
    }

    .upaep__modal-buttons {
        width: 100%;
        display: flex;
        gap: 1rem;
        justify-content: center;
        margin: 1rem 0 1.5em;

        .upaep__btn {
            --upaep-btn-margin: 0;
        }
    }

    .upaep__btn:not(.upaep__btn.__autocomplete):not(.upaep__btn.__selectpicker):not(.upaep__btn.__dropzone) {
        display: block;
        min-width: 100px;
        --upaep-btn-margin: 1rem 0;
        --upaep-btn-padding: .5rem;
    }

    &:has(.is-scroll) {
        --upaep-modal-overflow: hidden;
        --upaep-modal-dialog-height: calc(100% - .85rem * 2);
        --upaep-modal-content-maxheight: 100%;
        --upaep-modal-body-overflow: hidden;
        --upaep-modal-content-overflow: hidden;
    }

    .is-scroll {
        overflow-y: auto;
    }

}

.upaep__card.__systems-trinity {
    --upaep-card-width: auto;
    --upaep-card-maxwidth: 400px;
    --upaep-card-height: 100%;
    --upaep-card-margin: 0 auto;
    --upaep-card-padding: 0;
    --upaep-card-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-card-border-radius: 10px;
    --upaep-card-boxshadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
    --upaep-card-title-fz: var(--upaep-fz18);
    --upaep-card-title-fw: var(--upaep-fw-bold);
    --upaep-card-title-color: var(--upaep-color-blue-primary);
    --upaep-card-title-align: center;
    --upaep-card-text-fz: var(--upaep-fz16);
    --upaep-card-text-fw: var(--upaep-fw-regular);
    --upaep-card-text-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-card-text-align: center;
    --upaep-card-img-width: auto;
    --upaep-card-img-height: 100%;
    --upaep-card-content-padding: 0;
    --upaep-card-footer-padding: 1rem 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;

    .upaep__card-content {
        align-items: start;
    }

    .upaep__card-texts {
        padding: 0 .25em;
        display: flex;
        flex-direction: column;
        gap: .5rem;
    }

    .upaep__card-footer {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1rem;
    }


    .upaep__btn {
        --upaep-btn-margin: 0;
        --upaep-btn-padding: .625rem 1.5rem;
    }
}

.upaep__card.__systems-trinity-follow {
    --upaep-card-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-card-width: 100%;
    --upaep-card-height: auto;
    --upaep-card-padding: 0;
    --upaep-card-margin: 1rem auto;
    --upaep-card-header-bg: ;
    --upaep-card-title-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-card-title-fz: var(--upaep-fz18);
    --upaep-card-title-fw: var(--upaep-fw-regular);
    --upaep-card-title-align: center;
    --upaep-card-text-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-card-text-fz: var(--upaep-fz40);
    --upaep-card-text-fw: var(--upaep-fw-bold);
    --upaep-card-content-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-card-boxshadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
    --upaep-card-content-border-radius: 10px 10px 0 0;
    --upaep-card-footer-border-top-color: var(--upaep-color-tenue-gray);

    a {
        width: 100%;
        height: 100%;
        text-decoration: none;
        color: var(--ui-link, var(--upaep-color-blue-link));

        &:hover {
            color: var(--ui-link-hover, var(--upaep-color-blue-link-hover));
        }
    }

    .__link {
        --upaep-link-fz: var(--upaep-fz16);
        --upaep-link-fw: var(--upaep-fw-regular);
        --upaep-link-color: var(--ui-link, var(--upaep-color-blue-link));
        --upaep-link-color-underline: var(--ui-link, var(--upaep-color-blue-link));
        --upaep-link-margin: 1rem;
    }

    .upaep__card-texts {
        justify-items: center;
    }

    .upaep__card-footer {
        display: flex;
        justify-content: center;
    }

    .upaep__card-content {
        flex-direction: column;

        .upaep__btn {
            --upaep-btn-margin: 0;
            --upaep-btn-padding: .5rem;
        }
    }

    .upaep__btn {
        --upaep-btn-margin: 0;
        --upaep-btn-padding: .5rem 1rem;
        --upaep-btn-color: var(--ui-link, var(--upaep-color-blue-link));
        --upaep-btn-bg: var(--upaep-color-none);
        --upaep-btn-hover-color: var(--ui-link-hover, var(--upaep-color-blue-link-hover));
        --upaep-btn-hover-bg: var(--upaep-color-color-none);
        --upaep-btn-hover-border-color: var(--upaep-color-color-none);
        --upaep-btn-disabled-color: var(--ui-link-hover, var(--upaep-color-blue-link-hover));
        --upaep-btn-disabled-bg: var(--upaep-color-none);
        --upaep-btn-disabled-border-color: var(--upaep-color-none);
        --upaep-btn-border-size: 0;
    }
}

.upaep__forms-steps {
    --upaep-forms-steps-width: 100%;
    --upaep-forms-steps-height: auto;
    --upaep-forms-steps-padding: 0;
    --upaep-forms-steps-margin: 0;
    --upaep-forms-steps-bg: ;
    --upaep-forms-steps-border-size: ;
    --upaep-forms-steps-border-style: ;
    --upaep-forms-steps-border-color: ;
    --upaep-forms-steps-border-radius: 10px;
    width: var(--upaep-forms-steps-width);
    height: var(--upaep-forms-steps-height);
    padding: var(--upaep-forms-steps-padding);
    margin: var(--upaep-forms-steps-margin);
    background: var(--upaep-forms-steps-bg);
    border: var(--upaep-forms-steps-border-size) var(--upaep-forms-steps-border-style) var(--upaep-forms-steps-border-color);
    border-radius: var(--upaep-forms-steps-border-radius);

    .upaep__title {
        --upaep-title-color: var(--upaep-color-dark-grey);
        --upaep-title-fz: var(--upaep-fz24);
    }

    .upaep__text {
        --upaep-text-color: var(--upaep-color-dark-grey);
        --upaep-text-fz: var(--upaep-fz18);
        --upaep-text-fw: var(--upaep-fw-regular);
        --upaep-text-margin: 0;
    }

    &:not(:has(.upaep__form-step-section.__simple)) {
        --upaep-forms-steps-bg: ;
    }
}

.upaep__form-step {
    --upaep-form-step-title-fz: var(--upaep-fz18);
    --upaep-form-step-title-fw: var(--upaep-fw-semibold);
    --upaep-form-step-title-color: var(--upaep-color-blue-primary);
    --upaep-form-step-subtitle-fz: var(--upaep-fz16);
    --upaep-form-step-subtitle-fw: var(--upaep-fw-medium);
    --upaep-form-step-subtitle-color: var(--upaep-color-dark-grey);
    --upaep-form-step-section-bg: var(--upaep-color-white);
    --upaep-form-step-section-border-radius: 8px;
    --upaep-form-step-section-boxshadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
    --upaep-form-step-content-bg: ;
    width: 100%;
    margin: 0;
    padding: .5rem 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;

    &:not(:first-child) {
        padding: 1rem;
    }

    &:not(.is-active) {
        display: none;
    }

    &.is-active {
        animation: a_fadeIn .5s;
    }

    &.is-simple {
        --upaep-form-step-content-bg: var(--upaep-color-white);
        --upaep-form-step-section-boxshadow: ;

        .upaep__form-step-section:last-child {
            border-radius: 0 0 4px 4px;
            margin: 0 0 1rem;
        }
    }

    .upaep__form-step-title {
        font-size: var(--upaep-form-step-title-fz);
        font-weight: var(--upaep-form-step-title-fw);
        color: var(--upaep-form-step-title-color);
        word-wrap: break-word;
        margin: 0;
        margin-inline-start: 1rem;

        &:empty {
            display: none;
        }
    }

    .upaep__form-step-subtitle {
        font-size: var(--upaep-form-step-subtitle-fz);
        font-weight: var(--upaep-form-step-subtitle-fw);
        color: var(--upaep-form-step-subtitle-color);
        word-wrap: break-word;
        margin: 0;
        margin-inline-start: 1rem;

        &:empty {
            display: none;
        }
    }

    .upaep__form-step-content {
        width: 100%;
        background: var(--upaep-form-step-content-bg);
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
    }

    .upaep__form-step-section {
        width: 100%;
        background: var(--upaep-form-step-section-bg);
        border-radius: var(--upaep-form-step-section-border-radius);
        box-shadow: var(--upaep-form-step-section-boxshadow);

        &.__simple {
            --upaep-form-step-section-boxshadow: ;
        }
    }

    .upaep__form-step-section-header {
        padding: .5rem 0;
        border-bottom: 2px solid var(--upaep-color-tenue-gray);
    }

    .upaep__form-step-section-inner {
        padding: 1.25rem 2rem;
    }

    .upaep__form-step-buttons {
        width: 100%;
        display: flex;
        justify-content: end;
        gap: 1rem;

        .upaep__btn {
            --upaep-btn-margin: 0;
        }
    }

    .upaep__form-step-subtitle-list {
        padding: 0 0 0 1rem;
        margin: 0;
    }
}

.upaep__panel {
    --upaep-panel-width: 100%;
    --upaep-panel-height: auto;
    --upaep-panel-border-radius: 0;
    --upaep-panel-bg: var(--upaep-color-white);
    --upaep-panel-boxshadow: ;
    --upaep-panel-title-fz: var(--upaep-fz20);
    --upaep-panel-title-fw: var(--upaep-fw-bold);
    --upaep-panel-title-color: var(--upaep-color-blue-primary);
    --upaep-panel-title-align: start;
    --upaep-panel-subtitle-fz: var(--upaep-fz18);
    --upaep-panel-subtitle-fw: var(--upaep-fw-medium);
    --upaep-panel-subtitle-color: var(--upaep-color-blue-primary);
    --upaep-panel-subtitle-align: start;
    --upaep-panel-text-fz: var(--upaep-fz16);
    --upaep-panel-text-fw: var(--upaep-fw-regular);
    --upaep-panel-text-color: var(--upaep-color-dark-grey);
    --upaep-panel-header-width: 100%;
    --upaep-panel-header-height: 100%;
    --upaep-panel-header-bg: ;
    --upaep-panel-inner-width: 100%;
    --upaep-panel-inner-height: 100%;
    --upaep-panel-inner-bg: ;
    --upaep-panel-inner-padding: 1rem 2rem;
    width: var(--upaep-panel-width);
    height: var(--upaep-panel-height);
    border-radius: var(--upaep-panel-border-radius);
    background: var(--upaep-panel-bg);
    box-shadow: var(--upaep-panel-boxshadow);

    .upaep__panel-header {
        width: var(--upaep-panel-header-width);
        height: var(--upaep-panel-header-height);
        background: var(--upaep-panel-header-bg);
        padding: 1rem 2rem;
        border-bottom: 2px solid var(--upaep-color-tenue-gray);
    }

    .upaep__panel-header-top {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .upaep__panel-header-bottom {
        width: 100%;
        display: flex;
        align-items: start;
        justify-content: space-between;
        gap: 10px;
    }

    .upaep__panel-status {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
    }

    .upaep__panel-info {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0;
    }

    .upaep__panel-inner {
        width: var(--upaep-panel-inner-width);
        height: var(--upaep-panel-inner-height);
        background: var(--upaep-panel-inner-bg);
        padding: var(--upaep-panel-inner-padding);
    }

    &:not(.__title-fluid) {
        .upaep__panel-title {
            max-width: 50%;
            border-right: 2px solid var(--upaep-color-dark-grey);
        }
    }

    &:not(.__simple) {
        --upaep-panel-boxshadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
        --upaep-panel-border-radius: 8px;
    }

    .upaep__panel-title {
        font-size: var(--upaep-panel-title-fz);
        font-weight: var(--upaep-panel-title-fw);
        color: var(--upaep-panel-title-color);
        text-align: var(--upaep-panel-title-align);
        padding: 0 .5rem 0 0;
        margin: 0;
    }

    .upaep__panel-subtitle {
        font-size: var(--upaep-panel-subtitle-fz);
        font-weight: var(--upaep-panel-subtitle-fw);
        color: var(--upaep-panel-subtitle-color);
        text-align: var(--upaep-panel-subtitle-align);
        margin: 0;
    }

    .upaep__panel-text {
        font-size: var(--upaep-panel-text-fz);
        font-weight: var(--upaep-panel-text-fw);
        color: var(--upaep-panel-text-color);
        margin: 0;

        &.__title {
            font-size: var(--upaep-fz24);
        }

        &.__subtitle {
            font-size: var(--upaep-fz20);
        }

        &.__info {
            font-weight: var(--upaep-fw-bold);
            color: var(--upaep-color-blue-primary);

            span {
                font-weight: var(--upaep-fw-regular);
                color: var(--upaep-color-dark-grey);
            }
        }
    }

    .upaep__panel-footer {
        width: 100%;
        padding: 1rem 2rem;
    }

    @media(width<=980px) {
        .upaep__panel-header-top {
            flex-wrap: wrap;
        }

        .upaep__panel-status {
            width: 150px;
            flex-direction: column;
            align-items: start;
        }

        .upaep__panel-title {
            font-size: var(--upaep-fz20);
        }

        .upaep__panel-header-bottom {
            flex-wrap: wrap;
        }

        .upaep__panel-info {
            align-items: start;
            flex-direction: column;
            gap: 0;
        }

    }

    @media(width<=480px) {
        --upaep-panel-inner-padding: 1rem;

        .upaep__panel-header-top {
            flex-wrap: wrap;
        }

        .upaep__panel-title {
            font-size: var(--upaep-fz20);
        }

        .upaep__panel-header-bottom {
            flex-wrap: wrap;
        }

        .upaep__panel-info {
            align-items: start;
        }
    }
}

.upaep__accordion:has(.upaep__details-accordion.__rounded) {

    .upaep__details-accordion {
        &:first-child {
            border-top-left-radius: var(--upaep-details-accordion-border-radius);
            border-top-right-radius: var(--upaep-details-accordion-border-radius);
        }

        &:last-child {
            border-bottom-left-radius: var(--upaep-details-accordion-border-radius);
            border-bottom-right-radius: var(--upaep-details-accordion-border-radius);
        }
    }

}

.upaep__details-accordion {
    --upaep-details-accordion-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-details-accordion-border-size: 1px;
    --upaep-details-accordion-border-style: solid;
    --upaep-details-accordion-border-color: #dee2e6;
    --upaep-details-accordion-border-radius: 8px;
    --upaep-details-accordion-padding: 1rem;
    --upaep-details-accordion-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    --upaep-details-accordion-mark-inactive: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuNC4yIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDIzIEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNMjU2IDgwYzAtMTcuNy0xNC4zLTMyLTMyLTMycy0zMiAxNC4zLTMyIDMyVjIyNEg0OGMtMTcuNyAwLTMyIDE0LjMtMzIgMzJzMTQuMyAzMiAzMiAzMkgxOTJWNDMyYzAgMTcuNyAxNC4zIDMyIDMyIDMyczMyLTE0LjMgMzItMzJWMjg4SDQwMGMxNy43IDAgMzItMTQuMyAzMi0zMnMtMTQuMy0zMi0zMi0zMkgyNTZWODB6Ii8+PC9zdmc+');
    --upaep-details-accordion-mark-active: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuNC4yIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDIzIEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNNDMyIDI1NmMwIDE3LjctMTQuMyAzMi0zMiAzMkw0OCAyODhjLTE3LjcgMC0zMi0xNC4zLTMyLTMyczE0LjMtMzIgMzItMzJsMzUyIDBjMTcuNyAwIDMyIDE0LjMgMzIgMzJ6Ii8+PC9zdmc+');
    --upaep-details-accordion-summary-fz: var(--upaep-fz16);
    --upaep-details-accordion-summary-fw: var(--upaep-fw-bold);
    --upaep-details-accordion-summary-color: var(--upaep-color-dark-gery);
    --upaep-details-accordion-: ;
    background: var(--upaep-details-accordion-bg);
    border-bottom: var(--upaep-details-accordion-border-size) var(--upaep-details-accordion-border-style) var(--upaep-details-accordion-border-color);
    padding: var(--upaep-details-accordion-padding);
    display: block;

    .upaep__details-summary {
        font-size: var(--upaep-details-accordion-summary-fz);
        font-weight: var(--upaep-details-accordion-summary-fw);
        color: var(--upaep-details-accordion-summary-color);
        display: flex;
        align-items: center;
        justify-content: space-between;
        list-style-type: none;
        cursor: pointer;
        opacity: .75;
        transition: .25s;

        &::-webkit-details-marker {
            display: none;
        }

        &:after {
            content: "";
            display: block;
            height: 1rem;
            width: 1rem;
            float: right;
            background-color: var(--upaep-details-accordion-mark-color, currentColor);
            -webkit-mask: var(--upaep-details-accordion-mark-inactive) no-repeat 100% / 1rem auto;
            mask: var(--upaep-details-accordion-mark-inactive) no-repeat 100% / 1rem auto;
        }
    }

    &[open] {
        >.upaep__details-summary {
            margin-bottom: 1rem;

            &:after {
                background-color: var(--upaep-details-accordion-mark-color, currentColor);
                -webkit-mask: var(--upaep-details-accordion-mark-active) no-repeat 100% / 1rem auto;
                mask: var(--upaep-details-accordion-mark-active) no-repeat 100% / 1rem auto;
            }
        }
    }

    &:last-of-type {
        border-color: transparent
    }
}

.upaep__details-accordion.__mark-left {
    .upaep__details-summary {
        flex-direction: row-reverse;
        justify-content: start;
        gap: .5rem;
    }
}

.upaep__details-accordion.__summary-header-border {
    --upaep-details-accordion-header-border-size: 1px;
    --upaep-details-accordion-header-border-style: solid;
    --upaep-details-accordion-header-border-color: #DBDBDB;

    &[open] {
        >.upaep__details-summary {
            border-bottom: var(--upaep-details-accordion-header-border-size) var(--upaep-details-accordion-header-border-style) var(--upaep-details-accordion-header-border-color);
        }
    }
}

.upaep__cards-group {
    --upaep-cards-group-gap: 1rem;
    --upaep-cards-group-col: auto;
    --upaep-cards-group-justify: center;
    --upaep-cards-group-item-width: calc(100% / 12 * calc(12 / var(--upaep-cards-group-col)) - var(--upaep-cards-group-gap));
    width: 100%;
    padding: 0;

    .upaep__cards-group-wrapper {
        gap: var(--upaep-cards-group-gap);
        justify-content: var(--upaep-cards-group-justify);
        display: flex;
        flex-wrap: wrap;
    }

    .upaep__cards-group-item {
        width: var(--upaep-cards-group-item-width);
    }

    &.__col-item-1 {
        --upaep-cards-group-col: 1;
    }

    &.__col-item-2 {
        --upaep-cards-group-col: 2;
    }

    &.__col-item-3 {
        --upaep-cards-group-col: 3;
    }

    &.__col-item-4 {
        --upaep-cards-group-col: 4;
    }

    &.__col-item-5 {
        --upaep-cards-group-col: 5;
    }

    &.__col-item-6 {
        --upaep-cards-group-col: 6;
    }

    &.__col-item-7 {
        --upaep-cards-group-col: 7;
    }

    &.__col-item-8 {
        --upaep-cards-group-col: 8;
    }

    &.__col-item-9 {
        --upaep-cards-group-col: 9;
    }

    &.__col-item-10 {
        --upaep-cards-group-col: 10;
    }

    &.__col-item-11 {
        --upaep-cards-group-col: 11;
    }

    &.__col-item-12 {
        --upaep-cards-group-col: 12;
    }

    /* sm */
    @media(480px <=width) {
        &.__col-item-sm-1 {
            --upaep-cards-group-col: 1;
        }

        &.__col-item-sm-2 {
            --upaep-cards-group-col: 2;
        }

        &.__col-item-sm-3 {
            --upaep-cards-group-col: 3;
        }

        &.__col-item-sm-4 {
            --upaep-cards-group-col: 4;
        }

        &.__col-item-sm-5 {
            --upaep-cards-group-col: 5;
        }

        &.__col-item-sm-6 {
            --upaep-cards-group-col: 6;
        }

        &.__col-item-sm-7 {
            --upaep-cards-group-col: 7;
        }

        &.__col-item-sm-8 {
            --upaep-cards-group-col: 8;
        }

        &.__col-item-sm-9 {
            --upaep-cards-group-col: 9;
        }

        &.__col-item-sm-10 {
            --upaep-cards-group-col: 10;
        }

        &.__col-item-sm-11 {
            --upaep-cards-group-col: 11;
        }

        &.__col-item-sm-12 {
            --upaep-cards-group-col: 12;
        }
    }

    /* md */
    @media(768px <=width) {
        &.__col-item-md-1 {
            --upaep-cards-group-col: 1;
        }

        &.__col-item-md-2 {
            --upaep-cards-group-col: 2;
        }

        &.__col-item-md-3 {
            --upaep-cards-group-col: 3;
        }

        &.__col-item-md-4 {
            --upaep-cards-group-col: 4;
        }

        &.__col-item-md-5 {
            --upaep-cards-group-col: 5;
        }

        &.__col-item-md-6 {
            --upaep-cards-group-col: 6;
        }

        &.__col-item-md-7 {
            --upaep-cards-group-col: 7;
        }

        &.__col-item-md-8 {
            --upaep-cards-group-col: 8;
        }

        &.__col-item-md-9 {
            --upaep-cards-group-col: 9;
        }

        &.__col-item-md-10 {
            --upaep-cards-group-col: 10;
        }

        &.__col-item-md-11 {
            --upaep-cards-group-col: 11;
        }

        &.__col-item-md-12 {
            --upaep-cards-group-col: 12;
        }
    }

    /* lg */
    @media(1024px <=width) {
        &.__col-item-lg-1 {
            --upaep-cards-group-col: 1;
        }

        &.__col-item-lg-2 {
            --upaep-cards-group-col: 2;
        }

        &.__col-item-lg-3 {
            --upaep-cards-group-col: 3;
        }

        &.__col-item-lg-4 {
            --upaep-cards-group-col: 4;
        }

        &.__col-item-lg-5 {
            --upaep-cards-group-col: 5;
        }

        &.__col-item-lg-6 {
            --upaep-cards-group-col: 6;
        }

        &.__col-item-lg-7 {
            --upaep-cards-group-col: 7;
        }

        &.__col-item-lg-8 {
            --upaep-cards-group-col: 8;
        }

        &.__col-item-lg-9 {
            --upaep-cards-group-col: 9;
        }

        &.__col-item-lg-10 {
            --upaep-cards-group-col: 10;
        }

        &.__col-item-lg-11 {
            --upaep-cards-group-col: 11;
        }

        &.__col-item-lg-12 {
            --upaep-cards-group-col: 12;
        }
    }

    /* xl */
    @media(1450px <=width) {
        &.__col-item-xl-1 {
            --upaep-cards-group-col: 1;
        }

        &.__col-item-xl-2 {
            --upaep-cards-group-col: 2;
        }

        &.__col-item-xl-3 {
            --upaep-cards-group-col: 3;
        }

        &.__col-item-xl-4 {
            --upaep-cards-group-col: 4;
        }

        &.__col-item-xl-5 {
            --upaep-cards-group-col: 5;
        }

        &.__col-item-xl-6 {
            --upaep-cards-group-col: 6;
        }

        &.__col-item-xl-7 {
            --upaep-cards-group-col: 7;
        }

        &.__col-item-xl-8 {
            --upaep-cards-group-col: 8;
        }

        &.__col-item-xl-9 {
            --upaep-cards-group-col: 9;
        }

        &.__col-item-xl-10 {
            --upaep-cards-group-col: 10;
        }

        &.__col-item-xl-11 {
            --upaep-cards-group-col: 11;
        }

        &.__col-item-xl-12 {
            --upaep-cards-group-col: 12;
        }
    }

    /* xxl */
    @media(1920px <=width) {
        &.__col-item-xxl-1 {
            --upaep-cards-group-col: 1;
        }

        &.__col-item-xxl-2 {
            --upaep-cards-group-col: 2;
        }

        &.__col-item-xxl-3 {
            --upaep-cards-group-col: 3;
        }

        &.__col-item-xxl-4 {
            --upaep-cards-group-col: 4;
        }

        &.__col-item-xxl-5 {
            --upaep-cards-group-col: 5;
        }

        &.__col-item-xxl-6 {
            --upaep-cards-group-col: 6;
        }

        &.__col-item-xxl-7 {
            --upaep-cards-group-col: 7;
        }

        &.__col-item-xxl-8 {
            --upaep-cards-group-col: 8;
        }

        &.__col-item-xxl-9 {
            --upaep-cards-group-col: 9;
        }

        &.__col-item-xxl-10 {
            --upaep-cards-group-col: 10;
        }

        &.__col-item-xxl-11 {
            --upaep-cards-group-col: 11;
        }

        &.__col-item-xxl-12 {
            --upaep-cards-group-col: 12;
        }
    }
}

.upaep__filters-group {
    --upaep-filters-group-gap: 1rem;
    --upaep-filters-group-col: auto;
    --upaep-filters-group-justify: center;
    --upaep-filters-group-item-width: calc(100% / 12 * calc(12 / var(--upaep-filters-group-col)) - var(--upaep-filters-group-gap));
    width: 100%;

    .upaep__filters-wrapper {
        gap: var(--upaep-filters-group-gap);
        justify-content: var(--upaep-filters-group-justify);
        display: flex;
        flex-wrap: wrap;
    }

    .upaep__filters-group-item {
        display: flex;
        align-items: center;

        &:not(.__auto) {
            width: var(--upaep-filters-group-item-width);
        }

        >* {
            width: 100%;
            margin: 0;
        }
    }

    .upaep__selectpicker {
        --upaep-selectpicker-btn-border-color: var(--upaep-color-blue-primary);
        --upaep-selectpicker-btn-border-size: 1px;
        --upaep-selectpicker-btn-selected-border-color: var(--upaep-color-blue-primary-hover);
        --upaep-selectpicker-btn-selected-border-size: 1px;
    }

    &.__col-item-1 {
        --upaep-filters-group-col: 1;
    }

    &.__col-item-2 {
        --upaep-filters-group-col: 2;
    }

    &.__col-item-3 {
        --upaep-filters-group-col: 3;
    }

    &.__col-item-4 {
        --upaep-filters-group-col: 4;
    }

    &.__col-item-5 {
        --upaep-filters-group-col: 5;
    }

    &.__col-item-6 {
        --upaep-filters-group-col: 6;
    }

    &.__col-item-7 {
        --upaep-filters-group-col: 7;
    }

    &.__col-item-8 {
        --upaep-filters-group-col: 8;
    }

    &.__col-item-9 {
        --upaep-filters-group-col: 9;
    }

    &.__col-item-10 {
        --upaep-filters-group-col: 10;
    }

    &.__col-item-11 {
        --upaep-filters-group-col: 11;
    }

    &.__col-item-12 {
        --upaep-filters-group-col: 12;
    }

    /* sm */
    @media(480px <=width) {
        &.__col-item-sm-1 {
            --upaep-filters-group-col: 1;
        }

        &.__col-item-sm-2 {
            --upaep-filters-group-col: 2;
        }

        &.__col-item-sm-3 {
            --upaep-filters-group-col: 3;
        }

        &.__col-item-sm-4 {
            --upaep-filters-group-col: 4;
        }

        &.__col-item-sm-5 {
            --upaep-filters-group-col: 5;
        }

        &.__col-item-sm-6 {
            --upaep-filters-group-col: 6;
        }

        &.__col-item-sm-7 {
            --upaep-filters-group-col: 7;
        }

        &.__col-item-sm-8 {
            --upaep-filters-group-col: 8;
        }

        &.__col-item-sm-9 {
            --upaep-filters-group-col: 9;
        }

        &.__col-item-sm-10 {
            --upaep-filters-group-col: 10;
        }

        &.__col-item-sm-11 {
            --upaep-filters-group-col: 11;
        }

        &.__col-item-sm-12 {
            --upaep-filters-group-col: 12;
        }
    }

    /* md */
    @media(768px <=width) {
        &.__col-item-md-1 {
            --upaep-filters-group-col: 1;
        }

        &.__col-item-md-2 {
            --upaep-filters-group-col: 2;
        }

        &.__col-item-md-3 {
            --upaep-filters-group-col: 3;
        }

        &.__col-item-md-4 {
            --upaep-filters-group-col: 4;
        }

        &.__col-item-md-5 {
            --upaep-filters-group-col: 5;
        }

        &.__col-item-md-6 {
            --upaep-filters-group-col: 6;
        }

        &.__col-item-md-7 {
            --upaep-filters-group-col: 7;
        }

        &.__col-item-md-8 {
            --upaep-filters-group-col: 8;
        }

        &.__col-item-md-9 {
            --upaep-filters-group-col: 9;
        }

        &.__col-item-md-10 {
            --upaep-filters-group-col: 10;
        }

        &.__col-item-md-11 {
            --upaep-filters-group-col: 11;
        }

        &.__col-item-md-12 {
            --upaep-filters-group-col: 12;
        }
    }

    /* lg */
    @media(1024px <=width) {
        &.__col-item-lg-1 {
            --upaep-filters-group-col: 1;
        }

        &.__col-item-lg-2 {
            --upaep-filters-group-col: 2;
        }

        &.__col-item-lg-3 {
            --upaep-filters-group-col: 3;
        }

        &.__col-item-lg-4 {
            --upaep-filters-group-col: 4;
        }

        &.__col-item-lg-5 {
            --upaep-filters-group-col: 5;
        }

        &.__col-item-lg-6 {
            --upaep-filters-group-col: 6;
        }

        &.__col-item-lg-7 {
            --upaep-filters-group-col: 7;
        }

        &.__col-item-lg-8 {
            --upaep-filters-group-col: 8;
        }

        &.__col-item-lg-9 {
            --upaep-filters-group-col: 9;
        }

        &.__col-item-lg-10 {
            --upaep-filters-group-col: 10;
        }

        &.__col-item-lg-11 {
            --upaep-filters-group-col: 11;
        }

        &.__col-item-lg-12 {
            --upaep-filters-group-col: 12;
        }
    }

    /* xl */
    @media(1450px <=width) {
        &.__col-item-xl-1 {
            --upaep-filters-group-col: 1;
        }

        &.__col-item-xl-2 {
            --upaep-filters-group-col: 2;
        }

        &.__col-item-xl-3 {
            --upaep-filters-group-col: 3;
        }

        &.__col-item-xl-4 {
            --upaep-filters-group-col: 4;
        }

        &.__col-item-xl-5 {
            --upaep-filters-group-col: 5;
        }

        &.__col-item-xl-6 {
            --upaep-filters-group-col: 6;
        }

        &.__col-item-xl-7 {
            --upaep-filters-group-col: 7;
        }

        &.__col-item-xl-8 {
            --upaep-filters-group-col: 8;
        }

        &.__col-item-xl-9 {
            --upaep-filters-group-col: 9;
        }

        &.__col-item-xl-10 {
            --upaep-filters-group-col: 10;
        }

        &.__col-item-xl-11 {
            --upaep-filters-group-col: 11;
        }

        &.__col-item-xl-12 {
            --upaep-filters-group-col: 12;
        }
    }

    /* xxl */
    @media(1920px <=width) {
        &.__col-item-xxl-1 {
            --upaep-filters-group-col: 1;
        }

        &.__col-item-xxl-2 {
            --upaep-filters-group-col: 2;
        }

        &.__col-item-xxl-3 {
            --upaep-filters-group-col: 3;
        }

        &.__col-item-xxl-4 {
            --upaep-filters-group-col: 4;
        }

        &.__col-item-xxl-5 {
            --upaep-filters-group-col: 5;
        }

        &.__col-item-xxl-6 {
            --upaep-filters-group-col: 6;
        }

        &.__col-item-xxl-7 {
            --upaep-filters-group-col: 7;
        }

        &.__col-item-xxl-8 {
            --upaep-filters-group-col: 8;
        }

        &.__col-item-xxl-9 {
            --upaep-filters-group-col: 9;
        }

        &.__col-item-xxl-10 {
            --upaep-filters-group-col: 10;
        }

        &.__col-item-xxl-11 {
            --upaep-filters-group-col: 11;
        }

        &.__col-item-xxl-12 {
            --upaep-filters-group-col: 12;
        }
    }
}

.upaep__dates-group {
    --upaep-date-group-text-bg: var(--upaep-color-blue-primary);
    --upaep-date-group-text-color: var(--upaep-color-white);
    --upaep-date-group-text-fz: var(--upaep-fz14);
    --upaep-date-group-text-fw: var(--upaep-fw-regular);
    --upaep-date-group-text-border-radius: 10px 0 0 10px;
    --upaep-date-group-border-size: 1px;
    --upaep-date-group-border-style: solid;
    --upaep-date-group-border-color: var(--upaep-date-group-text-bg);
    --upaep-date-group-border-radius: 0 10px 10px 0;
    --upaep-date-group-padding: .25rem;
    width: auto;
    display: flex;

    .upaep__dates-group-text {
        padding: 0 1rem;
        display: flex;
        justify-content: center;
        align-items: center;
        background: var(--upaep-date-group-text-bg);
        color: var(--upaep-date-group-text-color);
        font-size: var(--upaep-date-group-text-fz);
        font-weight: var(--upaep-date-group-text-fw);
        border-radius: var(--upaep-date-group-text-border-radius);
    }

    .upaep__dates-group-inner {
        display: flex;
        gap: 1rem;
        border: var(--upaep-date-group-border-size) var(--upaep-date-group-border-style) var(--upaep-date-group-border-color);
        border-radius: var(--upaep-date-group-border-radius);
        padding: var(--upaep-date-group-padding);
    }

    .upaep__input {
        --upaep-input-width: 150px;
        --upaep-input-height: 35px;
        --upaep-input-margin: 0;
        --upaep-input-border-color: transparent;
        --upaep-input-hover-border-color: transparent;
        --upaep-input-focus-border-color: transparent;
        --upaep-input-border-bottom-color: transparent;
        --upaep-input-hover-border-bottom-color: transparent;
    }

    .upaep__label {
        --upaep-label-margin: 0;
        --upaep-label-padding: 0;
    }

    .upaep__dates-input-group {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
    }

    @media(width<=980px) {
        flex-direction: column;

        .upaep__dates-group-text {
            padding: .5rem;
            border-radius: 10px 10px 0 0;
        }

        .upaep__dates-group-inner {
            flex-wrap: wrap;
            border-radius: 0 0 10px 10px;
        }

        .upaep__input {
            --upaep-input-width: 100%;
            --upaep-input-margin: 0 auto;
        }
    }
}

/*? ------ Schedule ------ */
.upaep__schedule {
    --upaep-schedule-max-width: 550px;
    width: 100%;

    &:has(.upaep__schedule-appointments) {
        max-width: var(--upaep-schedule-max-width);
    }

    .upaep__schedule-appointments,
    .upaep__schedule-reservations {
        width: auto;
    }
}

.upaep__appointments {
    --upaep-appointments-width: 100%;
    --upaep-appointments-height: auto;
    --upaep-appointments-border-radius: 8px;
    /*? Sin sombra por defecto: el panel casi siempre va dentro de una card que ya
    tiene la suya. Para recuperarla: --upaep-appointments-boxshadow: var(--upaep-box-shadow). */
    --upaep-appointments-boxshadow: none;
    --upaep-appointments-bg: var(--ui-surface, var(--upaep-color-white));
    --upaep-appointments-padding: 1rem 1.5rem;
    --upaep-appointments-gap: 1.25rem;
    --upaep-appointments-days-gap: .75rem;
    --upaep-appointments-day-gap: .5rem;
    --upaep-appointments-day-padding: .5rem 2rem 1.5rem 2rem;
    --upaep-appointments-day-bg: var(--ui-surface-2, var(--upaep-color-background));
    --upaep-appointments-day-border-radius: var(--upaep-appointments-border-radius);
    --upaep-appointments-day-border-color: var(--ui-border, #DBDBDB);
    --upaep-appointments-schedules-gap: 1rem;
    --upaep-appointments-schedule-gap: 1.25rem;
    --upaep-appointments-divider-color: var(--ui-border, #A6A6A6);
    --upaep-appointments-inner-boxshadow: none;
    /*? El encabezado y el pie se separan con una línea, no con sombra. */
    --upaep-appointments-section-border: 1px solid var(--upaep-appointments-day-border-color);
    --upaep-appointments-days-max-height: 400px;
    --upaep-appointments-inner-max-height: calc(100dvh - 200px);
    --upaep-appointments-animation-duration: .3s;
    --upaep-appointments-animation-easing: ease-in-out;
    --upaep-appointments-btn-size: 28px;
    --upaep-appointments-btn-column: 35px;
    --upaep-appointments-buttons-width: 50px;
    --upaep-appointments-icon-size: 28px;
    --upaep-appointments-icon-color: var(--ui-link, var(--upaep-color-blue-link));
    --upaep-appointments-icon-disabled-color: var(--ui-text-muted, var(--upaep-color-grey));
    --upaep-appointments-title-fz: var(--upaep-fz20);
    --upaep-appointments-title-fw: var(--upaep-fw-bold);
    --upaep-appointments-title-color: var(--ui-text, var(--upaep-color-blue-primary));
    --upaep-appointments-subtitle-fz: var(--upaep-fz14);
    --upaep-appointments-subtitle-fw: var(--upaep-fw-medium);
    --upaep-appointments-subtitle-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-appointments-text-fz: var(--upaep-fz16);
    --upaep-appointments-text-fw: var(--upaep-fw-regular);
    --upaep-appointments-text-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-appointments-day-fz: var(--upaep-fz14);
    --upaep-appointments-day-fw: var(--upaep-fw-bold);
    --upaep-appointments-day-color: var(--ui-link, var(--upaep-color-blue-link));
    --upaep-appointments-day-hover-bg: var(--ui-surface-3, #d3d4d5);
    --upaep-appointments-message-fz: var(--upaep-fz16);
    --upaep-appointments-message-fw: var(--upaep-fw-medium);
    --upaep-appointments-message-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    --upaep-appointments-feedback-fz: var(--upaep-fz14);
    --upaep-appointments-feedback-fw: var(--upaep-fw-medium);
    --upaep-appointments-feedback-color: var(--ui-text-on-surface, var(--upaep-color-dark-grey));
    width: var(--upaep-appointments-width);
    height: var(--upaep-appointments-height);
    border-radius: var(--upaep-appointments-border-radius);
    box-shadow: var(--upaep-appointments-boxshadow);
    background: var(--upaep-appointments-bg);

    .upaep__appointments-header {
        width: 100%;
        padding: var(--upaep-appointments-padding);
        border-bottom: var(--upaep-appointments-section-border);
        box-shadow: var(--upaep-appointments-inner-boxshadow);
    }

    .upaep__appointments-inner {
        width: 100%;
        padding: var(--upaep-appointments-padding);
        display: flex;
        flex-direction: column;
        gap: var(--upaep-appointments-gap);

        .upaep__appointments-item,
        .upaep__appointments-duration,
        .upaep__appointments-availability,
        .upaep__appointments-session-type {
            width: 100%;
        }

        .upaep__appointments-instructions {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: var(--upaep-appointments-gap);

            &:not(:has(.upaep__appointments-instruction.is-active)) {
                display: none;
            }
        }

        .upaep__appointments-more {
            width: 100%;

            /*? El slot vacío no debe abrir un hueco en el flex. */
            &:empty {
                display: none;
            }
        }
    }

    &.__scroll-days {
        .upaep__appointments-days {
            max-height: var(--upaep-appointments-days-max-height);
            overflow: hidden;
            overflow-y: auto;
            scrollbar-width: thin;
        }
    }

    &.__scroll-inner {
        .upaep__appointments-inner {
            max-height: var(--upaep-appointments-inner-max-height);
            overflow: hidden;
            overflow-y: auto;
            scrollbar-width: thin;
        }
    }

    .upaep__appointments-days {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: var(--upaep-appointments-days-gap);

        .upaep__appointments-day-item {
            width: 100%;
            height: 100%;
            display: grid;
            gap: var(--upaep-appointments-day-gap);
        }

        .upaep__appointments-day {
            width: 100%;
            padding: var(--upaep-appointments-day-padding);
            border-radius: var(--upaep-appointments-day-border-radius);
            display: flex;
            justify-content: center;

            &:has(.upaep__appointments-schedules .upaep__appointments-schedules-item:only-child) {
                align-items: center;
            }
        }

        .upaep__appointments-day-header {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: .5rem;
        }

        .upaep__appointments-day-actions {
            display: flex;
            align-items: center;
            gap: .25rem;

            /*? Las etiquetas de Copiar/Limpiar se partían en tres líneas dentro de
            contenedores angostos. */
            .upaep__btn {
                white-space: nowrap;
            }
        }

        .upaep__appointments-schedules {
            width: 100%;
            padding: 0 .5rem;
            display: flex;
            flex-direction: column;
            gap: var(--upaep-appointments-schedules-gap);
        }

        .upaep__appointments-buttons {
            width: var(--upaep-appointments-buttons-width);
            display: flex;
            align-items: start;
            justify-content: center;
        }

        .upaep__details-accordion {
            --upaep-details-accordion-summary-fz: var(--upaep-appointments-day-fz);
            --upaep-details-accordion-summary-fw: var(--upaep-appointments-day-fw);
            --upaep-details-accordion-summary-color: var(--upaep-appointments-day-color);
            --upaep-details-accordion-bg: var(--upaep-appointments-day-bg);
            --upaep-details-accordion-padding: 0;
            --upaep-details-accordion-mark-inactive: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE3LjM2NTIgMTEuMDA4OEwzLjYzNDQ2IDE2Ljk2MTJMMy42MzQ0NiA0LjAzODA5TDE3LjM2NTIgMTEuMDA4OFoiIGZpbGw9IiMwMDg1RkYiLz4KPC9zdmc+Cg==');
            --upaep-details-accordion-mark-active: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTkuOTkwMTcgMTcuMzY1Mkw0LjAzNzg2IDMuNjM0NDZMMTYuOTYwOSAzLjYzNDQ2TDkuOTkwMTcgMTcuMzY1MloiIGZpbGw9IiMwMDg1RkYiLz4KPC9zdmc+Cg==');
            --upaep-details-accordion-mark-color: #0085FF;
            border-radius: var(--upaep-appointments-day-border-radius);

            .upaep__details-summary {
                padding: .25rem .5rem;
                justify-content: start;
                flex-direction: row-reverse;
                gap: .5rem;

                &:after {
                    width: 1.25rem;
                }
            }

            &[open] {
                >.upaep__details-summary {
                    border-bottom: 1px solid var(--upaep-appointments-day-border-color);
                }
            }
        }
    }

    .upaep__btn.__appointments {
        --upaep-btn-width: var(--upaep-appointments-btn-size);
        --upaep-btn-height: var(--upaep-appointments-btn-size);
        --upaep-btn-margin: 0;
        --upaep-btn-padding: 1rem;
        --upaep-btn-border-radius: 50px;
        /*? El icono es SVG inline: hereda el color del botón vía currentColor. */
        color: var(--upaep-appointments-icon-color);

        img,
        svg {
            /*? El botón es flex y angosto: sin flex-basis fija el SVG inline se encoge
            a 0 (el <img> no lo hacía porque tiene ancho intrínseco). */
            flex: 0 0 auto;
            width: var(--upaep-appointments-icon-size);
            height: var(--upaep-appointments-icon-size);
        }

        &.__add-schedule {
            position: sticky;
            inset: 0;
        }

        &:disabled {
            color: var(--upaep-appointments-icon-disabled-color);
            cursor: not-allowed;
        }
    }

    .upaep__btn.__clear-schedules,
    .upaep__btn.__copy-schedules {
        --upaep-btn-padding: .5rem .75rem;
        --upaep-btn-margin: 0;
        --upaep-btn-bg: transparent;
        --upaep-btn-fz: var(--upaep-appointments-day-fz);
        --upaep-btn-cont-fz: var(--upaep-appointments-day-fz);
        --upaep-btn-fw: var(--upaep-appointments-day-fw);
        --upaep-btn-cont-fw: var(--upaep-appointments-day-fw);
        --upaep-btn-color: var(--upaep-appointments-day-color);
        --upaep-btn-border-size: 0;
        --upaep-btn-border-radius: 5px;
        --upaep-btn-hover-bg: var(--upaep-appointments-day-hover-bg);
        --upaep-btn-hover-color: var(--ui-link-hover, var(--upaep-color-blue-link-hover));
        --upaep-btn-hover-border-size: 0;
        gap: 10px;

        &:disabled {
            opacity: .5;
            cursor: not-allowed;
        }
    }

    .upaep__appointments-schedules-item {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: .25rem;
        animation: a_fadeIn var(--upaep-appointments-animation-duration) var(--upaep-appointments-animation-easing);

        .upaep__appointments-schedules-item-wrapper {
            width: 100%;
            display: grid;
            gap: var(--upaep-appointments-schedule-gap);
            grid-template-columns: auto auto var(--upaep-appointments-btn-column);
            align-items: center;
        }

        &:not(:only-child):has(.upaep__appointments-schedule-message) {
            display: none;
        }

        .upaep__appointments-schedules-start,
        .upaep__appointments-schedules-end {
            width: 100%;
            display: flex;
            align-items: center;
            gap: .5rem;
        }

        .upaep__label {
            --upaep-label-margin: 0;
        }

        .upaep__select {
            --upaep-select-width: 100%;
            --upaep-select-margin: 0;
        }

        /*? La hora de fin es derivada (inicio + duración): se ve como dato, no como
        control editable, aunque siga enviándose en el submit. */
        .upaep__select.__end.is-locked {
            pointer-events: none;
            opacity: .85;
        }
    }

    .upaep__appointments-schedules-item-feedback {
        font-size: var(--upaep-appointments-feedback-fz);
        font-weight: var(--upaep-appointments-feedback-fw);
        color: var(--upaep-appointments-feedback-color);
        margin: 0;

        &.is-error {
            --upaep-appointments-feedback-color: var(--ui-danger, var(--upaep-color-error));
        }

        &.is-success {
            --upaep-appointments-feedback-color: var(--ui-success, var(--upaep-color-success));
        }
    }

    .upaep__appointments-instruction {
        width: 100%;
        animation: a_fadeIn var(--upaep-appointments-animation-duration) var(--upaep-appointments-animation-easing);

        &:not(.is-active) {
            display: none;
        }
    }

    .upaep__appointments-footer {
        width: 100%;
        padding: var(--upaep-appointments-padding);
        border-top: var(--upaep-appointments-section-border);
        box-shadow: var(--upaep-appointments-inner-boxshadow);

        /*? El slot vacío no debe pintar franja ni sombra. */
        &:empty {
            display: none;
        }
    }

    .upaep__appointments-title {
        font-size: var(--upaep-appointments-title-fz);
        font-weight: var(--upaep-appointments-title-fw);
        color: var(--upaep-appointments-title-color);
        margin: 0;
    }

    .upaep__appointments-subtitle {
        font-size: var(--upaep-appointments-subtitle-fz);
        font-weight: var(--upaep-appointments-subtitle-fw);
        color: var(--upaep-appointments-subtitle-color);
        margin: 0 0 .5rem;
    }

    .upaep__appointments-schedule-message {
        font-size: var(--upaep-appointments-message-fz);
        font-weight: var(--upaep-appointments-message-fw);
        color: var(--upaep-appointments-message-color);
        margin: 0 .5rem;
    }

    .upaep__appointments-text {
        font-size: var(--upaep-appointments-text-fz);
        font-weight: var(--upaep-appointments-text-fw);
        color: var(--upaep-appointments-text-color);
        margin: 0;
    }

    .upaep__line {
        --upaep-line-bg: var(--upaep-appointments-divider-color);
        --upaep-line-height: 1px;
        --upaep-line-border-size: 0;
        margin: 0 0 1rem;
    }

    .upaep__selectpicker {
        --upaep-selectpicker-margin: 0;
        --upaep-btn-hover-cont-color: var(--upaep-appointments-text-color);

        .upaep__btn {
            --upaep-btn-cont-color: var(--upaep-appointments-text-color);
        }
    }

    .upaep__radio {
        --upaep-radio-checked-color: var(--ui-link, var(--upaep-color-blue-link));
        --upaep-radio-focus-border-color: var(--ui-link, var(--upaep-color-blue-link));
    }

    @media(width<=480px) {
        --upaep-appointments-padding: 1rem .5rem;
        --upaep-appointments-day-padding: .5rem .5rem 1.5rem .5rem;
        --upaep-appointments-day-gap: .35rem;
        --upaep-appointments-schedule-gap: .5rem;
        --upaep-appointments-message-fz: var(--upaep-fz14);
        --upaep-appointments-feedback-fz: var(--upaep-fz12);

        .upaep__appointments-days {
            .upaep__appointments-schedules {
                width: 100%;
            }
        }

        .upaep__appointments-schedules-item {
            gap: .5rem;

            .upaep__appointments-schedules-start,
            .upaep__appointments-schedules-end {
                gap: .35rem;
            }

            .upaep__label {
                --upaep-label-fz: var(--upaep-fz12);
            }

            .upaep__select {
                --upaep-select-width: 100%;
                --upaep-select-fz: var(--upaep-fz12);
                background-size: .75rem 1rem;
            }
        }
    }

    @media (prefers-reduced-motion: reduce) {
        --upaep-appointments-animation-duration: 0s;
    }
}

/*? Solo lectura: la agenda se ve como dato capturado, no como formulario. Los campos
ya vienen deshabilitados desde el JS; aquí se retiran los controles de edición. */
.upaep__schedule.is-readonly {
    .upaep__appointments {
        --upaep-appointments-icon-color: var(--upaep-appointments-icon-disabled-color);
    }

    .upaep__btn.__add-schedule,
    .upaep__btn.__delete-schedule,
    .upaep__btn.__clear-schedules,
    .upaep__btn.__copy-schedules {
        display: none;
    }

    .upaep__appointments-schedules-item-wrapper {
        grid-template-columns: auto auto;
    }

    .upaep__appointments-buttons {
        display: none;
    }

    /*? El punto del modo lectura es que el dato se LEA: se recupera el color normal
    del texto, que el estilo nativo de :disabled deslava. */
    .upaep__select:disabled,
    .upaep__input:disabled,
    textarea.upaep__input:disabled {
        cursor: default;
        opacity: 1;
        color: var(--upaep-appointments-text-color);
        -webkit-text-fill-color: var(--upaep-appointments-text-color);
    }
}

/*? ------ Coffi ------ */
.upaep__coffi {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    z-index: var(--upaep-zindex-coffi);
    pointer-events: none;
    transform-origin: center center;
}

/*? ------ CountDown ------ */
.upaep__countdown {
    --upaep-countdown-bg: var(--upaep-color-background);
    --upaep-countdown-margin: 1rem auto;
    --upaep-countdown-padding: 1rem;
    --upaep-countdown-ff: var(--upaep-ff-fira-sans-extracondensed);
    --upaep-countdown-time-unit-color: var(--upaep-color-dark-grey);
    --upaep-countdown-time-unit-fz: var(--upaep-fz24);
    --upaep-countdown-time-unit-fw: var(--upaep-fw-bold);
    --upaep-countdown-time-label-color: var(--upaep-color-dark-grey);
    --upaep-countdown-time-label-fz: var(--upaep-fz18);
    --upaep-countdown-time-label-fw: var(--upaep-fw-regular);
    --upaep-countdown-timezone-color: var(--upaep-color-dark-grey);
    --upaep-countdown-timezone-fz: var(--upaep-fz16);
    --upaep-countdown-timezone-fw: var(--upaep-fw-regular);
    --upaep-countdown-message-color: var(--upaep-color-success);
    --upaep-countdown-message-fz: var(--upaep-fz16);
    --upaep-countdown-message-fw: var(--upaep-fw-regular);
    --upaep-countdown-message-animation: a_tada 1s infinite ease-in-out;
    background: var(--upaep-countdown-bg);
    margin: var(--upaep-countdown-margin);
    padding: var(--upaep-countdown-padding);
    font-family: var(--upaep-countdown-ff);
    width: 100%;
    border-radius: 12px;

    .upaep__countdown-wrapper {
        width: 100%;
        padding: .5rem;
        display: flex;
        justify-content: center;
        gap: 1rem;
    }

    .upaep__countdown-item {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        text-align: center;
    }

    .upaep__countdown-time-unit {
        color: var(--upaep-countdown-time-unit-color);
        font-size: var(--upaep-countdown-time-unit-fz);
        font-weight: var(--upaep-countdown-time-unit-fw);
        line-height: 1em;

        &>* {
            height: 1em;
            display: inline-block;
            overflow-y: hidden
        }

        &:not(.is-more-time)>:before {
            font-family: var(--upaep-countdown-ff);
            content: "00\a 01\a 02\a 03\a 04\a 05\a 06\a 07\a 08\a 09\a 10\a 11\a 12\a 13\a 14\a 15\a 16\a 17\a 18\a 19\a 20\a 21\a 22\a 23\a 24\a 25\a 26\a 27\a 28\a 29\a 30\a 31\a 32\a 33\a 34\a 35\a 36\a 37\a 38\a 39\a 40\a 41\a 42\a 43\a 44\a 45\a 46\a 47\a 48\a 49\a 50\a 51\a 52\a 53\a 54\a 55\a 56\a 57\a 58\a 59\a 60\a 61\a 62\a 63\a 64\a 65\a 66\a 67\a 68\a 69\a 70\a 71\a 72\a 73\a 74\a 75\a 76\a 77\a 78\a 79\a 80\a 81\a 82\a 83\a 84\a 85\a 86\a 87\a 88\a 89\a 90\a 91\a 92\a 93\a 94\a 95\a 96\a 97\a 98\a 99\a 100\a 101\a 102\a 103\a 104\a 105\a 106\a 107\a 108\a 109\a 110\a 111\a 112\a 113\a 114\a 115\a 116\a 117\a 118\a 119\a 120\a 121\a 122\a 123\a 124\a 125\a 126\a 127\a 128\a 129\a 130\a 131\a 132\a 133\a 134\a 135\a 136\a 137\a 138\a 139\a 140\a 141\a 142\a 143\a 144\a 145\a 146\a 147\a 148\a 149\a 150\a 151\a 152\a 153\a 154\a 155\a 156\a 157\a 158\a 159\a 160\a 161\a 162\a 163\a 164\a 165\a 166\a 167\a 168\a 169\a 170\a 171\a 172\a 173\a 174\a 175\a 176\a 177\a 178\a 179\a 180\a 181\a 182\a 183\a 184\a 185\a 186\a 187\a 188\a 189\a 190\a 191\a 192\a 193\a 194\a 195\a 196\a 197\a 198\a 199\a 200\a 201\a 202\a 203\a 204\a 205\a 206\a 207\a 208\a 209\a 210\a 211\a 212\a 213\a 214\a 215\a 216\a 217\a 218\a 219\a 220\a 221\a 222\a 223\a 224\a 225\a 226\a 227\a 228\a 229\a 230\a 231\a 232\a 233\a 234\a 235\a 236\a 237\a 238\a 239\a 240\a 241\a 242\a 243\a 244\a 245\a 246\a 247\a 248\a 249\a 250\a 251\a 252\a 253\a 254\a 255\a 256\a 257\a 258\a 259\a 260\a 261\a 262\a 263\a 264\a 265\a 266\a 267\a 268\a 269\a 270\a 271\a 272\a 273\a 274\a 275\a 276\a 277\a 278\a 279\a 280\a 281\a 282\a 283\a 284\a 285\a 286\a 287\a 288\a 289\a 290\a 291\a 292\a 293\a 294\a 295\a 296\a 297\a 298\a 299\a 300\a 301\a 302\a 303\a 304\a 305\a 306\a 307\a 308\a 309\a 310\a 311\a 312\a 313\a 314\a 315\a 316\a 317\a 318\a 319\a 320\a 321\a 322\a 323\a 324\a 325\a 326\a 327\a 328\a 329\a 330\a 331\a 332\a 333\a 334\a 335\a 336\a 337\a 338\a 339\a 340\a 341\a 342\a 343\a 344\a 345\a 346\a 347\a 348\a 349\a 350\a 351\a 352\a 353\a 354\a 355\a 356\a 357\a 358\a 359\a 360\a 361\a 362\a 363\a 364\a 365\a 366\a";
            white-space: pre;
            top: calc(var(--upaep-countdown-time)*-1em);
            text-align: center;
            transition: all 1s cubic-bezier(1, 0, 0, 1);
            position: relative
        }
    }

    .upaep__countdown-time-label {
        color: var(--upaep-countdown-time-label-color);
        font-size: var(--upaep-countdown-time-label-fz);
        font-weight: var(--upaep-countdown-time-label-fw);
    }

    .upaep__countdown-timezone {
        color: var(--upaep-countdown-timezone-color);
        font-size: var(--upaep-countdown-timezone-fz);
        font-weight: var(--upaep-countdown-timezone-fw);
        text-align: center;
    }

    .upaep__countdown-message {
        color: var(--upaep-countdown-message-color);
        font-size: var(--upaep-countdown-message-fz);
        font-weight: var(--upaep-countdown-message-fw);
        text-align: center;
        animation: var(--upaep-countdown-message-animation);
    }
}

/*? ------ SelectFilters ------ */
.upaep__selectfilters {
    --upaep-selectfilters-width: 100%;
    --upaep-selectfilters-height: auto;
    --upaep-selectfilters-margin: .5rem 0;
    --upaep-selectfilters-padding: 0;
    --upaep-selectfilters-boxshadow: 0 0 0 0.25rem var(--ui-control-ring, rgba(82, 86, 90, 0.25));
    --upaep-selectfilters-border-radius: 10px;
    --upaep-selectfilters-content-width: 100%;
    --upaep-selectfilters-content-height: auto;
    --upaep-selectfilters-content-margin: 5px 0;
    --upaep-selectfilters-content-padding: .5rem;
    --upaep-selectfilters-content-border-size: 2px;
    --upaep-selectfilters-content-border-style: solid;
    --upaep-selectfilters-content-border-color: var(--upaep-color-border-grey);
    --upaep-selectfilters-content-border-radius: 10px;
    --upaep-selectfilters-content-bg: var(--upaep-color-white);
    --upaep-selectfilters-item-width: 100%;
    --upaep-selectfilters-item-height: auto;
    --upaep-selectfilters-item-padding: .5rem 1rem;
    --upaep-selectfilters-item-color: var(--upaep-color-dark-grey);
    --upaep-selectfilters-header-fz: var(--upaep-fz14);
    --upaep-selectfilters-header-fw: var(--upaep-fw-bold);
    --upaep-selectfilters-header-color: var(--upaep-color-dark-grey);
    --upaep-selectfilters-hover-bg-after: rgba(0, 0, 0, 0.1);
    --upaep-selectfilters-btn-mark-size: .45rem;
    --upaep-selectfilters-btn-mark-color: ;
    --upaep-selectfilters-btn-padding: 0 1rem 0 1rem;
    --upaep-selectfilters-btn-bg: var(--upaep-color-white);
    --upaep-selectfilters-btn-color: var(--upaep-color-dark-grey);
    --upaep-selectfilters-btn-fw: var(--upaep-fw-normal);
    --upaep-selectfilters-btn-fz: var(--upaep-fz14);
    --upaep-selectfilters-btn-border-radius: 10px;
    --upaep-selectfilters-btn-border-size: 2px;
    --upaep-selectfilters-btn-border-color: var(--upaep-color-border-grey);
    --upaep-selectfilters-btn-selected-bg: var(--upaep-color-white);
    --upaep-selectfilters-btn-selected-color: var(--upaep-color-dark-grey);
    --upaep-selectfilters-btn-selected-fz: var(--upaep-fz14);
    --upaep-selectfilters-btn-selected-fw: var(--upaep-fw-normal);
    --upaep-selectfilters-btn-selected-border-color: ;

    width: var(--upaep-selectfilters-width);
    height: var(--upaep-selectfilters-height);
    margin: var(--upaep-selectfilters-margin);
    padding: var(--upaep-selectfilters-padding);
    border-radius: var(--upaep-selectfilters-border-radius);
    min-height: 2.65rem;
    position: relative;

    &:hover .upaep__selectfilters-btn .upaep__btn:focus {
        box-shadow: var(--upaep-selectfilters-boxshadow);
    }

    &.__disabled {
        opacity: .5;
        pointer-events: none;
    }

    &:has(select:disabled) {
        opacity: .5;
        pointer-events: none;

        .upaep__selectfilters-btn .upaep__btn {
            --upaep-btn-bg: var(--upaep-color-background);
        }
    }

    &:has(select.__rounded) {
        .upaep__selectfilters-btn .upaep__btn {
            --upaep-btn-border-radius: 50px;
        }
    }

    &>select,
    &>input {
        display: none;
    }

    & small {
        margin: 0 .5rem;
        opacity: .8;
    }

    & .upaep__selectfilters-overlay {
        width: 100%;
        height: auto;
        border-radius: 10px;
    }

    & .upaep__selectfilters-btn {
        width: 100%;
        height: auto;
        border-radius: 10px;
        position: relative;
    }

    &:not(.is-show) .upaep__btn .__close {
        display: none;
    }

    &.is-show .upaep__btn .__open {
        display: none;
    }

    & .upaep__selectfilters-content {
        width: var(--upaep-selectfilters-content-width);
        height: var(--upaep-selectfilters-content-height);
        margin: var(--upaep-selectfilters-content-margin);
        padding: var(--upaep-selectfilters-content-padding);
        border: var(--upaep-selectfilters-content-border-size) var(--upaep-selectfilters-content-border-style) var(--upaep-selectfilters-content-border-color);
        border-radius: var(--upaep-selectfilters-content-border-radius);
        background: var(--upaep-selectfilters-content-bg);
        position: absolute;
        z-index: var(--upaep-zindex-selectfilters);
        transition: height .5s;
        animation: a_fadeIn .5s forwards;

        & .upaep__selectfilters-header {
            width: 100%;
            min-height: 40px;
            height: auto;
            border-bottom: 1px solid var(--upaep-color-border-grey);
            display: flex;
            align-items: center;
            justify-content: space-between;

            &>* {
                font-size: var(--upaep-selectfilters-header-fz);
                font-weight: var(--upaep-selectfilters-header-fw);
                color: var(--upaep-selectfilters-header-color);
            }

            & span {
                padding: 0 1rem;
            }

            & i {
                padding: 0 1rem;
                cursor: pointer;
            }
        }

        .upaep__selectfilters-header-mark {
            position: relative;

            &::after {
                content: "";
                position: absolute;
                display: block;
                inset: 50% auto auto 50%;
                transform: translate(-50%, -50%);
                border-radius: 50px;
                background-color: transparent;
                pointer-events: none;
                width: calc(var(--upaep-selectfilters-header-fz) + 5px);
                height: calc(var(--upaep-selectfilters-header-fz) + 5px);
            }

            &:hover::after {
                transition: background-color .2s cubic-bezier(.05, 0, 0, 1);
                background-color: var(--upaep-selectfilters-hover-bg-after);
            }
        }

        .upaep__selectfilters-items {
            padding: 0 0 0 .25rem;
        }

        .upaep__selectfilters-item {
            width: var(--upaep-selectfilters-item-width);
            height: var(--upaep-selectfilters-item-height);
            padding: var(--upaep-selectfilters-item-padding);
            color: var(--upaep-selectfilters-item-color);
            min-height: 35px;
            align-items: center;
            word-wrap: break-word;
            word-break: break-word;

            /*? el feedback vive dentro del item, no como hermano: la regla genérica no lo alcanza */
            &.is-invalid .upaep__feedback.__invalid {
                display: block;
            }

        }

    }

    &:not(.is-show) .upaep__selectfilters-content {
        display: none;
    }

    &.is-selected {
        .upaep__selectfilters-btn .upaep__btn {
            --upaep-btn-bg: var(--upaep-selectfilters-btn-selected-bg);
            --upaep-btn-color: var(--upaep-selectfilters-btn-selected-color);
            --upaep-btn-fz: var(--upaep-selectfilters-btn-selected-fz);
            --upaep-btn-cont-fz: var(--upaep-selectfilters-btn-selected-fz);
            --upaep-btn-fw: var(--upaep-selectfilters-btn-selected-fw);
            --upaep-btn-cont-fw: var(--upaep-selectfilters-btn-selected-fw);
            --upaep-btn-border-color: var(--upaep-selectfilters-btn-selected-border-color);
            --upaep-btn-hover-bg: var(--upaep-selectfilters-btn-selected-bg);
            --upaep-btn-hover-color: var(--upaep-selectfilters-btn-selected-color);
            --upaep-btn-hover-fz: var(--upaep-selectfilters-btn-selected-fz);
            --upaep-btn-hover-cont-fz: var(--upaep-selectfilters-btn-selected-fz);
            --upaep-btn-hover-fw: var(--upaep-selectfilters-btn-selected-fw);
            --upaep-btn-hover-cont-fw: var(--upaep-selectfilters-btn-selected-fw);
            --upaep-btn-hover-border-color: var(--upaep-selectfilters-btn-selected-border-color);
        }

    }

    &.__clear-selection {
        &:has(.upaep__selectfilters-item.is-selected) {
            .upaep__selectfilters-btn .upaep__btn::after {
                display: none;
            }
        }

        &:not(.is-selected) {
            .upaep__selectfilters-clear {
                display: none;
            }
        }

        .upaep__selectfilters-clear {
            width: 30px;
            height: 30px;
            padding: .5rem;
            border-radius: 5px;
            position: absolute;
            inset: 50% 0 auto calc(100% - 70px);
            translate: 0 -50%;
            z-index: 10;
            align-items: center;
            justify-content: center;
        }

        .upaep__selectfilters-clear-mark {
            position: relative;

            &::after {
                content: "";
                position: absolute;
                display: block;
                inset: 50% auto auto 50%;
                transform: translate(-50%, -50%);
                border-radius: 50px;
                background-color: transparent;
                pointer-events: none;
                width: calc(16px + 5px);
                height: calc(16px + 5px);
            }

            &:hover::after {
                transition: background-color .2s cubic-bezier(.05, 0, 0, 1);
                background-color: var(--upaep-selectfilters-hover-bg-after);
            }
        }
    }


}

.upaep__selectfilters-btn .upaep__btn {
    --upaep-btn-width: 100%;
    --upaep-btn-border-radius: var(--upaep-selectfilters-btn-border-radius);
    --upaep-btn-border-size: var(--upaep-selectfilters-btn-border-size);
    --upaep-btn-hover-border-size: var(--upaep-selectfilters-btn-border-size);
    --upaep-btn-border-color: var(--upaep-selectfilters-btn-border-color);
    --upaep-btn-bg: var(--upaep-selectfilters-btn-bg);
    --upaep-btn-padding: var(--upaep-selectfilters-btn-padding);
    --upaep-btn-margin: 0;
    --upaep-btn-fw: var(--upaep-fw-bold);
    --upaep-btn-color: var(--upaep-selectfilters-btn-color);
    --upaep-btn-cont-fz: var(--upaep-selectfilters-btn-fz);
    --upaep-btn-cont-fw: var(--upaep-selectfilters-btn-fw);
    --upaep-btn-hover-bg: var(--upaep-selectfilters-btn-selected-bg);
    --upaep-btn-hover-color: var(--upaep-selectfilters-btn-selected-color);
    --upaep-btn-hover-fz: var(--upaep-selectfilters-btn-selected-fz);
    --upaep-btn-hover-cont-fz: var(--upaep-selectfilters-btn-selected-fz);
    --upaep-btn-hover-fw: var(--upaep-selectfilters-btn-selected-fw);
    --upaep-btn-hover-cont-fw: var(--upaep-selectfilters-btn-selected-fw);
    --upaep-btn-hover-border-color: var(--upaep-selectfilters-btn-selected-border-color);
    --upaep-btn-disabled-bg: var(--upaep-color-background);
    --upaep-btn-disabled-border-color: var(--upaep-color-background);
    --upaep-selectfilters-btn-mark-size: .45rem;
    --upaep-selectfilters-btn-mark-color: ;
    min-height: 2.45rem;
    position: relative;

    & span {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: start;
        align-items: center;
        padding: 0 1rem 0 0;
        overflow: hidden;
        gap: .5rem;
    }

    &::after {
        display: inline-block;
        margin-left: 0.255em;
        vertical-align: 0.255em;
        content: "";
        border-top: var(--upaep-selectfilters-btn-mark-size) solid var(--upaep-selectfilters-btn-mark-color);
        border-right: var(--upaep-selectfilters-btn-mark-size) solid transparent;
        border-bottom: 0;
        border-left: var(--upaep-selectfilters-btn-mark-size) solid transparent;
        transition: all .5s;
    }
}

.upaep__selectfilters.__rounded .upaep__selectfilters-btn .upaep__btn {
    --upaep-btn-border-radius: 50px;
}

.upaep__selectfilters.is-show .upaep__selectfilters-btn .upaep__btn::after {
    transform: rotate(-180deg);
}

@media (prefers-reduced-motion: reduce) {

    .upaep__selectfilters .upaep__selectfilters-content {
        animation: none;
    }
}

.was-validated,
.__validated {
    .upaep__selectfilters {
        &:has(>input:valid) {
            --upaep-selectfilters-boxshadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.25);

            .upaep__selectfilters-btn .upaep__btn {
                --upaep-btn-border-color: var(--upaep-color-success);
                --upaep-btn-hover-border-color: var(--upaep-color-success);
                background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjZThlYWVkIj48cGF0aCBkPSJtNDI0LTI5NiAyODItMjgyLTU2LTU2LTIyNiAyMjYtMTE0LTExNC01NiA1NiAxNzAgMTcwWm01NiAyMTZxLTgzIDAtMTU2LTMxLjVUMTk3LTE5N3EtNTQtNTQtODUuNS0xMjdUODAtNDgwcTAtODMgMzEuNS0xNTZUMTk3LTc2M3E1NC01NCAxMjctODUuNVQ0ODAtODgwcTgzIDAgMTU2IDMxLjVUNzYzLTc2M3E1NCA1NCA4NS41IDEyN1Q4ODAtNDgwcTAgODMtMzEuNSAxNTZUNzYzLTE5N3EtNTQgNTQtMTI3IDg1LjVUNDgwLTgwWm0wLTgwcTEzNCAwIDIyNy05M3Q5My0yMjdxMC0xMzQtOTMtMjI3dC0yMjctOTNxLTEzNCAwLTIyNyA5M3QtOTMgMjI3cTAgMTM0IDkzIDIyN3QyMjcgOTNabTAtMzIwWiIgZmlsbD0iIzI4YTc0NSIvPjwvc3ZnPg==);
                background-repeat: no-repeat;
                background-position: right calc(0.375em + 0.1875rem) center;
                background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);

                &::after {
                    margin: 0 1rem 0 0;
                }
            }
        }

        &:has(>input:invalid) {
            --upaep-selectfilters-boxshadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);

            .upaep__selectfilters-btn .upaep__btn {
                --upaep-btn-border-color: var(--upaep-color-error);
                --upaep-btn-hover-border-color: var(--upaep-color-error);
                background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjZThlYWVkIj48cGF0aCBkPSJNNDgwLTI4MHExNyAwIDI4LjUtMTEuNVQ1MjAtMzIwcTAtMTctMTEuNS0yOC41VDQ4MC0zNjBxLTE3IDAtMjguNSAxMS41VDQ0MC0zMjBxMCAxNyAxMS41IDI4LjVUNDgwLTI4MFptLTQwLTE2MGg4MHYtMjQwaC04MHYyNDBabTQwIDM2MHEtODMgMC0xNTYtMzEuNVQxOTctMTk3cS01NC01NC04NS41LTEyN1Q4MC00ODBxMC04MyAzMS41LTE1NlQxOTctNzYzcTU0LTU0IDEyNy04NS41VDQ4MC04ODBxODMgMCAxNTYgMzEuNVQ3NjMtNzYzcTU0IDU0IDg1LjUgMTI3VDg4MC00ODBxMCA4My0zMS41IDE1NlQ3NjMtMTk3cS01NCA1NC0xMjcgODUuNVQ0ODAtODBabTAtODBxMTM0IDAgMjI3LTkzdDkzLTIyN3EwLTEzNC05My0yMjd0LTIyNy05M3EtMTM0IDAtMjI3IDkzdC05MyAyMjdxMCAxMzQgOTMgMjI3dDIyNyA5M1ptMC0zMjBaIiBmaWxsPSIjZGMzNTQ1Ii8+PC9zdmc+");
                background-repeat: no-repeat;
                background-position: right calc(0.375em + 0.1875rem) center;
                background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);

                &::after {
                    margin: 0 1rem 0 0;
                }
            }
        }
    }
}

/*? ------ News ------ */

/*? ------ Utilities ------ */
.__text-red {
    color: var(--ui-accent, var(--upaep-color-red));
}

.__text-cherry {
    color: var(--upaep-color-cherry);
}

.__text-grey {
    color: var(--upaep-color-grey);
}

.__text-light-grey {
    color: var(--upaep-color-light-grey);
}

.__text-dark-grey {
    color: var(--upaep-color-dark-grey);
}

.__text-blue-primary {
    color: var(--upaep-color-blue-primary);
}

.__text-blue-primary-hover {
    color: var(--upaep-color-blue-primary-hover);
}

.__text-yellow-primary {
    color: var(--upaep-color-yellow-primary);
}

.__text-gold {
    color: var(--upaep-color-gold);
}

.__text-background {
    color: var(--upaep-color-background);
}

.__text-tenue-gray {
    color: var(--upaep-color-tenue-gray);
}

.__text-ingenierias {
    color: var(--upaep-color-ingenierias);
}

.__text-economico-administrativas {
    color: var(--upaep-color-economico-administrativas);
}

.__text-negocios {
    color: var(--upaep-color-negocios);
}

.__text-artes-humanidades {
    color: var(--upaep-color-artes-humanidades);
}

.__text-ciencias-creativas,
.__text-ciecnias-creativas {
    color: var(--upaep-color-ciecnias-creativas);
}

.__text-ciencias-humanas-sociales,
.__text-ciecnias-humanas-sociales {
    color: var(--upaep-color-ciecnias-humanas-sociales);
}

.__text-ciencias-sociales {
    color: var(--upaep-color-ciencias-sociales);
}

.__text-ciencias-biologicas {
    color: var(--upaep-color-ciencias-biologicas);
}

.__text-ciencias-vida-salud {
    color: var(--upaep-color-ciencias-vida-salud);
}

.__text-ciencias-salud {
    color: var(--upaep-color-ciencias-salud);
}

.__text-ciencias-medicas {
    color: var(--upaep-color-ciencias-medicas);
}

.__text-lenguas-cultura {
    color: var(--upaep-color-lenguas-cultura);
}

.__text-error-light {
    color: var(--upaep-color-error-light);
}

.__text-success-light {
    color: var(--upaep-color-success-light);
}

.__text-warning-light {
    color: var(--upaep-color-warning-light);
}

.__text-error {
    color: var(--ui-danger, var(--upaep-color-error));
}

.__text-success {
    color: var(--ui-success, var(--upaep-color-success));
}

.__text-warning {
    color: var(--ui-warning, var(--upaep-color-warning));
}

.__text-white {
    color: var(--upaep-color-white);
}

.__text-black {
    color: var(--upaep-color-black);
}

.__text-primary {
    color: var(--ui-primary, var(--upaep-color-primary));
}

.__text-secondary {
    color: var(--ui-secondary, var(--upaep-color-secondary));
}

.__text-tertiary {
    color: var(--ui-tertiary, var(--upaep-color-tertiary));
}

.__text-disabled,
.__text-dissabled {
    color: var(--upaep-color-dissabled);
}

.__text-disabled-red,
.__text-dissabled-red {
    color: var(--upaep-color-dissabled-red);
}

.__text-disabled-error,
.__text-dissabled-error {
    color: var(--upaep-color-dissabled-error);
}

.__text-disabled-yellow,
.__text-dissabled-yellow {
    color: var(--upaep-color-dissabled-yellow);
}

.__text-disabled-warning,
.__text-dissabled-warning {
    color: var(--upaep-color-dissabled-warning);
}

.__text-disabled-success,
.__text-dissabled-success {
    color: var(--upaep-color-dissabled-success);
}

.__text-none {
    color: var(--upaep-color-none);
}

.__text-gradient {
    background: linear-gradient(180deg, #FF000A 19.77%, #9A1C9F 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

.__bg-red {
    background-color: var(--ui-accent, var(--upaep-color-red));
}

.__bg-cherry {
    background-color: var(--upaep-color-cherry);
}

.__bg-grey {
    background-color: var(--upaep-color-grey);
}

.__bg-light-grey {
    background-color: var(--upaep-color-light-grey);
}

.__bg-dark-grey {
    background-color: var(--upaep-color-dark-grey);
}

.__bg-blue-primary {
    background-color: var(--upaep-color-blue-primary);
}

.__bg-blue-primary-hover {
    background-color: var(--upaep-color-blue-primary-hover);
}

.__bg-yellow-primary {
    background-color: var(--upaep-color-yellow-primary);
}

.__bg-gold {
    background-color: var(--upaep-color-gold);
}

.__bg-background {
    background-color: var(--upaep-color-background);
}

.__bg-tenue-gray {
    background-color: var(--upaep-color-tenue-gray);
}

.__bg-ingenierias {
    background-color: var(--upaep-color-ingenierias);
}

.__bg-economico-administrativas {
    background-color: var(--upaep-color-economico-administrativas);
}

.__bg-negocios {
    background-color: var(--upaep-color-negocios);
}

.__bg-artes-humanidades {
    background-color: var(--upaep-color-artes-humanidades);
}

.__bg-ciencias-creativas,
.__bg-ciecnias-creativas {
    background-color: var(--upaep-color-ciecnias-creativas);
}

.__bg-ciencias-humanas-sociales,
.__bg-ciecnias-humanas-sociales {
    background-color: var(--upaep-color-ciecnias-humanas-sociales);
}

.__bg-ciencias-sociales {
    background-color: var(--upaep-color-ciencias-sociales);
}

.__bg-ciencias-biologicas {
    background-color: var(--upaep-color-ciencias-biologicas);
}

.__bg-ciencias-vida-salud {
    background-color: var(--upaep-color-ciencias-vida-salud);
}

.__bg-ciencias-salud {
    background-color: var(--upaep-color-ciencias-salud);
}

.__bg-ciencias-medicas {
    background-color: var(--upaep-color-ciencias-medicas);
}

.__bg-lenguas-cultura {
    background-color: var(--upaep-color-lenguas-cultura);
}

.__bg-error-light {
    background-color: var(--upaep-color-error-light);
}

.__bg-error-hover-light {
    background-color: var(--upaep-color-error-hover-light);
}

.__bg-success-light {
    background-color: var(--upaep-color-success-light);
}

.__bg-success-hover-light {
    background-color: var(--upaep-color-success-hover-light);
}

.__bg-warning-light {
    background-color: var(--upaep-color-warning-light);
}

.__bg-warning-hover-light {
    background-color: var(--upaep-color-warning-hover-light);
}

.__bg-error {
    background-color: var(--ui-danger, var(--upaep-color-error));
}

.__bg-error-hover {
    background-color: var(--ui-danger-hover, var(--upaep-color-error-hover));
}

.__bg-success {
    background-color: var(--ui-success, var(--upaep-color-success));
}

.__bg-success-hover {
    background-color: var(--ui-success-hover, var(--upaep-color-success-hover));
}

.__bg-warning {
    background-color: var(--ui-warning, var(--upaep-color-warning));
}

.__bg-warning-hover {
    background-color: var(--ui-warning-hover, var(--upaep-color-warning-hover));
}

.__bg-white {
    background-color: var(--upaep-color-white);
}

.__bg-white-hover {
    background-color: var(--upaep-color-white-hover);
}

.__bg-black {
    background-color: var(--upaep-color-black);
}

.__bg-primary {
    background-color: var(--ui-primary, var(--upaep-color-primary));
}

.__bg-primary-hover {
    background-color: var(--ui-primary-hover, var(--upaep-color-primary-hover));
}

.__bg-secondary {
    background-color: var(--ui-secondary, var(--upaep-color-secondary));
}

.__bg-secondary-hover {
    background-color: var(--ui-secondary-hover, var(--upaep-color-secondary-hover));
}

.__bg-tertiary {
    background-color: var(--ui-tertiary, var(--upaep-color-tertiary));
}

.__bg-tertiary-hover {
    background-color: var(--ui-tertiary-hover, var(--upaep-color-tertiary-hover));
}

.__bg-whats {
    background-color: var(--upaep-color-whats);
}

.__bg-disabled,
.__bg-dissabled {
    background-color: var(--upaep-color-dissabled);
}

.__bg-disabled-red,
.__bg-dissabled-red {
    background-color: var(--upaep-color-dissabled-red);
}

.__bg-disabled-error,
.__bg-dissabled-error {
    background-color: var(--upaep-color-dissabled-error);
}

.__bg-disabled-yellow,
.__bg-dissabled-yellow {
    background-color: var(--upaep-color-dissabled-yellow);
}

.__bg-disabled-warning,
.__bg-dissabled-warning {
    background-color: var(--upaep-color-dissabled-warning);
}

.__bg-disabled-success,
.__bg-dissabled-success {
    background-color: var(--upaep-color-dissabled-success);
}

.__bg-border-red {
    background-color: var(--upaep-color-border-red);
}

.__bg-border-grey {
    background-color: var(--upaep-color-border-grey);
}

.__bg-border-grey-icon {
    background-color: var(--upaep-color-border-grey-icon);
}

.__bg-border-disabled,
.__bg-border-dissabled {
    background-color: var(--upaep-color-border-dissabled);
}

.__bg-border-error {
    background-color: var(--upaep-color-border-error);
}

.__bg-border-warning {
    background-color: var(--upaep-color-border-warning);
}

.__bg-none {
    background-color: var(--upaep-color-none);
}

.__ratio {
    --ratio-aspect: ;
    position: relative;
    width: 100%;

    &::before {
        display: block;
        padding-top: var(--ratio-aspect);
        content: "";
    }

    >* {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    &.__1x1,
    &.__ratio-1x1 {
        --ratio-aspect: 100%;
    }

    &.__2x1,
    &.__ratio-2x1 {
        --ratio-aspect: 50%;
    }

    &.__4x3,
    &.__ratio-4x3 {
        --ratio-aspect: 75%;
    }

    &.__16x9,
    &.__ratio-16x9 {
        --ratio-aspect: 56.25%;
    }

    &.__21x9,
    &.__ratio-21x9 {
        --ratio-aspect: 42.8571428571%;
    }
}

.__fixed {
    --fixed-inset: ;
    --fixed-zindex: var(--upaep-zindex-fixed);
    position: fixed;
    inset: var(--fixed-inset);
    z-index: var(--fixed-zindex);

    &.__top,
    &.__fixed-top {
        --fixed-inset: 0 0 auto 0;
    }

    &.__bottom,
    &.__fixed-bottom {
        --fixed-inset: auto 0 0 0;
    }
}

.__sticky {
    --sticky-inset: ;
    --sticky-zindex: var(--upaep-zindex-sticky);
    position: sticky;
    inset: var(--sticky-inset);
    z-index: var(--sticky-zindex);

    &.__top,
    &.__sticky-top {
        --sticky-inset: 0 0 auto 0;
    }

    &.__bottom,
    &.__sticky-bottom {
        --sticky-inset: auto 0 0 0;
    }
}

.__absolute {
    --absolute-inset: ;
    --absolute-zindex: 1010;
    position: absolute;
    inset: var(--absolute-inset);
    z-index: var(--absolute-zindex);

    &.__top,
    &.__absolute-top {
        --absolute-inset: 0 0 auto 0;
    }

    &.__bottom,
    &.__absolute-bottom {
        --absolute-inset: auto 0 0 0;
    }
}

.__hstack {
    display: flex;
    flex-direction: row;
    align-items: center;
    align-self: stretch;
}

.__vstack {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-self: stretch;
}

.__text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.__vr,
.upaep__line-vertical {
    --upaep-vr-width: auto;
    --upaep-vr-height: auto;
    --upaep-vr-padding: 0;
    --upaep-vr-margin: 0;
    --upaep-vr-bg: currentcolor;
    --upaep-vr-opacity: .25;
    width: var(--upaep-vr-width);
    height: var(--upaep-vr-height);
    padding: var(--upaep-vr-padding);
    margin: var(--upaep-vr-margin);
    background: var(--upaep-vr-bg);
    opacity: var(--upaep-vr-opacity);
    display: inline-block;
    align-self: stretch;
    min-height: 1em;
}

.__hidden,
.__hidden:not(:focus):not(:focus-within) {
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.__hidden:not(caption),
.__hidden:not(:focus):not(:focus-within):not(caption) {
    position: absolute !important;
}

.__align-baseline {
    vertical-align: baseline !important;
}

.__align-top {
    vertical-align: top !important;
}

.__align-middle {
    vertical-align: middle !important;
}

.__align-bottom {
    vertical-align: bottom !important;
}

.__align-text-bottom {
    vertical-align: text-bottom !important;
}

.__align-text-top {
    vertical-align: text-top !important;
}

.__float-start {
    float: left !important;
}

.__float-end {
    float: right !important;
}

.__float-none {
    float: none !important;
}


.__objectfit-contain {
    object-fit: contain !important;
}

.__objectfit-cover {
    object-fit: cover !important;
}

.__objectfit-fill {
    object-fit: fill !important;
}

.__objectfit-scale {
    object-fit: scale-down !important;
}

.__objectfit-none {
    object-fit: none !important;
}

.__opacity-0 {
    opacity: 0 !important;
}

.__opacity-25 {
    opacity: 0.25 !important;
}

.__opacity-50 {
    opacity: 0.5 !important;
}

.__opacity-75 {
    opacity: 0.75 !important;
}

.__opacity-100 {
    opacity: 1 !important;
}

.__overflow-auto {
    overflow: auto !important;
}

.__overflow-hidden {
    overflow: hidden !important;
}

.__overflow-visible {
    overflow: visible !important;
}

.__overflow-scroll {
    overflow: scroll !important;
}

.__overflow-x-auto {
    overflow-x: auto !important;
}

.__overflow-x-hidden {
    overflow-x: hidden !important;
}

.__overflow-x-visible {
    overflow-x: visible !important;
}

.__overflow-x-scroll {
    overflow-x: scroll !important;
}

.__overflow-y-auto {
    overflow-y: auto !important;
}

.__overflow-y-hidden {
    overflow-y: hidden !important;
}

.__overflow-y-visible {
    overflow-y: visible !important;
}

.__overflow-y-scroll {
    overflow-y: scroll !important;
}

.__d-inline {
    display: inline !important;
}

.__d-inline-block {
    display: inline-block !important;
}

.__d-block {
    display: block !important;
}

.__d-grid {
    display: grid !important;
}

.__d-inline-grid {
    display: inline-grid !important;
}

.__d-table {
    display: table !important;
}

.__d-table-row {
    display: table-row !important;
}

.__d-table-cell {
    display: table-cell !important;
}

.__d-flex {
    display: flex !important;
}

.__d-inline-flex {
    display: inline-flex !important;
}

.__d-none {
    display: none !important;
}

.__position-static {
    position: static !important;
}

.__position-relative {
    position: relative !important;
}

.__position-absolute {
    position: absolute !important;
}

.__position-fixed {
    position: fixed !important;
}

.__position-sticky {
    position: sticky !important;
}

.__inset {
    --inset: 0;
    inset: var(--inset);

    &.__top-0 {
        --inset: 0 auto auto auto !important;
    }

    &.__top-50 {
        --inset: 50% auto auto auto !important;
    }

    &.__top-100 {
        --inset: 100% auto auto auto !important;
    }

    &.__bottom-0 {
        --inset: auto auto 0 auto !important;
    }

    &.__bottom-50 {
        --inset: auto auto 50% auto !important;
    }

    &.__bottom-100 {
        --inset: auto auto 100% auto !important;
    }

    &.__start-0 {
        --inset: auto auto auto 0 !important;
    }

    &.__start-50 {
        --inset: auto auto auto 50% !important;
    }

    &.__start-100 {
        --inset: auto auto auto 100% !important;
    }

    &.__end-0 {
        --inset: auto 0 auto auto !important;
    }

    &.__end-50 {
        --inset: auto 50% auto auto !important;
    }

    &.__end-100 {
        --inset: auto 100% auto auto !important;
    }
}

.__translate-middle {
    transform: translate(-50%, -50%) !important;
}

.__translate-middle-x {
    transform: translateX(-50%) !important;
}

.__translate-middle-y {
    transform: translateY(-50%) !important;
}

.__border {
    --border-size: 1px;
    --border-style: solid;
    --border-color: var(--upaep-color-border-grey);
    border: var(--border-size) var(--border-style) var(--border-color) !important;
}

.__border-0 {
    border: 0 !important;
}

.__border-top {
    --border-top-size: 1px;
    --border-top-style: solid;
    --border-top-color: var(--upaep-color-border-grey);
    border-top: var(--border-size) var(--border-style) var(--border-color) !important;
}

.__border-top-0 {
    border-top: 0 !important;
}

.__border-bottom {
    --border-bottom-size: 1px;
    --border-bottom-style: solid;
    --border-bottom-color: var(--upaep-color-border-grey);
    border-bottom: var(--border-size) var(--border-style) var(--border-color) !important;
}

.__border-bottom-0 {
    border-bottom: 0 !important;
}

.__border-end {
    --border-end-size: 1px;
    --border-end-style: solid;
    --border-end-color: var(--upaep-color-border-grey);
    border-right: var(--border-size) var(--border-style) var(--border-color) !important;
}

.__border-end-0 {
    border-right: 0 !important;
}

.__border-start {
    --border-start-size: 1px;
    --border-start-style: solid;
    --border-start-color: var(--upaep-color-border-grey);
    border-left: var(--border-size) var(--border-style) var(--border-color) !important;
}

.__border-start-0 {
    border-left: 0 !important;
}

.__border-1 {
    border-width: 1px !important;
}

.__border-2 {
    border-width: 2px !important;
}

.__border-3 {
    border-width: 3px !important;
}

.__border-4 {
    border-width: 4px !important;
}

.__border-5 {
    border-width: 5px !important;
}

.__w-25 {
    width: 25% !important;
}

.__w-50 {
    width: 50% !important;
}

.__w-75 {
    width: 75% !important;
}

.__w-100 {
    width: 100% !important;
}

.__w-auto {
    width: auto !important;
}

.__max-w-100 {
    max-width: 100% !important;
}

.__vw-100 {
    width: 100dvw !important;
}

.__min-vw-100 {
    min-width: 100dvw !important;
}

.__h-25 {
    height: 25% !important;
}

.__h-50 {
    height: 50% !important;
}

.__h-75 {
    height: 75% !important;
}

.__h-100 {
    height: 100% !important;
}

.__h-auto {
    height: auto !important;
}

.__max-h-100 {
    max-height: 100% !important;
}

.__vh-100 {
    height: 100dvh !important;
}

.__min-vh-100 {
    min-height: 100dvh !important;
}

.__flex-fill {
    flex: 1 1 auto !important;
}

.__flex-row {
    flex-direction: row !important;
}

.__flex-column {
    flex-direction: column !important;
}

.__flex-row-reverse {
    flex-direction: row-reverse !important;
}

.__flex-column-reverse {
    flex-direction: column-reverse !important;
}

.__flex-grow-0 {
    flex-grow: 0 !important;
}

.__flex-grow-1 {
    flex-grow: 1 !important;
}

.__flex-shrink-0 {
    flex-shrink: 0 !important;
}

.__flex-shrink-1 {
    flex-shrink: 1 !important;
}

.__flex-wrap {
    flex-wrap: wrap !important;
}

.__flex-nowrap {
    flex-wrap: nowrap !important;
}

.__flex-wrap-reverse {
    flex-wrap: wrap-reverse !important;
}

.__justify-content-start {
    justify-content: flex-start !important;
}

.__justify-content-end {
    justify-content: flex-end !important;
}

.__justify-content-center {
    justify-content: center !important;
}

.__justify-content-between {
    justify-content: space-between !important;
}

.__justify-content-around {
    justify-content: space-around !important;
}

.__justify-content-evenly {
    justify-content: space-evenly !important;
}

.__align-items-start {
    align-items: flex-start !important;
}

.__align-items-end {
    align-items: flex-end !important;
}

.__align-items-center {
    align-items: center !important;
}

.__align-items-baseline {
    align-items: baseline !important;
}

.__align-items-stretch {
    align-items: stretch !important;
}

.__align-content-start {
    align-content: flex-start !important;
}

.__align-content-end {
    align-content: flex-end !important;
}

.__align-content-center {
    align-content: center !important;
}

.__align-content-between {
    align-content: space-between !important;
}

.__align-content-around {
    align-content: space-around !important;
}

.__align-content-stretch {
    align-content: stretch !important;
}

.__align-self-auto {
    align-self: auto !important;
}

.__align-self-start {
    align-self: flex-start !important;
}

.__align-self-end {
    align-self: flex-end !important;
}

.__align-self-center {
    align-self: center !important;
}

.__align-self-baseline {
    align-self: baseline !important;
}

.__align-self-stretch {
    align-self: stretch !important;
}

.__order-first {
    order: -1 !important;
}

.__order-0 {
    order: 0 !important;
}

.__order-1 {
    order: 1 !important;
}

.__order-2 {
    order: 2 !important;
}

.__order-3 {
    order: 3 !important;
}

.__order-4 {
    order: 4 !important;
}

.__order-5 {
    order: 5 !important;
}

.__order-last {
    order: 6 !important;
}


.__m-0 {
    margin: 0 !important;
}

.__m-1 {
    margin: 0.25rem !important;
}

.__m-2 {
    margin: 0.5rem !important;
}

.__m-3 {
    margin: 1rem !important;
}

.__m-4 {
    margin: 1.5rem !important;
}

.__m-5 {
    margin: 3rem !important;
}

.__m-auto {
    margin: auto !important;
}


.__mx-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.__mx-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
}

.__mx-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
}

.__mx-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
}

.__mx-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
}

.__mx-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
}

.__mx-auto {
    margin-right: auto !important;
    margin-left: auto !important;
}

.__my-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.__my-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
}

.__my-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

.__my-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}

.__my-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

.__my-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
}

.__my-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
}

.__mt-0 {
    margin-top: 0 !important;
}

.__mt-1 {
    margin-top: 0.25rem !important;
}

.__mt-2 {
    margin-top: 0.5rem !important;
}

.__mt-3 {
    margin-top: 1rem !important;
}

.__mt-4 {
    margin-top: 1.5rem !important;
}

.__mt-5 {
    margin-top: 3rem !important;
}

.__mt-auto {
    margin-top: auto !important;
}

.__me-0 {
    margin-right: 0 !important;
}

.__me-1 {
    margin-right: 0.25rem !important;
}

.__me-2 {
    margin-right: 0.5rem !important;
}

.__me-3 {
    margin-right: 1rem !important;
}

.__me-4,
.me-4 {
    margin-right: 1.5rem !important;
}

.__me-5 {
    margin-right: 3rem !important;
}

.__me-auto {
    margin-right: auto !important;
}

.__mb-0 {
    margin-bottom: 0 !important;
}

.__mb-1 {
    margin-bottom: 0.25rem !important;
}

.__mb-2 {
    margin-bottom: 0.5rem !important;
}

.__mb-3 {
    margin-bottom: 1rem !important;
}

.__mb-4 {
    margin-bottom: 1.5rem !important;
}

.__mb-5 {
    margin-bottom: 3rem !important;
}

.__mb-auto {
    margin-bottom: auto !important;
}

.__ms-0 {
    margin-left: 0 !important;
}

.__ms-1 {
    margin-left: 0.25rem !important;
}

.__ms-2 {
    margin-left: 0.5rem !important;
}

.__ms-3 {
    margin-left: 1rem !important;
}

.__ms-4 {
    margin-left: 1.5rem !important;
}

.__ms-5 {
    margin-left: 3rem !important;
}

.__ms-auto {
    margin-left: auto !important;
}

.__p-0 {
    padding: 0 !important;
}

.__p-1 {
    padding: 0.25rem !important;
}

.__p-2 {
    padding: 0.5rem !important;
}

.__p-3 {
    padding: 1rem !important;
}

.__p-4 {
    padding: 1.5rem !important;
}

.__p-5 {
    padding: 3rem !important;
}

.__px-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.__px-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
}

.__px-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
}

.__px-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
}

.__px-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
}

.__px-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
}

.__py-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.__py-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}

.__py-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

.__py-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

.__py-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

.__py-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

.__pt-0 {
    padding-top: 0 !important;
}

.__pt-1 {
    padding-top: 0.25rem !important;
}

.__pt-2 {
    padding-top: 0.5rem !important;
}

.__pt-3 {
    padding-top: 1rem !important;
}

.__pt-4 {
    padding-top: 1.5rem !important;
}

.__pt-5 {
    padding-top: 3rem !important;
}

.__pe-0 {
    padding-right: 0 !important;
}

.__pe-1 {
    padding-right: 0.25rem !important;
}

.__pe-2 {
    padding-right: 0.5rem !important;
}

.__pe-3 {
    padding-right: 1rem !important;
}

.__pe-4 {
    padding-right: 1.5rem !important;
}

.__pe-5 {
    padding-right: 3rem !important;
}

.__pb-0 {
    padding-bottom: 0 !important;
}

.__pb-1 {
    padding-bottom: 0.25rem !important;
}

.__pb-2 {
    padding-bottom: 0.5rem !important;
}

.__pb-3 {
    padding-bottom: 1rem !important;
}

.__pb-4 {
    padding-bottom: 1.5rem !important;
}

.__pb-5 {
    padding-bottom: 3rem !important;
}

.__ps-0 {
    padding-left: 0 !important;
}

.__ps-1 {
    padding-left: 0.25rem !important;
}

.__ps-2 {
    padding-left: 0.5rem !important;
}

.__ps-3 {
    padding-left: 1rem !important;
}

.__ps-4 {
    padding-left: 1.5rem !important;
}

.__ps-5 {
    padding-left: 3rem !important;
}

.__gap-0 {
    gap: 0 !important;
}

.__gap-1 {
    gap: 0.25rem !important;
}

.__gap-2 {
    gap: 0.5rem !important;
}

.__gap-3 {
    gap: 1rem !important;
}

.__gap-4 {
    gap: 1.5rem !important;
}

.__gap-5 {
    gap: 3rem !important;
}

.__fw-bolder {
    font-weight: var(--upaep-fw-bolder) !important;
}

.__fw-bold {
    font-weight: var(--upaep-fw-bold) !important;
}

.__fw-semibold {
    font-weight: var(--upaep-fw-semibold) !important;
}

.__fw-medium {
    font-weight: var(--upaep-fw-medium) !important;
}

.__fw-regular {
    font-weight: var(--upaep-fw-regular) !important;
}

.__fw-light {
    font-weight: var(--upaep-fw-light) !important;
}

.__fw-normal {
    font-weight: var(--upaep-fw-normal) !important;
}

.__fw-lighter {
    font-weight: var(--upaep-fw-lighter) !important;
}

.__fs-italic {
    font-style: var(--upaep-fs-italic) !important;
}

.__fs-normal {
    font-style: var(--upaep-fs-normal) !important;
}

.__fs-oblique {
    font-style: var(--upaep-fs-oblique) !important;
}

.__fs-inherit {
    font-style: var(--upaep-fs-inherit) !important;
}

.__fs-initial {
    font-style: var(--upaep-fs-initial) !important;
}

.__fs-unset {
    font-style: var(--upaep-fs-unset) !important;
}

.__lh-1 {
    line-height: 1 !important;
}

.__lh-sm {
    line-height: 1.25 !important;
}

.__lh-base {
    line-height: 1.5 !important;
}

.__lh-lg {
    line-height: 2 !important;
}

.__text-start {
    text-align: left !important;
}

.__text-end {
    text-align: right !important;
}

.__text-center {
    text-align: center !important;
}

.__text-decoration-none {
    text-decoration: none !important;
}

.__text-decoration-underline {
    text-decoration: underline !important;
}

.__text-decoration-line-through {
    text-decoration: line-through !important;
}

.__text-lowercase {
    text-transform: lowercase !important;
}

.__text-uppercase {
    text-transform: uppercase !important;
}

.__text-capitalize {
    text-transform: capitalize !important;
}

.__text-balance {
    text-wrap: balance !important;
}

.__text-wrap {
    white-space: normal !important;
}

.__text-nowrap {
    white-space: nowrap !important;
}

.__text-break {
    word-wrap: break-word !important;
    word-break: break-word !important;
}

.__user-select-all {
    user-select: all !important;
}

.__user-select-auto {
    user-select: auto !important;
}

.__user-select-none {
    user-select: none !important;
}

.__pe-none {
    pointer-events: none !important;
}

.__pe-auto {
    pointer-events: auto !important;
}

.__br {
    border-radius: .375rem !important;
}

.__br-0 {
    border-radius: 0 !important;
}

.__br-1 {
    border-radius: .25rem !important;
}

.__br-2 {
    border-radius: .375rem !important;
}

.__br-3 {
    border-radius: .5rem !important;
}

.__br-4 {
    border-radius: 1rem !important;
}

.__br-5 {
    border-radius: 2rem !important;
}

.__br-circle {
    border-radius: 50% !important;
}

.__br-pill {
    border-radius: 50rem !important;
}

.__br-top {
    border-top-left-radius: .375rem !important;
    border-top-right-radius: .375rem !important;
}

.__br-top-0 {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

.__br-top-1 {
    border-top-left-radius: .25rem !important;
    border-top-right-radius: .25rem !important;
}

.__br-top-2 {
    border-top-left-radius: .375rem !important;
    border-top-right-radius: .375rem !important;
}

.__br-top-3 {
    border-top-left-radius: .5rem !important;
    border-top-right-radius: .5rem !important;
}

.__br-top-4 {
    border-top-left-radius: 1rem !important;
    border-top-right-radius: 1rem !important;
}

.__br-top-5 {
    border-top-left-radius: 2rem !important;
    border-top-right-radius: 2rem !important;
}

.__br-top-circle {
    border-top-left-radius: 50% !important;
    border-top-right-radius: 50% !important;
}

.__br-top-pill {
    border-top-left-radius: 50rem !important;
    border-top-right-radius: 50rem !important;
}

.__br-bottom {
    border-bottom-left-radius: .375rem !important;
    border-bottom-right-radius: .375rem !important;
}

.__br-bottom-0 {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.__br-bottom-1 {
    border-bottom-left-radius: .25rem !important;
    border-bottom-right-radius: .25rem !important;
}

.__br-bottom-2 {
    border-bottom-left-radius: .375rem !important;
    border-bottom-right-radius: .375rem !important;
}

.__br-bottom-3 {
    border-bottom-left-radius: .5rem !important;
    border-bottom-right-radius: .5rem !important;
}

.__br-bottom-4 {
    border-bottom-left-radius: 1rem !important;
    border-bottom-right-radius: 1rem !important;
}

.__br-bottom-5 {
    border-bottom-left-radius: 2rem !important;
    border-bottom-right-radius: 2rem !important;
}

.__br-bottom-circle {
    border-bottom-left-radius: 50% !important;
    border-bottom-right-radius: 50% !important;
}

.__br-bottom-pill {
    border-bottom-left-radius: 50rem !important;
    border-bottom-right-radius: 50rem !important;
}

.__br-end {
    border-top-right-radius: .375rem !important;
    border-bottom-right-radius: .375rem !important;
}

.__br-end-0 {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.__br-end-1 {
    border-top-right-radius: .25rem !important;
    border-bottom-right-radius: .25rem !important;
}

.__br-end-2 {
    border-top-right-radius: .375rem !important;
    border-bottom-right-radius: .375rem !important;
}

.__br-end-3 {
    border-top-right-radius: .5rem !important;
    border-bottom-right-radius: .5rem !important;
}

.__br-end-4 {
    border-top-right-radius: 1rem !important;
    border-bottom-right-radius: 1rem !important;
}

.__br-end-5 {
    border-top-right-radius: 2rem !important;
    border-bottom-right-radius: 2rem !important;
}

.__br-end-circle {
    border-top-right-radius: 50% !important;
    border-bottom-right-radius: 50% !important;
}

.__br-end-pill {
    border-top-right-radius: 50rem !important;
    border-bottom-right-radius: 50rem !important;
}

.__br-start {
    border-top-left-radius: .375rem !important;
    border-bottom-left-radius: .375rem !important;
}

.__br-start-0 {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.__br-start-1 {
    border-top-left-radius: .25rem !important;
    border-bottom-left-radius: .25rem !important;
}

.__br-start-2 {
    border-top-left-radius: .375rem !important;
    border-bottom-left-radius: .375rem !important;
}

.__br-start-3 {
    border-top-left-radius: .5rem !important;
    border-bottom-left-radius: .5rem !important;
}

.__br-start-4 {
    border-top-left-radius: 1rem !important;
    border-bottom-left-radius: 1rem !important;
}

.__br-start-5 {
    border-top-left-radius: 2rem !important;
    border-bottom-left-radius: 2rem !important;
}

.__br-start-circle {
    border-top-left-radius: 50% !important;
    border-bottom-left-radius: 50% !important;
}

.__br-start-pill {
    border-top-left-radius: 50rem !important;
    border-bottom-left-radius: 50rem !important;
}

.__visible {
    visibility: visible !important;
}

.__invisible {
    visibility: hidden !important;
}

/*? ------ Cursor ------ */
.cursor_pointer,
.__cursor_pointer {
    cursor: pointer;
}

.__cursor {
    --cursor: auto;
    --cursor-url: ;
    cursor: var(--cursor);

    &.__crosshair {
        --cursor: crosshair;
    }

    &.__help {
        --cursor: help;
    }

    &.__move {
        --cursor: move;
    }

    &.__pointer {
        --cursor: pointer;
    }

    &.__progress {
        --cursor: progress;
    }

    &.__text {
        --cursor: text;
    }

    &.__wait {
        --cursor: wait;
    }

    &.__vertical-text {
        --cursor: vertical-text;
    }

    &.__alias {
        --cursor: alias;
    }

    &.__no-drop {
        --cursor: no-drop;
    }

    &.__grab {
        --cursor: grab;
    }

    &.__grabbing {
        --cursor: grabbing;
    }

    &.__zoom-in {
        --cursor: zoom-in;
    }

    &.__zoom-out {
        --cursor: zoom-out;
    }

    &.__not-allowed {
        --cursor: not-allowed;
    }

    &.__cell {
        --cursor: cell;
    }

    &.__copy {
        --cursor: copy;
    }

    &.__ew-resize {
        --cursor: ew-resize;
    }

    &.__ns-resize {
        --cursor: ns-resize;
    }

    &.__nwse-resize {
        --cursor: nwse-resize;
    }

    &.__nesw-resize {
        --cursor: nesw-resize;
    }

    &.__col-resize {
        --cursor: col-resize;
    }

    &.__row-resize {
        --cursor: row-resize;
    }

    &.__context-menu {
        --cursor: context-menu;
    }

    &.__none {
        --cursor: none;
    }

    &.__custom {
        --cursor: var(--cursor-url) auto;
    }
}

/*? ------  ------ */
/*?  */

/*? ------ Flexbox / row col ------ */
.__row,
.upaep__row {
    display: flex;
    flex-wrap: wrap;
    margin: calc(-1 * 0) calc(-.5 * 1.5rem) 0 calc(-.5 * 1.5rem);

    &>* {
        flex-shrink: 0;
        width: 100%;
        max-width: 100%;
        padding: 0 calc(1.5rem * .5) 0 calc(1.5rem * .5);
        margin: 0;
    }

    &.__gap-cols {
        gap: 44px;

        &>* {
            padding: 0;
        }
    }

    &.__row-gap {
        row-gap: 1rem;

        /* &>*:nth-child(even) {
            padding: 0 0 0 2rem;
        }
        &>*:nth-child(odd) {
            padding: 0 2rem 0 0;
        } */
    }
}

.__col,
.upaep__col {
    flex: 1 0 0%;
}

.__row-cols-auto>*,
.upaep__row-cols-auto>* {
    flex: 0 0 auto;
    width: auto;
}

.__row-cols-1>*,
.upaep__row-cols-1>* {
    flex: 0 0 auto;
    width: calc(100% / 1);
}

.__row-cols-2>*,
.upaep__row-cols-2>* {
    flex: 0 0 auto;
    width: calc(100% / 2);
}

.__row-cols-3>*,
.upaep__row-cols-3>* {
    flex: 0 0 auto;
    width: calc(100% / 3);
}

.__row-cols-4>*,
.upaep__row-cols-4>* {
    flex: 0 0 auto;
    width: calc(100% / 4);
}

.__row-cols-5>*,
.upaep__row-cols-5>* {
    flex: 0 0 auto;
    width: calc(100% / 5);
}

.__row-cols-6>*,
.upaep__row-cols-6>* {
    flex: 0 0 auto;
    width: calc(100% / 6);
}

.__col-auto,
.upaep__col-auto {
    flex: 0 0 auto;
    width: auto;
}

.__col-1,
.upaep__col-1 {
    flex: 0 0 auto;
    width: calc(100% / 12 * 1);
}

.__col-2,
.upaep__col-2 {
    flex: 0 0 auto;
    width: calc(100% / 12 * 2);
}

.__col-3,
.upaep__col-3 {
    flex: 0 0 auto;
    width: calc(100% / 12 * 3);
}

.__col-4,
.upaep__col-4 {
    flex: 0 0 auto;
    width: calc(100% / 12 * 4);
}

.__col-5,
.upaep__col-5 {
    flex: 0 0 auto;
    width: calc(100% / 12 * 5);
}

.__col-6,
.upaep__col-6 {
    flex: 0 0 auto;
    width: calc(100% / 12 * 6);
}

.__col-7,
.upaep__col-7 {
    flex: 0 0 auto;
    width: calc(100% / 12 * 7);
}

.__col-8,
.upaep__col-8 {
    flex: 0 0 auto;
    width: calc(100% / 12 * 8);
}

.__col-9,
.upaep__col-9 {
    flex: 0 0 auto;
    width: calc(100% / 12 * 9);
}

.__col-10,
.upaep__col-10 {
    flex: 0 0 auto;
    width: calc(100% / 12 * 10);
}

.__col-11,
.upaep__col-11 {
    flex: 0 0 auto;
    width: calc(100% / 12 * 11);
}

.__col-12,
.upaep__col-12 {
    flex: 0 0 auto;
    width: calc(100% / 12 * 12);
}

/*? ------ Animations ------ */
.upaep__animation,
.__animation {
    --animation-name: ;
    --animation-duration: 1s;
    --animation-timing-function: ;
    --animation-repeat: ;
    --animation-delay: ;
    animation: var(--animation-name) var(--animation-duration) var(--animation-timing-function) var(--animation-repeat) var(--animation-delay);

    &.__repeat-1 {
        --animation-repeat: 1;
    }

    &.__repeat-2 {
        --animation-repeat: 2;
    }

    &.__repeat-3 {
        --animation-repeat: 3;
    }

    &.__repeat-4 {
        --animation-repeat: 4;
    }

    &.__repeat-5 {
        --animation-repeat: 5;
    }

    &.__infinite {
        --animation-repeat: infinite;
    }

    &.__delay-1 {
        --animation-delay: 1s;
    }

    &.__delay-2 {
        --animation-delay: 2s;
    }

    &.__delay-3 {
        --animation-delay: 3s;
    }

    &.__delay-4 {
        --animation-delay: 4s;
    }

    &.__delay-5 {
        --animation-delay: 5s;
    }

    &.__function-linear {
        --animation-timing-function: linear;
    }

    &.__function-ease-in {
        --animation-timing-function: ease-in;
    }

    &.__function-ease-out {
        --animation-timing-function: ease-out;
    }

    &.__function-ease-in-out {
        --animation-timing-function: ease-in-out;
    }

    &.__bounce {
        --animation-name: a_bounce;
    }

    &.__flash {
        --animation-name: a_flash;
    }

    &.__pulse {
        --animation-name: a_pulse;
    }

    &.__rubberBand {
        --animation-name: a_rubberBand;
    }

    &.__shakeX {
        --animation-name: a_shakeX;
    }

    &.__shakeY {
        --animation-name: a_shakeY;
    }

    &.__headShake {
        --animation-name: a_headShake;
    }

    &.__swing {
        --animation-name: a_swing;
    }

    &.__tada {
        --animation-name: a_tada;
    }

    &.__wobble {
        --animation-name: a_wobble;
    }

    &.__jello {
        --animation-name: a_jello;
    }

    &.__heartBeat {
        --animation-name: a_heartBeat;
    }

    &.__backInDown {
        --animation-name: a_backInDown;
    }

    &.__backInLeft {
        --animation-name: a_backInLeft;
    }

    &.__backInRight {
        --animation-name: a_backInRight;
    }

    &.__backInUp {
        --animation-name: a_backInUp;
    }

    &.__backOutDown {
        --animation-name: a_backOutDown;
    }

    &.__backOutLeft {
        --animation-name: a_backOutLeft;
    }

    &.__backOutRight {
        --animation-name: a_backOutRight;
    }

    &.__backOutUp {
        --animation-name: a_backOutUp;
    }

    &.__bounceIn {
        --animation-name: a_bounceIn;
    }

    &.__bounceInDown {
        --animation-name: a_bounceInDown;
    }

    &.__bounceInLeft {
        --animation-name: a_bounceInLeft;
    }

    &.__bounceInRight {
        --animation-name: a_bounceInRight;
    }

    &.__bounceInUp {
        --animation-name: a_bounceInUp;
    }

    &.__bounceOut {
        --animation-name: a_bounceOut;
    }

    &.__bounceOutDown {
        --animation-name: a_bounceOutDown;
    }

    &.__bounceOutLeft {
        --animation-name: a_bounceOutLeft;
    }

    &.__bounceOutRight {
        --animation-name: a_bounceOutRight;
    }

    &.__bounceOutUp {
        --animation-name: a_bounceOutUp;
    }

    &.__fadeIn {
        --animation-name: a_fadeIn;
    }

    &.__fadeInDown {
        --animation-name: a_fadeInDown;
    }

    &.__fadeInDownBig {
        --animation-name: a_fadeInDownBig;
    }

    &.__fadeInLeft {
        --animation-name: a_fadeInLeft;
    }

    &.__fadeInLeftBig {
        --animation-name: a_fadeInLeftBig;
    }

    &.__fadeInRight {
        --animation-name: a_fadeInRight;
    }

    &.__fadeInRightBig {
        --animation-name: a_fadeInRightBig;
    }

    &.__fadeInUp {
        --animation-name: a_fadeInUp;
    }

    &.__fadeInUpBig {
        --animation-name: a_fadeInUpBig;
    }

    &.__fadeInTopLeft {
        --animation-name: a_fadeInTopLeft;
    }

    &.__fadeInTopRight {
        --animation-name: a_fadeInTopRight;
    }

    &.__fadeInBottomLeft {
        --animation-name: a_fadeInBottomLeft;
    }

    &.__fadeInBottomRight {
        --animation-name: a_fadeInBottomRight;
    }

    &.__fadeOut {
        --animation-name: a_fadeOut;
    }

    &.__fadeOutDown {
        --animation-name: a_fadeOutDown;
    }

    &.__fadeOutDownBig {
        --animation-name: a_fadeOutDownBig;
    }

    &.__fadeOutLeft {
        --animation-name: a_fadeOutLeft;
    }

    &.__fadeOutLeftBig {
        --animation-name: a_fadeOutLeftBig;
    }

    &.__fadeOutRight {
        --animation-name: a_fadeOutRight;
    }

    &.__fadeOutRightBig {
        --animation-name: a_fadeOutRightBig;
    }

    &.__fadeOutUp {
        --animation-name: a_fadeOutUp;
    }

    &.__fadeOutUpBig {
        --animation-name: a_fadeOutUpBig;
    }

    &.__fadeOutTopLeft {
        --animation-name: a_fadeOutTopLeft;
    }

    &.__fadeOutTopRight {
        --animation-name: a_fadeOutTopRight;
    }

    &.__fadeOutBottomRight {
        --animation-name: a_fadeOutBottomRight;
    }

    &.__fadeOutBottomLeft {
        --animation-name: a_fadeOutBottomLeft;
    }

    &.__flip {
        --animation-name: a_flip;
    }

    &.__flipInX {
        --animation-name: a_flipInX;
    }

    &.__flipInY {
        --animation-name: a_flipInY;
    }

    &.__flipOutX {
        --animation-name: a_flipOutX;
    }

    &.__flipOutY {
        --animation-name: a_flipOutY;
    }

    &.__lightSpeedInRight {
        --animation-name: a_lightSpeedInRight;
    }

    &.__lightSpeedInLeft {
        --animation-name: a_lightSpeedInLeft;
    }

    &.__lightSpeedOutRight {
        --animation-name: a_lightSpeedOutRight;
    }

    &.__lightSpeedOutLeft {
        --animation-name: a_lightSpeedOutLeft;
    }

    &.__rotateIn {
        --animation-name: a_rotateIn;
    }

    &.__rotateInDownLeft {
        --animation-name: a_rotateInDownLeft;
    }

    &.__rotateInDownRight {
        --animation-name: a_rotateInDownRight;
    }

    &.__rotateInUpLeft {
        --animation-name: a_rotateInUpLeft;
    }

    &.__rotateInUpRight {
        --animation-name: a_rotateInUpRight;
    }

    &.__rotateOut {
        --animation-name: a_rotateOut;
    }

    &.__rotateOutDownLeft {
        --animation-name: a_rotateOutDownLeft;
    }

    &.__rotateOutDownRight {
        --animation-name: a_rotateOutDownRight;
    }

    &.__rotateOutUpLeft {
        --animation-name: a_rotateOutUpLeft;
    }

    &.__rotateOutUpRight {
        --animation-name: a_rotateOutUpRight;
    }

    &.__hinge {
        --animation-name: a_hinge;
    }

    &.__jackInTheBox {
        --animation-name: a_jackInTheBox;
    }

    &.__rollIn {
        --animation-name: a_rollIn;
    }

    &.__rollOut {
        --animation-name: a_rollOut;
    }

    &.__zoomIn {
        --animation-name: a_zoomIn;
    }

    &.__zoomInDown {
        --animation-name: a_zoomInDown;
    }

    &.__zoomInLeft {
        --animation-name: a_zoomInLeft;
    }

    &.__zoomInRight {
        --animation-name: a_zoomInRight;
    }

    &.__zoomInUp {
        --animation-name: a_zoomInUp;
    }

    &.__zoomOut {
        --animation-name: a_zoomOut;
    }

    &.__zoomOutDown {
        --animation-name: a_zoomOutDown;
    }

    &.__zoomOutLeft {
        --animation-name: a_zoomOutLeft;
    }

    &.__zoomOutRight {
        --animation-name: a_zoomOutRight;
    }

    &.__zoomOutUp {
        --animation-name: a_zoomOutUp;
    }

    &.__slideInDown {
        --animation-name: a_slideInDown;
    }

    &.__slideInLeft {
        --animation-name: a_slideInLeft;
    }

    &.__slideInRight {
        --animation-name: a_slideInRight;
    }

    &.__slideInUp {
        --animation-name: a_slideInUp;
    }

    &.__slideOutDown {
        --animation-name: a_slideOutDown;
    }

    &.__slideOutLeft {
        --animation-name: a_slideOutLeft;
    }

    &.__slideOutRight {
        --animation-name: a_slideOutRight;
    }

    &.__slideOutUp {
        --animation-name: a_slideOutUp;
    }
}

.__pulsing {
    --pulsing-zindex: 1;

    &:not(:hover) {
        overflow: visible;
        position: relative;
        transition: background .3s;

        &::before {
            content: '';
            display: block;
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background-color: inherit;
            border-radius: inherit;
            transition: opacity .3s, transform .3s;
            animation: a_pulsebg 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;
            z-index: var(--pulsing-zindex);
        }
    }
}

@keyframes a_pulsebg {
    0% {
        opacity: 1;
        transform: scale(1)
    }

    50% {
        opacity: 0;
        transform: scale(1.5)
    }

    100% {
        opacity: 0;
        transform: scale(1.5)
    }
}

@keyframes a_bounce {

    from,
    20%,
    53%,
    to {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transform: translate3d(0, 0, 0);
    }

    40%,
    43% {
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transform: translate3d(0, -30px, 0) scaleY(1.1);
    }

    70% {
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transform: translate3d(0, -15px, 0) scaleY(1.05);
    }

    80% {
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transform: translate3d(0, 0, 0) scaleY(0.95);
    }

    90% {
        transform: translate3d(0, -4px, 0) scaleY(1.02);
    }
}

@keyframes a_flash {

    from,
    50%,
    to {
        opacity: 1;
    }

    25%,
    75% {
        opacity: 0;
    }
}

@keyframes a_pulse {
    from {
        transform: scale3d(1, 1, 1);
    }

    50% {
        transform: scale3d(1.05, 1.05, 1.05);
    }

    to {
        transform: scale3d(1, 1, 1);
    }
}

@keyframes a_rubberBand {
    from {
        transform: scale3d(1, 1, 1);
    }

    30% {
        transform: scale3d(1.25, 0.75, 1);
    }

    40% {
        transform: scale3d(0.75, 1.25, 1);
    }

    50% {
        transform: scale3d(1.15, 0.85, 1);
    }

    65% {
        transform: scale3d(0.95, 1.05, 1);
    }

    75% {
        transform: scale3d(1.05, 0.95, 1);
    }

    to {
        transform: scale3d(1, 1, 1);
    }
}

@keyframes a_shakeX {

    from,
    to {
        transform: translate3d(0, 0, 0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translate3d(-10px, 0, 0);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translate3d(10px, 0, 0);
    }
}

@keyframes a_shakeY {

    from,
    to {
        transform: translate3d(0, 0, 0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translate3d(0, -10px, 0);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translate3d(0, 10px, 0);
    }
}

@keyframes a_headShake {
    0% {
        transform: translateX(0);
    }

    6.5% {
        transform: translateX(-6px) rotateY(-9deg);
    }

    18.5% {
        transform: translateX(5px) rotateY(7deg);
    }

    31.5% {
        transform: translateX(-3px) rotateY(-5deg);
    }

    43.5% {
        transform: translateX(2px) rotateY(3deg);
    }

    50% {
        transform: translateX(0);
    }
}

@keyframes a_swing {
    20% {
        transform: rotate3d(0, 0, 1, 15deg);
    }

    40% {
        transform: rotate3d(0, 0, 1, -10deg);
    }

    60% {
        transform: rotate3d(0, 0, 1, 5deg);
    }

    80% {
        transform: rotate3d(0, 0, 1, -5deg);
    }

    to {
        transform: rotate3d(0, 0, 1, 0deg);
    }
}

@keyframes a_tada {
    from {
        transform: scale3d(1, 1, 1);
    }

    10%,
    20% {
        transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    }

    30%,
    50%,
    70%,
    90% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }

    40%,
    60%,
    80% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }

    to {
        transform: scale3d(1, 1, 1);
    }
}

@keyframes a_wobble {
    from {
        transform: translate3d(0, 0, 0);
    }

    15% {
        transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    }

    30% {
        transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    }

    45% {
        transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    }

    60% {
        transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    }

    75% {
        transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes a_jello {

    from,
    11.1%,
    to {
        transform: translate3d(0, 0, 0);
    }

    22.2% {
        transform: skewX(-12.5deg) skewY(-12.5deg);
    }

    33.3% {
        transform: skewX(6.25deg) skewY(6.25deg);
    }

    44.4% {
        transform: skewX(-3.125deg) skewY(-3.125deg);
    }

    55.5% {
        transform: skewX(1.5625deg) skewY(1.5625deg);
    }

    66.6% {
        transform: skewX(-0.78125deg) skewY(-0.78125deg);
    }

    77.7% {
        transform: skewX(0.390625deg) skewY(0.390625deg);
    }

    88.8% {
        transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    }
}

@keyframes a_heartBeat {
    0% {
        transform: scale(1);
    }

    14% {
        transform: scale(1.3);
    }

    28% {
        transform: scale(1);
    }

    42% {
        transform: scale(1.3);
    }

    70% {
        transform: scale(1);
    }
}

@keyframes a_backInDown {
    0% {
        transform: translateY(-1200px) scale(0.7);
        opacity: 0.7;
    }

    80% {
        transform: translateY(0px) scale(0.7);
        opacity: 0.7;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes a_backInLeft {
    0% {
        transform: translateX(-2000px) scale(0.7);
        opacity: 0.7;
    }

    80% {
        transform: translateX(0px) scale(0.7);
        opacity: 0.7;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes a_backInRight {
    0% {
        transform: translateX(2000px) scale(0.7);
        opacity: 0.7;
    }

    80% {
        transform: translateX(0px) scale(0.7);
        opacity: 0.7;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes a_backInUp {
    0% {
        transform: translateY(1200px) scale(0.7);
        opacity: 0.7;
    }

    80% {
        transform: translateY(0px) scale(0.7);
        opacity: 0.7;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes a_backOutDown {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    20% {
        transform: translateY(0px) scale(0.7);
        opacity: 0.7;
    }

    100% {
        transform: translateY(700px) scale(0.7);
        opacity: 0.7;
    }
}

@keyframes a_backOutLeft {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    20% {
        transform: translateX(0px) scale(0.7);
        opacity: 0.7;
    }

    100% {
        transform: translateX(-2000px) scale(0.7);
        opacity: 0.7;
    }
}

@keyframes a_backOutRight {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    20% {
        transform: translateX(0px) scale(0.7);
        opacity: 0.7;
    }

    100% {
        transform: translateX(2000px) scale(0.7);
        opacity: 0.7;
    }
}

@keyframes a_backOutUp {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    20% {
        transform: translateY(0px) scale(0.7);
        opacity: 0.7;
    }

    100% {
        transform: translateY(-700px) scale(0.7);
        opacity: 0.7;
    }
}

@keyframes a_bounceIn {

    from,
    20%,
    40%,
    60%,
    80%,
    to {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }

    20% {
        transform: scale3d(1.1, 1.1, 1.1);
    }

    40% {
        transform: scale3d(0.9, 0.9, 0.9);
    }

    60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03);
    }

    80% {
        transform: scale3d(0.97, 0.97, 0.97);
    }

    to {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}

@keyframes a_bounceInDown {

    from,
    60%,
    75%,
    90%,
    to {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        transform: translate3d(0, -3000px, 0) scaleY(3);
    }

    60% {
        opacity: 1;
        transform: translate3d(0, 25px, 0) scaleY(0.9);
    }

    75% {
        transform: translate3d(0, -10px, 0) scaleY(0.95);
    }

    90% {
        transform: translate3d(0, 5px, 0) scaleY(0.985);
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes a_bounceInLeft {

    from,
    60%,
    75%,
    90%,
    to {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        transform: translate3d(-3000px, 0, 0) scaleX(3);
    }

    60% {
        opacity: 1;
        transform: translate3d(25px, 0, 0) scaleX(1);
    }

    75% {
        transform: translate3d(-10px, 0, 0) scaleX(0.98);
    }

    90% {
        transform: translate3d(5px, 0, 0) scaleX(0.995);
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes a_bounceInRight {

    from,
    60%,
    75%,
    90%,
    to {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    from {
        opacity: 0;
        transform: translate3d(3000px, 0, 0) scaleX(3);
    }

    60% {
        opacity: 1;
        transform: translate3d(-25px, 0, 0) scaleX(1);
    }

    75% {
        transform: translate3d(10px, 0, 0) scaleX(0.98);
    }

    90% {
        transform: translate3d(-5px, 0, 0) scaleX(0.995);
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes a_bounceInUp {

    from,
    60%,
    75%,
    90%,
    to {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    from {
        opacity: 0;
        transform: translate3d(0, 3000px, 0) scaleY(5);
    }

    60% {
        opacity: 1;
        transform: translate3d(0, -20px, 0) scaleY(0.9);
    }

    75% {
        transform: translate3d(0, 10px, 0) scaleY(0.95);
    }

    90% {
        transform: translate3d(0, -5px, 0) scaleY(0.985);
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes a_bounceOut {
    20% {
        transform: scale3d(0.9, 0.9, 0.9);
    }

    50%,
    55% {
        opacity: 1;
        transform: scale3d(1.1, 1.1, 1.1);
    }

    to {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }
}

@keyframes a_bounceOutDown {
    20% {
        transform: translate3d(0, 10px, 0) scaleY(0.985);
    }

    40%,
    45% {
        opacity: 1;
        transform: translate3d(0, -20px, 0) scaleY(0.9);
    }

    to {
        opacity: 0;
        transform: translate3d(0, 2000px, 0) scaleY(3);
    }
}

@keyframes a_bounceOutLeft {
    20% {
        opacity: 1;
        transform: translate3d(20px, 0, 0) scaleX(0.9);
    }

    to {
        opacity: 0;
        transform: translate3d(-2000px, 0, 0) scaleX(2);
    }
}

@keyframes a_bounceOutRight {
    20% {
        opacity: 1;
        transform: translate3d(-20px, 0, 0) scaleX(0.9);
    }

    to {
        opacity: 0;
        transform: translate3d(2000px, 0, 0) scaleX(2);
    }
}

@keyframes a_bounceOutUp {
    20% {
        transform: translate3d(0, -10px, 0) scaleY(0.985);
    }

    40%,
    45% {
        opacity: 1;
        transform: translate3d(0, 20px, 0) scaleY(0.9);
    }

    to {
        opacity: 0;
        transform: translate3d(0, -2000px, 0) scaleY(3);
    }
}

@keyframes a_fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes a_fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes a_fadeInDownBig {
    from {
        opacity: 0;
        transform: translate3d(0, -2000px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes a_fadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes a_fadeInLeftBig {
    from {
        opacity: 0;
        transform: translate3d(-2000px, 0, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes a_fadeInRight {
    from {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes a_fadeInRightBig {
    from {
        opacity: 0;
        transform: translate3d(2000px, 0, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes a_fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes a_fadeInUpBig {
    from {
        opacity: 0;
        transform: translate3d(0, 2000px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes a_fadeInTopLeft {
    from {
        opacity: 0;
        transform: translate3d(-100%, -100%, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes a_fadeInTopRight {
    from {
        opacity: 0;
        transform: translate3d(100%, -100%, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes a_fadeInBottomLeft {
    from {
        opacity: 0;
        transform: translate3d(-100%, 100%, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes a_fadeInBottomRight {
    from {
        opacity: 0;
        transform: translate3d(100%, 100%, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes a_fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes a_fadeOutDown {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }
}

@keyframes a_fadeOutDownBig {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate3d(0, 2000px, 0);
    }
}

@keyframes a_fadeOutLeft {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }
}

@keyframes a_fadeOutLeftBig {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate3d(-2000px, 0, 0);
    }
}

@keyframes a_fadeOutRight {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }
}

@keyframes a_fadeOutRightBig {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate3d(2000px, 0, 0);
    }
}

@keyframes a_fadeOutUp {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }
}

@keyframes a_fadeOutUpBig {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate3d(0, -2000px, 0);
    }
}

@keyframes a_fadeOutTopLeft {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    to {
        opacity: 0;
        transform: translate3d(-100%, -100%, 0);
    }
}

@keyframes a_fadeOutTopRight {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    to {
        opacity: 0;
        transform: translate3d(100%, -100%, 0);
    }
}

@keyframes a_fadeOutBottomRight {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    to {
        opacity: 0;
        transform: translate3d(100%, 100%, 0);
    }
}

@keyframes a_fadeOutBottomLeft {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    to {
        opacity: 0;
        transform: translate3d(-100%, 100%, 0);
    }
}

@keyframes a_flip {
    from {
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
        animation-timing-function: ease-out;
    }

    40% {
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        animation-timing-function: ease-out;
    }

    50% {
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        animation-timing-function: ease-in;
    }

    80% {
        transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
        animation-timing-function: ease-in;
    }

    to {
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
        animation-timing-function: ease-in;
    }
}

@keyframes a_flipInX {
    from {
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        animation-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        animation-timing-function: ease-in;
    }

    60% {
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
    }

    80% {
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }

    to {
        transform: perspective(400px);
    }
}

@keyframes a_flipInY {
    from {
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        animation-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        animation-timing-function: ease-in;
    }

    60% {
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        opacity: 1;
    }

    80% {
        transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    }

    to {
        transform: perspective(400px);
    }
}

@keyframes a_flipOutX {
    from {
        transform: perspective(400px);
    }

    30% {
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        opacity: 1;
    }

    to {
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        opacity: 0;
    }
}

@keyframes a_flipOutY {
    from {
        transform: perspective(400px);
    }

    30% {
        transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        opacity: 1;
    }

    to {
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        opacity: 0;
    }
}

@keyframes a_lightSpeedInRight {
    from {
        transform: translate3d(100%, 0, 0) skewX(-30deg);
        opacity: 0;
    }

    60% {
        transform: skewX(20deg);
        opacity: 1;
    }

    80% {
        transform: skewX(-5deg);
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes a_lightSpeedInLeft {
    from {
        transform: translate3d(-100%, 0, 0) skewX(30deg);
        opacity: 0;
    }

    60% {
        transform: skewX(-20deg);
        opacity: 1;
    }

    80% {
        transform: skewX(5deg);
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes a_lightSpeedOutRight {
    from {
        opacity: 1;
    }

    to {
        transform: translate3d(100%, 0, 0) skewX(30deg);
        opacity: 0;
    }
}

@keyframes a_lightSpeedOutLeft {
    from {
        opacity: 1;
    }

    to {
        transform: translate3d(-100%, 0, 0) skewX(-30deg);
        opacity: 0;
    }
}

@keyframes a_rotateIn {
    from {
        transform: rotate3d(0, 0, 1, -200deg);
        opacity: 0;
    }

    to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes a_rotateInDownLeft {
    from {
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0;
    }

    to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes a_rotateInDownRight {
    from {
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0;
    }

    to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes a_rotateInUpLeft {
    from {
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0;
    }

    to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes a_rotateInUpRight {
    from {
        transform: rotate3d(0, 0, 1, -90deg);
        opacity: 0;
    }

    to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes a_rotateOut {
    from {
        opacity: 1;
    }

    to {
        transform: rotate3d(0, 0, 1, 200deg);
        opacity: 0;
    }
}

@keyframes a_rotateOutDownLeft {
    from {
        opacity: 1;
    }

    to {
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0;
    }
}

@keyframes a_rotateOutDownRight {
    from {
        opacity: 1;
    }

    to {
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0;
    }
}

@keyframes a_rotateOutUpLeft {
    from {
        opacity: 1;
    }

    to {
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0;
    }
}

@keyframes a_rotateOutUpRight {
    from {
        opacity: 1;
    }

    to {
        transform: rotate3d(0, 0, 1, 90deg);
        opacity: 0;
    }
}

@keyframes a_hinge {
    0% {
        animation-timing-function: ease-in-out;
    }

    20%,
    60% {
        transform: rotate3d(0, 0, 1, 80deg);
        animation-timing-function: ease-in-out;
    }

    40%,
    80% {
        transform: rotate3d(0, 0, 1, 60deg);
        animation-timing-function: ease-in-out;
        opacity: 1;
    }

    to {
        transform: translate3d(0, 700px, 0);
        opacity: 0;
    }
}

@keyframes a_jackInTheBox {
    from {
        opacity: 0;
        transform: scale(0.1) rotate(30deg);
        transform-origin: center bottom;
    }

    50% {
        transform: rotate(-10deg);
    }

    70% {
        transform: rotate(3deg);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes a_rollIn {
    from {
        opacity: 0;
        transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes a_rollOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    }
}

@keyframes a_zoomIn {
    from {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }

    50% {
        opacity: 1;
    }
}

@keyframes a_zoomInDown {
    from {
        opacity: 0;
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    60% {
        opacity: 1;
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

@keyframes a_zoomInLeft {
    from {
        opacity: 0;
        transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    60% {
        opacity: 1;
        transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

@keyframes a_zoomInRight {
    from {
        opacity: 0;
        transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    60% {
        opacity: 1;
        transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

@keyframes a_zoomInUp {
    from {
        opacity: 0;
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    60% {
        opacity: 1;
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

@keyframes a_zoomOut {
    from {
        opacity: 1;
    }

    50% {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }

    to {
        opacity: 0;
    }
}

@keyframes a_zoomOutDown {
    40% {
        opacity: 1;
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    to {
        opacity: 0;
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

@keyframes a_zoomOutLeft {
    40% {
        opacity: 1;
        transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    }

    to {
        opacity: 0;
        transform: scale(0.1) translate3d(-2000px, 0, 0);
    }
}

@keyframes a_zoomOutRight {
    40% {
        opacity: 1;
        transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    }

    to {
        opacity: 0;
        transform: scale(0.1) translate3d(2000px, 0, 0);
    }
}

@keyframes a_zoomOutUp {
    40% {
        opacity: 1;
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    to {
        opacity: 0;
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

@keyframes a_slideInDown {
    from {
        transform: translate3d(0, -100%, 0);
        visibility: visible;
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes a_slideInLeft {
    from {
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes a_slideInRight {
    from {
        transform: translate3d(100%, 0, 0);
        visibility: visible;
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes a_slideInUp {
    from {
        transform: translate3d(0, 100%, 0);
        visibility: visible;
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes a_slideOutDown {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        visibility: hidden;
        transform: translate3d(0, 100%, 0);
    }
}

@keyframes a_slideOutLeft {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        visibility: hidden;
        transform: translate3d(-100%, 0, 0);
    }
}

@keyframes a_slideOutRight {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        visibility: hidden;
        transform: translate3d(100%, 0, 0);
    }
}

@keyframes a_slideOutUp {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        visibility: hidden;
        transform: translate3d(0, -100%, 0);
    }
}

/*? ------ Media Querys ------ */

/* max-width 1920px | --upaep-size-xxl */
@media(width <=1920px) {}

/* max-width 1450px | --upaep-size-xl */
@media(width <=1450px) {
    .upaep__footer__up {
        --upaep-footer-up-maxwidth: 1150px;
    }

    .upaep__footer_telefono {
        --upaep-footer-telefono-width: 85%;
    }

    .upaep__content-botones-menu,
    .upaep__menu-bar,
    .upaep__menu-bar.__horizontal {
        --upaep-menubar-content-text-fz: var(--upaep-fz14);
    }

    .upaep__contacta-info {
        --upaep-contacta-info-item-margin: 1rem 0;
    }

    .upaep__contacto {
        height: 130dvh;
        --upaep-contacto-content-height: 100%;

        .formContacto {

            & .ratio {
                height: 100dvh;
            }
        }
    }

    .upaep__tab.__trinity {
        --upaep-tab-tabscontent-padding: 0;
    }

}

/* max-width 1024px | --upaep-size-lg */
@media(width <=1024px) {}


@media(980px <=width) {
    .upaep__navbar.__menu {

        .upaep__navbar-collapse:not(.is-show) {
            background: none;
        }

        .upaep__navbar-principal,
        .upaep__navbar-secondary {
            display: none;
        }
    }
}

@media(width<=980px) {
    .upaep__navbar.__menu {
        .upaep__navbar-primary-title {
            display: none;
        }

        .upaep__navbar-primary {
            .upaep__navbar-logo {
                margin: 0;
            }
        }

        &:not(.__submarca) {
            .upaep__navbar-primary-language {
                display: none;
            }
        }

        .upaep__dropdown {
            --upaep-dropdown-border-size: 0;
            --upaep-dropdown-item-padding: .25rem .5rem;
            --upaep-dropdown-margin: .5rem 0;
        }

        &:not(.__offcanvas) {
            &.__submenu {
                .upaep__navbar-primary {
                    .upaep__navbar-collapse {
                        inset: 107px auto auto 50%;
                    }
                }
            }

            .upaep__navbar-primary {
                .upaep__navbar-collapse {
                    width: 100%;
                    position: absolute;
                    inset: 80px auto auto 50%;
                    z-index: 1015;
                    translate: -50%;
                }
            }
        }
    }

    .upaep__dropzone {
        .upaep__dropzone-inner {
            flex-direction: column;
        }

        .upaep__dropzone-files {
            max-height: 150px;
        }

        .upaep__dropzone-multiple {
            width: 100%;
        }
    }
}

/* max-width 924px | --upaep-size-md */
@media(width <=924px) {
    .upaep__block-example {
        flex-direction: column;
    }

    h1,
    .upaep__h1 {
        --h-fz: var(--upaep-fz30);
    }

    h2,
    .upaep__h2 {
        --h-fz: var(--upaep-fz28);
    }

    h3,
    .upaep__h3 {
        --h-fz: var(--upaep-fz20);
    }

    h4,
    .upaep__h4 {
        --h-fz: var(--upaep-fz18);
    }

    .upaep__title {
        --upaep-title-fz: var(--upaep-fz30);
    }

    .upaep__subtitle {
        --upaep-subtitle-fz: var(--upaep-fz16);
    }

    .upaep__subtitle-2 {
        --upaep-subtitle-fz: var(--upaep-fz14);
    }

    .upaep__text {
        --upaep-text-fz: var(--upaep-fz16);
    }

    .upaep__subtext {
        --upaep-subtext-fz: var(--upaep-fz14);
    }

    .upaep__caption {
        --upaep-caption-fz: var(--upaep-fz12);
    }

    .upaep__overline {
        --upaep-overline-fz: var(--upaep-fz10);
    }

    .upaep__header-logo,
    .upaep__header__logo {
        --upaep-header-logo-margin: 0 18px;
        --upaep-header-logo-padding: 10px 0;
    }

    .upaep__header-center,
    .upaep__header__center {
        right: 20px;
        top: 70px;
    }

    .upaep__header-right,
    .upaep__header__right {
        --upaep-header-right-width: 122px;
    }

    .upaep__header-menu span,
    .upaep__header__menu span {
        --upaep-header-menu-margin: 0 0 0 0.7rem;
    }

    .upaep__header-down,
    .upaep__header__down {
        --upaep-header-down-padding: 10px 0px;
    }

    .upaep__button-language,
    .upaep__button__language {
        background: var(--upaep-header-language-bg);
        border-radius: var(--upaep-header-language-border-radius);
        padding: var(--upaep-header-language-padding);
    }

    .upaep__button-language img,
    .upaep__button__language img {
        --upaep-header-language-width: 22px;
    }

    .upaep__button-language img.escritorio,
    .upaep__button__language img.escritorio {
        display: none;
    }

    .upaep__header-titulo_m,
    .upaep__header__titulo_m {
        text-transform: uppercase;
        --upaep-header-titutlom-margin: 0 20px;
    }

    .upaep__footer .upaep__footer-simple img {
        --upaep-footer-simple-img-width: 80%;
    }

    .upaep__footer-up,
    .upaep__footer__up {
        --upaep-footer-up-maxwidth: 720px;
    }

    /*? utilitie */
    .__d-desktop,
    .d-desktop {
        display: none !important;
    }

    .upaep__menu__desktop,
    .upaep__menu-desktop {
        display: none;
    }

    .upaep__dashboard {

        --upaep-dashboard-sidebar-width: 100dvw;

        & .upaep__dashboard-sidebar {
            position: fixed;
            transition: all .5s;
            z-index: 10;

            &:not(.is-show) {
                translate: -100%;
            }
        }

        & .upaep__dashboard-action-menu {
            .upaep__dashboard-action-menu-desktop {
                display: none;
            }
        }
    }

    .upaep__card.__slice .upaep__card-slice-content {
        border-radius: 50px;
    }

    .upaep__card.__slice {
        --upaep-card-height: 40px;
        --upaep-card-border-radius: 50px;
        --upaep-card-img-content-height: 0;
        --upaep-card-text-height: 0;
    }

    .upaep__card.__sliced .upaep__card-content {
        border-radius: 50px;
    }

    .upaep__card.__sliced {
        --upaep-card-height: 40px;
        --upaep-card-img-content-height: 0;
        --upaep-card-title-height: 40px;
        --upaep-card-text-height: 0;
        --upaep-card-border-radius: 50px;
        --upaep-card-img-content-border-radius: 50px;

        &:hover .upaep__card-text {
            --upaep-card-text-padding: 0;
        }
    }

    .upaep__content-botones-menu,
    .upaep__menu-bar {
        --upaep-menubar-scale: .9;
        --upaep-menubar-content-padding: 0;
        --upaep-menubar-content-text-fz: var(--upaep-fz14);
        --upaep-menubar-content-item: .5rem 0;
        --upaep-menubar-content-item-scale: .9;
    }

    .upaep__contacta-info {
        --upaep-contacta-info-width: 100%;
        --upaep-contacta-info-height: auto;
        --upaep-contacta-info-item-padding: 1rem;
        order: 1;
    }

    .upaep__card.__contacta .upaep__card-content {
        flex-direction: column;
    }

    .formContacto {
        width: 100%;
    }

    .upaep__contacta-info-top {
        padding: 1.5rem 0 0;
    }

    .upaep__contacta-info-item {
        --upaep-contacta-info-item-padding: 0;
        --upaep-contacta-info-item-margin: .5rem 0;
        --upaep-contacta-info-itemtext-text-fz: var(--upaep-fz18);
    }

    .upaep__contacta-info-item.__whats {
        --upaep-contacta-info-itemtext-text-fz: var(--upaep-fz22);
    }

    .upaep__contacta-info-item.__asesor .upaep__contacta-info-text p.__saludo {
        font-size: var(--upaep-fz18);
    }

    .upaep__contacta-info-item.__asesor .upaep__contacta-info-text p.__encargado {
        font-size: var(--upaep-fz18);
    }

    .upaep__contacta-info-item.__asesor .upaep__contacta-info-text p.__text {
        font-size: var(--upaep-fz18);
    }

    .upaep__contacta-info-item.__tel {
        --upaep-contacta-info-itemtext-text-fz: var(--upaep-fz20);
    }

    .upaep__contacta-horario {
        width: 100%;

        & .__text {
            font-size: var(--upaep-fz20);
        }

        & .__horario {
            font-size: var(--upaep-fz20);
        }
    }

    .upaep__banner {
        --upaep-banner-form-width: 100%;
        --upaep-banner-inner-width: 100%;
        --upaep-banner-form-content-bg: none;

        &:has(.upaep__banner-card-form) {
            .upaep__banner-card-texts {
                flex-direction: column-reverse;
                justify-content: start;
                align-items: start;
                background: rgba(0, 0, 0, 0.6);
            }

            .upaep__banner-card-titles {
                padding: 0 !important;
                background: linear-gradient(180deg, #000000, #000000CF, #00000091, #00000000);
                width: 100%;
            }

            .upaep__banner-card-texts .upaep__banner-card-title>* {
                line-height: 60px;
            }
        }
    }


    .upaep__btn.__menu {
        --upaep-btn-width: 55px;
        --upaep-btn-height: 55px;

        a {
            justify-content: center;
        }

        span {
            display: none;
        }
    }

    .upaep__navbar {
        .upaep__navbar-items {
            flex-direction: column;
        }

        .upaep__navbar-toggle {
            display: flex;
            justify-content: end;
            align-items: center;
        }

        &:not(.__offcanvas) {
            .upaep__navbar-collapse {
                overflow: hidden;
                transition: max-height 0.5s ease-out;
                max-height: 0;

                &.is-show {
                    padding: .5rem 0;
                    height: auto;
                    max-height: 50dvh;
                    overflow-y: auto;
                    filter: var(--upaep-drop-shadow);
                }
            }
        }

        &.__offcanvas {
            .upaep__navbar-collapse {
                overflow: hidden;
                position: fixed;
                inset: 0;
                transform: translate(200%, 0);
                transition: transform .8s ease;
                height: 100dvh;
                padding: .5rem 0;
                z-index: var(--upaep-zindex-navbar);

                &.is-show {
                    transform: translate(0, 0);
                    transition: transform .8s ease;

                    .upaep__navbar-items {
                        overflow-y: auto;
                    }
                }
            }
        }

        @keyframes fadeTransform {}


    }

    .upaep__cards.__chess {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, 1fr);
    }

    .upaep__card.__chess {
        --upaep-card-content-width: 100%;
        --upaep-card-img-content-width: 100%;

        &.__r {
            flex-direction: column-reverse;
        }

        &.__l {
            flex-direction: column-reverse;
        }
    }

    .upaep__card.__payment {
        --upaep-card-width: 100%;

        .upaep__card-titles {
            flex-direction: column;
        }

    }

    .upaep__payment {
        .upaep__payment-body {
            grid-template-columns: 1fr;
            gap: 3rem;
        }

        .upaep__payment-info {

            .upaep__payment-info-title {
                font-size: var(--upaep-fz22);
            }

            .upaep__payment-info-content {
                padding: 0 1rem;
            }
        }

        .upaep__balances-item {
            --upaep-label-padding: .5rem;
        }

        .upaep__methods-item {
            --upaep-label-padding: 1rem;

            .upaep__methods-text {

                p {

                    &.__title {
                        font-size: var(--upaep-fz18);
                        font-weight: var(--upaep-fw-bold);
                    }
                }
            }

            .upaep__methods-img {
                width: 25px;
                height: 25px;
            }
        }

        .upaep__options-item {
            --upaep-label-padding: 1rem .5rem;

            .upaep__options-text {
                p {
                    &.__title {
                        font-size: var(--upaep-fz18);
                    }
                }
            }

            .upaep__options-imgs {
                img {
                    height: 35px;

                    &.__visa {
                        width: 60px;
                    }

                    &._mastercard {
                        width: 60px;
                    }

                    &.__bbva {
                        width: 100px;
                    }

                    &.__santander {
                        width: 100px;
                    }
                }
            }
        }
    }

    .upaep__dropzone {
        .upaep__dragdrop {
            display: none;
        }
    }

    .upaep__steps {
        &.__hide-mobile {
            overflow: hidden;

            .upaep__steps-items {

                .upaep__steps-item {

                    &:not(.is-active) {
                        display: none;
                    }
                }
            }
        }

    }

    .upaep__navbar {

        .upaep__navbar-items {

            .upaep__navbar-item.upaep__dropdown {
                .upaep__dropdown-menu {
                    position: relative;
                    transform: translate(0, 0) !important;
                }
            }
        }
    }
}

/* max-width 480px | --upaep-size-sm */
@media(width <=480px) {

    .upaep__block {
        .upaep__block-example {
            flex-direction: column;

            .upaep__block-dom {
                width: 100%;
            }

            .upaep__block-actions {
                width: 100%;
            }
        }
    }

    .upaep__fullscreen,
    .__fullscreen,
    .fullscreen {
        object-fit: cover;
    }

    .upaep__footer-up,
    .upaep__footer__up {
        --upaep-footer-up-maxwidth: 540px;
    }

    .upaep__footer-up_content,
    .upaep__footer__up_content {
        flex-direction: column;
        --upaep-footer-up_content-padding: 0;
        --upaep-footer-up_content-margin: 0;
    }

    .upaep__footer-left,
    .upaep__footer-center,
    .upaep__footer-right,
    .upaep__footer__left,
    .upaep__footer__center,
    .upaep__footer__right {
        --upaep-footer-content-padding: 0;
        --upaep-footer-content-margin: .5rem 0;
    }

    .upaep__menu-bar.__horizontal {
        --upaep-menubar-scale: .9;
        --upaep-menubar-content-width: 100%;
        --upaep-menubar-content-padding: 0;
        --upaep-menubar-content-text-fz: var(--upaep-fz14);
        --upaep-menubar-content-item-scale: .8;
        --upaep-menubar-content-item-direction: column;
        --upaep-menubar-content-padding: 0 1rem;
        --upaep-menubar-content-item-scale: .8;

        .upaep__menu-bar-item {
            flex-direction: column-reverse;
            flex: 1 1 0;
        }
    }

    .table_config_container .table_search,
    .upaep__customtable .upaep__customtable-search {
        flex-direction: column;

        &>div {
            &:has(.search_value) {
                justify-content: center;
            }
        }
    }

    .table_config_container .table_footer_container,
    .upaep__customtable .table_footer_container {
        flex-direction: column;
    }

    .table_config_container .table_pagination {
        flex-wrap: wrap;
        padding: 0;

        &:has(.upaep__pagination) {
            justify-content: center;

            .upaep__pagination {
                --upaep-pagination-width: auto;
            }
        }
    }

    .upaep__customtable .upaep__customtable-pagination {
        flex-wrap: wrap;
        justify-content: center;
        padding: 0;
    }

    .upaep__pagination {
        --upaep-pagination-width: 100%;
        --upaep-pagination-height: auto;
        --upaep-pagination-justify: center;
    }

    .upaep__progresstracker-wrapper {
        margin: 1rem 0;
        padding: 1rem;
        min-height: 150px;
        display: flex;
        align-items: center;
        overflow-x: auto;
        scroll-snap-type: x proximity;
    }

    .upaep__progresstracker-wrapper .upaep__progresstracker {
        --upaep-progresstracker-margin: 0;
        --upaep-progresstracker-padding: 0;
        --upaep-progresstracker-height: 100%;
    }

    .upaep__progresstracker-wrapper .upaep__progresstracker-step {
        min-width: 50%;
        scroll-snap-align: start;
    }

    .upaep__btn.__menu span {
        display: none;
    }

    .upaep__card.__plan-estudios {
        --upaep-card-width: 100%;
        --upaep-card-content-padding: 1rem;
        --upaep-card-title-fz: var(--upaep-fz16);
    }
}

/* max-width 375px | --upaep-size-xs */
@media(width <=375px) {}

/* max-width 360px | --upaep-size-xxs */
@media(width <=360px) {
    .upaep__card.__plan-estudios {
        --upaep-card-title-fz: var(--upaep-fz14);
    }
}


/* rango 1450px - 1920px | --upaep-size-xl */
@media (1450px <=width <=1920px) {}

/* rango 1024px - 1450px | --upaep-size-lg */
@media (1024px <=width <=1450px) {}

/* rango 924px - 1024px | --upaep-size-md */
@media (924px <=width <=1024px) {}

/* rango 480px - 924px | --upaep-size-sm */
@media (480px <=width <=924px) {}

/* rango 375px - 480px | --upaep-size-xs */
@media (375px <=width <=480px) {}

/* rango 360px - 375px | --upaep-size-xxs */
@media (360px <=width <=375px) {}

/* min-width 360px | --upaep-size-xxs */
@media(360px <=width) {}

/* min-width 375px | --upaep-size-xs */
@media(375px <=width) {}

/* min-width 480px | --upaep-size-sm */
@media(480px <=width) {

    .__float-sm-start {
        float: left !important;
    }

    .__float-sm-end {
        float: right !important;
    }

    .__float-sm-none {
        float: none !important;
    }

    .__objectfit-sm-contain {
        object-fit: contain !important;
    }

    .__objectfit-sm-cover {
        object-fit: cover !important;
    }

    .__objectfit-sm-fill {
        object-fit: fill !important;
    }

    .__objectfit-sm-scale {
        object-fit: scale-down !important;
    }

    .__objectfit-none {
        object-fit: none !important;
    }

    .__d-sm-inline {
        display: inline !important;
    }

    .__d-sm-inline-block {
        display: inline-block !important;
    }

    .__d-sm-block {
        display: block !important;
    }

    .__d-sm-grid {
        display: grid !important;
    }

    .__d-sm-inline-grid {
        display: inline-grid !important;
    }

    .__d-sm-table {
        display: table !important;
    }

    .__d-sm-table-row {
        display: table-row !important;
    }

    .__d-sm-table-cell {
        display: table-cell !important;
    }

    .__d-sm-flex {
        display: flex !important;
    }

    .__d-sm-inline-flex {
        display: inline-flex !important;
    }

    .__d-sm-none {
        display: none !important;
    }

    .__flex-sm-fill {
        flex: 1 1 auto !important;
    }

    .__flex-sm-row {
        flex-direction: row !important;
    }

    .__flex-sm-column {
        flex-direction: column !important;
    }

    .__flex-sm-row-reverse {
        flex-direction: row-reverse !important;
    }

    .__flex-sm-column-reverse {
        flex-direction: column-reverse !important;
    }

    .__flex-sm-grow-0 {
        flex-grow: 0 !important;
    }

    .__flex-sm-grow-1 {
        flex-grow: 1 !important;
    }

    .__flex-sm-shrink-0 {
        flex-shrink: 0 !important;
    }

    .__flex-sm-shrink-1 {
        flex-shrink: 1 !important;
    }

    .__flex-sm-wrap {
        flex-wrap: wrap !important;
    }

    .__flex-sm-nowrap {
        flex-wrap: nowrap !important;
    }

    .__flex-sm-wrap-reverse {
        flex-wrap: wrap-reverse !important;
    }

    .__justify-content-sm-start {
        justify-content: flex-start !important;
    }

    .__justify-content-sm-end {
        justify-content: flex-end !important;
    }

    .__justify-content-sm-center {
        justify-content: center !important;
    }

    .__justify-content-sm-between {
        justify-content: space-between !important;
    }

    .__justify-content-sm-around {
        justify-content: space-around !important;
    }

    .__justify-content-sm-evenly {
        justify-content: space-evenly !important;
    }

    .__align-items-sm-start {
        align-items: flex-start !important;
    }

    .__align-items-sm-end {
        align-items: flex-end !important;
    }

    .__align-items-sm-center {
        align-items: center !important;
    }

    .__align-items-sm-baseline {
        align-items: baseline !important;
    }

    .__align-items-sm-stretch {
        align-items: stretch !important;
    }

    .__align-content-sm-start {
        align-content: flex-start !important;
    }

    .__align-content-sm-end {
        align-content: flex-end !important;
    }

    .__align-content-sm-center {
        align-content: center !important;
    }

    .__align-content-sm-between {
        align-content: space-between !important;
    }

    .__align-content-sm-around {
        align-content: space-around !important;
    }

    .__align-content-sm-stretch {
        align-content: stretch !important;
    }

    .__align-self-sm-auto {
        align-self: auto !important;
    }

    .__align-self-sm-start {
        align-self: flex-start !important;
    }

    .__align-self-sm-end {
        align-self: flex-end !important;
    }

    .__align-self-sm-center {
        align-self: center !important;
    }

    .__align-self-sm-baseline {
        align-self: baseline !important;
    }

    .__align-self-sm-stretch {
        align-self: stretch !important;
    }

    .__order-sm-first {
        order: -1 !important;
    }

    .__order-sm-0 {
        order: 0 !important;
    }

    .__order-sm-1 {
        order: 1 !important;
    }

    .__order-sm-2 {
        order: 2 !important;
    }

    .__order-sm-3 {
        order: 3 !important;
    }

    .__order-sm-4 {
        order: 4 !important;
    }

    .__order-sm-5 {
        order: 5 !important;
    }

    .__order-sm-last {
        order: 6 !important;
    }

    .__m-sm-0 {
        margin: 0 !important;
    }

    .__m-sm-1 {
        margin: 0.25rem !important;
    }

    .__m-sm-2 {
        margin: 0.5rem !important;
    }

    .__m-sm-3 {
        margin: 1rem !important;
    }

    .__m-sm-4 {
        margin: 1.5rem !important;
    }

    .__m-sm-5 {
        margin: 3rem !important;
    }

    .__m-sm-auto {
        margin: auto !important;
    }

    .__mx-sm-0 {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .__mx-sm-1 {
        margin-right: 0.25rem !important;
        margin-left: 0.25rem !important;
    }

    .__mx-sm-2 {
        margin-right: 0.5rem !important;
        margin-left: 0.5rem !important;
    }

    .__mx-sm-3 {
        margin-right: 1rem !important;
        margin-left: 1rem !important;
    }

    .__mx-sm-4 {
        margin-right: 1.5rem !important;
        margin-left: 1.5rem !important;
    }

    .__mx-sm-5 {
        margin-right: 3rem !important;
        margin-left: 3rem !important;
    }

    .__mx-sm-auto {
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .__my-sm-0 {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .__my-sm-1 {
        margin-top: 0.25rem !important;
        margin-bottom: 0.25rem !important;
    }

    .__my-sm-2 {
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    .__my-sm-3 {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }

    .__my-sm-4 {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    .__my-sm-5 {
        margin-top: 3rem !important;
        margin-bottom: 3rem !important;
    }

    .__my-sm-auto {
        margin-top: auto !important;
        margin-bottom: auto !important;
    }

    .__mt-sm-0 {
        margin-top: 0 !important;
    }

    .__mt-sm-1 {
        margin-top: 0.25rem !important;
    }

    .__mt-sm-2 {
        margin-top: 0.5rem !important;
    }

    .__mt-sm-3 {
        margin-top: 1rem !important;
    }

    .__mt-sm-4 {
        margin-top: 1.5rem !important;
    }

    .__mt-sm-5 {
        margin-top: 3rem !important;
    }

    .__mt-sm-auto {
        margin-top: auto !important;
    }

    .__me-sm-0 {
        margin-right: 0 !important;
    }

    .__me-sm-1 {
        margin-right: 0.25rem !important;
    }

    .__me-sm-2 {
        margin-right: 0.5rem !important;
    }

    .__me-sm-3 {
        margin-right: 1rem !important;
    }

    .__me-sm-4 {
        margin-right: 1.5rem !important;
    }

    .__me-sm-5 {
        margin-right: 3rem !important;
    }

    .__me-sm-auto {
        margin-right: auto !important;
    }

    .__mb-sm-0 {
        margin-bottom: 0 !important;
    }

    .__mb-sm-1 {
        margin-bottom: 0.25rem !important;
    }

    .__mb-sm-2 {
        margin-bottom: 0.5rem !important;
    }

    .__mb-sm-3 {
        margin-bottom: 1rem !important;
    }

    .__mb-sm-4 {
        margin-bottom: 1.5rem !important;
    }

    .__mb-sm-5 {
        margin-bottom: 3rem !important;
    }

    .__mb-sm-auto {
        margin-bottom: auto !important;
    }

    .__ms-sm-0 {
        margin-left: 0 !important;
    }

    .__ms-sm-1 {
        margin-left: 0.25rem !important;
    }

    .__ms-sm-2 {
        margin-left: 0.5rem !important;
    }

    .__ms-sm-3 {
        margin-left: 1rem !important;
    }

    .__ms-sm-4 {
        margin-left: 1.5rem !important;
    }

    .__ms-sm-5 {
        margin-left: 3rem !important;
    }

    .__ms-sm-auto {
        margin-left: auto !important;
    }

    .__p-sm-0 {
        padding: 0 !important;
    }

    .__p-sm-1 {
        padding: 0.25rem !important;
    }

    .__p-sm-2 {
        padding: 0.5rem !important;
    }

    .__p-sm-3 {
        padding: 1rem !important;
    }

    .__p-sm-4 {
        padding: 1.5rem !important;
    }

    .__p-sm-5 {
        padding: 3rem !important;
    }

    .__px-sm-0 {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .__px-sm-1 {
        padding-right: 0.25rem !important;
        padding-left: 0.25rem !important;
    }

    .__px-sm-2 {
        padding-right: 0.5rem !important;
        padding-left: 0.5rem !important;
    }

    .__px-sm-3 {
        padding-right: 1rem !important;
        padding-left: 1rem !important;
    }

    .__px-sm-4 {
        padding-right: 1.5rem !important;
        padding-left: 1.5rem !important;
    }

    .__px-sm-5 {
        padding-right: 3rem !important;
        padding-left: 3rem !important;
    }

    .__py-sm-0 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .__py-sm-1 {
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
    }

    .__py-sm-2 {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    .__py-sm-3 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .__py-sm-4 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    .__py-sm-5 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    .__pt-sm-0 {
        padding-top: 0 !important;
    }

    .__pt-sm-1 {
        padding-top: 0.25rem !important;
    }

    .__pt-sm-2 {
        padding-top: 0.5rem !important;
    }

    .__pt-sm-3 {
        padding-top: 1rem !important;
    }

    .__pt-sm-4 {
        padding-top: 1.5rem !important;
    }

    .__pt-sm-5 {
        padding-top: 3rem !important;
    }

    .__pe-sm-0 {
        padding-right: 0 !important;
    }

    .__pe-sm-1 {
        padding-right: 0.25rem !important;
    }

    .__pe-sm-2 {
        padding-right: 0.5rem !important;
    }

    .__pe-sm-3 {
        padding-right: 1rem !important;
    }

    .__pe-sm-4 {
        padding-right: 1.5rem !important;
    }

    .__pe-sm-5 {
        padding-right: 3rem !important;
    }

    .__pb-sm-0 {
        padding-bottom: 0 !important;
    }

    .__pb-sm-1 {
        padding-bottom: 0.25rem !important;
    }

    .__pb-sm-2 {
        padding-bottom: 0.5rem !important;
    }

    .__pb-sm-3 {
        padding-bottom: 1rem !important;
    }

    .__pb-sm-4 {
        padding-bottom: 1.5rem !important;
    }

    .__pb-sm-5 {
        padding-bottom: 3rem !important;
    }

    .__ps-sm-0 {
        padding-left: 0 !important;
    }

    .__ps-sm-1 {
        padding-left: 0.25rem !important;
    }

    .__ps-sm-2 {
        padding-left: 0.5rem !important;
    }

    .__ps-sm-3 {
        padding-left: 1rem !important;
    }

    .__ps-sm-4 {
        padding-left: 1.5rem !important;
    }

    .__ps-sm-5 {
        padding-left: 3rem !important;
    }

    .__gap-sm-0 {
        gap: 0 !important;
    }

    .__gap-sm-1 {
        gap: 0.25rem !important;
    }

    .__gap-sm-2 {
        gap: 0.5rem !important;
    }

    .__gap-sm-3 {
        gap: 1rem !important;
    }

    .__gap-sm-4 {
        gap: 1.5rem !important;
    }

    .__gap-sm-5 {
        gap: 3rem !important;
    }

    .__text-sm-start {
        text-align: left !important;
    }

    .__text-sm-end {
        text-align: right !important;
    }

    .__text-sm-center {
        text-align: center !important;
    }

    .upaep__container-sm,
    .upaep__container {
        max-width: 450px;
    }


    .__row-cols-sm-auto>*,
    .upaep__row-cols-sm-auto>* {
        flex: 0 0 auto;
        width: auto;
    }

    .__row-cols-sm-1>*,
    .upaep__row-cols-sm-1>* {
        flex: 0 0 auto;
        width: calc(100% / 1);
    }

    .__row-cols-sm-2>*,
    .upaep__row-cols-sm-2>* {
        flex: 0 0 auto;
        width: calc(100% / 2);
    }

    .__row-cols-sm-3>*,
    .upaep__row-cols-sm-3>* {
        flex: 0 0 auto;
        width: calc(100% / 3);
    }

    .__row-cols-sm-4>*,
    .upaep__row-cols-sm-4>* {
        flex: 0 0 auto;
        width: calc(100% / 4);
    }

    .__row-cols-sm-5>*,
    .upaep__row-cols-sm-5>* {
        flex: 0 0 auto;
        width: calc(100% / 5);
    }

    .__row-cols-sm-6>*,
    .upaep__row-cols-sm-6>* {
        flex: 0 0 auto;
        width: calc(100% / 6);
    }

    .__col-sm-auto,
    .upaep__col-sm-auto {
        flex: 0 0 auto;
        width: auto;
    }

    .__col-sm-1,
    .upaep__col-sm-1 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 1);
    }

    .__col-sm-2,
    .upaep__col-sm-2 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 2);
    }

    .__col-sm-3,
    .upaep__col-sm-3 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 3);
    }

    .__col-sm-4,
    .upaep__col-sm-4 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 4);
    }

    .__col-sm-5,
    .upaep__col-sm-5 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 5);
    }

    .__col-sm-6,
    .upaep__col-sm-6 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 6);
    }

    .__col-sm-7,
    .upaep__col-sm-7 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 7);
    }

    .__col-sm-8,
    .upaep__col-sm-8 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 8);
    }

    .__col-sm-9,
    .upaep__col-sm-9 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 9);
    }

    .__col-sm-10,
    .upaep__col-sm-10 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 10);
    }

    .__col-sm-11,
    .upaep__col-sm-11 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 11);
    }

    .__col-sm-12,
    .upaep__col-sm-12 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 12);
    }
}

/* min-width 768px | --upaep-size-md  */
@media(768px <=width) {

    .__float-md-start {
        float: left !important;
    }

    .__float-md-end {
        float: right !important;
    }

    .__float-md-none {
        float: none !important;
    }

    .__objectfit-md-contain {
        object-fit: contain !important;
    }

    .__objectfit-md-cover {
        object-fit: cover !important;
    }

    .__objectfit-md-fill {
        object-fit: fill !important;
    }

    .__objectfit-md-scale {
        object-fit: scale-down !important;
    }

    .__objectfit-none {
        object-fit: none !important;
    }

    .__d-md-inline {
        display: inline !important;
    }

    .__d-md-inline-block {
        display: inline-block !important;
    }

    .__d-md-block {
        display: block !important;
    }

    .__d-md-grid {
        display: grid !important;
    }

    .__d-md-inline-grid {
        display: inline-grid !important;
    }

    .__d-md-table {
        display: table !important;
    }

    .__d-md-table-row {
        display: table-row !important;
    }

    .__d-md-table-cell {
        display: table-cell !important;
    }

    .__d-md-flex {
        display: flex !important;
    }

    .__d-md-inline-flex {
        display: inline-flex !important;
    }

    .__d-md-none {
        display: none !important;
    }

    .__flex-md-fill {
        flex: 1 1 auto !important;
    }

    .__flex-md-row {
        flex-direction: row !important;
    }

    .__flex-md-column {
        flex-direction: column !important;
    }

    .__flex-md-row-reverse {
        flex-direction: row-reverse !important;
    }

    .__flex-md-column-reverse {
        flex-direction: column-reverse !important;
    }

    .__flex-md-grow-0 {
        flex-grow: 0 !important;
    }

    .__flex-md-grow-1 {
        flex-grow: 1 !important;
    }

    .__flex-md-shrink-0 {
        flex-shrink: 0 !important;
    }

    .__flex-md-shrink-1 {
        flex-shrink: 1 !important;
    }

    .__flex-md-wrap {
        flex-wrap: wrap !important;
    }

    .__flex-md-nowrap {
        flex-wrap: nowrap !important;
    }

    .__flex-md-wrap-reverse {
        flex-wrap: wrap-reverse !important;
    }

    .__justify-content-md-start {
        justify-content: flex-start !important;
    }

    .__justify-content-md-end {
        justify-content: flex-end !important;
    }

    .__justify-content-md-center {
        justify-content: center !important;
    }

    .__justify-content-md-between {
        justify-content: space-between !important;
    }

    .__justify-content-md-around {
        justify-content: space-around !important;
    }

    .__justify-content-md-evenly {
        justify-content: space-evenly !important;
    }

    .__align-items-md-start {
        align-items: flex-start !important;
    }

    .__align-items-md-end {
        align-items: flex-end !important;
    }

    .__align-items-md-center {
        align-items: center !important;
    }

    .__align-items-md-baseline {
        align-items: baseline !important;
    }

    .__align-items-md-stretch {
        align-items: stretch !important;
    }

    .__align-content-md-start {
        align-content: flex-start !important;
    }

    .__align-content-md-end {
        align-content: flex-end !important;
    }

    .__align-content-md-center {
        align-content: center !important;
    }

    .__align-content-md-between {
        align-content: space-between !important;
    }

    .__align-content-md-around {
        align-content: space-around !important;
    }

    .__align-content-md-stretch {
        align-content: stretch !important;
    }

    .__align-self-md-auto {
        align-self: auto !important;
    }

    .__align-self-md-start {
        align-self: flex-start !important;
    }

    .__align-self-md-end {
        align-self: flex-end !important;
    }

    .__align-self-md-center {
        align-self: center !important;
    }

    .__align-self-md-baseline {
        align-self: baseline !important;
    }

    .__align-self-md-stretch {
        align-self: stretch !important;
    }

    .__order-md-first {
        order: -1 !important;
    }

    .__order-md-0 {
        order: 0 !important;
    }

    .__order-md-1 {
        order: 1 !important;
    }

    .__order-md-2 {
        order: 2 !important;
    }

    .__order-md-3 {
        order: 3 !important;
    }

    .__order-md-4 {
        order: 4 !important;
    }

    .__order-md-5 {
        order: 5 !important;
    }

    .__order-md-last {
        order: 6 !important;
    }

    .__m-md-0 {
        margin: 0 !important;
    }

    .__m-md-1 {
        margin: 0.25rem !important;
    }

    .__m-md-2 {
        margin: 0.5rem !important;
    }

    .__m-md-3 {
        margin: 1rem !important;
    }

    .__m-md-4 {
        margin: 1.5rem !important;
    }

    .__m-md-5 {
        margin: 3rem !important;
    }

    .__m-md-auto {
        margin: auto !important;
    }

    .__mx-md-0 {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .__mx-md-1 {
        margin-right: 0.25rem !important;
        margin-left: 0.25rem !important;
    }

    .__mx-md-2 {
        margin-right: 0.5rem !important;
        margin-left: 0.5rem !important;
    }

    .__mx-md-3 {
        margin-right: 1rem !important;
        margin-left: 1rem !important;
    }

    .__mx-md-4 {
        margin-right: 1.5rem !important;
        margin-left: 1.5rem !important;
    }

    .__mx-md-5 {
        margin-right: 3rem !important;
        margin-left: 3rem !important;
    }

    .__mx-md-auto {
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .__my-md-0 {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .__my-md-1 {
        margin-top: 0.25rem !important;
        margin-bottom: 0.25rem !important;
    }

    .__my-md-2 {
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    .__my-md-3 {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }

    .__my-md-4 {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    .__my-md-5 {
        margin-top: 3rem !important;
        margin-bottom: 3rem !important;
    }

    .__my-md-auto {
        margin-top: auto !important;
        margin-bottom: auto !important;
    }

    .__mt-md-0 {
        margin-top: 0 !important;
    }

    .__mt-md-1 {
        margin-top: 0.25rem !important;
    }

    .__mt-md-2 {
        margin-top: 0.5rem !important;
    }

    .__mt-md-3 {
        margin-top: 1rem !important;
    }

    .__mt-md-4 {
        margin-top: 1.5rem !important;
    }

    .__mt-md-5 {
        margin-top: 3rem !important;
    }

    .__mt-md-auto {
        margin-top: auto !important;
    }

    .__me-md-0 {
        margin-right: 0 !important;
    }

    .__me-md-1 {
        margin-right: 0.25rem !important;
    }

    .__me-md-2 {
        margin-right: 0.5rem !important;
    }

    .__me-md-3 {
        margin-right: 1rem !important;
    }

    .me-md-4 {
        margin-right: 1.5rem !important;
    }

    .__me-md-5 {
        margin-right: 3rem !important;
    }

    .__me-md-auto {
        margin-right: auto !important;
    }

    .__mb-md-0 {
        margin-bottom: 0 !important;
    }

    .__mb-md-1 {
        margin-bottom: 0.25rem !important;
    }

    .__mb-md-2 {
        margin-bottom: 0.5rem !important;
    }

    .__mb-md-3 {
        margin-bottom: 1rem !important;
    }

    .__mb-md-4 {
        margin-bottom: 1.5rem !important;
    }

    .__mb-md-5 {
        margin-bottom: 3rem !important;
    }

    .__mb-md-auto {
        margin-bottom: auto !important;
    }

    .__ms-md-0 {
        margin-left: 0 !important;
    }

    .__ms-md-1 {
        margin-left: 0.25rem !important;
    }

    .__ms-md-2 {
        margin-left: 0.5rem !important;
    }

    .__ms-md-3 {
        margin-left: 1rem !important;
    }

    .__ms-md-4 {
        margin-left: 1.5rem !important;
    }

    .__ms-md-5 {
        margin-left: 3rem !important;
    }

    .__ms-md-auto {
        margin-left: auto !important;
    }

    .__p-md-0 {
        padding: 0 !important;
    }

    .__p-md-1 {
        padding: 0.25rem !important;
    }

    .__p-md-2 {
        padding: 0.5rem !important;
    }

    .__p-md-3 {
        padding: 1rem !important;
    }

    .__p-md-4 {
        padding: 1.5rem !important;
    }

    .__p-md-5 {
        padding: 3rem !important;
    }

    .__px-md-0 {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .__px-md-1 {
        padding-right: 0.25rem !important;
        padding-left: 0.25rem !important;
    }

    .__px-md-2 {
        padding-right: 0.5rem !important;
        padding-left: 0.5rem !important;
    }

    .__px-md-3 {
        padding-right: 1rem !important;
        padding-left: 1rem !important;
    }

    .__px-md-4 {
        padding-right: 1.5rem !important;
        padding-left: 1.5rem !important;
    }

    .__px-md-5 {
        padding-right: 3rem !important;
        padding-left: 3rem !important;
    }

    .__py-md-0 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .__py-md-1 {
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
    }

    .__py-md-2 {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    .__py-md-3 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .__py-md-4 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    .__py-md-5 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    .__pt-md-0 {
        padding-top: 0 !important;
    }

    .__pt-md-1 {
        padding-top: 0.25rem !important;
    }

    .__pt-md-2 {
        padding-top: 0.5rem !important;
    }

    .__pt-md-3 {
        padding-top: 1rem !important;
    }

    .__pt-md-4 {
        padding-top: 1.5rem !important;
    }

    .__pt-md-5 {
        padding-top: 3rem !important;
    }

    .__pe-md-0 {
        padding-right: 0 !important;
    }

    .__pe-md-1 {
        padding-right: 0.25rem !important;
    }

    .__pe-md-2 {
        padding-right: 0.5rem !important;
    }

    .__pe-md-3 {
        padding-right: 1rem !important;
    }

    .__pe-md-4 {
        padding-right: 1.5rem !important;
    }

    .__pe-md-5 {
        padding-right: 3rem !important;
    }

    .__pb-md-0 {
        padding-bottom: 0 !important;
    }

    .__pb-md-1 {
        padding-bottom: 0.25rem !important;
    }

    .__pb-md-2 {
        padding-bottom: 0.5rem !important;
    }

    .__pb-md-3 {
        padding-bottom: 1rem !important;
    }

    .__pb-md-4 {
        padding-bottom: 1.5rem !important;
    }

    .__pb-md-5 {
        padding-bottom: 3rem !important;
    }

    .__ps-md-0 {
        padding-left: 0 !important;
    }

    .__ps-md-1 {
        padding-left: 0.25rem !important;
    }

    .__ps-md-2 {
        padding-left: 0.5rem !important;
    }

    .__ps-md-3 {
        padding-left: 1rem !important;
    }

    .__ps-md-4 {
        padding-left: 1.5rem !important;
    }

    .__ps-md-5 {
        padding-left: 3rem !important;
    }

    .__gap-md-0 {
        gap: 0 !important;
    }

    .__gap-md-1 {
        gap: 0.25rem !important;
    }

    .__gap-md-2 {
        gap: 0.5rem !important;
    }

    .__gap-md-3 {
        gap: 1rem !important;
    }

    .__gap-md-4 {
        gap: 1.5rem !important;
    }

    .__gap-md-5 {
        gap: 3rem !important;
    }

    .__text-md-start {
        text-align: left !important;
    }

    .__text-md-end {
        text-align: right !important;
    }

    .__text-md-center {
        text-align: center !important;
    }

    .__row-cols-md-auto>*,
    .upaep__row-cols-md-auto>* {
        flex: 0 0 auto;
        width: auto;
    }

    .__row-cols-md-1>*,
    .upaep__row-cols-md-1>* {
        flex: 0 0 auto;
        width: calc(100% / 1);
    }

    .__row-cols-md-2>*,
    .upaep__row-cols-md-2>* {
        flex: 0 0 auto;
        width: calc(100% / 2);
    }

    .__row-cols-md-3>*,
    .upaep__row-cols-md-3>* {
        flex: 0 0 auto;
        width: calc(100% / 3);
    }

    .__row-cols-md-4>*,
    .upaep__row-cols-md-4>* {
        flex: 0 0 auto;
        width: calc(100% / 4);
    }

    .__row-cols-md-5>*,
    .upaep__row-cols-md-5>* {
        flex: 0 0 auto;
        width: calc(100% / 5);
    }

    .__row-cols-md-6>*,
    .upaep__row-cols-md-6>* {
        flex: 0 0 auto;
        width: calc(100% / 6);
    }

    .__col-md-auto,
    .upaep__col-md-auto {
        flex: 0 0 auto;
        width: auto;
    }

    .__col-md-1,
    .upaep__col-md-1 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 1);
    }

    .__col-md-2,
    .upaep__col-md-2 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 2);
    }

    .__col-md-3,
    .upaep__col-md-3 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 3);
    }

    .__col-md-4,
    .upaep__col-md-4 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 4);
    }

    .__col-md-5,
    .upaep__col-md-5 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 5);
    }

    .__col-md-6,
    .upaep__col-md-6 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 6);
    }

    .__col-md-7,
    .upaep__col-md-7 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 7);
    }

    .__col-md-8,
    .upaep__col-md-8 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 8);
    }

    .__col-md-9,
    .upaep__col-md-9 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 9);
    }

    .__col-md-10,
    .upaep__col-md-10 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 10);
    }

    .__col-md-11,
    .upaep__col-md-11 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 11);
    }

    .__col-md-12,
    .upaep__col-md-12 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 12);
    }
}

/* min-width 924px | --upaep-size-md  */
@media(924px <=width) {

    .upaep__container-md,
    .upaep__container-sm,
    .upaep__container {
        max-width: 720px;
    }

    /*? utilitie */
    .__d-mobile,
    .d-mobile {
        display: none !important;
    }

    .upaep__menu__mobile,
    .upaep__menu-mobile {
        display: none;
    }


    & .upaep__dashboard-action-menu {
        .upaep__dashboard-action-menu-mobile {
            display: none;
        }

        &:has(.upaep__dashboard-action-menu-close) {
            display: none;
        }

        .upaep__dashboard-action-menu-close {
            display: none;
        }
    }

    .upaep__navbar {
        .upaep__navbar-toggle {
            display: none;
        }

        .upaep__navbar-collapse {
            display: flex;
            flex-basis: auto;
            flex-grow: inherit;
        }
    }

    .upaep__button-language img.movil,
    .upaep__button__language img.movil {
        display: none;
    }

    .upaep__card.__slice:not(:hover).upaep__card-slice-content {
        border-radius: 50px;
    }

    .upaep__card.__slice:not(:hover) {
        --upaep-card-height: 40px;
        --upaep-card-border-radius: 50px;
        --upaep-card-img-content-height: 0;
        --upaep-card-text-height: 0;
    }

    .upaep__card.__sliced {

        &:not(:hover) {
            --upaep-card-height: 40px;
            --upaep-card-img-content-height: 0;
            --upaep-card-title-height: 40px;
            --upaep-card-text-height: 0;
            --upaep-card-border-radius: 50px;
            --upaep-card-img-content-border-radius: 50px;

            .upaep__card-content {
                border-radius: 50px;
            }
        }

        &:hover {
            --upaep-card-text-padding: 0;
        }
    }

    .upaep__fullscreen,
    .__fullscreen,
    .fullscreen {
        object-fit: cover;
    }
}

/* min-width 1024px | --upaep-size-lg  */
@media(1024px <=width) {

    .upaep__container-lg,
    .upaep__container-md,
    .upaep__container-sm,
    .upaep__container {
        max-width: 960px;
    }

    .__float-lg-start {
        float: left !important;
    }

    .__float-lg-end {
        float: right !important;
    }

    .__float-lg-none {
        float: none !important;
    }

    .__objectfit-lg-contain {
        object-fit: contain !important;
    }

    .__objectfit-lg-cover {
        object-fit: cover !important;
    }

    .__objectfit-lg-fill {
        object-fit: fill !important;
    }

    .__objectfit-lg-scale {
        object-fit: scale-down !important;
    }

    .__objectfit-none {
        object-fit: none !important;
    }

    .__d-lg-inline {
        display: inline !important;
    }

    .__d-lg-inline-block {
        display: inline-block !important;
    }

    .__d-lg-block {
        display: block !important;
    }

    .__d-lg-grid {
        display: grid !important;
    }

    .__d-lg-inline-grid {
        display: inline-grid !important;
    }

    .__d-lg-table {
        display: table !important;
    }

    .__d-lg-table-row {
        display: table-row !important;
    }

    .__d-lg-table-cell {
        display: table-cell !important;
    }

    .__d-lg-flex {
        display: flex !important;
    }

    .__d-lg-inline-flex {
        display: inline-flex !important;
    }

    .__d-lg-none {
        display: none !important;
    }

    .__flex-lg-fill {
        flex: 1 1 auto !important;
    }

    .__flex-lg-row {
        flex-direction: row !important;
    }

    .__flex-lg-column {
        flex-direction: column !important;
    }

    .__flex-lg-row-reverse {
        flex-direction: row-reverse !important;
    }

    .__flex-lg-column-reverse {
        flex-direction: column-reverse !important;
    }

    .__flex-lg-grow-0 {
        flex-grow: 0 !important;
    }

    .__flex-lg-grow-1 {
        flex-grow: 1 !important;
    }

    .__flex-lg-shrink-0 {
        flex-shrink: 0 !important;
    }

    .__flex-lg-shrink-1 {
        flex-shrink: 1 !important;
    }

    .__flex-lg-wrap {
        flex-wrap: wrap !important;
    }

    .__flex-lg-nowrap {
        flex-wrap: nowrap !important;
    }

    .__flex-lg-wrap-reverse {
        flex-wrap: wrap-reverse !important;
    }

    .__justify-content-lg-start {
        justify-content: flex-start !important;
    }

    .__justify-content-lg-end {
        justify-content: flex-end !important;
    }

    .__justify-content-lg-center {
        justify-content: center !important;
    }

    .__justify-content-lg-between {
        justify-content: space-between !important;
    }

    .__justify-content-lg-around {
        justify-content: space-around !important;
    }

    .__justify-content-lg-evenly {
        justify-content: space-evenly !important;
    }

    .__align-items-lg-start {
        align-items: flex-start !important;
    }

    .__align-items-lg-end {
        align-items: flex-end !important;
    }

    .__align-items-lg-center {
        align-items: center !important;
    }

    .__align-items-lg-baseline {
        align-items: baseline !important;
    }

    .__align-items-lg-stretch {
        align-items: stretch !important;
    }

    .__align-content-lg-start {
        align-content: flex-start !important;
    }

    .__align-content-lg-end {
        align-content: flex-end !important;
    }

    .__align-content-lg-center {
        align-content: center !important;
    }

    .__align-content-lg-between {
        align-content: space-between !important;
    }

    .__align-content-lg-around {
        align-content: space-around !important;
    }

    .__align-content-lg-stretch {
        align-content: stretch !important;
    }

    .__align-self-lg-auto {
        align-self: auto !important;
    }

    .__align-self-lg-start {
        align-self: flex-start !important;
    }

    .__align-self-lg-end {
        align-self: flex-end !important;
    }

    .__align-self-lg-center {
        align-self: center !important;
    }

    .__align-self-lg-baseline {
        align-self: baseline !important;
    }

    .__align-self-lg-stretch {
        align-self: stretch !important;
    }

    .__order-lg-first {
        order: -1 !important;
    }

    .__order-lg-0 {
        order: 0 !important;
    }

    .__order-lg-1 {
        order: 1 !important;
    }

    .__order-lg-2 {
        order: 2 !important;
    }

    .__order-lg-3 {
        order: 3 !important;
    }

    .__order-lg-4 {
        order: 4 !important;
    }

    .__order-lg-5 {
        order: 5 !important;
    }

    .__order-lg-last {
        order: 6 !important;
    }

    .__m-lg-0 {
        margin: 0 !important;
    }

    .__m-lg-1 {
        margin: 0.25rem !important;
    }

    .__m-lg-2 {
        margin: 0.5rem !important;
    }

    .__m-lg-3 {
        margin: 1rem !important;
    }

    .__m-lg-4 {
        margin: 1.5rem !important;
    }

    .__m-lg-5 {
        margin: 3rem !important;
    }

    .__m-lg-auto {
        margin: auto !important;
    }

    .__mx-lg-0 {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .__mx-lg-1 {
        margin-right: 0.25rem !important;
        margin-left: 0.25rem !important;
    }

    .__mx-lg-2 {
        margin-right: 0.5rem !important;
        margin-left: 0.5rem !important;
    }

    .__mx-lg-3 {
        margin-right: 1rem !important;
        margin-left: 1rem !important;
    }

    .__mx-lg-4 {
        margin-right: 1.5rem !important;
        margin-left: 1.5rem !important;
    }

    .__mx-lg-5 {
        margin-right: 3rem !important;
        margin-left: 3rem !important;
    }

    .__mx-lg-auto {
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .__my-lg-0 {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .__my-lg-1 {
        margin-top: 0.25rem !important;
        margin-bottom: 0.25rem !important;
    }

    .__my-lg-2 {
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    .__my-lg-3 {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }

    .__my-lg-4 {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    .__my-lg-5 {
        margin-top: 3rem !important;
        margin-bottom: 3rem !important;
    }

    .__my-lg-auto {
        margin-top: auto !important;
        margin-bottom: auto !important;
    }

    .__mt-lg-0 {
        margin-top: 0 !important;
    }

    .__mt-lg-1 {
        margin-top: 0.25rem !important;
    }

    .__mt-lg-2 {
        margin-top: 0.5rem !important;
    }

    .__mt-lg-3 {
        margin-top: 1rem !important;
    }

    .__mt-lg-4 {
        margin-top: 1.5rem !important;
    }

    .__mt-lg-5 {
        margin-top: 3rem !important;
    }

    .__mt-lg-auto {
        margin-top: auto !important;
    }

    .__me-lg-0 {
        margin-right: 0 !important;
    }

    .__me-lg-1 {
        margin-right: 0.25rem !important;
    }

    .__me-lg-2 {
        margin-right: 0.5rem !important;
    }

    .__me-lg-3 {
        margin-right: 1rem !important;
    }

    .me-lg-4 {
        margin-right: 1.5rem !important;
    }

    .__me-lg-5 {
        margin-right: 3rem !important;
    }

    .__me-lg-auto {
        margin-right: auto !important;
    }

    .__mb-lg-0 {
        margin-bottom: 0 !important;
    }

    .__mb-lg-1 {
        margin-bottom: 0.25rem !important;
    }

    .__mb-lg-2 {
        margin-bottom: 0.5rem !important;
    }

    .__mb-lg-3 {
        margin-bottom: 1rem !important;
    }

    .__mb-lg-4 {
        margin-bottom: 1.5rem !important;
    }

    .__mb-lg-5 {
        margin-bottom: 3rem !important;
    }

    .__mb-lg-auto {
        margin-bottom: auto !important;
    }

    .__ms-lg-0 {
        margin-left: 0 !important;
    }

    .__ms-lg-1 {
        margin-left: 0.25rem !important;
    }

    .__ms-lg-2 {
        margin-left: 0.5rem !important;
    }

    .__ms-lg-3 {
        margin-left: 1rem !important;
    }

    .__ms-lg-4 {
        margin-left: 1.5rem !important;
    }

    .__ms-lg-5 {
        margin-left: 3rem !important;
    }

    .__ms-lg-auto {
        margin-left: auto !important;
    }

    .__p-lg-0 {
        padding: 0 !important;
    }

    .__p-lg-1 {
        padding: 0.25rem !important;
    }

    .__p-lg-2 {
        padding: 0.5rem !important;
    }

    .__p-lg-3 {
        padding: 1rem !important;
    }

    .__p-lg-4 {
        padding: 1.5rem !important;
    }

    .__p-lg-5 {
        padding: 3rem !important;
    }

    .__px-lg-0 {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .__px-lg-1 {
        padding-right: 0.25rem !important;
        padding-left: 0.25rem !important;
    }

    .__px-lg-2 {
        padding-right: 0.5rem !important;
        padding-left: 0.5rem !important;
    }

    .__px-lg-3 {
        padding-right: 1rem !important;
        padding-left: 1rem !important;
    }

    .__px-lg-4 {
        padding-right: 1.5rem !important;
        padding-left: 1.5rem !important;
    }

    .__px-lg-5 {
        padding-right: 3rem !important;
        padding-left: 3rem !important;
    }

    .__py-lg-0 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .__py-lg-1 {
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
    }

    .__py-lg-2 {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    .__py-lg-3 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .__py-lg-4 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    .__py-lg-5 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    .__pt-lg-0 {
        padding-top: 0 !important;
    }

    .__pt-lg-1 {
        padding-top: 0.25rem !important;
    }

    .__pt-lg-2 {
        padding-top: 0.5rem !important;
    }

    .__pt-lg-3 {
        padding-top: 1rem !important;
    }

    .__pt-lg-4 {
        padding-top: 1.5rem !important;
    }

    .__pt-lg-5 {
        padding-top: 3rem !important;
    }

    .__pe-lg-0 {
        padding-right: 0 !important;
    }

    .__pe-lg-1 {
        padding-right: 0.25rem !important;
    }

    .__pe-lg-2 {
        padding-right: 0.5rem !important;
    }

    .__pe-lg-3 {
        padding-right: 1rem !important;
    }

    .__pe-lg-4 {
        padding-right: 1.5rem !important;
    }

    .__pe-lg-5 {
        padding-right: 3rem !important;
    }

    .__pb-lg-0 {
        padding-bottom: 0 !important;
    }

    .__pb-lg-1 {
        padding-bottom: 0.25rem !important;
    }

    .__pb-lg-2 {
        padding-bottom: 0.5rem !important;
    }

    .__pb-lg-3 {
        padding-bottom: 1rem !important;
    }

    .__pb-lg-4 {
        padding-bottom: 1.5rem !important;
    }

    .__pb-lg-5 {
        padding-bottom: 3rem !important;
    }

    .__ps-lg-0 {
        padding-left: 0 !important;
    }

    .__ps-lg-1 {
        padding-left: 0.25rem !important;
    }

    .__ps-lg-2 {
        padding-left: 0.5rem !important;
    }

    .__ps-lg-3 {
        padding-left: 1rem !important;
    }

    .__ps-lg-4 {
        padding-left: 1.5rem !important;
    }

    .__ps-lg-5 {
        padding-left: 3rem !important;
    }

    .__gap-lg-0 {
        gap: 0 !important;
    }

    .__gap-lg-1 {
        gap: 0.25rem !important;
    }

    .__gap-lg-2 {
        gap: 0.5rem !important;
    }

    .__gap-lg-3 {
        gap: 1rem !important;
    }

    .__gap-lg-4 {
        gap: 1.5rem !important;
    }

    .__gap-lg-5 {
        gap: 3rem !important;
    }

    .__text-lg-start {
        text-align: left !important;
    }

    .__text-lg-end {
        text-align: right !important;
    }

    .__text-lg-center {
        text-align: center !important;
    }

    .__row-cols-lg-auto>*,
    .upaep__row-cols-lg-auto>* {
        flex: 0 0 auto;
        width: auto;
    }

    .__row-cols-lg-1>*,
    .upaep__row-cols-lg-1>* {
        flex: 0 0 auto;
        width: calc(100% / 1);
    }

    .__row-cols-lg-2>*,
    .upaep__row-cols-lg-2>* {
        flex: 0 0 auto;
        width: calc(100% / 2);
    }

    .__row-cols-lg-3>*,
    .upaep__row-cols-lg-3>* {
        flex: 0 0 auto;
        width: calc(100% / 3);
    }

    .__row-cols-lg-4>*,
    .upaep__row-cols-lg-4>* {
        flex: 0 0 auto;
        width: calc(100% / 4);
    }

    .__row-cols-lg-5>*,
    .upaep__row-cols-lg-5>* {
        flex: 0 0 auto;
        width: calc(100% / 5);
    }

    .__row-cols-lg-6>*,
    .upaep__row-cols-lg-6>* {
        flex: 0 0 auto;
        width: calc(100% / 6);
    }

    .__col-lg-auto,
    .upaep__col-lg-auto {
        flex: 0 0 auto;
        width: auto;
    }

    .__col-lg-1,
    .upaep__col-lg-1 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 1);
    }

    .__col-lg-2,
    .upaep__col-lg-2 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 2);
    }

    .__col-lg-3,
    .upaep__col-lg-3 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 3);
    }

    .__col-lg-4,
    .upaep__col-lg-4 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 4);
    }

    .__col-lg-5,
    .upaep__col-lg-5 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 5);
    }

    .__col-lg-6,
    .upaep__col-lg-6 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 6);
    }

    .__col-lg-7,
    .upaep__col-lg-7 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 7);
    }

    .__col-lg-8,
    .upaep__col-lg-8 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 8);
    }

    .__col-lg-9,
    .upaep__col-lg-9 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 9);
    }

    .__col-lg-10,
    .upaep__col-lg-10 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 10);
    }

    .__col-lg-11,
    .upaep__col-lg-11 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 11);
    }

    .__col-lg-12,
    .upaep__col-lg-12 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 12);
    }
}

/* min-width 1450px | --upaep-size-xl */
@media(1450px <=width) {

    .upaep__container-xl,
    .upaep__container-lg,
    .upaep__container-md,
    .upaep__container-sm,
    .upaep__container {
        max-width: 1140px;
    }

    .__float-xl-start {
        float: left !important;
    }

    .__float-xl-end {
        float: right !important;
    }

    .__float-xl-none {
        float: none !important;
    }

    .__objectfit-xl-contain {
        object-fit: contain !important;
    }

    .__objectfit-xl-cover {
        object-fit: cover !important;
    }

    .__objectfit-xl-fill {
        object-fit: fill !important;
    }

    .__objectfit-xl-scale {
        object-fit: scale-down !important;
    }

    .__objectfit-none {
        object-fit: none !important;
    }

    .__d-xl-inline {
        display: inline !important;
    }

    .__d-xl-inline-block {
        display: inline-block !important;
    }

    .__d-xl-block {
        display: block !important;
    }

    .__d-xl-grid {
        display: grid !important;
    }

    .__d-xl-inline-grid {
        display: inline-grid !important;
    }

    .__d-xl-table {
        display: table !important;
    }

    .__d-xl-table-row {
        display: table-row !important;
    }

    .__d-xl-table-cell {
        display: table-cell !important;
    }

    .__d-xl-flex {
        display: flex !important;
    }

    .__d-xl-inline-flex {
        display: inline-flex !important;
    }

    .__d-xl-none {
        display: none !important;
    }

    .__flex-xl-fill {
        flex: 1 1 auto !important;
    }

    .__flex-xl-row {
        flex-direction: row !important;
    }

    .__flex-xl-column {
        flex-direction: column !important;
    }

    .__flex-xl-row-reverse {
        flex-direction: row-reverse !important;
    }

    .__flex-xl-column-reverse {
        flex-direction: column-reverse !important;
    }

    .__flex-xl-grow-0 {
        flex-grow: 0 !important;
    }

    .__flex-xl-grow-1 {
        flex-grow: 1 !important;
    }

    .__flex-xl-shrink-0 {
        flex-shrink: 0 !important;
    }

    .__flex-xl-shrink-1 {
        flex-shrink: 1 !important;
    }

    .__flex-xl-wrap {
        flex-wrap: wrap !important;
    }

    .__flex-xl-nowrap {
        flex-wrap: nowrap !important;
    }

    .__flex-xl-wrap-reverse {
        flex-wrap: wrap-reverse !important;
    }

    .__justify-content-xl-start {
        justify-content: flex-start !important;
    }

    .__justify-content-xl-end {
        justify-content: flex-end !important;
    }

    .__justify-content-xl-center {
        justify-content: center !important;
    }

    .__justify-content-xl-between {
        justify-content: space-between !important;
    }

    .__justify-content-xl-around {
        justify-content: space-around !important;
    }

    .__justify-content-xl-evenly {
        justify-content: space-evenly !important;
    }

    .__align-items-xl-start {
        align-items: flex-start !important;
    }

    .__align-items-xl-end {
        align-items: flex-end !important;
    }

    .__align-items-xl-center {
        align-items: center !important;
    }

    .__align-items-xl-baseline {
        align-items: baseline !important;
    }

    .__align-items-xl-stretch {
        align-items: stretch !important;
    }

    .__align-content-xl-start {
        align-content: flex-start !important;
    }

    .__align-content-xl-end {
        align-content: flex-end !important;
    }

    .__align-content-xl-center {
        align-content: center !important;
    }

    .__align-content-xl-between {
        align-content: space-between !important;
    }

    .__align-content-xl-around {
        align-content: space-around !important;
    }

    .__align-content-xl-stretch {
        align-content: stretch !important;
    }

    .__align-self-xl-auto {
        align-self: auto !important;
    }

    .__align-self-xl-start {
        align-self: flex-start !important;
    }

    .__align-self-xl-end {
        align-self: flex-end !important;
    }

    .__align-self-xl-center {
        align-self: center !important;
    }

    .__align-self-xl-baseline {
        align-self: baseline !important;
    }

    .__align-self-xl-stretch {
        align-self: stretch !important;
    }

    .__order-xl-first {
        order: -1 !important;
    }

    .__order-xl-0 {
        order: 0 !important;
    }

    .__order-xl-1 {
        order: 1 !important;
    }

    .__order-xl-2 {
        order: 2 !important;
    }

    .__order-xl-3 {
        order: 3 !important;
    }

    .__order-xl-4 {
        order: 4 !important;
    }

    .__order-xl-5 {
        order: 5 !important;
    }

    .__order-xl-last {
        order: 6 !important;
    }

    .__m-xl-0 {
        margin: 0 !important;
    }

    .__m-xl-1 {
        margin: 0.25rem !important;
    }

    .__m-xl-2 {
        margin: 0.5rem !important;
    }

    .__m-xl-3 {
        margin: 1rem !important;
    }

    .__m-xl-4 {
        margin: 1.5rem !important;
    }

    .__m-xl-5 {
        margin: 3rem !important;
    }

    .__m-xl-auto {
        margin: auto !important;
    }

    .__mx-xl-0 {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .__mx-xl-1 {
        margin-right: 0.25rem !important;
        margin-left: 0.25rem !important;
    }

    .__mx-xl-2 {
        margin-right: 0.5rem !important;
        margin-left: 0.5rem !important;
    }

    .__mx-xl-3 {
        margin-right: 1rem !important;
        margin-left: 1rem !important;
    }

    .__mx-xl-4 {
        margin-right: 1.5rem !important;
        margin-left: 1.5rem !important;
    }

    .__mx-xl-5 {
        margin-right: 3rem !important;
        margin-left: 3rem !important;
    }

    .__mx-xl-auto {
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .__my-xl-0 {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .__my-xl-1 {
        margin-top: 0.25rem !important;
        margin-bottom: 0.25rem !important;
    }

    .__my-xl-2 {
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    .__my-xl-3 {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }

    .__my-xl-4 {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    .__my-xl-5 {
        margin-top: 3rem !important;
        margin-bottom: 3rem !important;
    }

    .__my-xl-auto {
        margin-top: auto !important;
        margin-bottom: auto !important;
    }

    .__mt-xl-0 {
        margin-top: 0 !important;
    }

    .__mt-xl-1 {
        margin-top: 0.25rem !important;
    }

    .__mt-xl-2 {
        margin-top: 0.5rem !important;
    }

    .__mt-xl-3 {
        margin-top: 1rem !important;
    }

    .__mt-xl-4 {
        margin-top: 1.5rem !important;
    }

    .__mt-xl-5 {
        margin-top: 3rem !important;
    }

    .__mt-xl-auto {
        margin-top: auto !important;
    }

    .__me-xl-0 {
        margin-right: 0 !important;
    }

    .__me-xl-1 {
        margin-right: 0.25rem !important;
    }

    .__me-xl-2 {
        margin-right: 0.5rem !important;
    }

    .__me-xl-3 {
        margin-right: 1rem !important;
    }

    .me-xl-4 {
        margin-right: 1.5rem !important;
    }

    .__me-xl-5 {
        margin-right: 3rem !important;
    }

    .__me-xl-auto {
        margin-right: auto !important;
    }

    .__mb-xl-0 {
        margin-bottom: 0 !important;
    }

    .__mb-xl-1 {
        margin-bottom: 0.25rem !important;
    }

    .__mb-xl-2 {
        margin-bottom: 0.5rem !important;
    }

    .__mb-xl-3 {
        margin-bottom: 1rem !important;
    }

    .__mb-xl-4 {
        margin-bottom: 1.5rem !important;
    }

    .__mb-xl-5 {
        margin-bottom: 3rem !important;
    }

    .__mb-xl-auto {
        margin-bottom: auto !important;
    }

    .__ms-xl-0 {
        margin-left: 0 !important;
    }

    .__ms-xl-1 {
        margin-left: 0.25rem !important;
    }

    .__ms-xl-2 {
        margin-left: 0.5rem !important;
    }

    .__ms-xl-3 {
        margin-left: 1rem !important;
    }

    .__ms-xl-4 {
        margin-left: 1.5rem !important;
    }

    .__ms-xl-5 {
        margin-left: 3rem !important;
    }

    .__ms-xl-auto {
        margin-left: auto !important;
    }

    .__p-xl-0 {
        padding: 0 !important;
    }

    .__p-xl-1 {
        padding: 0.25rem !important;
    }

    .__p-xl-2 {
        padding: 0.5rem !important;
    }

    .__p-xl-3 {
        padding: 1rem !important;
    }

    .__p-xl-4 {
        padding: 1.5rem !important;
    }

    .__p-xl-5 {
        padding: 3rem !important;
    }

    .__px-xl-0 {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .__px-xl-1 {
        padding-right: 0.25rem !important;
        padding-left: 0.25rem !important;
    }

    .__px-xl-2 {
        padding-right: 0.5rem !important;
        padding-left: 0.5rem !important;
    }

    .__px-xl-3 {
        padding-right: 1rem !important;
        padding-left: 1rem !important;
    }

    .__px-xl-4 {
        padding-right: 1.5rem !important;
        padding-left: 1.5rem !important;
    }

    .__px-xl-5 {
        padding-right: 3rem !important;
        padding-left: 3rem !important;
    }

    .__py-xl-0 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .__py-xl-1 {
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
    }

    .__py-xl-2 {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    .__py-xl-3 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .__py-xl-4 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    .__py-xl-5 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    .__pt-xl-0 {
        padding-top: 0 !important;
    }

    .__pt-xl-1 {
        padding-top: 0.25rem !important;
    }

    .__pt-xl-2 {
        padding-top: 0.5rem !important;
    }

    .__pt-xl-3 {
        padding-top: 1rem !important;
    }

    .__pt-xl-4 {
        padding-top: 1.5rem !important;
    }

    .__pt-xl-5 {
        padding-top: 3rem !important;
    }

    .__pe-xl-0 {
        padding-right: 0 !important;
    }

    .__pe-xl-1 {
        padding-right: 0.25rem !important;
    }

    .__pe-xl-2 {
        padding-right: 0.5rem !important;
    }

    .__pe-xl-3 {
        padding-right: 1rem !important;
    }

    .__pe-xl-4 {
        padding-right: 1.5rem !important;
    }

    .__pe-xl-5 {
        padding-right: 3rem !important;
    }

    .__pb-xl-0 {
        padding-bottom: 0 !important;
    }

    .__pb-xl-1 {
        padding-bottom: 0.25rem !important;
    }

    .__pb-xl-2 {
        padding-bottom: 0.5rem !important;
    }

    .__pb-xl-3 {
        padding-bottom: 1rem !important;
    }

    .__pb-xl-4 {
        padding-bottom: 1.5rem !important;
    }

    .__pb-xl-5 {
        padding-bottom: 3rem !important;
    }

    .__ps-xl-0 {
        padding-left: 0 !important;
    }

    .__ps-xl-1 {
        padding-left: 0.25rem !important;
    }

    .__ps-xl-2 {
        padding-left: 0.5rem !important;
    }

    .__ps-xl-3 {
        padding-left: 1rem !important;
    }

    .__ps-xl-4 {
        padding-left: 1.5rem !important;
    }

    .__ps-xl-5 {
        padding-left: 3rem !important;
    }

    .__gap-xl-0 {
        gap: 0 !important;
    }

    .__gap-xl-1 {
        gap: 0.25rem !important;
    }

    .__gap-xl-2 {
        gap: 0.5rem !important;
    }

    .__gap-xl-3 {
        gap: 1rem !important;
    }

    .__gap-xl-4 {
        gap: 1.5rem !important;
    }

    .__gap-xl-5 {
        gap: 3rem !important;
    }

    .__text-xl-start {
        text-align: left !important;
    }

    .__text-xl-end {
        text-align: right !important;
    }

    .__text-xl-center {
        text-align: center !important;
    }

    .__row-cols-xl-auto>*,
    .upaep__row-cols-xl-auto>* {
        flex: 0 0 auto;
        width: auto;
    }

    .__row-cols-xl-1>*,
    .upaep__row-cols-xl-1>* {
        flex: 0 0 auto;
        width: calc(100% / 1);
    }

    .__row-cols-xl-2>*,
    .upaep__row-cols-xl-2>* {
        flex: 0 0 auto;
        width: calc(100% / 2);
    }

    .__row-cols-xl-3>*,
    .upaep__row-cols-xl-3>* {
        flex: 0 0 auto;
        width: calc(100% / 3);
    }

    .__row-cols-xl-4>*,
    .upaep__row-cols-xl-4>* {
        flex: 0 0 auto;
        width: calc(100% / 4);
    }

    .__row-cols-xl-5>*,
    .upaep__row-cols-xl-5>* {
        flex: 0 0 auto;
        width: calc(100% / 5);
    }

    .__row-cols-xl-6>*,
    .upaep__row-cols-xl-6>* {
        flex: 0 0 auto;
        width: calc(100% / 6);
    }

    .__col-xl-auto,
    .upaep__col-xl-auto {
        flex: 0 0 auto;
        width: auto;
    }

    .__col-xl-1,
    .upaep__col-xl-1 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 1);
    }

    .__col-xl-2,
    .upaep__col-xl-2 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 2);
    }

    .__col-xl-3,
    .upaep__col-xl-3 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 3);
    }

    .__col-xl-4,
    .upaep__col-xl-4 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 4);
    }

    .__col-xl-5,
    .upaep__col-xl-5 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 5);
    }

    .__col-xl-6,
    .upaep__col-xl-6 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 6);
    }

    .__col-xl-7,
    .upaep__col-xl-7 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 7);
    }

    .__col-xl-8,
    .upaep__col-xl-8 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 8);
    }

    .__col-xl-9,
    .upaep__col-xl-9 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 9);
    }

    .__col-xl-10,
    .upaep__col-xl-10 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 10);
    }

    .__col-xl-11,
    .upaep__col-xl-11 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 11);
    }

    .__col-xl-12,
    .upaep__col-xl-12 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 12);
    }
}

/* min-width 1920px | --upaep-size-xxl */
@media(1920px <=width) {

    .upaep__container-xxl,
    .upaep__container-xl,
    .upaep__container-lg,
    .upaep__container-md,
    .upaep__container-sm,
    .upaep__container {
        max-width: 1320px;
    }

    .__float-xxl-start {
        float: left !important;
    }

    .__float-xxl-end {
        float: right !important;
    }

    .__float-xxl-none {
        float: none !important;
    }

    .__objectfit-xxl-contain {
        object-fit: contain !important;
    }

    .__objectfit-xxl-cover {
        object-fit: cover !important;
    }

    .__objectfit-xxl-fill {
        object-fit: fill !important;
    }

    .__objectfit-xxl-scale {
        object-fit: scale-down !important;
    }

    .__objectfit-none {
        object-fit: none !important;
    }

    .__d-xxl-inline {
        display: inline !important;
    }

    .__d-xxl-inline-block {
        display: inline-block !important;
    }

    .__d-xxl-block {
        display: block !important;
    }

    .__d-xxl-grid {
        display: grid !important;
    }

    .__d-xxl-inline-grid {
        display: inline-grid !important;
    }

    .__d-xxl-table {
        display: table !important;
    }

    .__d-xxl-table-row {
        display: table-row !important;
    }

    .__d-xxl-table-cell {
        display: table-cell !important;
    }

    .__d-xxl-flex {
        display: flex !important;
    }

    .__d-xxl-inline-flex {
        display: inline-flex !important;
    }

    .__d-xxl-none {
        display: none !important;
    }

    .__flex-xxl-fill {
        flex: 1 1 auto !important;
    }

    .__flex-xxl-row {
        flex-direction: row !important;
    }

    .__flex-xxl-column {
        flex-direction: column !important;
    }

    .__flex-xxl-row-reverse {
        flex-direction: row-reverse !important;
    }

    .__flex-xxl-column-reverse {
        flex-direction: column-reverse !important;
    }

    .__flex-xxl-grow-0 {
        flex-grow: 0 !important;
    }

    .__flex-xxl-grow-1 {
        flex-grow: 1 !important;
    }

    .__flex-xxl-shrink-0 {
        flex-shrink: 0 !important;
    }

    .__flex-xxl-shrink-1 {
        flex-shrink: 1 !important;
    }

    .__flex-xxl-wrap {
        flex-wrap: wrap !important;
    }

    .__flex-xxl-nowrap {
        flex-wrap: nowrap !important;
    }

    .__flex-xxl-wrap-reverse {
        flex-wrap: wrap-reverse !important;
    }

    .__justify-content-xxl-start {
        justify-content: flex-start !important;
    }

    .__justify-content-xxl-end {
        justify-content: flex-end !important;
    }

    .__justify-content-xxl-center {
        justify-content: center !important;
    }

    .__justify-content-xxl-between {
        justify-content: space-between !important;
    }

    .__justify-content-xxl-around {
        justify-content: space-around !important;
    }

    .__justify-content-xxl-evenly {
        justify-content: space-evenly !important;
    }

    .__align-items-xxl-start {
        align-items: flex-start !important;
    }

    .__align-items-xxl-end {
        align-items: flex-end !important;
    }

    .__align-items-xxl-center {
        align-items: center !important;
    }

    .__align-items-xxl-baseline {
        align-items: baseline !important;
    }

    .__align-items-xxl-stretch {
        align-items: stretch !important;
    }

    .__align-content-xxl-start {
        align-content: flex-start !important;
    }

    .__align-content-xxl-end {
        align-content: flex-end !important;
    }

    .__align-content-xxl-center {
        align-content: center !important;
    }

    .__align-content-xxl-between {
        align-content: space-between !important;
    }

    .__align-content-xxl-around {
        align-content: space-around !important;
    }

    .__align-content-xxl-stretch {
        align-content: stretch !important;
    }

    .__align-self-xxl-auto {
        align-self: auto !important;
    }

    .__align-self-xxl-start {
        align-self: flex-start !important;
    }

    .__align-self-xxl-end {
        align-self: flex-end !important;
    }

    .__align-self-xxl-center {
        align-self: center !important;
    }

    .__align-self-xxl-baseline {
        align-self: baseline !important;
    }

    .__align-self-xxl-stretch {
        align-self: stretch !important;
    }

    .__order-xxl-first {
        order: -1 !important;
    }

    .__order-xxl-0 {
        order: 0 !important;
    }

    .__order-xxl-1 {
        order: 1 !important;
    }

    .__order-xxl-2 {
        order: 2 !important;
    }

    .__order-xxl-3 {
        order: 3 !important;
    }

    .__order-xxl-4 {
        order: 4 !important;
    }

    .__order-xxl-5 {
        order: 5 !important;
    }

    .__order-xxl-last {
        order: 6 !important;
    }

    .__m-xxl-0 {
        margin: 0 !important;
    }

    .__m-xxl-1 {
        margin: 0.25rem !important;
    }

    .__m-xxl-2 {
        margin: 0.5rem !important;
    }

    .__m-xxl-3 {
        margin: 1rem !important;
    }

    .__m-xxl-4 {
        margin: 1.5rem !important;
    }

    .__m-xxl-5 {
        margin: 3rem !important;
    }

    .__m-xxl-auto {
        margin: auto !important;
    }

    .__mx-xxl-0 {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .__mx-xxl-1 {
        margin-right: 0.25rem !important;
        margin-left: 0.25rem !important;
    }

    .__mx-xxl-2 {
        margin-right: 0.5rem !important;
        margin-left: 0.5rem !important;
    }

    .__mx-xxl-3 {
        margin-right: 1rem !important;
        margin-left: 1rem !important;
    }

    .__mx-xxl-4 {
        margin-right: 1.5rem !important;
        margin-left: 1.5rem !important;
    }

    .__mx-xxl-5 {
        margin-right: 3rem !important;
        margin-left: 3rem !important;
    }

    .__mx-xxl-auto {
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .__my-xxl-0 {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .__my-xxl-1 {
        margin-top: 0.25rem !important;
        margin-bottom: 0.25rem !important;
    }

    .__my-xxl-2 {
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    .__my-xxl-3 {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }

    .__my-xxl-4 {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    .__my-xxl-5 {
        margin-top: 3rem !important;
        margin-bottom: 3rem !important;
    }

    .__my-xxl-auto {
        margin-top: auto !important;
        margin-bottom: auto !important;
    }

    .__mt-xxl-0 {
        margin-top: 0 !important;
    }

    .__mt-xxl-1 {
        margin-top: 0.25rem !important;
    }

    .__mt-xxl-2 {
        margin-top: 0.5rem !important;
    }

    .__mt-xxl-3 {
        margin-top: 1rem !important;
    }

    .__mt-xxl-4 {
        margin-top: 1.5rem !important;
    }

    .__mt-xxl-5 {
        margin-top: 3rem !important;
    }

    .__mt-xxl-auto {
        margin-top: auto !important;
    }

    .__me-xxl-0 {
        margin-right: 0 !important;
    }

    .__me-xxl-1 {
        margin-right: 0.25rem !important;
    }

    .__me-xxl-2 {
        margin-right: 0.5rem !important;
    }

    .__me-xxl-3 {
        margin-right: 1rem !important;
    }

    .me-xxl-4 {
        margin-right: 1.5rem !important;
    }

    .__me-xxl-5 {
        margin-right: 3rem !important;
    }

    .__me-xxl-auto {
        margin-right: auto !important;
    }

    .__mb-xxl-0 {
        margin-bottom: 0 !important;
    }

    .__mb-xxl-1 {
        margin-bottom: 0.25rem !important;
    }

    .__mb-xxl-2 {
        margin-bottom: 0.5rem !important;
    }

    .__mb-xxl-3 {
        margin-bottom: 1rem !important;
    }

    .__mb-xxl-4 {
        margin-bottom: 1.5rem !important;
    }

    .__mb-xxl-5 {
        margin-bottom: 3rem !important;
    }

    .__mb-xxl-auto {
        margin-bottom: auto !important;
    }

    .__ms-xxl-0 {
        margin-left: 0 !important;
    }

    .__ms-xxl-1 {
        margin-left: 0.25rem !important;
    }

    .__ms-xxl-2 {
        margin-left: 0.5rem !important;
    }

    .__ms-xxl-3 {
        margin-left: 1rem !important;
    }

    .__ms-xxl-4 {
        margin-left: 1.5rem !important;
    }

    .__ms-xxl-5 {
        margin-left: 3rem !important;
    }

    .__ms-xxl-auto {
        margin-left: auto !important;
    }

    .__p-xxl-0 {
        padding: 0 !important;
    }

    .__p-xxl-1 {
        padding: 0.25rem !important;
    }

    .__p-xxl-2 {
        padding: 0.5rem !important;
    }

    .__p-xxl-3 {
        padding: 1rem !important;
    }

    .__p-xxl-4 {
        padding: 1.5rem !important;
    }

    .__p-xxl-5 {
        padding: 3rem !important;
    }

    .__px-xxl-0 {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .__px-xxl-1 {
        padding-right: 0.25rem !important;
        padding-left: 0.25rem !important;
    }

    .__px-xxl-2 {
        padding-right: 0.5rem !important;
        padding-left: 0.5rem !important;
    }

    .__px-xxl-3 {
        padding-right: 1rem !important;
        padding-left: 1rem !important;
    }

    .__px-xxl-4 {
        padding-right: 1.5rem !important;
        padding-left: 1.5rem !important;
    }

    .__px-xxl-5 {
        padding-right: 3rem !important;
        padding-left: 3rem !important;
    }

    .__py-xxl-0 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .__py-xxl-1 {
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
    }

    .__py-xxl-2 {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    .__py-xxl-3 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .__py-xxl-4 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    .__py-xxl-5 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    .__pt-xxl-0 {
        padding-top: 0 !important;
    }

    .__pt-xxl-1 {
        padding-top: 0.25rem !important;
    }

    .__pt-xxl-2 {
        padding-top: 0.5rem !important;
    }

    .__pt-xxl-3 {
        padding-top: 1rem !important;
    }

    .__pt-xxl-4 {
        padding-top: 1.5rem !important;
    }

    .__pt-xxl-5 {
        padding-top: 3rem !important;
    }

    .__pe-xxl-0 {
        padding-right: 0 !important;
    }

    .__pe-xxl-1 {
        padding-right: 0.25rem !important;
    }

    .__pe-xxl-2 {
        padding-right: 0.5rem !important;
    }

    .__pe-xxl-3 {
        padding-right: 1rem !important;
    }

    .__pe-xxl-4 {
        padding-right: 1.5rem !important;
    }

    .__pe-xxl-5 {
        padding-right: 3rem !important;
    }

    .__pb-xxl-0 {
        padding-bottom: 0 !important;
    }

    .__pb-xxl-1 {
        padding-bottom: 0.25rem !important;
    }

    .__pb-xxl-2 {
        padding-bottom: 0.5rem !important;
    }

    .__pb-xxl-3 {
        padding-bottom: 1rem !important;
    }

    .__pb-xxl-4 {
        padding-bottom: 1.5rem !important;
    }

    .__pb-xxl-5 {
        padding-bottom: 3rem !important;
    }

    .__ps-xxl-0 {
        padding-left: 0 !important;
    }

    .__ps-xxl-1 {
        padding-left: 0.25rem !important;
    }

    .__ps-xxl-2 {
        padding-left: 0.5rem !important;
    }

    .__ps-xxl-3 {
        padding-left: 1rem !important;
    }

    .__ps-xxl-4 {
        padding-left: 1.5rem !important;
    }

    .__ps-xxl-5 {
        padding-left: 3rem !important;
    }

    .__gap-xxl-0 {
        gap: 0 !important;
    }

    .__gap-xxl-1 {
        gap: 0.25rem !important;
    }

    .__gap-xxl-2 {
        gap: 0.5rem !important;
    }

    .__gap-xxl-3 {
        gap: 1rem !important;
    }

    .__gap-xxl-4 {
        gap: 1.5rem !important;
    }

    .__gap-xxl-5 {
        gap: 3rem !important;
    }

    .__text-xxl-start {
        text-align: left !important;
    }

    .__text-xxl-end {
        text-align: right !important;
    }

    .__text-xxl-center {
        text-align: center !important;
    }

    .__row-cols-xxl-auto>*,
    .upaep__row-cols-xxl-auto>* {
        flex: 0 0 auto;
        width: auto;
    }

    .__row-cols-xxl-1>*,
    .upaep__row-cols-xxl-1>* {
        flex: 0 0 auto;
        width: calc(100% / 1);
    }

    .__row-cols-xxl-2>*,
    .upaep__row-cols-xxl-2>* {
        flex: 0 0 auto;
        width: calc(100% / 2);
    }

    .__row-cols-xxl-3>*,
    .upaep__row-cols-xxl-3>* {
        flex: 0 0 auto;
        width: calc(100% / 3);
    }

    .__row-cols-xxl-4>*,
    .upaep__row-cols-xxl-4>* {
        flex: 0 0 auto;
        width: calc(100% / 4);
    }

    .__row-cols-xxl-5>*,
    .upaep__row-cols-xxl-5>* {
        flex: 0 0 auto;
        width: calc(100% / 5);
    }

    .__row-cols-xxl-6>*,
    .upaep__row-cols-xxl-6>* {
        flex: 0 0 auto;
        width: calc(100% / 6);
    }

    .__col-xxl-auto,
    .upaep__col-xxl-auto {
        flex: 0 0 auto;
        width: auto;
    }

    .__col-xxl-1,
    .upaep__col-xxl-1 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 1);
    }

    .__col-xxl-2,
    .upaep__col-xxl-2 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 2);
    }

    .__col-xxl-3,
    .upaep__col-xxl-3 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 3);
    }

    .__col-xxl-4,
    .upaep__col-xxl-4 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 4);
    }

    .__col-xxl-5,
    .upaep__col-xxl-5 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 5);
    }

    .__col-xxl-6,
    .upaep__col-xxl-6 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 6);
    }

    .__col-xxl-7,
    .upaep__col-xxl-7 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 7);
    }

    .__col-xxl-8,
    .upaep__col-xxl-8 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 8);
    }

    .__col-xxl-9,
    .upaep__col-xxl-9 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 9);
    }

    .__col-xxl-10,
    .upaep__col-xxl-10 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 10);
    }

    .__col-xxl-11,
    .upaep__col-xxl-11 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 11);
    }

    .__col-xxl-12,
    .upaep__col-xxl-12 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 12);
    }
}

/*? --upaep-landscape */
@media (orientation: landscape) {}

@media (width <=924px) and (orientation: landscape) {
    .fullscreen.d-mobile {
        display: none !important;
    }

    .fullscreen.d-desktop {
        display: block !important;
    }

    .upaep__contacto {
        height: auto;
    }

    .upaep__btn.__whats {
        inset: auto 0 25% auto;
    }
}

/*? ==========================================================================
   Alternativa al arrastre en las listas ordenables  (WCAG 2.5.7)
   --------------------------------------------------------------------------
   Reordenar solo se podia hacer arrastrando. El JS inserta ahora dos botones
   por item (.upaep__sortable-move) que ejecutan el mismo movimiento; aqui se
   les da presencia visual, area de pulsacion suficiente y foco visible.
   Tokens propios para que una marca pueda repintarlos sin tocar el resto.
   ========================================================================== */
.upaep__sortable-move-group {
    --upaep-sortable-move-size: 1.75rem;
    --upaep-sortable-move-gap: .125rem;
    --upaep-sortable-move-radius: var(--upaep-border-radius-sm, .25rem);
    --upaep-sortable-move-color: currentColor;
    --upaep-sortable-move-bg: transparent;
    --upaep-sortable-move-bg-hover: rgba(0, 0, 0, .06);
    --upaep-sortable-move-opacity-disabled: .35;

    display: inline-flex;
    flex: 0 0 auto;
    /*? Sin esto un SVG dentro de un contenedor flex se estira: mismo caso que
       .upaep__btn, documentado en la nota de gotchas del uikit. */
    gap: var(--upaep-sortable-move-gap);
    align-items: center;
    margin-inline-start: auto;
}

.upaep__sortable-move {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    inline-size: var(--upaep-sortable-move-size);
    block-size: var(--upaep-sortable-move-size);
    padding: 0;
    border: 0;
    border-radius: var(--upaep-sortable-move-radius);
    background: var(--upaep-sortable-move-bg);
    color: var(--upaep-sortable-move-color);
    cursor: pointer;
    line-height: 0;

    & svg {
        flex: 0 0 auto;
        inline-size: 1em;
        block-size: 1em;
    }

    &:hover:not(:disabled) {
        background: var(--upaep-sortable-move-bg-hover);
    }

    /*? Foco visible: es la unica ruta de teclado para reordenar. */
    &:focus-visible {
        outline: 2px solid var(--upaep-color-primary, currentColor);
        outline-offset: 1px;
    }

    &:disabled {
        opacity: var(--upaep-sortable-move-opacity-disabled);
        cursor: default;
    }
}

/*? ==========================================================================
   Boton de cierre  ·  .upaep__btn-close
   --------------------------------------------------------------------------
   Patron UNICO de cierre del kit. Hasta ahora cada overlay traia el suyo
   (.upaep__modal-close, .upaep__offcanvas-close, .upaep__notification-close):
   tres bloques con el mismo dibujo, la X pintada con la fuente de iconos en un
   ::before, y un <i> que ni recibe foco ni anuncia nombre. Los tres siguen
   donde estaban porque los usan ~150 archivos; lo NUEVO se escribe con este.

   Cuatro decisiones que conviene no deshacer:

   1. El icono es un HIJO, no un ::before. Por eso se puede sustituir por otro
      SVG sin tocar una linea de este bloque, y el cierre deja de depender de
      que la fuente de iconos haya cargado.
   2. El color por defecto es `currentColor`. El boton hereda la tinta de su
      contexto -cabecera de modal, toast rojo, offcanvas oscuro- y el SVG la
      hereda del boton por stroke="currentColor". Un solo salto y cero
      variantes de color por componente o por fondo.
   3. NO se posiciona. Ni `position`, ni `inset`, ni margenes negativos: donde
      va lo decide el contenedor (las cabeceras del kit ya son flex con
      space-between, o con `margin-inline-end: auto` en el titulo).
   4. El area de pulsacion (36px) es mayor que el glifo (16px) a proposito.
      WCAG 2.2 pide 24x24 minimo (2.5.8) y el dedo apunta al boton, no al trazo.
   ========================================================================== */
.upaep__btn-close {
    /*? ---- Caja ---- */
    --upaep-btn-close-size: 2.25rem;
    --upaep-btn-close-icon-size: 1rem;
    --upaep-btn-close-radius: var(--upaep-border-radius-sm, .25rem);
    --upaep-btn-close-border: 0;

    /*? ---- Reposo ---- */
    --upaep-btn-close-color: currentColor;
    --upaep-btn-close-bg: transparent;
    --upaep-btn-close-opacity: 1;

    /*? ---- Hover y active. Cada estado se DERIVA del anterior con color-mix,
       y la cadena arranca en el fondo EN REPOSO:

          bg  ->  hover-bg  ->  active-bg

       Ese `var(--upaep-btn-close-bg)` como base de la mezcla es lo que hace
       que la cadena sirva para las dos formas del boton. Con el fondo
       transparente de la base, mezclar la tinta contra `transparent` da el
       velo tenue de siempre. Con un fondo SOLIDO (.__solid / .__primary), la
       mezcla se hace contra ese solido, asi que el chip se aclara en vez de
       destenirse: antes se pintaba el velo translucido ENCIMA de nada y el
       relleno desaparecia al pasar el raton. ---- */
    --upaep-btn-close-hover-color: var(--upaep-btn-close-color);
    --upaep-btn-close-hover-bg: color-mix(in srgb, currentColor 14%, var(--upaep-btn-close-bg));
    --upaep-btn-close-active-bg: color-mix(in srgb, currentColor 12%, var(--upaep-btn-close-hover-bg));
    /*? Escala APAGADA. Traia `.92` y era una decision deliberada -el chip mide
       36px, asi que encogerlo un 8% cuesta ~1px de area clicable y se lee como
       hundirse-. Se retira para que los dos botones del kit hablen el mismo
       idioma en el press: solo fondo. `.upaep__btn` no puede permitirse la
       escala porque su coste crece con el ancho (medido: `.98` pierde el clic a
       4px del borde en un boton de 420px), y tener uno que se hunde y otro que
       no se leia como dos componentes en vez de uno.

       El token se queda como palanca: subirlo devuelve el efecto donde se
       quiera, y en un boton de icono su coste sigue siendo despreciable. */
    --upaep-btn-close-active-scale: 1;

    /*? ---- Foco. --ui-focus-ring-* solo existe en la hoja con la pasada de
       accesibilidad; el fallback tiene que caer en --ui-text-strong y NO en
       `currentColor`, porque en un chip solido la tinta es el blanco del icono
       y el anillo se volvia invisible sobre la superficie clara. ---- */
    --upaep-btn-close-focus-color: var(--ui-focus-ring-color, var(--ui-text-strong, currentColor));
    --upaep-btn-close-focus-width: var(--ui-focus-ring-width, 2px);
    --upaep-btn-close-focus-offset: var(--ui-focus-ring-offset, 2px);

    /*? ---- Deshabilitado y movimiento ---- */
    --upaep-btn-close-disabled-opacity: .4;
    --upaep-btn-close-transition: .15s ease;
    --upaep-btn-close-icon-stroke: 2;

    /*? inline-grid + place-items centra el icono sea cual sea su tamano, sin
       depender de line-height, de flex ni de margenes negativos. */
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    inline-size: var(--upaep-btn-close-size);
    block-size: var(--upaep-btn-close-size);
    padding: 0;
    border: var(--upaep-btn-close-border);
    border-radius: var(--upaep-btn-close-radius);
    background: var(--upaep-btn-close-bg);
    color: var(--upaep-btn-close-color);
    opacity: var(--upaep-btn-close-opacity);
    line-height: 1;
    cursor: pointer;
    appearance: none;
    transition:
        background-color var(--upaep-btn-close-transition),
        color var(--upaep-btn-close-transition),
        opacity var(--upaep-btn-close-transition),
        transform var(--upaep-btn-close-transition);

    /*? Cualquier SVG o imagen sirve de icono: el tamano lo pone el BOTON, no
       el recurso, asi que el reemplazo no puede descuadrar la caja.
       `flex: 0 0 auto` es la trampa ya documentada de los SVG dentro de
       contenedores flex (misma nota que .upaep__btn). */
    & > svg,
    & > img,
    & .upaep__btn-close-icon {
        inline-size: var(--upaep-btn-close-icon-size);
        block-size: var(--upaep-btn-close-icon-size);
        flex: 0 0 auto;
        pointer-events: none;
    }

    /*? Afina el grosor del trazo sin editar el path. Si el reemplazo se dibuja
       con `fill` en vez de `stroke`, esta declaracion no hace nada. */
    & .upaep__btn-close-icon {
        stroke-width: var(--upaep-btn-close-icon-stroke);
    }

    /*? Los tres estados interactivos escriben SOLO fondo, tinta y escala: nada
       de border-color ni box-shadow, para que una variante que los use no los
       pierda al pasar el raton. */
    &:hover:not(:disabled):not([aria-disabled="true"]) {
        color: var(--upaep-btn-close-hover-color);
        background: var(--upaep-btn-close-hover-bg);
    }

    &:active:not(:disabled):not([aria-disabled="true"]) {
        background: var(--upaep-btn-close-active-bg);
        transform: scale(var(--upaep-btn-close-active-scale));
    }

    /*? El anillo va por `outline`, no por box-shadow: sobrevive a un ancestro
       con overflow oculto, que es justo el caso de la cabecera de un modal. Y
       al ser `outline` no toca el fondo, asi que el foco NO despinta un chip
       solido -era el segundo sintoma del mismo defecto-. */
    &:focus-visible {
        outline: var(--upaep-btn-close-focus-width) solid var(--upaep-btn-close-focus-color);
        outline-offset: var(--upaep-btn-close-focus-offset);
    }

    /*? Deshabilitado: el atributo nativo apaga el puntero como en .upaep__btn;
       aria-disabled sigue siendo enfocable a proposito -esa es su razon de
       ser- y solo cambia el aspecto y el cursor. */
    &:disabled {
        opacity: var(--upaep-btn-close-disabled-opacity);
        pointer-events: none;
    }

    &[aria-disabled="true"] {
        opacity: var(--upaep-btn-close-disabled-opacity);
        cursor: not-allowed;
    }
}

/*? Dos tamanos, no mas: salen de los tres que ya conviven en el kit (modal 22,
   notificacion 20, tag 16). Ambos siguen por encima del minimo de 24x24 de
   2.5.8, y __lg alcanza los 44x44 del objetivo AAA (2.5.5). */
.upaep__btn-close.__sm {
    --upaep-btn-close-size: 1.75rem;
    --upaep-btn-close-icon-size: .875rem;
}

.upaep__btn-close.__lg {
    --upaep-btn-close-size: 2.75rem;
    --upaep-btn-close-icon-size: 1.25rem;
}

/*? ---- Redondeo completo ------------------------------------------------
   Se escriben el token Y la propiedad, a proposito:

   · la PROPIEDAD, para no depender de que --upaep-btn-close-radius valga hoy
     una cosa u otra, ni de que una marca o una capa local lo haya repintado;
   · el TOKEN, para que quien lo lea (una capa local, un contenedor) vea el
     redondeo real de la variante y no el de la base.

   La medida es una longitud grande y no `50%`: sobre la caja cuadrada del
   componente las dos dan el mismo circulo, pero si alguien cambia solo una de
   las dos dimensiones, `50%` deforma en elipse y esto da una capsula, que es
   lo que se espera de "completamente redondeado". El area de pulsacion no se
   toca: el radio recorta la pintura, no la caja.

   Convive con los tres tamanos y con los estados sin una regla mas, porque
   ninguno de ellos escribe `border-radius`.

   `.__rounded` es el nombre CANONICO: es la convencion del kit, la misma que
   usa `.upaep__btn`. `.upaep__btn-close--rounded` queda como alias para quien
   escriba el modificador en forma BEM larga. ---- */
.upaep__btn-close.__rounded,
.upaep__btn-close.upaep__btn-close--rounded {
    --upaep-btn-close-radius: 9999px;
    border-radius: 9999px;
}

/*? ---- Relleno solido ---------------------------------------------------
   La base es "fantasma": fondo transparente y la tinta heredada. Estas dos
   variantes la vuelven un chip opaco, que es lo que hace falta cuando el
   cierre va sobre una imagen, un video o una cabecera donde el contraste no
   esta garantizado.

   Cada una fija el PAR de roles del kit -relleno + tinta encima-, que ya viene
   con su contraste medido, y reescribe el ACTIVE.

   Lo del active tiene motivo. La cadena generica mezcla hacia la tinta, y en la
   base eso es lo correcto: mas velo del propio color = mas pulsado. En un chip
   solido de tinta clara, mezclar hacia el icono ACLARA el relleno, y un boton
   que se aclara al pulsarlo se lee como que se levanta, no como que se hunde.
   Aqui la mezcla va hacia --ui-text-strong, que oscurece en tema claro y
   aclara en oscuro: en los dos casos, hundirse.

   El hover de __primary usa el rol `-hover` que la marca ya define, como hace
   el boton normal, en vez de aclarar el rojo con una mezcla a ojo. ---- */
.upaep__btn-close.__solid {
    --upaep-btn-close-bg: var(--ui-neutral);
    --upaep-btn-close-color: var(--ui-on-neutral);
    --upaep-btn-close-active-bg: color-mix(in srgb, var(--upaep-btn-close-hover-bg) 86%, var(--ui-text-strong));
}

.upaep__btn-close.__primary {
    --upaep-btn-close-bg: var(--ui-primary);
    --upaep-btn-close-color: var(--ui-on-primary);
    --upaep-btn-close-hover-bg: var(--ui-primary-hover);
    /*? El polo era `--ui-text-strong`, copiado de `.__solid`, y ahi funciona
       porque el fondo de `__solid` es `--ui-neutral`, que SI se remapea en
       `[data-theme="dark"]`: los dos giran juntos. `--ui-primary-hover` NO esta
       en esa lista, asi que el fondo se quedaba quieto mientras el polo pasaba a
       blanco. Medido en tema oscuro: el hover oscurecia y el press aclaraba, o
       sea el chip se levantaba al pulsarlo -justo lo que este token existe para
       evitar-. Con polo NEGRO, ciego al tema como su fondo, el press oscurece en
       los dos. En tema claro no cambia nada: `--ui-text-strong` ya valia negro. */
    --upaep-btn-close-active-bg: color-mix(in srgb, var(--ui-primary-hover) 86%, var(--upaep-color-black));
}

/*? ==========================================================================
   Contexto del boton de cierre  ·  reglas de los CONTENEDORES
   --------------------------------------------------------------------------
   .upaep__btn-close no nombra a ningun componente: su color por defecto es
   `currentColor`. Eso basta en .upaep__alert, que si pinta `color` en su caja,
   pero NO en modal / offcanvas / notificacion / toast: esos se construyen por
   tokens y nunca fijan `color` en el contenedor, asi que el boton heredaria la
   tinta del documento -negro sobre el rojo solido de un toast __error-.

   Estas reglas son del CONTENEDOR, no del boton: le pasan la tinta que ese
   componente YA tenia calculada para su propio cierre, con sus variantes de
   tipo y sus pieles __tinted/__clean incluidas. Se agrupan aqui para que
   adoptar el boton sea un solo bloque revisable; se pueden mudar a la seccion
   de cada componente sin tocar una linea de .upaep__btn-close.

   La POSICION tambien es de ellos, y casi siempre ya esta resuelta: las
   cabeceras de modal y offcanvas son flex con `space-between`, y la de
   notificacion/toast empuja el cierre con el `margin: 0 auto 0 0` que su
   titulo ya trae. Lo unico que faltaba era el caso sin cabecera, mas abajo.
   ========================================================================== */
.upaep__modal .upaep__btn-close {
    --upaep-btn-close-color: var(--upaep-modal-close-color);
    --upaep-btn-close-hover-color: var(--upaep-modal-close-hover-color);
}

.upaep__offcanvas .upaep__btn-close {
    --upaep-btn-close-color: var(--upaep-offcanvas-close-color);
    --upaep-btn-close-hover-color: var(--upaep-offcanvas-close-hover-color);
}

.upaep__notification .upaep__btn-close,
.upaep__toast .upaep__btn-close {
    --upaep-btn-close-color: var(--upaep-notification-close-color);
    --upaep-btn-close-hover-color: var(--upaep-notification-close-hover-color);
    /*? El toast genera su cierre con `__sm` (28 px de caja) pero el glifo de
       `__sm` (14 px, trazo 2) se leía más chico y delgado que la ✕ que tenía —un
       glifo de 20 px en negrita—. La medida del icono es del CONTENEDOR, como la
       tinta: se sube aquí y la caja sigue siendo la misma. */
    --upaep-btn-close-icon-size: 1.125rem;
    --upaep-btn-close-icon-stroke: 2.5;
}

/*? El hueco de cierre del alert se dimensiono para un GLIFO de texto
   (.upaep__alert .__close trae padding: 1.25rem 1rem). Un boton que ya mide
   por caja se deforma con ese relleno -32x40 en vez de 28x28-, asi que se
   anula, y solo cuando el hueco lo ocupa este boton: el marcado que ya existe
   con un glifo no se entera. */
.upaep__alert .upaep__btn-close.__close {
    padding: 0;
    inset: .5rem .5rem auto auto;
}

/*? ---- Cierre flotante de la notificacion sin cabecera ------------------
   Con cabecera no hace falta nada. SIN cabecera no hay hueco donde alojarlo, y
   el heredado resolvia eso con su propio `.upaep__notification-close.__sup`.
   Se le da el mismo `.__sup` al boton comun -mismo nombre de modificador, para
   no inventar vocabulario- y lo posiciona el contenedor, que es quien sabe
   donde esta su esquina. El ancla es la caja de la notificacion, que ya es
   `position: relative` por --upaep-notification-position.

   Y se reserva el canal: el heredado dejaba el texto pasar por debajo del aspa
   -medido, solapaba-. El `:has()` abre el hueco solo cuando el cierre flotante
   esta de verdad ahi, asi que una notificacion sin el no gana relleno. El
   ancho del canal es un token de la NOTIFICACION, no del boton: el relleno lo
   escribe el contenedor y las variables no se heredan hacia arriba, asi que
   leer --upaep-btn-close-size desde aqui daria siempre el valor por defecto.
   ---- */
.upaep__notification .upaep__btn-close.__sup,
.upaep__toast .upaep__btn-close.__sup {
    position: absolute;
    inset-block-start: .5rem;
    inset-inline-end: .5rem;
}

.upaep__notification .upaep__notification-content:has(> .upaep__btn-close.__sup),
.upaep__toast .upaep__toast-content:has(> .upaep__btn-close.__sup) {
    padding-inline-end: var(--upaep-notification-close-gutter, 3.25rem);
}

/*? ==========================================================================
   Movimiento reducido  (WCAG 2.2.2 y 2.3.3)
   --------------------------------------------------------------------------
   Ya habia bloques @media (prefers-reduced-motion: reduce) para tracker,
   numberpicker, appointments y selectfilters, pero cubrian 4 componentes de
   mas de 90: el resto seguia animando. Esta regla es la red global.

   Se usa .01ms y NO `animation: none`. Con `none` el navegador no emite
   `animationend` ni `transitionend`, y hay componentes del kit que retiran su
   nodo en ese evento: quedarian visibles para siempre. Con una duracion casi
   nula el evento SI se dispara y el movimiento es imperceptible.

   Va al final del archivo a proposito: al no usar !important, necesita ganar
   por orden de aparicion.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-delay: .01ms !important;
        /*? Las iteraciones infinitas se cortan: con .01ms seguirian
           reejecutandose miles de veces por segundo. */
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        transition-delay: .01ms !important;
    }

    /*? Excepcion deliberada: un indicador de carga que se congela deja de
       comunicar "estoy trabajando". 2.2.2 exceptua el movimiento esencial, asi
       que el spinner sigue girando pero mucho mas despacio. */
    .upaep__spinner,
    .upaep__spinner::before,
    .upaep__spinner::after,
    .upaep__loader,
    .upaep__loader::before,
    .upaep__loader::after {
        animation-duration: 1.5s !important;
        animation-iteration-count: infinite !important;
    }

    /*? El desplazamiento suave tambien es movimiento no solicitado. */
    html {
        scroll-behavior: auto !important;
    }

    /*? Componentes cuyo movimiento se declara por variable: se neutraliza la
       variable, no la propiedad, para no romper la cascada del componente. */
    .upaep__animation {
        --animation-duration: .01ms;
        --animation-delay: .01ms;
    }

    .upaep__skeleton {
        --upaep-skeleton-animation: none;
    }

    /*? El carrusel y el marquee mueven contenido sin peticion del usuario: es
       exactamente el caso de 2.2.2. Se detienen. */
    .upaep__marquee,
    .upaep__marquee-content {
        animation-play-state: paused !important;
    }
}