/*
 * CITIUS - Administracion / tema visual alineado con estudiantes.citius-uam.org
 *
 * Esta hoja debe cargarse la ultima. Usa deliberadamente los selectores reales
 * de la carcasa (#sidebar, #titulos, #marco) para neutralizar las reglas legacy
 * con !important que todavia existen en intranet-v2.css.
 */

:root {
    --citius-green-900: #314c10;
    --citius-green-800: #3d5d14;
    --citius-green-700: #52751f;
    --citius-green-600: #668b2e;
    --citius-green-action: #128b4d;
    --citius-green-action-hover: #0d7640;
    --citius-green-soft: #f2f6eb;
    --citius-green-softer: #f8faf5;
    --citius-green-border: #dce6d0;
    --citius-green-border-strong: #cbd9bb;
    --citius-page: #fbfcfa;
    --citius-surface: #ffffff;
    --citius-text: #20251c;
    --citius-muted: #6b7463;
    --citius-danger: #e64755;
    --citius-yellow: #e8cf19;
    --citius-sidebar-width: 17rem;
    --citius-radius: .72rem;
    --citius-radius-lg: 1rem;
}

html,
body {
    background: var(--citius-page) !important;
    color: var(--citius-text);
}

/* -------------------------------------------------------------------------
   Cabecera: replica el lenguaje del area de estudiantes
   ---------------------------------------------------------------------- */
#titulos.app-header {
    min-height: 4.85rem !important;
    padding: .55rem 0 !important;
    color: var(--citius-text) !important;
    background: #fff !important;
    border: 0 !important;
    border-bottom: 1px solid var(--citius-green-border) !important;
    box-shadow: none !important;
}

#titulos.app-header .app-brand {
    color: var(--citius-green-900) !important;
    text-decoration: none;
}

.app-logo-frame {
    display: inline-flex;
    height: 3.45rem;
    min-width: 9.7rem;
    align-items: center;
    justify-content: center;
    padding: .35rem .75rem;
    background: #fff;
    border: 1px solid var(--citius-green-border);
    border-radius: .8rem;
}

#titulos .app-logo {
    display: block;
    width: auto !important;
    height: 2.55rem !important;
    max-width: 8.4rem !important;
    object-fit: contain;
}

#titulos .app-module-title {
    padding: 0 !important;
    color: var(--citius-green-900) !important;
    border: 0 !important;
    font-size: 1.02rem !important;
    font-weight: 750 !important;
    letter-spacing: -.01em !important;
}

#titulos .app-session-text {
    max-width: 29rem;
    color: #5f6758 !important;
    font-size: .78rem !important;
    line-height: 1.35;
    text-align: right;
}

#textos_comandos .app-font-btn {
    min-width: 2rem;
    color: #596550 !important;
    background: #fff !important;
    border: 1px solid var(--citius-green-border-strong) !important;
}

#textos_comandos .app-font-btn:hover,
#textos_comandos .app-font-btn:focus-visible {
    color: var(--citius-green-900) !important;
    background: var(--citius-green-soft) !important;
    border-color: var(--citius-green-600) !important;
}

.app-header-logout {
    color: var(--citius-danger) !important;
    background: #fff !important;
    border: 1px solid var(--citius-danger) !important;
    border-radius: .35rem !important;
    font-weight: 550;
}

.app-header-logout:hover,
.app-header-logout:focus-visible {
    color: #fff !important;
    background: var(--citius-danger) !important;
}

.app-menu-toggle {
    color: var(--citius-green-900) !important;
    background: var(--citius-green-soft) !important;
    border: 1px solid var(--citius-green-border) !important;
}

.app-menu-toggle .navbar-toggler-icon {
    filter: none !important;
}

/* Breadcrumb discreto, como separador entre cabecera y aplicacion. */
#breadcrumb.app-toolbar {
    min-height: 2.35rem !important;
    color: #5d6854 !important;
    background: #fbfdf9 !important;
    border: 0 !important;
    border-bottom: 1px solid #e4eadc !important;
    box-shadow: none !important;
}

#breadcrumb .container-fluid {
    padding-top: .35rem !important;
    padding-bottom: .35rem !important;
}

#breadcrumb .breadcrumb {
    font-size: .76rem !important;
}

#breadcrumb .breadcrumb-item.active {
    color: #65705d !important;
    font-weight: 500 !important;
}

/* -------------------------------------------------------------------------
   Menu lateral: fondo claro, secciones verdes y submenus como estudiantes
   ---------------------------------------------------------------------- */
#sidebar.app-sidebar,
#sidebar.app-sidebar.offcanvas-lg,
#sidebar.app-sidebar .offcanvas-header,
#sidebar.app-sidebar .offcanvas-body,
#sidebar.app-sidebar #menu,
#sidebar.app-sidebar #principal,
#sidebar.app-sidebar .sidebar-scroll {
    color: var(--citius-text) !important;
    background: #f7f9f4 !important;
    border-color: var(--citius-green-border) !important;
}

#sidebar.app-sidebar,
#sidebar.app-sidebar.offcanvas-lg {
    border-right: 1px solid var(--citius-green-border) !important;
    box-shadow: none !important;
}

#sidebar.app-sidebar .sidebar-heading {
    min-height: 3rem !important;
    padding: .55rem .8rem .45rem 1rem !important;
    color: var(--citius-green-800) !important;
    background: #f7f9f4 !important;
    border: 0 !important;
}

#sidebar .sidebar-heading-kicker {
    display: none !important;
}

#sidebar .sidebar-heading-title {
    color: var(--citius-green-800) !important;
    font-size: .83rem !important;
    font-weight: 750 !important;
}

#sidebar .sidebar-collapse-button {
    display: grid;
    width: 1.8rem;
    height: 1.8rem;
    place-items: center;
    padding: 0;
    color: var(--citius-green-800) !important;
    background: #fff !important;
    border: 1px solid var(--citius-green-border) !important;
    border-radius: .55rem !important;
}

#sidebar.app-sidebar .accordion {
    --bs-accordion-color: var(--citius-text);
    --bs-accordion-bg: transparent;
    --bs-accordion-border-color: transparent;
    --bs-accordion-btn-color: var(--citius-green-900);
    --bs-accordion-btn-bg: transparent;
    --bs-accordion-active-color: var(--citius-green-900);
    --bs-accordion-active-bg: var(--citius-green-soft);
    padding: .15rem .7rem .8rem !important;
    background: transparent !important;
}

#sidebar.app-sidebar .accordion-item,
#sidebar.app-sidebar .accordion-header {
    margin: 0 0 .34rem !important;
    color: var(--citius-text) !important;
    background: transparent !important;
    border: 0 !important;
}

#sidebar.app-sidebar .accordion-button,
#sidebar.app-sidebar .accordion-button.collapsed {
    min-height: 2.65rem !important;
    padding: .55rem .78rem !important;
    color: var(--citius-green-900) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: .68rem !important;
    box-shadow: none !important;
    font-size: .83rem !important;
    font-weight: 720 !important;
}

#sidebar.app-sidebar .accordion-button:hover,
#sidebar.app-sidebar .accordion-button:focus-visible {
    color: var(--citius-green-900) !important;
    background: #f1f5eb !important;
    border-color: var(--citius-green-border) !important;
}

#sidebar.app-sidebar .accordion-button:not(.collapsed) {
    color: var(--citius-green-900) !important;
    background: #f5f8f0 !important;
    border-color: var(--citius-green-border) !important;
    box-shadow: inset 3px 0 0 var(--citius-green-600) !important;
}

#sidebar.app-sidebar .accordion-button::after,
#sidebar.app-sidebar .accordion-button:not(.collapsed)::after {
    width: .72rem !important;
    height: .72rem !important;
    background-size: .72rem !important;
    filter: grayscale(1) sepia(.15) hue-rotate(35deg) saturate(1.5) !important;
    opacity: .65;
}

/* Los iconos cuadrados del primer intento alejaban el menu del de estudiantes. */
#sidebar .sidebar-section-icon {
    display: none !important;
}

#sidebar.app-sidebar .accordion-collapse,
#sidebar.app-sidebar .accordion-body {
    color: var(--citius-text) !important;
    background: transparent !important;
    border: 0 !important;
}

#sidebar.app-sidebar .accordion-body {
    padding: .2rem 0 .42rem !important;
}

#sidebar.app-sidebar .sidebar-link {
    position: relative;
    display: block !important;
    width: 100%;
    min-height: 2.2rem;
    margin: .06rem 0 !important;
    padding: .43rem .7rem .43rem 1.08rem !important;
    color: #536044 !important;
    background: transparent !important;
    border: 0 !important;
    border-left: 3px solid transparent !important;
    border-radius: .55rem !important;
    font-size: .79rem !important;
    font-weight: 470 !important;
    line-height: 1.25;
}

#sidebar.app-sidebar .sidebar-link::before {
    display: none !important;
}

#sidebar.app-sidebar .sidebar-link:hover,
#sidebar.app-sidebar .sidebar-link:focus-visible {
    color: var(--citius-green-900) !important;
    background: #f1f5eb !important;
    border-left-color: #a8bd8a !important;
}

#sidebar.app-sidebar .sidebar-link.is-active {
    color: var(--citius-green-900) !important;
    background: #f1f5eb !important;
    border-left-color: var(--citius-green-600) !important;
    box-shadow: none !important;
    font-weight: 650 !important;
}

#sidebar .sidebar-select-wrap {
    margin: .2rem .2rem .45rem .65rem !important;
    padding: .4rem !important;
    background: #fff !important;
    border: 1px solid var(--citius-green-border) !important;
    border-radius: .6rem !important;
}

#sidebar .form-select {
    min-height: 2.15rem !important;
    color: #46523c !important;
    background-color: #fff !important;
    border-color: var(--citius-green-border-strong) !important;
    border-radius: .55rem !important;
    font-size: .77rem !important;
}

#sidebar .form-select:focus {
    border-color: var(--citius-green-600) !important;
    box-shadow: 0 0 0 .16rem rgba(102,139,46,.14) !important;
}

/* El usuario y el boton Salir ya estan en la cabecera, igual que en Estudiantes. */
#sidebar.app-sidebar .sidebar-footer {
    display: none !important;
}

.sidebar-restore {
    color: var(--citius-green-900) !important;
    background: #fff !important;
    border: 1px solid var(--citius-green-border) !important;
    box-shadow: 0 .25rem .8rem rgba(49,76,16,.12) !important;
}

/* -------------------------------------------------------------------------
   Area de trabajo / superficies
   ---------------------------------------------------------------------- */
#marco.app-content {
    align-self: stretch;
    flex: 1 1 0;
    width: 0;
    min-width: 0;
    height: auto !important;
    min-height: 0 !important;
    margin: 1.15rem !important;
    padding: 1rem 1.1rem 1.2rem !important;
    overflow: auto;
    background: #fff !important;
    border: 1px solid var(--citius-green-border) !important;
    border-radius: var(--citius-radius-lg) !important;
    box-shadow: none !important;
}

#marco .welcome-panel {
    min-height: 100%;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

#marco h1,
#marco h2,
#marco h3,
#marco h4,
#marco .h1,
#marco .h2,
#marco .h3,
#marco .h4 {
    color: var(--citius-green-900);
}

#marco .welcome-eyebrow {
    color: var(--citius-green-700) !important;
}

/* Listados: mismo tono verde/gris del portal de estudiantes. */
#marco .citius-lista .lista-toolbar,
#marco .citius-lista .lista-filter-panel,
#marco .citius-lista .card,
#marco .citius-lista .alert-light {
    background: #fff !important;
    border-color: var(--citius-green-border) !important;
    box-shadow: none !important;
}

#marco .citius-lista .lista-table-wrap {
    border-color: var(--citius-green-border) !important;
    border-radius: .78rem !important;
}

#marco .citius-lista table > thead > tr > th {
    color: var(--citius-green-900) !important;
    background: #f0f5e8 !important;
    border-color: #dfe8d4 !important;
    font-weight: 750 !important;
    letter-spacing: 0 !important;
}

#marco .citius-lista table > tbody > tr > td {
    border-color: #e7ede0 !important;
}

#marco .citius-lista table > tbody > tr:hover > td {
    background: #f8faf5 !important;
}

#marco .citius-lista .lista-codigo {
    color: #7f8b73 !important;
}

#marco .citius-lista .lista-filter-toggle {
    color: var(--citius-green-900) !important;
    background: #fff !important;
}

#marco .citius-lista .lista-filter-toggle:hover,
#marco .citius-lista .lista-filter-toggle:focus-visible {
    background: #f5f8f0 !important;
}

#marco .citius-lista .lista-filter-chip {
    color: #4d5c40 !important;
    background: #f5f8f0 !important;
    border-color: var(--citius-green-border) !important;
}

#marco .citius-lista .btn-warning {
    color: #fff !important;
    background: var(--citius-green-action) !important;
    border-color: var(--citius-green-action) !important;
}

#marco .citius-lista .btn-warning:hover,
#marco .citius-lista .btn-warning:focus-visible {
    background: var(--citius-green-action-hover) !important;
    border-color: var(--citius-green-action-hover) !important;
}

#marco .pagination .page-link {
    color: var(--citius-green-800) !important;
    border-color: var(--citius-green-border) !important;
}

#marco .pagination .page-item.active .page-link {
    color: #fff !important;
    background: var(--citius-green-action) !important;
    border-color: var(--citius-green-action) !important;
}

/* Formularios y controles */
#marco .form-control:focus,
#marco .form-select:focus,
.ui-dialog .form-control:focus,
.ui-dialog .form-select:focus,
.select2-container--default.select2-container--focus .select2-selection {
    border-color: var(--citius-green-600) !important;
    box-shadow: 0 0 0 .18rem rgba(102,139,46,.13) !important;
}

#marco input[type="checkbox"],
#marco input[type="radio"] {
    accent-color: var(--citius-green-action);
}

/* Dialogos: sin volver a tocar posicion/z-index, solo aspecto. */
body > .ui-dialog.citius-dialog,
body > .ui-dialog.citius-dialog-edit,
body > .ui-dialog.citius-file-dialog {
    background: #fff !important;
    border: 1px solid var(--citius-green-border-strong) !important;
    border-radius: .9rem !important;
    box-shadow: 0 1rem 2.8rem rgba(44,62,30,.18) !important;
}

body > .ui-dialog.citius-dialog > .ui-dialog-titlebar,
body > .ui-dialog.citius-dialog-edit > .ui-dialog-titlebar,
body > .ui-dialog.citius-file-dialog > .ui-dialog-titlebar {
    color: var(--citius-green-900) !important;
    background: #f6f9f2 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--citius-green-border) !important;
}

body > .ui-dialog .ui-dialog-buttonpane {
    background: #fbfcfa !important;
    border-top-color: var(--citius-green-border) !important;
}

body > .ui-dialog .ui-dialog-buttonpane .ui-button {
    border-radius: .5rem !important;
}

/* Login */
.login-card {
    border: 1px solid var(--citius-green-border) !important;
    border-radius: 1rem !important;
    box-shadow: none !important;
}

.login-card::before {
    display: none !important;
}

.login-card .btn-warning {
    color: #fff !important;
    background: var(--citius-green-action) !important;
    border-color: var(--citius-green-action) !important;
}

/* Responsive */
@media (max-width: 991.98px) {
    #titulos.app-header {
        min-height: 4.3rem !important;
    }

    .app-logo-frame {
        height: 3rem;
        min-width: 8.2rem;
        padding: .25rem .55rem;
    }

    #titulos .app-logo {
        height: 2.2rem !important;
        max-width: 7.3rem !important;
    }

    #sidebar.app-sidebar {
        box-shadow: 10px 0 28px rgba(49,76,16,.15) !important;
    }

    #marco.app-content {
        width: auto;
        margin: .7rem !important;
        padding: .75rem !important;
    }
}

@media (max-width: 575.98px) {
    #titulos .app-module-title {
        font-size: .9rem !important;
    }

    .app-header-logout {
        padding-right: .55rem !important;
        padding-left: .55rem !important;
    }
}

/* -------------------------------------------------------------------------
   Breadcrumb navegable
   ---------------------------------------------------------------------- */
#breadcrumb .app-breadcrumb-nav {
    min-width: 0;
}

#breadcrumb #citiusBreadcrumbList {
    flex-wrap: nowrap;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

#breadcrumb #citiusBreadcrumbList .breadcrumb-item {
    min-width: 0;
    max-width: min(34vw, 28rem);
    overflow: hidden;
    color: #68745f !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#breadcrumb #citiusBreadcrumbList .breadcrumb-item + .breadcrumb-item::before {
    color: #a2ad97 !important;
}

#breadcrumb #citiusBreadcrumbList .breadcrumb-item.active {
    color: var(--citius-green-800) !important;
    font-weight: 700 !important;
}

#breadcrumb #citiusBreadcrumbList .citius-breadcrumb-section {
    color: #7d8974 !important;
    font-weight: 600 !important;
}

#breadcrumb .breadcrumb-link {
    appearance: none;
    padding: 0;
    color: var(--citius-green-700, #52702f);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    background: transparent;
    border: 0;
    cursor: pointer;
}

#breadcrumb .breadcrumb-link:hover,
#breadcrumb .breadcrumb-link:focus-visible {
    color: var(--citius-green-900, #32491d);
    text-decoration: underline;
    text-underline-offset: .18em;
}

#breadcrumb .breadcrumb-link:focus-visible {
    outline: 2px solid rgba(104, 132, 58, .35);
    outline-offset: 3px;
    border-radius: .2rem;
}

@media (max-width: 767.98px) {
    #breadcrumb #citiusBreadcrumbList .citius-breadcrumb-section {
        display: none;
    }

    #breadcrumb #citiusBreadcrumbList .breadcrumb-item {
        max-width: 58vw;
    }
}

/* ==========================================================================
   Navegacion - seleccion jerarquica principal / subitem
   --------------------------------------------------------------------------
   Recuperamos el tratamiento visual anterior: la seccion principal abierta
   tambien queda marcada. Para diferenciar niveles, el principal activo usa
   un verde mas oscuro y el subitem activo un verde claro.
   ======================================================================= */

/* Seccion principal abierta: conserva fondo y barra lateral. */
#sidebar.app-sidebar .accordion-button:not(.collapsed) {
    color: var(--citius-green-900) !important;
    background: #e8efe0 !important;
    border-color: #d0ddc2 !important;
    box-shadow: inset 3px 0 0 var(--citius-green-600) !important;
    font-weight: 760 !important;
}

#sidebar.app-sidebar .accordion-button:not(.collapsed):hover,
#sidebar.app-sidebar .accordion-button:not(.collapsed):focus-visible {
    color: var(--citius-green-900) !important;
    background: #e2ead8 !important;
    border-color: #c7d6b6 !important;
}

/*
 * Cuando la seccion contiene el subitem actualmente seleccionado, reforzamos
 * el principal con un tono algo mas oscuro. Asi se ve claramente la jerarquia:
 *   principal = contexto / seccion
 *   subitem   = pantalla concreta
 */
#sidebar.app-sidebar .accordion-item.has-active-child > .accordion-header > .accordion-button {
    color: #29420d !important;
    background: #d9e5cc !important;
    border-color: #bdcfaa !important;
    box-shadow: inset 4px 0 0 var(--citius-green-700) !important;
    font-weight: 790 !important;
}

#sidebar.app-sidebar .accordion-item.has-active-child > .accordion-header > .accordion-button:hover,
#sidebar.app-sidebar .accordion-item.has-active-child > .accordion-header > .accordion-button:focus-visible {
    background: #d2e0c3 !important;
    border-color: #b5c99f !important;
}

/* El subitem activo permanece mas claro, como en el area de estudiantes. */
#sidebar.app-sidebar .sidebar-link.is-active {
    margin-top: .1rem !important;
    margin-bottom: .1rem !important;
    padding-left: 1rem !important;
    color: var(--citius-green-900) !important;
    background: #f1f5eb !important;
    border: 1px solid #dce6d0 !important;
    border-left: 4px solid var(--citius-green-600) !important;
    border-radius: .6rem !important;
    box-shadow: none !important;
    font-weight: 680 !important;
}

#sidebar.app-sidebar .sidebar-link.is-active:hover,
#sidebar.app-sidebar .sidebar-link.is-active:focus-visible {
    color: var(--citius-green-900) !important;
    background: #ebf1e4 !important;
    border-color: #d0dec2 !important;
    border-left-color: var(--citius-green-700) !important;
}

/* Los subitems no activos siguen siendo ligeros y sin borde visible. */
#sidebar.app-sidebar .sidebar-link:not(.is-active) {
    border-top-color: transparent !important;
    border-right-color: transparent !important;
    border-bottom-color: transparent !important;
}

#sidebar.app-sidebar .sidebar-link:focus-visible {
    outline: 2px solid rgba(102, 139, 46, .28) !important;
    outline-offset: 1px;
}

/* -------------------------------------------------------------------------
   Scroll global del area de trabajo

   El shell de administracion ocupa exactamente el viewport y el scroll debe
   vivir en #marco. No se debe permitir que #marco crezca con su contenido,
   porque #contenidos y .app-layout tienen overflow:hidden: en ese caso el
   contenido queda recortado y la barra parece existir pero no tiene recorrido.
   ---------------------------------------------------------------------- */
:root {
    --citius-workspace-gap: 1.15rem;
    --citius-workspace-height: calc(100dvh - var(--citius-chrome-height));
}

html,
body {
    width: 100%;
    height: 100% !important;
    overflow: hidden !important;
}

#contenedor.app-shell {
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* Cabecera y breadcrumb no participan del encogimiento del area central. */
#titulos.app-header,
#breadcrumb.app-toolbar {
    flex: 0 0 auto !important;
}

#contenidos.app-main {
    display: flex !important;
    flex: 0 0 var(--citius-workspace-height) !important;
    width: 100%;
    height: var(--citius-workspace-height) !important;
    min-height: 0 !important;
    max-height: var(--citius-workspace-height) !important;
    overflow: hidden !important;
}

#contenidos.app-main > .app-layout {
    display: flex !important;
    flex: 1 1 auto !important;
    width: 100%;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
}

/*
 * #marco es el unico scroll vertical de las pantallas cargadas por AJAX.
 * Su altura se calcula descontando los margenes visuales del tema.
 */
#marco.app-content {
    align-self: flex-start !important;
    flex: 1 1 0 !important;
    width: 0;
    height: calc(100% - var(--citius-workspace-gap) - var(--citius-workspace-gap)) !important;
    min-height: 0 !important;
    max-height: calc(100% - var(--citius-workspace-gap) - var(--citius-workspace-gap)) !important;
    margin: var(--citius-workspace-gap) !important;
    box-sizing: border-box;
    overflow-x: auto !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

/* Los contenidos heredados no deben imponer una altura al marco. */
#marco.app-content > * {
    max-width: 100%;
}

/* El menu conserva un scroll independiente cuando supera el alto disponible. */
@media (min-width: 992px) {
    #sidebar.app-sidebar,
    #sidebar.app-sidebar.offcanvas-lg {
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
    }

    #sidebar.app-sidebar .offcanvas-body {
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    #sidebar.app-sidebar #menu.sidebar-scroll {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }
}

/* En la pantalla de login no existe #marco: el propio main puede desplazarse. */
#contenidos.app-main:has(.login-page) {
    overflow-y: auto !important;
}

@media (max-width: 991.98px) {
    :root {
        --citius-workspace-gap: .7rem;
    }

    #marco.app-content {
        width: calc(100% - var(--citius-workspace-gap) - var(--citius-workspace-gap)) !important;
    }
}

/* -------------------------------------------------------------------------
   Gestor de documentos: ajustes finales porque citius-theme.css se carga tras
   file-upload.css. Evitan que el tema genérico del diálogo vuelva a teñir la
   cabecera y los botones del componente.
   ---------------------------------------------------------------------- */
body > .ui-dialog.citius-file-dialog > .ui-dialog-titlebar {
    padding: .95rem 3.7rem .9rem 1.3rem !important;
    color: var(--citius-green-900) !important;
    background: #fff !important;
    border-bottom: 1px solid var(--citius-green-border) !important;
}

body > .ui-dialog.citius-file-dialog > .ui-dialog-titlebar .ui-dialog-title {
    color: var(--citius-green-900) !important;
    font-size: 1rem !important;
    font-weight: 750 !important;
}

body > .ui-dialog.citius-file-dialog > .ui-dialog-titlebar .ui-dialog-titlebar-close {
    color: #66715e !important;
    background: var(--citius-green-softer) !important;
    border: 1px solid var(--citius-green-border) !important;
    border-radius: .55rem !important;
}

body > .ui-dialog.citius-file-dialog > .ui-dialog-content {
    background: #f8faf6 !important;
}

body > .ui-dialog.citius-file-dialog > .ui-dialog-buttonpane {
    padding: .72rem 1.2rem !important;
    background: #fff !important;
}

body > .ui-dialog.citius-file-dialog > .ui-dialog-buttonpane .ui-button,
body > .ui-dialog.citius-file-dialog > .ui-dialog-buttonpane .citius-dialog-close {
    color: var(--citius-green-800) !important;
    background: #fff !important;
    border: 1px solid var(--citius-green-border-strong) !important;
}