/*
VERSION: 1.14
REVISIÓN: 27-03-2026
*/
:root{
--icon-add: url('data:image/svg+xml,');
--icon-add-user: url('data:image/svg+xml,');
--icon-alert: url('data:image/svg+xml,');
--icon-await-pay: url('data:image/svg+xml,');
--icon-bell: url('data:image/svg+xml,');
--icon-bell-active: url('data:image/svg+xml,');
--icon-calc: url('data:image/svg+xml,');
--icon-calculate: url('data:image/svg+xml,');
--icon-calendar: url('data:image/svg+xml,');
--icon-clock: url('data:image/svg+xml,');
--icon-comment: url('data:image/svg+xml,');
--icon-comment-close: url('data:image/svg+xml,');
--icon-config: url('data:image/svg+xml,');
--icon-config-active: url('data:image/svg+xml,');
--icon-copy: url('data:image/svg+xml,');
--icon-cross: url('data:image/svg+xml,');
--icon-csv: url('data:image/svg+xml,');
--icon-cv: url('data:image/svg+xml,');
--icon-delete: url('data:image/svg+xml,');
--icon-disease: url('data:image/svg+xml,');
--icon-dislike: url('data:image/svg+xml,');
--icon-done: url('data:image/svg+xml,');
--icon-down: url('data:image/svg+xml,');
--icon-down-b: url('data:image/svg+xml,');
--icon-download: url('data:image/svg+xml,');
--icon-edit: url('data:image/svg+xml,');
--icon-edit-pay: url('data:image/svg+xml,');
--icon-employment: url('data:image/svg+xml,');
--icon-end: url('data:image/svg+xml,');
--icon-filter: url('data:image/svg+xml,');
--icon-flexible-schedule: url('data:image/svg+xml,');
--icon-folder: url('data:image/svg+xml,');
--icon-history: url('data:image/svg+xml,');
--icon-history-active: url('data:image/svg+xml,');
--icon-home: url('data:image/svg+xml,');
--icon-info: url('data:image/svg+xml,');
--icon-job: url('data:image/svg+xml,');
--icon-ko: url('data:image/svg+xml,');
--icon-like: url('data:image/svg+xml,');
--icon-list: url('data:image/svg+xml,');
--icon-loading: url('data:image/svg+xml,');
--icon-logout: url('data:image/svg+xml,');
--icon-mail: url('data:image/svg+xml,');
--icon-maximize: url('data:image/svg+xml,');
--icon-maximize-b: url('data:image/svg+xml,');
--icon-menu: url('data:image/svg+xml,');
--icon-menu-b: url('data:image/svg+xml,');
--icon-min: url('data:image/svg+xml,');
--icon-minimize: url('data:image/svg+xml,');
--icon-minimize-b: url('data:image/svg+xml,');
--icon-minimize-c: url('data:image/svg+xml,');
--icon-more: url('data:image/svg+xml,');
--icon-move: url('data:image/svg+xml,');
--icon-next: url('data:image/svg+xml,');
--icon-next-b: url('data:image/svg+xml,');
--icon-office: url('data:image/svg+xml,');
--icon-ok: url('data:image/svg+xml,');
--icon-order: url('data:image/svg+xml,');
--icon-performance: url('data:image/svg+xml,');
--icon-plus: url('data:image/svg+xml,');
--icon-points: url('data:image/svg+xml,');
--icon-prev: url('data:image/svg+xml,');
--icon-prev-b: url('data:image/svg+xml,');
--icon-print: url('data:image/svg+xml,');
--icon-projects-search: url('data:image/svg+xml,');
--icon-redo: url('data:image/svg+xml,');
--icon-reload: url('data:image/svg+xml,');
--icon-save: url('data:image/svg+xml,');
--icon-search: url('data:image/svg+xml,');
--icon-start: url('data:image/svg+xml,');
--icon-stats: url('data:image/svg+xml,');
--icon-surveys: url('data:image/svg+xml,');
--icon-team: url('data:image/svg+xml,');
--icon-teleconference: url('data:image/svg+xml,');
--icon-training: url('data:image/svg+xml,');
--icon-up: url('data:image/svg+xml,');
--icon-upload: url('data:image/svg+xml,');
--icon-user: url('data:image/svg+xml,');
--icon-user-b: url('data:image/svg+xml,');
--icon-workday: url('data:image/svg+xml,');
--icon-work-position: url('data:image/svg+xml,');
--icon-xls: url('data:image/svg+xml,');
}
.x_i::before, .x_i_child > *::before{
content: "";
display: block !important;
width: var(--iconSize);
height: var(--iconSize);
flex: 0 0 auto;
align-self: center;
position: absolute;
left: var(--padButtonW);
top: 50%;
transform: translateY(-50%);
background-color: currentColor;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
.x_i:has(> img)::before, .x_i_child > *:has(> img)::before, .x_i:has(> svg)::before, .x_i_child > *:has(> svg)::before{
background:none;
}
.x_i:not(:empty, .x_no_txt), .x_i_child > *:not(:empty, .x_no_txt){
padding-left: calc(var(--padButtonW) + var(--iconSize) + 5px) !important; /*5px separación del icono al texto*/
}
.x_i:empty, .x_i_child > *:empty, .x_i.x_no_txt, .x_i_child.x_no_txt > *{
width: var(--iconSize);
padding-left: var(--padButtonH);
padding-right: var(--padButtonH);
}
.x_i:empty::before, .x_i_child > *:empty::before, .x_i.x_no_txt::before, .x_i_child.x_no_txt > *::before{
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
a.x_i:focus-visible, .x_i:focus-visible, button.x_i:focus-visible, .x_i[type="button"]:focus-visible, .x_i[type="submit"]:focus-visible,
a.x_i_child > *:focus-visible, .x_i_child > *:focus-visible, .x_i_child > button:focus-visible, .x_i_child > *[type="button"]:focus-visible, .x_i_child > *[type="submit"]:focus-visible{
background-color: var(--color3_7) !important;
color: #000 !important;
outline: none;
}
a.x_i:not(:has(> img, > svg)):focus-visible::before, .x_i:not(:has(> img, > svg)):focus-visible::before, button.x_i:not(:has(> img, > svg)):focus-visible::before, .x_i[type="button"]:not(:has(> img, > svg)):focus-visible::before,
a.x_i_child > *:not(:has(> img, > svg)):focus-visible::before, .x_i_child > *:not(:has(> img, > svg)):focus-visible::before, .x_i_child > button:not(:has(> img, > svg)):focus-visible::before, .x_i_child > *[type="button"]:not(:has(> img, > svg)):focus-visible::before{
background-color: #000 !important;
}
a.x_i:focus-visible > svg, .x_i:focus-visible > svg, button.x_i:focus-visible > svg, .x_i[type="button"]:focus-visible > svg,
a.x_i_child > *:focus-visible > svg, .x_i_child > *:focus-visible > svg, .x_i_child > button:focus-visible > svg, .x_i_child > *[type="button"]:focus-visible > svg{
fill: #000 !important;
}
.x_mini.x_i::before, .x_mini.x_i_child > *::before{
width: calc( var(--iconSize) * 0.8);
height: calc( var(--iconSize) * 0.8);
}
.x_mini.x_i:not(:empty, .x_no_txt), .x_mini.x_i_child > *:not(:empty, .x_no_txt){
padding-left: calc(var(--padButtonWMini) + calc( var(--iconSize) * 0.8) + 5px) !important; /*5px separación del icono al texto*/
}
.x_mini.x_i:empty, .x_mini.x_i_child > *:empty, .x_mini.x_i.x_no_txt, .x_mini.x_i_child.x_no_txt > *{
width: calc( var(--iconSize) * 0.8);
padding-left: var(--padButtonHMini);
padding-right: var(--padButtonHMini);
}
.x_med.x_i::before, .x_med.x_i_child > *::before{
width: calc( var(--iconSize) * 1.2);
height: calc( var(--iconSize) * 1.2);
}
.x_med.x_i:not(:empty, .x_no_txt), .x_med.x_i_child > *:not(:empty, .x_no_txt){
padding-left: calc(var(--padButtonWMed) + calc( var(--iconSize) * 1.2) + 5px) !important; /*5px separación del icono al texto*/
}
.x_med.x_i:empty, .x_med.x_i_child > *:empty, .x_med.x_i.x_no_txt, .x_med.x_i_child.x_no_txt > *{
width: calc( var(--iconSize) * 1.2);
padding-left: var(--padButtonHMed);
padding-right: var(--padButtonHMed);
}
.x_big.x_i::before, .x_big.x_i_child > *::before{
width: calc( var(--iconSize) * 1.4);
height: calc( var(--iconSize) * 1.4);
}
.x_big.x_i:not(:empty, .x_no_txt), .x_big.x_i_child > *:not(:empty, .x_no_txt){
padding-left: calc(var(--padButtonWBig) + calc( var(--iconSize) * 1.4) + 5px) !important; /*5px separación del icono al texto*/
}
.x_big.x_i:empty, .x_big.x_i_child > *:empty, .x_big.x_i.x_no_txt, .x_big.x_i_child.x_no_txt > *{
width: calc( var(--iconSize) * 1.4);
padding-left: var(--padButtonHBig);
padding-right: var(--padButtonHBig);
}
/*-------- ICONOS PLANOS ------------*/
:is(.x_i_add, .x_i_add_child > *)::before{ -webkit-mask: var(--icon-add); mask: var(--icon-add); }
:is(.x_i_add_user, .x_i_add_user_child > *)::before{ -webkit-mask: var(--icon-add-user); mask: var(--icon-add-user); }
:is(.x_i_alert, .x_i_alert_child > *)::before{ -webkit-mask: var(--icon-alert); mask: var(--icon-alert); }
:is(.x_i_await_pay, .x_i_await_pay_child > *)::before{ -webkit-mask: var(--icon-await-pay); mask: var(--icon-await-pay); }
:is(.x_i_bell, .x_i_bell_child > *)::before{ -webkit-mask: var(--icon-bell); mask: var(--icon-bell); }
:is(.x_i_calc, .x_i_calc_child > *)::before{ -webkit-mask: var(--icon-calc); mask: var(--icon-calc); }
:is(.x_i_calculate, .x_i_calculate_child > *)::before{ -webkit-mask: var(--icon-calculate); mask: var(--icon-calculate); }
:is(.x_i_calendar, .x_i_calendar_child > *)::before{ -webkit-mask: var(--icon-calendar); mask: var(--icon-calendar); }
:is(.x_i_clock, .x_i_clock_child > *)::before{ -webkit-mask: var(--icon-clock); mask: var(--icon-clock); }
:is(.x_i_comment, .x_i_comment_child > *)::before{ -webkit-mask: var(--icon-comment); mask: var(--icon-comment); }
:is(.x_i_comment_close, .x_i_comment_close_child > *)::before{ -webkit-mask: var(--icon-comment-close); mask: var(--icon-comment-close); }
:is(.x_i_config, .x_i_config_child > *)::before{ -webkit-mask: var(--icon-config); mask: var(--icon-config); }
:is(.x_i_copy, .x_i_copy_child > *)::before{ -webkit-mask: var(--icon-copy); mask: var(--icon-copy); }
:is(.x_i_cross, .x_i_cross_child > *)::before{ -webkit-mask: var(--icon-cross); mask: var(--icon-cross); }
:is(.x_i_cv, .x_i_cv_child > *)::before{ -webkit-mask: var(--icon-cv); mask: var(--icon-cv); }
:is(.x_i_delete, .x_i_delete_child > *)::before{ -webkit-mask: var(--icon-delete); mask: var(--icon-delete); }
:is(.x_i_disease, .x_i_disease_child > *)::before{ -webkit-mask: var(--icon-disease); mask: var(--icon-disease); }
:is(.x_i_dislike, .x_i_dislike_child > *)::before{ -webkit-mask: var(--icon-dislike); mask: var(--icon-dislike); }
:is(.x_i_done, .x_i_done_child > *)::before{ -webkit-mask: var(--icon-done); mask: var(--icon-done); }
:is(.x_i_down, .x_i_down_child > *)::before{ -webkit-mask: var(--icon-down); mask: var(--icon-down); }
:is(.x_i_down_b, .x_i_down_b_child > *)::before{ -webkit-mask: var(--icon-down-b); mask: var(--icon-down-b); }
:is(.x_i_download, .x_i_download_child > *)::before{ -webkit-mask: var(--icon-download); mask: var(--icon-download); }
:is(.x_i_edit, .x_i_edit_child > *)::before{ -webkit-mask: var(--icon-edit); mask: var(--icon-edit); }
:is(.x_i_edit_pay, .x_i_edit_pay_child > *)::before{ -webkit-mask: var(--icon-edit-pay); mask: var(--icon-edit-pay); }
:is(.x_i_employment, .x_i_employment_child > *)::before{ -webkit-mask: var(--icon-employment); mask: var(--icon-employment); }
:is(.x_i_end, .x_i_end_child > *)::before{ -webkit-mask: var(--icon-end); mask: var(--icon-end); }
:is(.x_i_filter, .x_i_filter_child > *)::before{ -webkit-mask: var(--icon-filter); mask: var(--icon-filter); }
:is(.x_i_flexible_schedule, .x_i_flexible_schedule_child > *)::before{ -webkit-mask: var(--icon-flexible-schedule); mask: var(--icon-flexible-schedule); }
:is(.x_i_folder, .x_i_folder_child > *)::before{ -webkit-mask: var(--icon-folder); mask: var(--icon-folder); }
:is(.x_i_history, .x_i_history_child > *)::before{ -webkit-mask: var(--icon-history); mask: var(--icon-history); }
:is(.x_i_home, .x_i_home_child > *)::before{ -webkit-mask: var(--icon-home); mask: var(--icon-home); }
:is(.x_i_info, .x_i_info_child > *)::before{ -webkit-mask: var(--icon-info); mask: var(--icon-info); }
:is(.x_i_job, .x_i_job_child > *)::before{ -webkit-mask: var(--icon-job); mask: var(--icon-job); }
:is(.x_i_like, .x_i_like_child > *)::before{ -webkit-mask: var(--icon-like); mask: var(--icon-like); }
:is(.x_i_list, .x_i_list_child > *)::before{ -webkit-mask: var(--icon-list); mask: var(--icon-list); }
:is(.x_i_loading, .x_i_loading_child > *)::before{ -webkit-mask: var(--icon-loading); mask: var(--icon-loading); }
:is(.x_i_logout, .x_i_logout_child > *)::before{ -webkit-mask: var(--icon-logout); mask: var(--icon-logout); }
:is(.x_i_mail, .x_i_mail_child > *)::before{ -webkit-mask: var(--icon-mail); mask: var(--icon-mail); }
:is(.x_i_maximize, .x_i_maximize_child > *)::before{ -webkit-mask: var(--icon-maximize); mask: var(--icon-maximize); }
:is(.x_i_maximize_b, .x_i_maximize_b_child > *)::before{ -webkit-mask: var(--icon-maximize-b); mask: var(--icon-maximize-b); }
:is(.x_i_menu, .x_i_menu_child > *)::before{ -webkit-mask: var(--icon-menu); mask: var(--icon-menu); }
:is(.x_i_menu_b, .x_i_menu_b_child > *)::before{ -webkit-mask: var(--icon-menu-b); mask: var(--icon-menu-b); }
:is(.x_i_min, .x_i_min_child > *)::before{ -webkit-mask: var(--icon-min); mask: var(--icon-min); }
:is(.x_i_minimize, .x_i_minimize_child > *)::before{ -webkit-mask: var(--icon-minimize); mask: var(--icon-minimize); }
:is(.x_i_minimize_b, .x_i_minimize_b_child > *)::before{ -webkit-mask: var(--icon-minimize-b); mask: var(--icon-minimize-b); }
:is(.x_i_minimize_c, .x_i_minimize_c_child > *)::before{ -webkit-mask: var(--icon-minimize-c); mask: var(--icon-minimize-c); }
:is(.x_i_more, .x_i_more_child > *)::before{ -webkit-mask: var(--icon-more); mask: var(--icon-more); }
:is(.x_i_move, .x_i_move_child > *)::before{ -webkit-mask: var(--icon-move); mask: var(--icon-move); }
:is(.x_i_next, .x_i_next_child > *)::before{ -webkit-mask: var(--icon-next); mask: var(--icon-next); }
:is(.x_i_next_b, .x_i_next_b_child > *)::before{ -webkit-mask: var(--icon-next-b); mask: var(--icon-next-b); }
:is(.x_i_office, .x_i_office_child > *)::before{ -webkit-mask: var(--icon-office); mask: var(--icon-office); }
:is(.x_i_order, .x_i_order_child > *)::before{ -webkit-mask: var(--icon-order); mask: var(--icon-order); }
:is(.x_i_performance, .x_i_performance_child > *)::before{ -webkit-mask: var(--icon-performance); mask: var(--icon-performance); }
:is(.x_i_plus, .x_i_plus_child > *)::before{ -webkit-mask: var(--icon-plus); mask: var(--icon-plus); }
:is(.x_i_points, .x_i_points_child > *)::before{ -webkit-mask: var(--icon-points); mask: var(--icon-points); }
:is(.x_i_prev, .x_i_prev_child > *)::before{ -webkit-mask: var(--icon-prev); mask: var(--icon-prev); }
:is(.x_i_prev_b, .x_i_prev_b_child > *, .x_i_back_b, .x_i_back_b_child > *)::before{ -webkit-mask: var(--icon-prev-b); mask: var(--icon-prev-b); }
:is(.x_i_print, .x_i_print_child > *)::before{ -webkit-mask: var(--icon-print); mask: var(--icon-print); }
:is(.x_i_projects_search, .x_i_projects_search_child > *)::before{ -webkit-mask: var(--icon-projects-search); mask: var(--icon-projects-search); }
:is(.x_i_redo, .x_i_redo_child > *)::before{ -webkit-mask: var(--icon-redo); mask: var(--icon-redo); }
:is(.x_i_reload, .x_i_reload_child > *)::before{ -webkit-mask: var(--icon-reload); mask: var(--icon-reload); }
:is(.x_i_save, .x_i_save_child > *)::before{ -webkit-mask: var(--icon-save); mask: var(--icon-save); }
:is(.x_i_search, .x_i_search_child > *)::before{ -webkit-mask: var(--icon-search); mask: var(--icon-search); }
:is(.x_i_start, .x_i_start_child > *)::before{ -webkit-mask: var(--icon-start); mask: var(--icon-start); }
:is(.x_i_stats, .x_i_stats_child > *)::before{ -webkit-mask: var(--icon-stats); mask: var(--icon-stats); }
:is(.x_i_surveys, .x_i_surveys_child > *)::before{ -webkit-mask: var(--icon-surveys); mask: var(--icon-surveys); }
:is(.x_i_team, .x_i_team_child > *)::before{ -webkit-mask: var(--icon-team); mask: var(--icon-team); }
:is(.x_i_training, .x_i_training_child > *)::before{ -webkit-mask: var(--icon-training); mask: var(--icon-training); }
:is(.x_i_teleconference, .x_i_teleconference_child > *)::before{ -webkit-mask: var(--icon-teleconference); mask: var(--icon-teleconference); }
:is(.x_i_up, .x_i_up_child > *)::before{ -webkit-mask: var(--icon-up); mask: var(--icon-up); }
:is(.x_i_upload, .x_i_upload_child > *)::before{ -webkit-mask: var(--icon-upload); mask: var(--icon-upload); }
:is(.x_i_user, .x_i_user_child > *)::before{ -webkit-mask: var(--icon-user); mask: var(--icon-user); }
:is(.x_i_user_b, .x_i_user_b_child > *)::before{ -webkit-mask: var(--icon-user-b); mask: var(--icon-user-b); }
:is(.x_i_workday, .x_i_workday_child > *)::before{ -webkit-mask: var(--icon-workday); mask: var(--icon-workday); }
:is(.x_i_work_position, .x_i_work_position_child > *)::before{ -webkit-mask: var(--icon-work-position); mask: var(--icon-work-position); }
/*-------- ICONOS DE COLORES ------------*/
.x_i.x_not_fill::before, .x_i_child.x_not_fill_child > *::before{
-webkit-mask: none;
mask: none;
background-color: initial;
}
a.x_i.x_not_fill:focus-visible::before, .x_i.x_not_fill:focus-visible::before, button.x_i.x_not_fill:focus-visible::before, .x_i.x_not_fill[type="button"]:focus-visible::before, .x_i.x_not_fill[type="submit"]:focus-visible::before,
.x_i_child.x_not_fill_child > *:focus-visible::before, .x_i_child.x_not_fill_child > *:focus-visible::before, .x_i_child.x_not_fill_child > button:focus-visible::before, .x_i_child.x_not_fill_child > *[type="button"]:focus-visible::before, .x_i_child.x_not_fill_child > *[type="submit"]:focus-visible::before{
background-color: initial !important;
}
.x_i_csv::before, .x_i_csv_child > *::before{ background-image: var(--icon-csv); }
.x_i_ko::before, .x_i_ko_child > *::before{ background-image: var(--icon-ko); }
.x_i_ok::before, .x_i_ok_child > *::before{ background-image: var(--icon-ok); }
.x_i_xls::before, .x_i_xls_child > *::before{ background-image: var(--icon-xls); }
/*-------- ICONOS DE COLORES CON POSIBLE ESTADO ACTIVO ------------*/
:is(.x_i_bell_active, .x_i_bell_active_child > *, .x_i_bell.x_active, .x_i_bell_child.x_active > *)::before,
:is(.x_i_bell_active, .x_i_bell_active_child > *, .x_i_bell.x_active, .x_i_bell_child.x_active > *):focus-visible::before{ -webkit-mask: none; mask: none; background-color: initial !important; background-image: var(--icon-bell-active); }
:is(.x_i_config_active, .x_i_config_active_child > *, .x_i_config.x_active, .x_i_config_child.x_active > *)::before,
:is(.x_i_config_active, .x_i_config_active_child > *, .x_i_config.x_active, .x_i_config_child.x_active > *):focus-visible::before{ -webkit-mask: none; mask: none; background-color: initial !important; background-image: var(--icon-config-active); }
:is(.x_i_history_active, .x_i_history_active_child > *, .x_i_history.x_active, .x_i_history_child.x_active > *)::before,
:is(.x_i_history_active, .x_i_history_active_child > *, .x_i_history.x_active, .x_i_history_child.x_active > *):focus-visible::before{ -webkit-mask: none; mask: none; background-color: initial !important; background-image: var(--icon-history-active); }