/* TIPOGRAFIES */

/*POPPINS I VARIANTS */
@font-face {
    font-family: "Poppins-Black";
    src:url('/fonts/poppins/Poppins-Black.ttf') format('truetype'), url('/fonts/poppins/Poppins-Black.woff') format('woff');
}
@font-face {
    font-family: "Poppins-BlackItalic";
    src:url('/fonts/poppins/Poppins-BlackItalic.ttf') format('truetype'), url('/fonts/poppins/Poppins-BlackItalic.woff') format('woff');
}
@font-face {
    font-family: "Poppins-Bold";
    src:url('/fonts/poppins/Poppins-Bold.ttf') format('truetype'), url('/fonts/poppins/Poppins-Bold.woff') format('woff');
}
@font-face {
    font-family: "Poppins-BoldItalic";
    src:url('/fonts/poppins/Poppins-BoldItalic.ttf') format('truetype'), url('/fonts/poppins/Poppins-BoldItalic.woff') format('woff');
}
@font-face {
    font-family: "Poppins-ExtraBold";
    src:url('/fonts/poppins/Poppins-ExtraBold.ttf') format('truetype'), url('/fonts/poppins/Poppins-ExtraBold.woff') format('woff');
}
@font-face {
    font-family: "Poppins-ExtraBoldItalic";
    src:url('/fonts/poppins/Poppins-ExtraBoldItalic.ttf') format('truetype'), url('/fonts/poppins/Poppins-ExtraBoldItalic.woff') format('woff');
}
@font-face {
    font-family: "Poppins-ExtraLight";
    src:url('/fonts/poppins/Poppins-ExtraLight.ttf') format('truetype'), url('/fonts/poppins/Poppins-ExtraLight.woff') format('woff');
}
@font-face {
    font-family: "Poppins-ExtraLightItalic";
    src:url('/fonts/poppins/Poppins-ExtraLightItalic.ttf') format('truetype'), url('/fonts/poppins/Poppins-ExtraLightItalic.woff') format('woff');
}
@font-face {
    font-family: "Poppins-Light";
    src:url('/fonts/poppins/Poppins-Light.ttf') format('truetype'), url('/fonts/poppins/Poppins-Light.woff') format('woff');
}
@font-face {
    font-family: "Poppins-Italic";
    src:url('/fonts/poppins/Poppins-Italic.ttf') format('truetype'), url('/fonts/poppins/Poppins-Italic.woff') format('woff');
}
@font-face {
    font-family: "Poppins-LightItalic";
    src:url('/fonts/poppins/Poppins-LightItalic.ttf') format('truetype'), url('/fonts/poppins/Poppins-LightItalic.woff') format('woff');
}
@font-face {
    font-family: "Poppins-Medium";
    src:url('/fonts/poppins/Poppins-Medium.ttf') format('truetype'), url('/fonts/poppins/Poppins-Medium.woff') format('woff');
}
@font-face {
    font-family: "Poppins-MediumItalic";
    src:url('/fonts/poppins/Poppins-MediumItalic.ttf') format('truetype'), url('/fonts/poppins/Poppins-MediumItalic.woff') format('woff');
}
@font-face {
    font-family: "Poppins-Regular";
    src:url('/fonts/poppins/Poppins-Regular.ttf') format('truetype'), url('/fonts/poppins/Poppins-Regular.woff') format('woff');
}
@font-face {
    font-family: "Poppins-SemiBold";
    src:url('/fonts/poppins/Poppins-SemiBold.ttf') format('truetype'), url('/fonts/poppins/Poppins-SemiBold.woff') format('woff');
}
@font-face {
    font-family: "Poppins-SemiBoldItalic";
    src:url('/fonts/poppins/Poppins-SemiBoldItalic.ttf') format('truetype'), url('/fonts/poppins/Poppins-SemiBoldItalic.woff') format('woff');
}
@font-face {
    font-family: "Poppins-Thin";
    src:url('/fonts/poppins/Poppins-Thin.ttf') format('truetype'), url('/fonts/poppins/Poppins-Thin.woff') format('woff');
}
@font-face {
    font-family: "Poppins-ThinItalic";
    src:url('/fonts/poppins/Poppins-ThinItalic.ttf') format('truetype'), url('/fonts/poppins/Poppins-ThinItalic.woff') format('woff');
}
.poppins-bk{
    font-family: Poppins-Black !important;
}
.poppins-bki{
    font-family: Poppins-BlackItalic;
}
.poppins-b{
    font-family: Poppins-Bold !important;
}
.poppins-bi{
    font-family: Poppins-BoldItalic;
}
.poppins-eb{
    font-family: Poppins-ExtraBold;
}
.poppins-ebi{
    font-family: Poppins-ExtraBoldItalic;
}
.poppins-el{
    font-family: Poppins-ExtraLight;
}
.poppins-l{
    font-family: Poppins-Light !important;
    font-weight: none !important;
}
.poppins-i{
    font-family: Poppins-Italic;
    font-weight: normal !important;
}
.poppins-r{
    font-family: Poppins-Regular;
    font-weight: normal !important;
}
.poppins-m{
    font-family: Poppins-Medium;
    font-weight: normal !important;
}
.poppins-t{
    font-family: Poppins-Thin;
    font-weight: normal !important;
}
/* END TIPOGRAFIES */

#btn-top {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    font-size: 18px;
    border: none;
    outline: none;
    background-color: #243f41;
    color: white;
    cursor: pointer;
    /* padding: 10px 17px !important; */
    opacity: 0.5;
    border-radius: 50%;
    height: 30px;
    width: 40px;
    height: 40px;
}

.icon-top{
    background-color: rgb(255, 255, 255);
    -webkit-mask: url('/theme/logos/chevron-up-solid.svg') no-repeat center;
    mask: url('/theme/logos/chevron-up-solid.svg') no-repeat center;
    height: 100%;
}

.logo-lsw{
    max-height: 10px !important;
    margin-top: -3px !important;
    margin-left: 10px !important;
}

.items-tabs-menu{
    width:25%;
}

label {
    color: #7c87a6c7;
}

.d-icon{
    right: 5px;
    top: 30px;
}
.posicionar-icon{
    display: flex;
    align-items: center;
    justify-content: center;
}
h3.kt-portlet__head-title > i {
    margin-right: 10px;
}

/* OVERRIDE MAX SIZE */

@media (max-width: 1600px) {
    .items-tabs-menu{
        width:50%;
    }
}

@media (max-width: 1400px) {
    .items-tabs-menu{
        width:45% !important;
    }
}

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199px) {
    .items-tabs-menu{
        width:43% !important;
    }
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991px) {
    .items-tabs-menu{
        width:42% !important;
    }
}

/*Small devices (landscape phones, less than 768px) */
@media (max-width: 767px) {
   .items-tabs-menu{
        width:23% !important;
    }

    .kt-login__container {
        position: fixed !important;
        top: 0;
        padding-top: 30px !important;
        width: 85% !important;
    }

    .kt-login__wrapper {
        position: absolute !important;
        left: 0px;
        bottom: 0px;
        display: flex;
        min-height: 80%;
        width: 85% !important;
    }
    #login_bg {
        display: none;
    }

}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575px) {
    .items-tabs-menu{
        width:21% !important;
    }
}

/* END OVERRIDE MAX SIZE */




/* OVERRIDE MIN SIZE */
/* Extra small devices (portrait phones, less than 576px)
    No media query since this is the default in Bootstrap */

/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
    
}

/* END OVERRIDE MIN SIZE */


/* FILTRES DELS LLISTATS AL SUBHEADER (header_toolbar) */
.kt-subheader .kt-subheader__toolbar .bootstrap-select {
    margin-left: 0.5rem;
    vertical-align: middle;
}
.kt-subheader .kt-subheader__toolbar .bootstrap-select > .dropdown-toggle {
    margin-left: 0;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    height: 32px;
    padding-top: 0;
    padding-bottom: 0;
}
/* Text vertically centred inside the 32px select */
.kt-subheader .kt-subheader__toolbar .bootstrap-select > .dropdown-toggle .filter-option {
    display: flex;
    align-items: center;
}
/* Arrow always on the far right of the select */
.kt-subheader .kt-subheader__toolbar .bootstrap-select > .dropdown-toggle:after {
    margin-left: auto;
    margin-right: 0;
}
/* Filter checks (e.g. Clients / Proveïdors): white box, 32px high like the selects */
.kt-subheader .kt-subheader__toolbar .filtre-checks {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 0.75rem;
    margin-left: 0.5rem;
    background-color: #fff;
    border-radius: 4px;
    vertical-align: middle;
}
.kt-subheader .kt-subheader__toolbar .filtre-checks .custom-switch {
    margin: 0;
    font-size: 1rem;
}
.kt-subheader .kt-subheader__toolbar .filtre-checks .custom-switch + .custom-switch {
    margin-left: 1rem;
}
/* END FILTRES DELS LLISTATS */

/* COLUMNA D'ACCIONS DELS LLISTATS (3 punts): no ordenable, el més estreta possible i a la dreta */
table.dataTable th.dt-col-actions,
table.dataTable td.dt-col-actions {
    width: 1% !important;
    white-space: nowrap;
    text-align: right;
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
}
table.dataTable thead th.dt-col-actions:before,
table.dataTable thead th.dt-col-actions:after,
table.dataTable thead > tr > th.dt-col-actions.sorting:before,
table.dataTable thead > tr > th.dt-col-actions.sorting:after,
table.dataTable thead > tr > th.dt-col-actions.sorting_asc:before,
table.dataTable thead > tr > th.dt-col-actions.sorting_asc:after,
table.dataTable thead > tr > th.dt-col-actions.sorting_desc:before,
table.dataTable thead > tr > th.dt-col-actions.sorting_desc:after {
    display: none !important;
    content: none !important;
}
table.dataTable thead > tr > th.dt-col-actions {
    cursor: default !important;
}
table.dataTable td.dt-col-actions .dropdown-inline .btn {
    margin: 0;
}
/* END COLUMNA D'ACCIONS */

/* SWITCH PASTILLA (Bootstrap custom-switch): verd = sí, gris = no */
.switch-actiu .custom-control-label { cursor: pointer; }
.switch-actiu .custom-control-label::before {
    background-color: #e4e6ef;
    border-color: #e4e6ef;
}
.switch-actiu .custom-control-label::after { background-color: #fff; }
.switch-actiu .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #1dc9b7;
    border-color: #1dc9b7;
}
.switch-actiu .custom-control-input:focus ~ .custom-control-label::before { box-shadow: none; }
.switch-actiu .custom-control-input:focus:not(:checked) ~ .custom-control-label::before { border-color: #e4e6ef; }
/* Larger size than Bootstrap's default (track 2.75rem x 1.5rem) */
.switch-actiu.custom-switch { min-height: 1.5rem; padding-left: 3.5rem; }
.switch-actiu .custom-control-label { line-height: 1.5rem; padding-top: 0; }
.switch-actiu.custom-switch .custom-control-label::before {
    top: 0;
    left: -3.5rem;
    width: 2.75rem;
    height: 1.5rem;
    border-radius: 1.5rem;
}
.switch-actiu.custom-switch .custom-control-label::after {
    top: 2px;
    left: calc(-3.5rem + 2px);
    width: calc(1.5rem - 4px);
    height: calc(1.5rem - 4px);
    border-radius: 1.5rem;
}
.switch-actiu.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
    transform: translateX(1.25rem);
}
/* END SWITCH PASTILLA */

/* CAPÇALERA DE LES TAULES DELS LLISTATS: text gris clar i sense negreta */
table.dataTable thead th,
table.dataTable thead td,
.kt-portlet .table thead th {
    color: #cfcfcf !important;
    font-weight: 400 !important;
}
/* END CAPÇALERA DE LES TAULES */

/* TORNAR AL PERFIL D'ADMINISTRADOR (SaaS "actuar com"): icona destacada al header */
.kt-header__topbar .kt-header__topbar-icon--impersonate {
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background-color: transparent;
    cursor: pointer;
    transition: background-color .2s;
}
.kt-header__topbar .kt-header__topbar-icon--impersonate i { font-size: 1.1rem; color: #ffb822; }
.kt-header__topbar .kt-header__topbar-icon--impersonate:hover { background-color: rgba(255, 255, 255, .08); }
/* END TORNAR AL PERFIL */

/* SELECTOR D'IDIOMA AL HEADER (CA / ES), a l'esquerra del nom */
.kt-header__topbar .lsw-langs {
    align-self: center;
    display: flex;
    align-items: center;
    gap: 2px;
    margin-right: 0.5rem;
    padding: 2px;
    border-radius: 6px;
    background-color: rgba(0, 0, 0, .04);
}
.kt-header__topbar .lsw-langs__item {
    padding: 0.25rem 0.55rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
    color: #959cb6;
    line-height: 1.2;
}
.kt-header__topbar .lsw-langs__item:hover { color: var(--brand-color); text-decoration: none; }
.kt-header__topbar .lsw-langs__item--active,
.kt-header__topbar .lsw-langs__item--active:hover {
    background-color: #fff;
    color: #48465b;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}
/* END SELECTOR D'IDIOMA */

/* TAULES DINS DE POPUPS (p. ex. "actuar com"): mateix format de capçalera que els llistats i files centrades */
.modal .table thead th {
    color: #cfcfcf !important;
    font-weight: 400 !important;
    border-top: 0;
}
.modal .table td,
.modal .table th { vertical-align: middle; }
/* END TAULES DINS DE POPUPS */

/* VERSIÓ DE L'APLICACIÓ (peu) I PÀGINA NOVETATS */
.footer-versio{
    margin-left: 10px;
    color: #a2a5b9;
    font-size: 0.9rem;
}
.footer-versio:hover{
    color: var(--brand-color);
    text-decoration: none;
}
.novetats-versio{
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #ebedf2;
}
.novetats-versio:last-child{
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}
.novetats-internes{
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    background: #fff8e6;
    border-left: 3px solid #ffb822;
}

/* TOAST DE VERSIÓ NOVA: text blanc i botó "Veure novetats" blau fort */
#toast-container > .toast-versio,
#toast-container > .toast-versio .toast-title,
#toast-container > .toast-versio .toast-message{
    color: #ffffff !important;
    opacity: 1;
}
#toast-container > .toast-versio .toast-message{
    margin-top: 0.5rem;
}
#toast-container > .toast-versio .toast-versio-btn{
    background-color: #1b3a8c;
    border-color: #1b3a8c;
    color: #ffffff !important;
    font-weight: 500;
    text-decoration: none;
}
#toast-container > .toast-versio .toast-versio-btn:hover{
    background-color: #142b68;
    border-color: #142b68;
}

/* BLOQUEIG DE PANTALLA: difumina tota la pantalla excepte el botó de desbloquejar */
.screen-lock-overlay{
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(30, 30, 45, 0.25);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
.screen-lock-overlay--on{
    display: block;
}
body.screen-locked{
    overflow: hidden;
}
.screen-unlock-btn{
    position: fixed;
    top: 12px;
    right: 60px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: #ffffff;
    color: var(--brand-color);
    font-size: 1.2rem;
    box-shadow: 0 0 0 3px rgba(93, 120, 255, 0.35);
    text-decoration: none;
}
.screen-unlock-btn:hover{
    background: var(--brand-color);
    color: #ffffff;
    text-decoration: none;
}

/* LOGO DEL HEADER: centrat verticalment (alçada del logo 20px, al blade) */
.header-logo{
    align-items: center;
    align-self: stretch;
    height: 100%;
    padding-left: 1rem;
}
.header-logo a{
    display: flex;
    align-items: center;
}
.kt-header-mobile__logo a{
    display: flex;
    align-items: center;
}
/*
 * CAPÇALERA INDEPENDENT DEL MENÚ LATERAL (escriptori, com MyInfluentium): ocupa tota l'amplada i queda per sobre del menú.
 * A l'esquerra, ☰ (X quan el menú està fixat), el nostre logo i el del client.
 */
@media (min-width: 1025px) {
    .kt-header--fixed .kt-header,
    .kt-header--fixed.kt-aside--minimize .kt-header,
    .kt-aside--fixed.kt-aside--minimize-hover .kt-header {
        left: 0;
        z-index: 99;
    }
    /* Espai buit del menú sota la capçalera: el tapa la capçalera */
    .kt-aside .kt-aside__brand {
        height: 65px;
        padding: 0;
    }
}
.header-logo .header-menu-btn{
    width: 46px;
    height: 46px;
    margin-right: 1rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #fff;
    font-size: 1.3rem;
    cursor: pointer;
}
.header-logo .header-menu-btn:hover{
    background-color: rgba(255, 255, 255, .1);
}
.header-logo .header-menu-btn:focus{
    outline: none;
}
/* ☰ amb el menú plegat (també mentre s'obre en passar-hi el ratolí); X quan està fixat */
.header-menu-btn .fa-times,
body:not(.kt-aside--minimize):not(.kt-aside--minimize-hover) .header-menu-btn .fa-bars{
    display: none;
}
body:not(.kt-aside--minimize):not(.kt-aside--minimize-hover) .header-menu-btn .fa-times{
    display: inline-block;
}
/* Logo del client a la dreta del nostre: separador vertical, sense fons (decisió de l'usuari) */
.header-logo-client{
    display: flex;
    align-items: center;
    margin-left: 1rem;
    padding-left: 1rem;
    border-left: 1px solid rgba(255, 255, 255, .2);
}
.header-logo-client img{
    max-height: 30px;
    max-width: 160px;
}
/* Warning in the header when DB_PRODUCCIO=true (dev pointing to the production database) */
.header-avis-bd-produccio{
    display: flex;
    align-items: center;
    align-self: center;
    gap: .5rem;
    margin: 0 1rem;
    padding: .4rem .9rem;
    border-radius: 4px;
    background: #ffb822;
    color: #111;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: .03em;
    white-space: nowrap;
}
.header-avis-bd-produccio i{
    color: #111;
}
/* Configuració > Logotip: previsualització */
.client-logo-previsualitzacio{
    display: flex;
    justify-content: center;
    padding: 1rem;
    border-radius: 4px;
    background-color: #f7f8fa;
}
.client-logo-previsualitzacio img{
    max-height: 80px;
    max-width: 100%;
}


/* CAMPS DE DATA (admin.includes.camp_data): calendari amb la font i els colors de l'admin */
.lsw-date .lsw-datepicker{
    background-color: #ffffff;
    cursor: pointer;
}
.lsw-date .input-group-text{
    cursor: pointer;
    color: var(--brand-color);
    background-color: #f7f8fa;
}
.datepicker.dropdown-menu{
    font-family: inherit;
    font-size: 0.95rem;
    padding: 0.75rem;
    border: 0;
    border-radius: 8px;
    box-shadow: 0 5px 30px rgba(82, 63, 105, 0.18);
    min-width: 17rem;
}
.datepicker table{
    width: 100%;
}
.datepicker table tr td,
.datepicker table tr th{
    width: 2.4rem;
    height: 2.2rem;
    border-radius: 6px;
    font-weight: 400;
    color: #48465b;
}
.datepicker table tr th.dow{
    color: #a2a5b9;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
}
.datepicker table tr th.datepicker-switch{
    font-weight: 600;
    color: #48465b;
}
.datepicker table tr th.prev,
.datepicker table tr th.next{
    color: var(--brand-color);
}
.datepicker table tr td.old,
.datepicker table tr td.new{
    color: #c4c5d6;
}
.datepicker table tr td.day:hover,
.datepicker table tr td span:hover,
.datepicker table tr th.prev:hover,
.datepicker table tr th.next:hover,
.datepicker table tr th.datepicker-switch:hover,
.datepicker table tr th.today:hover,
.datepicker table tr th.clear:hover{
    background: #f0f3ff;
    color: var(--brand-color);
}
.datepicker table tr td.today{
    background: #f0f3ff !important;
    color: var(--brand-color) !important;
    font-weight: 600;
}
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover{
    background: var(--brand-color) !important;
    color: #ffffff !important;
    text-shadow: none;
}
.datepicker table tr td span{
    border-radius: 6px;
    height: 2.6rem;
    line-height: 2.6rem;
}
.datepicker tfoot tr th.today,
.datepicker tfoot tr th.clear{
    padding-top: 0.5rem;
    color: var(--brand-color);
    font-weight: 500;
}

/* CONFIGURACIÓ > MYDOCUMENTIUM: valors connectats en només lectura amb el botó a la dreta */
.mydoc-fila{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
    border-radius: 6px;
    background: #f7f8fa;
}
.mydoc-avis{
    margin-bottom: 1rem;
}
.mydoc-botons{
    gap: 0.5rem;
}
.mydoc-estat{
    padding: 0.45rem 0.75rem;
    font-weight: 500;
}

/* SUBHEADER (breadcrumb + barra d'eines) SEMPRE VISIBLE
   Escriptori: body.kt-subheader--fixed (Metronic el fixa sota el header, amb fons blanc i ombra).
   Mòbil/tauleta: Metronic no el fixa, ho fem amb sticky sota el header mòbil (50px). */
@media (max-width: 1024px) {
    .kt-subheader--fixed .kt-subheader{
        position: sticky;
        top: 50px;
        z-index: 95;
        background-color: #ffffff;
        box-shadow: 0px 10px 30px 0px rgba(82, 63, 105, 0.08);
    }
}

/* NORMA (vista del client: arbre, apartat, apartats que apliquen, menú). Vegeu docs/admin-ui.md */
.norma-codi{
    display: inline-block;
    min-width: 2.2rem;
    color: var(--brand-color);
    font-weight: 600;
}
.norma-arbre, .norma-arbre ul{
    list-style: none;
    margin: 0;
    padding-left: 0;
}
.norma-arbre ul{
    padding-left: 1.6rem;
    border-left: 1px dashed #ebedf2;
    margin-left: .6rem;
}
.norma-arbre .norma-node{
    padding: .2rem 0;
}
.norma-arbre .norma-node > a{
    color: #48465b;
}
.norma-arbre .norma-node > a:hover{
    color: var(--brand-color);
}
.norma-arbre .norma-capitol{
    padding-top: .6rem;
}
.norma-arbre .norma-capitol > a{
    font-weight: 600;
    font-size: 1.05rem;
}
.norma-arbre .kt-badge{
    margin-left: .4rem;
}
.norma-no-aplica, .norma-no-aplica > a{
    opacity: .5;
}
.norma-apartat-titol{
    font-weight: 500;
    margin-bottom: 0;
}
.norma-descripcio{
    font-size: 1.05rem;
    line-height: 1.6;
    white-space: pre-line;
    /* Light grey box, same padding top and bottom (the paragraph margin would add space only below) */
    background: #f7f8fa;
    border: 1px solid #ebedf2;
    border-radius: 6px;
    padding: .75rem .9rem;
    margin-bottom: 0;
}
/* Content of the section (documents / evidence): the main part of the page, white with a brand edge on the left */
.norma-contingut{
    padding: 1rem 1.25rem;
    border-radius: 6px;
    background-color: #ffffff;
    border: 1px solid #e4e6ef;
    border-left: 4px solid var(--brand-color);
    box-shadow: 0 2px 8px rgba(82, 63, 105, .06);
}
.norma-config-fila{
    min-height: 38px;
    border-bottom: 1px solid #f0f1f5;
}
.norma-config-fila .custom-switch{
    margin: .4rem 0;
}
.norma-config-fila .camp-motiu{
    max-width: 360px;
}
/* Menú: codi del capítol davant del títol (dins "Apartats de la norma"); apartats que no apliquen en gris */
.kt-aside-menu .kt-menu__nav .kt-menu__link .norma-menu-codi{
    display: inline-block;
    min-width: 1.6rem;
    font-size: .85rem;
    font-weight: 600;
    opacity: .8;
}
.kt-aside-menu .kt-menu__nav .kt-menu__item.norma-menu-no-aplica > .kt-menu__link{
    opacity: .45;
}
.norma-fitxer{
    padding: .75rem 1rem;
    border-radius: 4px;
    background-color: #ffffff;
    border: 1px solid #ebedf2;
}
.norma-fitxer-icona{
    font-size: 1.8rem;
    color: var(--brand-color);
}
/* Últims avisos: cada avís és una fila clicable amb ">" a la dreta */
.norma-avis{
    padding: .9rem 1.5rem;
    border-bottom: 1px solid #f0f1f5;
    color: #48465b;
    transition: background-color .15s;
}
.norma-avis:last-child{ border-bottom: 0; }
.norma-avis:hover{
    background-color: #f7f8fa;
    color: #48465b;
    text-decoration: none;
}
.norma-avis-apartat{ font-weight: 500; }
.norma-avis-meta{
    font-size: .85rem;
    color: #a7abc3;
    margin-top: .1rem;
}
.norma-avis-nota{
    margin-top: .3rem;
    color: #6c7293;
}
.norma-avis-fletxa{
    margin-left: 1rem;
    color: #c7c5d8;
    transition: color .15s, transform .15s;
}
.norma-avis:hover .norma-avis-fletxa{
    color: var(--brand-color);
    transform: translateX(3px);
}
/* Menú: "Apartats de la norma" en una sola línia (lletra una mica més petita) */
.kt-aside-menu .kt-menu__nav .norma-menu-apartats > .kt-menu__link .kt-menu__link-text{
    font-size: .95rem;
    white-space: nowrap;
}
/* Estat de control (fase 2c): etiqueta a l arbre, barra d estat i periodicitat a l apartat */
.norma-arbre .norma-estat-etiqueta{
    font-size: .75rem;
    /* kt-badge--inline has height 0 and takes its height from the padding: set a real one */
    height: auto;
    padding: .2rem .55rem;
    line-height: 1.3;
}
.norma-estat{
    gap: .4rem 0;
}
.norma-periodicitat{
    border: 0;
    border-bottom: 1px dashed #a7abc3;
    background: transparent;
    color: #6c7293;
    cursor: pointer;
}
.norma-registres td{ vertical-align: middle; }
/* Configuració del mòdul: usuaris que reben avisos */
.norma-config-usuari{
    padding: .5rem 0;
    border-bottom: 1px solid #f0f1f5;
}
.norma-config-usuari:last-child{ border-bottom: 0; }
/* Plantilles i documentació (lateral dels apartats de tipus document) */
.norma-plantilla-icona{
    font-size: 1.4rem;
    color: var(--brand-color);
    margin-top: .15rem;
    width: 1.4rem;
    text-align: center;
}
.norma-plantilla-dades{
    min-width: 0;
}
.norma-plantilla-comentari{
    color: #595d6e;

    font-size: .9rem;
}
/* Enllaços i documents (inici de la norma): una fila per element, ordenats per títol; botó dret = menú contextual */
.norma-recurs{
    padding: .55rem .5rem;
    margin: 0 -.5rem;
    border-radius: 4px;
    transition: background-color .15s;
}
.norma-recurs:hover{ background-color: #f7f8fa; }
.norma-recurs-icona{
    font-size: 1.25rem;
    color: var(--brand-color);
    margin-top: .15rem;
    width: 1.4rem;
    text-align: center;
}
.norma-recurs-dades{ min-width: 0; }
/* Inici de la norma: "Últims avisos" tan alt com la meitat esquerra (Enllaços + Propera auditoria), fins al peu
   de Propera auditoria; si n'hi ha més, scroll dins del portlet. La capsa va en absolut i no compta per a l'alçada
   de la fila, que la marca la meitat esquerra. Per sota de 1200px (meitats apilades), alçada normal. */
@media (min-width: 1200px) {
    .norma-avisos-alt{ position: relative; }
    .norma-avisos-alt > .norma-avisos-caixa{
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        padding-left: inherit;
        padding-right: inherit;
        display: flex;
        flex-direction: column;
    }
    .norma-avisos-alt > .norma-avisos-caixa > .kt-portlet{
        flex: 1 1 auto;
        min-height: 0;
    }
    .norma-avisos-alt > .norma-avisos-caixa > .kt-portlet > .kt-portlet__body{
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }
}
/* 3 punts al final de la fila (enllaços): obre el mateix menú que el botó dret */
.norma-recurs .norma-recurs-menu-btn{ align-self: center; flex-shrink: 0; }
.norma-recurs .norma-recurs-menu-btn i{ color: #a7abc3; }
.norma-recurs .norma-recurs-menu-btn:hover i{ color: var(--brand-color); }
.norma-recurs-ajuda{
    margin: .75rem 0 0;
    font-size: .8rem;
    color: #a7abc3;
}
/* Documents de l'inici de la norma: una pestanya per categoria (i "Tots"), compactes i amb el nombre de documents */
.norma-documents-tabs.nav-tabs{
    margin: -.5rem 0 .75rem;
    flex-wrap: wrap;
}
.norma-documents-tabs.nav-tabs.nav-tabs-line .nav-item{ margin-right: 1.25rem; }
.norma-documents-tabs.nav-tabs.nav-tabs-line .nav-link{ padding: .5rem 0; font-size: .95rem; }
.norma-documents-n{
    margin-left: .25rem;
    font-size: .8rem;
    color: #a7abc3;
}
/* Configuració > Categories de documents */
.config-categories td{ vertical-align: middle; }
.config-categories input[type=text]{ min-width: 160px; }
/* Notes (inici de la norma): data i estat a dalt, text a sota; les completades i refusades, més apagades */
.norma-nota + .norma-nota{ border-top: 1px solid #ebedf2; }
.norma-nota-text{
    margin: .35rem 0 .15rem;
    white-space: normal;
    word-break: break-word;
}
.norma-nota-llista{
    margin: .15rem 0;
    padding-left: 1.25rem;
}
.norma-nota-llista li{ margin-bottom: .1rem; }
.norma-nota--completat .norma-nota-text,
.norma-nota--refusat .norma-nota-text{ color: #a7abc3; }
.norma-nota--refusat .norma-nota-text{ text-decoration: line-through; }
.norma-nota-estat{ cursor: pointer; }
/* Menú contextual (botó dret), obert on es clica */
.norma-menu-contextual{
    position: fixed;
    z-index: 1060;
    min-width: 160px;
}
/* Mapa conceptual de la norma (inici, escriptori). Cytoscape.js dibuixa dins de .norma-mapa */
.norma-mapa{
    width: 100%;
    height: 72vh;
    min-height: 520px;
    background: #fbfcfd;
    border-radius: 4px;
}
.norma-mapa-eines{
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: flex;
    align-items: center;
}
/* Ajuda del mapa: fora del portlet, a sota a la dreta, gris una mica més fosc que el fons de la pàgina */
.norma-mapa-ajuda{
    text-align: right;
    font-size: .85rem;
    color: #a2a5b9;
    margin-bottom: 20px;
}
/* Mode "Editar mapa": vora discontínua del color corporatiu i cursor de moure */
.norma-mapa.norma-mapa--editant{
    outline: 2px dashed var(--brand-color);
    outline-offset: -2px;
    cursor: move;
}
/* Info en passar el ratolí per un node */
.norma-mapa-info{
    display: none;
    position: absolute;
    z-index: 3;
    max-width: 320px;
    padding: 8px 10px;
    background: #ffffff;
    border: 1px solid #ebedf2;
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(82, 63, 105, .12);
    font-size: .9rem;
    pointer-events: none;
}
.norma-mapa-info-titol{
    font-weight: 600;
    color: #212529;
    margin-bottom: 6px;
}
/* Estat en forma de pastilla, del color de la vora del node */
.norma-mapa-info-estat{
    display: inline-block;
    padding: 2px 10px;
    border-radius: 2rem;
    font-size: .8rem;
    font-weight: 500;
    margin-bottom: 4px;
}
.norma-mapa-info-detall{
    font-size: .8rem;
    color: #74788d;
}
/* END NORMA */

/* COLOR CORPORATIU: blau del logo de MyDocumentium (#0178D4). Vegeu docs/admin-ui.md "Colors".
   Redefineix les variables del tema (theme/base/style.bundle.css, ":root") sense tocar-lo. */
:root{
    --brand-color: #0178D4;
    --brand-color-shadow: rgb(1 120 212 / 23%);
    --brand-color-hover: #025899;
    --brand-color-shadow-hover: rgb(1 120 212 / 23%);
    --active-item: #0178D4;
    --active-item-icon: #025899;
}
.kt-badge.kt-badge--unified-brand{
    background: rgba(1, 120, 212, .1);
}
/* END COLOR CORPORATIU */

/* PUJADA DE FITXERS (Dropzone, admin.includes.dropzone). Vegeu docs/admin-ui.md "Pujada de fitxers" */
.dropzone.dropzone-brand{
    border-radius: 6px;
    background-color: #ffffff;
    transition: background-color .15s, border-color .15s;
}
.dropzone.dropzone-brand:hover,
.dropzone.dropzone-brand.dz-drag-hover{
    border-color: var(--brand-color);
    background-color: rgba(1, 120, 212, .05);
}
.dropzone .dropzone-msg-title i,
.dropzone .dropzone-msg-desc i{
    color: var(--brand-color);
}
/* Files waiting in the area (manual mode): green "ready" box with the name, size and a red "Treure" with a trash icon */
.dropzone.dropzone-brand .dz-preview{
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    min-height: 0;
    margin: 8px 0 0;
    padding: 10px 14px;
    border: 1px solid #23804a;
    border-radius: 6px;
    background-color: #e9f6ee;
}
.dropzone.dropzone-brand .dz-preview::before{
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 16px;
    color: #23804a;
    margin-right: 12px;
}
.dropzone.dropzone-brand .dz-preview .dz-image,
.dropzone.dropzone-brand .dz-preview .dz-success-mark,
.dropzone.dropzone-brand .dz-preview .dz-error-mark{
    display: none;
}
.dropzone.dropzone-brand .dz-preview .dz-details{
    position: static;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    padding: 0;
    opacity: 1;
    text-align: left;
    color: #1e5e37;
    font-size: 13px;
    line-height: 1.4;
}
.dropzone.dropzone-brand .dz-preview .dz-details .dz-filename{
    order: 1;
    white-space: normal;
    overflow: visible;
    word-break: break-all;
}
.dropzone.dropzone-brand .dz-preview .dz-details .dz-size{
    order: 2;
    margin: 0;
    font-size: 12px;
}
.dropzone.dropzone-brand .dz-preview .dz-details .dz-filename span,
.dropzone.dropzone-brand .dz-preview .dz-details .dz-size span,
.dropzone.dropzone-brand .dz-preview .dz-details .dz-filename:hover span{
    padding: 0;
    border: 0;
    background: none;
    color: #1e5e37;
}
.dropzone.dropzone-brand .dz-preview .dz-details .dz-filename span{
    font-weight: 600;
}
.dropzone.dropzone-brand .dz-preview .dz-remove{
    flex-shrink: 0;
    margin-left: auto;
    padding-left: 14px;
    border: 0;
    font-size: 13px;
    font-weight: 600;
    color: #c62828;
    text-decoration: none;
    white-space: nowrap;
}
.dropzone.dropzone-brand .dz-preview .dz-remove:hover{
    color: #a01818;
    text-decoration: none;
}
/* Upload progress: thin bar at the bottom of the box, only while sending */
.dropzone.dropzone-brand .dz-preview .dz-progress{
    position: absolute;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: 3px;
    margin: 0;
    border-radius: 0 0 6px 6px;
    background: transparent;
}
.dropzone.dropzone-brand .dz-preview .dz-progress .dz-upload{
    background: #23804a;
}
.dropzone.dropzone-brand .dz-preview:not(.dz-processing) .dz-progress{
    display: none;
}
/* Disabled area (e.g. import without a role ticked): greyed out, no pointer */
.dropzone.dropzone-desactivada {
    opacity: .45;
    cursor: not-allowed;
}
.dropzone.dropzone-desactivada * {
    cursor: not-allowed !important;
}
/* END PUJADA DE FITXERS */

/* CAMP D'EMAILS (tags, admin.includes.camp_emails). Vegeu docs/admin-ui.md "Camp d'emails" */
.input-emails {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    height: auto;
    min-height: calc(1.5em + 1.3rem + 2px);
    cursor: text;
}
.input-emails .input-emails__text {
    flex: 1 1 140px;
    min-width: 140px;
    border: 0;
    outline: 0;
    padding: 0;
    background: transparent;
    color: inherit;
}
.input-emails .input-emails__tag {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.6rem;
    border-radius: 2rem;
    background-color: rgba(0, 133, 119, 0.1);
    color: var(--brand-color);
    font-size: 0.9rem;
    line-height: 1.4;
}
.input-emails .input-emails__tag i {
    margin-left: 0.45rem;
    font-size: 0.75rem;
    cursor: pointer;
    opacity: 0.7;
}
.input-emails .input-emails__tag i:hover {
    opacity: 1;
    color: #fd397a;
}
/* Text that is not a valid email: red border and a short shake */
.input-emails.input-emails--error {
    border-color: #fd397a;
    animation: input-emails-sacseig 0.3s;
}
@keyframes input-emails-sacseig {
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}
/* END CAMP D'EMAILS */

/* MÒDULS DE QUALITAT (No conformitats, Proveïdors, Satisfacció). Vegeu docs/moduls/iso9001-qualitat.md */
.nc-bloc{
    margin-top: 1.25rem;
    padding: 1rem 1.25rem;
    border-radius: 6px;
    background-color: #f7f8fa;
}
.nc-opcio{
    margin-bottom: .5rem;
}
.nc-opcio .form-control{
    max-width: 320px;
}
.qualitat-pdf-iframe{
    width: 100%;
    height: 65vh;
    border: 1px solid #ebedf2;
    border-radius: 4px;
}
.qualitat-pdf-opcions{
    gap: .5rem 0;
}
.satisfaccio-periode{ gap: .5rem 0; }
.satisfaccio-kpi .kt-portlet__body{ padding: 1rem 1.25rem; }
.satisfaccio-kpi-valor{ font-size: 1.6rem; font-weight: 600; color: var(--brand-color); }
.satisfaccio-punt{ display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: .3rem; }
.satisfaccio-fila{ cursor: pointer; }
.satisfaccio-detall{ background: #f7f8fa; }
.satisfaccio-estrelles{ letter-spacing: 1px; white-space: nowrap; }
.av-criteri{ padding: .35rem 0; border-bottom: 1px solid #ebedf2; }
.av-criteri:last-child{ border-bottom: 0; }
/* Mail preview popup (config_mail): the mail HTML in an iframe */
.mail-previsualitzacio {
    display: block;
    width: 100%;
    height: 70vh;
    border: 0;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}
/* END MÒDULS DE QUALITAT */

/* VISOR DE DOCUMENTS (admin.includes.visor): popup a pantalla completa amb previsualització */
.visor-modal .modal-dialog{
    max-width: 100%;
    width: 100%;
    height: 100%;
    margin: 0;
}
.visor-modal .modal-content{
    height: 100vh;
    border: 0;
    border-radius: 0;
}
.visor-modal .modal-header{
    align-items: center;
    padding: .75rem 1.25rem;
}
.visor-capcalera{
    min-width: 0;
}
.visor-capcalera .modal-title{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Info petita sota el nom: versió, dates, caducitat i comentari (retallat, sencer al passar-hi el ratolí) */
.visor-info{
    font-size: .85rem;
    display: flex;
    gap: 0 1rem;
    min-width: 0;
}
.visor-comentari{
    max-width: 45vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-style: italic;
}
.visor-modal .modal-body{
    flex: 1 1 auto;
    padding: 0;
    overflow: auto;
    background: #e9ebf1;
}
.visor-cos--pla{
    display: flex;
    align-items: center;
    justify-content: center;
}
.visor-iframe{
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.visor-imatge{
    max-width: 95%;
    max-height: 95%;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .15);
}
.visor-text{
    margin: 1.5rem auto;
    max-width: 1100px;
    padding: 1.5rem;
    background: #ffffff;
    white-space: pre-wrap;
}
.visor-fulls{
    margin: 1rem 1rem 0;
}
.visor-full{
    margin: 1rem;
    background: #ffffff;
    overflow: auto;
}
.visor-full table{
    border-collapse: collapse;
}
.visor-full td{
    border: 1px solid #e2e5ec;
    padding: .25rem .5rem;
    white-space: nowrap;
}
.visor-docx .docx-wrapper{
    background: #e9ebf1;
}
.visor-missatge{
    text-align: center;
    color: #6c7293;
    padding: 3rem 1rem;
}
.visor-missatge i{
    font-size: 3rem;
    color: var(--brand-color);
    margin-bottom: 1rem;
}
/* END VISOR DE DOCUMENTS */

/* ESTAT DE L'APARTAT DE LA NORMA: insígnia gran a la dreta del títol (rol Client: clicable per posar-lo a mà) */
.kt-badge.norma-estat-apartat { font-size: 1rem; font-weight: 600; padding: 0.55rem 1.1rem; height: auto; white-space: nowrap; cursor: pointer; }
.kt-badge.norma-estat-apartat--fix { cursor: default; }

/* DRECERES DE DATA (popup de documents): "d'aquí a 15 dies, 1 mes..." sota el camp de caducitat */
.norma-dreceres-data { display: flex; flex-wrap: wrap; gap: 4px; }
.norma-dreceres-data .btn { padding: 0.2rem 0.55rem; font-size: 0.85rem; }

/* MENÚ LATERAL: cada norma és un grup plegable (només un obert). Amb el menú plegat es veu el nom de la norma
   ("ISO 9001", "ENS") en lloc de la icona, perquè sempre se sàpiga quina és quina. */
.norma-menu-grup > .kt-menu__link .norma-menu-sigla{ display: none; }
/* Cada norma, una tonalitat del verd corporatiu (#008577). Les variables del tema es redefineixen dins del grup, així
   l'element actiu, el hover i les icones de la norma agafen el seu to. Norma nova = afegir-hi una línia. */
   --norma-color = fons de l'element actiu (lletra blanca a sobre); --norma-color-clar = icona i nom sobre el fons fosc
   del menú (#282733), més clar perquè es llegeixi. */
.norma-menu-grup[data-norma="ISO9001"]{ --norma-color: var(--brand-color); --norma-color-fosc: #00665b; --norma-color-clar: #2fc4b2; }
.norma-menu-grup[data-norma="ENS"]{ --norma-color: #3a9e94; --norma-color-fosc: #2b7f76; --norma-color-clar: #8fe0d6; }
.norma-menu-grup{
    --active-item: var(--norma-color);
    --active-item-icon: var(--norma-color-fosc);
    --brand-color-hover: var(--norma-color-fosc);
}
.kt-aside-menu .kt-menu__nav > .norma-menu-grup > .kt-menu__link .kt-menu__link-icon,
.kt-aside-menu .kt-menu__nav > .norma-menu-grup > .kt-menu__link .norma-menu-sigla{
    color: var(--norma-color-clar) !important;
}
/* Norma de la pàgina actual: el tema pinta l'enllaç amb --active-item (el seu verd), lletra blanca a sobre */
.kt-aside-menu .kt-menu__nav > .norma-menu-grup.kt-menu__item--here > .kt-menu__link .kt-menu__link-icon,
.kt-aside-menu .kt-menu__nav > .norma-menu-grup.kt-menu__item--here > .kt-menu__link .norma-menu-sigla{
    color: #ffffff !important;
}
@media (min-width: 1025px) {
    body.kt-aside--minimize:not(.kt-aside--minimize-hover) .kt-aside-menu .kt-menu__nav > .norma-menu-grup > .kt-menu__link .kt-menu__link-icon{
        display: none;
    }
    body.kt-aside--minimize:not(.kt-aside--minimize-hover) .kt-aside-menu .kt-menu__nav > .norma-menu-grup > .kt-menu__link .norma-menu-sigla{
        display: block;
        width: 100%;
        text-align: center;
        font-size: .8rem;
        font-weight: 600;
        line-height: 1.15;
    }
    /* Norma oberta amb el menú plegat: sota el nom es veuen les icones del seu menú (Inici, Apartats, Auditories...).
       El tema amaga tots els submenús quan està plegat; aquí es mostra només el primer nivell del grup obert, sense
       text ni fletxes (els capítols dels apartats, en passar el ratolí, que obre el menú sencer). */
    body.kt-aside--minimize:not(.kt-aside--minimize-hover) .kt-aside-menu .kt-menu__nav > .norma-menu-grup.kt-menu__item--open > .kt-menu__submenu{
        display: block !important;
        height: auto !important;
        overflow: visible !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    /* Centred icons: no indentation of the submenu (subnav, items, links), each link spans the 78px and centres its icon */
    body.kt-aside--minimize:not(.kt-aside--minimize-hover) .kt-aside-menu .kt-menu__nav > .norma-menu-grup.kt-menu__item--open > .kt-menu__submenu > .kt-menu__subnav,
    body.kt-aside--minimize:not(.kt-aside--minimize-hover) .kt-aside-menu .kt-menu__nav > .norma-menu-grup.kt-menu__item--open > .kt-menu__submenu > .kt-menu__subnav > .kt-menu__item{
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    body.kt-aside--minimize:not(.kt-aside--minimize-hover) .kt-aside-menu .kt-menu__nav > .norma-menu-grup.kt-menu__item--open > .kt-menu__submenu > .kt-menu__subnav > .kt-menu__item > .kt-menu__link{
        display: flex !important;
        justify-content: center !important;
        align-items: center;
        width: 100% !important;
        min-height: 40px;
        margin: 0 !important;
        padding: 0 !important;
    }
    body.kt-aside--minimize:not(.kt-aside--minimize-hover) .kt-aside-menu .kt-menu__nav > .norma-menu-grup.kt-menu__item--open > .kt-menu__submenu > .kt-menu__subnav > .kt-menu__item > .kt-menu__link .kt-menu__link-icon{
        flex: 0 0 auto !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center;
        justify-content: center;
    }
    body.kt-aside--minimize:not(.kt-aside--minimize-hover) .kt-aside-menu .kt-menu__nav > .norma-menu-grup.kt-menu__item--open > .kt-menu__submenu > .kt-menu__subnav > .kt-menu__item > .kt-menu__link .kt-menu__link-text,
    body.kt-aside--minimize:not(.kt-aside--minimize-hover) .kt-aside-menu .kt-menu__nav > .norma-menu-grup.kt-menu__item--open > .kt-menu__submenu > .kt-menu__subnav > .kt-menu__item > .kt-menu__link .kt-menu__ver-arrow,
    body.kt-aside--minimize:not(.kt-aside--minimize-hover) .kt-aside-menu .kt-menu__nav > .norma-menu-grup.kt-menu__item--open > .kt-menu__submenu > .kt-menu__subnav > .kt-menu__item > .kt-menu__link .kt-menu__link-badge,
    body.kt-aside--minimize:not(.kt-aside--minimize-hover) .kt-aside-menu .kt-menu__nav > .norma-menu-grup.kt-menu__item--open > .kt-menu__submenu > .kt-menu__subnav > .kt-menu__item > .kt-menu__submenu{
        display: none !important;
    }
}

/* MENÚ LATERAL PLEGAT: en passar el ratolí s'obre a 340px (Metronic: 250px) */
@media (min-width: 1025px) {
    /* Menú fixat (obert): fa 340px (style.bundle.css .kt-aside), però el tema deixa el contingut i el subheader a
       250px i el menú en tapava 90px. Amb el menú plegat o obert en passar el ratolí (per sobre), no canvia res. */
    body.kt-aside--fixed:not(.kt-aside--minimize):not(.kt-aside--minimize-hover) .kt-wrapper {
        padding-left: 340px;
    }
    body.kt-subheader--fixed:not(.kt-aside--minimize):not(.kt-aside--minimize-hover) .kt-subheader {
        left: 340px;
    }
    .kt-aside--fixed.kt-aside--minimize-hover .kt-aside {
        width: 340px;
    }
    /* Metronic fixes the menu list at 250px while it opens (.kt-aside--minimizing): with our 340px the rows (hover,
       active item) stayed 250px wide. The list takes the whole width of the open menu. */
    .kt-aside--fixed.kt-aside--minimize-hover .kt-aside .kt-aside-menu .kt-menu__nav {
        width: 100%;
    }
}

/* VISOR DE DOCUMENTS: estat del document a l'esquerra del títol */
.visor-modal .visor-estat { font-size: .9rem; font-weight: 600; padding: .45rem .9rem; height: auto; white-space: nowrap; }
.visor-modal .visor-esquerra { min-width: 0; }

/* ENS: CCN audit checklist of a measure (docs/moduls/ens.md) */
.ens-pregunta{
    padding: 12px 0;
    border-top: 1px solid #ebedf2;
}
.ens-pregunta-estat{
    width: 140px;
}
.ens-resum-pct{
    font-size: 2rem;
    font-weight: 600;
    color: #1dc9b7;
    line-height: 1;
}
.ens-resum-barra{
    height: 10px;
    background: #ebedf2;
}
.ens-resum-barra--petita{
    height: 6px;
    background: #ebedf2;
}
.ens-resum-marc{
    width: 45%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ens-resum-llegenda{
    font-size: 0.9rem;
}

/* ============================================================
   AUDITORIES: compte enrere del portlet "Propera auditoria"
   ============================================================ */
.auditoria-compte{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    height: 72px;
    border-radius: 8px;
    background: #e9edfc;
    color: #2a46a8;
}
.auditoria-compte--aviat{
    background: #fff4de;
    color: #8a5d00;
}
.auditoria-compte-dies{
    font-size: 26px;
    font-weight: 600;
    line-height: 1;
}
.auditoria-compte-text{
    font-size: 11px;
    text-transform: uppercase;
}

/* Popup d'auditoria: tipus com a dues opcions amb l'explicació a sota */
.kt-radio.auditoria-tipus{
    display: block;
    margin-bottom: 0;
    padding: 12px 12px 12px 42px;
    border: 1px solid #ebedf2;
    border-radius: 6px;
}
.kt-radio.auditoria-tipus > span:last-child{
    top: 14px;
    left: 14px;
}
.auditoria-tipus-ajuda{
    display: block;
    margin-top: 2px;
    font-size: 0.9rem;
    color: #74788d;
}

/* ÍNDEX DE LA NORMA (inici, sota el mapa): capítols i fills amb estat i dates */
.norma-index td, .norma-index th{
    padding: .45rem .5rem;
    vertical-align: middle;
    border-top: 1px solid #f0f1f5;
}
.norma-index thead th{
    border-top: 0;
    border-bottom: 1px solid #ebedf2;
}
.norma-index .norma-index-capitol td{
    padding-top: .8rem;
}
.norma-index .norma-index-capitol .norma-index-enllac{
    font-weight: 600;
    font-size: 1.05rem;
}
.norma-index .norma-index-fill td:first-child{
    padding-left: 1.8rem;
}
.norma-index .norma-index-enllac{
    color: #48465b;
}
.norma-index .norma-index-enllac:hover{
    color: var(--brand-color);
}
.norma-index .norma-estat-etiqueta{
    font-size: .75rem;
    height: auto;
    padding: .2rem .55rem;
    line-height: 1.3;
}
/* Inici de la norma (>= 992px): la columna dreta fa l'alçada de la fila (l'índex) i Notes i Última activitat
   s'estiren a parts iguals fins a baix, sense espai buit. La fila de dalt (Enllaços, Auditoria, Avisos) no creix. */
@media (min-width: 992px) {
    .norma-lateral-omplir{
        display: flex;
        flex-direction: column;
    }
    .norma-lateral-omplir > .row{ flex: 0 0 auto; }
    .norma-lateral-omplir > .kt-portlet{ flex: 1 1 auto; }
    /* Fila de 3 columnes (resum, Les meves tasques, Documents): els 3 portlets fan l'alçada del més alt */
    .norma-fila-igual > [class*="col-"]{
        display: flex;
        flex-direction: column;
    }
    .norma-fila-igual > [class*="col-"] > .kt-portlet{ flex: 1 1 auto; }
}
/* Última activitat (inici de la norma, sota Notes): un fet per fila */
.norma-activitat-fet{
    padding: .8rem 1.5rem;
    border-bottom: 1px solid #f0f1f5;
}
.norma-activitat-fet:last-child{ border-bottom: 0; }
.norma-activitat-meta{
    font-size: .85rem;
    color: #a7abc3;
}
.norma-activitat-text{ color: #48465b; }
.norma-activitat-apartat{
    display: block;
    margin-top: .15rem;
    font-size: .85rem;
    color: #6c7293;
}
.norma-activitat-apartat:hover{ color: var(--brand-color); text-decoration: none; }
/* Índex de la norma: tota la fila obre l'apartat (punter i fons gris en passar-hi el ratolí) */
.norma-index .norma-index-fila{ cursor: pointer; transition: background-color .15s; }
.norma-index .norma-index-fila:hover{ background-color: #f7f8fa; }
.norma-index .norma-index-fila:hover .norma-index-enllac{ color: var(--brand-color); }
/* Nombre de documents i d'evidències de cada fila (el que penja de l'apartat); 0 en gris clar */
.norma-index .norma-index-comptador{
    font-weight: 600;
    color: #48465b;
    min-width: 2.5rem;
}
.norma-index .norma-index-comptador--zero{
    font-weight: 400;
    color: #c7c5d8;
}


/* INICI (escriptori): una targeta per certificació */
.home-certificacio{
    display: block;
    color: #48465b;
    transition: box-shadow .2s, transform .2s;
}
.home-certificacio:hover{
    color: #48465b;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(82, 63, 105, .15);
    transform: translateY(-2px);
}
.home-certificacio-icona{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background: #e1f6ef;
    color: var(--brand-color);
    font-size: 1.3rem;
}
.home-certificacio-nom{
    font-size: 1.5rem;
    font-weight: 600;
}
.home-certificacio-pct{
    font-size: 2.4rem;
    font-weight: 600;
    color: var(--brand-color);
    line-height: 1.2;
}
.home-certificacio-dades{
    font-size: .95rem;
}

/* DOBLE FACTOR (pàgina després del login): passos, QR, clau i 6 caselles del codi */
.doble-factor-passos{
    margin-top: 1rem;
    font-size: .95rem;
}
.doble-factor-passos ol{
    padding-left: 1.2rem;
    margin-bottom: 1rem;
}
.doble-factor-passos li{
    margin-bottom: .35rem;
}
.doble-factor-qr{
    display: flex;
    justify-content: center;
    margin-bottom: .75rem;
}
.doble-factor-qr svg{
    width: 200px;
    height: 200px;
}
.doble-factor-clau{
    font-family: monospace;
    font-size: 1rem;
    letter-spacing: 1px;
    word-break: break-all;
    color: #48465b;
}
.doble-factor-caselles{
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 1rem;
}
.doble-factor-casella.form-control{
    width: 46px;
    height: 56px;
    padding: 0;
    text-align: center;
    font-size: 1.6rem;
    font-weight: 600;
}

/* TASQUES (configuració de la norma): periodicitat i responsables a la dreta de cada apartat */
.norma-config-tasca{
    flex-shrink: 0;
    gap: 8px;
}
.norma-config-tasca .camp-periodicitat{
    width: 190px;
}
/* Apartat amb fills: els controls només copien als fills, en gris clar */
.norma-config-tasca--fills .camp-periodicitat,
.norma-config-tasca--fills .bootstrap-select > .btn{
    opacity: .65;
}

/* LÍNIA DE LA TASCA A LA PÀGINA DE L'APARTAT (propera revisió, responsables, botons): fila sencera verd pastel */
.norma-revisio{
    background: #effaf5;
    border: 1px solid #d5f2e6;
    border-radius: 6px;
    padding: .6rem .9rem;
    row-gap: .4rem;
}

/* "Marcar com a revisat" (fila de la tasca): verd viu */
.btn.norma-btn-revisat{
    background-color: #00c853;
    border-color: #00c853;
    color: #ffffff;
}
.btn.norma-btn-revisat:hover, .btn.norma-btn-revisat:focus{
    background-color: #00a845;
    border-color: #00a845;
    color: #ffffff;
}

/* ENS > INVENTARI D'ACTIUS: lletres D I C A T del llistat, de color segons el nivell (docs/moduls/ens-actius.md) */
.actius-nivells { white-space: nowrap; }
.actius-nivells .kt-badge { min-width: 20px; margin-right: 2px; font-weight: 600; }
.actius-nivells .kt-badge.kt-badge--light { background: #f0f0f3; color: #b5b5c3; }

/* INICI (DASHBOARD): accessos directes (una per secció del menú) i portlets d'informació (caducitat, signatures,
   documents rebuts). Vegeu docs/admin-ui.md "Inici" i docs/moduls/avisos.md */
.dashboard-salutacio{
    font-weight: 500;
    margin-bottom: 4px;
}
.dashboard-accessos{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}
a.dashboard-acces{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 10px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 0 13px 0 rgba(82, 63, 105, .05);
    color: #48465b;
    text-align: center;
    transition: transform .15s, box-shadow .15s;
}
a.dashboard-acces:hover{
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
    text-decoration: none;
    color: var(--brand-color);
}
.dashboard-acces__icona{
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(1, 120, 212, .1);
    color: var(--brand-color);
    font-size: 1.1rem;
}
.dashboard-acces__text{
    font-weight: 500;
    font-size: .95rem;
    line-height: 1.25;
}
.dashboard-portlet .kt-portlet__head-title i{
    color: var(--brand-color);
    margin-right: 6px;
}
.dashboard-portlet .kt-portlet__body{
    padding-top: 10px;
}
.dashboard-seccio{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 14px 0 6px;
    font-weight: 500;
    color: #74788d;
    font-size: .9rem;
}
.dashboard-seccio:first-child{
    margin-top: 0;
}
.dashboard-item{
    display: flex;
    flex-direction: column;
    padding: 7px 10px;
    margin: 0 -10px;
    border-radius: 4px;
    color: #48465b;
}
a.dashboard-item:hover, .dashboard-item--accio:hover{
    background: #f7f8fa;
    text-decoration: none;
    color: #48465b;
}
.dashboard-item--accio{
    flex-direction: row;
    align-items: center;
}
.dashboard-item__cos{
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    color: #48465b;
}
.dashboard-item__cos:hover{
    text-decoration: none;
    color: #48465b;
}
.dashboard-item__nom{
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dashboard-item__nom i{
    color: #a2a5b9;
    margin-right: 4px;
}
.dashboard-item__meta{
    font-size: .85rem;
    color: #a2a5b9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dashboard-revisar:hover i{
    color: #0abb87;
}
.dashboard-mes{
    display: inline-block;
    margin-top: 6px;
    font-size: .85rem;
}
.dashboard-buit{
    color: #a2a5b9;
    padding: 10px 0;
}
.dashboard-buit i{
    color: #0abb87;
    margin-right: 6px;
}
/* END INICI (DASHBOARD) */

/* AVISOS PER CORREU (configuració del client). Vegeu docs/moduls/avisos.md */
.avis-targeta .kt-portlet__head-title i{
    color: var(--brand-color);
    margin-right: 6px;
}
.avis-targeta--off{
    opacity: .6;
}
/* END AVISOS PER CORREU */

/* GESTOR DOCUMENTAL: arbre de carpetes, taules de carpetes i documents, zona per deixar fitxers, progrés de pujada,
   previsualització. Vegeu docs/moduls/gestor-documental.md i docs/admin-ui.md "Gestor documental" */
.gestor-arbre-portlet{
    position: sticky;
    top: 140px;
    max-height: calc(100vh - 160px);
    overflow: auto;
}
.gestor-arrel{
    display: block;
    font-weight: 500;
    padding: 4px 6px;
    border-radius: 4px;
}
.gestor-arrel.actiu{ background: rgba(1, 120, 212, .1); }
#gestor-arbre ul{
    list-style: none;
    padding-left: 14px;
    margin: 0;
}
#gestor-arbre > ul{ padding-left: 0; }
#gestor-arbre li > ul{ display: none; }
#gestor-arbre li.obert > ul{ display: block; }
.gestor-arbre-node{
    display: flex;
    align-items: center;
    padding: 3px 6px;
    border-radius: 4px;
    white-space: nowrap;
}
.gestor-arbre-node a{
    color: #48465b;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gestor-arbre-node a i{ color: #ffb822; }
.gestor-arbre-node.actiu{ background: rgba(1, 120, 212, .1); }
.gestor-arbre-node.actiu a{ color: var(--brand-color); font-weight: 500; }
.gestor-plegar, .gestor-plegar-buit{
    width: 16px;
    flex: 0 0 16px;
    font-size: .7rem;
    color: #a2a5b9;
    cursor: pointer;
    transition: transform .15s;
}
li.obert > .gestor-arbre-node .gestor-plegar{ transform: rotate(90deg); }
.gestor-taula td{ vertical-align: middle; }
.gestor-taula td.gestor-check{ width: 1%; }
.gestor-taula td.gestor-meta{
    width: 1%;
    white-space: nowrap;
    color: #a2a5b9;
    font-size: .85rem;
}
.gestor-taula a{ color: #48465b; font-weight: 500; }
.gestor-taula a:hover{ color: var(--brand-color); }
.gestor-icona-carpeta{ color: #ffb822; margin-right: 4px; }
.gestor-icona-doc{ margin-right: 4px; }
.gestor-chips{ margin-top: 4px; }
.gestor-chip{ font-size: .75rem; margin-bottom: 2px; }
.gestor-buit{
    padding: 30px;
    text-align: center;
    color: #a2a5b9;
}
.gestor-drop{ position: relative; min-height: 80px; }
.gestor-drop-avis{
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 1.2rem;
    color: var(--brand-color);
    background: rgba(1, 120, 212, .08);
    border: 2px dashed var(--brand-color);
    border-radius: 4px;
    pointer-events: none;
}
.gestor-drop.drag .gestor-drop-avis{ display: flex; }
.gestor-progres{
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 320px;
    padding: 12px 15px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .15);
    z-index: 1050;
}
.gestor-progres strong{
    max-width: 230px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gestor-arbre-moure ul{ list-style: none; padding-left: 18px; }
.gestor-arbre-moure > ul{ padding-left: 0; }
.gestor-arbre-moure i{ color: #ffb822; }
.gestor-llista-usuaris{ max-height: 220px; overflow: auto; }
.gestor-preview-dialog{ max-width: 95vw; }
.gestor-preview-cos{ height: 80vh; }
.gestor-preview-cos iframe{ width: 100%; height: 100%; border: 0; }
.gestor-preview-img{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f7f8fa;
}
.gestor-preview-img img{ max-width: 100%; max-height: 100%; }
@media (max-width: 991px){
    .gestor-arbre-portlet{ position: static; max-height: 300px; }
}
/* END GESTOR DOCUMENTAL */

/* PLANTILLES: tipus de document vinculats (arrossegar per ordenar), enviaments desactivats. Vegeu docs/moduls/plantilles.md */
.plantilla-tipus{
    list-style: none;
    padding: 0;
    margin: 0;
}
.plantilla-tipus li{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid #ebedf2;
    border-radius: 4px;
    margin-bottom: 6px;
    background: #fff;
}
.plantilla-tipus__mansa{ color: #a2a5b9; cursor: grab; }
.plantilla-tipus__text{ flex: 1; min-width: 0; }
.enviament-desactivat td{ text-decoration: line-through; color: #a2a5b9; }
.enviament-desactivat td .btn-group{ text-decoration: none; }
.plantilla-carpetes{
    max-height: 200px;
    overflow: auto;
    border: 1px solid #ebedf2;
    border-radius: 4px;
    padding: 8px;
}
/* END PLANTILLES */

/* BOTONS DEL SUBHEADER (header_toolbar): com MyInfluentium, btn-brand / btn-secondary + btn-bold btn-sm btn-icon-sm,
   sense ombres (tampoc en passar-hi el ratolí o amb focus). Vegeu docs/admin-ui.md */
.kt-subheader .kt-subheader__toolbar .btn,
.kt-subheader .kt-subheader__toolbar .btn:hover,
.kt-subheader .kt-subheader__toolbar .btn:focus,
.kt-subheader .kt-subheader__toolbar .btn:active,
.kt-subheader .kt-subheader__toolbar .btn.active {
    box-shadow: none !important;
}
.kt-subheader .kt-subheader__toolbar .btn > i {
    margin-right: 0.4rem;
}
.kt-subheader .kt-subheader__toolbar .btn + .btn,
.kt-subheader .kt-subheader__toolbar .btn + .btn-group,
.kt-subheader .kt-subheader__toolbar .btn-group + .btn {
    margin-left: 0.5rem;
}
.kt-subheader .kt-subheader__toolbar .btn-group > .btn + .btn {
    margin-left: 0;
}
/* END BOTONS DEL SUBHEADER */

/* LOGO DEL CLIENT (fitxa del client, superadmin): logo actual amb botó d'eliminar i zona per arrossegar-hi el fitxer */
.logo-client-actual {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    background: #f7f8fa;
    border-radius: 4px;
}
.logo-client-actual img {
    max-height: 60px;
    max-width: calc(100% - 40px);
}
.logo-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
    margin: 0;
    padding: 22px 12px;
    border: 2px dashed #e2e5ec;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}
.logo-drop:hover,
.logo-drop--sobre {
    border-color: var(--brand-color);
    background: rgba(1, 120, 212, .04);
}
.logo-drop > i {
    font-size: 1.8rem;
    color: var(--brand-color);
}
.logo-drop__text {
    font-weight: 500;
    color: #48465b;
}
.logo-drop__info {
    font-size: .85rem;
    color: #a2a5b9;
}
/* END LOGO DEL CLIENT */

/* GESTOR DOCUMENTAL: OPCIONS DE VISTA (gestor.js, preferència desada al navegador). Vegeu docs/admin-ui.md "Gestor documental"
   - .gestor--checks: mostra la columna de selecció (pastilla petita); per defecte amagada
   - .gestor--graella: carpetes i documents en targetes
   - .gestor--sense-arbre: amaga l'arbre lateral i el contingut ocupa tota l'amplada */
.gestor-vista-btn.active,
.gestor-vista-grup .btn.active{
    background: var(--brand-color) !important;
    border-color: var(--brand-color) !important;
    color: #fff !important;
}
.gestor-vista-btn.active i,
.gestor-vista-grup .btn.active i{ color: #fff !important; }
.kt-subheader .kt-subheader__toolbar .gestor-vista-btn > i,
.kt-subheader .kt-subheader__toolbar .gestor-vista-grup .btn > i{ margin-right: 0; }

/* Selection: hidden unless .gestor--checks; small pill switch, vertically centred */
.gestor .gestor-check{ display: none; }
.gestor.gestor--checks .gestor-check{ display: table-cell; }
.gestor-taula td.gestor-check{ width: 1%; padding-right: 0; vertical-align: middle; }
.gestor-pastilla{
    position: relative;
    display: inline-block;
    width: 28px;
    height: 16px;
    margin: 0;
    vertical-align: middle;
    cursor: pointer;
}
.gestor-pastilla input{ position: absolute; opacity: 0; width: 0; height: 0; }
.gestor-pastilla span{
    position: absolute;
    inset: 0;
    background: #e4e6ef;
    border-radius: 16px;
    transition: background-color .15s;
}
.gestor-pastilla span::after{
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    transition: transform .15s;
}
.gestor-pastilla input:checked + span{ background: var(--brand-color); }
.gestor-pastilla input:checked + span::after{ transform: translateX(12px); }

/* List: name and tags on one line, bigger name, compact date and menu at the far right */
.gestor-taula td.gestor-cos{ width: auto; }
.gestor-linia{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
}
.gestor-nom{ font-size: 1.08rem; }
.gestor-linia .gestor-chips{ margin-top: 0; }
.gestor-taula td.gestor-meta{
    width: 1%;
    padding-left: 6px;
    padding-right: 6px;
    font-size: .75rem;
    line-height: 1.3;
    text-align: right;
}
.gestor-taula td.dt-col-actions{
    width: 1%;
    padding-left: 0;
    text-align: right;
}

/* Tree hidden */
.gestor.gestor--sense-arbre .gestor-arbre-col{ display: none; }
.gestor.gestor--sense-arbre .gestor-principal{ flex: 0 0 100%; max-width: 100%; }

/* Grid */
.gestor.gestor--graella .gestor-taula,
.gestor.gestor--graella .gestor-taula tbody{ display: block; }
.gestor.gestor--graella .gestor-taula tbody{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px;
    padding: 12px;
}
.gestor.gestor--graella .gestor-taula tr{
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 14px 12px 10px;
    border: 1px solid #ebedf2;
    border-radius: 6px;
    background: #fff;
    transition: box-shadow .15s, border-color .15s;
}
.gestor.gestor--graella .gestor-taula tr:hover{
    border-color: rgba(1, 120, 212, .35);
    background: #fff;
}
.gestor.gestor--graella .gestor-taula td{
    display: block;
    width: auto !important;
    padding: 0;
    border: 0;
    text-align: left;
}
.gestor.gestor--graella .gestor-taula td.gestor-check{
    display: none;
    position: absolute;
    top: 8px;
    left: 8px;
}
.gestor.gestor--graella.gestor--checks .gestor-taula td.gestor-check{ display: block; }
.gestor.gestor--graella .gestor-taula td.dt-col-actions{
    position: absolute;
    top: 4px;
    right: 4px;
}
.gestor.gestor--graella .gestor-linia{
    flex-direction: column;
    align-items: flex-start;
}
.gestor.gestor--graella .gestor-nom{
    display: block;
    width: 100%;
    padding-right: 22px;
    word-break: break-word;
}
.gestor.gestor--graella .gestor-icona-carpeta,
.gestor.gestor--graella .gestor-icona-doc{
    display: block;
    margin: 4px 0 8px;
    font-size: 2rem;
}
.gestor.gestor--graella .gestor-taula td.gestor-meta{ margin-top: 8px; text-align: left; }
/* END GESTOR DOCUMENTAL: OPCIONS DE VISTA */

/* Etiquetes (chips) del gestor: espai entre la icona i el text */
.gestor-chip > i{ margin-right: 4px; }
/* Etiquetes i noms de persones del gestor, en majúscules */
.gestor-chip--maj{ text-transform: uppercase; letter-spacing: .02em; }

/* BREADCRUMB EN UNA LÍNIA: noms llargs retallats amb "…" (nom sencer al title); la carpeta actual té prioritat.
   La barra d'eines de la dreta no s'encongeix. Vegeu docs/admin-ui.md "Capçalera" */
.kt-subheader .kt-subheader__main{
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
}
.kt-subheader .kt-subheader__toolbar{ flex-shrink: 0; }
.kt-subheader .kt-subheader__breadcrumbs,
.kt-subheader #md-breadcrumb{
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    min-width: 0;
    overflow: hidden;
}
.kt-subheader .kt-subheader__title,
.kt-subheader .kt-subheader__breadcrumbs-home,
.kt-subheader .kt-subheader__breadcrumbs-separator{ flex-shrink: 0; }
.kt-subheader .kt-subheader__breadcrumbs .kt-subheader__breadcrumbs-link{
    min-width: 0;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 3;
}
.kt-subheader .kt-subheader__breadcrumbs .kt-subheader__breadcrumbs-link--active{
    max-width: none;
    flex-shrink: 1;
}
/* END BREADCRUMB EN UNA LÍNIA */

/* GESTOR: TARGETES DE LA GRAELLA. Ordre fix: icona (a dalt a l'esquerra, a l'altura dels 3 punts), títol de
   3 línies com a màxim (sempre ocupa 3 línies, la resta amb "…"), una línia d'etiquetes (sempre, encara que buida)
   i a sota persona, hora i mida. Totes les targetes fan la mateixa alçada. */
.gestor.gestor--graella .gestor-taula tr{
    padding: 12px 12px 10px;
}
.gestor.gestor--graella .gestor-icona-carpeta,
.gestor.gestor--graella .gestor-icona-doc{
    display: block;
    height: 32px;
    margin: 0 0 8px;
    font-size: 2rem;
    line-height: 32px;
}
.gestor.gestor--graella .gestor-taula td.dt-col-actions{
    top: 12px;
    right: 8px;
    height: 32px;
    display: flex;
    align-items: center;
}
.gestor.gestor--graella .gestor-taula td.gestor-check{
    top: auto;
    bottom: 10px;
    left: auto;
    right: 10px;
}
.gestor.gestor--graella .gestor-nom{
    padding-right: 0;
    font-size: 1rem;
}
.gestor.gestor--graella .gestor-nom a{ display: block; }
.gestor.gestor--graella .gestor-nom-text{
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
    height: calc(1.35em * 3);
    word-break: break-word;
}
.gestor.gestor--graella .gestor-linia{
    gap: 0;
    flex-wrap: nowrap;
}
.gestor.gestor--graella .gestor-linia .gestor-chips{
    display: block;
    width: 100%;
    height: 22px;
    margin-top: 8px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.gestor.gestor--graella .gestor-taula td.gestor-meta{
    margin-top: 6px;
    white-space: normal;
}
/* END GESTOR: TARGETES DE LA GRAELLA */

/* Arbre del gestor: capçalera igual que la del portlet Documents (mateixa alçada, lletra i color) */
.gestor-arbre-portlet .kt-portlet__head-title a.gestor-arrel{
    display: inline;
    padding: 0;
    font: inherit;
    color: inherit;
    background: none;
}
.gestor-arbre-portlet .kt-portlet__head-title a.gestor-arrel:hover{ color: var(--brand-color); text-decoration: none; }
.gestor-arbre-portlet .kt-portlet__head-title a.gestor-arrel i{ margin-right: 6px; }
.gestor-arbre-portlet .kt-portlet__head-title a.gestor-arrel.actiu{ background: none; }

/* Gestor sense capçalera als portlets de carpetes i documents: barra d'accions massives dins del portlet,
   només quan hi ha alguna cosa seleccionada */
.gestor-barra-seleccio{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 10px 15px;
    background: rgba(1, 120, 212, .06);
    border-bottom: 1px solid #ebedf2;
}
.gestor-barra-seleccio .gestor-seleccionats{ font-weight: 500; color: var(--brand-color); }
.gestor-barra-seleccio .btn{ box-shadow: none !important; }
.gestor-barra-seleccio .btn > i{ margin-right: 4px; }
.gestor-bloc + .gestor-bloc{ margin-top: 0; }

/* Paperera: dies que falten per eliminar-se definitivament, a sota de tot i a la dreta (llista i graella) */
.gestor-dies-paperera{
    margin-top: 4px;
    text-align: right;
}
.gestor.gestor--graella .gestor-taula td.gestor-meta .gestor-dies-paperera{ text-align: right; }

/* FILTRES DELS LLISTATS AL SUBHEADER (header_toolbar), com MyInfluentium: input i selects de 32px, fons blanc */
.kt-subheader .kt-subheader__toolbar .kt-subheader__wrapper{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.kt-subheader .kt-subheader__toolbar .kt-subheader__wrapper > .btn,
.kt-subheader .kt-subheader__toolbar .kt-subheader__wrapper > .btn-group,
.kt-subheader .kt-subheader__toolbar .kt-subheader__wrapper > .bootstrap-select,
.kt-subheader .kt-subheader__toolbar .kt-subheader__wrapper > .filtre-text{ margin: 0 !important; }
.kt-subheader .kt-subheader__toolbar .filtre-text{
    width: 200px;
    height: 32px;
    background-color: #fff;
    font-size: 1rem;
    color: #595d6e;
}
.kt-subheader .kt-subheader__toolbar .filtre-text::placeholder{ color: #a2a5b9; }
.kt-subheader .kt-subheader__toolbar .bootstrap-select > .dropdown-toggle{
    display: flex;
    align-items: center;
    height: 32px;
    padding-top: 0;
    padding-bottom: 0;
    background-color: #fff;
    font-size: 1rem;
    font-weight: 400;
    color: #595d6e;
}
@media (max-width: 767px){
    .kt-subheader .kt-subheader__toolbar .filtre-text{ width: 100%; }
}
/* END FILTRES DELS LLISTATS */

/* Gestor: etiquetes que no hi caben. La línia mostra la mà i un tooltip blanc amb totes les etiquetes, una sota l'altra */
.gestor-chips--mes{ cursor: help; }
.gestor-tooltip-tags{ opacity: 1 !important; }
.gestor-tooltip-tags .tooltip-inner{
    max-width: 320px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 10px 12px;
    text-align: left;
    background: #fff;
    color: #48465b;
    border-radius: 6px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .15);
}
.gestor-tooltip-tags .arrow::before{ border-top-color: #fff !important; border-bottom-color: #fff !important; }
.gestor-tooltip-tags .gestor-tooltip-fila + .gestor-tooltip-fila{ margin-top: 5px; }
.gestor-tooltip-tags .gestor-chip{ margin: 0; white-space: nowrap; }
.gestor-tooltip-tags .gestor-chip > i{ margin-right: 4px; }

/* GESTOR: fons dels portlets de carpetes i documents #ececec; cada element (fila o targeta) en blanc */
.gestor .gestor-bloc,
.gestor .gestor-bloc .kt-portlet__body{ background: #ececec; }
.gestor .gestor-bloc .gestor-taula{
    border-collapse: separate;
    border-spacing: 0 6px;
    padding: 0 10px;
    background: transparent;
}
.gestor .gestor-bloc .gestor-taula tbody tr{ background: #fff; }
.gestor .gestor-bloc .gestor-taula tbody tr:hover{ background: #fff; box-shadow: 0 0 0 1px rgba(1, 120, 212, .35); }
.gestor .gestor-bloc .gestor-taula td{ border-top: 0; }
.gestor .gestor-bloc .gestor-taula tbody tr td:first-child{ border-radius: 4px 0 0 4px; }
.gestor .gestor-bloc .gestor-taula tbody tr td:last-child{ border-radius: 0 4px 4px 0; }
.gestor .gestor-bloc .gestor-buit{ background: transparent; }
.gestor.gestor--graella .gestor-bloc .gestor-taula{ padding: 0; border-spacing: 0; }
.gestor.gestor--graella .gestor-bloc .gestor-taula tbody tr td{ border-radius: 0; }
.gestor .gestor-barra-seleccio{ background: #fff; }
.gestor:not(.gestor--checks):not(.gestor--graella) .gestor-bloc .gestor-taula td.gestor-cos{ border-radius: 4px 0 0 4px; }

/* Tooltip propi de les etiquetes que no hi caben: s'obre a sota del ratolí; text de cada etiqueta centrat verticalment */
div.gestor-tooltip-tags{
    position: fixed;
    z-index: 1080;
    max-width: 320px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 10px 12px;
    background: #fff;
    color: #48465b;
    border-radius: 6px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
    pointer-events: none;
}
div.gestor-tooltip-tags .gestor-tooltip-fila{ display: flex; align-items: center; }
div.gestor-tooltip-tags .gestor-tooltip-fila + .gestor-tooltip-fila{ margin-top: 5px; }
/* same chip as in the cards (no own padding / height): only no wrapping */
div.gestor-tooltip-tags .gestor-chip{ margin: 0; white-space: nowrap; }
div.gestor-tooltip-tags .gestor-chip > i{ margin-right: 4px; }
.gestor-barra-seleccio .gestor-seleccionar-tot{ padding: 0 6px; font-weight: 500; color: var(--brand-color); }
.gestor-barra-seleccio .gestor-seleccionar-tot:hover{ text-decoration: underline; }

/* Documents rebuts: carpetes on està guardat, a sobre del nom, en una línia (tooltip amb el camí sencer) */
.gestor-cami{
    max-width: 100%;
    margin-bottom: 2px;
    font-size: .8rem;
    color: #a2a5b9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gestor-cami > i,
div.gestor-tooltip-tags .gestor-tooltip-cami > i{ color: #ffb822; margin-right: 4px; }
div.gestor-tooltip-tags .gestor-tooltip-cami{ font-size: .85rem; white-space: nowrap; }
/* Grid: the type icon goes to the top row (with the 3 dots); under it the folders line, then the name */
.gestor.gestor--graella .gestor-taula tr{ padding-top: 52px; }
.gestor.gestor--graella .gestor-icona-carpeta,
.gestor.gestor--graella .gestor-icona-doc{ position: absolute; top: 12px; left: 12px; margin: 0; }
.gestor.gestor--graella .gestor-cami{ margin: 0 0 4px; }

/* Gestor: fila o targeta amb el menú de 3 punts obert, per sobre de les altres i del contingut del portlet */
.gestor .gestor-taula tr.gestor-menu-obert{ position: relative; z-index: 50; }
.gestor .gestor-bloc,
.gestor .gestor-bloc .kt-portlet__body{ overflow: visible; }
.gestor .gestor-taula .dropdown-menu{ z-index: 1060; }

/* PLANTILLES: filtre d'estats dels enviaments, un botó per estat amb el seu color (actiu = ple, inactiu = blanc) */
.filtre-estats .filtre-estat{
    --estat: #74788d;
    width: 34px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #e2e5ec;
    color: var(--estat);
    box-shadow: none !important;
}
.filtre-estats .filtre-estat i{ margin: 0 !important; font-size: .95rem; opacity: .55; }
.filtre-estats .filtre-estat:hover i{ opacity: 1; }
.filtre-estats .filtre-estat.active{
    background: var(--estat);
    border-color: var(--estat);
    color: #fff;
}
.filtre-estats .filtre-estat.active i{ opacity: 1; }
.filtre-estat--pendent{ --estat: #595d6e !important; }
.filtre-estat--obert{ --estat: #ffb822 !important; }
.filtre-estat--en_proces{ --estat: var(--brand-color) !important; }
.filtre-estat--anulat{ --estat: #fd397a !important; }
.filtre-estat--ended{ --estat: #0abb87 !important; }
.tooltip-estat{ opacity: 1 !important; }
.tooltip-estat .tooltip-inner{
    padding: 8px 12px;
    background: #fff;
    color: #48465b;
    border-radius: 6px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .15);
    text-align: center;
}
.tooltip-estat .arrow::before{ border-bottom-color: #fff !important; border-top-color: #fff !important; }
.tooltip-estat__ajuda{ margin-top: 6px; font-size: .8rem; color: #a2a5b9; }
/* END PLANTILLES: FILTRE D'ESTATS */

/* Botons de filtre en grup (estats, actius): icona centrada (sense el padding / marge de Metronic) i només les cantonades
   de fora arrodonides; les que toquen un altre botó, rectes */
.filtre-estats .filtre-estat i{ padding: 0 !important; margin: 0 !important; width: auto; text-align: center; }
.filtre-estats .filtre-estat{ border-radius: 0 !important; margin-left: -1px; }
.filtre-estats .filtre-estat:first-child{ margin-left: 0; border-top-left-radius: 4px !important; border-bottom-left-radius: 4px !important; }
.filtre-estats .filtre-estat:last-child{ border-top-right-radius: 4px !important; border-bottom-right-radius: 4px !important; }
.filtre-estats .filtre-estat.active{ position: relative; z-index: 1; }

/* Fitxa d'usuari: permisos amb interruptors pastilla petits (com la selecció del gestor) */
.taula-permisos td,
.taula-permisos th{ vertical-align: middle; }
.permis-entitat{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.permis-entitat .gestor-pastilla{ flex: 0 0 28px; }
.gestor-pastilla input:disabled + span{ opacity: .5; cursor: not-allowed; }

/* Paperera: dies que falten a la mateixa línia que el nom i la data (a la dreta, centrat verticalment) */
.gestor-meta-paperera{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-align: right;
}
.gestor-meta-paperera .gestor-dies-paperera{ margin: 0; }
.gestor.gestor--graella .gestor-meta-paperera{ display: flex; justify-content: space-between; text-align: left; }

/* Grups de botons del subheader (llista / graella, filtres...): només les cantonades de fora arrodonides */
.kt-subheader .kt-subheader__toolbar .btn-group > .btn{ border-radius: 0 !important; }
.kt-subheader .kt-subheader__toolbar .btn-group > .btn:not(:first-child){ margin-left: -1px; }
.kt-subheader .kt-subheader__toolbar .btn-group > .btn:first-child{ border-top-left-radius: 4px !important; border-bottom-left-radius: 4px !important; }
.kt-subheader .kt-subheader__toolbar .btn-group > .btn:last-child{ border-top-right-radius: 4px !important; border-bottom-right-radius: 4px !important; }
.kt-subheader .kt-subheader__toolbar .btn-group > .btn.active{ position: relative; z-index: 1; }

/* Grup de vista del gestor: tots els botons igual d'amples i icona centrada */
.gestor-vista-grup > .btn{ width: 34px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.gestor-vista-grup > .btn > i{ padding: 0 !important; margin: 0 !important; }

/* Llistats d'etiquetes: icona de l'alçada del nom + uuid; uuid a sota del nom, clic = copiar */
.etiqueta-fila{ display: flex; align-items: center; gap: 12px; }
.etiqueta-fila__icona{
    flex: 0 0 auto;
    font-size: 2.1rem;
    line-height: 1;
    color: var(--brand-color);
}
.etiqueta-fila__text{ min-width: 0; }
.etiqueta-fila__nom{ font-weight: 500; color: #48465b; }
a.etiqueta-fila__uuid{
    font-family: SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .78rem;
    color: #a2a5b9;
}
a.etiqueta-fila__uuid:hover{ color: var(--brand-color); text-decoration: none; }
a.etiqueta-fila__uuid i{ margin-left: 4px; }

/* Tipus de document (plantilles): nom en negreta amb les etiquetes al costat (text pla, nombre de documents) i
   la descripció a sota, més petita */
.tipus-fila__cap{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tipus-fila__cap > i{ margin-right: 2px; }
.tipus-fila__nom{ font-weight: 600; color: #48465b; }
.tipus-fila__cap .kt-badge{ font-size: .75rem; }
.tipus-fila__cap .kt-badge > i{ margin-right: 4px; }
.tipus-fila__desc{ margin-top: 3px; font-size: .85rem; color: #a2a5b9; }

/* Fitxa d'usuari: arbre de carpetes que pot veure. Pastilla mini; el nom fosc si la pot veure, gris si no */
.gestor-pastilla--mini{ width: 22px; height: 12px; }
.gestor-pastilla--mini span::after{ top: 2px; left: 2px; width: 8px; height: 8px; }
.gestor-pastilla--mini input:checked + span::after{ transform: translateX(10px); }
.arbre-carpetes ul{ list-style: none; padding-left: 18px; margin: 0; }
.arbre-carpetes > ul{ padding-left: 0; }
.carpeta-permis{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 2px 0;
    cursor: pointer;
    color: #b5b5c3;
}
.carpeta-permis__nom i{ color: #d6d6e0; }
.carpeta-permis--on{ color: #48465b; font-weight: 500; }
.carpeta-permis--on .carpeta-permis__nom i{ color: #ffb822; }
.tooltip-estat .tooltip-boto{ display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; white-space: nowrap; }
.tooltip-estat .tooltip-boto i{ color: var(--brand-color); }

/* TOOLTIPS DE L'APLICACIÓ: tots els title de l'admin (layout default), blancs amb ombra, com els dels filtres */
.tooltip-app{ opacity: 1 !important; }
.tooltip-app .tooltip-inner{
    max-width: 320px;
    padding: 7px 11px;
    background: #fff;
    color: #48465b;
    font-size: .85rem;
    border-radius: 6px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .15);
    text-align: left;
    word-break: break-word;
}
.tooltip-app .arrow::before{ border-top-color: #fff !important; border-bottom-color: #fff !important; }
/* END TOOLTIPS DE L'APLICACIÓ */

/* Botó de sortir del header (formulari POST): mateixa posició i mida que les altres icones del header */
.kt-header__topbar .kt-header__topbar-icon--boto{
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: transparent;
    cursor: pointer;
    transition: background-color .2s;
}
.kt-header__topbar .kt-header__topbar-icon--boto:hover{ background-color: rgba(255, 255, 255, .08); }
.kt-header__topbar .kt-header__topbar-icon--boto:focus{ outline: none; }

/* TEATRE (previsualització): 100% de la finestra per sobre de tot l'admin; barra a dalt i el document a sota */
.md-teatre{
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    background: #2b2b33;
}
.md-teatre[style*="display:none"], .md-teatre[style*="display: none"]{ display: none !important; }
.md-teatre__barra{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
}
.md-teatre__icona{ font-size: 1.4rem; }
.md-teatre__titol{
    flex: 1;
    min-width: 0;
    font-weight: 600;
    font-size: 1.05rem;
    color: #48465b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.md-teatre__accions{ display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.md-teatre__accions .btn{ box-shadow: none !important; }
.md-teatre__accions .btn > i{ margin-right: 4px; }
.md-teatre__tancar > i{ margin: 0 !important; font-size: 1.2rem; }
.md-teatre__cos{ flex: 1; min-height: 0; height: auto !important; }
.md-teatre__cos iframe{ width: 100%; height: 100%; border: 0; background: #fff; }
.md-teatre__cos .gestor-preview-img{ height: 100%; background: transparent; }
body.md-teatre-obert{ overflow: hidden; }
/* END TEATRE */