/*Fonts*/
@font-face {
    font-family: 'Poppins';
    src: local('Poppins'),url('../fonts/poppins/Poppins-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'Oxygen Mono';
    src: local('Oxygen Mono'),url('../fonts/oxygen/OxygenMono-Regular.ttf') format('truetype');
}

html, body {
    font-family: Poppins, Helvetica, Arial, sans-serif !important;
    font-size: 1rem;
}

/*Colors*/
:root,
[data-theme=light] {
    /*Base*/
    --kt-primary: #378cc5 !important;
    --kt-secondary: #dbdde3 !important;
    --kt-success: #5cc360 !important;
    --kt-info: #a565d3 !important;
    --kt-warning: #f1a116b3 !important;
    --kt-danger: #df3d64 !important;
    /*Active*/
    --kt-primary-active: #2773a7 !important;
    --kt-secondary-active: #B5B5C3 !important;
    --kt-success-active: #47be7d !important;
    --kt-info-active: #5014d0 !important;
    --kt-warning-active: #f1bc00 !important;
    --kt-danger-active: #d9214e !important;
    /*Light*/
    --kt-primary-light: #f1faff !important;
    --kt-secondary-light: #e9f1f5 !important;
    --kt-success-light: #e8fff3 !important;
    --kt-info-light: #f8f5ff !important;
    --kt-warning-light: #fff8dd !important;
    --kt-danger-light: #fff5f8 !important;
    /*Text*/
    --kt-text-primary: #378cc5 !important;
    --kt-text-secondary: #E4E6EF !important;
    --kt-text-success: #5cc360 !important;
    --kt-text-info: #a565d3 !important;
    --kt-text-warning: #ffc700 !important;
    --kt-text-danger: #df3d64 !important;
    /*Inverse*/
    --kt-primary-inverse: #ffffff !important;
    --kt-secondary-inverse: #515465 !important;
    --kt-light-inverse: #7E8299 !important;
    --kt-success-inverse: #ffffff !important;
    --kt-info-inverse: #ffffff !important;
    --kt-warning-inverse: #ffffff !important;
    --kt-danger-inverse: #ffffff !important;
}

.btn.btn-light-warning i, .btn.btn-light-warning .svg-icon {
    color: var(--kt-warning-active) !important;
}

.btn.btn-light-secondary i, .btn.btn-light-secondary .svg-icon {
    color: var(--kt-secondary-inverse) !important;
}

.btn-xxs {
    padding: 0.25rem 0.5rem !important; /* menos padding vertical y horizontal */
    font-size: 0.9rem !important; /* letra m�s peque�a */
    line-height: 1 !important; /* ajusta la altura de l�nea */
    border-radius: 0.2rem !important; /* opcional, m�s peque�o que el default */
    min-height: auto !important; /* que no fuerce un min-height mayor */
}

.link-primary:hover, .link-primary:focus {
    color: var(--kt-primary) !important;
}

.bg-primary-light {
    background-color: var(--kt-primary-light);
}

.bg-warning-light {
    background-color: var(--kt-warning-light);
}

.bg-success-light {
    background-color: var(--kt-success-light);
}

.bg-info-light {
    background-color: var(--kt-info-light);
}

.badge-light-success {
    color: #36a769 !important;
}

.badge-light-warning {
    color: #e99937 !important;
}

.badge-light-green {
    color: #3ab371 !important;
}

.badge-light-secondary {
    color: var(--kt-gray-700) !important;
}

.bg-primary-light-hover:hover {
    background-color: rgba(var(--bs-primary-rgb), .10) !important;
}


.validation-message {
    color: var(--kt-danger);
    font-size: 0.85rem;
}

/*Para que al minimizar la barra lateral no se mueva el logo para abajo*/
.app-sidebar-logo-minimize {
    margin-bottom: 2.7rem;
}

/*Para estirar las letras del logo*/
.stretch {
    display: inline-block;
    -webkit-transform: scale(1.7,1); /* Safari and Chrome */
    -moz-transform: scale(1.7,1); /* Firefox */
    -ms-transform: scale(1.7,1); /* IE 9 */
    -o-transform: scale(1.7,1); /* Opera */
    transform: scale(1.7,1); /* W3C */
}

/*Temporal blurried dashboard*/
.blurred-dashboard {
    -webkit-filter: blur(13px);
    filter: blur(13px);
    pointer-events: none;
    user-select: none;
}

/*Avoids small font in grids*/
.table-sm {
    font-size: 1rem;
}

/*Switch type checkboxes*/
.form-switch.form-check-solid.form-switch-sm .form-check-input {
    height: 1.5rem !important;
    width: 2.5rem !important;
}

/*Used for grid to fill all the vertical space visually available without scroll*/
.fill-all-view-height {
    max-height: calc(100vh - 22rem);
    overflow: inherit;
}

.fill-all-view-height-no-pag {
    max-height: calc(100vh - 350px);
    overflow: auto;
}

/*Used for grid in a view with tabs to fill all the vertical space visually available without scroll*/
.fill-all-view-height-tabs {
    max-height: calc(100vh - 24rem);
    overflow: auto;
}

.fill-all-view-height-tabs-no-pag {
    max-height: calc(100vh - 445px);
    overflow: auto;
}

/*Grid searchbars*/
.searchbar {
    font-size: 1.1rem;
    font-weight: 500;
}

/* Popover (used for grid filters) */
.popover {
    font-family: Poppins !important;
}

/*Toasts*/
.blazored-toast {
    border-radius: 0.625rem;
    z-index: 999999 !important;
    transform: translateZ(0);
}

    .blazored-toast .blazored-toast-icon i {
        color: white !important;
    }

.blazored-toast-container {
    z-index: 9999 !important;
}

.blazored-toast-close i {
    color: white !important;
}

blazored-toast-close {
    margin-right: -5px;
}

.blazored-toast-body .blazored-toast-header h5 {
    color: white;
}

.blazored-toast-icon {
    width: 3.5rem;
    text-align: center;
}

    .blazored-toast-icon i {
        font-size: 2.5rem !important;
    }

.blazored-toast-progressbar > span {
    border-bottom-left-radius: 1.3rem;
    max-width: 29rem;
    margin-left: 3px;
}

.success-blazored-toast-bg-color {
    background-color: var(--kt-success);
}

.error-blazored-toast-bg-color {
    background-color: var(--kt-danger);
}

.warning-blazored-toast-bg-color {
    background-color: var(--kt-warning);
}

.info-blazored-toast-bg-color {
    background-color: var(--kt-primary);
}


/*Modals*/
.dxbs-popup {
    animation-duration: 0.3s;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: none;
    animation-play-state: running;
    animation-name: swal2-show;
}

/*Validation*/
.validation-errors {
    list-style-type: none;
}

/*Tasks*/
.task-board-card {
    border: solid 1px lightgray !important;
    border-radius: 8px !important;
}

.task-board-card-aw {
    border: solid 1px lightgray !important;
    border-radius: 8px !important;
    background-color: antiquewhite !important;
}

.task-board-card-ab {
    border: solid 1px lightgray !important;
    border-radius: 8px !important;
    background-color: aliceblue !important;
}

.task-board-card-gh {
    border: solid 1px lightgray !important;
    border-radius: 8px !important;
    background-color: ghostwhite !important;
}

.task-board-card-lb {
    border: solid 1px lightgray !important;
    border-radius: 8px !important;
    background-color: lavenderblush !important;
}

.task-board-card-lc {
    border: solid 1px lightgray !important;
    border-radius: 8px !important;
    background-color: lemonchiffon !important;
}

.task-board-card-mc {
    border: solid 1px lightgray !important;
    border-radius: 8px !important;
    background-color: mintcream !important;
}

/*DASHBOARD*/
.dashboard-list-card {
    padding: 2rem;
}

    .dashboard-list-card .content {
        height: calc(100vh - 40rem) !important;
        overflow: auto;
    }

@media only screen and (max-device-width: 768px) {
    .dashboard-list-card .content {
        height: calc(100vh - 30rem);
        overflow: auto;
    }
}

@media only screen and (max-device-width: 1440px) {
    .dashboard-list-card .content {
        height: calc(100vh - 30rem) !important;
        overflow: auto;
    }
}


/*HolidaysRequestOverview form*/
@media only screen and (min-width: 1600px) {
    .request-form-margin {
        margin-left: -4rem;
    }
}

/*Styles on mobile*/
@media only screen and (max-device-width: 768px) {
    .fill-all-view-height {
        max-height: calc(100vh - 370px);
        overflow: auto;
    }
}

@media (max-width: 767.98px) {
    #messageViewerOffcanvas.offcanvas-end {
        width: 100% !important;
        max-width: 100% !important;
    }
}


.no-truncate {
    text-overflow: clip !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    scrollbar-width: thin;
}


/*Variables*/
:root,
[data-theme=light] {
    --kt-text-warning: #ff8c00 !important;
}

/*Specific view classes that cannot be included in their own css files*/
@media screen and (min-width: 200px) and (max-width: 1500px) {
    .request-progress-bar-item {
        min-width: 100px !important;
    }
}

/* Print helpers (GLOBAL) */
@media print {
    .no-print {
        display: none !important;
    }

    .print-only {
        display: block !important;
    }

    /* Hide top-menu and sidebar on print */
    #kt_app_header,
    #kt_app_sidebar {
        display: none !important;
    }

    /* Collapse reserved space for header/sidebar */
    #kt_app_page,
    #kt_app_wrapper,
    #kt_app_main,
    #kt_app_content,
    #kt_app_content_container {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Make the main container use full page width instead of Bootstrap max-width */
    .container-xl {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Optional: remove card shadows/borders for cleaner print */
    .card {
        box-shadow: none !important;
        border: 1px solid #000 !important; /* o none si quieres sin borde */
    }

    /* Keep footer visible, but hide its menu links */
    #kt_app_footer {
        display: block !important;
        margin: 0 !important;
        padding: 0.5rem 0 !important;
    }

        #kt_app_footer .menu,
        #kt_app_footer .menu-item,
        #kt_app_footer .menu-link {
            display: none !important;
        }
}

/* End of printing utilities */

/* ===================== */
/* Timeline (scoped CSS) */
/* ===================== */

/* Eje y tamaño del nodo (avatar o icono) */
.timeline {
    --tl-x: 0.50rem; /* posición horizontal del eje */
    --dot-size: 44px; /* coincide con SymbolSize */
    --icon-size: 44px; /* tamaño del <i> dentro del círculo */
    position: relative;
    margin-left: calc(var(--tl-x) + 2rem);
}

/* Cada item dibuja su propio tramo de línea */
.timeline-item {
    position: relative;
    padding-left: calc(var(--tl-x) + 3rem);
    display: flex;
    align-items: flex-start;
}

    .timeline-item::after {
        content: "";
        position: absolute;
        left: 5px;
        top: 10px;
        transform: translate(0%, 50%);
        bottom: -0.5rem;
        width: 3px;
        background: var(--bs-border-color, #dee2e6);
    }

    .timeline-item:last-child::after {
        display: none;
    }

/* Wrapper común: posiciona el nodo en el eje */
.timeline-avatar {
    position: absolute;
    left: var(--tl-x);
    top: 0;
    transform: translate(-40%, 70%);
    overflow: hidden;
    z-index: 1;
}

    /* SOLO ICONO: círculo blanco con borde gris claro */
    .timeline-avatar.icon {
        border-radius: 75%;
        background: #fff;
        left: 2px;
        height: 40px;
        width: 40px;
        box-shadow: 0 0 0 2px var(--bs-border-color, #dee2e6);
    }

        .timeline-avatar.icon .timeline-icon {
            font-size: 20px;
            line-height: 1;
            top: 20px;
        }




/* Tarjeta permite solape */
.timeline-card {
    overflow: visible;
    margin-top: calc(var(--dot-size) / 4);
}

    /* Seguridad de textos largos */
    .timeline-card .card-body .fw-normal {
        word-break: break-word;
    }