:root {
    --gl-navy: #10152f;
    --gl-navy-2: #182044;
    --gl-blue: #2446a6;
    --gl-blue-2: #345dd6;
    --gl-blue-soft: #eef3ff;
    --gl-magenta: #b0187f;
    --gl-purple: #6f3cc3;
    --gl-pink-soft: #fff0f8;
    --gl-yellow: #f4c542;
    --gl-bg: #f4f6fb;
    --gl-surface: #ffffff;
    --gl-surface-soft: #f8f9fd;
    --gl-border: #e3e7f0;
    --gl-text: #111827;
    --gl-muted: #667085;
    --gl-success: #168a4a;
    --gl-danger: #c2414b;
    --gl-radius: 14px;
    --gl-radius-sm: 9px;
    --gl-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
    --gl-shadow-soft: 0 12px 28px rgba(15, 23, 42, 0.06);
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    min-height: 100vh;
    color: var(--gl-text);
    background:
        radial-gradient(circle at 8% 6%, rgba(176, 24, 127, 0.1), transparent 28rem),
        radial-gradient(circle at 92% 0%, rgba(36, 70, 166, 0.12), transparent 26rem),
        linear-gradient(180deg, #fbfcff 0%, var(--gl-bg) 42%, #f7f8fc 100%);
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: 0;
}

a {
    color: var(--gl-blue);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
}

a:hover {
    color: var(--gl-purple);
}

a:focus-visible,
button:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    outline: 3px solid rgba(176, 24, 127, 0.18);
    outline-offset: 2px;
    box-shadow: 0 0 0 0.2rem rgba(36, 70, 166, 0.12);
}

.pantalla-acces {
    position: relative;
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 1rem;
    overflow: hidden;
}

.pantalla-acces::before {
    position: absolute;
    inset: 8% auto auto 8%;
    width: min(42vw, 34rem);
    aspect-ratio: 1;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(176, 24, 127, 0.15), rgba(244, 197, 66, 0.13));
    content: "";
    filter: blur(8px);
}

.pantalla-acces::after {
    position: absolute;
    right: -10rem;
    bottom: -12rem;
    width: min(58vw, 42rem);
    aspect-ratio: 1;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(36, 70, 166, 0.18), rgba(111, 60, 195, 0.14));
    content: "";
}

.caixa-acces {
    position: relative;
    z-index: 1;
    width: min(480px, calc(100% - 2rem));
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 28px 80px rgba(16, 21, 47, 0.14);
    backdrop-filter: blur(22px);
}

.marca-acces,
.marca-icon {
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 800;
}

.marca-acces {
    width: 3.6rem;
    aspect-ratio: 1;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--gl-blue), var(--gl-magenta));
    box-shadow: 0 18px 36px rgba(176, 24, 127, 0.24);
    font-size: 1.05rem;
}

.marca-petita {
    color: var(--gl-magenta);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.btn {
    border-radius: 9px;
    font-weight: 700;
    letter-spacing: 0;
}

.btn-primary {
    --bs-btn-bg: var(--gl-blue);
    --bs-btn-border-color: var(--gl-blue);
    --bs-btn-hover-bg: var(--gl-navy-2);
    --bs-btn-hover-border-color: var(--gl-navy-2);
    --bs-btn-active-bg: var(--gl-navy);
    --bs-btn-active-border-color: var(--gl-navy);
    box-shadow: 0 10px 22px rgba(36, 70, 166, 0.18);
}

.btn-outline-primary {
    --bs-btn-color: var(--gl-blue);
    --bs-btn-border-color: rgba(36, 70, 166, 0.35);
    --bs-btn-hover-bg: var(--gl-blue);
    --bs-btn-hover-border-color: var(--gl-blue);
}

.btn-outline-secondary {
    --bs-btn-color: var(--gl-text);
    --bs-btn-border-color: var(--gl-border);
    --bs-btn-hover-color: var(--gl-text);
    --bs-btn-hover-bg: var(--gl-surface-soft);
    --bs-btn-hover-border-color: #d5dbea;
}

.btn-outline-danger {
    --bs-btn-color: var(--gl-danger);
    --bs-btn-border-color: rgba(194, 65, 75, 0.35);
    --bs-btn-hover-bg: var(--gl-danger);
    --bs-btn-hover-border-color: var(--gl-danger);
}

.app-privada {
    display: grid;
    min-height: 100vh;
    grid-template-columns: 268px minmax(0, 1fr);
}

.menu-privat {
    position: sticky;
    top: 0;
    display: flex;
    height: 100vh;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
    padding: 0.95rem;
    background:
        linear-gradient(180deg, rgba(176, 24, 127, 0.14), transparent 24rem),
        linear-gradient(145deg, var(--gl-navy), #0b1028 68%, #070b1d);
    color: #fff;
}

.menu-privat::before {
    display: block;
    width: 46px;
    height: 3px;
    margin: 0 0 0.75rem 0.15rem;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--gl-magenta), var(--gl-yellow));
    content: "";
}

.menu-principal {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
}

.marca-panel {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: #fff;
    text-decoration: none;
}

.marca-panel:hover {
    color: #fff;
}

.marca-panel strong,
.marca-panel small,
.usuari-menu strong,
.usuari-menu span {
    display: block;
}

.marca-panel strong {
    line-height: 1.1;
}

.marca-panel small,
.usuari-menu span {
    color: rgba(255, 255, 255, 0.66);
}

.marca-icon {
    width: 2.65rem;
    aspect-ratio: 1;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--gl-blue-2), var(--gl-magenta));
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18);
}

.nav-panel {
    display: grid;
    gap: 0.12rem;
    align-content: start;
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    padding-right: 0.12rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}

.nav-panel a,
.nav-panel summary {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.52rem;
    min-height: 2.05rem;
    padding: 0.38rem 0.64rem 0.38rem 0.78rem;
    border: 1px solid transparent;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.74);
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.nav-panel summary {
    cursor: pointer;
    list-style: none;
}

.nav-panel summary::-webkit-details-marker {
    display: none;
}

.nav-panel summary::after {
    margin-left: auto;
    color: rgba(255, 255, 255, 0.5);
    font-family: "bootstrap-icons";
    font-size: 0.75rem;
    content: "\f282";
    transition: transform 0.16s ease;
}

.nav-grup[open] summary::after {
    transform: rotate(180deg);
}

.nav-panel a i,
.nav-panel summary i {
    font-size: 1rem;
    opacity: 0.9;
}

.nav-panel a::before,
.nav-panel summary::before {
    position: absolute;
    top: 0.52rem;
    bottom: 0.52rem;
    left: 0.34rem;
    width: 3px;
    border-radius: 999px;
    background: transparent;
    content: "";
}

.nav-panel a.actiu,
.nav-panel a:hover,
.nav-panel summary.actiu,
.nav-panel summary:hover {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.11);
    color: #fff;
}

.nav-panel a.actiu::before,
.nav-panel summary.actiu::before {
    background: linear-gradient(180deg, var(--gl-yellow), var(--gl-magenta));
}

.nav-panel a:hover,
.nav-panel summary:hover {
    transform: translateX(2px);
}

.nav-grup {
    display: grid;
    gap: 0.12rem;
}

.nav-submenu {
    display: grid;
    gap: 0.08rem;
    margin: 0.08rem 0 0.18rem 1.15rem;
    padding-left: 0.55rem;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.nav-submenu a {
    min-height: 1.72rem;
    padding: 0.28rem 0.54rem 0.28rem 0.64rem;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.8rem;
    font-weight: 700;
}

.nav-submenu a::before {
    left: 0.25rem;
    top: 0.42rem;
    bottom: 0.42rem;
    width: 2px;
}

.usuari-menu {
    margin-top: auto;
    flex: 0 0 auto;
    padding: 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
}

.contingut-privat {
    width: 100%;
    max-width: none;
    padding: clamp(0.9rem, 2vw, 1.65rem);
}

.topbar-privada {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 1.85rem;
    margin-bottom: 0.28rem;
    padding: 0 0.05rem 0.28rem;
    border-bottom: 1px solid rgba(227, 231, 240, 0.72);
}

.topbar-context {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--gl-muted);
    font-size: 0.73rem;
    font-weight: 700;
}

.topbar-titol {
    margin: 0.08rem 0 0;
    color: #364152;
    font-size: 0.86rem;
    font-weight: 600;
}

.topbar-usuari {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    text-align: right;
}

.topbar-canvi-empresa {
    min-width: min(16rem, 40vw);
}

.topbar-usuari span,
.topbar-usuari small {
    display: block;
}

.topbar-usuari span {
    font-weight: 700;
    font-size: 0.78rem;
}

.topbar-usuari small {
    color: var(--gl-muted);
    font-size: 0.68rem;
}

.topbar-badge {
    padding: 0.38rem 0.65rem;
    border-radius: 999px;
    background: var(--gl-pink-soft);
    color: var(--gl-magenta);
    font-size: 0.75rem;
    font-weight: 800;
}

.rol-badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.35rem;
    padding: 0.16rem 0.45rem;
    border: 1px solid rgba(35, 91, 185, 0.18);
    border-radius: 0.45rem;
    background: #eef5ff;
    color: #235bb9;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
}

.rol-badge-superadmin {
    border-color: rgba(166, 46, 67, 0.2);
    background: #fff1f3;
    color: #a62e43;
}

.rol-badge-usuari {
    border-color: rgba(88, 99, 117, 0.18);
    background: #f3f5f8;
    color: #586375;
}

.logo-preview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: min(14rem, 100%);
    min-height: 5.5rem;
    padding: 0.75rem;
    border: 1px solid rgba(203, 213, 225, 0.9);
    border-radius: 0.5rem;
    background: #fff;
}

.logo-preview img {
    max-width: 100%;
    max-height: 5.5rem;
    object-fit: contain;
}

.hero-panel,
.estat-buit,
.ajuda-contingut,
.ajuda-index,
.card-taula,
.bloc-formulari,
.fitxa-client {
    border: 1px solid rgba(227, 231, 240, 0.92);
    border-radius: var(--gl-radius);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--gl-shadow);
}

.hero-panel {
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: clamp(1rem, 2.3vw, 1.5rem);
    overflow: hidden;
}

.hero-panel::after {
    position: absolute;
    right: -3rem;
    top: -4rem;
    width: 13rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(176, 24, 127, 0.1), rgba(244, 197, 66, 0.12));
    content: "";
}

.hero-panel > * {
    position: relative;
    z-index: 1;
}

.hero-panel-compacte {
    align-items: center;
}

.hero-fitxa-client {
    align-items: center;
}

.hero-identitat-client,
.client-cella-nom {
    display: flex;
    align-items: center;
}

.hero-identitat-client {
    min-width: 0;
    gap: 1rem;
}

.client-cella-nom {
    gap: 0.7rem;
}

.avatar-client {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    background:
        linear-gradient(135deg, rgba(36, 70, 166, 0.96), rgba(176, 24, 127, 0.9));
    color: #fff;
    font-weight: 800;
    box-shadow: 0 14px 28px rgba(16, 21, 47, 0.16);
    line-height: 1;
}

.avatar-client img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-client-gran {
    width: clamp(4.6rem, 9vw, 6.2rem);
    height: clamp(4.6rem, 9vw, 6.2rem);
    font-size: clamp(1.55rem, 4vw, 2.2rem);
}

.avatar-client-taula {
    width: 2.35rem;
    height: 2.35rem;
    font-size: 0.78rem;
    box-shadow: 0 8px 18px rgba(16, 21, 47, 0.12);
}

.hero-panel h2,
.estat-buit h2 {
    margin: 0.45rem 0 0.5rem;
    font-size: clamp(1.7rem, 4vw, 2.5rem);
    font-weight: 800;
    letter-spacing: 0;
}

.hero-fitxa-client .btn,
.hero-panel-compacte .btn {
    white-space: nowrap;
}

.titol-fitxa-client {
    margin: 0.18rem 0 0;
    font-size: clamp(1.25rem, 2.2vw, 1.65rem) !important;
}

.fitxa-meta-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.5rem;
}

.hero-panel p,
.estat-buit p,
.targeta-modul p,
.ajuda-contingut p,
.ajuda-contingut li {
    color: var(--gl-muted);
    line-height: 1.65;
}

.resum-usuari {
    display: grid;
    min-width: min(280px, 100%);
    align-content: center;
    padding: 1.05rem;
    border: 1px solid rgba(36, 70, 166, 0.11);
    border-radius: 18px;
    background: linear-gradient(135deg, var(--gl-blue-soft), #fff);
}

.resum-usuari span {
    color: var(--gl-muted);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.resum-usuari strong {
    margin-top: 0.25rem;
    color: var(--gl-blue);
    font-size: 1.18rem;
}

.grid-moduls {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.dashboard-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
    gap: 0.9rem;
    margin-top: 1rem;
}

.dashboard-kpi {
    display: flex;
    min-height: 118px;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem;
    border: 1px solid rgba(227, 231, 240, 0.95);
    border-radius: 8px;
    background: var(--gl-surface);
    box-shadow: var(--gl-shadow-soft);
    color: var(--gl-text);
    text-decoration: none;
}

.dashboard-kpi-cap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.dashboard-kpi-cap i {
    color: var(--gl-blue);
    font-size: 1.1rem;
}

.dashboard-kpi:hover {
    border-color: rgba(36, 70, 166, 0.28);
    color: var(--gl-text);
}

.dashboard-kpi span {
    color: var(--gl-muted);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.dashboard-kpi strong {
    color: var(--gl-blue);
    font-size: 2rem;
    line-height: 1.05;
}

.dashboard-kpi small {
    color: var(--gl-muted);
    font-weight: 700;
}

.dashboard-kpi em {
    margin-top: auto;
    color: var(--gl-blue);
    font-size: 0.82rem;
    font-style: normal;
    font-weight: 800;
}

.dashboard-kpi-alerta {
    border-color: rgba(245, 158, 11, 0.34);
    background: #fffaf0;
}

.dashboard-avisos {
    display: grid;
    gap: 0.7rem;
}

.dashboard-avis {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1rem 0.9rem;
    border: 1px solid rgba(227, 231, 240, 0.95);
    border-radius: 8px;
    background: #fff;
}

.dashboard-avis-categoria {
    position: absolute;
    top: -0.62rem;
    left: 0.85rem;
    padding: 0.14rem 0.45rem;
    border-radius: 6px;
    background: #fff;
    color: var(--gl-muted);
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
}

.dashboard-avis p {
    margin: 0.25rem 0 0;
    color: var(--gl-muted);
}

.dashboard-avis-warning {
    border-color: rgba(245, 158, 11, 0.34);
    background: #fffaf0;
}

.dashboard-avis-danger {
    border-color: rgba(220, 38, 38, 0.24);
    background: #fff5f5;
}

.dashboard-avis-info {
    border-color: rgba(36, 70, 166, 0.18);
    background: #f5f8ff;
}

.dashboard-estat-linia {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
}

.dashboard-estat-linia strong {
    color: var(--gl-blue);
}

.dashboard-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.32fr);
    gap: 1rem;
    align-items: stretch;
    margin-bottom: 1rem;
    padding: clamp(1rem, 2vw, 1.35rem);
    border: 1px solid rgba(227, 231, 240, 0.95);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(16, 21, 47, 0.96), rgba(36, 70, 166, 0.92) 58%, rgba(176, 24, 127, 0.88)),
        var(--gl-navy);
    color: #fff;
    box-shadow: var(--gl-shadow);
}

.dashboard-hero .marca-petita {
    color: rgba(255, 255, 255, 0.72);
}

.dashboard-hero h2 {
    margin: 0.2rem 0 0.35rem;
    font-size: clamp(1.5rem, 2.4vw, 2.25rem);
    font-weight: 800;
}

.dashboard-hero p {
    max-width: 52rem;
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-weight: 700;
}

.dashboard-identitat {
    display: grid;
    align-content: center;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.12);
}

.dashboard-identitat span,
.dashboard-identitat small {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.dashboard-identitat strong {
    margin: 0.25rem 0;
    font-size: 1.12rem;
}

.dashboard-quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(142px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.dashboard-quick-action {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 4.2rem;
    padding: 0.85rem;
    border: 1px solid rgba(227, 231, 240, 0.95);
    border-radius: 10px;
    background: #fff;
    color: var(--gl-text);
    font-weight: 800;
    text-decoration: none;
    box-shadow: var(--gl-shadow-soft);
}

.dashboard-quick-action i {
    display: grid;
    width: 2.35rem;
    aspect-ratio: 1;
    place-items: center;
    border-radius: 10px;
    background: var(--gl-blue-soft);
    color: var(--gl-blue);
    font-size: 1.1rem;
}

.dashboard-quick-action:hover {
    border-color: rgba(36, 70, 166, 0.28);
    color: var(--gl-blue);
}

.dashboard-quick-action-primary {
    border-color: rgba(176, 24, 127, 0.28);
    background: linear-gradient(135deg, var(--gl-purple), var(--gl-magenta));
    color: #fff;
}

.dashboard-quick-action-primary i {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.dashboard-quick-action-primary:hover {
    color: #fff;
}

.dashboard-kpi-grid-operatiu {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.dashboard-kpi {
    position: relative;
    overflow: hidden;
}

.dashboard-kpi::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    content: "";
}

.dashboard-kpi-cap i {
    display: grid;
    width: 2.55rem;
    aspect-ratio: 1;
    place-items: center;
    border-radius: 12px;
    background: var(--gl-blue-soft);
    font-size: 1.25rem;
}

.dashboard-kpi-info::before,
.dashboard-kpi-info .dashboard-kpi-cap i {
    background: #eaf1ff;
    color: var(--gl-blue);
}

.dashboard-kpi-success::before {
    background: var(--gl-success);
}

.dashboard-kpi-success .dashboard-kpi-cap i {
    background: #eaf8ef;
    color: var(--gl-success);
}

.dashboard-kpi-warning {
    background: #fffaf0;
}

.dashboard-kpi-warning::before {
    background: #d97706;
}

.dashboard-kpi-warning .dashboard-kpi-cap i {
    background: #fff3d1;
    color: #a45b00;
}

.dashboard-kpi-danger {
    background: #fff5f5;
}

.dashboard-kpi-danger::before {
    background: var(--gl-danger);
}

.dashboard-kpi-danger .dashboard-kpi-cap i {
    background: #ffe6e8;
    color: var(--gl-danger);
}

.dashboard-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(310px, 0.75fr);
    gap: 1rem;
}

.dashboard-side-stack {
    display: grid;
    gap: 1rem;
    align-content: start;
}

.dashboard-section-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.dashboard-section-title h3 {
    margin: 0;
    font-size: 1.06rem;
    font-weight: 800;
}

.dashboard-section-title p {
    margin: 0.2rem 0 0;
    color: var(--gl-muted);
}

.dashboard-tabs {
    gap: 0.35rem;
    margin-bottom: 0.85rem;
}

.dashboard-tabs .nav-link {
    border-radius: 9px;
    color: var(--gl-text);
    font-weight: 800;
}

.dashboard-tabs .nav-link.active {
    background: var(--gl-blue);
}

.dashboard-agenda-list,
.dashboard-task-list {
    display: grid;
    gap: 0.65rem;
}

.dashboard-event {
    display: grid;
    grid-template-columns: minmax(92px, 0.22fr) minmax(0, 1fr) auto auto;
    gap: 0.8rem;
    align-items: center;
    padding: 0.85rem;
    border: 1px solid var(--gl-border);
    border-radius: 10px;
    background: #fff;
    color: var(--gl-text);
    text-decoration: none;
}

.dashboard-event:hover {
    border-color: rgba(36, 70, 166, 0.28);
    color: var(--gl-text);
}

.dashboard-event-time,
.dashboard-event-body {
    display: grid;
    min-width: 0;
}

.dashboard-event-time {
    color: var(--gl-muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.dashboard-event-time strong,
.dashboard-event-body strong {
    color: var(--gl-text);
}

.dashboard-event-body small {
    overflow: hidden;
    color: var(--gl-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-event em {
    color: var(--gl-blue);
    font-size: 0.82rem;
    font-style: normal;
    font-weight: 800;
}

.estat-success {
    background: #eaf8ef;
    color: var(--gl-success);
}

.estat-warning {
    background: #fff3d1;
    color: #8a4b00;
}

.estat-danger {
    background: #ffe6e8;
    color: var(--gl-danger);
}

.estat-info {
    background: var(--gl-blue-soft);
    color: var(--gl-blue);
}

.dashboard-month-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.35rem;
}

.dashboard-month-day {
    display: grid;
    min-height: 3.7rem;
    align-content: space-between;
    padding: 0.45rem;
    border: 1px solid var(--gl-border);
    border-radius: 8px;
    background: #fff;
    color: var(--gl-text);
    text-decoration: none;
}

.dashboard-month-day strong {
    color: var(--gl-muted);
    font-size: 0.78rem;
}

.dashboard-month-day.te-activitat {
    border-color: rgba(36, 70, 166, 0.22);
    background: var(--gl-blue-soft);
}

.dashboard-month-day.es-avui {
    border-color: rgba(176, 24, 127, 0.38);
    box-shadow: inset 0 0 0 2px rgba(176, 24, 127, 0.12);
}

.dashboard-task {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.72rem 0.75rem;
    border: 1px solid var(--gl-border);
    border-radius: 10px;
    background: #fff;
    color: var(--gl-text);
    font-weight: 800;
    text-decoration: none;
}

.dashboard-task-warning {
    background: #fffaf0;
}

.dashboard-task-danger {
    background: #fff5f5;
}

.dashboard-task-info {
    background: #f5f8ff;
}

.dashboard-chart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
}

.dashboard-money-bar {
    display: flex;
    height: 1.1rem;
    overflow: hidden;
    border-radius: 999px;
    background: #edf1f7;
}

.dashboard-money-bar .cobrat {
    background: var(--gl-success);
}

.dashboard-money-bar .pendent {
    background: var(--gl-danger);
}

.dashboard-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    margin-top: 1rem;
    color: var(--gl-muted);
    font-size: 0.86rem;
    font-weight: 800;
}

.dashboard-chart-legend div {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.dashboard-chart-legend strong {
    color: var(--gl-text);
}

.legend-dot {
    width: 0.7rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--gl-blue);
}

.legend-total,
.legend-sessions {
    background: var(--gl-blue);
}

.legend-cobrat,
.legend-assistencies {
    background: var(--gl-success);
}

.legend-pendent {
    background: var(--gl-danger);
}

.dashboard-week-chart {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.65rem;
    min-height: 180px;
    align-items: end;
}

.dashboard-week-day {
    display: grid;
    gap: 0.35rem;
    text-align: center;
}

.dashboard-week-bars {
    position: relative;
    display: flex;
    align-items: end;
    justify-content: center;
    gap: 0.22rem;
    height: 120px;
    padding: 0.35rem;
    border-radius: 9px;
    background: var(--gl-surface-soft);
}

.dashboard-week-bars span {
    width: 0.55rem;
    border-radius: 999px 999px 0 0;
}

.dashboard-week-bars .sessions {
    background: var(--gl-blue);
}

.dashboard-week-bars .assistencies {
    background: var(--gl-success);
}

.dashboard-week-bars .pendent {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--gl-danger);
}

.dashboard-week-day strong {
    font-size: 0.85rem;
}

.dashboard-week-day small {
    color: var(--gl-muted);
    font-weight: 700;
}

.presencia-resultat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.targeta-modul {
    position: relative;
    display: flex;
    min-height: 198px;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.2rem;
    border: 1px solid rgba(227, 231, 240, 0.95);
    border-radius: var(--gl-radius);
    background: var(--gl-surface);
    box-shadow: var(--gl-shadow-soft);
    color: var(--gl-text);
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.targeta-modul::after {
    position: absolute;
    right: -2.5rem;
    bottom: -3.2rem;
    width: 9rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(176, 24, 127, 0.07);
    content: "";
}

.targeta-modul:hover {
    border-color: rgba(36, 70, 166, 0.28);
    box-shadow: 0 22px 54px rgba(15, 23, 42, 0.1);
    color: var(--gl-text);
    transform: translateY(-3px);
}

.targeta-modul h3 {
    margin: 0.8rem 0 0.45rem;
    font-size: 1.22rem;
    font-weight: 800;
}

.estat-modul {
    width: fit-content;
    padding: 0.35rem 0.62rem;
    border-radius: 999px;
    background: var(--gl-blue-soft);
    color: var(--gl-blue);
    font-size: 0.76rem;
    font-weight: 800;
}

.estat-buit {
    max-width: 760px;
    padding: clamp(1.5rem, 4vw, 2.4rem);
}

.alert {
    border: 0;
    border-radius: 16px;
    box-shadow: var(--gl-shadow-soft);
}

.ajuda-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 1rem;
}

.ajuda-index,
.ajuda-contingut,
.card-taula,
.bloc-formulari,
.fitxa-client {
    padding: 1.15rem;
}

.ajuda-index h2,
.bloc-formulari h2 {
    margin: 0 0 1rem;
    font-size: 1.05rem;
    font-weight: 800;
}

.ajuda-index a {
    display: block;
    padding: 0.7rem 0.78rem;
    border-radius: 12px;
    color: var(--gl-text);
    font-weight: 700;
    text-decoration: none;
}

.ajuda-index a.actiu,
.ajuda-index a:hover {
    background: var(--gl-blue-soft);
    color: var(--gl-blue);
}

.ajuda-contingut {
    max-width: 860px;
}

.ajuda-contingut h2 {
    margin-bottom: 1rem;
    font-weight: 800;
}

.ajuda-contingut h3 {
    margin-top: 1.35rem;
    font-size: 1.15rem;
    font-weight: 800;
}

.fila-cerca {
    display: grid;
    grid-template-columns: auto minmax(220px, 1fr) auto auto;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 1rem;
}

.fila-cerca-economia {
    grid-template-columns: minmax(200px, 1.8fr) repeat(3, minmax(160px, 1fr)) auto;
}

.form-label,
legend.form-label {
    color: var(--gl-text);
    font-size: 0.88rem;
    font-weight: 700;
}

.formulari-compacte .form-label,
.formulari-compacte legend.form-label {
    margin-bottom: 0.3rem;
    font-size: 0.8rem;
}

.formulari-compacte .form-control,
.formulari-compacte .form-select {
    min-height: 2.34rem;
    padding-top: 0.38rem;
    padding-bottom: 0.38rem;
    font-size: 0.93rem;
}

.formulari-compacte .row.g-3 {
    --bs-gutter-y: 0.72rem;
    --bs-gutter-x: 0.9rem;
}

.form-control,
.form-select {
    min-height: 2.78rem;
    border-color: var(--gl-border);
    border-radius: 14px;
    background-color: #fff;
}

.form-control::placeholder {
    color: #98a2b3;
}

.formulari-client {
    display: grid;
    gap: 1rem;
}

.formulari-fitxa .bloc-formulari {
    box-shadow: none;
    background: var(--gl-surface-soft);
}

.formulari-fitxa.formulari-compacte .bloc-formulari,
.formulari-client.formulari-compacte .bloc-formulari {
    padding: 0.78rem 0.85rem;
    border-radius: 12px;
}

.fitxa-mode-edicio .bloc-formulari {
    border-color: rgba(36, 70, 166, 0.42);
    background: linear-gradient(180deg, #e6f0ff, #f8fbff);
    box-shadow: inset 0 0 0 1px rgba(36, 70, 166, 0.12), 0 10px 26px rgba(36, 70, 166, 0.06);
}

.alerta-mode-edicio {
    border-color: rgba(36, 70, 166, 0.24);
    background: #eaf2ff;
    color: #1f3563;
    font-size: 0.9rem;
}

.fitxa-mode-lectura .form-control[readonly],
.fitxa-mode-lectura .form-select:disabled {
    border-color: rgba(227, 231, 240, 0.86);
    background:
        linear-gradient(180deg, #fff, #fbfcff);
    color: var(--gl-text);
    cursor: default;
    opacity: 1;
}

.fitxa-mode-lectura textarea.form-control[readonly] {
    resize: none;
}

.relacions-cerca-pista {
    display: -webkit-box;
    max-width: 42rem;
    margin-top: 0.12rem;
    overflow: hidden;
    color: var(--gl-muted);
    font-size: 0.72rem;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.badge-pagador {
    border: 1px solid rgba(36, 70, 166, 0.24) !important;
    border-color: rgba(36, 70, 166, 0.24) !important;
    background: var(--gl-blue-soft) !important;
    color: var(--gl-blue) !important;
}

.fitxa-mode-lectura .check-targeta {
    cursor: default;
    opacity: 1;
}

.fitxa-mode-lectura .check-targeta input:disabled {
    opacity: 0.9;
}

.fitxa-mode-lectura .check-targeta:has(input:not(:checked)) {
    color: var(--gl-muted);
}

.avis-edicio {
    padding: 0.9rem 1rem;
    border: 1px solid rgba(36, 70, 166, 0.14);
    border-radius: 16px;
    background: linear-gradient(135deg, var(--gl-blue-soft), #fff);
}

.avis-edicio span {
    display: block;
    color: var(--gl-blue);
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
}

.avis-edicio p {
    margin: 0.2rem 0 0;
    color: var(--gl-muted);
}

.grid-checks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.grid-checks-compacte {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.45rem;
}

.check-targeta {
    display: flex;
    gap: 0.65rem;
    min-height: 52px;
    align-items: flex-start;
    padding: 0.8rem;
    border: 1px solid var(--gl-border);
    border-radius: 16px;
    background: var(--gl-surface-soft);
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.grid-checks-compacte .check-targeta {
    min-height: 44px;
    align-items: center;
    padding: 0.52rem 0.62rem;
    border-radius: 999px;
}

.grid-checks-compacte .check-targeta strong {
    font-size: 0.86rem;
}

.check-targeta:hover {
    transform: translateY(-1px);
}

.check-targeta:has(input:checked) {
    border-color: rgba(176, 24, 127, 0.38);
    background: var(--gl-pink-soft);
}

.check-targeta strong,
.check-targeta small {
    display: block;
}

.check-targeta small {
    color: var(--gl-muted);
}

.accions-formulari {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.fitxa-client .nav-tabs {
    gap: 0.35rem;
    border-bottom: 1px solid var(--gl-border);
    flex-wrap: wrap;
}

.fitxa-client .nav-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 0;
    border-radius: 999px;
    color: var(--gl-muted);
    font-weight: 800;
}

.fitxa-client .nav-tabs .nav-link small {
    padding: 0.15rem 0.38rem;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 700;
    background: #eef1f7;
    color: #667085;
}

.fitxa-client .nav-tabs .nav-link.nav-link-pending {
    color: #8a93a5;
}

.fitxa-client .nav-tabs .nav-link.nav-link-pending.active {
    background: #dbe2ef;
    color: #475467;
    box-shadow: none;
}

.fitxa-client .nav-tabs .nav-link:hover {
    color: var(--gl-blue);
}

.fitxa-client .nav-tabs .nav-link.active {
    background: linear-gradient(135deg, var(--gl-blue), var(--gl-purple));
    color: #fff;
    box-shadow: 0 12px 26px rgba(36, 70, 166, 0.2);
}

.fitxa-client .tab-content {
    padding: 1.25rem 0 0;
}

.grid-detalls {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.grid-detalls div {
    padding: 0.9rem;
    border: 1px solid var(--gl-border);
    border-radius: 16px;
    background: linear-gradient(180deg, #fff, #fbfcff);
}

.grid-detalls span,
.grid-detalls strong {
    display: block;
}

.grid-detalls span {
    color: var(--gl-muted);
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
}

.grid-detalls strong {
    margin-top: 0.25rem;
    font-weight: 700;
}

.estat-buit-petit {
    max-width: none;
    padding: 1rem;
    box-shadow: none;
}

.estat-buit-inline {
    border: 1px dashed #ccd3e1;
    border-radius: 14px;
    background: linear-gradient(180deg, #fbfcff, #f6f8fd);
}

.estat-buit-inline h3 {
    margin: 0.45rem 0 0.35rem;
    font-size: 1.05rem;
    font-weight: 750;
}

.llista-historial {
    display: grid;
    gap: 0.75rem;
}

.llista-historial div {
    padding: 0.9rem;
    border: 1px solid var(--gl-border);
    border-radius: 14px;
    background: var(--gl-surface-soft);
}

.llista-historial span {
    display: block;
    color: var(--gl-muted);
    font-size: 0.86rem;
}

.llista-historial p {
    margin: 0.35rem 0 0;
    color: var(--gl-muted);
}

.llista-historial-compacta {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.55rem;
}

.llista-historial-compacta div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.25rem 0.75rem;
    padding: 0.65rem 0.75rem;
}

.llista-historial-compacta p {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 0.86rem;
}

.resum-contactes {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid rgba(36, 70, 166, 0.16);
    border-radius: 18px;
    background: linear-gradient(135deg, var(--gl-blue-soft), #fff);
}

.resum-contactes span,
.resum-contactes strong {
    display: block;
}

.resum-contactes span {
    color: var(--gl-muted);
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
}

.resum-contactes strong {
    color: var(--gl-blue);
}

.table {
    --bs-table-hover-bg: #f8faff;
}

.table thead th {
    border-bottom: 1px solid var(--gl-border);
    color: var(--gl-muted);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.table tbody td {
    border-color: #edf0f6;
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
}

.resum-llistat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.resum-llistat strong {
    font-size: 0.92rem;
    color: #4b5565;
}

.filtres-datatables {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: end;
    margin-bottom: 0.8rem;
}

.filtres-datatables > div {
    width: min(220px, 100%);
}

.taula-clients {
    border: 1px solid #e7ebf4;
    border-radius: 14px;
    background: #fff;
}

.taula-clients .dataTables_wrapper {
    padding: 0.3rem 0.4rem 0.5rem;
}

.taula-clients .dataTables_filter,
.taula-clients .dataTables_length {
    margin: 0.2rem 0 0.6rem;
}

.taula-clients .dataTables_filter label,
.taula-clients .dataTables_length label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--gl-muted);
    font-size: 0.82rem;
    font-weight: 600;
}

.taula-clients .dataTables_filter input,
.taula-clients .dataTables_length select {
    min-height: 2.2rem;
    border: 1.5px solid #cfd6e6;
    border-radius: 9px;
    background: #fff;
}

.taula-clients .dataTables_filter input {
    min-width: min(360px, 42vw);
}

.taula-clients .dt-control-left,
.taula-clients .dt-buttons {
    text-align: left;
}

.taula-clients .dt-buttons {
    margin-left: 0;
}

.taula-clients .dt-buttons .btn,
.taula-clients .dt-buttons .dt-button {
    border-color: rgba(36, 70, 166, 0.36) !important;
    background: #fff !important;
    color: var(--gl-blue) !important;
    box-shadow: none !important;
}

.taula-clients .dt-buttons .btn:hover,
.taula-clients .dt-buttons .dt-button:hover {
    background: var(--gl-blue-soft) !important;
    color: var(--gl-navy) !important;
}

.taula-clients table.dataTable thead th,
.taula-clients .table thead th,
.dataTables_wrapper .table thead th {
    border-bottom: 1px solid #d8deeb !important;
    background: #eef3ff;
    color: #27324a;
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
}

.taula-clients .table thead th,
.taula-clients .table tbody td,
.dataTables_wrapper .table thead th,
.dataTables_wrapper .table tbody td {
    padding: 0.46rem 0.55rem;
}

.taula-clients .dataTables_info {
    color: var(--gl-muted);
    font-size: 0.82rem;
}

.taula-clients .dataTables_paginate .paginate_button {
    border-radius: 10px !important;
}

.taula-clients .dt-buttons {
    display: inline-flex;
    gap: 0.35rem;
    margin-left: 0.4rem;
}

.taula-clients .dt-button-collection {
    border: 1px solid var(--gl-border);
    border-radius: 14px;
    box-shadow: var(--gl-shadow-soft);
}

.grid-dues-columnes {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.8fr);
    gap: 1rem;
}

.resultat-persona,
.targeta-relacio {
    padding: 1rem;
    border: 1px solid var(--gl-border);
    border-radius: 16px;
    background: #fff;
}

.targeta-formulari {
    padding: 1rem;
    border: 1px solid var(--gl-border);
    border-radius: 18px;
    background: linear-gradient(180deg, #fff, #fbfcff);
    box-shadow: var(--gl-shadow-soft);
}

.resultat-persona {
    margin-top: 0.75rem;
    box-shadow: var(--gl-shadow-soft);
}

.resultat-persona span {
    display: block;
    color: var(--gl-muted);
}

.llista-relacions {
    display: grid;
    gap: 0.85rem;
}

.llista-documents {
    display: grid;
    gap: 0.85rem;
}

.llista-autoritzacions,
.llista-autoritzacions-formulari {
    display: grid;
    gap: 0.85rem;
}

.grid-economia {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.85rem;
}

.tpv-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
    gap: 1rem;
    align-items: start;
}

.tpv-columna,
.tpv-resultats,
.tpv-config {
    display: grid;
    gap: 1rem;
}

.tpv-card,
.tpv-resum {
    border: 1px solid rgba(227, 231, 240, 0.92);
    border-radius: var(--gl-radius);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--gl-shadow-soft);
}

.tpv-shell .btn {
    font-weight: 700;
}

.tpv-card {
    padding: 0.95rem;
}

.tpv-resum {
    position: sticky;
    top: 1rem;
    padding: 1rem;
}

.tpv-card-cap,
.tpv-resultat,
.tpv-accions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.tpv-card-cap {
    margin-bottom: 1rem;
}

.tpv-card-cap h2,
.tpv-resultat h3 {
    margin: 0;
    font-weight: 800;
}

.tpv-card-cap h2 {
    font-size: 1.02rem;
}

.tpv-resultat {
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--gl-border);
    border-radius: 16px;
    background: linear-gradient(180deg, #fff, #fbfcff);
}

.tpv-resultat p,
.tpv-resultat small {
    display: block;
    margin: 0.2rem 0 0;
    color: var(--gl-muted);
}

.tpv-conceptes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
}

.tpv-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.85rem;
}

.tpv-categories span {
    display: inline-flex;
    align-items: center;
    min-height: 1.8rem;
    padding: 0.25rem 0.65rem;
    border: 1px solid var(--gl-border);
    border-radius: 999px;
    background: var(--gl-surface-soft);
    color: var(--gl-muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.tpv-categoria-filtre {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.32rem 0.72rem;
    border: 1px solid var(--gl-border);
    border-radius: 999px;
    background: #fff;
    color: var(--gl-muted);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 800;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.tpv-categoria-filtre:hover,
.tpv-categoria-filtre:focus-visible,
.tpv-categoria-filtre.actiu {
    border-color: rgba(36, 70, 166, 0.32);
    background: var(--gl-blue-soft);
    color: var(--gl-blue);
    box-shadow: 0 8px 18px rgba(36, 70, 166, 0.08);
}

.tpv-productes-card .dataTables_wrapper {
    display: grid;
    gap: 0.7rem;
}

.tpv-productes-cerca {
    margin-bottom: 0.55rem;
}

.tpv-productes-card .table-responsive {
    max-height: 29rem;
    overflow-y: auto;
    border: 1px solid var(--gl-border);
    border-radius: 14px;
}

.tpv-productes-table {
    margin-bottom: 0 !important;
    min-width: 0;
}

.tpv-productes-card .table {
    min-width: 0;
}

.tpv-productes-table th,
.tpv-productes-table td {
    padding: 0.42rem 0.55rem;
    font-size: 0.82rem;
    vertical-align: middle;
}

.tpv-productes-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
    border-bottom: 1px solid var(--gl-border);
}

.tpv-productes-table .tpv-concepte-rapid {
    display: inline-flex;
    min-height: 0;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.35rem 0.62rem;
    border-radius: 999px;
    background: #fff;
    color: var(--gl-blue);
    text-align: center;
    transform: none;
}

.tpv-productes-table .tpv-producte-afegir {
    padding: 0.32rem 0.58rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
}

.tpv-productes-table .tpv-concepte-rapid:hover,
.tpv-productes-table .tpv-concepte-rapid:focus-visible {
    transform: none;
}

.tpv-concepte-rapid {
    display: grid;
    min-height: 4.6rem;
    align-content: center;
    gap: 0.25rem;
    padding: 0.7rem 0.75rem;
    border: 1px solid rgba(36, 70, 166, 0.16);
    border-radius: 16px;
    background: linear-gradient(180deg, var(--gl-blue-soft), #fff);
    color: var(--gl-text);
    font: inherit;
    font-weight: 800;
    text-align: left;
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.tpv-concepte-rapid i {
    color: var(--gl-blue);
    font-size: 0.86rem;
}

.tpv-concepte-rapid:hover,
.tpv-concepte-rapid:focus-visible {
    border-color: rgba(36, 70, 166, 0.35);
    box-shadow: var(--gl-shadow-soft);
    transform: translateY(-1px);
}

.tpv-concepte-rapid small {
    color: var(--gl-muted);
    font-weight: 700;
}

.tpv-total {
    display: grid;
    gap: 0.25rem;
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--gl-navy), var(--gl-blue));
    color: #fff;
}

.tpv-total span {
    color: rgba(255, 255, 255, 0.72);
    font-weight: 800;
    text-transform: uppercase;
}

.tpv-total strong {
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1;
    letter-spacing: 0;
}

.tpv-config span {
    display: block;
    color: var(--gl-muted);
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
}

.tpv-config strong {
    display: block;
    font-size: 1.05rem;
}

.tpv-linies {
    margin-top: 1rem;
}

.tpv-afegir-linia {
    display: grid;
    grid-template-columns: 1.3fr 1.15fr 1.15fr 0.55fr 0.65fr 0.55fr auto;
    gap: 0.75rem;
    align-items: end;
    margin-bottom: 0.75rem;
    padding: 0.85rem;
    border: 1px solid var(--gl-border);
    border-radius: 16px;
    background: var(--gl-surface-soft);
}

.tpv-linia-editable td {
    padding: 0.55rem 0.75rem 0.85rem;
    border-top: 0;
    background: #eef4ff;
}

.tpv-editar-linia {
    display: grid;
    grid-template-columns: 1.3fr 1.2fr 0.55fr 0.65fr 0.55fr auto;
    gap: 0.65rem;
    align-items: end;
    padding: 0.25rem;
}

.tpv-editar-linia .form-label {
    margin-bottom: 0.22rem;
}

.tpv-editar-linia-accions {
    display: inline-flex;
    gap: 0.35rem;
    justify-content: flex-end;
}

.tpv-formulari-compacte .form-control,
.tpv-formulari-compacte .form-select {
    min-height: 2.25rem;
    border-radius: 12px;
}

.tpv-accions .btn-primary {
    min-width: 12rem;
}

.tpv-accions {
    justify-content: flex-end;
    margin-top: 1rem;
}

.targeta-relacio,
.targeta-document {
    display: flex;
    justify-content: space-between;
    gap: 0.8rem;
    background: linear-gradient(180deg, #fff, #fbfcff);
    box-shadow: var(--gl-shadow-soft);
}

.targeta-document {
    padding: 0.85rem;
    border: 1px solid var(--gl-border);
    border-radius: 16px;
}

.document-contingut {
    display: grid;
    gap: 0.45rem;
    min-width: 0;
}

.document-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    color: var(--gl-muted);
    font-size: 0.82rem;
}

.document-bloc {
    display: grid;
    gap: 0.12rem;
}

.document-bloc span {
    color: var(--gl-muted);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.document-fitxer {
    display: block;
    width: fit-content;
    max-width: 100%;
    overflow: hidden;
    padding: 0.28rem 0.48rem;
    border-radius: 9px;
    background: var(--gl-surface-soft);
    color: #344054;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.targeta-autoritzacio,
.targeta-autoritzacio-form {
    padding: 0.82rem;
    border: 1px solid var(--gl-border);
    border-radius: 16px;
    background: linear-gradient(180deg, #fff, #fbfcff);
    box-shadow: var(--gl-shadow-soft);
}

.targeta-info {
    border-style: dashed;
}

.targeta-autoritzacio.autoritzada {
    border-color: rgba(22, 138, 74, 0.2);
    background: linear-gradient(180deg, #fff, #f5fff9);
}

.targeta-relacio h4,
.targeta-document h4,
.targeta-autoritzacio h4 {
    margin: 0 0 0.2rem;
    font-weight: 750;
    font-size: 0.98rem;
}

.targeta-relacio p,
.targeta-document p,
.targeta-autoritzacio p,
.targeta-autoritzacio-form p {
    margin: 0.15rem 0;
    color: var(--gl-muted);
}

.estat-positiu {
    background: #e9f9ef;
    color: var(--gl-success);
}

.estat-neutre {
    background: var(--gl-surface-soft);
    color: var(--gl-muted);
}

.estat-alerta {
    background: #fff4e5;
    color: #9a4f00;
}

.autoritzacio-capcalera {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.autoritzacio-capcalera h3 {
    margin: 0 0 0.2rem;
    font-size: 1.05rem;
    font-weight: 800;
}

.switch-autoritzacio {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.55rem;
    font-weight: 800;
}

.switch-autoritzacio input {
    width: 1.2rem;
    height: 1.2rem;
    accent-color: var(--gl-blue);
}

.notes-document {
    max-height: 6rem;
    overflow: auto;
    padding: 0.58rem;
    border-radius: 12px;
    background: var(--gl-surface-soft);
}

.text-truncat {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.text-truncat-2 {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.badges-relacio {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.55rem;
}

.badges-relacio span {
    padding: 0.34rem 0.58rem;
    border-radius: 999px;
    background: var(--gl-pink-soft);
    color: var(--gl-magenta);
    font-size: 0.76rem;
    font-weight: 800;
}

.accions-relacio {
    display: grid;
    gap: 0.5rem;
    align-content: start;
}

@media (max-width: 980px) {
    .app-privada {
        display: block;
        grid-template-columns: 1fr;
    }

    .menu-privat {
        position: sticky;
        z-index: 20;
        top: 0;
        height: auto;
        padding: 0.7rem;
        gap: 0.65rem;
        border-radius: 0 0 18px 18px;
        box-shadow: 0 14px 30px rgba(16, 21, 47, 0.18);
    }

    .menu-privat::before {
        width: 38px;
        height: 3px;
        margin-bottom: 0.65rem;
    }

    .menu-privat > div:first-child {
        min-width: 0;
    }

    .marca-panel {
        gap: 0.55rem;
    }

    .marca-icon {
        width: 2.35rem;
        border-radius: 12px;
        font-size: 0.85rem;
    }

    .marca-panel strong {
        font-size: 0.94rem;
    }

    .marca-panel small {
        font-size: 0.72rem;
    }

    .nav-panel {
        display: flex;
        gap: 0.4rem;
        margin-top: 0.75rem !important;
        overflow-x: auto;
        padding-bottom: 0.2rem;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }

    .nav-panel a,
    .nav-panel summary {
        flex: 0 0 auto;
        min-height: 2.35rem;
        padding: 0.56rem 0.72rem;
        border-radius: 999px;
        font-size: 0.86rem;
        white-space: nowrap;
    }

    .nav-panel a::before,
    .nav-panel summary::before {
        display: none;
    }

    .nav-grup {
        flex: 0 0 auto;
    }

    .nav-submenu {
        margin-left: 0.35rem;
        padding-left: 0.35rem;
    }

    .usuari-menu {
        display: none;
    }

    .contingut-privat {
        width: 100%;
        padding: 0.9rem;
    }

    .topbar-privada {
        gap: 0.65rem;
    }

    .topbar-usuari small {
        display: none;
    }

    .hero-panel {
        align-items: flex-start;
        padding: 1rem;
    }

    .hero-panel::after {
        opacity: 0.55;
    }

    .hero-panel h2,
    .estat-buit h2 {
        font-size: 1.45rem;
    }

    .grid-moduls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-hero,
    .dashboard-main-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-kpi-grid-operatiu {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-event {
        grid-template-columns: minmax(0, 1fr);
    }

    .dashboard-event em {
        justify-self: start;
    }

    .dashboard-avis {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-avis .btn {
        align-self: flex-start;
    }

    .ajuda-layout {
        grid-template-columns: 1fr;
    }

    .grid-detalls,
    .grid-checks,
    .grid-dues-columnes,
    .tpv-shell {
        grid-template-columns: 1fr;
    }

    .tpv-resum {
        position: static;
    }

    .tpv-afegir-linia {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tpv-afegir-linia .btn,
    .tpv-editar-linia-accions {
        grid-column: 1 / -1;
    }

    .tpv-editar-linia {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .card-taula,
    .bloc-formulari,
    .fitxa-client,
    .targeta-formulari,
    .tpv-card,
    .tpv-resum {
        border-radius: 14px;
    }

    .table-responsive,
    .taula-clients {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .taula-clients .dataTables_wrapper {
        min-width: 0;
    }

    .taula-clients .dataTables_filter,
    .taula-clients .dataTables_length,
    .taula-clients .dt-buttons {
        width: 100%;
        margin-left: 0;
    }

    .taula-clients .dataTables_filter label,
    .taula-clients .dataTables_length label {
        width: 100%;
        justify-content: space-between;
    }

    .taula-clients .dataTables_filter input,
    .taula-clients .dataTables_length select {
        max-width: 100%;
    }

    .dataTables_wrapper .row {
        --bs-gutter-y: 0.5rem;
    }
}

@media (max-width: 640px) {
    body {
        background: linear-gradient(180deg, #fbfcff 0%, var(--gl-bg) 100%);
    }

    .menu-privat {
        padding: 0.62rem;
        border-radius: 0 0 14px 14px;
    }

    .marca-panel div {
        min-width: 0;
    }

    .marca-panel strong,
    .marca-panel small {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .nav-panel a,
    .nav-panel summary {
        min-height: 2.2rem;
        padding: 0.5rem 0.62rem;
        font-size: 0.81rem;
    }

    .nav-panel a i,
    .nav-panel summary i {
        font-size: 0.92rem;
    }

    .topbar-privada,
    .topbar-usuari,
    .hero-panel,
    .hero-identitat-client,
    .targeta-relacio,
    .targeta-document,
    .autoritzacio-capcalera,
    .resum-contactes,
    .tpv-card-cap,
    .tpv-resultat,
    .tpv-accions {
        align-items: flex-start;
        flex-direction: column;
    }

    .topbar-privada {
        margin-bottom: 0.5rem;
        padding-bottom: 0.45rem;
    }

    .topbar-context {
        font-size: 0.74rem;
    }

    .topbar-usuari {
        display: none;
    }

    .topbar-usuari {
        border-radius: 18px;
        text-align: left;
    }

    .grid-moduls,
    .dashboard-kpi-grid,
    .dashboard-kpi-grid-operatiu,
    .dashboard-chart-grid,
    .nav-panel,
    .fila-cerca,
    .tpv-afegir-linia {
        grid-template-columns: 1fr;
    }

    .dashboard-quick-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-quick-action {
        min-height: 3.8rem;
        padding: 0.7rem;
    }

    .dashboard-section-title {
        align-items: stretch;
        flex-direction: column;
    }

    .dashboard-section-title .btn {
        width: 100%;
    }

    .dashboard-month-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .dashboard-week-chart {
        gap: 0.35rem;
    }

    .dashboard-week-bars {
        height: 94px;
        padding: 0.25rem;
    }

    .contingut-privat {
        padding: 0.75rem;
    }

    .hero-panel,
    .estat-buit,
    .ajuda-contingut,
    .ajuda-index,
    .card-taula,
    .bloc-formulari,
    .fitxa-client {
        padding: 0.85rem;
        border-radius: 14px;
    }

    .hero-fitxa-client .d-flex.flex-wrap.gap-2,
    .hero-panel > .d-flex,
    .accions-formulari,
    .accions-relacio,
    .tpv-accions {
        width: 100%;
    }

    .hero-fitxa-client .btn,
    .hero-fitxa-client form,
    .hero-panel-compacte .btn,
    .dashboard-avis .btn,
    .accions-formulari .btn,
    .accions-formulari button,
    .accions-relacio .btn,
    .accions-relacio form,
    .tpv-accions .btn,
    .tpv-accions form {
        width: 100%;
    }

    .hero-identitat-client {
        width: 100%;
    }

    .avatar-client-gran {
        width: 4rem;
        height: 4rem;
        font-size: 1.35rem;
    }

    .fitxa-meta-badges {
        gap: 0.28rem;
    }

    .fitxa-client .nav-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 0.35rem;
        -webkit-overflow-scrolling: touch;
    }

    .fitxa-client .nav-tabs .nav-item,
    .fitxa-client .nav-tabs .nav-link {
        flex: 0 0 auto;
    }

    .fitxa-client .nav-tabs .nav-link {
        padding: 0.48rem 0.7rem;
        font-size: 0.82rem;
    }

    .fitxa-client .tab-content {
        padding-top: 0.85rem;
    }

    .grid-detalls div,
    .llista-historial div,
    .targeta-formulari {
        padding: 0.72rem;
        border-radius: 12px;
    }

    .filtres-datatables > div,
    .filtres-datatables .form-select {
        width: 100%;
    }

    .dataTables_wrapper .row > * {
        width: 100%;
        text-align: left !important;
    }

    .taula-clients .dataTables_filter label,
    .taula-clients .dataTables_length label {
        display: grid;
        gap: 0.3rem;
        align-items: start;
    }

    .taula-clients .dataTables_filter input {
        width: 100% !important;
        margin-left: 0 !important;
    }

    .taula-clients .dt-buttons,
    .taula-clients .dt-buttons .btn,
    .taula-clients .dt-buttons .dt-button {
        width: 100%;
    }

    .table-responsive .table,
    .taula-clients .table,
    .dataTables_wrapper .table {
        min-width: 720px;
    }

    .table-responsive .table thead th,
    .table-responsive .table tbody td,
    .taula-clients .table thead th,
    .taula-clients .table tbody td,
    .dataTables_wrapper .table thead th,
    .dataTables_wrapper .table tbody td {
        padding: 0.52rem 0.58rem;
        font-size: 0.83rem;
    }

    .tpv-conceptes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.55rem;
    }

    .tpv-concepte-rapid {
        min-height: 4.25rem;
        padding: 0.62rem;
    }

    .tpv-total {
        padding: 0.85rem;
        border-radius: 14px;
    }

    .tpv-total strong {
        font-size: 2rem;
    }

    .tpv-afegir-linia {
        grid-template-columns: 1fr;
        padding: 0.7rem;
    }

    .tpv-editar-linia {
        grid-template-columns: 1fr;
    }

    .document-fitxer {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .tpv-conceptes {
        grid-template-columns: 1fr;
    }

    .marca-panel strong {
        max-width: 13rem;
    }

    .btn {
        white-space: normal;
    }
}