.campo-lista label {
    margin-right: 20px;
}
.dialogo {
    width: 50%;
    margin: auto;
    padding-top: 5%;
}
.active {
    font-weight: bold;
    text-decoration: underline;
}

.stepper-wrapper {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
}

.stepper-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;

    @media (max-width: 768px) {
        font-size: 12px;
    }
}

    .stepper-item::before {
        position: absolute;
        content: "";
        border-bottom: 2px solid #ccc;
        width: 100%;
        top: 20px;
        left: -50%;
        z-index: 2;
    }

    .stepper-item::after {
        position: absolute;
        content: "";
        border-bottom: 2px solid #ccc;
        width: 100%;
        top: 20px;
        left: 50%;
        z-index: 2;
    }
    .stepper-item .step-counter {
        position: relative;
        z-index: 5;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #ccc;
        margin-bottom: 1px;
        padding-top: 6px;
    }
    .stepper-item .step-counter i {
        color:white;
    }
    .stepper-item.active {
        font-weight: bold;
        color: #E26017;
    }
    .stepper-item.active .step-counter i {
        color: #E26017;
    }

    .stepper-item.completed .step-counter {
        background-color: #E26017;
    }

    .stepper-item.completed::after {
        position: absolute;
        content: "";
        border-bottom: 2px solid #E26017;
        width: 100%;
        top: 20px;
        left: 50%;
        z-index: 3;
    }

    .stepper-item:first-child::before {
        content: none;
    }

    .stepper-item:last-child::after {
        content: none;
    }

.bg-dark {
    color: white;
}

/* Scroll para AutocompleteFlyout */
.AutoCompleteFlyout {
    max-height: 800px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background-color: white;
    border: 1px solid #ccc;
    margin: 0px;
    padding: 0px;
}
.AutoCompleteFlyoutItem {
    padding: 4px;
    cursor: pointer;
    margin: 0px;
}
.AutoCompleteFlyoutHighlightedItem {
    padding: 4px;
    cursor: pointer;
    background-color: #eff0ff;
    margin: 0px;
}

/* =========================================
   CENTRO DE NOTIFICACIONES 
   ========================================= */
.panel-notificaciones {
    position: absolute;
    top: 50px;
    right: 15px; /* Ajusta según dónde caiga el icono */
    width: 380px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    z-index: 1050;
    border: 1px solid rgba(0,0,0,.15);
}

.panel-notificaciones-body {
    max-height: 400px;
    overflow-y: auto;
}

.notificacion-item { 
    padding: 10px 15px; 
    border-bottom: 1px solid #f0f0f0; 
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    transition: background 0.2s;
    text-decoration: none;
    color: inherit;
}

.notificacion-item:hover { 
    background: #f8f9fa; 
    text-decoration: none;
    color: inherit;
}

.notificacion-item.no-leida { 
    background: #fff8f5; 
}

.notificacion-item.no-leida .notif-titulo {
    font-weight: 600;
}

.notif-icono {
    font-size: 20px;
    margin-right: 12px;
    margin-top: 2px;
    width: 24px;
    text-align: center;
}

.notif-contenido {
    flex: 1;
    overflow: hidden;
}

.notif-titulo {
    font-size: 13px;
    margin: 0 0 4px 0;
    color: #333;
    line-height: 1.2;
}

.notif-mensaje {
    font-size: 11px;
    color: #666;
    margin: 0 0 4px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notif-fecha {
    font-size: 10px;
    color: #999;
}

.badge-notificaciones {
    position: absolute;
    top: 0px;
    right: 0px;
    font-size: 0.65rem;
    padding: 2px 5px;
    border-radius: 10px;
}

/* =========================================
   Llistats: amplada i densitat
   El contingut de les cel·les es manté en una sola línia (no es trenquen
   les paraules). Si la taula és més ampla que el contenidor, el
   desplaçament horitzontal queda CONTINGUT dins la taula i no desborda
   tota la pàgina.
   ========================================= */
table.table.table-responsive,
table.table.table-responsive-sm,
table.table.table-responsive-md,
table.table.table-responsive-lg,
table.table.table-responsive-xl {
    /* display:table (no block) perquè la taula ompli SEMPRE tot l'ample del
       contenidor, encara que no estigui dins un .list-panel/.panel-listado
       (p.ex. les graelles de conceptes/línies de les fitxes). Amb display:block
       la taula s'encongia al contingut i quedava estreta. */
    display: table;
    width: 100%;
    min-width: 100%;
    -webkit-overflow-scrolling: touch;
}

/* LLISTATS: s'ajusten a l'amplada de la pantalla (display:table; width:100%).
   Trencament SELECTIU per llegibilitat:
   - Capçaleres: poden anar en 2 línies (un títol llarg no eixampla la columna).
   - Dades de text llarg (client, nom fiscal → classe .col-text des de
     ConfigurarGrid): poden partir-se en 2+ línies.
   - Dates, números i codis: SEMPRE en una sola línia (il·legibles si es parteixen).
   En pantalles molt estretes, el contenidor fa overflow-x (scroll) de xarxa. */
.list-panel,
.panel-listado {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-width: 0;
}
.list-panel table.table.table-responsive,
.list-panel table.table.table-responsive-sm,
.list-panel table.table.table-responsive-md,
.list-panel table.table.table-responsive-lg,
.list-panel table.table.table-responsive-xl,
.panel-listado table.table.table-responsive,
.panel-listado table.table.table-responsive-sm,
.panel-listado table.table.table-responsive-md,
.panel-listado table.table.table-responsive-lg,
.panel-listado table.table.table-responsive-xl {
    display: table;
    width: 100%;
    table-layout: auto;
}
/* Capçaleres: 2 línies permeses (evita columnes amples per títols llargs) */
.list-panel table.table th,
.panel-listado table.table th {
    white-space: normal;
    vertical-align: bottom;
}
/* Dades: una sola línia per defecte (dates, números, codis) */
.list-panel table.table td,
.panel-listado table.table td {
    white-space: nowrap;
}
/* Columnes de text llarg: poden partir-se en 2+ línies perquè la taula càpiga
   a la pantalla sense scroll lateral. */
.list-panel table.table td.col-text,
.panel-listado table.table td.col-text {
    white-space: normal;
    max-width: 300px;
    overflow-wrap: break-word;
}

/* Columnes més compactes als llistats: menys espai horitzontal entre columnes. */
table.table.table-sm th,
table.table.table-sm td {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

/* Barra de filtres horitzontal a la part superior dels llistats:
   tot més compacte perquè ocupi poc i en càpiguen més camps per fila. */
.filter-panel .card-header {
    padding: 0.2rem 0.55rem;
    font-size: 0.78rem;
}
.filter-panel .card-body {
    padding: 0.35rem 0.55rem;
}
.filtros-inline .form-group {
    margin-bottom: 0.2rem;
}
.filtros-inline label {
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.2;
}
.filtros-inline .form-control,
.filtros-inline .input-group .btn {
    height: auto;
    min-height: 0;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
}
/* Icones dels botons (lupa, +, calendari) més petites dins els filtres */
.filtros-inline .input-group .btn .mdi::before {
    font-size: 13px;
    top: 1px;
}
/* Els botons Filtrar/Borrar van alineats amb la base dels camps */
.filtros-inline .filtros-botons .form-group {
    margin-bottom: 0.4rem;
}

/* Rangs de dates agrupats (de–a) sota un sol títol de columna */
.filtros-inline .filtre-rang {
    background: #faf7f5;
    border: 1px solid #f1e3da;
    border-radius: 4px;
    padding: 1px 5px 0;
    margin-bottom: 0.2rem;
}
.filtros-inline .filtre-rang-titol {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: #6c757d;
    margin-bottom: 0;
    line-height: 1.05;
}
/* Pàgines amb filtres estructurats per markup (form-row filtros-inline, p.ex. ListadoTarea):
   no s'aplica el flex automàtic del card-body; manda la graella .filtros-inline. */
.row.llistat-filtres-dalt .filter-panel.filtres-estructurat > .card-body {
    display: block;
}
/* Selector d'estats (multi-check) com a desplegable compacte dins els filtres */
.filtre-estat-titol {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: #6c757d;
    margin-bottom: 0;
    line-height: 1.05;
}
.filtre-estat-dropdown .dropdown-toggle {
    font-size: 0.875rem;
    line-height: 1.5;
    padding: 0.25rem 0.5rem;
}
.filtre-estat-menu {
    min-width: 220px;
    max-height: 300px;
    overflow-y: auto;
}
.filtre-estat-menu table.table {
    margin-bottom: 0;
    font-size: 0.72rem;
}
.filtre-estat-menu table.table th,
.filtre-estat-menu table.table td {
    padding: 0.12rem 0.4rem;
    border-top: none;
}
/* ===== Fitxa d'alta/edició en pop-up (pàgines tipus Mixta) =====
   El panell .new-item-panel deixa d'ocupar la columna dreta i es mostra
   com a modal centrat. S'activa des de main.js (només quan hi ha .ficha-modal). */
.befire-ficha-host {
    flex: 0 0 0 !important;
    max-width: 0 !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}
.befire-ficha-host .new-item-panel {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 92%;
    max-width: 1080px;
    max-height: 88vh;
    overflow-y: auto;
    z-index: 1060;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .3);
}
body.befire-ficha-open .befire-ficha-host .new-item-panel {
    display: block;
}
#befire-ficha-backdrop {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 1050;
}
body.befire-ficha-open #befire-ficha-backdrop {
    display: block;
}
.befire-ficha-host .new-item-panel .card-header {
    position: relative;
}
.befire-ficha-close {
    position: absolute;
    top: .5rem;
    right: .75rem;
    font-size: 1.5rem;
    line-height: 1;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    opacity: .6;
}
.befire-ficha-close:hover {
    opacity: 1;
}
.befire-ficha-crear {
    margin-right: .25rem;
}

body.befire-ficha-open {
    overflow: hidden;
}

/* A les pàgines Mixta, la fitxa passa a modal i el llistat ocupa l'espai
   lliure; la taula del grid s'estira al 100% per omplir tota l'amplada
   (sobreescriu el display:block de table-responsive només en aquests llistats). */
body.befire-mixta .list-panel table.table,
body.befire-mixta .panel-listado table.table {
    display: table;
    width: 100%;
}

/* ===== Estil del pop-up de fitxa (pàgines Mixta) ===== */
.befire-ficha-host .new-item-panel {
    border: none;
    border-radius: 14px;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
}
#befire-ficha-backdrop {
    background: rgba(20, 12, 8, .55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
/* Capçalera amb el color corporatiu */
.befire-ficha-host .new-item-panel > .card-header {
    background: linear-gradient(135deg, #E26017 0%, #ff7c30 100%);
    border-bottom: none;
    padding: 16px 22px;
}
.befire-ficha-host .new-item-panel > .card-header h2,
.befire-ficha-host .new-item-panel > .card-header h2 span {
    color: #fff !important;
    margin: 0;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: .3px;
}
.befire-ficha-host .new-item-panel .befire-ficha-close {
    color: #fff;
    opacity: .85;
    text-shadow: none;
}
.befire-ficha-host .new-item-panel .befire-ficha-close:hover {
    opacity: 1;
}
/* Cos */
.befire-ficha-host .new-item-panel > .card-body {
    padding: 22px 22px 6px;
    background: #fbfbfc;
}
.befire-ficha-host .new-item-panel .card-body .form-group label {
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #5a6169;
    margin-bottom: 4px;
}
.befire-ficha-host .new-item-panel .card-body .form-control {
    border-radius: 7px;
}
.befire-ficha-host .new-item-panel .card-body .form-control:focus {
    border-color: #E26017;
    box-shadow: 0 0 0 .18rem rgba(226, 96, 23, .15);
}
/* Peu */
.befire-ficha-host .new-item-panel > .card-footer {
    background: #fff;
    border-top: 1px solid #eee;
    padding: 14px 22px;
}
.befire-ficha-host .new-item-panel > .card-footer .btn {
    border-radius: 7px;
    padding-left: 18px;
    padding-right: 18px;
}

/* =========================================
   Filtres a la part superior a TOTS els llistats (no mixtes)
   El JS (main.js) marca la fila del llistat amb .llistat-filtres-dalt i les
   columnes amb .col-llista-amunt / .col-filtres-amunt. Aquí apilem les columnes
   (filtres a dalt a tota l'amplada, llista a sota) i posem els camps del filtre
   en horitzontal. Les pàgines mixtes (amb fitxa) no es marquen, així que no es
   veuen afectades.
   ========================================= */
.row.llistat-filtres-dalt > [class*="col-"],
.row.llistat-filtres-dalt > .col {
    flex: 0 0 100%;
    max-width: 100%;
}
/* Camps del filtre en horitzontal a la barra superior */
.row.llistat-filtres-dalt .filter-panel > .card-body,
.row.llistat-filtres-dalt .quick-search-panel > .card-body {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.75rem;
    align-items: flex-end;
}
.row.llistat-filtres-dalt .filter-panel > .card-body > .form-group,
.row.llistat-filtres-dalt .quick-search-panel > .card-body > .form-group {
    flex: 0 1 210px;
    min-width: 160px;
    margin-bottom: 0.4rem;
}
/* Els blocs que no són camps (fila de botons Filtrar/Borrar, etc.) a la seva línia */
.row.llistat-filtres-dalt .filter-panel > .card-body > .row,
.row.llistat-filtres-dalt .quick-search-panel > .card-body > .row {
    flex: 0 0 100%;
    margin-left: 0;
    margin-right: 0;
}

/* Panell de filtres plegable (plegat per defecte) — gestionat per main.js.
   La capçalera és una barra clicable i evident, amb fletxa d'estat, perquè
   l'usuari sàpiga que els filtres estan amagats i es poden desplegar. */
.filtres-header-toggle {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    background: #f5ece7;
    border-left: 4px solid #E26017;
    padding: 0.45rem 0.85rem;
    transition: background .15s;
}
.filtres-header-toggle:hover {
    background: #efddd2;
}
/* Títol "Filtros" més gros i marcat (sobreescriu el font-weight-light/text-uppercase) */
.filtres-header-toggle .font-weight-light,
.filtres-header-toggle > span,
.filtres-header-toggle > label {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    letter-spacing: .03em;
    color: #b14d12;
    margin-bottom: 0;
}
/* Amaga qualsevol chevron del markup per no duplicar amb la fletxa CSS */
.filtres-header-toggle .mdi-chevron-down,
.filtres-header-toggle .mdi-chevron-up {
    display: none !important;
}
/* Fletxa indicadora a la dreta: avall = desplegat, dreta = plegat */
.filtres-header-toggle::after {
    content: "\25BE"; /* ▾ */
    margin-left: auto;
    font-size: 1.05rem;
    line-height: 1;
    color: #E26017;
}
.filtres-plegat > .filtres-header-toggle::after,
.filtres-plegat .filtres-header-toggle::after {
    content: "\25B8"; /* ▸ */
}
.filtres-plegat > .card-body {
    display: none !important;
}

/* (CSS del popup genèric d'accions eliminat: les accions de botó van a la
   Botonera; les accions amb formulari fan servir el seu propi popup.) */

/* Botonera fixa a dalt a la dreta en fer scroll */
#ctl00_divBotonera {
    position: fixed;
    top: 8.5rem;
    right: 1.5rem;
    z-index: 1030;
    width: auto;
    max-width: 40%;
    background: rgba(255, 255, 255, .92);
    border-radius: .25rem;
    padding: .25rem .5rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
    transition: top .15s ease;
}
/* Un cop s'ha fet scroll i el menú superior desapareix, la botonera puja a dalt */
body.scrolled #ctl00_divBotonera {
    top: .5rem;
}

/* Fila seleccionada (checkbox inicial marcat) ressaltada a tots els llistats */
tr.fila-seleccionada > td {
    background-color: #ffe2cf !important;
}
/* Accent només a la vora esquerra de la fila (no a cada cel·la, que semblava
   línies de separació de columnes) */
tr.fila-seleccionada > td:first-child {
    box-shadow: inset 3px 0 0 #E26017;
}