/*
 * Identidad tipografica y escala de iconos de G-Nomina.
 *
 * El manual de marca define Roboto Light para texto, Bold para subtitulos
 * y Black para titulos. La fuente se sirve localmente para evitar una
 * dependencia de red y reducir cambios de medida durante la carga.
 */
@font-face {
    font-display: swap;
    font-family: "Roboto";
    font-style: normal;
    font-weight: 300 900;
    src: url("../../../fonts/roboto/roboto-latin-variable.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "Roboto";
    font-style: italic;
    font-weight: 300 900;
    src: url("../../../fonts/roboto/roboto-latin-variable-italic.woff2") format("woff2");
}

:root {
    --app-font-family: "Roboto", Arial, sans-serif;
    --app-font-weight-body: 300;
    --app-font-weight-control: 400;
    --app-font-weight-subtitle: 700;
    --app-font-weight-title: 900;
    --app-icon-size-sm: 0.875rem;
    --app-icon-size-md: 1rem;
    --app-icon-size-lg: 1.125rem;
}

body.app-shell,
body.access-shell {
    font-family: var(--app-font-family);
    font-synthesis: none;
    font-weight: var(--app-font-weight-body);
    letter-spacing: normal;
}

body.app-shell :where(button, input, optgroup, option, select, textarea),
body.access-shell :where(button, input, optgroup, option, select, textarea) {
    font-family: inherit !important;
}

body.app-shell :where(input, option, select, textarea, .form-control, .custom-select),
body.access-shell :where(input, option, select, textarea, .form-control, .custom-select) {
    font-weight: var(--app-font-weight-control);
}

/* Los controles de terceros conservan sus fuentes de iconos, pero no otra tipografia de texto. */
body.app-shell :where(.e-control, .e-control-wrapper, .k-widget, .k-button, .k-input, .k-textbox),
body.access-shell :where(.e-control, .e-control-wrapper, .k-widget, .k-button, .k-input, .k-textbox) {
    font-family: inherit !important;
}

body.app-shell :where(h1, .h1, .page-title, .login-form h1),
body.access-shell :where(h1, .h1, .page-title) {
    font-family: inherit !important;
    font-weight: var(--app-font-weight-title) !important;
    letter-spacing: normal !important;
}

/* Los encabezados principales heredados de componentes tienen mayor especificidad. */
body.app-shell .app-page-shell .superior > header h1,
body.app-shell .app-page-shell .form-container h1,
body.app-shell .app-page-shell .form-container-wide h1,
body.app-shell .app-page-shell .content-header h1 {
    font-weight: var(--app-font-weight-title) !important;
    letter-spacing: normal !important;
}

body.app-shell :where(h2, h3, h4, h5, h6, .h2, .h3, .h4, .h5, .h6, .card-title, .box-title, .modal-title),
body.access-shell :where(h2, h3, h4, h5, h6, .h2, .h3, .h4, .h5, .h6, .card-title, .modal-title) {
    font-family: inherit !important;
    font-weight: var(--app-font-weight-subtitle) !important;
    letter-spacing: normal !important;
}

body.app-shell :where(.btn, button, label, th),
body.access-shell :where(.btn, button, label, th) {
    font-family: inherit !important;
    font-weight: var(--app-font-weight-subtitle);
}

body.app-shell .app-sidebar :where(.nav-sidebar, .nav-treeview) > .nav-item > .nav-link,
body.access-shell .access-shell__nav {
    font-family: inherit;
    font-weight: var(--app-font-weight-subtitle);
}

/* Caja optica estable: evita que iconos distintos desplacen las etiquetas. */
body.app-shell :where(.btn, .nav-link, .dropdown-item) > :where(.fa, .fas, .far, .fab),
body.access-shell :where(.btn, .nav-link, .dropdown-item) > :where(.fa, .fas, .far, .fab) {
    flex: 0 0 var(--app-icon-size-md);
    font-size: var(--app-icon-size-md);
    inline-size: var(--app-icon-size-md);
    line-height: 1;
    text-align: center;
}

body.app-shell .btn-sm > :where(.fa, .fas, .far, .fab),
body.access-shell .btn-sm > :where(.fa, .fas, .far, .fab) {
    flex-basis: var(--app-icon-size-sm);
    font-size: var(--app-icon-size-sm);
    inline-size: var(--app-icon-size-sm);
}

body.app-shell .btn-lg > :where(.fa, .fas, .far, .fab),
body.access-shell .btn-lg > :where(.fa, .fas, .far, .fab) {
    flex-basis: var(--app-icon-size-lg);
    font-size: var(--app-icon-size-lg);
    inline-size: var(--app-icon-size-lg);
}

body.app-shell .app-sidebar .nav-sidebar > .nav-item > .nav-link > .nav-icon {
    font-size: var(--app-icon-size-lg);
    line-height: 1;
}

body.app-shell .app-sidebar .nav-treeview > .nav-item > .nav-link > .nav-icon,
body.app-shell .app-page-shell .grid-action-icon {
    font-size: var(--app-icon-size-sm);
    line-height: 1;
}

/*
 * Solo estas dos denominaciones antiguas siguen presentes en las vistas.
 * Mantenerlas aqui permite retirar el paquete completo de compatibilidad v4.
 */
.fa.fa-bar-chart,
.fa.fa-file-text,
.fa.fa-refresh {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

.fa.fa-bar-chart::before {
    content: "\f080";
}

.fa.fa-file-text::before {
    content: "\f15c";
}

.fa.fa-refresh::before {
    content: "\f021";
}