/* Compact design variables ------------------------------------------------ */
:root {
    /* Adjust this scale to make the whole site bigger or smaller in one place */
    --app-font-scale: 0.85;
    --app-line-height-base: 1;
    --app-spacing-unit: 0.8rem;
    --app-spacing-unit-sm: 0.6rem;
    --app-grid-row-padding-y: 0.5rem;
    --app-grid-row-padding-x: 0.5rem;
    --app-toolbar-gap: 0.5rem;

    /* Bootstrap variable overrides that follow the compact scale */
    --bs-body-font-size: calc(var(--app-font-scale) * 1rem);
    --bs-body-line-height: var(--app-line-height-base);
    --bs-btn-font-size: var(--bs-body-font-size);
    --bs-btn-padding-y: 0.35rem;
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-border-radius: 0.3rem;
    --bs-form-control-font-size: var(--bs-body-font-size);
    --bs-form-control-padding-y: 0.35rem;
    --bs-form-control-padding-x: 0.65rem;
    --bs-form-label-margin-bottom: 0.35rem;
    --bs-card-spacer-y: 0.75rem;
    --bs-card-spacer-x: 0.75rem;
    --bs-table-cell-padding-y: 0.45rem;
    --bs-table-cell-padding-x: 0.75rem;
    --bs-list-group-item-padding-y: 0.4rem;
    --bs-nav-link-padding-y: 0.35rem;
    --bs-dropdown-item-padding-y: 0.35rem;
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 0.75rem;
}

/* Alinea el footer abajo... */
body {
    min-height: 100vh;
    font-size: var(--bs-body-font-size);
    line-height: var(--bs-body-line-height);
    font-family: 'Mulish', sans-serif;
    /* Uncomment the line below to switch to Roboto. */
    /* font-family: 'Roboto', sans-serif; */
}

body > main {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
}

body > main > .footer {
    margin-top: auto;
}

.footer {
    border-top: 1px solid #dedede;
    background-color: #f1f3f5;
    padding: 0.75rem 0;
    display: flex;
    align-items: center;
}

.footer .container-fluid {
    display: flex;
    align-items: center;
}

.footer-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    width: 100%;
}

.footer-navigation {
    margin-left: auto;
    padding-bottom: 0;
}

/* Elimina el bullet de la lista de errores de validación de login */
.validation-summary-errors ul {
    list-style-type: none; /* Oculta el punto de la lista */
    padding: 0; /* Elimina el espaciado izquierdo que deja el punto */
    margin: 0; /* Buena práctica para resetear el margen */
}

.bg-primary {
    background-color: rgba(var(--primary-base-rgb), var(--bs-bg-opacity)) !important;
}

.btn-primary {
    --bs-btn-color: var(--primary-text-base);
    --bs-btn-bg: var(--primary-base);
    --bs-btn-border-color: var(--primary-border-base);
    --bs-btn-hover-color: var(--primary-text-hover);
    --bs-btn-hover-bg: var(--primary-hover);
    --bs-btn-hover-border-color: var(--primary-border-hover);
    --bs-btn-focus-shadow-rgb: 240, 90, 79;
    --bs-btn-active-color: var(--primary-text-active);
    --bs-btn-active-bg: var(--primary-active);
    --bs-btn-active-border-color: var(--primary-border-active);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--primary-text-disabled);
    --bs-btn-disabled-bg: var(--primary-disabled);
    --bs-btn-disabled-border-color: var(--primary-border-disabled);
}

.nav {
    --bs-nav-link-color: var(--primary-text-navigation);
    --bs-nav-link-hover-color: var(--primary-active);
    --bs-nav-link-disabled-color: var(--primary-disabled);
}

#main-menu li .nav-link.active {
    text-decoration: underline;
    text-decoration-thickness: 0.2em;
    text-underline-offset: 0.4em;
}

#main-menu .main-menu-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    font-weight: 500;
}

#main-menu .main-menu-link i {
    font-size: 1.5rem;
}

#main-menu .main-menu-link span {
    display: block;
}

.icon-primary {
    color: var(--primary-base);
}

/* Compact helpers ------------------------------------------------------- */
label, .form-label {
    margin-bottom: var(--bs-form-label-margin-bottom);
}

.card-body, .modal-body {
    padding: var(--app-spacing-unit) var(--app-spacing-unit);
}

.card-header, .modal-header, .modal-footer {
    padding: var(--app-spacing-unit-sm) var(--app-spacing-unit);
}

.table > :not(caption) > * > * {
    padding: var(--bs-table-cell-padding-y) var(--bs-table-cell-padding-x);
}

.btn, .btn-group .btn {
    line-height: var(--app-line-height-base);
}

.form-control, .form-select {
    line-height: var(--app-line-height-base);
}

/* Syncfusion */

/* Ensure Syncfusion controls inherit the global font for text while preserving icon fonts */
.e-control,
.e-control *:not(.e-icons):not(.e-btn-icon):not(.e-icon) {
    font-family: 'Roboto', sans-serif;
    /*font-family: 'Roboto', sans-serif;*/
    /*font-family: 'Open Sans', sans-serif;*/
}

/* Syncfusion compact adjustments */
.e-grid .e-gridheader .e-headercell,
.e-grid .e-rowcell,
.e-grid .e-summaryrow .e-summarycell {
    padding: var(--app-grid-row-padding-y) var(--app-grid-row-padding-x);
    font-size: var(--bs-body-font-size);
    line-height: var(--app-line-height-base);
}

.e-grid .e-gridheader .e-headercelldiv {
    line-height: var(--app-line-height-base);
}

.e-grid .e-gridcontent .e-rowcell {
    line-height: var(--app-line-height-base);
}

.e-grid .e-toolbar {
    gap: var(--app-toolbar-gap);
}

/* Syncfusion Grid Toolbar */

.e-toolbar {
    padding-bottom: .5rem;
}

.e-toolbar-item {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
}

.e-btn-icon {
    /*color: #FFFFFF !important;*/
    display: none !important;
}

.e-tbar-btn {
    background-color: var(--primary-base) !important;
}

.e-tbar-btn :hover {
    background-color: var(--primary-hover) !important;
}

.e-toolbar .e-tbar-btn-text, .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn-text {
    color: #FFFFFF !important;
}

/* Syncfusion Grid Pager */

.e-grid .e-gridpager {
    background-color: #fff;
}

.e-grid .e-pagercontainer {
    background-color: #fff;
}

.e-grid .e-gridpager .e-prevpagedisabled,
.e-grid .e-gridpager .e-prevpage,
.e-grid .e-gridpager .e-nextpage,
.e-grid .e-gridpager .e-nextpagedisabled,
.e-grid .e-gridpager .e-lastpagedisabled,
.e-grid .e-gridpager .e-lastpage,
.e-grid .e-gridpager .e-firstpage,
.e-grid .e-gridpager .e-firstpagedisabled {
    background-color: #f8f9fa;
}

.e-pager div.e-icons.e-pager-default {
    color: var(--primary-base);
}

.e-pager .e-currentitem, .e-pager .e-currentitem:hover {
    border-right-color: var(--primary-base-50-alpha);
    background: var(--primary-base);
    color: var(--primary-base);
}

.e-pager .e-currentitem {
    border: 3px solid var(--primary-base-50-alpha);
}

.e-grid .e-focused:not(.e-menu-item):not(.e-editedbatchcell) {
    box-shadow: 0 0 0 1px var(--primary-base) inset;
}

.e-pager .e-currentitem.e-numericitem.e-focused {
    box-shadow: 0 0 0 1px var(--primary-base) inset;
}

.e-grid .e-gridpager .e-numericitem {
    border-radius: initial;
    color: var(--primary-base);
}

.e-grid .e-gridpager .e-currentitem {
    background-color: #f8f9fa;
}

/* Estilo para truncar texto en los grids */
.truncate-text {
    white-space: nowrap!important;
    overflow: hidden!important;
    text-overflow: ellipsis!important;
    max-width: 150px;
}

/* Alert (override bootstrap) */
.alert {
    margin-bottom: 0px !important;
    padding: 0.5rem 0.75rem !important;
}

.alert .btn-close {
    position: absolute !important;
    right: 0.75rem;
    top: 0.5rem;
}

/* Syncfusion Timeline */
.state-completed .e-dot {
    background: #33cc33;
    border-color: #33cc33;
}

.state-progress .e-dot {
    background-color: #ff9900;
    border-color: #ff9900;
}

.e-timeline-item.state-installation.e-connector::after {
    border: 1.5px #dee2e6 dashed;
}

.state-failure .e-dot {
    background: #ff0000;
    outline: 1px dashed #ff0000;
    border-color: #ff0000;
}

/* Syncfusion Card */
.e-card .e-card-header {
    background-color: #f8f9fa;
    padding-bottom: 12px;
    border-bottom: 1px solid #dee2e6;
    font-size: 14px;
    font-weight: 500;
}